// pages/shopcar/shopcar.js
Page({
data: {
carts:// 购物车内商品数据
[
{ id: 1, title: '华为 HUAWEI P10 全网通 4GB+64G 曜石黑 移动联通电信4GB手机', num: 4, price: 4500, selected: true ,url:"//img13.360buyimg.com/n7/jfs/t1/230981/8/20635/66984/666c35b2F95ad1b68/8d6934082a2560b7.jpg"},
{ id: 2, title: 'Apple苹果 全网通 4GB+64G 曜石黑 移动联通电信4GB手机', num: 1, price: 6800, selected: true ,url:"//img10.360buyimg.com/n7/jfs/t1/234248/16/5432/64755/656ec63eF2e9ab3e9/780764de97d4c7be.jpg"},
{ id: 3, title: '小米 全网通 4GB+64G 曜石黑 移动联通电信4GB手机', num: 2, price: 4800, selected: true ,url:"//img12.360buyimg.com/n7/jfs/t1/235244/16/20663/77823/6671432bF61e47f63/af43ca9d8856f310.jpg"}
],
// hasList: tue, // 列表是否有数据
totalPrice: 0, // 总价，初始为0
selectAll: true, // 全选状态，默认不全选
selectNum: 0 //选中的件数
}
//计算总价格
, totlePrice: function () {
let carts = this.data.carts;
let total = 0;
let num = 0;
for (let i = 0; i < carts.length; i++) { // 循环列表得到每个数据
if (carts[i].selected) { // 判断选中才会计算价格
total += carts[i].num * carts[i].price;
num += carts[i].num;
}
}
this.setData({
selectNum: num,
totalPrice: total.toFixed(2)
});
}
/**
* 生命周期函数--监听页面显示
*/
, onShow: function () {
this.totlePrice()
}
//选中反选
, selected: function (e) {
const index = e.currentTarget.dataset.num;
let carts = this.data.carts;
let selectAll = this.data.selectAll;
let count = 0;
carts[index].selected = !carts[index].selected;
//判断全选状态
for (let i = 0; i < carts.length; i++) {
if (carts[i].selected == true) {
count++;
}
}
if (count == 3) {
selectAll = true;
} else {
selectAll = false;
}
this.setData({
carts: carts,
selectAll: selectAll
});
this.totlePrice();
}
//全选
, selectedAll: function () {
let selectAll = this.data.selectAll; // 是否全选状态
selectAll = !selectAll;
let carts = this.data.carts;
for (let i = 0; i < carts.length; i++) {
carts[i].selected = selectAll; // 改变所有商品状态
}
this.setData({
selectAll: selectAll,
carts: carts
});
this.totlePrice(); // 获取总价
}
//增加
,addNum : function(e){
const index = e.currentTarget.dataset.num;
let carts = this.data.carts;
let num = carts[index].num;
num = num + 1;
carts[index].num = num;
this.setData({
carts: carts
});
this.totlePrice();
}
//减少
,subNum : function(e){
const index = e.currentTarget.dataset.num;
let carts = this.data.carts;
let num = carts[index].num;
if (num <= 1) {
return false;
}
num = num - 1;
carts[index].num = num;
this.setData({
carts: carts
});
this.totlePrice();
},
gotoOrders(){
getApp().globalData.someData = totalPrice;
wx.switchTab({
url: `/pages/orders/orders`,
})
},
})
<!--pages/detail/detail.wxml-->
<view class="list" wx:for="{{carts}}" wx:key="*this">
<view class="choose">
<view class="option {{item.selected == true?'selected':'selected1'}}" data-num="{{index}}" bindtap="selected" ></view>
</view>
<view class="imgages">
<image class="navimg" src="{{item.url}}"></image>
</view>
<view class="info">
<text class="title" >{{item.title}}</text>
<text class="specify">重量：0.506kg; 规格：曜石黑,64GB</text>
<text class="charge">￥<text>{{item.price}}</text></text>
<view class="buy-num">
<text class="add" bindtap="addNum" data-num="{{index}}">+</text>
<text class="goodsNum">{{item.num}}</text>
<text class="sub" bindtap="subNum" data-num="{{index}}">-</text>
</view>
</view>
</view>
<!--底部-->
<view class="footer">
<view class="allchoice choose">
<view class="option {{selectAll == true?'selectedall':'selected1'}}" bindtap="selectedAll"></view>全选
</view>
<view class="gotonext" bind:tap="gotoOrders">结算({{selectNum}}件)</view>
<view class="total">总计:
<text class="money">￥{{totalPrice}}</text>
<text class="other">不含运费,已优惠50.00</text>
</view>
</view>
// pages/orders/orders.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
let totalPrice = getApp().globalData.someData;
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})
<!--pages/orders/orders.wxml-->
<view class="payprice">
<text>需支付金额</text>
<view>￥{{totalPrice}}</view>
</view>
为什么图片中的价格为定义
