296 lines
7.7 KiB
JavaScript
296 lines
7.7 KiB
JavaScript
// 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() {
|
||
// 清理工作
|
||
}
|
||
}) |