实现商品详情页

json里边设置一下页面标题"navigationBarTitleText": "商品详情"

界面组成

上方由一个轮播图展示，

中间为商品信息，后台会返回图文详情富文本，前台只需赋值

下方固定一个工具栏

客服分享购物车添加购物车立即购买

界面编写

分享是将一个按钮隐藏且将其定位在分享处,客服也是一样的

加入购物车:如果已经加入则提示已经加入…

<!--pages/goods_detail/goods_detail.wxml--><view><view class="index_swiper"><swiper indicator-dots autoplay circular><swiper-item wx:for="{{detailList.pics}}" wx:key="*this"><navigator bindtap="preview" data-src="{{item.pics_mid}}"><image src="{{item.pics_mid}}" mode="widthFix" /></navigator></swiper-item></swiper><view class="context"><view class="price">￥{{detailList.goods_price}}</view><view class="title"><view class="title_name">{{detailList.goods_name}}</view><view class="_xian"></view><view class="like" bindtap="shoucang" ><view class="iconfont icon-shoucang" style="color: {{color}};"></view>收藏</view></view></view><view class="line"></view><view><rich-text nodes="<h1 style='color:red;margin-left:7px;'>图文详情</h1>"></rich-text><view class="line"></view><rich-text nodes="{{detailList.goods_introduce}}"></rich-text></view><view class="btm_tool"><view class="tool_item"><view class="iconfont icon-kefu"></view><view>客服</view></view><view class="tool_item"><view class="iconfont icon-fenxiang"></view><view>分享</view></view><navigator url="/pages/cart/cart" open-type="switchTab" class="tool_item"><view class="iconfont icon-gouwuche"></view><view>购物车</view></navigator><view class="tool_item btn_cart" bindtap="addcart">加入购物车</view><view class="tool_item btn_buy" bindtap="over">立即购买</view></view></view><!--分享--><button open-type="share" style="position: fixed;bottom: 0;width: 2vw; height:5vh;left: 120rpx;background-color: transparent;border:none"></button><!--客服--><button open-type="contact" size="mini" style="position: fixed;; bottom: 0; background-color: transparent;border:none "></button></view>

样式编写

