会员：会员详情-优惠券列表

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

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