modify：新增小程序

Sale/pages/trend/trend.js

@@ -0,0 +1,270 @@
+// pages/trend/trend.js
+const api = require('../../utils/request')
+const echarts = require('../../components/ec-canvas/echarts')
+
+let chart = null
+
+Page({
+  data: {
+    // 地区选项
+    regions: [
+      '全部', '昆明', '玉溪', '楚雄', '大理', '曲靖', '红河', '文山',
+      '重庆', '成都', '广州', '南宁'
+    ],
+    // 材质选项
+    materials: [
+      '全部', 'HPB300', 'HRB400', 'HRB400E', 'HRB500', 'HRB500E',
+      'HRB600', 'CRB550', 'Q235', 'Q345', 'Q355'
+    ],
+    // 时间范围选项
+    dayRanges: [
+      { label: '最近 7 天', value: 7 },
+      { label: '最近 15 天', value: 15 },
+      { label: '最近 30 天', value: 30 },
+      { label: '最近 60 天', value: 60 },
+      { label: '最近 90 天', value: 90 }
+    ],
+    // 选中的索引
+    selectedRegionIndex: 0,
+    selectedMaterialIndex: 0,
+    selectedDayIndex: 2,
+    // 加载和搜索状态
+    loading: false,
+    searched: false,
+    hasData: false,
+    // 图表实例
+    ec: {
+      onInit: null
+    },
+    // 趋势数据
+    trendData: null,
+    // 统计数据
+    startPrice: '-',
+    endPrice: '-',
+    priceChange: '-'
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+    // 初始化图表
+    this.setData({
+      ec: {
+        onInit: this.initChart.bind(this)
+      }
+    })
+  },
+
+  /**
+   * 初始化图表
+   */
+  initChart(canvas, width, height, res) {
+    console.log('initChart 被调用', {
+      hasTrendData: !!this.data.trendData,
+      dates: this.data.trendData?.dates,
+      prices: this.data.trendData?.prices
+    })
+
+    if (!this.data.trendData || !this.data.trendData.dates || this.data.trendData.dates.length === 0) {
+      console.log('没有趋势数据，跳过图表初始化')
+      return null
+    }
+
+    // 创建图表实例
+    const chartInstance = echarts.init(canvas)
+
+    const option = {
+      xAxis: {
+        type: 'category',
+        data: this.data.trendData.dates
+      },
+      yAxis: {
+        type: 'value'
+      },
+      series: [{
+        data: this.data.trendData.prices,
+        type: 'line',
+        smooth: true,
+        areaStyle: {}
+      }]
+    }
+
+    chartInstance.setOption(option)
+    console.log('图表初始化完成')
+
+    return chartInstance
+  },
+
+  /**
+   * 地区选择改变
+   */
+  onRegionChange(e) {
+    const index = parseInt(e.detail.value)
+    this.setData({
+      selectedRegionIndex: index
+    })
+  },
+
+  /**
+   * 材质选择改变
+   */
+  onMaterialChange(e) {
+    const index = parseInt(e.detail.value)
+    this.setData({
+      selectedMaterialIndex: index
+    })
+  },
+
+  /**
+   * 时间范围选择改变
+   */
+  onDayRangeChange(e) {
+    const index = parseInt(e.detail.value)
+    this.setData({
+      selectedDayIndex: index
+    })
+  },
+
+  /**
+   * 查询趋势
+   */
+  async onQuery() {
+    const {
+      selectedRegionIndex,
+      selectedMaterialIndex,
+      selectedDayIndex,
+      regions,
+      materials,
+      dayRanges
+    } = this.data
+
+    const region = selectedRegionIndex === 0 ? '' : regions[selectedRegionIndex]
+    const material = selectedMaterialIndex === 0 ? '' : materials[selectedMaterialIndex]
+    const days = dayRanges[selectedDayIndex].value
+
+    // 开始加载
+    this.setData({
+      loading: true,
+      searched: false,
+      hasData: false
+    })
+
+    try {
+      // 获取趋势数据
+      const trendResult = await api.getPriceTrend({
+        region,
+        material,
+        days
+      })
+
+      console.log('趋势数据:', trendResult)
+
+      const trendData = trendResult.data || []
+
+      if (trendData.length === 0) {
+        this.setData({
+          loading: false,
+          searched: true,
+          hasData: false
+        })
+        api.showError('暂无趋势数据')
+        return
+      }
+
+      // 处理数据
+      const dates = []
+      const prices = []
+
+      trendData.forEach(item => {
+        const date = new Date(item.date)
+        const dateStr = `${date.getMonth() + 1}/${date.getDate()}`
+        dates.push(dateStr)
+        prices.push(item.avgPrice || item.avg_price || 0)
+      })
+
+      // 计算统计数据
+      const startPrice = prices[0] || 0
+      const endPrice = prices[prices.length - 1] || 0
+      const priceChange = endPrice - startPrice
+
+      console.log('准备更新数据和图表', { dates, prices, startPrice, endPrice })
+
+      this.setData({
+        trendData: {
+          dates,
+          prices
+        },
+        startPrice,
+        endPrice,
+        priceChange,
+        loading: false,
+        searched: true,
+        hasData: true
+      }, () => {
+        // setData 回调中重新初始化图表
+        console.log('setData 完成，准备重新初始化图表')
+        if (chart) {
+          chart.clear()
+          // 重新调用 initChart
+          const canvas = chart.canvas
+          if (canvas) {
+            chart = this.initChart(canvas, canvas.width, canvas.height)
+          }
+        }
+      })
+
+    } catch (error) {
+      console.error('查询趋势失败:', error)
+      this.setData({
+        loading: false,
+        searched: true,
+        hasData: false
+      })
+    }
+  },
+
+  /**
+   * 重置
+   */
+  onReset() {
+    this.setData({
+      selectedRegionIndex: 0,
+      selectedMaterialIndex: 0,
+      selectedDayIndex: 2,
+      searched: false,
+      hasData: false,
+      trendData: null,
+      startPrice: '-',
+      endPrice: '-',
+      priceChange: '-'
+    })
+
+    if (chart) {
+      chart.clear()
+    }
+  },
+
+  /**
+   * TabBar 切换
+   */
+  onTabChange(e) {
+    const value = e.detail.value
+    console.log('TabBar 切换:', value, '类型:', typeof value)
+
+    // value 可能是字符串或数字,统一处理
+    const tabIndex = parseInt(value)
+
+    if (tabIndex === 1) {
+      // 当前页,不做处理
+      console.log('已在当前页,不跳转')
+      return
+    } else if (tabIndex === 0) {
+      // 跳转到价格查询页
+      console.log('跳转到价格查询页')
+      wx.navigateTo({
+        url: '/pages/index/index'
+      })
+    }
+  }
+})