第一次提交：小程序前端最新版本

pages/sjpaihang/sjpaihang.js

@@ -0,0 +1,394 @@
+// pages/shangjia-paihang/shangjia-paihang.js
+const app = getApp()
+import request from '../../utils/request.js'
+
+Page({
+  data: {
+    // 页面加载状态
+    jiazaiZhuangtai: true,
+    
+    // 排行榜类型：1=今日流水，2=今月流水
+    paihangLeixing: 1,
+    
+    // 榜单数据
+    paihangShuju: [],
+    
+    // 是否展示真实数据（后端控制）
+    xianshiZhenshiShuju: false,
+    
+    // 虚拟数据（用于当后端不允许展示时）
+    xuniShuju: [],
+    
+    // 按钮防抖控制
+    btnFangdou: false,
+    
+    // OSS图片基础URL（从全局变量获取）
+    ossImageUrl: '',
+    
+    // 默认头像（相对路径，需要与OSS基础URL拼接）
+    morentouxiang: '',
+    
+    // 用户类型：1=打手，2=管事，3=商家（当前页面固定为商家）
+    yonghuLeixing: 3,
+    
+    // 前三名特殊数据
+    qiansanMing: [],
+    
+    // 动画相关
+    crownAnimation: null,
+    
+    // 卡片点击特效
+    flashCardIndex: -1,
+    flashCardType: '',
+    flashAnimation: null,
+    
+    // 切换按钮选中状态
+    switchBgPosition: 0
+  },
+
+  onLoad() {
+    // 设置页面标题
+    wx.setNavigationBarTitle({
+      title: '商家排行榜'
+    })
+    
+    // 初始化全局变量
+    this.setData({
+      ossImageUrl: app.globalData.ossImageUrl || '',
+      morentouxiang: app.globalData.morentouxiang || ''
+    })
+    
+    // 初始化虚拟数据
+    this.initXuniShuju()
+    
+    // 加载排行榜数据
+    this.huoquPaihangShuju()
+    
+    // 开始皇冠动画
+    this.startCrownAnimation()
+  },
+
+  onShow() {
+    // 页面显示时恢复动画
+    this.registerNotificationComponent();
+    this.startCrownAnimation()
+  },
+  registerNotificationComponent() {
+    const app = getApp();
+    const notificationComp = this.selectComponent('#global-notification');
+    
+    if (notificationComp && notificationComp.showNotification) {
+        console.log('🏪 商城页面注册通知组件');
+        app.globalData.globalNotification = {
+            show: (data) => notificationComp.showNotification(data),
+            hide: () => notificationComp.hideNotification()
+        };
+    }
+},
+
+  onHide() {
+    // 页面隐藏时停止动画
+    this.stopCrownAnimation()
+  },
+
+  onUnload() {
+    // 页面卸载时停止动画
+    this.stopCrownAnimation()
+  },
+
+  // 初始化虚拟数据
+  initXuniShuju() {
+    const xuniShuju = []
+    const names = ['商业大亨', '平台巨头', '金牌商家', '优质供应商', '运营高手', 
+                   '流量之王', '服务专家', '合作典范', '商业精英', '销售冠军']
+    
+    for (let i = 0; i < 10; i++) {
+      xuniShuju.push({
+        mingci: i + 1,
+        touxiang: '',
+        nicheng: names[i] || `虚拟商家${i + 1}`,
+        uid: `S${100000 + i}`,
+        jine: (5888.88 - i * 500).toFixed(2),  // 商家显示的是流水金额
+        jineClass: 'normal'  // 金额样式
+      })
+    }
+    this.setData({ xuniShuju })
+  },
+
+  // 开始皇冠动画
+  startCrownAnimation() {
+    this.stopCrownAnimation()
+    
+    const animation = wx.createAnimation({
+      duration: 800,
+      timingFunction: 'ease-in-out'
+    })
+    
+    let scale = 1
+    const animate = () => {
+      scale = scale === 1 ? 1.15 : 1
+      
+      animation.scale(scale).step({
+        duration: 800,
+        timingFunction: 'ease-in-out'
+      })
+      
+      this.setData({
+        crownAnimation: animation.export()
+      })
+      
+      this.data.crownAnimationTimer = setTimeout(() => {
+        animate()
+      }, 800)
+    }
+    
+    animate()
+  },
+
+  // 停止皇冠动画
+  stopCrownAnimation() {
+    if (this.data.crownAnimationTimer) {
+      clearTimeout(this.data.crownAnimationTimer)
+      this.setData({
+        crownAnimationTimer: null
+      })
+    }
+  },
+
+  // 卡片点击特效
+  handleCardTap(e) {
+    const index = e.currentTarget.dataset.index
+    const type = e.currentTarget.dataset.type // 'top3' 或 'normal'
+    
+    // 创建闪光动画
+    const animation = wx.createAnimation({
+      duration: 300,
+      timingFunction: 'ease-out'
+    })
+    
+    // 快速闪光效果
+    animation.opacity(0.9).step({
+      duration: 50,
+      timingFunction: 'linear'
+    })
+    
+    animation.opacity(1).step({
+      duration: 250,
+      timingFunction: 'ease-out'
+    })
+    
+    this.setData({
+      flashCardIndex: index,
+      flashCardType: type,
+      flashAnimation: animation.export()
+    })
+    
+    // 300ms后重置闪光状态
+    setTimeout(() => {
+      this.setData({
+        flashCardIndex: -1,
+        flashCardType: ''
+      })
+    }, 300)
+  },
+
+  // 获取排行榜数据
+  async huoquPaihangShuju() {
+    this.setData({
+      jiazaiZhuangtai: true
+    })
+    
+    try {
+      // 准备请求参数
+      const requestData = {
+        leixing: this.data.paihangLeixing,
+        yonghu_leixing: this.data.yonghuLeixing
+      }
+      
+      // 使用封装的request发送请求
+      const res = await request({
+        url: '/peizhi/dsph',
+        method: 'POST',
+        data: requestData,
+        header: {
+          'content-type': 'application/json'
+        }
+      })
+      
+      // 处理返回数据
+      if (res && res.data && res.data.code === 0) {
+        const responseData = res.data.data
+        
+        // 检查后端是否允许展示
+        if (responseData.xianshi && responseData.paihang_list && responseData.paihang_list.length > 0) {
+          // 处理头像URL拼接和金额样式
+          const processedList = this.processData(responseData.paihang_list)
+          
+          // 提取前三名特殊展示
+          const qiansanMing = processedList.slice(0, 3)
+          const qitaPaihang = processedList.slice(3)
+          
+          this.setData({
+            paihangShuju: qitaPaihang,
+            qiansanMing: qiansanMing,
+            xianshiZhenshiShuju: true,
+            jiazaiZhuangtai: false
+          })
+        } else {
+          // 后端不允许展示或数据不足，显示虚拟数据
+          this.xianshiXuniShuju()
+        }
+      } else {
+        // 请求失败，显示虚拟数据
+        const errorMsg = res && res.data ? (res.data.msg || '获取数据失败') : '网络请求失败'
+        
+        wx.showToast({
+          title: errorMsg,
+          icon: 'none',
+          duration: 2000
+        })
+        
+        this.xianshiXuniShuju()
+      }
+    } catch (error) {
+      console.error('获取排行榜数据失败:', error)
+      
+      wx.showToast({
+        title: '网络请求异常，请重试',
+        icon: 'none',
+        duration: 2000
+      })
+      
+      this.xianshiXuniShuju()
+    }
+  },
+
+  // 处理数据（头像拼接和金额样式）
+  processData(list) {
+    const { ossImageUrl, morentouxiang } = this.data
+    
+    return list.map(item => {
+      // 优先使用返回的头像URL
+      let finalTouxiang = item.touxiang
+      
+      // 如果返回的头像为空，使用默认头像
+      if (!finalTouxiang && morentouxiang) {
+        finalTouxiang = morentouxiang
+      }
+      
+      // 拼接完整的URL
+      let fullTouxiangUrl = ''
+      if (finalTouxiang && ossImageUrl) {
+        // 确保路径不以斜杠开头
+        let touxiangPath = finalTouxiang
+        if (touxiangPath.startsWith('/')) {
+          touxiangPath = touxiangPath.substring(1)
+        }
+        fullTouxiangUrl = ossImageUrl + touxiangPath
+      }
+      
+      // 处理金额样式
+      const jine = parseFloat(item.jine || 0)
+      let jineClass = 'normal'
+      const jineStr = jine.toFixed(2)
+      
+      // 判断金额位数
+      const integerPart = jineStr.split('.')[0]
+      if (integerPart.length >= 7) {  // 7位数及以上
+        jineClass = 'very-small'
+      } else if (integerPart.length >= 6) {  // 6位数
+        jineClass = 'small'
+      } else if (integerPart.length >= 5) {  // 5位数
+        jineClass = 'medium'
+      }
+      
+      return {
+        ...item,
+        full_touxiang: fullTouxiangUrl,
+        jine: jineStr,
+        jineClass: jineClass
+      }
+    })
+  },
+
+  // 显示虚拟数据
+  xianshiXuniShuju() {
+    const processedList = this.processData(this.data.xuniShuju)
+    const qiansanMing = processedList.slice(0, 3)
+    const qitaPaihang = processedList.slice(3)
+    
+    this.setData({
+      paihangShuju: qitaPaihang,
+      qiansanMing: qiansanMing,
+      xianshiZhenshiShuju: false,
+      jiazaiZhuangtai: false
+    })
+  },
+
+  // 切换排行榜类型（今日/今月）
+  qiehuangPaihangLeixing(e) {
+    // 防抖处理：防止连续点击
+    if (this.data.btnFangdou) return
+    
+    const leixing = e.currentTarget.dataset.leixing
+    if (leixing == this.data.paihangLeixing) return
+    
+    // 设置防抖状态
+    this.setData({
+      btnFangdou: true
+    })
+    
+    // 更新切换按钮位置
+    this.setData({
+      paihangLeixing: leixing,
+      switchBgPosition: leixing == 1 ? 0 : 1
+    })
+    
+    // 重新加载数据
+    this.huoquPaihangShuju()
+    
+    // 1秒后解除防抖
+    setTimeout(() => {
+      this.setData({
+        btnFangdou: false
+      })
+    }, 1000)
+  },
+
+  // 用户下拉刷新
+  onPullDownRefresh() {
+    this.huoquPaihangShuju()
+    wx.stopPullDownRefresh()
+  },
+
+  // 图片加载失败处理
+  tupianJiazaiShibai(e) {
+    const index = e.currentTarget.dataset.index
+    const type = e.currentTarget.dataset.type // 'top3' 或 'normal'
+    
+    // 使用默认头像
+    const { ossImageUrl, morentouxiang } = this.data
+    let defaultUrl = ''
+    if (morentouxiang && ossImageUrl) {
+      let defaultPath = morentouxiang
+      if (defaultPath.startsWith('/')) {
+        defaultPath = defaultPath.substring(1)
+      }
+      defaultUrl = ossImageUrl + defaultPath
+    }
+    
+    if (type === 'top3') {
+      // 前三名头像加载失败
+      const key = `qiansanMing[${index}].full_touxiang`
+      this.setData({
+        [key]: defaultUrl
+      })
+    } else {
+      // 普通排名头像加载失败
+      const key = `paihangShuju[${index}].full_touxiang`
+      this.setData({
+        [key]: defaultUrl
+      })
+    }
+  }
+})