高新公司网站建设电话,杭州企业网站搭建,做音乐网站建设的开发平台,抖音代运营谈判技巧像上面这样的#xff0c;使用form表单结构不太合理。官方文档中 wx.createSelectorQuery() 方法我这里总是打印不出值#xff0c;所以只好通过输入框的事件来做判断#xff0c;因为提交时#xff0c;上面所有的输入框都是要有值的#xff0c;也就意味着这些输入框都会使用…
像上面这样的使用form表单结构不太合理。官方文档中 wx.createSelectorQuery() 方法我这里总是打印不出值所以只好通过输入框的事件来做判断因为提交时上面所有的输入框都是要有值的也就意味着这些输入框都会使用到 input 事件。 思路 假设后台接口返回了表格中的数据我们在Page 下的 data 中存为 list: []。再定义一个变量 submitData 用来存放每条数据中输入框输入的数据和输入状态输入框是否有值。里面有多少个输入框就给多少个输入框设置一个变量变量值为 false 时表示输入框没有值。这里有两种类型所以每条数据要定义两个变量一个变量 isBottleNum 表示实收瓶数的输入框一个变量 isBoxNum 表示实收箱数的输入框。根据后台返回的表格数据有几条数据就给几条数据中插入 isBottleNum: false,isBoxNum: false 3. 提交时判断每条数据中isBottleNum,isBoxNum的值是否为 true都为 true 表示 每条数据的两个输入框中填写了值有 false 表示有某个输入框的值是 “” 空的。 wxml !-- 表格数据-- view classreal_detail gray_lineview classtrview classth序号/viewview classth商品名称/viewview classth规格/viewview classth实收瓶数/viewview classth实收箱数/view/view!-- 表格输入框数据。--!-- data-shopname最好传后台需要的每条数据的标识这里我用的商品名称做标识 --!-- data-input是用来判断点击的输入框是属于实收瓶数的还是实收箱数的 --view classtr wx:for{{list}} wx:keyindex view classtd{{index1}}/viewview classtd over data-text{{item.collectionSkuClassName}} bindtapshowText{{item.collectionSkuClassName}}/viewview classtd{{item.size/10}}/viewview classtdinput classnum_input typenumber data-collectionSkuId{{item.collectionSkuId}} data-input实收瓶数 data-index{{index}} bindinputgetReallNum//viewview classtdinput classnum_input typenumber data-collectionSkuId{{item.collectionSkuId}} data-input实收箱数 data-index{{index}} bindinputgetReallNum//view/view/view!-- 验证码提交 --view classsubmit_viewview classsubmit_btn_viewbutton classsubmit_btn bindtapsubmit提交/button/view/view 这里先看看我们后台返回来的数据格式和需要提交给他的参数格式
//后台返回的格式
res: [{collectionSkuClassName: XO,collectionSkuId: 1034786,hanghao: 1,labelType: null,limitedEdition: 0,newBoxSum: 1,oldBoxSum: 0,packNum: 6,planLabelNum: 6,planNum: 1,realCaseNum: 0,realLabelNum: 0,remark: null,shiji: 0,size: 700,sizeTemp: 70},{collectionSkuClassName: VSOP,collectionSkuId: 1034786,hanghao: 1,labelType: null,limitedEdition: 0,newBoxSum: 1,oldBoxSum: 0,packNum: 6,planLabelNum: 6,planNum: 1,realCaseNum: 0,realLabelNum: 0,remark: null,shiji: 0,size: 700,sizeTemp: 70},
]//提及数据时需要的格式
{noteId: 提交时该页面的参数,skuCountLis: [{caseNum: 输入的箱数,collectionSkuId: 每条数据的编号id,labelNum: 输入的瓶数}],token: string
} js JS中三个点...是什么鬼
/**
* submitData: [ //提交的参数
* {shopName: 商品名称,bottleNum: 实收瓶数, boxNum:实收箱数, isBottleNum: false, isBoxNum: false}
* {shopName: 商品名称,bottleNum: 实收瓶数, boxNum:实收箱数, isBottleNum: false, isBoxNum: false}
* ] //shopName: 每条数据的标识 isBottleNum、isBoxNum:分别表示实收瓶数、实收箱数的输入框是否填写了数据false表示未填写*/
Page({data: {list:[], //表格中的数据submitData: [], //存储实收情况中的输入框是否填写每个输入框的数据不是最终提交的数据但提交的数据来自它},// 生命周期函数--监听页面加载onLoad: function (options) {this.initData();},initData(){let that this;that.data.submitData [];//调用接口 request.post 是自己封装的请求方法request.post(接口名称, 参数).then((res){ that.setData({list: [...res]}); //表格数据//处理submitDataif( that.data.list that.data.list.length ! 0){that.data.list.map((item,index){ //先给实收瓶数、实收箱数两个属性。提交时判断这个属性是否为falsefalse表示还有输入框未填写that.data.submitData.push({isBottleNum: false,isBoxNum: false});}); } else {}})},//显示隐藏的文字showText(e){ const {text} e.target.dataset;wx.showToast({ title: text, icon: none, duration: 2000 });},//获取每个输入框的数据并且把输入框的数据传到submitData中getReallNum(e){//input输入框类型、collectionskuid当前项的标识、index当前项的索引、inputValue当前输入框的值const that this;let {input, collectionskuid,index} e.target.dataset;let inputValue e.detail.value;if(input 实收瓶数){if(inputValue !){//isBottleNum 判断实收瓶数是否填写id后台需要的标识bottleNum:填写的实收瓶数 that.data.submitData[index].id collectionskuid;that.data.submitData[index].isBottleNum true;that.data.submitData[index].bottleNum inputValue;} else {that.data.submitData[index].isBottleNum false;} } else if(input 实收箱数){ if(inputValue !){//isBoxNum 判断实收箱数是否填写id后台需要的标识boxNum:填写的实收瓶数 that.data.submitData[index].id collectionskuid;that.data.submitData[index].isBoxNum true;that.data.submitData[index].boxNum inputValue;} else {that.data.submitData[index].isBoxNum false;}} },//提交按钮事件处理this.data.submitData的数据submit: function() { var that this;let params [];//这里将上面自己给输入框定义的名称改成了需要传给后台的字段名可以在一开始就bottleNum等把定义成后台需要的字段名。that.data.submitData.map((item, index){if(item.isBottleNum item.isBoxNum){params.push({collectionSkuId: item.id, labelNum: item.bottleNum,caseNum: item.boxNum}); }});//判断输入框中是否填写 “0”let labelNumZero params.some(itemitem.labelNum0);let caseNumZero params.some(itemitem.caseNum0);if(labelNumZero || caseNumZero){wx.showToast({ title: 存在非法数据请仔细检查再提交, icon: none });return ;}//若长度表格中的长度则跳转到回执页面,不允许用户再返回到当前页面做修改if(params.length that.data.submitData.length){if( that.data.totalCaseNum ! that.data.billDetail.applyTotalBox ){wx.showModal({title: 提示,content: 实际总数与申请总数不相等确定提交吗,success: (res) {if (res.confirm) { //用户点击确定that.submitDetail(params); //调用接口} else if (res.cancel) {console.log(用户点击取消);}}})} else { that.submitDetail(params); //调用接口} } else { wx.showToast({ title: 数据未填写完整, icon: none });}},//调用提交数据的接口,params为参数[{collectionSkuId:,labelNum:1,caseNum:1},{}]submitDetail(params){}})