// pages/shangpinxiangqing/shangpinxiangqing.js const app = getApp() Page({ /** * 页面的初始数据 */ data: { // 全局变量引用 ossImageUrl: '', apiBaseUrl: '', // 从上级页面传入的参数 shangpinId: '', // 商品ID shangpinTitle: '', // 商品标题(可选,用于SEO) shangpinPrice: '', // 商品价格(可选) // 商品详情数据 shangpinData: null, // 商品详情数据对象 isLoading: true, // 加载状态 loadError: false, // 加载错误 // 页面字段映射(后端返回字段名) fieldMapping: { tupian: 'tupian', // 商品图片URL biaoti: 'biaoti', // 商品标题 jiage: 'jiage', // 商品价格 xiangqing: 'xiangqing', // 商品详细介绍 xiadanxuzhi: 'xiadanxuzhi', // 下单须知 guize: 'guize', // 规则图片URL xiaoliang: 'xiaoliang', // 商品销量 kucun: 'kucun', // 商品库存 fenlei: 'fenlei', // 商品分类(可能有用) pingfen: 'pingfen' // 商品评分(可能有用) } }, /** * 生命周期函数--监听页面加载 */ onLoad(options) { // 获取全局变量 this.setData({ ossImageUrl: app.globalData.ossImageUrl, apiBaseUrl: app.globalData.apiBaseUrl, shangpinId: options.id || '', shangpinTitle: options.title || '', shangpinPrice: options.price || '' }) // 验证商品ID if (!this.data.shangpinId) { wx.showToast({ title: '商品不存在', icon: 'none' }) setTimeout(() => { wx.navigateBack() }, 1500) return } // 加载商品详情数据 this.loadShangpinDetail() }, onShow() { // 原有代码... // 🆕 注册通知组件 this.registerNotificationComponent(); }, // 🆕 新增:注册通知组件 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() }; } }, /** * 加载商品详情数据 */ loadShangpinDetail() { const that = this const { shangpinId, apiBaseUrl } = this.data this.setData({ isLoading: true, loadError: false }) wx.request({ url: apiBaseUrl + '/shangpin/xiangqinghuoqu/', method: 'POST', header: { 'content-type': 'application/json' }, data: { shangpin_id: shangpinId }, success(res) { if (res.statusCode === 200 && res.data && res.data.code === 0) { // 获取商品数据 const shangpinData = res.data.data || {} // 处理价格显示 if (shangpinData.jiage) { const jiage = parseFloat(shangpinData.jiage) || 0 const priceInteger = Math.floor(jiage) let priceDecimal = '00' const decimalPart = (jiage - priceInteger).toFixed(2) if (decimalPart > 0) { priceDecimal = decimalPart.toString().split('.')[1] } shangpinData.priceInteger = priceInteger shangpinData.priceDecimal = priceDecimal } // 处理图片URL(确保完整URL) if (shangpinData.tupian && !shangpinData.tupian.startsWith('http')) { shangpinData.tupian = that.data.ossImageUrl + shangpinData.tupian } // 处理规则图片URL if (shangpinData.guize && !shangpinData.guize.startsWith('http')) { shangpinData.guize = that.data.ossImageUrl + shangpinData.guize } // 处理销量显示 if (shangpinData.xiaoliang) { shangpinData.xiaoliangText = that.formatXiaoliang(shangpinData.xiaoliang) } // 处理库存显示 if (shangpinData.kucun) { shangpinData.kucunText = shangpinData.kucun + '件' shangpinData.kucunClass = shangpinData.kucun > 0 ? 'kucun-normal' : 'kucun-none' } // 设置页面标题 if (shangpinData.biaoti) { wx.setNavigationBarTitle({ title: '商品详情' }) } that.setData({ shangpinData: shangpinData, isLoading: false }) } else { that.handleLoadError(res.data?.msg || '加载失败') } }, fail(error) { console.error('商品详情加载失败:', error) that.handleLoadError('网络错误,请重试') } }) }, /** * 格式化销量显示 */ formatXiaoliang(xiaoliang) { const num = parseInt(xiaoliang) || 0 if (num >= 10000) { return (num / 10000).toFixed(1) + '万+' } else if (num >= 1000) { return (num / 1000).toFixed(1) + '千+' } else { return num + '' } }, /** * 处理加载错误 */ handleLoadError(errorMsg) { this.setData({ isLoading: false, loadError: true }) wx.showToast({ title: errorMsg || '加载失败', icon: 'none', duration: 2000 }) // 3秒后自动返回 setTimeout(() => { wx.navigateBack() }, 3000) }, /** * 预览商品图片 */ previewImage() { const { shangpinData } = this.data if (!shangpinData || !shangpinData.tupian) return wx.previewImage({ current: shangpinData.tupian, urls: [shangpinData.tupian] }) }, /** * 点击立即下单按钮 */ onOrderClick() { const { shangpinData, shangpinId } = this.data // 检查库存 if (shangpinData && shangpinData.kucun <= 0) { wx.showToast({ title: '商品已售罄', icon: 'none' }) return } // 验证必要数据 if (!shangpinData || !shangpinData.biaoti) { wx.showToast({ title: '商品信息不完整', icon: 'none' }) return } // 准备跳转数据 const orderData = { id: shangpinId, // 商品ID title: shangpinData.biaoti, // 商品标题 price: shangpinData.jiage, // 商品价格(原价) priceInteger: shangpinData.priceInteger, // 价格整数部分 priceDecimal: shangpinData.priceDecimal, // 价格小数部分 image: shangpinData.tupian, // 商品图片 kucun: shangpinData.kucun || 0, // 商品库存 xiaoliang: shangpinData.xiaoliang || 0 // 商品销量 } // 跳转到提交订单页面 wx.navigateTo({ url: `/pages/tijiao/tijiao?data=${encodeURIComponent(JSON.stringify(orderData))}` }) }, /** * 刷新页面数据 */ onRefresh() { this.loadShangpinDetail() }, /** * 用户点击右上角分享 */ onShareAppMessage() { const { shangpinData, shangpinId } = this.data return { title: shangpinData?.biaoti || '阿龙电竞 - 商品详情', path: `/pages/shangpinxiangqing/shangpinxiangqing?id=${shangpinId}`, imageUrl: shangpinData?.tupian || '' } }, /** * 生命周期函数--监听页面显示 */ onShow() { // 页面显示时,可以检查是否需要刷新数据 }, /** * 生命周期函数--监听页面卸载 */ onUnload() { // 清理工作 } })