!259 Review代码修改

Merge pull request !259 from 疯狂的世界/dev

src/api/member/config/index.ts

@@ -0,0 +1,19 @@
+import request from '@/config/axios'
+
+export interface ConfigVO {
+  id: number
+  pointTradeDeductEnable: number
+  pointTradeDeductUnitPrice: number
+  pointTradeDeductMaxPrice: number
+  pointTradeGivePoint: number
+}
+
+// 查询积分设置详情
+export const getConfig = async () => {
+  return await request.get({ url: `/member/config/get` })
+}
+
+// 新增修改积分设置
+export const saveConfig = async (data: ConfigVO) => {
+  return await request.put({ url: `/member/config/save`, data })
+}

src/api/member/point/config/index.ts

@@ -1,19 +0,0 @@
-import request from '@/config/axios'
-
-export interface ConfigVO {
-  id: number
-  tradeDeductEnable: number
-  tradeDeductUnitPrice: number
-  tradeDeductMaxPrice: number
-  tradeGivePoint: number
-}
-
-// 查询积分设置详情
-export const getConfig = async () => {
-  return await request.get({ url: `/member/point/config/get` })
-}
-
-// 新增修改积分设置
-export const saveConfig = async (data: ConfigVO) => {
-  return await request.put({ url: `/member/point/config/save`, data })
-}

src/api/member/signin/config/index.ts

@@ -1,10 +1,11 @@
 import request from '@/config/axios'
 
 export interface SignInConfigVO {
-  id: number
-  day: number | null
-  point: number | null
-  enable: boolean | null
+  id?: number
+  day?: number
+  point?: number
+  experience?: number
+  status?: number
 }
 
 // 查询积分签到规则列表

src/api/member/user/index.ts

@@ -41,3 +41,13 @@ export const updateUser = async (data: UserVO) => {
 export const updateUserLevel = async (data: any) => {
   return await request.put({ url: `/member/user/update-level`, data })
 }
+
+// 修改会员用户积分
+export const updateUserPoint = async (data: any) => {
+  return await request.put({ url: `/member/user/update-point`, data })
+}
+
+// 修改会员用户余额
+export const updateUserBalance = async (data: any) => {
+  return await request.put({ url: `/member/user/update-balance`, data })
+}

src/api/pay/wallet/index.ts

@@ -0,0 +1,22 @@
+import request from '@/config/axios'
+
+/** 用户钱包查询参数 */
+export interface PayWalletUserReqVO {
+  userId: number
+  userType: number
+}
+/** 钱包 VO */
+export interface WalletVO {
+  id: number
+  userId: number
+  userType: number
+  balance: number
+  totalExpense: number
+  totalRecharge: number
+  freezePrice: number
+}
+
+/** 查询用户钱包详情 */
+export const getUserWallet = async (params: PayWalletUserReqVO) => {
+  return await request.get<WalletVO>({ url: `/pay/wallet/user-wallet`, params })
+}

src/utils/constants.ts

@@ -4,12 +4,20 @@
  * 枚举类
  */
 
+// ========== COMMON 模块 ==========
 // 全局通用状态枚举
 export const CommonStatusEnum = {
   ENABLE: 0, // 开启
   DISABLE: 1 // 禁用
 }
 
+// 全局用户类型枚举
+export const UserTypeEnum = {
+  MEMBER: 1, // 会员
+  ADMIN: 2 // 管理员
+}
+
+// ========== SYSTEM 模块 ==========
 /**
  * 菜单的类型枚举
  */
@@ -38,6 +46,25 @@ export const SystemDataScopeEnum = {
   DEPT_SELF: 5 // 仅本人数据权限
 }
 
+/**
+ * 用户的社交平台的类型枚举
+ */
+export const SystemUserSocialTypeEnum = {
+  DINGTALK: {
+    title: '钉钉',
+    type: 20,
+    source: 'dingtalk',
+    img: 'https://s1.ax1x.com/2022/05/22/OzMDRs.png'
+  },
+  WECHAT_ENTERPRISE: {
+    title: '企业微信',
+    type: 30,
+    source: 'wechat_enterprise',
+    img: 'https://s1.ax1x.com/2022/05/22/OzMrzn.png'
+  }
+}
+
+// ========== INFRA 模块 ==========
 /**
  * 代码生成模板类型
  */
@@ -65,24 +92,7 @@ export const InfraApiErrorLogProcessStatusEnum = {
   IGNORE: 2 // 已忽略
 }
 
-/**
- * 用户的社交平台的类型枚举
- */
-export const SystemUserSocialTypeEnum = {
-  DINGTALK: {
-    title: '钉钉',
-    type: 20,
-    source: 'dingtalk',
-    img: 'https://s1.ax1x.com/2022/05/22/OzMDRs.png'
-  },
-  WECHAT_ENTERPRISE: {
-    title: '企业微信',
-    type: 30,
-    source: 'wechat_enterprise',
-    img: 'https://s1.ax1x.com/2022/05/22/OzMrzn.png'
-  }
-}
-
+// ========== PAY 模块 ==========
 /**
  * 支付渠道枚举
  */
@@ -177,6 +187,7 @@ export const PayOrderStatusEnum = {
   }
 }
 
