点击轮播图进入详情页

index

1.index.wxml

<search class="search"></search>

<!-- 轮播图 -->

<swiper class="swiper" autoplay indicator-dots indicator-color="#fff" indicator-active-color="#ddd" interval="2000">

  <swiper-item wx:for="{{swiper}}">

    <navigator url="/pages/detail/detail?goods_id={{item.goods_id}}">

     <image src="{{item.image_src}}" mode="widthFix"></image>

    </navigator>

  </swiper-item>

</swiper>

<!-- 分类 -->

<!-- <view class="cates">

  <navigator wx:for="{{cates}}">

    <image src="{{item.image_src}}" mode="widthFix"></image>

  </navigator>

</view> -->

<van-grid icon-size="60px" border="{{false}}">

  <van-grid-item wx:for="{{cates}}" icon="{{item.image_src}}"  />

</van-grid>

<view class="floor">

 <view wx:for="{{floordata}}" wx:for-item="item1">

 <!-- title -->

  <view class="floor_title">

    <image src="{{item1.floor_title.image_src}}" mode="widthFix"></image>

  </view> 

  <!-- 图片布局 -->

  <navigator wx:for="{{item1.product_list}}" wx:for-item="item2" wx:for-index="index2" url="/pages/goodslist/goodslist">

    <image src="{{item2.image_src}}" mode="{{index2==0?'widthFix':'scaleToFill'}}"></image>

  </navigator>

 </view>

</view>

2.index.wxss

.search{

  position: fixed;

  width: 100%;

  left: 0;

  top: 0;

  z-index: 999;

}

.swiper{

  margin-top: 100rpx;

  height: 300rpx;

}

.swiper swiper-item navigator image{

  width: 100%;

}

/* .cates{

  margin-top: 10rpx;

}

.cates navigator{

  width: 25%;

  display: inline-block;

}

.cates navigator image{

  width: 70%;

  display: block;

  margin: 0 auto;

} */

.floor{

  margin-top: 10rpx;

}

.floor_title{

  width: 100%;

}

.floor view navigator{

  width: 33.3%;

  float: left;

  border: 5rpx #fff solid;

  box-sizing: border-box;

}

.floor view navigator image{

  width: 100%;

  height: 100%;

}

.floor view navigator:nth-last-child(-n+4){

  height: 205rpx;

}

3.index.js

// index.js

// 获取应用实例

const app = getApp()

Page({

  data: {

    swiper:[],

    cates:[],

    floordata:[]

  },

  onLoad(){

    let that = this

    //网络请求

    wx.request({

      url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata',

      success(res){

        console.log(res)

        that.setData({

          swiper:res.data.message

        })

      }

    }),

    wx.request({

      url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/catitems',

      success(res){

        that.setData({

          cates:res.data.message

        })

      }

    }),

    wx.request({

      url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/floordata',

      success(res){

        that.setData({

          floordata:res.data.message

        })

      }

    })

  }

})

4.index.json

{

  "usingComponents": {

    "search":"/components/search/search", 

    "van-grid": "@vant/weapp/grid/index",

    "van-grid-item": "@vant/weapp/grid-item/index"   

  }

}

detail

1.detail.wxml

<!-- 轮播图 -->

<view class="details_swiper">

  <swiper circular indicator-dots autoplay> 

    <swiper-item wx:for="{{goodsData.pics}}" bindtap="handleswiper" data-url="{{item.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 icon-shoucang {{isCollect==true?'active':''}}"></text>

      <text>收藏</text>

      <!-- <button open-type="contact"></button> -->

    </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-kefu"></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/cart/cart" 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>

2.detail.js

// pages/detail/detail.js

Page({

  data: {

    goodsData:{},

    isCollect:false

  },

  goodsInfo:{},

  onLoad(options) {

    let that = this

    // console.log(options)

    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)

        console.log(that.goodsInfo+'adbada')

        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.goods_id)

    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.setStorageSync('collect', collect)

    this.setData({

      isCollect

    })

  } 

})

3.detail.wxss

page{

  padding-bottom: 90rpx;

}

.details_swiper{

  height: 48vw;

  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;

  text-overflow: ellipsis;

  display: -webkit-box;

  overflow: hidden;

  -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(82, 79, 79);

  font-size: 30rpx;

}

.right .active{

  color: red;

}

.divider{

  margin-top: 10rpx;

  padding-left: 20rpx;

  line-height: 90rpx;

  height: 90rpx;

  font-size: 40rpx;

  font-weight: 600;

  color: red;

  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: 25rpx;

  background-color: #fff;

  border-top: solid 1rpx #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(240, 150, 32);

  color: rgb(255, 255, 255);

}

.btn_buy{

  flex: 2;

  text-align: center;

  line-height: 90rpx;

  background-color: red;

  color: #fff;

}

.floor_item button{

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  opacity: 0;

}