公司小程序完成后,产品突然需要增加一个新功能增项,结果其实就是一个购物车类似的功能
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"
})
}
},