Skip to content

Commit b48f19c

Browse files
owen118zowen118z
committed
会员：会员详情-优惠券列表
1 parent 675f3df commit b48f19c

File tree

2 files changed

+211
-20
lines changed

2 files changed

+211
-20
lines changed

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

Lines changed: 190 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,190 @@
1+
<template>
2+
<!-- 搜索工作栏 -->
3+
<ContentWrap>
4+
<el-form
5+
ref="queryFormRef"
6+
:inline="true"
7+
:model="queryParams"
8+
class="-mb-15px"
9+
label-width="68px"
10+
>
11+
<el-form-item label="创建时间" prop="createTime">
12+
<el-date-picker
13+
v-model="queryParams.createTime"
14+
value-format="YYYY-MM-DD HH:mm:ss"
15+
type="daterange"
16+
start-placeholder="开始日期"
17+
end-placeholder="结束日期"
18+
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
19+
class="!w-240px"
20+
/>
21+
</el-form-item>
22+
<el-form-item>
23+
<el-button @click="handleQuery"> <Icon icon="ep:search" class="mr-5px" />搜索 </el-button>
24+
<el-button @click="resetQuery"> <Icon icon="ep:refresh" class="mr-5px" />重置 </el-button>
25+
</el-form-item>
26+
</el-form>
27+
</ContentWrap>
28+
29+
<ContentWrap>
30+
<!-- Tab 选项：真正的内容在 Lab -->
31+
<el-tabs v-model="activeTab" type="card" @tab-change="onTabChange">
32+
<el-tab-pane
33+
v-for="tab in statusTabs"
34+
:key="tab.value"
35+
:label="tab.label"
36+
:name="tab.value"
37+
/>
38+
</el-tabs>
39+
40+
<!-- 列表 -->
41+
<el-table v-loading="loading" :data="list">
42+
<el-table-column label="优惠劵" align="center" prop="name" />
43+
<el-table-column label="优惠券类型" align="center" prop="discountType">
44+
<template #default="scope">
45+
<dict-tag :type="DICT_TYPE.PROMOTION_DISCOUNT_TYPE" :value="scope.row.discountType" />
46+
</template>
47+
</el-table-column>
48+
<el-table-column label="领取方式" align="center" prop="takeType">
49+
<template #default="scope">
50+
<dict-tag :type="DICT_TYPE.PROMOTION_COUPON_TAKE_TYPE" :value="scope.row.takeType" />
51+
</template>
52+
</el-table-column>
53+
<el-table-column label="状态" align="center" prop="status">
54+
<template #default="scope">
55+
<dict-tag :type="DICT_TYPE.PROMOTION_COUPON_STATUS" :value="scope.row.status" />
56+
</template>
57+
</el-table-column>
58+
<el-table-column
59+
label="领取时间"
60+
align="center"
61+
prop="createTime"
62+
:formatter="dateFormatter"
63+
width="180"
64+
/>
65+
<el-table-column
66+
label="使用时间"
67+
align="center"
68+
prop="useTime"
69+
:formatter="dateFormatter"
70+
width="180"
71+
/>
72+
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
73+
<template #default="scope">
74+
<el-button
75+
v-hasPermi="['promotion:coupon:delete']"
76+
type="danger"
77+
link
78+
@click="handleDelete(scope.row.id)"
79+
>
80+
回收
81+
</el-button>
82+
</template>
83+
</el-table-column>
84+
</el-table>
85+
<!-- 分页 -->
86+
<Pagination
87+
v-model:limit="queryParams.pageSize"
88+
v-model:page="queryParams.pageNo"
89+
:total="total"
90+
@pagination="getList"
91+
/>
92+
</ContentWrap>
93+
</template>
94+
95+
<script setup lang="ts" name="UserCouponList">
96+
import { deleteCoupon, getCouponPage } from '@/api/mall/promotion/coupon/coupon'
97+
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
98+
import { dateFormatter } from '@/utils/formatTime'
99+
100+
defineOptions({ name: 'UserCouponList' })
101+
102+
const { userId }: { userId: number } = defineProps({
103+
userId: {
104+
type: Number,
105+
required: true
106+
}
107+
}) //用户编号
108+
109+
const message = useMessage() // 消息弹窗
110+
111+
const loading = ref(true) // 列表的加载中
112+
const total = ref(0) // 列表的总页数
113+
const list = ref([]) // 字典表格数据
114+
// 查询参数
115+
const queryParams = reactive({
116+
pageNo: 1,
117+
pageSize: 10,
118+
createTime: [],
119+
status: undefined,
120+
userIds: undefined
121+
})
122+
const queryFormRef = ref() // 搜索的表单
123+
124+
const activeTab = ref('all') // Tab 筛选
125+
const statusTabs = reactive([
126+
{
127+
label: '全部',
128+
value: 'all'
129+
}
130+
])
131+
132+
/** 查询列表 */
133+
const getList = async () => {
134+
loading.value = true
135+
// 执行查询
136+
try {
137+
queryParams.userIds = userId
138+
const data = await getCouponPage(queryParams)
139+
list.value = data.list
140+
total.value = data.total
141+
} finally {
142+
loading.value = false
143+
}
144+
}
145+
146+
/** 搜索按钮操作 */
147+
const handleQuery = () => {
148+
queryParams.pageNo = 1
149+
getList()
150+
}
151+
152+
/** 重置按钮操作 */
153+
const resetQuery = () => {
154+
queryFormRef.value?.resetFields()
155+
handleQuery()
156+
}
157+
158+
/** 删除按钮操作 */
159+
const handleDelete = async (id: number) => {
160+
try {
161+
// 二次确认
162+
await message.confirm(
163+
'回收将会收回会员领取的待使用的优惠券，已使用的将无法回收，确定要回收所选优惠券吗？'
164+
)
165+
// 发起删除
166+
await deleteCoupon(id)
167+
message.notifySuccess('回收成功')
168+
// 重新加载列表
169+
await getList()
170+
} catch {}
171+
}
172+
173+
/** tab 切换 */
174+
const onTabChange = (tabName) => {
175+
queryParams.status = tabName === 'all' ? undefined : tabName
176+
getList()
177+
}
178+
179+
/** 初始化 **/
180+
onMounted(() => {
181+
getList()
182+
// 设置 statuses 过滤
183+
for (const dict of getIntDictOptions(DICT_TYPE.PROMOTION_COUPON_STATUS)) {
184+
statusTabs.push({
185+
label: dict.label,
186+
value: dict.value as string
187+
})
188+
}
189+
})
190+
</script>

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

