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()