小程序购物车[实现加减计算金额以及数量]

<!--WXML --><view class="content_box" wx:for="{{arr}}" wx:key="{{key}}"><!--中部盒子 --><view class="view_ce"><!--图片盒子 --><view class="ProductIco_box"><image class="ProductIco" src="{{item.img}}"></image></view><!--内容 --><view class="view_content"><view class='view_title'>{{item.service_name}} </view><view class="view_fl"><text>¥ {{item.price}}</text><!--价格和按钮 --><view class="view_btn_box"><!--产品数量不为 0 --><view class="view_btn" wx:if="{{item.state == 1}}"><view class="view_img_left" bindtap='numminus' data-index="{{index}}"><image src="../../image/-@2x.png"></image></view><!-- <view class="view_text_center"></view> --><input class="view_text_center" disabled='disabled' value="{{item.num}}" bindinput='input_num' data-index="{{index}}"></input><view class="view_img_right" bindtap='numadd' data-index="{{index}}"><image src="../../image/+@2x.png"></image></view></view><!--产品数量为0 --><view class="view_add" wx:if="{{item.state == 0}}"><view class="view_img_add" bindtap='showadd' data-index="{{index}}"><image src="../../image/+@2x.png"></image></view></view></view></view></view><!--删除按钮 --></view></view><view class='buy_btn_box'><view class="collect_bottom"><view class="collect_right"><text class="collect_one">共{{add_car_num}}件商品</text><text class="collect_two" style='padding-left:20rpx;'>¥ {{price}}</text></view><text class='buy_btn'>提交订单</text></view></view><!--WXSS-->.ProductIco_box {width: 130rpx;height: 130rpx;border-radius: 5px;border: 1rpx solid #ececec;margin-right: 18rpx;padding-left:30rpx;float: left;}.ProductIco {width: 100%;height: 100%;border-radius: 5px;}.view_ce {width: 100%;height: 130rpx;position: relative;padding-top: 20rpx;padding-bottom: 30rpx;/* background: red; */border-bottom: 1rpx solid #ececec;}.content_box_center {width: 100%;padding: 0rpx 20rpx 30rpx 20rpx;padding-top: 20rpx;/* margin-bottom: 30rpx; */height: 182rpx;z-index: 2;background: #fff;position: absolute;left: 0;top: 0;box-sizing: border-box;border-bottom: 1rpx solid #ececec;}.view_content {float: left;width: 556rpx;}.view_title {position: relative;display: inline-block;top: 15rpx;width: 556rpx;font-size: 28rpx;color: #393939;}.view_fl>text {position: relative;top: 20rpx;font-size: 30rpx;color: #2a2a2a;margin-right: 18rpx;}.view_btn {width: 150rpx;height: 44rpx;float: right;font-size: 22rpx;color: #898989;line-height: 44rpx;/* display: none; *//* margin-bottom: 5rpx; */}.view_text_center, .view_img_left, .view_img_right {position: relative;float: left;}.view_img_left, .view_img_right {width: 44rpx;height: 44rpx;}.view_text_center {width: 58rpx;height: 44rpx;text-align: center;line-height: 44rpx;font-size: 22rpx;color: #898989;}.view_btn image {width: 100%;height: 100%;}.view_add {width: 44rpx;height: 44rpx;float: right;font-size: 22rpx;color: #898989;line-height: 44rpx;/* margin-bottom: 5rpx; */}.view_img_add {width: 44rpx;height: 44rpx;}.view_add image {width: 100%;height: 100%;}.delete_btn {position: absolute;right: 0;top: 0;font-size: 32rpx;background: #ff3b30;width: 134rpx;height: 100%;text-align: center;line-height: 175rpx;/* border-bottom: 1px solid #ff3b30; */color: #fff;z-index: 1;}.collect_right {position: absolute;width: 350rpx;height: 90rpx;left: 20rpx;color: #fff;font-size: 30rpx;}.buy_btn{position: absolute;width: 200rpx;height: 90rpx;line-height: 90rpx;right: 0rpx;font-size: 30rpx;background-color:#f55212;}.buy_btn_box {position: absolute;bottom: 0rpx;color: #fff;width: 100%;height: 90rpx;line-height: 90rpx;text-align: center;background-color: #323232;}.collect_big_box {width: 100%;height: 100%;/* position: relative; */}<!--JS-->Page({/*** 页面的初始数据*/data: {arr: '',//存储请求回来的数组ini: 0,uhide: '',arr:[{ img: "/uploads/tu/09/9999/7960b0cb2f.jpg", price: 15, state: 0, num: 0, service_name: "老五", },{ img: "/uploads/tu/09/9999/7960b0cb2f.jpg", price: 12.99, state: 0, num: 0, service_name: "Can I Help You", },{ img: "/uploads/tu/09/9999/7960b0cb2f.jpg", price: 10, state: 0, num: 0, service_name: "Can I Help You", }],add_car_num: 0,//控制是否初次进入界面price: '0.00'//价钱},// 滚动到底部lower: function () {console.log("我到了底部")},//数量加函数numadd: function (e) {var _this = this;const index = e.currentTarget.dataset.index;console.log(index)let carts = this.data.arr;let num = carts[index].num;//数量num = num + 1;carts[index].num = num;this.setData({arr: carts});var sum = 0;for (var i = 0; i < carts.length; i++) {var QC = _this.data.arr[i].num;sum += parseFloat(QC);}// console.log(sum);var price = 0;if (sum > 0) {for (var i = 0; i < carts.length; i++) {var QB = _this.data.arr[i].price;var QR = _this.data.arr[i].num;price += QB * QR;}}console.log(price.toFixed(2))this.setData({add_car_num: sum,price: price.toFixed(2)})},//数量减函数numminus: function (e) {const index = e.currentTarget.dataset.index;// console.log(index)let carts = this.data.arr;// console.log(carts[index].num)let _this = this;let num = carts[index].num;if (num <= 1) {const index = e.currentTarget.dataset.index;let carts = this.data.arr;let state = carts[index].state;//是否初次进入状态state = 0;carts[index].state = state;carts[index].num = 0;console.log(carts[index].num)this.setData({arr: carts,});} else {num = num - 1;carts[index].num = num;this.setData({arr: carts,});}var sum = 0;for (var i = 0; i < carts.length; i++) {var QC = _this.data.arr[i].num;sum += parseFloat(QC);}if (sum <= 0) {this.setData({ico_num: 0});} else {this.setData({ico_num: 1});}var price = 0;if (sum > 0) {for (var i = 0; i < carts.length; i++) {var QB = _this.data.arr[i].price;var QR = _this.data.arr[i].num;price += QB * QR;}}this.setData({add_car_num: sum,price: price.toFixed(2)});},// 产品数量为零时方法showadd: function (e) {var _this = this;const index = e.currentTarget.dataset.index;// console.log(index)let carts = this.data.arr;// console.log(carts[index].state)let num = carts[index].num;let state = carts[index].state;state = 1;carts[index].state = state;carts[index].num = 1;var sum = 0;for (var i = 0; i < carts.length; i++) {var QC = _this.data.arr[i].num;sum += parseFloat(QC);}if (sum <= 0) {this.setData({ico_num: 0});} else {this.setData({ico_num: 1});}var price = 0;if (sum > 0) {for (var i = 0; i < carts.length; i++) {var QB = _this.data.arr[i].price;var QR = _this.data.arr[i].num;price += QB * QR;}}this.setData({arr: carts,add_car_num: sum,price: price.toFixed(2)});},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {var that = this;// wx.request({// method:"post",// url: '',// data:{id:1},// success: function (options) {// console.log(options)// that.setData({// arr: options.data.data.datas.service// })// }// })},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},})<!--如果觉得对你有帮助,请给个赞 谢谢-->