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

122
pages/mall/analytics/market-trends.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,52 +54,52 @@
@clear="onDateRangeClear"
/>
<!-- 市场整体趋势 -->
<!-- 甯傚満鏁翠綋瓒嬪娍 -->
<view class="card card-full">
<view class="card-head">
<text class="card-title">市场整体趋势</text>
<text class="card-desc">{{ selectedPeriodText }} · GMV、订单数、用户数</text>
<text class="card-title">甯傚満鏁翠綋瓒嬪娍</text>
<text class="card-desc">{{ selectedPeriodText }} 路 GMV銆佽鍗曟暟銆佺敤鎴锋暟</text>
</view>
<EChartsView class="chart-box" :option="marketTrendOption" />
</view>
<!-- 行业对比分析 -->
<!-- 琛屼笟瀵规瘮鍒嗘瀽 -->
<view class="card">
<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>
<EChartsView class="chart-box" :option="industryCompareOption" />
</view>
<!-- 季节性趋势 -->
<!-- 瀛ｈ妭鎬ц秼鍔?-->
<view class="card">
<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>
<EChartsView class="chart-box" :option="seasonalTrendOption" />
</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>
<EChartsView class="chart-box" :option="priceTrendOption" />
</view>
<!-- 竞争分析 -->
<!-- 绔炰簤鍒嗘瀽 -->
<view class="card">
<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>
<EChartsView class="chart-box" :option="competitionOption" />
</view>
<!-- 留白 -->
<!-- 鐣欑櫧 -->
<view style="height: 24px;"></view>
</view>
</view>
@@ -135,10 +134,10 @@ const showSidebarMenu = ref(false)
const currentPath = ref('/pages/mall/analytics/market-trends')
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 marketTrendOption = ref<any>({})
@@ -155,7 +154,7 @@ const _competitionRows = ref<any>(null)
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(() => {
@@ -188,7 +187,7 @@ async function loadMarketData() {
console.error('loadMarketData failed:', e)
updateTime()
buildChartOptions()
uni.showToast({ title: mapAnalyticsError(e, { fallbackMessage: '市场趋势数据加载失败' }), icon: 'none' })
uni.showToast({ title: mapAnalyticsError(e, { fallbackMessage: '甯傚満瓒嬪娍鏁版嵁鍔犺浇澶辫触' }), icon: 'none' })
}
}
@@ -202,7 +201,7 @@ function selectPeriod(p: string) {
function refreshData() {
loadMarketData()
uni.showToast({ title: '已刷新', icon: 'success' })
uni.showToast({ title: '宸插埛鏂?, icon: 'success' })
}
function toggleCustomRange() {
@@ -225,8 +224,8 @@ function onDateRangeClear() {
function exportReport() {
uni.showActionSheet({
itemList: ['导出Excel', '导出PDF', '导出图片'],
success: () => uni.showToast({ title: '导出成功', icon: 'success' })
itemList: ['瀵煎嚭Excel', '瀵煎嚭PDF', '瀵煎嚭鍥剧墖'],
success: () => uni.showToast({ title: '瀵煎嚭鎴愬姛', icon: 'success' })
})
}
@@ -250,8 +249,7 @@ function buildChartOptions() {
const priceRows = Array.isArray(priceAny) ? (priceAny as Array<UTSJSONObject>) : []
const compRows = Array.isArray(compAny) ? (compAny as Array<UTSJSONObject>) : []
// 1) 市场整体趋势：GMV / 订单数 / 用户数
const mtDays: string[] = []
// 1) 甯傚満鏁翠綋瓒嬪娍锛欸MV / 璁㈠崟鏁?/ 鐢ㄦ埛鏁? const mtDays: string[] = []
const mtGmv: number[] = []
const mtOrders: number[] = []
const mtUsers: number[] = []
@@ -268,14 +266,14 @@ function buildChartOptions() {
marketTrendOption.value = {
tooltip: { trigger: 'axis' },
legend: {
data: ['GMV', '订单数', '用户数'],
data: ['GMV', '璁㈠崟鏁?, '鐢ㄦ埛鏁?],
top: 'bottom'
},
grid: { left: 50, right: 60, top: 40, bottom: 60 },
xAxis: { type: 'category', data: mtDays },
yAxis: [
{ type: 'value', name: 'GMV', splitLine: { lineStyle: { color: '#e5e7eb' } } },
{ type: 'value', name: '数量', position: 'right', splitLine: { show: false } }
{ type: 'value', name: '鏁伴噺', position: 'right', splitLine: { show: false } }
],
series: [
{
@@ -286,14 +284,14 @@ function buildChartOptions() {
itemStyle: { color: '#3b82f6' }
},
{
name: '订单数',
name: '璁㈠崟鏁?,
type: 'line',
yAxisIndex: 1,
smooth: true,
data: mtOrders
},
{
name: '用户数',
name: '鐢ㄦ埛鏁?,
type: 'line',
yAxisIndex: 1,
smooth: true,
@@ -302,12 +300,12 @@ function buildChartOptions() {
]
}
// 2) 行业对比：分类 GMV
// 2) 琛屼笟瀵规瘮锛氬垎绫?GMV
const catNames: string[] = []
const catSales: number[] = []
for (let i = 0; i < industryRows.length; i++) {
const r = industryRows[i]
catNames.push(r.getString('category_name') ?? '未分类')
catNames.push(r.getString('category_name') ?? '鏈垎绫?)
catSales.push(r.getNumber('total_sales') ?? 0)
}
@@ -325,7 +323,7 @@ function buildChartOptions() {
]
}
// 3) 季节性趋势：按月 GMV
// 3) 瀛ｈ妭鎬ц秼鍔匡細鎸夋湀 GMV
const seaMonths: string[] = []
const seaGmv: number[] = []
for (let i = 0; i < seasonalRows.length; i++) {
@@ -349,8 +347,7 @@ function buildChartOptions() {
]
}
// 4) 价格趋势：按天平均价格
const priceDays: string[] = []
// 4) 浠锋牸瓒嬪娍锛氭寜澶╁钩鍧囦环鏍? const priceDays: string[] = []
const avgPrices: number[] = []
for (let i = 0; i < priceRows.length; i++) {
const r = priceRows[i]
@@ -363,10 +360,10 @@ function buildChartOptions() {
tooltip: { trigger: 'axis' },
grid: { left: 50, right: 20, top: 30, bottom: 60 },
xAxis: { type: 'category', data: priceDays },
yAxis: { type: 'value', name: '平均价格' },
yAxis: { type: 'value', name: '骞冲潎浠锋牸' },
series: [
{
name: '平均价格',
name: '骞冲潎浠锋牸',
type: 'line',
smooth: true,
data: avgPrices
@@ -374,12 +371,12 @@ function buildChartOptions() {
]
}
// 5) 竞争分析：商家 GMV 对比
// 5) 绔炰簤鍒嗘瀽锛氬晢瀹?GMV 瀵规瘮
const merchantNames: string[] = []
const merchantGmv: number[] = []
for (let i = 0; i < compRows.length; i++) {
const r = compRows[i]
merchantNames.push(r.getString('merchant_name') ?? '未知商家')
merchantNames.push(r.getString('merchant_name') ?? '鏈煡鍟嗗')
merchantGmv.push(r.getNumber('gmv') ?? 0)
}
@@ -388,7 +385,7 @@ function buildChartOptions() {
legend: { top: 'bottom' },
series: [
{
name: '商家GMV',
name: '鍟嗗GMV',
type: 'pie',
radius: ['35%', '65%'],
center: ['50%', '50%'],
@@ -417,27 +414,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>
@@ -447,7 +444,7 @@ function handleSettings() {
background: #f6f7fb;
}
/* 页面布局：宽屏时侧边栏+内容，窄屏时全屏内容 */
/* 椤甸潰甯冨眬锛氬灞忔椂渚ц竟鏍?鍐呭锛岀獎灞忔椂鍏ㄥ睆鍐呭 */
.page-layout {
display: flex;
flex-direction: row !important;
@@ -459,18 +456,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;
@@ -603,7 +600,7 @@ function handleSettings() {
color: #111;
}
/* 时间维度 tabs */
/* 鏃堕棿缁村害 tabs */
.tabs {
margin-top: 12px;
display: flex;
@@ -633,7 +630,7 @@ function handleSettings() {
color: #fff;
}
/* 卡片 */
/* 鍗＄墖 */
.card {
margin-top: 12px;
background: #fff;
@@ -687,7 +684,7 @@ function handleSettings() {
}
}
/* 响应式：窄屏时全屏显示 */
/* 鍝嶅簲寮忥細绐勫睆鏃跺叏灞忔樉绀?*/
@media screen and (max-width: 959px) {
.page-layout {
flex-direction: column !important;
@@ -698,3 +695,4 @@ function handleSettings() {
}
}
</style>