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 16:18:04 +08:00
parent d00f0b7412
commit 57846534bc
86 changed files with 2751 additions and 3074 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,7 +43,8 @@
:class="{ active: customRangeEnabled }"
@click="toggleCustomRange"
>
鑷畾涔? </view>
自定义
</view>
</view>
<AnalyticsDateRangePicker
@@ -54,52 +55,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>
@@ -134,10 +135,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>({})
@@ -154,7 +155,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(() => {
@@ -187,7 +188,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' })
}
}
@@ -201,7 +202,7 @@ function selectPeriod(p: string) {
function refreshData() {
loadMarketData()
uni.showToast({ title: '宸插埛鏂?, icon: 'success' })
uni.showToast({ title: '已刷新', icon: 'success' })
}
function toggleCustomRange() {
@@ -224,8 +225,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' })
})
}
@@ -249,7 +250,8 @@ function buildChartOptions() {
const priceRows = Array.isArray(priceAny) ? (priceAny as Array<UTSJSONObject>) : []
const compRows = Array.isArray(compAny) ? (compAny as Array<UTSJSONObject>) : []
// 1) 甯傚満鏁翠綋瓒嬪娍锛欸MV / 璁㈠崟鏁?/ 鐢ㄦ埛鏁? const mtDays: string[] = []
// 1) 市场整体趋势：GMV / 订单数 / 用户数
const mtDays: string[] = []
const mtGmv: number[] = []
const mtOrders: number[] = []
const mtUsers: number[] = []
@@ -266,14 +268,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: [
{
@@ -284,14 +286,14 @@ function buildChartOptions() {
itemStyle: { color: '#3b82f6' }
},
{
name: '璁㈠崟鏁?,
name: '订单数',
type: 'line',
yAxisIndex: 1,
smooth: true,
data: mtOrders
},
{
name: '鐢ㄦ埛鏁?,
name: '用户数',
type: 'line',
yAxisIndex: 1,
smooth: true,
@@ -300,12 +302,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)
}
@@ -323,7 +325,7 @@ function buildChartOptions() {
]
}
// 3) 瀛ｈ妭鎬ц秼鍔匡細鎸夋湀 GMV
// 3) 季节性趋势：按月 GMV
const seaMonths: string[] = []
const seaGmv: number[] = []
for (let i = 0; i < seasonalRows.length; i++) {
@@ -347,7 +349,8 @@ 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]
@@ -360,10 +363,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
@@ -371,12 +374,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)
}
@@ -385,7 +388,7 @@ function buildChartOptions() {
legend: { top: 'bottom' },
series: [
{
name: '鍟嗗GMV',
name: '商家GMV',
type: 'pie',
radius: ['35%', '65%'],
center: ['50%', '50%'],
@@ -414,27 +417,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>
@@ -444,7 +447,7 @@ function handleSettings() {
background: #f6f7fb;
}
/* 椤甸潰甯冨眬锛氬灞忔椂渚ц竟鏍?鍐呭锛岀獎灞忔椂鍏ㄥ睆鍐呭 */
/* 页面布局：宽屏时侧边栏+内容，窄屏时全屏内容 */
.page-layout {
display: flex;
flex-direction: row !important;
@@ -456,18 +459,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 removed */ 16px 28px;
padding: 16px 16px 28px;
box-sizing: border-box;
}
/* 椤堕儴鏍?*/
/* 顶部栏 */
.topbar {
display: flex;
flex-direction: row !important;
@@ -600,7 +603,7 @@ function handleSettings() {
color: #111;
}
/* 鏃堕棿缁村害 tabs */
/* 时间维度 tabs */
.tabs {
margin-top: 12px;
display: flex;
@@ -630,7 +633,7 @@ function handleSettings() {
color: #fff;
}
/* 鍗＄墖 */
/* 卡片 */
.card {
margin-top: 12px;
background: #fff;
@@ -684,7 +687,7 @@ function handleSettings() {
}
}
/* 鍝嶅簲寮忥細绐勫睆鏃跺叏灞忔樉绀?*/
/* 响应式：窄屏时全屏显示 */
@media screen and (max-width: 959px) {
.page-layout {
flex-direction: column !important;
@@ -695,4 +698,3 @@ function handleSettings() {
}
}
</style>