微信小程序商城项目（篇7）：商城详情页实现

效果展示

步骤1：获取相关数据

  onLoad: function (options) {
    // console.log(options.goodsid,typeof options.goodsid)
    let goodsid=Number(options.goodsid)
    // console.log(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)=>{
      // console.log(res)
    // console.log(typeof res.data.message.goods_introduce)
      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)=>{
      // 查找索引，存在返回1；不存在返回-1
     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'
    });
  }