+// ========== MALL - 商品模块 ==========
 /**
  * 商品 SPU 状态
  */
@@ -195,6 +206,7 @@ export const ProductSpuStatusEnum = {
   }
 }
 
+// ========== MALL - 营销模块 ==========
 /**
  * 优惠劵模板的有限期类型的枚举
  */
@@ -273,6 +285,7 @@ export const PromotionDiscountTypeEnum = {
   }
 }
 
+// ========== MALL - 交易模块 ==========
 /**
  * 分销关系绑定模式枚举
  */

src/views/member/point/config/index.vue → src/views/member/config/index.vue

@@ -13,13 +13,13 @@
 
       <el-tabs>
         <el-tab-pane label="积分">
-          <el-form-item label="积分抵扣" prop="tradeDeductEnable">
-            <el-switch v-model="formData.tradeDeductEnable" style="user-select: none" />
+          <el-form-item label="积分抵扣" prop="pointTradeDeductEnable">
+            <el-switch v-model="formData.pointTradeDeductEnable" style="user-select: none" />
             <el-text class="w-full" size="small" type="info">下单积分是否抵用订单金额</el-text>
           </el-form-item>
-          <el-form-item label="积分抵扣" prop="tradeDeductUnitPrice">
+          <el-form-item label="积分抵扣" prop="pointTradeDeductUnitPrice">
             <el-input-number
-              v-model="computedTradeDeductUnitPrice"
+              v-model="computedPointTradeDeductUnitPrice"
               placeholder="请输入积分抵扣金额"
               :precision="2"
             />
@@ -27,18 +27,18 @@
               积分抵用比例(1 积分抵多少金额)，单位：元
             </el-text>
           </el-form-item>
-          <el-form-item label="积分抵扣最大值" prop="tradeDeductMaxPrice">
+          <el-form-item label="积分抵扣最大值" prop="pointTradeDeductMaxPrice">
             <el-input-number
-              v-model="formData.tradeDeductMaxPrice"
+              v-model="formData.pointTradeDeductMaxPrice"
               placeholder="请输入积分抵扣最大值"
             />
             <el-text class="w-full" size="small" type="info">
               单次下单积分使用上限，0 不限制
             </el-text>
           </el-form-item>
-          <el-form-item label="1 元赠送多少分" prop="tradeGivePoint">
+          <el-form-item label="1 元赠送多少分" prop="pointTradeGivePoint">
             <el-input-number
-              v-model="formData.tradeGivePoint"
+              v-model="formData.pointTradeGivePoint"
               placeholder="请输入 1 元赠送多少积分"
             />
             <el-text class="w-full" size="small" type="info">
@@ -55,9 +55,9 @@
   </ContentWrap>
 </template>
 <script lang="ts" setup>
-import * as ConfigApi from '@/api/member/point/config'
+import * as ConfigApi from '@/api/member/config'
 
-defineOptions({ name: 'MemberPointConfig' })
+defineOptions({ name: 'MemberConfig' })
 
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
@@ -66,17 +66,17 @@ const dialogVisible = ref(false) // 弹窗的是否展示
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const formData = ref({
   id: undefined,
-  tradeDeductEnable: true,
-  tradeDeductUnitPrice: 0,
-  tradeDeductMaxPrice: 0,
-  tradeGivePoint: 0
+  pointTradeDeductEnable: true,
+  pointTradeDeductUnitPrice: 0,
+  pointTradeDeductMaxPrice: 0,
+  pointTradeGivePoint: 0
 })
 
