摘要：商品詳情頁(yè)通過(guò)頁(yè)面邏輯.js文件獲取商品列表傳過(guò)來(lái)的商品id，通過(guò)接口傳入當(dāng)前商品id來(lái)獲取該商品的詳細(xì)信息，最后通過(guò)數(shù)據(jù)綁定將商品詳細(xì)信息動(dòng)態(tài)綁定到商品詳情頁(yè)面結(jié)構(gòu).wxml文件。商品詳情頁(yè)頂部滑塊圖片點(diǎn)擊全屏預(yù)覽的功能可以使用API接口wx.previewImage來(lái)實(shí)現(xiàn)，該接口使用時(shí)注意兩個(gè)屬性的用法：current表示當(dāng)前顯示圖片的http鏈接，urls表示需要預(yù)覽的圖片http鏈接列表。

商品詳情頁(yè)通過(guò)頁(yè)面邏輯.js文件獲取商品列表傳過(guò)來(lái)的商品id，通過(guò)接口傳入當(dāng)前商品id來(lái)獲取該商品的詳細(xì)信息，最后通過(guò)數(shù)據(jù)綁定將商品詳細(xì)信息動(dòng)態(tài)綁定到商品詳情頁(yè)面結(jié)構(gòu).wxml文件。商品詳情頁(yè)頂部滑塊圖片點(diǎn)擊全屏預(yù)覽的功能可以使用API接口wx.previewImage來(lái)實(shí)現(xiàn)，該接口使用時(shí)注意兩個(gè)屬性的用法：current表示當(dāng)前顯示圖片的http鏈接，urls表示需要預(yù)覽的圖片http鏈接列表。點(diǎn)擊圖片全屏預(yù)覽時(shí)只有將當(dāng)前顯示圖片的http鏈接傳入current，才會(huì)顯示與點(diǎn)擊顯示的圖片一致，否則將總是默認(rèn)顯示圖片鏈接列表urls里面的第一張圖片。加入購(gòu)物車和立即購(gòu)買要先判斷用戶是否已登陸，未登錄則轉(zhuǎn)到會(huì)員首頁(yè)去登陸。

js文件

// pages/goods/details.js
const app = getApp();
var com = require("../../utils/util.js");
var img = [];
Page({
  /**
   * 頁(yè)面的初始數(shù)據(jù)
   */
  data: {
    list: []
  },
  /**
   * 生命周期函數(shù)--監(jiān)聽頁(yè)面加載
   */
  onLoad: function (e) {
    com.post('Api/Home/shop_details', { id: e.id }, "setContent", this);
  },
  setContent: function (e) {
    img = e.imgs;
    this.setData({
      list: e
    });
  },
  /**
   * 圖片全屏預(yù)覽
   */
  previewImage: function (e) {
    wx.previewImage({
      urls: img, //需要預(yù)覽的圖片http鏈接列表
      current: e.currentTarget.dataset.src //當(dāng)前顯示圖片的http鏈接
    })
  },
  /**
   * 加入購(gòu)物車(這里面要先判斷用戶是否已登陸，未登錄則轉(zhuǎn)到會(huì)員首頁(yè)去登陸)
   */
  goCar : function (e) {
    if (app.globalData.userInfo) {
      com.post('Api/Home/add_car', { id: e.currentTarget.dataset.id, uid: app.globalData.userInfo.uid }, "setCar", this);
    } else {
      wx.switchTab({
        url: '../my/index'
      })
    }
  },
  setCar: function (e) {
    if(e != 0){
      wx.showToast({
        title: '加入購(gòu)物車成功！',
        icon: 'success',
        duration: 2000
      })
    }else{
      wx.showToast({
        title: '加入購(gòu)物車失??！',
        icon: 'none',
        duration: 2000
      })
    }
  },
  /**
   * 跳轉(zhuǎn)到訂單頁(yè)面(這里面要先判斷用戶是否已登陸，未登錄則轉(zhuǎn)到會(huì)員首頁(yè)去登陸)
   */
  goOrder : function(e){
    if (app.globalData.userInfo) {
      wx.navigateTo({
        url: '../shop/order?s=details&id=' + e.currentTarget.dataset.id
      })
    }else{
      wx.switchTab({
        url: '../my/index'
      })
    }
  }
})

wxml文件

<!--pages/goods/details.wxml-->
<view class="rele-wrap">
  <view class="has-bottom">
    <swiper class="banner" indicator-dots="true"
    autoplay="true" interval="5000" duration="1000" indicator-color="#fff" indicator-active-color="#000">
      <block wx:for="{{list.imgs}}" wx:key="">
        <swiper-item>
          <image src="{{item}}" class="vi_img" bindtap="previewImage" data-src="{{item}}"/>
        </swiper-item>
      </block>
    </swiper>
    <view class="idle-panel">
        <view class="p1">{{list.title}}</view>
        <view class="p2"><text class="span">{{list.price}}元</text></view>
    </view>
    <view class="sale-panel">
        <view class="tit">商品詳情</view>
        <view class="all open">{{list.desc}}</view>
    </view>
  </view>
  <div class="fui-navbar bottom-buttons">
    <button class="btn btn_left" bindtap="goCar" data-id="{{list.id}}">加入購(gòu)物車</button>
    <button class="btn btn_right" bindtap="goOrder" data-id="{{list.id}}">立即購(gòu)買</button>
  </div>
</view>

批改老師：天蓬老師批改時(shí)間：2018-12-31 16:32:47
老師總結(jié)：你總結(jié)的對(duì), 所有的操作,其實(shí)都是有一個(gè)前提的, 就是用戶必須先登錄