Skip to content

Commit eee3d0f

Browse files
author
puhui999
committed
拼团记录： 完成 UI 部分
1 parent 869bac2 commit eee3d0f

File tree

2 files changed

+155
-3
lines changed

2 files changed

+155
-3
lines changed

‎src/utils/dict.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export const getDictOptions = (dictType: string) => {
2424
return dictStore.getDictByType(dictType) || []
2525
}
2626

27-
export const getIntDictOptions = (dictType: string) => {
27+
export const getIntDictOptions = (dictType: string): DictDataType[] => {
2828
const dictOption: DictDataType[] = []
2929
const dictOptions: DictDataType[] = getDictOptions(dictType)
3030
dictOptions.forEach((dict: DictDataType) => {

‎src/views/mall/promotion/combination/record/index.vue

Lines changed: 154 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,157 @@
11
<template>
2-
<div></div>
2+
<!-- 统计信息展示 -->
3+
<el-row :gutter="12">
4+
<el-col :span="6">
5+
<ContentWrap class="h-[110px] pb-0!">
6+
<div class="flex items-center">
7+
<div
8+
class="h-[50px] w-[50px] flex items-center justify-center"
9+
style="color: rgb(24, 144, 255); background-color: rgba(24, 144, 255, 0.1)"
10+
>
11+
<Icon :size="23" icon="fa:user-times" />
12+
</div>
13+
<div class="ml-[20px]">
14+
<div class="mb-8px text-14px text-gray-400">参与人数(个)</div>
15+
<CountTo :duration="2600" :end-val="2200" :start-val="0" class="text-20px" />
16+
</div>
17+
</div>
18+
</ContentWrap>
19+
</el-col>
20+
<el-col :span="6">
21+
<ContentWrap class="h-[110px]">
22+
<div class="flex items-center">
23+
<div
24+
class="h-[50px] w-[50px] flex items-center justify-center"
25+
style="color: rgb(162, 119, 255); background-color: rgba(162, 119, 255, 0.1)"
26+
>
27+
<Icon :size="23" icon="fa:user-plus" />
28+
</div>
29+
<div class="ml-[20px]">
30+
<div class="mb-8px text-14px text-gray-400">成团数量(个)</div>
31+
<CountTo :duration="2600" :end-val="2200" :start-val="0" class="text-20px" />
32+
</div>
33+
</div>
34+
</ContentWrap>
35+
</el-col>
36+
</el-row>
37+
38+
<ContentWrap>
39+
<!-- 检索条件 -->
40+
<div class="mb-[10px]">
41+
<span class="font-size-[14px]" style="font-weight: bold; color: #606266">时间选择：</span>
42+
<el-button-group class="ml-[10px]">
43+
<el-button>全部</el-button>
44+
<el-button>今天</el-button>
45+
<el-button>昨天</el-button>
46+
<el-button>最近七天</el-button>
47+
<el-button>最近30天</el-button>
48+
<el-button>本月</el-button>
49+
<el-button>本年</el-button>
50+
</el-button-group>
51+
</div>
52+
<div class="mb-[10px]">
53+
<span class="font-size-[14px]" style="font-weight: bold; color: #606266">时间区间选择：</span>
54+
<el-date-picker
55+
v-model="queryParams.createTime"
56+
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
57+
class="!w-240px"
58+
end-placeholder="结束日期"
59+
start-placeholder="开始日期"
60+
type="daterange"
61+
value-format="YYYY-MM-DD HH:mm:ss"
62+
/>
63+
</div>
64+
<div class="mb-[10px]">
65+
<span class="font-size-[14px]" style="font-weight: bold; color: #606266">拼团状态：</span>
66+
<el-select v-model="queryParams.status" class="!w-240px" clearable placeholder="全部">
67+
<el-option
68+
v-for="(dict, index) in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
69+
:key="index"
70+
:label="dict.label"
71+
:value="dict.value"
72+
/>
73+
</el-select>
74+
</div>
75+
<!-- 分页列表数据展示 -->
76+
<el-table v-loading="loading" :data="pageList">
77+
<el-table-column align="center" label="编号" prop="id" />
78+
<!-- TODO 是否需要做一个点击用户头像跳转或查看用户信息的功能 -->
79+
<el-table-column align="center" label="头像" prop="avatars" />
80+
<el-table-column align="center" label="开团团长" prop="avatar" />
81+
<el-table-column
82+
:formatter="dateFormatter"
83+
align="center"
84+
label="开团时间"
85+
prop="startTime"
86+
width="180"
87+
/>
88+
<el-table-column
89+
align="center"
90+
label="拼团商品"
91+
prop="type"
92+
show-overflow-tooltip
93+
width="300"
94+
>
95+
<template #defaul="{ row }">
96+
<el-image
97+
:src="row.picUrl"
98+
class="mr-5px h-30px w-30px align-middle"
99+
@click="imagePreview(row.picUrl)"
100+
/>
101+
<span class="align-middle">{{ row.spuName }}</span>
102+
</template>
103+
</el-table-column>
104+
<el-table-column align="center" label="几人团" prop="userSize" />
105+
<el-table-column align="center" label="参与人数" prop="userCount" />
106+
<el-table-column
107+
:formatter="dateFormatter"
108+
align="center"
109+
label="结束时间"
110+
prop="endTime"
111+
width="180"
112+
/>
113+
<el-table-column align="center" label="拼团状态" prop="status">
114+
<template #default="scope">
115+
<dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
116+
</template>
117+
</el-table-column>
118+
<el-table-column align="center" label="操作">
119+
<template #default></template>
120+
</el-table-column>
121+
</el-table>
122+
<!-- 分页 -->
123+
<Pagination
124+
v-model:limit="queryParams.pageSize"
125+
v-model:page="queryParams.pageNo"
126+
:total="total"
127+
@pagination="getList"
128+
/>
129+
</ContentWrap>
3130
</template>
4131

5-
<script lang="ts" name="CombinationRecord" setup></script>
132+
<script lang="ts" setup>
133+
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
134+
import { dateFormatter } from '@/utils/formatTime'
135+
import { createImageViewer } from '@/components/ImageViewer'
136+
137+
defineOptions({ name: 'CombinationRecord' })
138+
const queryParams = ref({
139+
status: undefined, // 拼团状态
140+
createTime: undefined, // 创建时间
141+
pageSize: 10,
142+
pageNo: 1
143+
})
144+
const loading = ref(false) // 列表的加载中
145+
const total = ref(0) // 总记录数
146+
const pageList = ref([]) // 分页数据
147+
/**
148+
* 获取分页数据
149+
*/
150+
const getList = async () => {}
151+
/** 商品图预览 */
152+
const imagePreview = (imgUrl: string) => {
153+
createImageViewer({
154+
urlList: [imgUrl]
155+
})
156+
}
157+
</script>

0 commit comments

Comments
 (0)