摘要：商品详情页通过页面逻辑.js文件获取商品列表传过来的商品id，通过接口传入当前商品id来获取该商品的详细信息，最后通过数据绑定将商品详细信息动态绑定到商品详情页面结构.wxml文件。商品详情页顶部滑块图片点击全屏预览的功能可以使用API接口wx.previewImage来实现，该接口使用时注意两个属性的用法：current表示当前显示图片的http链接，urls表示需要预览的图片http链接列表。
商品详情页通过页面逻辑.js文件获取商品列表传过来的商品id，通过接口传入当前商品id来获取该商品的详细信息，最后通过数据绑定将商品详细信息动态绑定到商品详情页面结构.wxml文件。商品详情页顶部滑块图片点击全屏预览的功能可以使用API接口wx.previewImage来实现，该接口使用时注意两个属性的用法：current表示当前显示图片的http链接，urls表示需要预览的图片http链接列表。点击图片全屏预览时只有将当前显示图片的http链接传入current，才会显示与点击显示的图片一致，否则将总是默认显示图片链接列表urls里面的第一张图片。加入购物车和立即购买要先判断用户是否已登陆，未登录则转到会员首页去登陆。
js文件
// pages/goods/details.js
const app = getApp();
var com = require("../../utils/util.js");
var img = [];
Page({
/**
* 页面的初始数据
*/
data: {
list: []
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (e) {
com.post('Api/Home/shop_details', { id: e.id }, "setContent", this);
},
setContent: function (e) {
img = e.imgs;
this.setData({
list: e
});
},
/**
* 图片全屏预览
*/
previewImage: function (e) {
wx.previewImage({
urls: img, //需要预览的图片http链接列表
current: e.currentTarget.dataset.src //当前显示图片的http链接
})
},
/**
* 加入购物车(这里面要先判断用户是否已登陆，未登录则转到会员首页去登陆)
*/
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: '加入购物车成功！',
icon: 'success',
duration: 2000
})
}else{
wx.showToast({
title: '加入购物车失败！',
icon: 'none',
duration: 2000
})
}
},
/**
* 跳转到订单页面(这里面要先判断用户是否已登陆，未登录则转到会员首页去登陆)
*/
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}}">加入购物车</button>
<button class="btn btn_right" bindtap="goOrder" data-id="{{list.id}}">立即购买</button>
</div>
</view>
批改老师：天蓬老师批改时间：2018-12-31 16:32:47
老师总结：你总结的对, 所有的操作,其实都是有一个前提的, 就是用户必须先登录