Lines changed: 21 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -16,41 +16,42 @@
1616
</el-col>
1717
<!-- 右上角：账户信息 -->
1818
<el-col :span="10" class="detail-info-item">
19-
<el-card shadow="never">
19+
<el-card shadow="never" class="h-full">
2020
<template #header>
2121
<CardTitle title="账户信息" />
2222
</template>
2323
<UserAccountInfo :user="user" />
2424
</el-card>
2525
</el-col>
2626
<!-- 下边：账户明细 -->
27-
<!-- TODO 芋艿：【订单管理】【售后管理】【收藏记录】【优惠劵】 -->
27+
<!-- TODO 芋艿：【订单管理】【售后管理】【收藏记录】-->
2828
<el-card header="账户明细" style="width: 100%; margin-top: 20px" shadow="never">
2929
<template #header>
3030
<CardTitle title="账户明细" />
3131
</template>
32-
<el-tabs v-model="activeName">
33-
<el-tab-pane label="积分" name="point">
32+
<el-tabs>
33+
<el-tab-pane label="积分">
3434
<UserPointList :user-id="id" />
3535
</el-tab-pane>
36-
<el-tab-pane label="签到" name="sign" lazy>
36+
<el-tab-pane label="签到" lazy>
3737
<UserSignList :user-id="id" />
3838
</el-tab-pane>
39-
<el-tab-pane label="成长值" name="experience" lazy>
40-
<UserExperienceRecordList :user-id="id"
41-
/></el-tab-pane>
39+
<el-tab-pane label="成长值" lazy>
40+
<UserExperienceRecordList :user-id="id" />
41+
</el-tab-pane>
4242
<!-- TODO @jason：增加一个余额变化； -->
43-
<el-tab-pane label="余额" name="fourth">余额(WIP)</el-tab-pane>
44-
<el-tab-pane label="收货地址" name="address" lazy>
43+
<el-tab-pane label="余额" lazy>余额(WIP)</el-tab-pane>
44+
<el-tab-pane label="收货地址" lazy>
4545
<UserAddressList :user-id="id" />
4646
</el-tab-pane>
47-
<el-tab-pane label="订单管理" name="order" lazy>
47+
<el-tab-pane label="订单管理" lazy>
4848
<UserOrderList :user-id="id" />
4949
</el-tab-pane>
50-
<el-tab-pane label="售后管理" name="fourth">售后管理(WIP)</el-tab-pane>
51-
<el-tab-pane label="收藏记录" name="fourth">收藏记录(WIP)</el-tab-pane>
52-
<!-- TODO @疯狂：优惠劵的读取 -->
53-
<el-tab-pane label="优惠劵" name="fourth">优惠劵(WIP)</el-tab-pane>
50+
<el-tab-pane label="售后管理" lazy>售后管理(WIP)</el-tab-pane>
51+
<el-tab-pane label="收藏记录" lazy>收藏记录(WIP)</el-tab-pane>
52+
<el-tab-pane label="优惠劵" lazy>
53+
<UserCouponList :user-id="id" />
54+
</el-tab-pane>
5455
<!-- TODO @疯狂：增加获得分校用户；直接查询出所有；需要体现出是一级还是二级；用户编号、昵称、级别、绑定时间 -->
5556
</el-tabs>
5657
</el-card>
@@ -63,22 +64,22 @@
6364
<script setup lang="ts">
6465
import * as UserApi from '@/api/member/user'
6566
import { useTagsViewStore } from '@/store/modules/tagsView'
66-
import UserBasicInfo from './UserBasicInfo.vue'
6767
import UserForm from '@/views/member/user/UserForm.vue'
6868
import UserAccountInfo from './UserAccountInfo.vue'
6969
import UserAddressList from './UserAddressList.vue'
70+
import UserBasicInfo from './UserBasicInfo.vue'
71+
import UserCouponList from './UserCouponList.vue'
72+
import UserExperienceRecordList from './UserExperienceRecordList.vue'
73+
import UserOrderList from './UserOrderList.vue'
7074
import UserPointList from './UserPointList.vue'
7175
import UserSignList from './UserSignList.vue'
72-
import UserExperienceRecordList from './UserExperienceRecordList.vue'
7376
import { CardTitle } from '@/components/Card/index'
74-
import UserOrderList from '@/views/member/user/detail/UserOrderList.vue'
7577
import { ElMessage } from 'element-plus'
7678
7779
defineOptions({ name: 'MemberDetail' })
7880
79-
const activeName = ref('point') // 账户明细 选中的 tabs
8081
const loading = ref(true) // 加载中
81-
const user = ref<UserApi.UserVO>({})
82+
const user = ref<UserApi.UserVO>({} as UserApi.UserVO)
8283
8384
/** 添加/修改操作 */
8485
const formRef = ref()

0 commit comments

Comments
 (0)