From a1d7e81859f554f3a53680cc35f0f49bf1f77098 Mon Sep 17 00:00:00 2001
From: wwf <1971391498@qq.com>
Date: 星期四, 14 五月 2026 14:37:02 +0800
Subject: [PATCH] 导入项目
---
src/views/mall/statistics/product/components/ProductRank.vue | 108 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 108 insertions(+), 0 deletions(-)
diff --git a/src/views/mall/statistics/product/components/ProductRank.vue b/src/views/mall/statistics/product/components/ProductRank.vue
new file mode 100644
index 0000000..d86ecfc
--- /dev/null
+++ b/src/views/mall/statistics/product/components/ProductRank.vue
@@ -0,0 +1,108 @@
+<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"
+ :formatter="fenToYuanFormat"
+ />
+ <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'
+import { fenToYuanFormat } from '@/utils/formatter'
+
+/** 鍟嗗搧鎺掕 */
+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>
--
Gitblit v1.8.0