详情

<!-- 轮播图 -->
<view class="details_swiper">
<swiper circular indicator-dots autoplay>
<swiper-item wx:for="{{goodsData.pics}}" bindtap="handleswiper" data-url="{{itemitem.pics_mid}}">
<image src="{{item.pics_mid}}" mode="widthFix"></image>
</swiper-item>
</swiper>
</view>
<!-- 商品信息 -->
<view class="details_info">
  <view class="price">￥{{goodsData.goods_price}}</view>
  <view class="content">
  <view class="left">{{goodsData.goods_name}}</view>
  <view class="right" bindtap="handleCollect">
    <text class="iconfont {{isCollect?'icon-shoucang2':'icon-shoucang1'}}"></text>
    <text>收藏</text>
  </view>
</view>
</view>
<view class="divider">图文详情</view>
<view>
<rich-text nodes="{{goodsData.goods_introduce}}"></rich-text>
</view>
<view class="details_floor ">
<navigator url="/pages/index/index" class="floor_item" open-type="switchTab">
<text class="iconfont icon-shouye"></text>
<text>首页</text>
</navigator>
<view class="floor_item">
  <text class="iconfont icon-rengongkefu"></text>
  <text>客服</text>
  <button open-type="contact"></button>
</view>
<view class="floor_item">
  <text class="iconfont icon-fenxiang"></text>
  <text>分享</text>
  <button open-type="share"></button>
</view>
<navigator url="/pages/gwc/gwc" class="floor_item" open-type="switchTab">
<text class="iconfont icon-gouwuche"></text>
<text>购物车</text>
</navigator>
<view class="btn_add">加入购物车</view>
<view class="btn_buy">立即购买</view>
</view>

// pages/details/details.js
Page({
  data: {
    goodsData:{},
    isCollect:false
  },
  goodsInfo: {},
  onLoad: function (options) {
    let that =this
    var base_url = "https://api-hmugo-web.itheima.net/api/public/v1/goods/detail?goods_id=" + options.goods_id;
    console.log(base_url)
  
    wx.request({
      url: base_url,
      success(res) {
        that.goodsInfo = res.data.message
        let collect = wx.getStorageSync('collect')||[]
        let isCollect = collect.some(v=>v.goods_id==that.goodsInfo.goods_id)
        that.setData({
          goodsData: res.data.message,
          isCollect
        })
      }
    });
  },
  handleswiper(e){
    console.log(e)
    var currentImage = e.currentTarget.dataset.url
    var urlImage = this.data.goodsData.pics.map(v=>v.pics_mid)
    console.log(urlImage)
    wx.previewImage({
      current: currentImage,
      urls: urlImage
    })
  },
  //收藏
  handleCollect(){
    let isCollect = false
    let collect = wx.getStorageSync('collect')||[]
    let index = collect.findIndex(v=>v.goods_id==this.goodsInfo)
    if(index!==-1){
      //收藏里面有该商品
      isCollect = false
      collect.splice(index,1)
      wx.showToast({
        title:'取消收藏',
        icon:'success',
        mask:true
      })
    }else{
      isCollect = true
      collect.push(this.goodsInfo)
      wx.showToast({
        title:'收藏成功',
        icon:'success',
        mask:true
      })
    }
    wx.getStorageSync('collect',collect)
    this.setData({
      isCollect
    })

  }
})

.details_swiper{
  height: 65vw;
  text-align: center;
}
.details_swiper swiper swiper-item image{
  width: 60%;
}
details_info{
  padding: 0 15rpx;
}
.price{
  font-size: 35rpx;
  color: red;
  font-weight: 600;
}
.content{
  display: flex;
}
.left{
  flex: 5;
  font-size: 30rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.right{
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-left: 1rpx solid rgb(98,107,107);
  font-size: 30rpx;
}
.divider{
  padding-left: 20rpx;
  height: 90rpx;
  font-size: 45rpx;
  line-height: 90rpx;
  color: red;
  font-weight: 600;
  border-bottom: 10rpx solid #eee;
  border-top: 10rpx solid #eee;
}
.details_floor{
  width: 100%;
  height: 90rpx;
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
  font-size: 24rpx;
  background-color: #fff;
  border-top: 1rpx solid #ccc;
}
.floor_item{
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}
.btn_add{
  flex: 2;
  text-align: center;
  line-height: 90rpx;
  background-color: rgb(242,248,222);
}
.btn_buy{
  flex: 2;
  background-color: red;
  text-align: center;
  line-height: 90rpx;
  color: #fff;
}
.floor_item button{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}