小程序实现购物车完整版

.order {height: 238rpx;background-color: #fefeff;margin: 27rpx;border-radius: 4rpx;display: flex;align-items: center;}

.xuanze {width: 40rpx;height: 40rpx;/* background-color: darkgoldenrod; */ border-radius: 50%;margin: 0 11rpx;}

.xuanze image {width: 100%;height: 100%;display: block;border-radius: 50%;}

.order_img {width: 180rpx;height: 180rpx;}

.order_img image {width: 100%;height: 100%;display: block;}

.order_text {margin-left: 20rpx;width: 58%;height: 180rpx;}

.text_top {display: flex;justify-content: space-between;align-items: center;}

.title {width: 70%;font-size: 28rpx;color: #4b5248;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;}

.detel {width: 30rpx;height: 30rpx;}

.detel image {width: 100%;height: 100%;display: block;}

.size {font-size: 24rpx;color: #a8ada6;}

.text_bottom {display: flex;margin-top: 50rpx;align-items: center;justify-content: space-between;}

.money {font-size: 30rpx;color: #a5937f;}

.number {display: flex;justify-content: space-around;align-items: center;width: 170rpx;}

.reduce {width: 46rpx;height: 46rpx;}

.reduce image {width: 100%;height: 100%;display: block;}

.numb {font-size: 30rpx;color: #a5937f;}

.add {width: 46rpx;height: 46rpx;}

.add image {width: 100%;height: 100%;display: block;}

/*购买按钮*/

.buy {height: 180rpx;width: 696rpx;position: fixed;left: 27rpx;bottom: 41rpx;background-color: #555555f3;border-radius: 4rpx;}

.buy_top {border-bottom: 1px solid rgb(98, 98, 99);height: 75rpx;display: flex;align-items: center;justify-content: space-between;}

.top_left {display: flex;align-items: center;}

.left_img {width: 37rpx;height: 37rpx;margin: 11rpx;}

.left_img image {width: 100%;height: 100%;display: block;}

.left_name {font-size: 24rpx;color: #fefeff;margin-right: 29rpx;}

.buy_bottom {display: flex;height: 104rpx;justify-content: space-between;align-items: center;padding: 0rpx 30rpx 0rpx 12rpx;}

.buy_left {font-size: 26rpx;color: #fff;}

.buy_right {display: flex;align-items: center;}

/*** 页面的初始数据*/ data: {hasList: true, //默认展示列表数据//商品列表数据list: [{id: 1,title: '园艺大师抗皱精华露',image: '/images/serch/2.png',pro_name: "30ml",num: 1,price: 180,selected: true},{id: 2,title: '伊芙琳玫瑰护手霜',image: '/images/serch/1.png',pro_name: "25g",num: 1,price: 62,selected: true},{id: 2,title: '燕麦山羊乳舒缓护手霜',image: '/images/serch/2.png',pro_name: "75ml",num: 1,price: 175,selected: true}],//金额totalPrice: 0, //总价，初始为0//全选状态selectAllStatus: true, // 全选状态，默认全选},

/*** 生命周期函数--监听页面加载*/ onLoad: function(options) {

},

/*** 生命周期函数--监听页面显示*/ onShow: function() {wx.showToast({title: '加载中',icon: "loading",duration: 1000})// 价格方法this.count_price();

},

/** 当前商品选中事件 */ selectList(e) {var that = this;//获取选中的 radio索引var index = e.currentTarget.dataset.index;//获取到商品列表数据var list = that.data.list;//默认全选that.data.selectAllStatus = true;//循环数组数据，判断--选中/未选中[selected]list[index].selected = !list[index].selected;//如果数组数据全部为selected[true],全选for (var i = list.length - 1; i >= 0; i--) {if (!list[i].selected) {that.data.selectAllStatus = false;break;}}// 重新渲染数据that.setData({list: list,selectAllStatus: that.data.selectAllStatus})// 调用计算金额方法that.count_price();},

// 删除deletes(e) {var that = this;// 获取索引const index = e.currentTarget.dataset.index;// 获取商品列表数据let list = this.data.list;wx.showModal({title: '提示',content: '确认删除吗',success: function(res) {if (res.confirm) {// 删除索引从1 list.splice(index, 1);// 页面渲染数据that.setData({list: list});// 如果数据为空if (!list.length) {that.setData({hasList: false});} else {// 调用金额渲染数据that.count_price();}} else {console.log(res);}},fail: function(res) {console.log(res);}})},

/** 购物车全选事件 */ selectAll(e) {// 全选ICON默认选中let selectAllStatus = this.data.selectAllStatus;// true ----- false selectAllStatus = !selectAllStatus;// 获取商品数据let list = this.data.list;// 循环遍历判断列表中的数据是否选中for (let i = 0; i < list.length; i++) {list[i].selected = selectAllStatus;}// 页面重新渲染this.setData({selectAllStatus: selectAllStatus,list: list});// 计算金额方法this.count_price();},

/** 绑定加数量事件 */ btn_add(e) {// 获取点击的索引const index = e.currentTarget.dataset.index;// 获取商品数据let list = this.data.list;// 获取商品数量let num = list[index].num;// 点击递增num = num + 1;list[index].num = num;// 重新渲染 ---显示新的数量this.setData({list: list});// 计算金额方法this.count_price();},

/*** 绑定减数量事件*/ btn_minus(e) {// // 获取点击的索引const index = e.currentTarget.dataset.index;// const obj = e.currentTarget.dataset.obj;// console.log(obj);// 获取商品数据let list = this.data.list;// 获取商品数量let num = list[index].num;// 判断num小于等于1 return; 点击无效if (num <= 1) {return false;}// else num大于1 点击减按钮 数量--num = num - 1;list[index].num = num;// 渲染页面this.setData({list: list});// 调用计算金额方法this.count_price();},

// 提交订单btn_submit_order() {var that = this;console.log(that.data.totalPrice);

// 调起支付// wx.requestPayment(// {// 'timeStamp': '',// 'nonceStr': '',// 'package': '',// 'signType': 'MD5',// 'paySign': '',// 'success': function (res) { },// 'fail': function (res) { },// 'complete': function (res) { }// }) wx.showModal({title: '提示',content: '合计金额-' + that.data.totalPrice + "暂未开发",})},

/*** 计算总价*/ count_price() {// 获取商品列表数据let list = this.data.list;// 声明一个变量接收数组列表price let total = 0;// 循环列表得到每个数据for (let i = 0; i < list.length; i++) {// 判断选中计算价格if (list[i].selected) {// 所有价格加起来 count_money total += list[i].num * list[i].price;}}// 最后赋值到data中渲染到页面this.setData({list: list,totalPrice: total.toFixed(2)});},