微信 小程序组件 加入购物车全套 one js
// pages/shop/shop.js
Page({
/**
* 页面的初始数据
*/
data: {
carts: [
{ teaname: '冠军乌龙茶-150g', image: '../../imgs/car/shopping_pic_1.png', num: '1', price: '1200.00', sum: '1200.0', selected: true, cid: 1001, },
{ teaname: '18年老茶-150g', image: '../../imgs/car/shopping_pic_1.png', num: '1', price: '600.00', sum: '600.0', selected: true, cid: 1001, },
],
// 实现bindSelectAll事件，改变全选状态
selectedAllStatus: false,
total: '',
// 页面打开时的短暂加载数据初始化1
newload: '',
minusStatuses: "disabled",
//判断购物车是否为空时的页面
hasList: true
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.sum();
// 页面打开时的短暂加载函数2
this.newload();
this.minusStatuses();
},
// -------------------------------------------------------------------------------
// 页面打开时的短暂加载函数3
newload: function () {
// wx.showModal({
// title: '提示',
// content: '这是一个模态弹窗',
// success: function (res) {
// if (res.confirm) {
// console.log('用户点击确定')
// } else if (res.cancel) {
// console.log('用户点击取消')
// }
// }
// })
wx.showLoading({
title: '加载中',
});
setTimeout(function () {
wx.hideLoading()
}, 1000);
// setTimeout(function () {
// this.setData({
// newload: 1,
// });
// this.data.newload=''
// }, 2000)
},
// -------------------------------------------------------------------------------
// setTimeout(function () {
// animation.translate(30).step()
// this.setData({
// animationData: animation.export()
// })
// }.bind(this), 5000)
// --------------------------------------------------------------------------------
// 减号被禁用时在初始化数据函数
minusStatuses:function(){
var minusStatuses=[];
var length = this.data.carts.length;
for (var i = 0; i < length;i++){
minusStatuses.push("disabled");
}
this.setData({
minusStatuses: minusStatuses
});
},
bindMinus: function (e) {
var index = parseInt(e.currentTarget.dataset.index);
var num = this.data.carts[index].num;
var sum = this.data.carts[index].sum;
var price = this.data.carts[index].price;
console.log(1);
// 如果只有1件了，就不允许再减了
if (num > 1) {
num--;
}
// 只有大于一件的时候，才能normal状态，否则disable状态
var minusStatus = (num <= 1 ? 'disabled' : 'normal');
// 购物车数据
var carts = this.data.carts;
carts[index].num = num;
carts[index].sum = (num * price).toFixed(1);
// 按钮可用状态
var minusStatuses = this.data.minusStatuses;
minusStatuses[index] = minusStatus;
// 将数值与状态写回
this.setData({
carts: carts,
minusStatuses: minusStatuses
});
this.sum();
},
bindPlus: function (e) {
var index = parseInt(e.currentTarget.dataset.index);
var num = this.data.carts[index].num;
var sum = this.data.carts[index].sum;
var price = this.data.carts[index].price;
// console.log(num);
// 自增
num++;
// 只有大于一件的时候，才能normal状态，否则disable状态
var minusStatus = (num <= 1) ? 'disabled' : 'normal';
// 购物车数据
var carts = this.data.carts;
carts[index].num = num;
carts[index].sum = (num * price).toFixed(1);
// 按钮可用状态
var minusStatuses = this.data.minusStatuses;
minusStatuses[index] = minusStatus;
// 将数值与状态写回
this.setData({
carts: carts,
minusStatuses: minusStatuses
});
this.sum();
},
bindManual:function(e){
// console.log(e.detail.value)
var cheValue = e.detail.value;
var index = parseInt(e.currentTarget.dataset.index);
var num = this.data.carts[index].num;
var sum = this.data.carts[index].sum;
var price = this.data.carts[index].price;
// console.log(num);
if (cheValue == '' || cheValue==0){
cheValue=1
}
// 只有大于一件的时候，才能normal状态，否则disable状态
var minusStatus = (cheValue <= 1) ? 'disabled' : 'normal';
// 购物车数据
var carts = this.data.carts;
carts[index].num = cheValue;
carts[index].sum = (cheValue * price).toFixed(1);
// 按钮可用状态
var minusStatuses = this.data.minusStatuses;
minusStatuses[index] = minusStatus;
// 将数值与状态写回
this.setData({
carts: carts,
minusStatuses: minusStatuses
});
this.sum();
},
// -----------------------------------------------------------------------------------------
// 单击复选框是否选中
bindCheckbox: function (e) {
/*绑定点击事件，将checkbox样式改变为选中与非选中*/
//拿到下标值，以在carts作遍历指示用
var index = parseInt(e.currentTarget.dataset.index);
//原始的icon状态
var selected = this.data.carts[index].selected;
var carts = this.data.carts;
// 对勾选状态取反
carts[index].selected = !selected;
// 写回经点击修改后的数组
this.setData({
carts: carts
});
this.sum();
},
// ---------------
// 全选复选框是否选中
bindSelectAll: function () {
// 环境中目前已选状态
var selectedAllStatus = this.data.selectedAllStatus;
// 取反操作
selectedAllStatus = !selectedAllStatus;
// 购物车数据，关键是处理selected值
var carts = this.data.carts;
// 遍历
for (var i = 0; i < carts.length; i++) {
carts[i].selected = selectedAllStatus;
}
this.setData({
selectedAllStatus: selectedAllStatus,
carts: carts
});
this.sum();
},
// -----------------------------------------------------------------------------------------
// 全选
bindCheckout: function () {
// 初始化toastStr字符串
var toastStr = 'cid:';
// 遍历取出已勾选的cid
for (var i = 0; i < this.data.carts.length; i++) {
if (this.data.carts[i].selected) {
toastStr += this.data.carts[i].cid;
toastStr += ' ';
}
}
//存回data
this.setData({
// toastHidden: false,
// toastStr: toastStr
});
},
bindToastChange: function () {
this.setData({
// toastHidden: true
});
},
// -----------------------------------------------------------------------------------------
// 计算总的金额
sum: function () {
var carts = this.data.carts;
// 计算总金额
var total = 0;
for (var i = 0; i < carts.length; i++) {
if (carts[i].selected) {
total += carts[i].num * carts[i].price;
}
}
total = total.toFixed(1);
// 写回经点击修改后的数组
this.setData({
carts: carts,
total: '￥' + total
});
},
// -----------------------------------------------------------
// 购物车删除
deleteList(e) {
const index = e.currentTarget.dataset.index;
let carts = this.data.carts;
carts.splice(index, 1); // 删除购物车列表里这个商品
this.setData({
carts: carts
});
if (!carts.length) { // 如果购物车为空
this.setData({
hasList: false // 修改标识为false，显示购物车为空页面
});
} else { // 如果不为空
this.sum(); // 重新计算总价格
}
},
// ------------------------------------------------------------------
// 回tabar中的首页
tobackHome: function () {
wx.switchTab({
url: '/pages/index/index'
})
},
// -----------------------------------------------------------
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})