Skip to content

Commit e0e287c

Browse files
author
puhui999
committed
【功能新增】商城分销: 创建分销员
1 parent ad0d480 commit e0e287c

File tree

3 files changed

+266
-48
lines changed

3 files changed

+266
-48
lines changed

‎src/api/mall/trade/brokerage/user/index.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,11 @@ export interface BrokerageUserVO {
1313
avatar: string
1414
}
1515

16+
// 创建分销用户
17+
export const createBrokerageUser = (data: any) => {
18+
return request.post({ url: '/trade/brokerage-user/create', data })
19+
}
20+
1621
// 查询分销用户列表
1722
export const getBrokerageUserPage = async (params: any) => {
1823
return await request.get({ url: `/trade/brokerage-user/page`, params })

‎src/views/mall/trade/brokerage/user/CreateUserForm.vue

Lines changed: 189 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,189 @@
1+
<template>
2+
<Dialog v-model="dialogVisible" title="创建分销员" width="800">
3+
<el-form
4+
ref="formRef"
5+
v-loading="formLoading"
6+
:model="formData"
7+
:rules="formRules"
8+
label-width="80"
9+
>
10+
<el-row :gutter="20">
11+
<el-col :span="12" :xs="24">
12+
<el-form-item label="可用佣金" prop="price">
13+
<el-input-number v-model="formData.price" :min="0" class="w-1/1!" />
14+
</el-form-item>
15+
</el-col>
16+
<el-col :span="12" :xs="24">
17+
<el-form-item label="冻结佣金" prop="price">
18+
<el-input-number v-model="formData.frozenPrice" :min="0" class="w-1/1!" />
19+
</el-form-item>
20+
</el-col>
21+
<el-col :span="12" :xs="24">
22+
<el-form-item label="推广人" prop="bindUserId">
23+
<el-input
24+
v-model="formData.bindUserId"
25+
v-loading="formLoading"
26+
placeholder="请输入推广员编号"
27+
>
28+
<template #append>
29+
<el-button @click="handleGetUser(formData.bindUserId, '推广员')">
30+
<Icon class="mr-5px" icon="ep:search" />
31+
</el-button>
32+
</template>
33+
</el-input>
34+
</el-form-item>
35+
<!-- 展示上级推广人的信息 -->
36+
<el-descriptions v-if="userInfo.bindUser" :column="1" border>
37+
<el-descriptions-item label="头像">
38+
<el-avatar :src="userInfo.bindUser?.avatar" />
39+
</el-descriptions-item>
40+
<el-descriptions-item label="昵称"
41+
>{{ userInfo.bindUser?.nickname }}
42+
</el-descriptions-item>
43+
<el-descriptions-item label="推广资格">
44+
<el-tag v-if="userInfo.bindUser?.brokerageEnabled">有</el-tag>
45+
<el-tag v-else type="info">无</el-tag>
46+
</el-descriptions-item>
47+
<el-descriptions-item label="成为推广员的时间">
48+
{{ formatDate(userInfo.bindUser?.brokerageTime) }}
49+
</el-descriptions-item>
50+
</el-descriptions>
51+
</el-col>
52+
<el-col :span="12" :xs="24">
53+
<el-form-item label="分销员" prop="userId">
54+
<el-input
55+
v-model="formData.userId"
56+
v-loading="formLoading"
57+
placeholder="请输入分销员编号"
58+
>
59+
<template #append>
60+
<el-button @click="handleGetUser(formData.userId, '分销员')">
61+
<Icon class="mr-5px" icon="ep:search" />
62+
</el-button>
63+
</template>
64+
</el-input>
65+
</el-form-item>
66+
<!-- 展示分销员的信息 -->
67+
<el-descriptions v-if="userInfo.user" :column="1" border>
68+
<el-descriptions-item label="头像">
69+
<el-avatar :src="userInfo.user?.avatar" />
70+
</el-descriptions-item>
71+
<el-descriptions-item label="昵称">{{ userInfo.user?.nickname }}</el-descriptions-item>
72+
<el-descriptions-item label="推广资格">
73+
<el-switch
74+
v-model="formData.brokerageEnabled"
75+
:disabled="!checkPermi(['trade:brokerage-user:update-bind-user'])"
76+
active-text="有"
77+
inactive-text="无"
78+
inline-prompt
79+
/>
80+
</el-descriptions-item>
81+
<el-descriptions-item label="成为推广员的时间">
82+
{{ formatDate(userInfo.user?.brokerageTime) }}
83+
</el-descriptions-item>
84+
</el-descriptions>
85+
</el-col>
86+
</el-row>
87+
</el-form>
88+
<template #footer>
89+
<el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
90+
<el-button @click="dialogVisible = false">取 消</el-button>
91+
</template>
92+
</Dialog>
93+
</template>
94+
<script lang="ts" setup>
95+
import * as BrokerageUserApi from '@/api/mall/trade/brokerage/user'
96+
import * as UserApi from '@/api/member/user'
97+
import { formatDate } from '@/utils/formatTime'
98+
import { checkPermi } from '@/utils/permission'
99+
100+
defineOptions({ name: 'CreateUserForm' })
101+
102+
const { t } = useI18n() // 国际化
103+
const message = useMessage() // 消息弹窗
104+
105+
const dialogVisible = ref(false) // 弹窗的是否展示
106+
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
107+
const formData = ref({
108+
userId: undefined,
109+
bindUserId: undefined,
110+
brokerageEnabled: false,
111+
price: 0,
112+
frozenPrice: 0
113+
})
114+
const formRef = ref() // 表单 Ref
115+
const formRules = reactive({
116+
userId: [{ required: true, message: '分销员不能为空', trigger: 'blur' }]
117+
})
118+
119+
/** 打开弹窗 */
120+
const open = async () => {
121+
resetForm()
122+
dialogVisible.value = true
123+
}
124+
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
125+
126+
/** 提交表单 */
127+
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
128+
/** 创建分销员 */
129+
const submitForm = async () => {
130+
if (formLoading.value) return
131+
// 校验表单
132+
if (!formRef) return
133+
const valid = await formRef.value.validate()
134+
if (!valid) return
135+
136+
// 提交请求
137+
formLoading.value = true
138+
try {
139+
// 发起修改
140+
await BrokerageUserApi.createBrokerageUser(formData.value)
141+
message.success(t('common.createSuccess'))
142+
dialogVisible.value = false
143+
// 发送操作成功的事件
144+
emit('success')
145+
} finally {
146+
formLoading.value = false
147+
}
148+
}
149+
150+
/** 重置表单 */
151+
const resetForm = () => {
152+
formRef.value?.resetFields()
153+
formData.value = {
154+
userId: undefined,
155+
bindUserId: undefined,
156+
brokerageEnabled: false,
157+
price: 0,
158+
frozenPrice: 0
159+
}
160+
161+
userInfo.bindUser = undefined
162+
userInfo.user = undefined
163+
}
164+
165+
/** 查询推广员和分销员 */
166+
const userInfo = reactive<{
167+
bindUser: BrokerageUserApi.BrokerageUserVO | undefined
168+
user: BrokerageUserApi.BrokerageUserVO | undefined
169+
}>({
170+
bindUser: undefined,
171+
user: undefined
172+
})
173+
const handleGetUser = async (id: any, userType: string) => {
174+
if (!id) {
175+
message.warning(`请先输入${userType}编号后重试！！！`)
176+
return
177+
}
178+
if (userType === '推广员' && formData.value.bindUserId == formData.value.userId) {
179+
message.error('不能绑定自己为推广人')
180+
return
181+
}
182+
const user =
183+
userType === '推广员' ? await BrokerageUserApi.getBrokerageUser(id) : await UserApi.getUser(id)
184+
userType === '推广员' ? (userInfo.bindUser = user) : (userInfo.user = user)
185+
if (!user) {
186+
message.warning(`${userType}不存在`)
187+
}
188+
}
189+
</script>

0 commit comments

Comments
 (0)