feat(shop): 完善分销商业务功能
- 在ShopDealerCapital模型中新增分销商昵称字段 - 在ShopDealerUser模型中新增类型和头像字段 - 更新资本流水页面显示分销商昵称和用户ID组合信息 - 修改收益列标题为收益类型并隐藏对方用户列 - 更新分销商用户页面类型标签文本并添加二维码生成功能 - 添加二维码预览弹窗支持复制链接和打开原图 - 优化分销商用户编辑弹窗界面布局和字段验证 - 新增关联用户选择功能并完善表单验证规则 - 添加支付密码管理和佣金信息展示功能
This commit is contained in:
@@ -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
|
||||
},
|
||||
{
|
||||
|
||||
Reference in New Issue
Block a user