.jpg "xyu"){kind=avatar}
// page/component/details/details.js
Page({
data: {},
onLoad: function (options) {
var post_content = [
{
id: 0,
image: ‘http://gzwrd168-1251553776.coscd.myqcloud.com/gzwrd/gg688.png’,
title: ‘野生葛根植物饮品 6听礼盒装’,
price: 68.00,
stock: ‘有货’,
detail: ‘野生葛根原料含12%的黄酮类化合物，如葛根素、大豆黄酮苷、花生素等营养成分，含人体必须氨基酸、铁、钙、铜、硒等矿物质，是老少皆宜的名贵滋补品，有“亚洲人参”之美誉。可调理肠胃、解酒护肝、降三高、丰胸美颜、提高免疫力等保健功效。’,
parameter: ‘配料：纯净水、葛根、食品添加剂（木糖醇、脂肪酸脂、三聚磷酸钠、碳酸氢钠、安赛蜜、三氯蔗糖）；净含量：246ml×6听礼盒装；保质期：18 个月；生产日期：见罐底；贮存方式：阴凉、干燥、避光、常温下贮存；饮用方法：直接饮用、冷藏或加热风味更佳； 饮用前请摇晃均匀；食品生产执行标准：Q/WRD 0001S；食品生产许可证号：SC10652052110153；公司地址：贵州省 黔东南州 天下苗族第一县•台江；原料种植基地：贵州省黔东南苗族侗族自治州；台江县南宫镇大田基地；商家电话：0855-5473683’,
service: ‘支持退货’
},
{
id: 1,
image: ‘http://gzwrd168-1251553776.coscd.myqcloud.com/gzwrd/gg688.png’,
title: ‘农家紫苏植物蛋白饮品 6听礼盒装’,
price: 68.00,
stock: ‘有货’,
detail: ‘野生葛根原料含12%的黄酮类化合物，如葛根素、大豆黄酮苷、花生素等营养成分，含人体必须氨基酸、铁、钙、铜、硒等矿物质，是老少皆宜的名贵滋补品，有“亚洲人参”之美誉。可调理肠胃、解酒护肝、降三高、丰胸美颜、提高免疫力等保健功效。’,
parameter: ‘配料：纯净水、葛根、食品添加剂（木糖醇、脂肪酸脂、三聚磷酸钠、碳酸氢钠、安赛蜜、三氯蔗糖）；净含量：246ml×6听礼盒装；保质期：18 个月；生产日期：见罐底；贮存方式：阴凉、干燥、避光、常温下贮存；饮用方法：直接饮用、冷藏或加热风味更佳； 饮用前请摇晃均匀；食品生产执行标准：Q/WRD 0001S；食品生产许可证号：SC10652052110153；公司地址：贵州省 黔东南州 天下苗族第一县•台江；原料种植基地：贵州省黔东南苗族侗族自治州；台江县南宫镇大田基地；商家电话：0855-5473683’,
service: ‘支持退货’
}
]
this.setData({
posts_key: postsData.postList
})
},
num: 1,
totalNum: 0,
hasCarts: false,
curIndex: 0,
show: false,
scaleCart: false
},
addCount(){
let num = this.data.num;
num++;
this.setData({
num: num
})
},
addToCart() {
const self = this;
const num = this.data.num;
let total = this.data.totalNum;
self.setData({
show: true
})
setTimeout(function () {
self.setData({
show: false,
scaleCart: true
})
setTimeout(function () {
self.setData({
scaleCart: false,
hasCarts: true,
totalNum: num + total
})
}, 200)
}, 300)
},
bindTap(e) {
const index = parseInt(e.currentTarget.dataset.index);
this.setData({
curIndex: index
})
}
})
以下为wxml
<block wx:for="{{posts_key}}" >
<view class=“main”>
<view class=“goods-box”>
<image src="{{goods.image}}" class=“goods-thumb”></image>
<navigator open-type=“switchTab” url="…/cart/cart">
<view class=“carts-icon {{scaleCart?‘on’:’’}}”>
<image src=“http://gzwrd168-1251553776.coscd.myqcloud.com/photos/cart22.png”></image>
<text class=“carts-icon-num” wx:if="{{hasCarts}}">{{totalNum}}</text>
</view>
</navigator>
<view class=“goods-operation”>
<text class=“goods-operation-num”>数量 {{num}}</text>
<text class=“goods-operation-add” bindtap=“addCount”>+</text>
<text class=“goods-to-cart” bindtap=“addToCart”>加入购物车</text>
<image src=“http://gzwrd168-1251553776.coscd.myqcloud.com/photos/cart11.png” class=“goods-cart-img” bindtap=“addToCart”></image>
</view>
<image wx:if="{{show}}" src=“http://gzwrd168-1251553776.coscd.myqcloud.com/photos/cart11.png” class=“to-carts-icon”></image>
<view class=“goods-stock”>{{goods.stock}}</view>
<view class=“goods-title”>{{goods.title}}</view>
<view class=“goods-price”>￥ {{goods.price}}</view>
</view>
<view class=“goods-tab-box”>
<view class=“goods-tab-nav {{curIndex === 0 ?‘on’:’’}}” bindtap=“bindTap” data-index=“0”>商品详情</view>
<view class=“goods-tab-nav {{curIndex === 1 ?‘on’:’’}}” bindtap=“bindTap” data-index=“1”>产品参数</view>
<view class=“goods-tab-nav {{curIndex === 2 ?‘on’:’’}}” bindtap=“bindTap” data-index=“2”>售后保障</view>
<view class=“goods-content”>
<view wx:if="{{curIndex === 0}}">{{goods.detail}}</view>
<view wx:if="{{curIndex === 1}}">{{goods.parameter}}</view>
<view wx:if="{{curIndex === 2}}">{{goods.service}}</view>
</view>
</view>
</view>
</block>
强力驱动
