!351 商品统计

Merge pull request !351 from 疯狂的世界/dev

Author: YunaiV

src/api/mall/statistics/product.ts

@@ -0,0 +1,52 @@
+import request from '@/config/axios'
+import { DataComparisonRespVO } from '@/api/mall/statistics/common'
+
+export interface ProductStatisticsVO {
+  id: number
+  day: string
+  spuId: number
+  spuName: string
+  spuPicUrl: string
+  browseCount: number
+  browseUserCount: number
+  favoriteCount: number
+  cartCount: number
+  orderCount: number
+  orderPayCount: number
+  orderPayPrice: number
+  afterSaleCount: number
+  afterSaleRefundPrice: number
+  browseConvertPercent: number
+}
+
+// 商品统计 API
+export const ProductStatisticsApi = {
+  // 获得商品统计分析
+  getProductStatisticsAnalyse: (params: any) => {
+    return request.get<DataComparisonRespVO<ProductStatisticsVO>>({
+      url: '/statistics/product/analyse',
+      params
+    })
+  },
+  // 获得商品状况明细
+  getProductStatisticsList: (params: any) => {
+    return request.get<ProductStatisticsVO[]>({
+      url: '/statistics/product/list',
+      params
+    })
+  },
+  // 导出获得商品状况明细 Excel
+  exportProductStatisticsExcel: (params: any) => {
+    return request.download({
+      url: '/statistics/product/export-excel',
+      params
+    })
+  },
+  // 获得商品排行榜分页
+  getProductStatisticsRankPage: async (params: any) => {
+    return await request.get({
+      url: `/statistics/product/rank-page`,
+      params
+    })
+  }
+}

src/api/mall/statistics/trade.ts

@@ -66,9 +66,9 @@ export const getTradeStatisticsSummary = () => {
 }
 
 // 获得交易状况统计
-export const getTradeTrendSummary = (params: TradeTrendReqVO) => {
+export const getTradeStatisticsAnalyse = (params: TradeTrendReqVO) => {
   return request.get<DataComparisonRespVO<TradeTrendSummaryRespVO>>({
-    url: '/statistics/trade/trend/summary',
+    url: '/statistics/trade/analyse',
     params: formatDateParam(params)
   })
 }

src/config/axios/service.ts

@@ -70,27 +70,11 @@ service.interceptors.request.use(
     }
     // get参数编码
     if (config.method?.toUpperCase() === 'GET' && params) {
-      let url = config.url + '?'
-      for (const propName of Object.keys(params)) {
-        const value = params[propName]
-        if (value !== void 0 && value !== null && typeof value !== 'undefined') {
-          if (typeof value === 'object') {
-            for (const val of Object.keys(value)) {
-              const params = propName + '[' + val + ']'
-              const subPart = encodeURIComponent(params) + '='
-              url += subPart + encodeURIComponent(value[val]) + '&'
-            }
-          } else {
-            url += `${propName}=${encodeURIComponent(value)}&`
-          }
-        }
-      }
-      // 给 get 请求加上时间戳参数，避免从缓存中拿数据
-      // const now = new Date().getTime()
-      // params = params.substring(0, url.length - 1) + `?_t=${now}`
-      url = url.slice(0, -1)
       config.params = {}
-      config.url = url
+      const paramsStr = qs.stringify(params, { allowDots: true })
+      if (paramsStr) {
+        config.url = config.url + '?' + paramsStr
+      }
     }
     return config
   },

src/utils/index.ts

@@ -285,3 +285,12 @@ export const getUrlValue = (key: string, urlStr: string = location.href): string
 export const getUrlNumberValue = (key: string, urlStr: string = location.href): number => {
   return toNumber(getUrlValue(key, urlStr))
 }
+
+/**
+ * 构建排序字段
+ * @param prop 字段名称
+ * @param order 顺序
+ */
+export const buildSortingField = ({ prop, order }) => {
+  return { field: prop, order: order === 'ascending' ? 'asc' : 'desc' }
+}

src/views/mall/statistics/product/components/ProductRank.vue

@@ -0,0 +1,104 @@
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <!-- 标题 -->
+      <div class="flex flex-row items-center justify-between">
+        <CardTitle title="商品排行" />
+        <!-- 查询条件 -->
+        <ShortcutDateRangePicker ref="shortcutDateRangePicker" @change="handleDateRangeChange" />
+      </div>
+    </template>
+    <!-- 排行列表 -->
+    <el-table v-loading="loading" :data="list" @sort-change="handleSortChange">
+      <el-table-column label="商品ID" prop="spuId" min-width="70" />
+      <el-table-column label="商品图片" align="center" prop="picUrl" width="80">
+        <template #default="{ row }">
+          <el-image
+            :src="row.picUrl"
+            :preview-src-list="[row.picUrl]"
+            class="h-30px w-30px"
+            preview-teleported
+          />
+        </template>
+      </el-table-column>
+      <el-table-column label="商品名称" prop="name" min-width="200" :show-overflow-tooltip="true" />
+      <el-table-column label="浏览量" prop="browseCount" min-width="90" sortable="custom" />
+      <el-table-column label="访客数" prop="browseUserCount" min-width="90" sortable="custom" />
+      <el-table-column label="加购件数" prop="cartCount" min-width="105" sortable="custom" />
+      <el-table-column label="下单件数" prop="orderCount" min-width="105" sortable="custom" />
+      <el-table-column label="支付件数" prop="orderPayCount" min-width="105" sortable="custom" />
+      <el-table-column label="支付金额" prop="orderPayPrice" min-width="105" sortable="custom" />
+      <el-table-column label="收藏数" prop="favoriteCount" min-width="90" sortable="custom" />
+      <el-table-column
+        label="访客-支付转化率(%)"
+        prop="browseConvertPercent"
+        min-width="180"
+        sortable="custom"
+        :formatter="formatConvertRate"
+      />
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getSpuList"
+    />
+  </el-card>
+</template>
+<script lang="ts" setup>
+import { ProductStatisticsApi, ProductStatisticsVO } from '@/api/mall/statistics/product'
+import { CardTitle } from '@/components/Card'
+import { buildSortingField } from '@/utils'
+
+/** 商品排行 */
+defineOptions({ name: 'ProductRank' })
+
+// 格式化：访客-支付转化率
+const formatConvertRate = (row: ProductStatisticsVO) => {
+  return `${row.browseConvertPercent}%`
+}
+
+const handleSortChange = (params: any) => {
+  queryParams.sortingFields = [buildSortingField(params)]
+  getSpuList()
+}
+
+const handleDateRangeChange = (times: any[]) => {
+  queryParams.times = times as []
+  getSpuList()
+}
+
+const shortcutDateRangePicker = ref()
+// 查询参数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  times: [],
+  sortingFields: {}
+})
+// 列表的加载中
+const loading = ref(false)
+// 列表的总页数
+const total = ref(0)
+// 列表的数据
+const list = ref<ProductStatisticsVO[]>([])
+
+/** 查询商品列表 */
+const getSpuList = async () => {
+  loading.value = true
+  try {
+    const data = await ProductStatisticsApi.getProductStatisticsRankPage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 初始化 **/
+onMounted(async () => {
+  await getSpuList()
+})
+</script>
+<style lang="scss" scoped></style>