huangzhenbao/medical-mall
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化细节

Browse Source
This commit is contained in:
huangzhenbao
2026-02-06 12:06:33 +08:00
parent b7545173c6
commit d00f0b7412
83 changed files with 3901 additions and 2354 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
pages/mall/admin/product/product-statistics/index.uvue
View File

@@ -1,22 +1,22 @@
<template>
<template>
<view class="product-statistic-page">
<!-- 商品概况头部 -->
<!-- 鍟嗗搧姒傚喌澶撮儴 -->
<view class="page-header-row">
<view class="title-wrap">
<text class="page-title">商品概况</text>
<text class="page-title">鍟嗗搧姒傚喌</text>
<view class="info-icon">?</view>
</view>
<view class="header-right">
<view class="date-picker-wrap">
<text class="calendar-emoji">📅</text>
<text class="calendar-emoji">馃搮</text>
<text class="date-range">2026/01/04 - 2026/02/02</text>
</view>
<button class="btn-query">查询</button>
<button class="btn-export">导出</button>
<button class="btn-query">鏌ヨ</button>
<button class="btn-export">瀵煎嚭</button>
</view>
</view>
<!-- 统计指标网格 (使用统一响应式网格) -->
<!-- 缁熻鎸囨爣缃戞牸 (浣跨敤缁熶竴鍝嶅簲寮忕綉鏍? -->
<view class="kpi-grid">
<view v-for="(item, index) in statItems" :key="index" class="stat-card">
<view class="stat-main">
@@ -27,11 +27,11 @@
<text class="stat-label">{{ item.label }}</text>
<text class="stat-value">{{ item.value }}</text>
<view class="stat-compare">
<text class="compare-label">坏比增长：</text>
<text class="compare-label">鍧忔瘮澧為暱锛?/text>
<text class="compare-val" :class="item.trendClass">
{{ item.compare }}
<text v-if="item.trend === 'up'" class="arrow">▲</text>
<text v-else-if="item.trend === 'down'" class="arrow">▼</text>
<text v-if="item.trend === 'up'" class="arrow">鈻?/text>
<text v-else-if="item.trend === 'down'" class="arrow">鈻?/text>
<text v-else>-</text>
</text>
</view>
@@ -40,17 +40,17 @@
</view>
</view>
<!-- 图表卡片 -->
<!-- 鍥捐〃鍗＄墖 -->
<view class="chart-card">
<view class="chart-header">
<view class="legend-wrap">
<view class="legend-item"><view class="dot purple"></view><text>商品浏览量</text></view>
<view class="legend-item"><view class="dot orange"></view><text>商品访客量</text></view>
<view class="legend-item"><view class="dot blue"></view><text>支付金额</text></view>
<view class="legend-item"><view class="dot green"></view><text>退款金额</text></view>
<view class="legend-item"><view class="dot purple"></view><text>鍟嗗搧娴忚閲?/text></view>
<view class="legend-item"><view class="dot orange"></view><text>鍟嗗搧璁垮閲?/text></view>
<view class="legend-item"><view class="dot blue"></view><text>鏀粯閲戦</text></view>
<view class="legend-item"><view class="dot green"></view><text>閫€娆鹃噾棰?/text></view>
</view>
<view class="download-icon">
<text class="download-emoji">📥</text>
<text class="download-emoji">馃摜</text>
</view>
</view>
<view class="chart-main">
@@ -58,36 +58,36 @@
</view>
</view>
<!-- 商品排行 -->
<!-- 鍟嗗搧鎺掕 -->
<view class="ranking-card">
<view class="ranking-header">
<text class="ranking-title">商品排行</text>
<text class="ranking-title">鍟嗗搧鎺掕</text>
<view class="ranking-filters">
<view class="mock-select-wrap">
<text class="select-val">浏览量</text>
<text class="select-arrow">▼</text>
<text class="select-val">娴忚閲?/text>
<text class="select-arrow">鈻?/text>
</view>
<view class="date-picker-wrap">
<text class="calendar-emoji">📅</text>
<text class="calendar-emoji">馃搮</text>
<text class="date-range">2026/01/04 - 2026/02/02</text>
</view>
<button class="btn-query small">查询</button>
<button class="btn-query small">鏌ヨ</button>
</view>
</view>
<view class="ranking-table">
<view class="table-header">
<text class="th col-id">ID</text>
<text class="th col-img">商品图片</text>
<text class="th col-name">商品名称</text>
<text class="th col-num">浏览量</text>
<text class="th col-num">访客数</text>
<text class="th col-num">加购件数</text>
<text class="th col-num">下单件数</text>
<text class="th col-num">支付件数</text>
<text class="th col-num">支付金额</text>
<text class="th col-num">收藏数</text>
<text class="th col-num wide">访客-支付转化率(%)</text>
<text class="th col-img">鍟嗗搧鍥剧墖</text>
<text class="th col-name">鍟嗗搧鍚嶇О</text>
<text class="th col-num">娴忚閲?/text>
<text class="th col-num">璁垮鏁?/text>
<text class="th col-num">鍔犺喘浠舵暟</text>
<text class="th col-num">涓嬪崟浠舵暟</text>
<text class="th col-num">鏀粯浠舵暟</text>
<text class="th col-num">鏀粯閲戦</text>
<text class="th col-num">鏀惰棌鏁?/text>
<text class="th col-num wide">璁垮-鏀粯杞寲鐜?%)</text>
</view>
<view v-for="(item, index) in rankingList" :key="index" class="table-row">
<text class="td col-id">{{ item.id }}</text>
@@ -116,19 +116,19 @@ import { ref, onMounted } from 'vue'
import EChartsView from '@/uni_modules/charts/EChartsView.vue'
const statItems = ref([
{ label: '商品浏览量', value: '7576', compare: '0.93%', trend: 'up', trendClass: 'up-red', bgColor: '#e6f7ff', emoji: '👁️' },
{ label: '商品访客量', value: '765', compare: '0.79%', trend: 'up', trendClass: 'up-red', bgColor: '#f6ffed', emoji: '👤' },
{ label: '支付件数', value: '322', compare: '-49.52%', trend: 'down', trendClass: 'down-green', bgColor: '#fff7e6', emoji: '🛍️' },
{ label: '支付金额', value: '443254.62', compare: '-63.62%', trend: 'down', trendClass: 'down-green', bgColor: '#f9f0ff', emoji: '💰' },
{ label: '退款件数', value: '0', compare: '0.00%', trend: 'none', trendClass: 'none-gray', bgColor: '#e6f7ff', emoji: '🔄' },
{ label: '退款金额', value: '0', compare: '0.00%', trend: 'none', trendClass: 'none-gray', bgColor: '#f6ffed', emoji: '💴' }
{ label: '鍟嗗搧娴忚閲?, value: '7576', compare: '0.93%', trend: 'up', trendClass: 'up-red', bgColor: '#e6f7ff', emoji: '馃憗锔? },
{ label: '鍟嗗搧璁垮閲?, value: '765', compare: '0.79%', trend: 'up', trendClass: 'up-red', bgColor: '#f6ffed', emoji: '馃懁' },
{ label: '鏀粯浠舵暟', value: '322', compare: '-49.52%', trend: 'down', trendClass: 'down-green', bgColor: '#fff7e6', emoji: '馃泹锔? },
{ label: '鏀粯閲戦', value: '443254.62', compare: '-63.62%', trend: 'down', trendClass: 'down-green', bgColor: '#f9f0ff', emoji: '馃挵' },
{ label: '閫€娆句欢鏁?, value: '0', compare: '0.00%', trend: 'none', trendClass: 'none-gray', bgColor: '#e6f7ff', emoji: '馃攧' },
{ label: '閫€娆鹃噾棰?, value: '0', compare: '0.00%', trend: 'none', trendClass: 'none-gray', bgColor: '#f6ffed', emoji: '馃挻' }
])
const rankingList = ref([
{
id: 963,
image: 'https://img1.baidu.com/it/u=254065646,3100346083&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
name: 'UR2024夏季新款女装复古纯欲氛围感一字肩短款T恤衫UWG440060',
name: 'UR2024澶忓鏂版濂宠澶嶅彜绾姘涘洿鎰熶竴瀛楄偐鐭T鎭よ～UWG440060',
views: 1200,
visitors: 246,
cartCount: 74,
@@ -141,7 +141,7 @@ const rankingList = ref([
{
id: 116,
image: 'https://img2.baidu.com/it/u=3775079632,546700868&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
name: '爱奇艺智能 奇遇LT01 投影仪 家用卧室超高清手机便携投影机 (4K超清 支持侧投 手机同屏 华为一碰即投)',
name: '鐖卞鑹烘櫤鑳?濂囬亣LT01 鎶曞奖浠?瀹剁敤鍗у瓒呴珮娓呮墜鏈轰究鎼烘姇褰辨満 (4K瓒呮竻 鏀寔渚ф姇 鎵嬫満鍚屽睆 鍗庝负涓€纰板嵆鎶?',
views: 959,
visitors: 376,
cartCount: 1,
@@ -154,7 +154,7 @@ const rankingList = ref([
{
id: 48,
image: 'https://img0.baidu.com/it/u=1762118431,3101886131&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
name: '阿迪达斯官网 adidas BBALL CAP COT 男女训练运动帽子FQ5270 传奇墨水蓝/传奇墨水蓝/白 XL',
name: '闃胯开杈炬柉瀹樼綉 adidas BBALL CAP COT 鐢峰コ璁粌杩愬姩甯藉瓙FQ5270 浼犲澧ㄦ按钃?浼犲澧ㄦ按钃?鐧?XL',
views: 758,
visitors: 207,
cartCount: 63,
@@ -167,7 +167,7 @@ const rankingList = ref([
{
id: 108,
image: 'https://img2.baidu.com/it/u=3033501986,2204481084&fm=253&fmt=auto&app=138&f=JPEG?w=569&h=500',
name: 'FOMIX 蛋壳椅 进口头层牛皮橙色单人沙发椅Egg chair设计师师单椅单沙头层牛皮/单椅',
name: 'FOMIX 铔嬪３妞?杩涘彛澶村眰鐗涚毊姗欒壊鍗曚汉娌欏彂妞匛gg chair璁捐甯堝笀鍗曟鍗曟矙澶村眰鐗涚毊/鍗曟',
views: 730,
visitors: 216,
cartCount: 26999,
@@ -251,14 +251,14 @@ function initChart() {
yAxis: [
{
type: 'value',
name: '金额',
name: '閲戦',
nameTextStyle: { color: '#8c8c8c', padding: [0, 30, 0, 0] },
splitLine: { lineStyle: { type: 'dashed', color: '#f0f0f0' } },
axisLabel: { color: '#8c8c8c' }
},
{
type: 'value',
name: '数量',
name: '鏁伴噺',
nameTextStyle: { color: '#8c8c8c', padding: [0, 0, 0, 30] },
splitLine: { show: false },
axisLabel: { color: '#8c8c8c' }
@@ -266,7 +266,7 @@ function initChart() {
],
series: [
{
name: '商品浏览量',
name: '鍟嗗搧娴忚閲?,
type: 'line',
yAxisIndex: 1,
smooth: true,
@@ -276,7 +276,7 @@ function initChart() {
data: [90, 110, 115, 100, 95, 80, 60, 40, 70, 85, 75, 65, 70, 80, 100, 120, 110, 90, 60, 95, 115, 110, 85, 50, 45, 55, 75]
},
{
name: '商品访客量',
name: '鍟嗗搧璁垮閲?,
type: 'line',
yAxisIndex: 1,
smooth: true,
@@ -286,14 +286,14 @@ function initChart() {
data: [15, 12, 10, 8, 11, 14, 13, 8, 9, 11, 10, 15, 12, 11, 9, 12, 14, 15, 11, 10, 13, 15, 11, 8, 12, 10, 14]
},
{
name: '支付金额',
name: '鏀粯閲戦',
type: 'bar',
barWidth: '25%',
itemStyle: { color: '#1890ff' },
data: [10, 5, 8, 0, 145, 15, 5, 0, 0, 0, 0, 5, 30, 0, 15, 20, 100, 20, 25, 5, 1, 3, 70, 5, 10, 5, 15, 10]
},
{
name: '退款金额',
name: '閫€娆鹃噾棰?,
type: 'bar',
barWidth: '25%',
itemStyle: { color: '#52c41a' },
@@ -315,9 +315,9 @@ function initChart() {
<style scoped lang="scss">
.product-statistic-page {
padding: 16px;
background-color: #f0f2f5;
min-height: 100vh;
/* padding removed */
}
.page-header-row {
@@ -367,7 +367,7 @@ function initChart() {
.btn-query { background: #1890ff; color: #fff; font-size: 14px; height: 32px; padding: 0 15px; border-radius: 4px; border: none; }
.btn-export { background: #1890ff; color: #fff; font-size: 14px; height: 32px; padding: 0 15px; border-radius: 4px; border: none; }
/* stat-grid 已废弃，由全局 kpi-grid 接管 */
/* stat-grid 宸插簾寮冿紝鐢卞叏灞€ kpi-grid 鎺ョ */
.stat-card {
background: #fff;
border-radius: 8px;
@@ -458,7 +458,7 @@ function initChart() {
}
.main-chart { width: 100%; height: 100%; }
/* 商品排行 */
/* 鍟嗗搧鎺掕 */
.ranking-card {
background: #fff;
border-radius: 8px;
@@ -538,7 +538,7 @@ function initChart() {
justify-content: center;
}
/* 列宽度配置 */
/* 鍒楀搴﹂厤缃?*/
.col-id { width: 60px; }
.col-img { width: 100px; }
.col-name { flex: 1; text-align: left; justify-content: flex-start; }
@@ -559,3 +559,4 @@ function initChart() {
}
</style>