-// 创建一个计算属性，用于将 tradeDeductUnitPrice 显示为带两位小数的形式
-const computedTradeDeductUnitPrice = computed({
-  get: () => (formData.value.tradeDeductUnitPrice / 100).toFixed(2),
-  set: (newValue) => {
-    formData.value.tradeDeductUnitPrice = Math.round(newValue * 100)
+// 创建一个计算属性，用于将 pointTradeDeductUnitPrice 显示为带两位小数的形式
+const computedPointTradeDeductUnitPrice = computed({
+  get: () => (formData.value.pointTradeDeductUnitPrice / 100).toFixed(2),
+  set: (newValue: number) => {
+    formData.value.pointTradeDeductUnitPrice = Math.round(newValue * 100)
   }
 })
 

src/views/member/signin/config/SignInConfigForm.vue

@@ -13,8 +13,11 @@
           只允许设置 1-7，默认签到 7 天为一个周期
         </el-text>
       </el-form-item>
-      <el-form-item label="签到分数" prop="point">
-        <el-input-number v-model="formData.point" :precision="0" />
+      <el-form-item label="奖励积分" prop="point">
+        <el-input-number v-model="formData.point" :min="0" :precision="0" />
+      </el-form-item>
+      <el-form-item label="奖励经验" prop="experience">
+        <el-input-number v-model="formData.experience" :min="0" :precision="0" />
       </el-form-item>
       <el-form-item label="开启状态" prop="status">
         <el-radio-group v-model="formData.status">
@@ -46,12 +49,30 @@ const dialogVisible = ref(false) // 弹窗的是否展示
 const dialogTitle = ref('') // 弹窗的标题
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const formType = ref('') // 表单的类型：create - 新增；update - 修改
-const formData = ref({
-  id: undefined,
-  day: undefined,
-  point: undefined
+const formData = ref<SignInConfigApi.SignInConfigVO>({} as SignInConfigApi.SignInConfigVO)
+// 奖励校验规则
+const awardValidator = (rule: any, _value: any, callback: any) => {
+  if (!formData.value.point && !formData.value.experience) {
+    callback(new Error('奖励积分与奖励经验至少配置一个'))
+    return
+  }
+
+  // 清除另一个字段的错误提示
+  const otherAwardField = rule?.field === 'point' ? 'experience' : 'point'
+  formRef.value.validateField(otherAwardField, () => null)
+  callback()
+}
+const formRules = reactive({
+  day: [{ required: true, message: '签到天数不能空', trigger: 'blur' }],
+  point: [
+    { required: true, message: '奖励积分不能空', trigger: 'blur' },
+    { validator: awardValidator, trigger: 'blur' }
+  ],
+  experience: [
+    { required: true, message: '奖励经验不能空', trigger: 'blur' },
+    { validator: awardValidator, trigger: 'blur' }
+  ]
 })
-const formRules = reactive({})
 const formRef = ref() // 表单 Ref
 
 /** 打开弹窗 */
@@ -82,14 +103,11 @@ const submitForm = async () => {
   // 提交请求
   formLoading.value = true
   try {
-    const data = formData.value as unknown as SignInConfigApi.SignInConfigVO
     if (formType.value === 'create') {
-      //默认新创建的自动启动
-      data.enable = true
-      await SignInConfigApi.createSignInConfig(data)
+      await SignInConfigApi.createSignInConfig(formData.value)
       message.success(t('common.createSuccess'))
     } else {
-      await SignInConfigApi.updateSignInConfig(data)
+      await SignInConfigApi.updateSignInConfig(formData.value)
       message.success(t('common.updateSuccess'))
     }
     dialogVisible.value = false
@@ -105,7 +123,8 @@ const resetForm = () => {
   formData.value = {
     id: undefined,
     day: undefined,
-    point: undefined,
+    point: 0,
+    experience: 0,
     status: CommonStatusEnum.ENABLE
   }
   formRef.value?.resetFields()

src/views/member/signin/config/index.vue

@@ -20,7 +20,8 @@
         prop="day"
         :formatter="(_, __, cellValue) => ['第', cellValue, '天'].join(' ')"
       />
-      <el-table-column label="获得积分" align="center" prop="point" />
+      <el-table-column label="奖励积分" align="center" prop="point" />
+      <el-table-column label="奖励经验" align="center" prop="experience" />
       <el-table-column label="状态" align="center" prop="status">
         <template #default="scope">
           <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />

src/views/member/user/UpdatePointForm.vue

@@ -0,0 +1,128 @@
+<template>
+  <Dialog title="修改用户积分" v-model="dialogVisible" width="600">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="100px"
+      v-loading="formLoading"
+    >
+      <el-form-item label="用户编号" prop="id">
+        <el-input v-model="formData.id" class="!w-240px" disabled />
+      </el-form-item>
+      <el-form-item label="用户昵称" prop="nickname">
+        <el-input v-model="formData.nickname" class="!w-240px" disabled />
+      </el-form-item>
+      <el-form-item label="变动前积分" prop="point">
+        <el-input-number v-model="formData.point" class="!w-240px" disabled />
+      </el-form-item>
+      <el-form-item label="变动类型" prop="changeType">
+        <el-radio-group v-model="formData.changeType">
+          <el-radio :label="1">增加</el-radio>
+          <el-radio :label="-1">减少</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="变动积分" prop="changePoint">
+        <el-input-number v-model="formData.changePoint" class="!w-240px" :min="0" :precision="0" />
+      </el-form-item>
+      <el-form-item label="变动后积分">
+        <el-input-number v-model="pointResult" class="!w-240px" disabled />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script setup lang="ts">
+import * as UserApi from '@/api/member/user'
+
+/** 修改用户积分表单 */
+defineOptions({ name: 'UpdatePointForm' })
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formData = ref({
+  id: undefined,
+  nickname: undefined,
+  point: 0,
+  changePoint: 0,
+  changeType: 1
+})
+const formRules = reactive({
+  changePoint: [{ required: true, message: '变动积分不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+
+/** 打开弹窗 */
+const open = async (id?: number) => {
+  dialogVisible.value = true
+  resetForm()
+  // 修改时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      formData.value = await UserApi.getUser(id)
+      formData.value.changeType = 1 // 默认增加积分
+      formData.value.changePoint = 0 // 变动积分默认0
+    } finally {
+      formLoading.value = false
+    }
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 校验表单
+  if (!formRef) return
+  const valid = await formRef.value.validate()
+  if (!valid) return
+
+  if (formData.value.changePoint < 1) {
+    message.error('变动积分不能小于 1')
+    return
+  }
+  if (pointResult.value < 0) {
+    message.error('变动后的积分不能小于 0')
+    return
+  }
+
+  // 提交请求
+  formLoading.value = true
+  try {
+    await UserApi.updateUserPoint({
+      id: formData.value.id,
+      point: formData.value.changePoint * formData.value.changeType
+    })
+
+    message.success(t('common.updateSuccess'))
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    nickname: undefined,
+    levelId: undefined,
+    reason: undefined
+  }
+  formRef.value?.resetFields()
+}
+
+/** 变动后的积分 */
+const pointResult = computed(
+  () => formData.value.point + formData.value.changePoint * formData.value.changeType
+)
+</script>

src/views/member/user/components/growth-list.vue

@@ -1,14 +0,0 @@
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-export default defineComponent({
-  name: 'GrowthList'
-})
-</script>
-
-<!-- TODO @梦：可以读取 member_experience_log 表 -->
-<template>
-  <div>成长值列表</div>
-</template>
-
-<style scoped lang="scss"></style>

src/views/member/user/detail/UserAccountInfo.vue

@@ -24,31 +24,56 @@
       </template>
       {{ user.totalPoint || 0 }}
     </el-descriptions-item>
-    <!-- TODO @疯狂：从 wallet 读取下对应字段 -->
     <el-descriptions-item>
       <template #label>
         <descriptions-item-label label=" 当前余额 " icon="svg-icon:member_balance" />
       </template>
-      {{ 0 }}
+      {{ wallet.balance || 0 }}
     </el-descriptions-item>
     <el-descriptions-item>
       <template #label>
         <descriptions-item-label label=" 支出金额 " icon="svg-icon:member_expenditure_balance" />
       </template>
-      {{ 0 }}
+      {{ wallet.totalExpense || 0 }}
     </el-descriptions-item>
     <el-descriptions-item>
       <template #label>
         <descriptions-item-label label=" 充值金额 " icon="svg-icon:member_recharge_balance" />
       </template>
-      {{ 0 }}
+      {{ wallet.totalRecharge || 0 }}
     </el-descriptions-item>
   </el-descriptions>
 </template>
 <script setup lang="ts">
 import { DescriptionsItemLabel } from '@/components/Descriptions'
 import * as UserApi from '@/api/member/user'
-const { user } = defineProps<{ user: UserApi.UserVO }>()
+import * as WalletApi from '@/api/pay/wallet'
+import { UserTypeEnum } from '@/utils/constants'
+
+const props = defineProps<{ user: UserApi.UserVO }>() // 用户信息
+const WALLET_INIT_DATA = {
+  balance: 0,
+  totalExpense: 0,
+  totalRecharge: 0
+} as WalletApi.WalletVO // 钱包初始化数据
+const wallet = ref<WalletApi.WalletVO>(WALLET_INIT_DATA) // 钱包信息
+
+/** 查询用户钱包信息 */
+const getUserWallet = async () => {
+  if (!props.user.id) {
+    wallet.value = WALLET_INIT_DATA
+    return
+  }
+  const params = { userId: props.user.id, userType: UserTypeEnum.MEMBER }
+  wallet.value = (await WalletApi.getUserWallet(params)) || WALLET_INIT_DATA
+}
+
+/** 监听用户编号变化 */
+watch(
+  () => props.user.id,
+  () => getUserWallet(),
+  { immediate: true }
+)
 </script>
 <style scoped lang="scss">
 .cell-item {

src/views/member/user/detail/UserBrokerageList.vue

@@ -0,0 +1,125 @@
+<template>
+  <ContentWrap>
+    <!-- 搜索工作栏 -->
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="85px"
+    >
+      <el-form-item label="用户类型" prop="level">
+        <el-radio-group v-model="queryParams.level" @change="handleQuery">
+          <el-radio-button checked>全部</el-radio-button>
+          <el-radio-button label="1">一级推广人</el-radio-button>
+          <el-radio-button label="2">二级推广人</el-radio-button>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="绑定时间" prop="bindUserTime">
+        <el-date-picker
+          v-model="queryParams.bindUserTime"
+          value-format="YYYY-MM-DD HH:mm:ss"
+          type="daterange"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
+        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+      <el-table-column label="用户编号" align="center" prop="id" min-width="80px" />
+      <el-table-column label="头像" align="center" prop="avatar" width="70px">
+        <template #default="scope">
+          <el-avatar :src="scope.row.avatar" />
+        </template>
+      </el-table-column>
+      <el-table-column label="昵称" align="center" prop="nickname" min-width="80px" />
+      <el-table-column label="等级" align="center" prop="level" min-width="80px">
+        <template #default="scope">
+          <el-tag v-if="scope.row.bindUserId === bindUserId">一级</el-tag>
+          <el-tag v-else>二级</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="绑定时间"
+        align="center"
+        prop="bindUserTime"
+        :formatter="dateFormatter"
+        width="170px"
+      />
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </ContentWrap>
+</template>
+
+<script setup lang="ts">
+import { dateFormatter } from '@/utils/formatTime'
+import * as BrokerageUserApi from '@/api/mall/trade/brokerage/user'
+
+/** 推广人列表 */
+defineOptions({ name: 'UserBrokerageList' })
+
+const { bindUserId }: { bindUserId: number } = defineProps({
+  bindUserId: {
+    type: Number,
+    required: true
+  }
+}) //用户编号
+
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  bindUserId: null,
+  level: '',
+  bindUserTime: []
+})
+const queryFormRef = ref() // 搜索的表单
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    queryParams.bindUserId = bindUserId
+    const data = await BrokerageUserApi.getBrokerageUserPage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value?.resetFields()
+  handleQuery()
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>

src/views/member/user/detail/UserCouponList.vue

@@ -0,0 +1,190 @@
+<template>
+  <!-- 搜索工作栏 -->
+  <ContentWrap>
+    <el-form
+      ref="queryFormRef"
+      :inline="true"
+      :model="queryParams"
+      class="-mb-15px"
+      label-width="68px"
+    >
+      <el-form-item label="创建时间" prop="createTime">
+        <el-date-picker
+          v-model="queryParams.createTime"
+          value-format="YYYY-MM-DD HH:mm:ss"
+          type="daterange"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="handleQuery"> <Icon icon="ep:search" class="mr-5px" />搜索 </el-button>
+        <el-button @click="resetQuery"> <Icon icon="ep:refresh" class="mr-5px" />重置 </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <ContentWrap>
+    <!-- Tab 选项：真正的内容在 Lab -->
+    <el-tabs v-model="activeTab" type="card" @tab-change="onTabChange">
+      <el-tab-pane
+        v-for="tab in statusTabs"
+        :key="tab.value"
+        :label="tab.label"
+        :name="tab.value"
+      />
+    </el-tabs>
+
+    <!-- 列表 -->
+    <el-table v-loading="loading" :data="list">
+      <el-table-column label="优惠劵" align="center" prop="name" />
+      <el-table-column label="优惠券类型" align="center" prop="discountType">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.PROMOTION_DISCOUNT_TYPE" :value="scope.row.discountType" />
+        </template>
+      </el-table-column>
+      <el-table-column label="领取方式" align="center" prop="takeType">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.PROMOTION_COUPON_TAKE_TYPE" :value="scope.row.takeType" />
+        </template>
+      </el-table-column>
+      <el-table-column label="状态" align="center" prop="status">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.PROMOTION_COUPON_STATUS" :value="scope.row.status" />
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="领取时间"
+        align="center"
+        prop="createTime"
+        :formatter="dateFormatter"
+        width="180"
+      />
+      <el-table-column
+        label="使用时间"
+        align="center"
+        prop="useTime"
+        :formatter="dateFormatter"
+        width="180"
+      />
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template #default="scope">
+          <el-button
+            v-hasPermi="['promotion:coupon:delete']"
+            type="danger"
+            link
+            @click="handleDelete(scope.row.id)"
+          >
+            回收
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      v-model:limit="queryParams.pageSize"
+      v-model:page="queryParams.pageNo"
+      :total="total"
+      @pagination="getList"
+    />
+  </ContentWrap>
+</template>
+
+<script setup lang="ts" name="UserCouponList">
+import { deleteCoupon, getCouponPage } from '@/api/mall/promotion/coupon/coupon'
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
+
+defineOptions({ name: 'UserCouponList' })
+
+const { userId }: { userId: number } = defineProps({
+  userId: {
+    type: Number,
+    required: true
+  }
+}) //用户编号
+
+const message = useMessage() // 消息弹窗
+
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 字典表格数据
+// 查询参数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  createTime: [],
+  status: undefined,
+  userIds: undefined
+})
+const queryFormRef = ref() // 搜索的表单
+
+const activeTab = ref('all') // Tab 筛选
+const statusTabs = reactive([
+  {
+    label: '全部',
+    value: 'all'
+  }
+])
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  // 执行查询
+  try {
+    queryParams.userIds = userId
+    const data = await getCouponPage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value?.resetFields()
+  handleQuery()
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+  try {
+    // 二次确认
+    await message.confirm(
+      '回收将会收回会员领取的待使用的优惠券，已使用的将无法回收，确定要回收所选优惠券吗？'
+    )
+    // 发起删除
+    await deleteCoupon(id)
+    message.notifySuccess('回收成功')
+    // 重新加载列表
+    await getList()
+  } catch {}
+}
+
+/** tab 切换 */
+const onTabChange = (tabName) => {
+  queryParams.status = tabName === 'all' ? undefined : tabName
+  getList()
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+  // 设置 statuses 过滤
+  for (const dict of getIntDictOptions(DICT_TYPE.PROMOTION_COUPON_STATUS)) {
+    statusTabs.push({
+      label: dict.label,
+      value: dict.value as string
+    })
+  }
+})
+</script>

src/views/member/user/detail/index.vue

@@ -16,7 +16,7 @@
       </el-col>
       <!-- 右上角：账户信息 -->
       <el-col :span="10" class="detail-info-item">
-        <el-card shadow="never">
+        <el-card shadow="never" class="h-full">
           <template #header>
             <CardTitle title="账户信息" />
           </template>
@@ -24,34 +24,37 @@
         </el-card>
       </el-col>
       <!-- 下边：账户明细 -->
-      <!-- TODO 芋艿：【订单管理】【售后管理】【收藏记录】【优惠劵】 -->
+      <!-- TODO 芋艿：【订单管理】【售后管理】【收藏记录】-->
       <el-card header="账户明细" style="width: 100%; margin-top: 20px" shadow="never">
         <template #header>
           <CardTitle title="账户明细" />
         </template>
-        <el-tabs v-model="activeName">
-          <el-tab-pane label="积分" name="point">
+        <el-tabs>
+          <el-tab-pane label="积分">
             <UserPointList :user-id="id" />
           </el-tab-pane>
-          <el-tab-pane label="签到" name="sign" lazy>
+          <el-tab-pane label="签到" lazy>
             <UserSignList :user-id="id" />
           </el-tab-pane>
-          <el-tab-pane label="成长值" name="experience" lazy>
-            <UserExperienceRecordList :user-id="id"
-          /></el-tab-pane>
+          <el-tab-pane label="成长值" lazy>
+            <UserExperienceRecordList :user-id="id" />
+          </el-tab-pane>
           <!-- TODO @jason：增加一个余额变化； -->
-          <el-tab-pane label="余额" name="fourth">余额(WIP)</el-tab-pane>
-          <el-tab-pane label="收货地址" name="address" lazy>
+          <el-tab-pane label="余额" lazy>余额(WIP)</el-tab-pane>
+          <el-tab-pane label="收货地址" lazy>
             <UserAddressList :user-id="id" />
           </el-tab-pane>
-          <el-tab-pane label="订单管理" name="order" lazy>
+          <el-tab-pane label="订单管理" lazy>
             <UserOrderList :user-id="id" />
           </el-tab-pane>
-          <el-tab-pane label="售后管理" name="fourth">售后管理(WIP)</el-tab-pane>
-          <el-tab-pane label="收藏记录" name="fourth">收藏记录(WIP)</el-tab-pane>
-          <!-- TODO @疯狂：优惠劵的读取 -->
-          <el-tab-pane label="优惠劵" name="fourth">优惠劵(WIP)</el-tab-pane>
-          <!-- TODO @疯狂：增加获得分校用户；直接查询出所有；需要体现出是一级还是二级；用户编号、昵称、级别、绑定时间 -->
+          <el-tab-pane label="售后管理" lazy>售后管理(WIP)</el-tab-pane>
+          <el-tab-pane label="收藏记录" lazy>收藏记录(WIP)</el-tab-pane>
+          <el-tab-pane label="优惠劵" lazy>
+            <UserCouponList :user-id="id" />
+          </el-tab-pane>
+          <el-tab-pane label="推广用户" lazy>
+            <UserBrokerageList :bind-user-id="id" />
+          </el-tab-pane>
         </el-tabs>
       </el-card>
     </el-row>
@@ -63,22 +66,23 @@
 <script setup lang="ts">
 import * as UserApi from '@/api/member/user'
 import { useTagsViewStore } from '@/store/modules/tagsView'
-import UserBasicInfo from './UserBasicInfo.vue'
 import UserForm from '@/views/member/user/UserForm.vue'
 import UserAccountInfo from './UserAccountInfo.vue'
 import UserAddressList from './UserAddressList.vue'
+import UserBasicInfo from './UserBasicInfo.vue'
+import UserBrokerageList from './UserBrokerageList.vue'
+import UserCouponList from './UserCouponList.vue'
+import UserExperienceRecordList from './UserExperienceRecordList.vue'
+import UserOrderList from './UserOrderList.vue'
 import UserPointList from './UserPointList.vue'
 import UserSignList from './UserSignList.vue'
-import UserExperienceRecordList from './UserExperienceRecordList.vue'
 import { CardTitle } from '@/components/Card/index'
-import UserOrderList from '@/views/member/user/detail/UserOrderList.vue'
 import { ElMessage } from 'element-plus'
 
 defineOptions({ name: 'MemberDetail' })
 
-const activeName = ref('point') // 账户明细 选中的 tabs
 const loading = ref(true) // 加载中
-const user = ref<UserApi.UserVO>({})
+const user = ref<UserApi.UserVO>({} as UserApi.UserVO)
 
 /** 添加/修改操作 */
 const formRef = ref()

src/views/member/user/index.vue

@@ -117,28 +117,56 @@
         :formatter="dateFormatter"
         width="180px"
       />
-      <el-table-column label="操作" align="center" width="180px" fixed="right">
+      <el-table-column
+        label="操作"
+        align="center"
+        width="100px"
+        fixed="right"
+        :show-overflow-tooltip="false"
+      >
         <template #default="scope">
-          <el-button link type="primary" @click="openDetail(scope.row.id)">详情</el-button>
-          <el-button
-            link
-            type="primary"
-            @click="openForm('update', scope.row.id)"
-            v-hasPermi="['member:user:update']"
-          >
-            编辑
-          </el-button>
-          <!-- todo @jason：增加一个【修改余额】 -->
-          <!-- todo @疯狂：增加一个【修改积分】，表单是：radio 增加/减少；input 具体的变化积分 -->
-          <!-- todo 放到更多菜单中 -->
-          <el-button
-            link
-            type="primary"
-            @click="updateLevelFormRef.open(scope.row.id)"
-            v-hasPermi="['member:user:update-level']"
-          >
-            修改等级
-          </el-button>
+          <div class="flex items-center justify-center">
+            <el-button link type="primary" @click="openDetail(scope.row.id)">详情</el-button>
+            <el-dropdown
+              @command="(command) => handleCommand(command, scope.row)"
+              v-hasPermi="[
+                'member:user:update',
+                'member:user:update-level',
+                'member:user:update-point',
+                'member:user:update-balance'
+              ]"
+            >
+              <el-button type="primary" link><Icon icon="ep:d-arrow-right" /> 更多</el-button>
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <el-dropdown-item
+                    command="handleUpdate"
+                    v-if="checkPermi(['member:user:update'])"
+                  >
+                    编辑
+                  </el-dropdown-item>
+                  <el-dropdown-item
+                    command="handleUpdateLevel"
+                    v-if="checkPermi(['member:user:update-level'])"
+                  >
+                    修改等级
+                  </el-dropdown-item>
+                  <el-dropdown-item
+                    command="handleUpdatePoint"
+                    v-if="checkPermi(['member:user:update-point'])"
+                  >
+                    修改积分
+                  </el-dropdown-item>
+                  <el-dropdown-item
+                    command="handleUpdateBlance"
+                    v-if="checkPermi(['member:user:update-balance'])"
+                  >
+                    修改余额(WIP)
+                  </el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
+          </div>
         </template>
       </el-table-column>
     </el-table>
@@ -155,6 +183,8 @@
   <UserForm ref="formRef" @success="getList" />
   <!-- 修改用户等级弹窗 -->
   <UpdateLevelForm ref="updateLevelFormRef" @success="getList" />
+  <!-- 修改用户积分弹窗 -->
+  <UpdatePointForm ref="updatePointFormRef" @success="getList" />
   <!-- 发送优惠券弹窗 -->
   <CouponSendForm ref="couponSendFormRef" />
 </template>
@@ -166,8 +196,10 @@ import UserForm from './UserForm.vue'
 import MemberTagSelect from '@/views/member/tag/components/MemberTagSelect.vue'
 import MemberLevelSelect from '@/views/member/level/components/MemberLevelSelect.vue'
 import MemberGroupSelect from '@/views/member/group/components/MemberGroupSelect.vue'
-import UpdateLevelForm from '@/views/member/user/UpdateLevelForm.vue'
+import UpdateLevelForm from './UpdateLevelForm.vue'
+import UpdatePointForm from './UpdatePointForm.vue'
 import CouponSendForm from '@/views/mall/promotion/coupon/components/CouponSendForm.vue'
+import { checkPermi } from '@/utils/permission'
 
 defineOptions({ name: 'MemberUser' })
 
@@ -189,6 +221,7 @@ const queryParams = reactive({
 })
 const queryFormRef = ref() // 搜索的表单
 const updateLevelFormRef = ref() // 修改会员等级表单
+const updatePointFormRef = ref() // 修改会员积分表单
 const selectedIds = ref<number[]>([]) // 表格的选中 ID 数组
 
 /** 查询列表 */
@@ -242,6 +275,26 @@ const openCoupon = () => {
   couponSendFormRef.value.open(selectedIds.value)
 }
 
+/** 操作分发 */
+const handleCommand = (command: string, row: UserApi.UserVO) => {
+  switch (command) {
+    case 'handleUpdate':
+      openForm('update', row.id)
+      break
+    case 'handleUpdateLevel':
+      updateLevelFormRef.value.open(row.id)
+      break
+    case 'handleUpdatePoint':
+      updatePointFormRef.value.open(row.id)
+      break
+    case 'handleUpdateBlance':
+      // todo @jason：增加一个【修改余额】
+      break
+    default:
+      break
+  }
+}
+
 /** 初始化 **/
 onMounted(() => {
   getList()