index.vue 8.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274
  1. <template>
  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: rgb(24 144 255 / 10%)"
  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
  16. :duration="2600"
  17. :end-val="recordSummary.userCount"
  18. :start-val="0"
  19. class="text-20px"
  20. />
  21. </div>
  22. </div>
  23. </ContentWrap>
  24. </el-col>
  25. <el-col :span="6">
  26. <ContentWrap class="h-[110px]">
  27. <div class="flex items-center">
  28. <div
  29. class="h-[50px] w-[50px] flex items-center justify-center"
  30. style="color: rgb(162 119 255); background-color: rgb(162 119 255 / 10%)"
  31. >
  32. <Icon :size="23" icon="fa:user-plus" />
  33. </div>
  34. <div class="ml-[20px]">
  35. <div class="mb-8px text-14px text-gray-400">成团数量(个)</div>
  36. <CountTo
  37. :duration="2600"
  38. :end-val="recordSummary.successCount"
  39. :start-val="0"
  40. class="text-20px"
  41. />
  42. </div>
  43. </div>
  44. </ContentWrap>
  45. </el-col>
  46. <el-col :span="6">
  47. <ContentWrap class="h-[110px]">
  48. <div class="flex items-center">
  49. <div
  50. class="h-[50px] w-[50px] flex items-center justify-center"
  51. style="color: rgb(162 119 255); background-color: rgb(162 119 255 / 10%)"
  52. >
  53. <Icon :size="23" icon="fa:user-plus" />
  54. </div>
  55. <div class="ml-[20px]">
  56. <div class="mb-8px text-14px text-gray-400">虚拟成团(个)</div>
  57. <CountTo
  58. :duration="2600"
  59. :end-val="recordSummary.virtualGroupCount"
  60. :start-val="0"
  61. class="text-20px"
  62. />
  63. </div>
  64. </div>
  65. </ContentWrap>
  66. </el-col>
  67. </el-row>
  68. <!-- 搜索工作栏 -->
  69. <ContentWrap>
  70. <el-form
  71. ref="queryFormRef"
  72. :inline="true"
  73. :model="queryParams"
  74. class="-mb-15px"
  75. label-width="68px"
  76. >
  77. <el-form-item label="创建时间" prop="createTime">
  78. <el-date-picker
  79. v-model="queryParams.createTime"
  80. :shortcuts="defaultShortcuts"
  81. class="!w-240px"
  82. end-placeholder="结束日期"
  83. start-placeholder="开始日期"
  84. type="daterange"
  85. value-format="YYYY-MM-DD HH:mm:ss"
  86. />
  87. </el-form-item>
  88. <el-form-item label="拼团状态" prop="status">
  89. <el-select v-model="queryParams.status" class="!w-240px" clearable placeholder="全部">
  90. <el-option
  91. v-for="(dict, index) in getIntDictOptions(
  92. DICT_TYPE.PROMOTION_COMBINATION_RECORD_STATUS
  93. )"
  94. :key="index"
  95. :label="dict.label"
  96. :value="dict.value"
  97. />
  98. </el-select>
  99. </el-form-item>
  100. <el-form-item>
  101. <el-button @click="handleQuery">
  102. <Icon class="mr-5px" icon="ep:search" />
  103. 搜索
  104. </el-button>
  105. <el-button @click="resetQuery">
  106. <Icon class="mr-5px" icon="ep:refresh" />
  107. 重置
  108. </el-button>
  109. </el-form-item>
  110. </el-form>
  111. </ContentWrap>
  112. <!-- 分页列表数据展示 -->
  113. <ContentWrap>
  114. <el-table v-loading="loading" :data="pageList">
  115. <el-table-column align="center" label="编号" prop="id" min-width="50" />
  116. <el-table-column align="center" label="头像" prop="avatar" min-width="80">
  117. <template #default="scope">
  118. <el-avatar :src="scope.row.avatar" />
  119. </template>
  120. </el-table-column>
  121. <el-table-column align="center" label="昵称" prop="nickname" min-width="100" />
  122. <el-table-column align="center" label="开团团长" prop="headId" min-width="100">
  123. <template #default="{ row }: { row: CombinationRecordApi.CombinationRecordVO }">
  124. {{
  125. row.headId ? pageList.find((item) => item.id === row.headId)?.nickname : row.nickname
  126. }}
  127. </template>
  128. </el-table-column>
  129. <el-table-column
  130. :formatter="dateFormatter"
  131. align="center"
  132. label="开团时间"
  133. prop="startTime"
  134. width="180"
  135. />
  136. <el-table-column
  137. align="center"
  138. label="拼团商品"
  139. prop="type"
  140. show-overflow-tooltip
  141. min-width="300"
  142. >
  143. <template #defaul="{ row }">
  144. <el-image
  145. :src="row.picUrl"
  146. class="mr-5px h-30px w-30px align-middle"
  147. @click="imagePreview(row.picUrl)"
  148. />
  149. <span class="align-middle">{{ row.spuName }}</span>
  150. </template>
  151. </el-table-column>
  152. <el-table-column align="center" label="几人团" prop="userSize" min-width="100" />
  153. <el-table-column align="center" label="参与人数" prop="userCount" min-width="100" />
  154. <el-table-column
  155. :formatter="dateFormatter"
  156. align="center"
  157. label="参团时间"
  158. prop="createTime"
  159. width="180"
  160. />
  161. <el-table-column
  162. :formatter="dateFormatter"
  163. align="center"
  164. label="结束时间"
  165. prop="endTime"
  166. width="180"
  167. />
  168. <el-table-column align="center" label="拼团状态" prop="status" min-width="150">
  169. <template #default="scope">
  170. <dict-tag
  171. :type="DICT_TYPE.PROMOTION_COMBINATION_RECORD_STATUS"
  172. :value="scope.row.status"
  173. />
  174. </template>
  175. </el-table-column>
  176. <el-table-column align="center" fixed="right" label="操作">
  177. <template #default="scope">
  178. <el-button
  179. v-hasPermi="['promotion:combination-record:query']"
  180. link
  181. type="primary"
  182. @click="openRecordListDialog(scope.row)"
  183. >
  184. 查看拼团
  185. </el-button>
  186. </template>
  187. </el-table-column>
  188. </el-table>
  189. <!-- 分页 -->
  190. <Pagination
  191. v-model:limit="queryParams.pageSize"
  192. v-model:page="queryParams.pageNo"
  193. :total="total"
  194. @pagination="getList"
  195. />
  196. </ContentWrap>
  197. <!-- 表单弹窗 -->
  198. <CombinationRecordListDialog ref="combinationRecordListRef" />
  199. </template>
  200. <script lang="ts" setup>
  201. import CombinationRecordListDialog from './CombinationRecordListDialog.vue'
  202. import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
  203. import { dateFormatter, defaultShortcuts } from '@/utils/formatTime'
  204. import { createImageViewer } from '@/components/ImageViewer'
  205. import * as CombinationRecordApi from '@/api/mall/promotion/combination/combinationRecord'
  206. defineOptions({ name: 'PromotionCombinationRecord' })
  207. const queryParams = ref({
  208. status: undefined, // 拼团状态
  209. createTime: undefined, // 创建时间
  210. pageSize: 10,
  211. pageNo: 1
  212. })
  213. const queryFormRef = ref() // 搜索的表单
  214. const combinationRecordListRef = ref() // 查询表单 Ref
  215. const loading = ref(true) // 列表的加载中
  216. const total = ref(0) // 总记录数
  217. const pageList = ref<CombinationRecordApi.CombinationRecordVO[]>([]) // 分页数据
  218. /** 查询列表 */
  219. const getList = async () => {
  220. loading.value = true
  221. try {
  222. const data = await CombinationRecordApi.getCombinationRecordPage(queryParams.value)
  223. pageList.value = data.list as CombinationRecordApi.CombinationRecordVO[]
  224. total.value = data.total
  225. } finally {
  226. loading.value = false
  227. }
  228. }
  229. // 拼团统计数据
  230. const recordSummary = ref({
  231. successCount: 0,
  232. userCount: 0,
  233. virtualGroupCount: 0
  234. })
  235. /** 获得拼团记录统计信息 */
  236. const getSummary = async () => {
  237. recordSummary.value = await CombinationRecordApi.getCombinationRecordSummary()
  238. }
  239. /** 查看拼团详情 */
  240. const openRecordListDialog = (row: CombinationRecordApi.CombinationRecordVO) => {
  241. combinationRecordListRef.value?.open(row.headId || row.id) // 多表达式的原因,团长的 headId 为空,就是自身的情况
  242. }
  243. /** 搜索按钮操作 */
  244. const handleQuery = () => {
  245. queryParams.value.pageNo = 1
  246. getList()
  247. }
  248. /** 重置按钮操作 */
  249. const resetQuery = () => {
  250. queryFormRef.value.resetFields()
  251. handleQuery()
  252. }
  253. /** 商品图预览 */
  254. const imagePreview = (imgUrl: string) => {
  255. createImageViewer({
  256. urlList: [imgUrl]
  257. })
  258. }
  259. /** 初始化 **/
  260. onMounted(async () => {
  261. await getSummary()
  262. await getList()
  263. })
  264. </script>