gxwebsoft/mp-10584
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(shop): 完善分销商业务功能

Browse Source 
- 在ShopDealerCapital模型中新增分销商昵称字段
- 在ShopDealerUser模型中新增类型和头像字段
- 更新资本流水页面显示分销商昵称和用户ID组合信息
- 修改收益列标题为收益类型并隐藏对方用户列
- 更新分销商用户页面类型标签文本并添加二维码生成功能
- 添加二维码预览弹窗支持复制链接和打开原图
- 优化分销商用户编辑弹窗界面布局和字段验证
- 新增关联用户选择功能并完善表单验证规则
- 添加支付密码管理和佣金信息展示功能
This commit is contained in:
赵忠林
2026-01-26 22:55:23 +08:00
parent e2382aeeab
commit 26978de65c
6 changed files with 363 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/api/shop/shopDealerCapital/model/index.ts
View File

@@ -8,6 +8,8 @@ export interface ShopDealerCapital {
id?: number;
// 分销商用户ID
userId?: number;
// 分销商昵称
nickName?: string;
// 订单ID
orderId?: number;
// 订单编号

4
src/api/shop/shopDealerUser/model/index.ts
View File

@@ -6,8 +6,12 @@ import type { PageParam } from '@/api';
export interface ShopDealerUser {
// 主键ID
id?: number;
// 类型 0经销商 1企业 2集团
type?: number;
// 自增ID
userId?: number;
// 头像
avatar?: string;
// 姓名
realName?: string;
// 手机号

16
src/views/shop/shopDealerCapital/components/search.vue
View File

@@ -57,12 +57,12 @@
const handleExport = async () => {
const array: (string | number)[][] = [
[
'用户ID',
'流动类型',
'订单号',
'用户',
'收益类型',
'金额',
'订单编号',
'对方用户ID',
`创建时间`,
'描述',
'创建时间',
'租户ID'
]
];
@@ -73,11 +73,11 @@
list.value = data?.list || [];
list.value?.forEach((d: ShopDealerCapital) => {
array.push([
`${d.userId}`,
`${d.orderNo}`,
`${d.nickName}(${d.userId})`,
`${d.flowType == 10 ? '佣金收入' : ''}`,
`${d.money}`,
`${d.orderNo}`,
`${d.toUserId}`,
`${d.comments}`,
`${d.createTime}`,
`${d.tenantId}`
]);

18
src/views/shop/shopDealerCapital/index.vue
View File

@@ -24,7 +24,7 @@
<a-image :src="record.image" :width="50" />
</template>
<template v-if="column.key === 'userId'">
<div>{{ record.nickName }}</div>
<div>{{ record.nickName }}({{ record.userId }})</div>
</template>
<template v-if="column.key === 'status'">
<a-tag v-if="record.status === 0" color="green">显示</a-tag>
@@ -135,7 +135,7 @@
fixed: 'left'
},
{
title: '收益',
title: '收益类型',
dataIndex: 'flowType',
key: 'flowType',
align: 'center',
@@ -177,13 +177,13 @@
};
}
},
{
title: '对方用户',
dataIndex: 'toUserId',
key: 'toUserId',
align: 'center',
customRender: ({ text }) => (text ? `ID: ${text}` : '-')
},
// {
// title: '对方用户',
// dataIndex: 'toUserId',
// key: 'toUserId',
// align: 'center',
// customRender: ({ text }) => (text ? `ID: ${text}` : '-')
// },
{
title: '描述',
dataIndex: 'comments',

376
src/views/shop/shopDealerUser/components/shopDealerUserEdit.vue
View File

@@ -1,11 +1,12 @@
<!-- 编辑弹窗 -->
<template>
<ele-modal
:width="800"
:width="900"
:visible="visible"
:maskClosable="false"
:maxable="maxable"
:title="isUpdate ? '编辑分销商用户记录表' : '添加分销商用户记录表'"
:confirm-loading="loading"
:title="isUpdate ? '编辑分销商用户' : '添加分销商用户'"
:body-style="{ paddingBottom: '28px' }"
@update:visible="updateVisible"
@ok="save"
@@ -19,150 +20,176 @@
styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
"
>
<a-form-item label="类型 0经销商 1企业 2集团" name="type">
<a-input
allow-clear
placeholder="请输入类型 0经销商 1企业 2集团"
v-model:value="form.type"
<a-divider orientation="left">
<span style="color: #1890ff; font-weight: 600">基础信息</span>
</a-divider>
<a-row :gutter="16">
<a-col :span="24" v-if="!isUpdate">
<a-form-item label="关联用户" name="userId">
<SelectUser
:key="selectedUserText"
:value="selectedUserText"
:placeholder="`选择用户`"
@done="onChooseUser"
/>
</a-form-item>
<a-form-item label="自增ID" name="userId">
</a-col>
<a-col :span="12">
<a-form-item label="类型" name="type">
<a-select v-model:value="form.type" placeholder="请选择类型">
<a-select-option :value="0">经销商</a-select-option>
<a-select-option :value="1">企业</a-select-option>
<a-select-option :value="2">集团</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="手机号" name="mobile">
<a-input
allow-clear
placeholder="请输入自增ID"
v-model:value="form.userId"
:maxlength="11"
placeholder="请输入手机号"
:disabled="true"
v-model:value="form.mobile"
/>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="姓名" name="realName">
<a-input
allow-clear
:maxlength="20"
placeholder="请输入姓名"
v-model:value="form.realName"
/>
</a-form-item>
<a-form-item label="手机号" name="mobile">
<a-input
allow-clear
placeholder="请输入手机号"
v-model:value="form.mobile"
/>
</a-col>
<!-- <a-col :span="12">-->
<!-- <a-form-item-->
<!-- label="支付密码"-->
<!-- name="payPassword"-->
<!-- :help="isUpdate ? '留空表示不修改' : undefined"-->
<!-- >-->
<!-- <a-input-password-->
<!-- allow-clear-->
<!-- :maxlength="20"-->
<!-- placeholder="请输入支付密码"-->
<!-- v-model:value="form.payPassword"-->
<!-- />-->
<!-- </a-form-item>-->
<!-- </a-col>-->
<a-col :span="12">
<a-form-item label="头像" name="image">
<a-image :src="form.avatar" :width="50" :preview="false" />
</a-form-item>
<a-form-item label="支付密码" name="payPassword">
<a-input
allow-clear
placeholder="请输入支付密码"
v-model:value="form.payPassword"
/>
</a-form-item>
<a-form-item label="当前可提现佣金" name="money">
<a-input
allow-clear
placeholder="请输入当前可提现佣金"
</a-col>
</a-row>
<a-divider orientation="left">
<span style="color: #1890ff; font-weight: 600">佣金信息</span>
</a-divider>
<a-row :gutter="16">
<a-col :span="12">
<a-form-item label="可提现" name="money">
<a-input-number
class="ele-fluid"
:min="0"
:precision="2"
stringMode
placeholder="0.00"
:disabled="true"
v-model:value="form.money"
/>
</a-form-item>
<a-form-item label="已冻结佣金" name="freezeMoney">
<a-input
allow-clear
placeholder="请输入已冻结佣金"
</a-col>
<a-col :span="12">
<a-form-item label="已冻结" name="freezeMoney">
<a-input-number
class="ele-fluid"
:min="0"
:precision="2"
stringMode
placeholder="0.00"
:disabled="true"
v-model:value="form.freezeMoney"
/>
</a-form-item>
<a-form-item label="累积提现佣金" name="totalMoney">
<a-input
allow-clear
placeholder="请输入累积提现佣金"
</a-col>
<a-col :span="12">
<a-form-item label="累积提现" name="totalMoney">
<a-input-number
class="ele-fluid"
:min="0"
:precision="2"
stringMode
placeholder="0.00"
:disabled="true"
v-model:value="form.totalMoney"
/>
</a-form-item>
<a-form-item label="收益基数" name="rate">
<a-input
allow-clear
placeholder="请输入收益基数"
</a-col>
<a-col :span="12">
<a-form-item label="佣金比例" name="rate">
<a-input-number
class="ele-fluid"
:min="0"
:max="1"
:precision="4"
stringMode
:disabled="true"
placeholder="例如 0.007"
v-model:value="form.rate"
/>
</a-form-item>
<a-form-item label="单价" name="price">
<a-input
allow-clear
placeholder="请输入单价"
v-model:value="form.price"
/>
</a-form-item>
<a-form-item label="推荐人用户ID" name="refereeId">
<a-input
allow-clear
placeholder="请输入推荐人用户ID"
v-model:value="form.refereeId"
/>
</a-form-item>
<a-form-item label="成员数量(一级)" name="firstNum">
<a-input
allow-clear
placeholder="请输入成员数量(一级)"
v-model:value="form.firstNum"
/>
</a-form-item>
<a-form-item label="成员数量(二级)" name="secondNum">
<a-input
allow-clear
placeholder="请输入成员数量(二级)"
v-model:value="form.secondNum"
/>
</a-form-item>
<a-form-item label="成员数量(三级)" name="thirdNum">
<a-input
allow-clear
placeholder="请输入成员数量(三级)"
v-model:value="form.thirdNum"
/>
</a-form-item>
<a-form-item label="专属二维码" name="qrcode">
<a-input
allow-clear
placeholder="请输入专属二维码"
v-model:value="form.qrcode"
/>
</a-form-item>
<a-form-item label="备注" name="comments">
<a-textarea
:rows="4"
:maxlength="200"
placeholder="请输入描述"
v-model:value="form.comments"
/>
</a-form-item>
<a-form-item label="排序号" name="sortNumber">
<a-input-number
:min="0"
:max="9999"
class="ele-fluid"
placeholder="请输入排序号"
v-model:value="form.sortNumber"
/>
</a-form-item>
<a-form-item label="是否删除" name="isDelete">
<a-input
allow-clear
placeholder="请输入是否删除"
v-model:value="form.isDelete"
/>
</a-form-item>
<a-form-item label="修改时间" name="updateTime">
<a-input
allow-clear
placeholder="请输入修改时间"
v-model:value="form.updateTime"
/>
</a-form-item>
</a-col>
<!-- <a-col :span="12">-->
<!-- <a-form-item label="单价" name="price">-->
<!-- <a-input-number-->
<!-- class="ele-fluid"-->
<!-- :min="0"-->
<!-- :precision="2"-->
<!-- stringMode-->
<!-- placeholder="0.00"-->
<!-- v-model:value="form.price"-->
<!-- />-->
<!-- </a-form-item>-->
<!-- </a-col>-->
</a-row>
<!-- <a-row :gutter="16">-->
<!-- <a-col :span="12">-->
<!-- <a-form-item label="排序号" name="sortNumber">-->
<!-- <a-input-number-->
<!-- :min="0"-->
<!-- :max="9999"-->
<!-- class="ele-fluid"-->
<!-- placeholder="请输入排序号"-->
<!-- v-model:value="form.sortNumber"-->
<!-- />-->
<!-- </a-form-item>-->
<!-- </a-col>-->
<!-- <a-col :span="12">-->
<!-- <a-form-item label="备注" name="comments">-->
<!-- <a-textarea-->
<!-- :rows="3"-->
<!-- :maxlength="200"-->
<!-- show-count-->
<!-- placeholder="请输入备注"-->
<!-- v-model:value="form.comments"-->
<!-- />-->
<!-- </a-form-item>-->
<!-- </a-col>-->
<!-- </a-row>-->
</a-form>
</ele-modal>
</template>
<script lang="ts" setup>
import { ref, reactive, watch } from 'vue';
import { computed, ref, reactive, watch } from 'vue';
import { Form, message } from 'ant-design-vue';
import { assignObject, uuid } from 'ele-admin-pro';
import { assignObject, toDateString, uuid } from 'ele-admin-pro';
import { addShopDealerUser, updateShopDealerUser } from '@/api/shop/shopDealerUser';
import { ShopDealerUser } from '@/api/shop/shopDealerUser/model';
import { useThemeStore } from '@/store/modules/theme';
@@ -170,6 +197,7 @@
import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
import { FormInstance } from 'ant-design-vue/es/form';
import { FileRecord } from '@/api/system/file/model';
import type { User } from '@/api/system/user/model';
// 是否是修改
const isUpdate = ref(false);
@@ -201,11 +229,12 @@
// 用户信息
const form = reactive<ShopDealerUser>({
id: undefined,
type: undefined,
userId: undefined,
avatar: undefined,
type: 0,
realName: undefined,
mobile: undefined,
payPassword: undefined,
payPassword: '',
money: undefined,
freezeMoney: undefined,
totalMoney: undefined,
@@ -216,14 +245,10 @@
secondNum: undefined,
thirdNum: undefined,
qrcode: undefined,
comments: undefined,
sortNumber: undefined,
isDelete: undefined,
tenantId: undefined,
createTime: undefined,
updateTime: undefined,
shopDealerUserId: undefined,
shopDealerUserName: '',
status: 0,
comments: '',
sortNumber: 100
@@ -234,18 +259,90 @@
emit('update:visible', value);
};
const createTimeText = computed(() => {
return form.createTime ? toDateString(form.createTime, 'yyyy-MM-dd HH:mm:ss') : '';
});
const updateTimeText = computed(() => {
return form.updateTime ? toDateString(form.updateTime, 'yyyy-MM-dd HH:mm:ss') : '';
});
const selectedUserText = ref<string>('');
// 表单验证规则
const rules = reactive({
shopDealerUserName: [
userId: [
{
validator: (_rule: unknown, value: number | undefined) => {
if (!isUpdate.value && !value) {
return Promise.reject(new Error('请选择关联用户'));
}
return Promise.resolve();
},
trigger: 'change'
}
],
type: [
{
required: true,
type: 'number',
message: '请选择类型',
trigger: 'change'
}
],
realName: [
{
required: true,
type: 'string',
message: '请填写分销商用户记录表名称',
message: '请填写姓名',
trigger: 'blur'
}
],
// mobile: [
// {
// required: true,
// type: 'string',
// message: '请填写手机号',
// trigger: 'blur'
// },
// {
// pattern: /^1\\d{10}$/,
// message: '手机号格式不正确',
// trigger: 'blur'
// }
// ],
payPassword: [
{
validator: (_rule: unknown, value: string) => {
if (!isUpdate.value && !value) {
return Promise.reject(new Error('请输入支付密码'));
}
return Promise.resolve();
},
trigger: 'blur'
}
]
});
const onChooseUser = (user?: User) => {
if (!user) {
selectedUserText.value = '';
form.userId = undefined;
return;
}
form.userId = user.userId;
// 新增时尽量帮用户填充，避免重复输入
if (!form.realName) {
form.realName = user.realName ?? user.nickname;
}
if (!form.mobile) {
form.mobile = user.phone ?? user.mobile;
}
const name = user.realName ?? user.nickname ?? '';
const phone = user.phone ?? user.mobile ?? '';
selectedUserText.value = phone ? `${name}（${phone}）` : name;
};
const chooseImage = (data: FileRecord) => {
images.value.push({
uid: data.id,
@@ -271,9 +368,23 @@
.validate()
.then(() => {
loading.value = true;
const formData = {
...form
};
// 不在弹窗里编辑的字段不提交，避免误更新（如自增ID、删除标识等）
const {
isDelete,
tenantId,
createTime,
updateTime,
...rest
} = form;
const formData: ShopDealerUser = { ...rest };
// userId 新增需要，编辑不允许修改
if (isUpdate.value) {
delete formData.userId;
}
// 编辑时留空表示不修改密码
if (isUpdate.value && !formData.payPassword) {
delete formData.payPassword;
}
const saveOrUpdate = isUpdate.value ? updateShopDealerUser : addShopDealerUser;
saveOrUpdate(formData)
.then((msg) => {
@@ -294,9 +405,13 @@
() => props.visible,
(visible) => {
if (visible) {
formRef.value?.clearValidate();
images.value = [];
if (props.data) {
assignObject(form, props.data);
// 不回显密码，避免误操作
form.payPassword = '';
selectedUserText.value = '';
if(props.data.image){
images.value.push({
uid: uuid(),
@@ -306,10 +421,21 @@
}
isUpdate.value = true;
} else {
// 新增时确保表单是干净的默认值
resetFields();
form.payPassword = '';
form.type = 0;
form.status = 0;
form.comments = '';
form.sortNumber = 100;
selectedUserText.value = '';
isUpdate.value = false;
}
} else {
resetFields();
formRef.value?.clearValidate();
images.value = [];
selectedUserText.value = '';
}
},
{ immediate: true }

65
src/views/shop/shopDealerUser/index.vue
View File

@@ -25,9 +25,12 @@
</template>
<template v-if="column.key === 'type'">
<a-tag v-if="record.type === 0">经销商</a-tag>
<a-tag v-if="record.type === 1" color="orange">门店</a-tag>
<a-tag v-if="record.type === 1" color="orange">企业</a-tag>
<a-tag v-if="record.type === 2" color="purple">集团</a-tag>
</template>
<template v-if="column.key === 'qrcode'">
<QrcodeOutlined :style="{fontSize: '24px'}" @click="openQrCode(record)" />
</template>
<template v-if="column.key === 'status'">
<a-tag v-if="record.status === 0" color="green">显示</a-tag>
<a-tag v-if="record.status === 1" color="red">隐藏</a-tag>
@@ -50,13 +53,33 @@
<!-- 编辑弹窗 -->
<ShopDealerUserEdit v-model:visible="showEdit" :data="current" @done="reload" />
<!-- 二维码预览 -->
<a-modal
v-model:visible="showQrModal"
:title="qrModalTitle"
:footer="null"
:width="380"
centered
destroy-on-close
>
<div style="display: flex; justify-content: center">
<a-image v-if="qrModalUrl" :src="qrModalUrl" :width="280" :preview="false" />
</div>
<div style="display: flex; justify-content: center; margin-top: 12px">
<a-space>
<a-button @click="copyQrUrl">复制链接</a-button>
<a-button type="primary" @click="openQrInNewTab">打开原图</a-button>
</a-space>
</div>
</a-modal>
</a-page-header>
</template>
<script lang="ts" setup>
import { createVNode, ref, computed } from 'vue';
import { message, Modal } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { ExclamationCircleOutlined, QrcodeOutlined } from '@ant-design/icons-vue';
import type { EleProTable } from 'ele-admin-pro';
import { toDateString } from 'ele-admin-pro';
import type {
@@ -78,11 +101,48 @@
const current = ref<ShopDealerUser | null>(null);
// 是否显示编辑弹窗
const showEdit = ref(false);
// 是否显示二维码弹窗
const showQrModal = ref(false);
const qrModalUrl = ref<string>('');
const qrModalTitle = ref<string>('二维码');
// 是否显示批量移动弹窗
const showMove = ref(false);
// 加载状态
const loading = ref(true);
const getQrCodeUrl = (userId?: number) => {
return `https://mp-api.websoft.top/api/wx-login/getOrderQRCodeUnlimited/uid_${userId ?? ''}`;
};
const openQrCode = (row: ShopDealerUser) => {
if (!row.userId) {
message.warning('缺少用户ID，无法生成二维码');
return;
}
qrModalUrl.value = getQrCodeUrl(row.userId);
qrModalTitle.value = row.realName ? `${row.realName} 的二维码` : `UID_${row.userId} 二维码`;
showQrModal.value = true;
};
const copyQrUrl = async () => {
if (!qrModalUrl.value) {
return;
}
try {
await navigator.clipboard.writeText(qrModalUrl.value);
message.success('已复制');
} catch (e) {
message.error('复制失败，请手动复制');
}
};
const openQrInNewTab = () => {
if (!qrModalUrl.value) {
return;
}
window.open(qrModalUrl.value, '_blank');
};
// 表格数据源
const datasource: DatasourceFunction = ({
page,
@@ -114,6 +174,7 @@
title: '类型',
dataIndex: 'type',
key: 'type',
align: 'center',
width: 120
},
{