小程序购物车

公司小程序完成后,产品突然需要增加一个新功能增项,结果其实就是一个购物车类似的功能 

1、首先需要获取后台的数据  

data: {
		open:false,
		animation_box:false,
		animationData:{},  //判断弹出上下滑动的
		inputOpen:false,  //控制修改金额的弹窗
		id:'' ,//服务id
		service:''  ,//服务数据
		charging_standard:'' ,//推送增项数据
		chooseId:''  ,//判断是否选中推送增项 和id相等则选中
		addService:[],//自定义增项数据
		selectService:[],//选中的增项
		inputPrice:'',//输入金额
		editPriceIndex:'',//编辑价格索引
		chooseAddService:[],//数量
		TotalPrice:'0',//总金额
		manageOpen:false, //显示是否展示删除选择的增项
		allselect:false,//判断全选
		choseIndex:'-1',//判断是否有选择删除的增项
		project:'',    //自定义增项带过来的数据
		difference_id:''//增项记录id
	},
//添加增项页面数据  这是自己的封装接口
	differenceData:function(){
		var that =this;
		
		let data={  //数据
			uid:wx.getStorageSync('uid'),
			order_id:that.data.id,
		}
		requestAjax.requestAjax('接口',data,'正在加载',function(res){
			var listItem = res.data.charging_standard;  //返回的数组对象
			listItem.forEach((item)=>{    //y由于后台没有返回check值 所以自己添加了一个isSelected 为了判断选择和不选中false 不选中
				item.isSelected = false;  
				item.number = "1";      //数量
				item.editPrice = item.price;  //自己定义的价格 
			})
			that.setData({
				charging_standard:listItem  //赋值给需要展示的数据数组
			})
		},function(){
			
		})
		
	},

2、第二步  由于我们有推送数据,需要在数据里面选择在添加新的数组中去,所以需要判断是否有选中,把选中的服务添加到需要展示的数据中去,如果里面存在了,就不能再添加了,没有处理数量增加的,自己处理是去重

//选择推送服务
	chooseService:function(e){
		var that = this;
		var index = e.currentTarget.dataset.index;  // 选中的索引
		var listItem = that.data.charging_standard; //推送增项数据
		var selectService = that.data.selectService; //已选择的商品数组
		var item = listItem[index];
		item.isSelected = !item.isSelected;
		that.setData({
			charging_standard:listItem,
		});
		if (listItem[index].isSelected){ //如果选中了, 就放到一选择的商品数组里
			for (var i = 0; i < listItem.length; i++) {
				if (listItem[i] == listItem[index]) {
					selectService.push(listItem[index])
				}
			}
		}else{  //取消选中就从已选择的商品数组里移除
			for (var i = 0; i < selectService.length; i++) {
				if(selectService[i].id == listItem[index].id){
					selectService.splice(i,1)
				}
			}
		}
		that.setData({
			selectService: selectService,
		});
		
	},
	//确认服务
	confirmAaditions:function(){
		let that = this;
		//需要判断选中的selectService里面是否已经存在了商品  如果存在则不再加入  如果不存在则加入进去
		//合并选中和已经展示的两个增项数组 去重
		let selectService = that.data.selectService;//页面推送总选中的增项数据
		let addService = that.data.addService;      //展示中的增项数据
		addService=addService.concat(selectService)  //合并两个数组
		that.unique(addService);  //展示数组中去重
	},
	//去重数组
	unique:function (arr) {
		var that = this;
	    if (!Array.isArray(arr)) {
	        console.log('type error!')
	        return
	    }
	    let res = []
	    for (let i = 0; i < arr.length; i++) {
	        if (res.indexOf(arr[i]) === -1) {   //-1则没选中
	            res.push(arr[i])
	        }
	    }
		res.forEach((item)=>{
			item.isSelected = false;   //把选中的服务全部状态重置为false
		})
		that.setData({
			addService:res,//把页面推送数据添加到自定义增项数据里面
			open:false,
		});
		that.additionsTotalPrice();  //计算总价
	},

第三、数量加减,总金额变化

//数量加
	addTap:function(e){
	    var that = this
		var addService = that.data.addService;
		var index = e.currentTarget.dataset.index;
		var number = addService[index].number;
	    number++;
		addService[index].number = number;
	    that.setData({
	    	addService: addService,
	    });
		that.additionsTotalPrice();
	},
//数量减
	reduceTap: function (e) {
		var that=this;
	    var addService = that.data.addService;
		var index = e.currentTarget.dataset.index;
		var number = addService[index].number;
		if (number >1) {
			number--;
			addService[index].number = number;
		} else{
			addService[index].number = 1;
		};
	 
	    that.setData({
			addService: addService,
	    });
		that.additionsTotalPrice();
	},
//增项总价格
	additionsTotalPrice:function(){
		let that = this;
		let TotalPrice = 0;
		for (var i = 0; i < this.data.addService.length; i++) {
			TotalPrice += that.data.addService[i].number * that.data.addService[i].editPrice
		};
		that.setData({
		   TotalPrice: TotalPrice.toFixed(2)
		})
	},

第四 删除想要删除的服务  单选和多选

// 全选
	select_all:function(){
	    let that = this;
	    that.setData({
	      allselect: !that.data.allselect
	    })
	    if (that.data.allselect){
			let arr = that.data.addService;
			let arr2 = [];
			for (let i = 0; i < arr.length; i++) {
				if (arr[i].isSelected == true) {
					arr2.push(arr[i]);
				}else{
					arr[i].isSelected = true;
					arr2.push(arr[i]);
				}
			}
			that.setData({
				addService: arr2,
				chooseAddService:arr2,
				choseIndex:'0'
			})
	    }
	},
	
	// 取消全选
	select_none:function(){
	    let that = this;
	    that.setData({
			allselect: !that.data.allselect
	    })
	    let arr = that.data.addService;
	    let arr2 = [];
	    for (let i = 0; i < arr.length; i++) {
	        arr[i].isSelected = false;
	        arr2.push(arr[i]);
	    }
	    that.setData({
			addService: arr2,
			chooseAddService:[],
			choseIndex:'-1'
	    })
	},
	
	// 删除
	deleteServiceTap:function(){
		/*
		删除选中的服务,在现有的服务中删除选中的,把剩下的服务重新赋给需要展示的数组
		*/
	    let that = this;
	    let arr = that.data.addService;  //原数组
		let choseIndex = that.data.choseIndex;
	    let arr2 = []; //存放没有选中的服务
		if(choseIndex >= 0){
			wx.showModal({
				title:"确认删除所选增项?",
				success: (res) => {
					if (res.confirm) {
						for(let i=0;i<arr.length;i++){
							if (arr[i].isSelected == false){
								arr2.push(arr[i]);
							}
						};
						if(arr2 ==''){
							that.data.allselect = false;  //全选为取消
						};
						that.setData({
							addService:arr2,
							chooseAddService:[],
							manageOpen:false,
							allselect:that.data.allselect,
							choseIndex:'-1'
						})
						that.additionsTotalPrice();  //计算总价
					}else if (res.cancel) {
						
					}
				}
			});
		}else{
			wx.showToast({
				title:"请选择要删除的增项服务",
				icon:"none"
			})
		}
	},

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

灵魂清零

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值