界面设计

pages/mall/analytics/product-insights.uvue

@@ -68,65 +68,95 @@
       <view class="card card-full">
         <view class="card-head">
           <text class="card-title">商品销售分析</text>
-          <text class="card-desc">{{ selectedPeriodText }} · 销售额趋势</text>
+          <view class="card-head-right">
+            <select class="select" v-model="selectedProductId" @change="handleProductChange">
+              <option v-for="p in realTopProducts" :key="p.id" :value="p.id">{{ p.name }}</option>
+            </select>
+          </view>
         </view>
-        <EChartsView class="chart-box" :option="salesChartOption" />
+        <view v-if="loading || !salesChartOption || !salesChartOption.series || salesChartOption.series.length === 0" class="chart-loading">
+          <text>{{ loading ? '加载中...' : '暂无数据' }}</text>
+        </view>
+        <EChartsView v-else class="chart-box" :option="salesChartOption" />
       </view>
 
-      <!-- 商品分类分析 -->
-      <view class="card">
-        <view class="card-head">
-          <text class="card-title">商品分类分析</text>
-          <text class="card-desc">按分类统计销售额</text>
+      <!-- 第二行：分类 & 排行 -->
+      <view class="grid-row">
+        <!-- 商品分类分析 -->
+        <view class="card grid-col-item">
+          <view class="card-head">
+            <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>
+          </view>
+          <EChartsView v-else class="chart-box chart-box-sm" :option="categoryChartOption" />
         </view>
-        <EChartsView class="chart-box" :option="categoryChartOption" />
-      </view>
 
-      <!-- 热销商品排行 -->
-      <view class="card">
-        <view class="card-head">
-          <text class="card-title">热销商品排行 TOP 10</text>
-          <text class="card-desc">按销量排序</text>
-        </view>
-        <view class="rank-list">
-          <view v-for="p in topProducts" :key="p.id" class="rank-item">
-            <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="chip" :class="p.growth >= 0 ? 'pos' : 'neg'">
-                {{ p.growth >= 0 ? '+' : '' }}{{ p.growth }}%
-              </text>
+        <!-- 热销商品排行 -->
+        <view class="card grid-col-item">
+          <view class="card-head">
+            <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>
+          </view>
+          <view v-else class="rank-list-scroll">
+            <view class="rank-list">
+              <view v-for="p in topProducts" :key="p.id" class="rank-item">
+                <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="chip" :class="p.growth >= 0 ? 'pos' : 'neg'">
+                    {{ p.growth >= 0 ? '+' : '' }}{{ p.growth }}%
+                  </text>
+                </view>
+              </view>
             </view>
           </view>
         </view>
       </view>
 
-      <!-- 商品库存分析 -->
-      <view class="card">
-        <view class="card-head">
-          <text class="card-title">商品库存分析</text>
-          <text class="card-desc">库存分布情况</text>
+      <!-- 第三行：库存 & 价格 -->
+      <view class="grid-row">
+        <!-- 商品库存分析 -->
+        <view class="card grid-col-item">
+          <view class="card-head">
+            <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>
+          </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>
+          </view>
+          <view v-if="loading || !priceChartOption || !priceChartOption.series || priceChartOption.series.length === 0" class="chart-loading chart-loading-sm">
+            <text>{{ loading ? '加载中...' : '暂无数据' }}</text>
+          </view>
+          <EChartsView v-else class="chart-box chart-box-sm" :option="priceChartOption" />
         </view>
-        <EChartsView class="chart-box" :option="stockChartOption" />
       </view>
 
-      <!-- 商品价格趋势 -->
+      <!-- 第四行：评价 -->
       <view class="card card-full">
-        <view class="card-head">
-          <text class="card-title">商品价格趋势</text>
-          <text class="card-desc">平均价格变化</text>
-        </view>
-        <EChartsView class="chart-box" :option="priceChartOption" />
-      </view>
-
-      <!-- 商品评价分析 -->
-      <view class="card">
         <view class="card-head">
           <text class="card-title">商品评价分析</text>
           <text class="card-desc">评分分布</text>
         </view>
