393 lines
9.8 KiB
JavaScript
393 lines
9.8 KiB
JavaScript
// pages/guanshi-paihang/guanshi-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: 2,
|
||
|
||
// 前三名特殊数据
|
||
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: `G${100000 + i}`,
|
||
jine: (88 - i * 7).toString(), // 管事显示的是数量，不是金额
|
||
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 = parseInt(item.jine || 0)
|
||
let jineClass = 'normal'
|
||
const jineStr = jine.toString() // 管事显示整数数量
|
||
|
||
// 判断数量位数
|
||
if (jineStr.length >= 5) { // 5位数及以上
|
||
jineClass = 'very-small'
|
||
} else if (jineStr.length >= 4) { // 4位数
|
||
jineClass = 'small'
|
||
} else if (jineStr.length >= 3) { // 3位数
|
||
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
|
||
})
|
||
}
|
||
}
|
||
}) |