swiper{height: 65vw;text-align: center;}image{width: 60%;}.context{font-size: 30rpx;}.context .price{font-size: 40rpx;color: var(--themeColor);}.context .title{display: flex;}.context .title .title_name{line-height: 50rpx;flex: 2;}.context .title ._xian{margin-right: 20rpx;height: 80rpx;width: 10rpx;background-color: #666666;}.context .title .like{text-align: center;}.line{margin-top: 14rpx;width: 100%;height: 10rpx;background-color: #666666;}.goods_info .goods_info_title {color: #af64ed;padding: 20rpx;font-size: 32rpx;}.btm_tool {position: fixed;left: 0;bottom: 0;width: 100%;height: 90rpx;background-color: white;display: flex;}.btm_tool .tool_item {flex: 1;display: flex;flex-direction: column;justify-content: center;align-items: center;}.btm_tool .btn_cart {flex: 2;display: flex;flex-direction: column;justify-content: center;align-items: center;background-color: darkkhaki;color: #ffffff;font-size: 30rpx;font-weight: 600;}.btm_tool .btn_buy {flex: 2;display: flex;flex-direction: column;justify-content: center;align-items: center;background-color: red;color: #ffffff;font-size: 30rpx;font-weight: 600;}

JS方法编写

data属性:

color：收藏的图标颜色detailList:商品信息数据id:商品idover:购买

方法:

shoucang:用于收藏商品,收藏过的会提示getdetail:获取商品详情信息并且赋值给List，还会向本地添加浏览记录addcart：添加至购物车wx.previewImage :图片预览

import {request} from '../../utils/request'Page({/*** 页面的初始数据*/data: {detailList:{},color:'black',id:{}},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {this.setData({id:options})},async getdetail(options){let ret=await request('goods/detail',options);this.setData({detailList:ret.data.message})let newarr=[];newarr=this.data.detailList;newarr.checked=false; //定义是否被选中,为购物车铺路console.log(newarr);this.setData({detailList:newarr})let userinfo=wx.getStorageSync("userinfo");if(userinfo!=''){let shoucang=wx.getStorageSync('shoucang') || [];if(shoucang!='[]'){let index=shoucang.findIndex((item)=>{return item.goods_id==this.data.detailList.goods_id;})console.log(index);if(index!=-1){this.setData({color:'orange'})}}//历史记录let hostry=wx.getStorageSync('hostry') || [];console.log(hostry);if(hostry.length==0){var hoarr=[];hoarr.push(this.data.detailList);wx.setStorageSync('hostry',hoarr);}else{let index=hostry.findIndex((item)=>{return item.goods_id==this.data.detailList.goods_id;})if(index!=-1){hostry.splice(index,1);//消除重复}hostry.push(this.data.detailList);wx.setStorageSync('hostry',hostry);}}console.log(this.data.detailList.goods_price);},shoucang(e){let userinfo=wx.getStorageSync("userinfo");if(userinfo==''){wx.showToast({title: '请先登录...',icon: 'error',duration: 1000//持续的时间})}else{let shoucang=wx.getStorageSync('shoucang') || [];let index=shoucang.findIndex((item)=>{return item.goods_id==this.data.detailList.goods_id;})console.log(index);if(index==-1){if(shoucang.length!=0){shoucang.push(this.data.detailList);wx.setStorageSync('shoucang', shoucang);}else{var scarr=[];scarr.push(this.data.detailList);wx.setStorageSync('shoucang',scarr);}wx.showToast({title: '收藏成功',icon: 'success',duration: 1000//持续的时间})this.setData({color:'orange'})}else{shoucang.splice(index,1);//取消收藏进行删除wx.setStorageSync('shoucang', shoucang);wx.showToast({title: '取消收藏成功',icon: 'success',duration: 1000//持续的时间})this.setData({color:'black'})}}},addcart(){let userinfo=wx.getStorageSync("userinfo");if(userinfo==''){wx.showToast({title: '请先登录...',icon: 'error',duration: 1000//持续的时间})}else{let cart=wx.getStorageSync('cart') || [];let index=cart.findIndex((item)=>{return item.goods_id==this.data.detailList.goods_id;})if(index==-1){if(cart.length!=0){cart.push(this.data.detailList);wx.setStorageSync('cart', cart);}else{var scarr=[];scarr.push(this.data.detailList);wx.setStorageSync('cart',scarr);}wx.showToast({title: '添加成功',icon: 'success',duration: 1000//持续的时间})wx.switchTab({url: '/pages/cart/cart',})}else{wx.showToast({title: '不可重复添加',icon: 'error',duration: 1000//持续的时间})}}},/*图片预览 */preview(e){let src=e.currentTarget.dataset.src;let bigsrc=this.data.detailList.pics.map((item)=>{return item.pics_big_url;})wx.previewImage({current:src, //原图片路径urls:bigsrc, //图片放大路径})},//购买over(e){var sz=[];var orderCode=0;// 6位随机数(加在时间戳后面)for (var i = 0; i < 6; i++){orderCode += Math.floor(Math.random() * 10);}// 时间戳(用来生成订单号)orderCode = 'D' + new Date().getTime() + orderCode;// 打印console.log(orderCode)// D1601545805958923658console.log(this.data.detailList,'对应数量:'+1,'总价钱:'+this.data.detailList.goods_price,'总数量:'+1);let good={goods:this.data.detailList,shu:1,sum:this.data.detailList.goods_price,num:1,orderid:orderCode}sz.push(good);wx.setStorageSync('payList', sz);wx.showToast({title: '正在生成订单',icon:"loading",duration: 800//持续的时间})wx.navigateTo({url: '/pages/pay/pay',})},/*** 生命周期函数--监听页面显示*/onShow: function () {this.getdetail(this.data.id);},})

效果图

刚进来时…

点击图片预览:

点击分享

成功实现~