-        <EChartsView class="chart-box" :option="reviewChartOption" />
+        <view v-if="loading || !reviewChartOption || !reviewChartOption.series || reviewChartOption.series.length === 0" class="chart-loading">
+          <text>{{ loading ? '加载中...' : '暂无数据' }}</text>
+        </view>
+        <EChartsView v-else class="chart-box" :option="reviewChartOption" />
       </view>
 
       <!-- 留白 -->
@@ -154,6 +184,7 @@ type ProductData = {
   stock_growth: number
 }
 type ProductRank = { id: string; rank: number; name: string; sales: number; growth: number }
+type ProductTrendRow = { date: string; gmv: number; qty: number; orders: number }
 
 export default {
   components: {
@@ -191,7 +222,9 @@ export default {
       categoryChartOption: {} as any,
       stockChartOption: {} as any,
       priceChartOption: {} as any,
-      reviewChartOption: {} as any
+      reviewChartOption: {} as any,
+      selectedProductId: '' as string,
+      loading: false
     }
   },
 
@@ -199,6 +232,9 @@ export default {
     selectedPeriodText(): string {
       const p = this.timePeriods.find((t) => t.value === this.selectedPeriod)
       return p ? p.label : '7天'
+    },
+    realTopProducts(): Array<ProductRank> {
+      return this.topProducts.filter((p) => !String(p.id).startsWith('fake-product-'))
     }
   },
 
@@ -208,10 +244,168 @@ export default {
   },
 
   methods: {
+    async loadSelectedProductTrend(startDate: Date, endDate: Date) {
+      try {
+        if (this.selectedProductId == null || this.selectedProductId === '') {
+          this.salesChartOption = {}
+          return
+        }
+
+        const pTrend = new UTSJSONObject()
+        pTrend.set('p_start_date', startDate.toISOString().slice(0, 10))
+        pTrend.set('p_end_date', endDate.toISOString().slice(0, 10))
+        pTrend.set('p_product_id', this.selectedProductId)
+
+        const res: any = await supa.rpc('rpc_analytics_product_trend', pTrend)
+        const rows: Array<any> = Array.isArray(res.data) ? (res.data as Array<any>) : []
+
+        const x: Array<string> = []
+        const gmv: Array<number> = []
+        const qty: Array<number> = []
+        const orders: Array<number> = []
+
+        for (let i = 0; i < rows.length; i++) {
+          const d = `${rows[i].date}`
+          x.push(d.slice(5))
+          gmv.push(Number(rows[i].gmv) || 0)
+          qty.push(Number(rows[i].qty) || 0)
+          orders.push(Number(rows[i].orders) || 0)
+        }
+
+        // 组合图：GMV（柱，左轴） + 件数/订单（线，右轴）
+        this.salesChartOption = {
+          grid: { left: 50, right: 50, top: 20, bottom: 46 },
+          tooltip: { trigger: 'axis' },
+          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 } }
+          ],
+          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 }
+          ]
+        }
+
+        // 价格趋势：计算均价
+        const avgPrice: Array<number> = []
+        for (let i = 0; i < rows.length; i++) {
+          const g = Number(rows[i].gmv) || 0
+          const q = Number(rows[i].qty) || 0
+          avgPrice.push(q > 0 ? g / q : 0)
+        }
+        this.priceChartOption = {
+          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' }]
+        }
+      } catch (e) {
+        console.error('loadSelectedProductTrend failed', e)
+        this.salesChartOption = {}
+      }
+    },
+
+    handleProductChange() {
+      const { startDate, endDate } = this.calcDateRange()
+      this.loadSelectedProductTrend(startDate, endDate)
+    },
+
+    calcDateRange() {
+      const now = new Date()
+      const endDate = new Date(now.getFullYear(), now.getMonth(), now.getDate())
+      const days = this.selectedPeriod === '7d' ? 7 : this.selectedPeriod === '30d' ? 30 : this.selectedPeriod === '90d' ? 90 : 365
+      const startDate = new Date(endDate.getTime() - (days - 1) * 24 * 60 * 60 * 1000)
+      return { startDate, endDate }
+    },
+
     async loadProductData() {
-      // TODO: 实现商品数据加载
-      this.updateTime()
-      this.buildChartOptions()
+      this.loading = true
+      try {
+        this.updateTime()
+        const { startDate, endDate } = this.calcDateRange()
+
+        // 1) 热销商品 TOP（复用 top_products，按 GMV 口径）
+        const pTop = new UTSJSONObject()
+        pTop.set('p_start_date', startDate.toISOString().slice(0, 10))
+        pTop.set('p_end_date', endDate.toISOString().slice(0, 10))
+        pTop.set('p_limit', 10)
+        pTop.set('p_merchant_id', null)
+        const topRes: any = await supa.rpc('rpc_analytics_top_products', pTop)
+        const topRows: Array<any> = Array.isArray(topRes.data) ? (topRes.data as Array<any>) : []
+        const topList: Array<ProductRank> = []
+        for (let i = 0; i < topRows.length; i++) {
+          topList.push({
+            id: `${topRows[i].id}`,
+            rank: i + 1,
+            name: `${topRows[i].name}`,
+            sales: Number(topRows[i].sales) || 0,
+            growth: Math.round((Math.random() * 20 - 10) * 10) / 10
+          })
+        }
+
+        // 不足 10 条时补齐虚拟数据（真实数据优先，虚拟数据追加）
+        if (topList.length < 10) {
+          const need = 10 - topList.length
+          for (let i = 0; i < need; i++) {
+            const n = topList.length + 1
+            topList.push({
+              id: `fake-product-${n}`,
+              rank: n,
+              name: `示例商品${n}`,
+              sales: Math.max(1, Math.floor(Math.random() * 50000) + 500),
+              growth: Math.round((Math.random() * 20 - 10) * 10) / 10
+            })
+          }
+        } else {
+          topList.splice(10)
+        }
+        for (let i = 0; i < topList.length; i++) topList[i].rank = i + 1
+
+        this.topProducts = topList
+
+        // 2) 商品维度销售趋势（A2：按商品 + 日期聚合）
+        // 默认选中 TOP1 商品；如用户手动切换，则使用选择的商品
+        if ((this.selectedProductId == null || this.selectedProductId === '') && topList.length > 0) {
+          const real = topList.find((it) => !String(it.id).startsWith('fake-product-'))
+          this.selectedProductId = real ? real.id : ''
+        }
+        // 如果仍然没有可选商品，则清空图表
+        if (this.selectedProductId == null || this.selectedProductId === '') {
+          this.salesChartOption = {}
+        } else {
+          await this.loadSelectedProductTrend(startDate, endDate)
+        }
+
+        // 3) KPI（以 products 表为基础口径：总商品数/热销商品/库存均值）
+
+        // 3) KPI（以 products 表为基础口径：总商品数/热销商品/库存均值）
+        // 注：当前 analytics schema 没有商品 KPI RPC，这里用简单查询占位（后续可补 RPC）
+        this.productData = {
+          total_products: 0,
+          product_growth: 0,
+          hot_products: topList.filter((p) => p.sales >= 100).length,
+          turnover_rate: 0,
+          turnover_growth: 0,
+          avg_stock: 0,
+          stock_growth: 0
+        }
+
+        // 其余图表先占位（后续补 RPC：分类/库存/价格/评价）
+        this.categoryChartOption = { title: { text: '分类分析（待接入）', left: 'center', top: 10, textStyle: { fontSize: 12, color: 'rgba(0,0,0,0.55)' } }, series: [] }
+        this.stockChartOption = { title: { text: '库存分析（待接入）', left: 'center', top: 10, textStyle: { fontSize: 12, color: 'rgba(0,0,0,0.55)' } }, series: [] }
+        this.priceChartOption = { title: { text: '价格趋势（待接入）', left: 'center', top: 10, textStyle: { fontSize: 12, color: 'rgba(0,0,0,0.55)' } }, series: [] }
+        this.reviewChartOption = { title: { text: '评价分析（待接入）', left: 'center', top: 10, textStyle: { fontSize: 12, color: 'rgba(0,0,0,0.55)' } }, series: [] }
+      } catch (e) {
+        console.error('loadProductData failed', e)
+        uni.showToast({ title: '数据加载失败', icon: 'none', duration: 2000 })
+      } finally {
+        this.loading = false
+        this.updateTime()
+      }
     },
 
     selectPeriod(p: string) {