<!-- 轮播图 -->
<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; }