From b48f19c6467cf6677b8547e0e272b984750c2758 Mon Sep 17 00:00:00 2001
From: owen <owen@evolsun.com>
Date: Sat, 30 Sep 2023 13:55:42 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=9A=E5=91=98=EF=BC=9A=E4=BC=9A=E5=91=98?=
=?UTF-8?q?=E8=AF=A6=E6=83=85-=E4=BC=98=E6=83=A0=E5=88=B8=E5=88=97?=
=?UTF-8?q?=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../member/user/detail/UserCouponList.vue | 190 ++++++++++++++++++
src/views/member/user/detail/index.vue | 41 ++--
2 files changed, 211 insertions(+), 20 deletions(-)
create mode 100644 src/views/member/user/detail/UserCouponList.vue
diff --git a/src/views/member/user/detail/UserCouponList.vue b/src/views/member/user/detail/UserCouponList.vue
new file mode 100644
index 00000000..2279b8aa
--- /dev/null
+++ b/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>
diff --git a/src/views/member/user/detail/index.vue b/src/views/member/user/detail/index.vue
index 432b002d..9bade0f6 100644
--- a/src/views/member/user/detail/index.vue
+++ b/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,33 +24,34 @@
</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>
+ <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 @疯狂：增加获得分校用户；直接查询出所有；需要体现出是一级还是二级；用户编号、昵称、级别、绑定时间 -->
</el-tabs>
</el-card>
@@ -63,22 +64,22 @@
<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 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()