diff --git a/yuan ma/mp-shop/pages/details/details.js b/yuan ma/mp-shop/pages/details/details.js index f966ca7..6989836 100644 --- a/yuan ma/mp-shop/pages/details/details.js +++ b/yuan ma/mp-shop/pages/details/details.js @@ -1,75 +1,92 @@ -const { getGoodsDetails,addGoodsCart } = require("../../api/index.js") +const { getGoodsDetails, addGoodsCart } = require("../../api/index.js"); Page({ - /** * 页面的初始数据 */ data: { - goodsDetails:{} + goodsDetails: {} // 存储商品详情数据 }, /** * 生命周期函数--监听页面加载 + * @param {Object} options - 页面加载时传递的参数 */ onLoad(options) { - // 提示用户在获取数据 + // 显示加载提示 wx.showLoading({ - title: '等待数据加载...', - }) - getGoodsDetails({id:options.id}).then(res =>{ - wx.hideLoading() - if(res.data.status === 200){ + title: '等待数据加载...', + }); + + // 获取商品详情数据 + getGoodsDetails({ id: options.id }).then(res => { + wx.hideLoading(); // 隐藏加载提示 + + if (res.data.status === 200) { + // 设置商品详情数据 this.setData({ - goodsDetails:res.data.data[0] - }) - }else{ + goodsDetails: res.data.data[0] + }); + } else { + // 显示数据获取失败的提示 wx.showToast({ - title: '数据获取失败', - icon:"success" - }) + title: '数据获取失败', + icon: "none" // 修改为 "none",因为 "success" 不适合表示错误 + }); } - }) + }); }, + /** - * 客服 + * 客服点击事件 */ - onClickKF(){}, + onClickKF() { + // 客服功能实现 + }, + /** - * 购物车 + * 购物车点击事件 */ - onClickCart(){ + onClickCart() { + // 跳转到购物车页面 wx.switchTab({ - url: '/pages/cart/cart', - }) + url: '/pages/cart/cart', + }); }, + /** - * 加入购物车 + * 加入购物车点击事件 */ - onClickAddCart(){ + onClickAddCart() { + // 添加商品到购物车 addGoodsCart({ - title:this.data.goodsDetails.title, - price:this.data.goodsDetails.price, - image:this.data.goodsDetails.topimage, - currentID:this.data.goodsDetails.id - }).then(res =>{ - if(res.data.status === 200){ + title: this.data.goodsDetails.title, // 商品标题 + price: this.data.goodsDetails.price, // 商品价格 + image: this.data.goodsDetails.topimage, // 商品图片 + currentID: this.data.goodsDetails.id // 商品ID + }).then(res => { + if (res.data.status === 200) { + // 显示添加成功提示 wx.showToast({ - title: res.data.msg, - }) - }else{ + title: res.data.msg, + }); + } else { + // 显示添加失败提示 wx.showToast({ - title: res.data.msg, - }) + title: res.data.msg, + }); } - }) + }); }, + /** - * 立即购买 + * 立即购买点击事件 + * @param {Object} e - 事件对象 */ - onClickBuy(e){ + onClickBuy(e) { + // 跳转到购买页面,并传递商品ID wx.navigateTo({ - url: '/pages/buy/buy?id='+e.currentTarget.dataset.id, - }) + url: '/pages/buy/buy?id=' + e.currentTarget.dataset.id, + }); } -}) \ No newline at end of file +}); diff --git a/yuan ma/mp-shop/pages/details/details.wxml b/yuan ma/mp-shop/pages/details/details.wxml index 7380643..08b767b 100644 --- a/yuan ma/mp-shop/pages/details/details.wxml +++ b/yuan ma/mp-shop/pages/details/details.wxml @@ -1,22 +1,41 @@ + + + + + {{ goodsDetails.price }}.00 + + {{ goodsDetails.title }} + + + + + + + + + + + + - \ No newline at end of file + diff --git a/yuan ma/mp-shop/pages/details/details.wxss b/yuan ma/mp-shop/pages/details/details.wxss index 1e1b65a..242b770 100644 --- a/yuan ma/mp-shop/pages/details/details.wxss +++ b/yuan ma/mp-shop/pages/details/details.wxss @@ -1,32 +1,39 @@ -.details{ - background: #fff; +/* 商品详情页面的整体样式 */ +.details { + background: #fff; /* 设置背景颜色为白色 */ } -.details .topimage{ - width: 100%; +/* 商品顶部图片的样式 */ +.details .topimage { + width: 100%; /* 图片宽度占满父容器 */ } -.details .content{ - margin: 10px; +/* 商品基本信息容器的样式 */ +.details .content { + margin: 10px; /* 设置外边距为 10px */ } +/* 商品价格的样式 */ .details .content .price { - color: #f2270c; + color: #f2270c; /* 设置价格文字颜色为红色 */ } -.details .content .price text{ - color: #f2270c; - display: inline-block; - font-family: JDZH-Regular; - font-size: 20px; - line-height: 30px; +/* 商品价格中的文本样式 */ +.details .content .price text { + color: #f2270c; /* 设置价格文字颜色为红色 */ + display: inline-block; /* 使文本块级显示,方便设置其他样式 */ + font-family: JDZH-Regular; /* 设置字体为 JDZH-Regular */ + font-size: 20px; /* 设置字体大小为 20px */ + line-height: 30px; /* 设置行高为 30px */ } -.details .content .title{ - font-size: 15px; - font-weight: 700; +/* 商品标题的样式 */ +.details .content .title { + font-size: 15px; /* 设置字体大小为 15px */ + font-weight: 700; /* 设置字体加粗 */ } -.details .introduce image{ - width: 100%; -} \ No newline at end of file +/* 商品详细介绍图片的样式 */ +.details .introduce image { + width: 100%; /* 图片宽度占满父容器 */ +}