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

152
pages/mall/analytics/product-insights.uvue
View File

@@ -1,8 +1,8 @@
<template>
<template>
<view class="page" @click.self="closeMoreMenu">
<!-- 固定顶部导航栏 -->
<!-- 鍥哄畾椤堕儴瀵艰埅鏍?-->
<AnalyticsTopBar
:title="'商品洞察'"
:title="'鍟嗗搧娲炲療'"
:lastUpdateTime="lastUpdateTime"
:sidebarVisible="showSidebarMenu"
@menu-click="handleMenu"
@@ -16,18 +16,18 @@
/>
<view class="page-layout">
<!-- 侧边栏菜单组件 -->
<!-- 渚ц竟鏍忚彍鍗曠粍浠?-->
<AnalyticsSidebarMenu
:visible="showSidebarMenu"
:currentPath="currentPath"
@visible-change="handleSidebarUpdate"
/>
<!-- 主内容区域 -->
<!-- 涓诲唴瀹瑰尯鍩?-->
<view class="main-content">
<view class="container">
<!-- 时间维度筛选（快捷 + 自定义） -->
<!-- 鏃堕棿缁村害绛涢€夛紙蹇嵎 + 鑷畾涔夛級 -->
<view class="tabs">
<view
v-for="p in timePeriods"
@@ -43,8 +43,7 @@
:class="{ active: customRangeEnabled }"
@click="toggleCustomRange"
>
自定义
</view>
鑷畾涔? </view>
</view>
<AnalyticsDateRangePicker
@@ -55,34 +54,34 @@
@clear="onDateRangeClear"
/>
<!-- KPI 指标卡片 -->
<!-- KPI 鎸囨爣鍗＄墖 -->
<view class="kpi-grid">
<view class="kpi-card">
<text class="kpi-label">商品总数</text>
<text class="kpi-label">鍟嗗搧鎬绘暟</text>
<text class="kpi-value">{{ formatInt(productData.total_products) }}</text>
<text class="kpi-meta">较上期：{{ formatPct(productData.product_growth) }}</text>
<text class="kpi-meta">杈冧笂鏈燂細{{ formatPct(productData.product_growth) }}</text>
</view>
<view class="kpi-card">
<text class="kpi-label">热销商品</text>
<text class="kpi-label">鐑攢鍟嗗搧</text>
<text class="kpi-value">{{ formatInt(productData.hot_products) }}</text>
<text class="kpi-meta">销量 &gt; 100</text>
<text class="kpi-meta">閿€閲?&gt; 100</text>
</view>
<view class="kpi-card">
<text class="kpi-label">库存周转率</text>
<text class="kpi-label">搴撳瓨鍛ㄨ浆鐜?/text>
<text class="kpi-value">{{ formatPct(productData.turnover_rate) }}</text>
<text class="kpi-meta">较上期：{{ formatPct(productData.turnover_growth) }}</text>
<text class="kpi-meta">杈冧笂鏈燂細{{ formatPct(productData.turnover_growth) }}</text>
</view>
<view class="kpi-card">
<text class="kpi-label">平均库存</text>
<text class="kpi-label">骞冲潎搴撳瓨</text>
<text class="kpi-value">{{ formatInt(productData.avg_stock) }}</text>
<text class="kpi-meta">较上期：{{ formatPct(productData.stock_growth) }}</text>
<text class="kpi-meta">杈冧笂鏈燂細{{ formatPct(productData.stock_growth) }}</text>
</view>
</view>
<!-- 商品销售分析 -->
<!-- 鍟嗗搧閿€鍞垎鏋?-->
<view class="card card-full">
<view class="card-head">
<text class="card-title">商品销售分析</text>
<text class="card-title">鍟嗗搧閿€鍞垎鏋?/text>
<view class="card-head-right">
<select class="select" v-model="selectedProductId" @change="handleProductChange">
<option v-for="p in topProducts" :key="p.id" :value="p.id">{{ p.name }}</option>
@@ -90,33 +89,33 @@
</view>
</view>
<view v-if="loading || !salesChartOption || !salesChartOption.series || salesChartOption.series.length === 0" class="chart-loading">
<text>{{ loading ? '加载中...' : '暂无数据' }}</text>
<text>{{ loading ? '鍔犺浇涓?..' : '鏆傛棤鏁版嵁' }}</text>
</view>
<EChartsView v-else class="chart-box" :option="salesChartOption" />
</view>
<!-- 第二行：分类 & 排行 -->
<!-- 绗簩琛岋細鍒嗙被 & 鎺掕 -->
<view class="grid-row">
<!-- 商品分类分析 -->
<!-- 鍟嗗搧鍒嗙被鍒嗘瀽 -->
<view class="card grid-col-item">
<view class="card-head">
<text class="card-title">商品分类分析</text>
<text class="card-desc">按分类统计销售额</text>
<text class="card-title">鍟嗗搧鍒嗙被鍒嗘瀽</text>
<text class="card-desc">鎸夊垎绫荤粺璁￠攢鍞</text>
</view>
<view v-if="loading || !categoryChartOption || !categoryChartOption.series || categoryChartOption.series.length === 0" class="chart-loading chart-loading-sm">
<text>{{ loading ? '加载中...' : '暂无数据' }}</text>
<text>{{ loading ? '鍔犺浇涓?..' : '鏆傛棤鏁版嵁' }}</text>
</view>
<EChartsView v-else class="chart-box chart-box-sm" :option="categoryChartOption" />
</view>
<!-- 热销商品排行 -->
<!-- 鐑攢鍟嗗搧鎺掕 -->
<view class="card grid-col-item">
<view class="card-head">
<text class="card-title">热销商品排行 TOP 10</text>
<text class="card-desc">按销量排序</text>
<text class="card-title">鐑攢鍟嗗搧鎺掕 TOP 10</text>
<text class="card-desc">鎸夐攢閲忔帓搴?/text>
</view>
<view v-if="loading || topProducts.length === 0" class="chart-loading chart-loading-sm">
<text>{{ loading ? '加载中...' : '暂无数据' }}</text>
<text>{{ loading ? '鍔犺浇涓?..' : '鏆傛棤鏁版嵁' }}</text>
</view>
<view v-else class="rank-list-scroll">
<view class="rank-list">
@@ -124,7 +123,7 @@
<text class="rank-no">{{ p.rank }}</text>
<text class="rank-name">{{ p.name }}</text>
<view class="rank-right">
<text class="rank-val">{{ p.sales }} 件</text>
<text class="rank-val">{{ p.sales }} 浠?/text>
<text class="chip" :class="p.growth >= 0 ? 'pos' : 'neg'">
{{ p.growth >= 0 ? '+' : '' }}{{ p.growth }}%
</text>
@@ -135,46 +134,46 @@
</view>
</view>
<!-- 第三行：库存 & 价格 -->
<!-- 绗笁琛岋細搴撳瓨 & 浠锋牸 -->
<view class="grid-row">
<!-- 商品库存分析 -->
<!-- 鍟嗗搧搴撳瓨鍒嗘瀽 -->
<view class="card grid-col-item">
<view class="card-head">
<text class="card-title">商品库存分析</text>
<text class="card-desc">库存分布情况</text>
<text class="card-title">鍟嗗搧搴撳瓨鍒嗘瀽</text>
<text class="card-desc">搴撳瓨鍒嗗竷鎯呭喌</text>
</view>
<view v-if="loading || !stockChartOption || !stockChartOption.series || stockChartOption.series.length === 0" class="chart-loading chart-loading-sm">
<text>{{ loading ? '加载中...' : '暂无数据' }}</text>
<text>{{ loading ? '鍔犺浇涓?..' : '鏆傛棤鏁版嵁' }}</text>
</view>
<EChartsView v-else class="chart-box chart-box-sm" :option="stockChartOption" />
</view>
<!-- 商品价格趋势 -->
<!-- 鍟嗗搧浠锋牸瓒嬪娍 -->
<view class="card grid-col-item">
<view class="card-head">
<text class="card-title">商品价格趋势</text>
<text class="card-desc">平均价格变化</text>
<text class="card-title">鍟嗗搧浠锋牸瓒嬪娍</text>
<text class="card-desc">骞冲潎浠锋牸鍙樺寲</text>
</view>
<view v-if="loading || !priceChartOption || !priceChartOption.series || priceChartOption.series.length === 0" class="chart-loading chart-loading-sm">
<text>{{ loading ? '加载中...' : '暂无数据' }}</text>
<text>{{ loading ? '鍔犺浇涓?..' : '鏆傛棤鏁版嵁' }}</text>
</view>
<EChartsView v-else class="chart-box chart-box-sm" :option="priceChartOption" />
</view>
</view>
<!-- 第四行：评价 -->
<!-- 绗洓琛岋細璇勪环 -->
<view class="card card-full">
<view class="card-head">
<text class="card-title">商品评价分析</text>
<text class="card-desc">评分分布</text>
<text class="card-title">鍟嗗搧璇勪环鍒嗘瀽</text>
<text class="card-desc">璇勫垎鍒嗗竷</text>
</view>
<view v-if="loading || !reviewChartOption || !reviewChartOption.series || reviewChartOption.series.length === 0" class="chart-loading">
<text>{{ loading ? '加载中...' : '暂无数据' }}</text>
<text>{{ loading ? '鍔犺浇涓?..' : '鏆傛棤鏁版嵁' }}</text>
</view>
<EChartsView v-else class="chart-box" :option="reviewChartOption" />
</view>
<!-- 留白 -->
<!-- 鐣欑櫧 -->
<view style="height: 24px;"></view>
</view>
</view>
@@ -208,10 +207,10 @@ const showSidebarMenu = ref(false)
const currentPath = ref('/pages/mall/analytics/product-insights')
const timePeriods = ref<Array<TimePeriod>>([
{ value: '7d', label: '7天' },
{ value: '30d', label: '30天' },
{ value: '90d', label: '90天' },
{ value: '1y', label: '1年' }
{ value: '7d', label: '7澶? },
{ value: '30d', label: '30澶? },
{ value: '90d', label: '90澶? },
{ value: '1y', label: '1骞? }
])
const productData = reactive<ProductData>({
@@ -237,7 +236,7 @@ const loading = ref(false)
const selectedPeriodText = computed((): string => {
const p = timePeriods.value.find((t) => t.value === selectedPeriod.value)
return p ? p.label : '7天'
return p ? p.label : '7澶?
})
onLoad(() => {
@@ -254,7 +253,7 @@ function updateTime() {
function formatInt(n: number): string {
const v = isFinite(n) ? Math.round(n) : 0
if (v >= 10000) return (v / 10000).toFixed(1) + '万'
if (v >= 10000) return (v / 10000).toFixed(1) + '涓?
return v.toString()
}
@@ -295,16 +294,16 @@ async function loadSelectedProductTrend() {
salesChartOption.value = {
grid: { left: 50, right: 50, top: 20, bottom: 46 },
tooltip: { trigger: 'axis' },
legend: { data: ['GMV', '件数', '订单数'], bottom: 0 },
legend: { data: ['GMV', '浠舵暟', '璁㈠崟鏁?], bottom: 0 },
xAxis: { type: 'category', data: x, axisLabel: { color: 'rgba(0,0,0,0.55)' } },
yAxis: [
{ type: 'value', name: 'GMV', axisLabel: { color: 'rgba(0,0,0,0.55)' }, splitLine: { lineStyle: { color: 'rgba(0,0,0,0.06)' } } },
{ type: 'value', name: '件/单', axisLabel: { color: 'rgba(0,0,0,0.55)' }, splitLine: { show: false } }
{ type: 'value', name: '浠?鍗?, axisLabel: { color: 'rgba(0,0,0,0.55)' }, splitLine: { show: false } }
],
series: [
{ name: 'GMV', type: 'bar', data: gmv, barWidth: 14, itemStyle: { borderRadius: 6 } },
{ name: '件数', type: 'line', yAxisIndex: 1, data: qty, smooth: true, symbolSize: 6 },
{ name: '订单数', type: 'line', yAxisIndex: 1, data: orders, smooth: true, symbolSize: 6 }
{ name: '浠舵暟', type: 'line', yAxisIndex: 1, data: qty, smooth: true, symbolSize: 6 },
{ name: '璁㈠崟鏁?, type: 'line', yAxisIndex: 1, data: orders, smooth: true, symbolSize: 6 }
]
}
@@ -319,13 +318,13 @@ async function loadSelectedProductTrend() {
grid: { left: 40, right: 18, top: 20, bottom: 40 },
tooltip: { trigger: 'axis' },
xAxis: { type: 'category', data: x, axisLabel: { color: 'rgba(0,0,0,0.55)' } },
yAxis: { type: 'value', name: '均价', axisLabel: { color: 'rgba(0,0,0,0.55)' }, splitLine: { lineStyle: { color: 'rgba(0,0,0,0.06)' } } },
series: [{ name: '均价', type: 'line', data: avgPrice, smooth: true, symbolSize: 6, color: '#f97316' }]
yAxis: { type: 'value', name: '鍧囦环', axisLabel: { color: 'rgba(0,0,0,0.55)' }, splitLine: { lineStyle: { color: 'rgba(0,0,0,0.06)' } } },
series: [{ name: '鍧囦环', type: 'line', data: avgPrice, smooth: true, symbolSize: 6, color: '#f97316' }]
}
} catch (e) {
console.error('loadSelectedProductTrend failed', e)
salesChartOption.value = {}
uni.showToast({ title: mapAnalyticsError(e, { fallbackMessage: '加载商品趋势失败' }), icon: 'none' })
uni.showToast({ title: mapAnalyticsError(e, { fallbackMessage: '鍔犺浇鍟嗗搧瓒嬪娍澶辫触' }), icon: 'none' })
}
}
@@ -338,7 +337,7 @@ function buildCategoryChart(catRows: any) {
const names: Array<string> = []
const values: Array<number> = []
for (let i = 0; i < rows.length; i++) {
names.push(`${rows[i].category_name ?? '未分类'}`)
names.push(`${rows[i].category_name ?? '鏈垎绫?}`)
values.push(Number(rows[i].total_sales) || 0)
}
@@ -435,7 +434,7 @@ async function loadProductData() {
updateTime()
} catch (e) {
console.error('loadProductData failed', e)
uni.showToast({ title: mapAnalyticsError(e, { fallbackMessage: '商品洞察数据加载失败' }), icon: 'none', duration: 2000 })
uni.showToast({ title: mapAnalyticsError(e, { fallbackMessage: '鍟嗗搧娲炲療鏁版嵁鍔犺浇澶辫触' }), icon: 'none', duration: 2000 })
} finally {
loading.value = false
updateTime()
@@ -470,13 +469,13 @@ function onDateRangeClear() {
function refreshData() {
loadProductData()
uni.showToast({ title: '已刷新', icon: 'success' })
uni.showToast({ title: '宸插埛鏂?, icon: 'success' })
}
function exportReport() {
uni.showActionSheet({
itemList: ['导出Excel', '导出PDF', '导出图片'],
success: () => uni.showToast({ title: '导出成功', icon: 'success' })
itemList: ['瀵煎嚭Excel', '瀵煎嚭PDF', '瀵煎嚭鍥剧墖'],
success: () => uni.showToast({ title: '瀵煎嚭鎴愬姛', icon: 'success' })
})
}
@@ -497,27 +496,27 @@ function closeMoreMenu() {
}
function handleSearch() {
uni.showToast({ title: '搜索', icon: 'none' })
uni.showToast({ title: '鎼滅储', icon: 'none' })
}
function handleNotification() {
uni.showToast({ title: '通知', icon: 'none' })
uni.showToast({ title: '閫氱煡', icon: 'none' })
}
function handleFullscreen() {
uni.showToast({ title: '全屏', icon: 'none' })
uni.showToast({ title: '鍏ㄥ睆', icon: 'none' })
}
function handleMobile() {
uni.showToast({ title: '移动端', icon: 'none' })
uni.showToast({ title: '绉诲姩绔?, icon: 'none' })
}
function handleDropdown() {
uni.showToast({ title: '下拉菜单', icon: 'none' })
uni.showToast({ title: '涓嬫媺鑿滃崟', icon: 'none' })
}
function handleSettings() {
uni.showToast({ title: '设置', icon: 'none' })
uni.showToast({ title: '璁剧疆', icon: 'none' })
}
</script>
@@ -527,7 +526,7 @@ function handleSettings() {
background: #f6f7fb;
}
/* 页面布局：宽屏时侧边栏+内容，窄屏时全屏内容 */
/* 椤甸潰甯冨眬锛氬灞忔椂渚ц竟鏍?鍐呭锛岀獎灞忔椂鍏ㄥ睆鍐呭 */
.page-layout {
display: flex;
flex-direction: row !important;
@@ -539,18 +538,18 @@ function handleSettings() {
min-width: 0;
display: flex;
flex-direction: column;
padding-top: 64px; /* 为固定顶部导航栏留出空间 */
padding-top: 64px; /* 涓哄浐瀹氶《閮ㄥ鑸爮鐣欏嚭绌洪棿 */
}
.container {
width: 100%;
max-width: 1280px;
margin: 0 auto;
padding: 16px 16px 28px;
/* padding removed */ 16px 28px;
box-sizing: border-box;
}
/* 顶部栏 */
/* 椤堕儴鏍?*/
.topbar {
display: flex;
flex-direction: row !important;
@@ -684,7 +683,7 @@ function handleSettings() {
color: #111;
}
/* 时间维度 tabs */
/* 鏃堕棿缁村害 tabs */
.tabs {
margin-top: 12px;
display: flex;
@@ -714,7 +713,7 @@ function handleSettings() {
color: #fff;
}
/* KPI 网格 */
/* KPI 缃戞牸 */
.kpi-grid {
margin-top: 12px;
display: flex;
@@ -751,7 +750,7 @@ function handleSettings() {
color: rgba(0,0,0,0.55);
}
/* 卡片 */
/* 鍗＄墖 */
.card {
margin-top: 12px;
background: #fff;
@@ -929,7 +928,7 @@ function handleSettings() {
}
}
/* 响应式：窄屏时全屏显示 */
/* 鍝嶅簲寮忥細绐勫睆鏃跺叏灞忔樉绀?*/
@media screen and (max-width: 959px) {
.page-layout {
flex-direction: column !important;
@@ -940,3 +939,4 @@ function handleSettings() {
}
}
</style>