效果展示
步骤1:获取相关数据
onLoad: function (options) {
let goodsid=Number(options.goodsid)
let params={
goods_id:goodsid
}
let url='https://api-hmugo-web.itheima.net/api/public/v1/goods/detail'
let promise=getRequest(url,params)
promise.then((res)=>{
this.setData({
productData:res.data.message
})
})
}
步骤2:轮播效果实现
<swiper indicator-dots="{{true}}" autoplay="{{true}}" circular="{{true}}" interval="5000">
<swiper-item wx:for="{{productData.pics}}" wx:key="index">
<image class="proPic" src="{{item.pics_big}}" mode="widthFix">
</image>
</swiper-item>
</swiper>
步骤3:将字符串转为HTML渲染至页面
<rich-text class="" nodes="{{productData.goods_introduce}}"></rich-text>
步骤4:底部交互效果实现
<view class="footNav">
<view class="footLeft">
<view class="sec">联系客服</view>
<view class="sec">分享</view>
<view class="sec" bindtap="enterCar">购物车</view>
</view>
<view class="footRight">
<view class="goCar" bindtap="addCar">加入购物车</view>
<view class="goBuy">立即购买</view>
</view>
</view>
步骤5:加入购物车功能实现
addCar:function(){
let cart=wx.getStorageSync('cart')||[];
let index=cart.findIndex((v)=>{
return v.goods_id===this.data.productData.goods_id
})
if(index===-1){
console.log('不存在')
this.data.productData.num=1
console.log(this.data.productData)
cart.push(this.data.productData)
console.log(cart)
}else{
console.log('存在')
cart[index].num++
}
wx.setStorageSync('cart',cart)
wx.showToast({
title: '成功加入购物车',
image: 'success',
duration: 1500,
mask: true,
});
}
步骤6:进入购物车页面
enterCar:function(){
wx.switchTab({
url: '../../pages/cart/cart'
});
}