1.wxml
<view style="width:630rpx;margin:0 auto;">
<form bindsubmit="formSubmit" report-submit="{{true}}">
<!--楼盘名称 -->
<view class='jg_input flex flexSb alignC'>
<view class='jg_input_l'>商户名称</view>
<view class='jg_input_r'>
<picker class='jg_input_picker' bindchange="jgPickerChange" value="{{jgIndex}}" range="{{jgArray}}" range-key="{{'name'}}">
<view class="picker">
{{jgIndex>=0?jgArray[jgIndex].name:"请选择"}}
</view>
</picker>
</view>
</view>
<block wx:for="{{jgBmXmSj}}">
<view class='jg_input flex flexSb alignC mt30'>
<view class='jg_input_l'>{{item.name}}</view>
<view class='jg_input_r'>
<!-- 2:报名序号;3:手机号码;4:姓名 -->
<block wx:if='{{item.id==2}}'>
<input maxlength="30" class='jg_input_in' name='baoMingbmxh'></input>
</block>
<block wx:if='{{item.id==3}}'>
<input maxlength="11" type='number' class='jg_input_in' name='baoMingsjhm'></input>
</block>
<block wx:if='{{item.id==4}}'>
<input maxlength="5" type='text' class='jg_input_in' name="baoMingxm"></input>
</block>
</view>
</view>
</block>
<!-- 立即查询 -->
<view class='jg_ljcx'>
<button class='jg_ljcx' formType="submit">立即查询</button>
</view>
</form>
</view>
2.wxss
.jg_input {
font-size: 34rpx;
}
.jg_input_l {
width: 140rpx;
color: #222;
}
.jg_input_r {
width: 470rpx;
height: 70rpx;
background-color: #e9e9e9;
border-radius: 4rpx;
-webkit-border-radius: 4rpx;
-moz-border-radius: 4rxp;
}
.mt30 {
margin-top: 30rpx;
}
.jg_input_in {
padding: 0 15rpx;
height: 70rpx;
line-height: 70rpx;
}
.jg_input_picker {
padding: 0 15rpx;
height: 70rpx;
line-height: 70rpx;
}
.jg_input_picker .picker {
width: 100%;
height: 100%;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAICAYAAADJEc7MAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjFBRjM4MTE4ODk2MTExRThBOUI4Q0ZCMjgyOUIxNEJCIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjFBRjM4MTE5ODk2MTExRThBOUI4Q0ZCMjgyOUIxNEJCIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MUFGMzgxMTY4OTYxMTFFOEE5QjhDRkIyODI5QjE0QkIiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MUFGMzgxMTc4OTYxMTFFOEE5QjhDRkIyODI5QjE0QkIiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6Y/3I7AAAAZElEQVR42mJcuHDhNAYGhkwG0sB0JiCRC8SbSNAEUpsL0vgXiCOB+CQRmk5C1f5lggp8A2JfIL6DR9MdqBqQWgYmJInXQOwJpdEBhhwTPlPxuYYJnz/w+Z8FX8hB5bGGOECAAQDsdhzUIfF/ewAAAABJRU5ErkJggg==);
background-repeat: no-repeat;
background-position: right center;
background-size: 14rpx 8rpx;
}
.jg_ljcx {
width: 630rpx;
height: 100rpx;
line-height: 100rpx;
text-align: center;
color: #fff;
font-size: 32rpx;
background-color: #01a3e1;
border-radius: 4rpx;
-webkit-border-radius: 4rpx;
-moz-border-radius: 4rxp;
margin-top: 53rpx;
}
.jg_bottom {
font-size: 26rpx;
color: #999;
text-align: center;
padding-bottom: 36rpx;
padding-top: 30rpx;
}
.mt20 {
margin-top: 20rpx;
}
.flex {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
display: box;
flex-wrap: wrap;
}
.flexC {
-webkit-box-pack: center;
justify-content: center;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
-o-justify-content: center;
}
.flexSb {
justify-content: space-between;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
-ms-justify-content: space-between;
-o-justify-content: space-between;
}
.alignC {
align-items: center;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
-o-align-items: center;
}
3.js
// pages/apply/merchantsSettled/merchantsSettled.js
var app = getApp();
var that;
Page({
data: {
// 结果查询,商户名称
jgArray: [
{
id: 7,
name: "我是商户one",
res_queryconf: [
{id: "2",name: "报名序号",key: "baoming"},
{ id: "3", name: "手机号码", key: "phone" },
{ id: "4", name: "姓名", key: "name" }
]
},
{
id: 8,
name: "我是商户two",
res_queryconf: [
{ id: "2", name: "报名序号", key: "baoming" }
]
}
],
jgIndex: -1,
//结果查询=》商户名称,通过商户名称不同展示不同个数input框
jgBmXmSj: [],
//slectid
baoMingParamsLpId:''
},
onLoad: function(options) {
that=this;
},
// 结果查询,商户名称
jgPickerChange: function (e) {
var jgBmXmSjArr = that.data.jgArray[e.detail.value]
that.setData({
jgIndex: e.detail.value,
jgBmXmSj: jgBmXmSjArr.res_queryconf,
baoMingParamsLpId: jgBmXmSjArr.id
});
console.log(jgBmXmSjArr);
console.log(that.data.jgBmXmSj);
console.log(that.data.baoMingParamsLpId);
},
//结果查询=》立即查询按钮
formSubmit: function (event) {
console.log(event)
var eventValue = event.detail.value;
var info = {
lpid: that.data.baoMingParamsLpId,
baoming: eventValue.baoMingbmxh,
phone: eventValue.baoMingsjhm,
name: eventValue.baoMingxm,
};
var showFlag = {
baomingFlag: false,
phoneFlag: false,
nameFlag: false
};
// 2: 报名序号(baoMingbmxh);3:手机号码(baoMingsjhm);4:姓名(baoMingxm)
var jgBmXmSj = that.data.jgBmXmSj
for (var i = 0; i < jgBmXmSj.length; i++) {
if (jgBmXmSj[i].id == 2) {
showFlag.baomingFlag = true;
}
if (jgBmXmSj[i].id == 3) {
showFlag.phoneFlag = true;
}
if (jgBmXmSj[i].id == 4) {
showFlag.nameFlag = true;
}
}
console.log(info);
//商户id
if (!info.lpid || ((!info.baoming) && (showFlag.baomingFlag)) || ((!info.name) && (showFlag.nameFlag))) {
wx.showToast({
title: '请完善信息',
icon: 'loading',
duration: 1500
});
} else if ((!info.phone) && (showFlag.nameFlag)) {
wx.showToast({
title: '请输入手机号',
icon: 'loading',
duration: 1500
});
} else {
//进行接口请求
console.log('success')
}
},
})
4.效果展示
5.说明
(1)picker有一个range-key属性 (当 range 是一个 Object Array 时,通过 range-key 来指定 Object 中 key 的值作为选择器显示内容),这个属性很方便使用,循环的可以是Object Array,官网api中也有提到https://developers.weixin.qq.com/miniprogram/dev/component/picker.html
(2)当使用form表单提交时:
①form表单必须写明bindsubmit="formSubmit";
②提交按钮必须写明formType="submit";
扫描二维码关注公众号,回复:
2475189 查看本文章
③input框必须绑定不同的name属性(因为最终获取输入框的值是通过该属性获得的);
④绑定事件,事件名称和form的bindsubmit后的名称相同
formSubmit: function(e) {
console.log('form发生了submit事件,携带数据为:', e.detail.value)
},
(3)使用picker时,展示的是name但提交的却是id,可以通过bindchange事件在点击时,获取对应数组对应项的id值