czg_team/cashier_app
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

完成分销基础设置页面，分销员列表

Browse Source
This commit is contained in:
YeMingfei666
2025-11-19 18:26:00 +08:00
parent 3f860e4733
commit f03d8fdbb4
10 changed files with 1784 additions and 408 deletions
Download Patch File Download Diff File Expand all files Collapse all files

458
pageMarket/distribution/components/config.vue
View File

@@ -1,93 +1,175 @@
<template>
<view class="box">
<view class="u-m-t-32 container">
<view class="u-flex u-row-between u-m-b-16">
<text class="font-bold color-333">可用门店</text>
</view>
<my-shop-select
v-model:selShops="form.shopIdList"
v-model:useType="form.useType"
></my-shop-select>
</view>
<view class="u-m-t-32 container">
<view class="u-flex u-row-between">
<text class="font-bold color-333 u-m-b-16">适用用户</text>
</view>
<userTypes v-model="form.applicableUser"></userTypes>
</view>
<view class="u-m-t-32 container">
<view class="u-flex u-row-between">
<text class="font-bold color-333">返现类型</text>
</view>
<view class="u-m-t-16">
<up-radio-group v-model="form.cashbackType" placement="row">
<up-radio
v-for="item in cashbackTypes"
:key="item.value"
:name="item.value"
:label="item.label"
>
<template #label>
<text>
{{ item.label }}
</text>
</template>
</up-radio>
</up-radio-group>
</view>
<view class="u-flex u-row-between u-m-t-32">
<text class="font-bold color-333">阶梯设置</text>
</view>
<view
class="u-m-t-32 u-flex u-row-between gap-40"
v-for="(item, index) in form.cashbackStepList"
:key="index"
>
<view class="u-flex u-col-top">
<view class="no-wrap u-m-r-16 u-m-t-14">{{ returnName(index) }}</view>
<view class="u-flex-1">
<view class="u-flex">
<text class="u-m-r-24"> 返现门槛</text>
<input
class="my-input"
type="digit"
v-model="item.amount"
placeholder=""
/>
<text class="text-tips text-tips1">元</text>
</view>
<view class="u-flex u-m-t-24">
<text class="u-m-r-24"> {{form.cashbackType === 'percentage' ? '返现比例' : '返现金额'}}</text>
<input
class="my-input"
type="number"
v-model="item.cashbackAmount"
@blur="inputBlur($event, index)"
:max="form.cashbackType === 'percentage' ? 100 : 999999"
placeholder=""
/>
<text class="text-tips text-tips1">{{ returnUnit }} </text>
<text class="color-red u-m-l-10" @click="deleteThreshold(index)"
>删除</text
>
</view>
</view>
<view class="u-m-t-32 container" style="padding-left: 0; padding-right: 0">
<view class="x-padding">
<view class="u-flex u-row-between">
<text class="font-bold color-333">开通方式</text>
</view>
<view class="u-m-t-16">
<up-radio-group v-model="form.openType" placement="row">
<up-radio
v-for="item in opentypes"
:key="item.value"
:name="item.value"
:label="item.label"
>
<template #label>
<text>
{{ item.label }}
</text>
</template>
</up-radio>
</up-radio-group>
</view>
</view>
<button class="add u-m-t-32" @click="addcashbackStepList">添加</button>
<template v-if="form.openType == 'auto'">
<view class="u-m-t-24">
<up-line></up-line>
</view>
<view class="x-padding u-m-t-24">
<view class="u-flex u-row-between">
<text class="font-bold color-333">获得佣金条件</text>
</view>
<view class="u-flex u-m-t-16">
<input
class="number-box"
placeholder="请输入"
placeholder-class="color-999 u-font-28"
type="number"
v-model="form.inviteCount"
/>
<view class="unit">人</view>
</view>
<view class="color-999 u-font-24 u-m-t-8"
>邀请达到指定人数才可赚取佣金</view
>
<view class="u-m-t-24">
<up-line></up-line>
</view>
<view class="u-flex u-row-between u-m-t-20">
<text class="font-bold color-333">被邀请人消费有效</text>
<up-switch :active-value="1" :inactive-value="0" v-model="form.inviteConsume"></up-switch>
</view>
</view>
</template>
<template v-if="form.openType == 'pay'">
<view class="u-m-t-24">
<up-line></up-line>
</view>
<view class="x-padding u-m-t-24">
<view class="u-flex u-row-between">
<text class="font-bold color-333">付费金额</text>
</view>
<view class="u-flex u-m-t-16">
<input
class="number-box"
placeholder="请输入"
placeholder-class="color-999 u-font-28"
type="number"
v-model="form.payAmount"
/>
<view class="unit">元</view>
</view>
</view>
</template>
</view>
<view class="u-m-t-32 container" style="padding-left: 0; padding-right: 0">
<view class="x-padding">
<view class="u-flex u-row-between">
<text class="font-bold color-333">分销奖励次数</text>
</view>
<view class="u-m-t-16">
<up-radio-group v-model="isLimitCount" placement="row">
<up-radio
v-for="item in isLimitCounts"
:key="item.value"
:name="item.value"
:label="item.label"
>
<template #label>
<text>
{{ item.label }}
</text>
</template>
</up-radio>
</up-radio-group>
</view>
</view>
<template v-if="isLimitCount == 0">
<view class="u-m-t-24 x-padding">
<up-line></up-line>
</view>
<view class="x-padding u-m-t-24">
<view class="u-flex u-row-between">
<text class="font-bold color-333">每人奖励</text>
</view>
<view class="u-flex u-m-t-16">
<input
class="number-box"
placeholder="请输入"
placeholder-class="color-999 u-font-28"
type="number"
v-model="form.rewardCount"
/>
<view class="unit">次</view>
</view>
<view class="u-m-t-24">
<up-line></up-line>
</view>
</view>
</template>
<view class="x-padding u-m-t-24">
<view class="u-flex u-row-between">
<text class="font-bold color-333">结算时长</text>
</view>
<view class="u-flex u-m-t-16">
<input
class="number-box"
placeholder="请输入"
placeholder-class="color-999 u-font-28"
type="number"
v-model="form.settlementDay"
/>
<view class="unit">天</view>
</view>
<view class="u-m-t-24">
<up-line></up-line>
</view>
</view>
</view>
<view class="u-m-t-32 container">
<view
class="u-flex u-row-between u-p-b-26"
@click="go.to('PAGES_DISTRIBUTION_LEVEL_LIST')"
>
<text class="font-bold color-333">分销员等级</text>
<view class="u-flex">
<text class="u-font-24">去设置</text>
<up-icon name="arrow-right"></up-icon>
</view>
</view>
<up-line></up-line>
<view class="u-flex u-row-between u-p-t-26">
<text class="font-bold color-333">未开通页面</text>
<view class="u-flex">
<text class="u-font-28 color-999">请前往PC端设置</text>
</view>
</view>
</view>
<my-bottom-btn-group @save="save" @cancel="cancel"></my-bottom-btn-group>
</view>
</template>
<script setup>
import { reactive, computed, onMounted } from "vue";
<script setup>
import { reactive, computed, onMounted, ref, inject } from "vue";
import userTypes from "./user-types.vue";
import * as consumeCashbackApi from "@/http/api/market/consumeCashback.js";
import {
onLoad,
onReady,
@@ -96,60 +178,67 @@ import {
onReachBottom,
onBackPress,
} from "@dcloudio/uni-app";
import go from "@/commons/utils/go.js";
//返现类型
const cashbackTypes = [
import { watch } from "vue";
const distributionStore = inject("distributionStore");
//分销奖励次数
const isLimitCount = ref(0);
const isLimitCounts = [
{
value: "percentage",
label: "按比例返现",
value: 0,
label: "限制",
},
{
value: "fix",
label: "固定金额",
value: 1,
label: "不限制",
},
];
//开通方式
const opentypes = [
{
value: "auto",
label: "自动开通",
},
{
value: "manual",
label: "手动开通",
},
{
value: "pay",
label: "付费开通",
},
];
const form = reactive({
isEnable: 0,
cashbackStepList: [],
shopIdList: [],
useType: "all",
applicableUser: "all",
cashbackType: "percentage",
isEnable: 1,
openType: "pay",
inviteCount: 1,
inviteConsume: 0,
payAmount: 0,
rewardCount: 1,
settlementDay: 1,
upgradeType: "auto",
notActivatedPage: null,
levelConfigList: [],
});
function addcashbackStepList() {
form.cashbackStepList.push({
amount: 0,
cashbackAmount: 0,
});
}
function inputBlur(e, index) {
const value = e.detail.value;
if (form.cashbackType === "percentage") {
if (e.detail.value >= 100) {
form.cashbackStepList[index].cashbackAmount = 100;
} else if (e.detail.value < 0) {
form.cashbackStepList[index].cashbackAmount = 0;
watch(
() => isLimitCount.value,
(newval) => {
if (newval) {
form.rewardCount = -1;
} else {
form.cashbackStepList[index].cashbackAmount =e.detail.value;
}
} else {
if (e.detail.value < 0) {
form.cashbackStepList[index].cashbackAmount = 0;
} else if(e.detail.value > form.cashbackStepList[index].amount) {
form.cashbackStepList[index].cashbackAmount = form.cashbackStepList[index].amount;
} else {
form.cashbackStepList[index].cashbackAmount =e.detail.value;
form.rewardCount = "";
}
}
}
);
async function save() {
console.log(form);
const submitData = {
...form,
};
const res = await consumeCashbackApi.update(submitData);
const res = await distributionStore.editConfig(submitData);
uni.showToast({
title: "更新成功",
icon: "none",
@@ -160,105 +249,26 @@ async function save() {
function cancel() {
uni.navigateBack();
}
watch(
() => distributionStore.config,
(newval) => {
setForm(newval);
}
);
function deleteThreshold(index) {
form.cashbackStepList.splice(index, 1);
}
function setForm(data) {
data.cashbackStepList=data.cashbackStepList||[]
if (data.rewardCount == -1) {
isLimitCount.value = 1;
}
Object.assign(form, data);
console.log(form);
}
const returnUnit = computed(() => {
return form.cashbackType === "percentage" ? "%" : "元";
});
const numChineseMap = {
0: "零",
1: "一",
2: "二",
3: "三",
4: "四",
5: "五",
6: "六",
7: "七",
8: "八",
9: "九",
10: "十",
100: "百",
1000: "千",
};
// 辅助函数：将数字转换为中文数字
function numberToChinese(n) {
if (n < 10) {
return numChineseMap[n];
}
// 处理10-99
if (n < 100) {
const ten = Math.floor(n / 10);
const unit = n % 10;
if (ten === 1) {
return unit === 0 ? "十" : `十${numChineseMap[unit]}`;
} else {
return unit === 0
? `${numChineseMap[ten]}十`
: `${numChineseMap[ten]}十${numChineseMap[unit]}`;
}
}
// 处理100-999
if (n < 1000) {
const hundred = Math.floor(n / 100);
const remainder = n % 100;
if (remainder === 0) {
return `${numChineseMap[hundred]}百`;
} else {
return `${numChineseMap[hundred]}百${
remainder < 10 ? "零" : ""
}${numberToChinese(remainder)}`;
}
}
// 处理1000-9999
if (n < 10000) {
const thousand = Math.floor(n / 1000);
const remainder = n % 1000;
if (remainder === 0) {
return `${numChineseMap[thousand]}千`;
} else {
return `${numChineseMap[thousand]}千${
remainder < 100 ? "零" : ""
}${numberToChinese(remainder)}`;
}
}
// 更大的数字可以继续扩展（如万、亿等），这里以千为单位示例
return n.toString(); // 超过范围时返回数字本身（可根据需求扩展）
}
// 主函数：根据索引返回对应的组名
function returnName(index) {
const groupNumber = index + 1; // 索引从0开始，组号从1开始
const chineseNumber = numberToChinese(groupNumber);
return `第${chineseNumber}组`;
}
async function getData() {
const res = await consumeCashbackApi.getConfig();
if (res) {
setForm(res);
}
}
onMounted(() => {
getData();
});
onMounted(() => {});
</script>
<style lang="scss" scoped>
page {
background: #f7f7f7;
}
<style lang="scss" scoped>
.x-padding {
padding: 0 24rpx;
}
@@ -309,4 +319,30 @@ page {
.color-red {
color: #ff2f2f;
}
</style>
$height: 70rpx;
.number-box {
font-size: 28rpx;
padding: 0 26rpx;
border-radius: 6rpx 0 0 6rpx;
border-top: 2rpx solid #d9d9d9;
border-bottom: 2rpx solid #d9d9d9;
border-left: 2rpx solid #d9d9d9;
background: #fff;
box-sizing: border-box;
height: $height;
flex: 1;
line-height: $height;
}
.unit {
display: flex;
padding: 0 38rpx;
height: $height;
line-height: $height;
align-items: center;
border-radius: 0 6rpx 6rpx 0;
border: 2rpx solid #d9d9d9;
background: #f7f7fa;
font-size: 28rpx;
color: #999999;
}
</style>

268
pageMarket/distribution/components/fenxiao-user-list.vue Normal file
View File

@@ -0,0 +1,268 @@
<template>
<view class="list u-font-28">
<view class="u-m-t-32 item" v-for="item in list" :key="item.id">
<view class="u-flex u-row-between">
<view class="color-333 u-font-28">
<view> 用户昵称 </view>
<view class="u-m-t-4">
<text class="color-333 font-bold"> {{ item.shopUserName }}</text>
</view>
</view>
<view>
<view class="color-main font-bold">{{
item.distributionLevelName
}}</view>
<view class="color-666 u-font-24 u-m-t-4">{{ item.createTime }}</view>
</view>
</view>
<view class="color-333 u-flex u-row-between u-font-28 u-m-t-16 money">
<view>
<view class="color-666">总收益</view>
<view class="color-333 u-m-t-16 font-700 u-font-32">{{
item.totalIncome || 0
}}</view>
</view>
<view>
<view class="color-666">已入账</view>
<view class="color-333 u-m-t-16 font-700 u-font-32">{{
item.receivedIncome || 0
}}</view>
</view>
<view>
<view class="color-666">未入账</view>
<view class="color-333 u-m-t-16 font-700 u-font-32">{{
item.pendingIncome || 0
}}</view>
</view>
</view>
<view class="u-m-t-16 u-flex u-row-right">
<view class="more" @click="moreShow(item)">更多</view>
</view>
</view>
<view class="u-p-30">
<up-loadmore :status="isEnd ? 'nomore' : 'loading'"></up-loadmore>
</view>
<view style="height: 100rpx"></view>
<view class="bottom">
<my-button>添加分销员</my-button>
</view>
<up-action-sheet
:show="showActions"
:actions="actions"
@select="handleSelect"
@close="showActions = false"
cancel-text="取消"
></up-action-sheet>
<Modal v-model="modalData.show" :title="modalData.title"
@confirm="handleConfirm"
>
<view class="u-p-48" v-if="modalData.key == 'change-group'">
<view class="u-m-r-36 u-m-b-24">分销组</view>
<up-radio-group v-model="group" placement="row" place="row">
<up-radio
v-for="item in distributionStore.config.levelConfigList"
:key="item.id"
:name="item.id"
:label="item.name"
>
<template #label>
<text>
{{ item.name }}
</text>
</template>
</up-radio>
</up-radio-group>
</view>
<view class="u-p-48 u-flex" v-if="modalData.key == 'reset-group'">
<up-icon name="info-circle" color="#FF2F2F" size="20"></up-icon>
<view class="u-font-32 color-333 u-m-l-20"
>是否确认重置分销组 重置后将会按照用户的实际数据匹配分销组</view
>
</view>
<view class="u-p-48 u-flex" v-if="modalData.key == 'cancel-group'">
<up-icon name="info-circle" color="#FF2F2F" size="20"></up-icon>
<view class="u-font-32 color-333 u-m-l-20">是否确认取消分销员</view>
</view>
</Modal>
</view>
</template>
<script setup>
import {
ref,
reactive,
watch,
toRaw,
onMounted,
onUnmounted,
inject,
} from "vue";
import Modal from "@/pageMarket/components/modal.vue";
const props = defineProps({
list: {
type: Array,
default: () => [],
},
isEnd: {
type: Boolean,
default: false,
},
});
//选中的分销组
const group = ref("");
const distributionStore = inject("distributionStore");
const distributionApi = inject("distributionApi");
const modalData = reactive({
show: false,
title: "",
key: "",
data: null,
});
const showActions = ref(false);
const $actions = [
{
name: "更改分销组",
value: "change-group",
},
{
name: "重置分销组",
value: "reset-group",
},
{
name: "恢复分销员",
value: "back-fenxiao",
},
{
name: "取消分销员",
value: "cancel-fenxiao",
},
];
const actions = ref($actions);
function moreShow(item) {
modalData.data = item;
group.value = item.distributionLevelId;
if (item.isAssignLevel == 0) {
actions.value = $actions.filter((item) => item.value !== "reset-group");
} else {
actions.value = $actions.filter((item) => item.value !== "change-group");
}
if(item.status == 1){
actions.value = actions.value.filter((item) => item.value !== "back-fenxiao");
}
if(item.status == 9){
actions.value = actions.value.filter((item) => item.value !== "cancel-fenxiao");
}
showActions.value = true;
}
function handleSelect(item) {
console.log(item);
modalData.title = item.name;
modalData.key = item.value;
showActions.value = false;
modalData.show = true;
}
const emits=defineEmits(["refresh"]);
async function handleConfirm() {
if (modalData.key == "reset-group") {
await distributionApi.resetLevel({
id: modalData.data.id,
shopId: uni.getSystemInfoSync("shopInfo").id || "",
});
}
if (modalData.key == "change-group") {
const level=distributionStore.config.levelConfigList.find((item) => item.id == group.value)
await distributionApi.editDistributionUser({
id: modalData.data.id,
isAssignLevel:1,
distributionLevelId:group.value,
distributionLevelName:level.name,
});
emits("refresh");
}
if (modalData.key == "cancel-fenxiao") {
await distributionApi.editDistributionUser({
id: modalData.data.id,
status:9
});
emits("refresh");
}
if (modalData.key == "back-fenxiao") {
await distributionApi.editDistributionUser({
id: modalData.data.id,
status:1
});
emits("refresh");
}
group.value = "";
modalData.show = false;
}
</script>
<style lang="scss">
.list {
padding: 0 30rpx;
.item {
padding: 32rpx 24rpx;
border-radius: 14rpx;
background-color: #fff;
overflow: hidden;
}
}
.tag {
border-radius: 12rpx;
padding: 8rpx 22rpx;
font-size: 28rpx;
&.success {
background-color: #edfff0;
color: #5bbc6d;
}
&.end {
background-color: #f7f7f7;
color: #999;
}
}
.my-btn {
font-size: 28rpx;
line-height: 36rpx;
padding: 8rpx 32rpx;
border-radius: 12rpx;
margin: 0;
}
.money {
background-color: #f8f8f8;
border-radius: 8rpx;
padding: 16rpx 28rpx;
}
.more {
display: flex;
height: 56rpx;
padding: 8rpx 28rpx;
justify-content: center;
align-items: center;
gap: 20rpx;
border-radius: 28rpx;
border: 2rpx solid $my-main-color;
color: $my-main-color;
background: #fff;
}
.bottom {
position: fixed;
bottom: calc(env(safe-area-inset-bottom) + 30rpx);
left: 30rpx;
right: 30rpx;
}
</style>