小程序表单提交
作者：互联网
wxml
<!-- form表单 -->
<view class="form">
<input class="name " bindinput="getInputName" maxlength="10" placeholder="收件人" placeholder-class="" />
<input class="tel " bindinput="getInputPhone" maxlength="11" placeholder="手机号码" placeholder-class="" />
<picker class="save" mode="region" bindchange="bindRegionChange" value="{{region}}">
<!-- < class="save" maxlength="10" placeholder="省" bindinput="getInputSave" /> -->
<view class="">
<view class="save_a">{{region[0]}}</view>
<view class="save_b">{{region[1]}}</view>
</view>
</picker>
<!-- <input class="city" maxlength="10" placeholder="市" bindinput="getInputCity" /> -->
<input class="address " placeholder="请输入详细地址" bindinput="getInputAddress" maxlength="50" placeholder-class="" />
<!-- 立即提交 -->
<view class="submit" bind:tap="goSubmit"></view>
</view>
wxss
/* form表单*/
.form {
width: calc(1125rpx / 1125 * 750);
height: calc(1327rpx / 1125 * 750);
position: absolute;
top: calc(967rpx / 1125 * 750);
left: 0;
font-size: calc(42rpx / 1125 * 750);
color: #979797;
}
.name {
width: calc(670rpx / 1125 * 750);
height: calc(111rpx / 1125 * 750);
position: absolute;
top: calc(351rpx / 1125 * 750);
left: calc(152rpx / 1125 * 750);
padding-left: calc(133rpx / 1125 * 750);
}
.tel {
width: calc(670rpx / 1125 * 750);
height: calc(111rpx / 1125 * 750);
position: absolute;
top: calc(520rpx / 1125 * 750);
left: calc(152rpx / 1125 * 750);
padding-left: calc(133rpx / 1125 * 750);
}
.address {
width: calc(670rpx / 1125 * 750);
height: calc(111rpx / 1125 * 750);
position: absolute;
top: calc(800rpx / 1125 * 750);
left: calc(152rpx / 1125 * 750);
padding-left: calc(133rpx / 1125 * 750);
}
.submit {
width: calc(461rpx / 1125 * 750);
height: calc(134rpx / 1125 * 750);
position: absolute;
top: calc(1050rpx / 1125 * 750);
left: calc(330rpx / 1125 * 750);
/* border: 1px solid red; */
}
.city { width: calc(388rpx / 1125 * 750); height: calc(111rpx / 1125 * 750); position: absolute; top: calc(680rpx / 1125 * 750); left: calc(580rpx / 1125 * 750); } .save { width: calc(800rpx / 1125 * 750); height: calc(111rpx / 1125 * 750); position: absolute; top: calc(680rpx / 1125 * 750); left: calc(150rpx / 1125 * 750); line-height: calc(111rpx / 1125 * 750); } .save_a{ width: calc(300rpx / 1125 * 750); position: absolute; top: calc(0rpx / 1125 * 750); left: calc(60rpx / 1125 * 750); } .save_b{ width: calc(300rpx / 1125 * 750); position: absolute; top: calc(0rpx / 1125 * 750); left: calc(500rpx / 1125 * 750); } js data: { form: { receiveAddress: "", receiveName: "", receivePhone: "", receiveRegion: "", }, region: ["省", "市"], }, getInputName(e) { this.setFormData("receiveName", e.detail.value); }, getInputPhone(e) { this.setFormData("receivePhone", e.detail.value); }, getInputAddress(e) { this.setFormData("receiveAddress", e.detail.value); }, setFormData(formName, formValue) { // 更新form里对应的参数 // 获取 data 里的 form let form = this.data.form; // 用输入的e.detail.value 更改获取到的form里的receiveName form[formName] = formValue; // 更新 data 里的 form this.setData({ form, }); }, bindRegionChange: function (e) { console.log("picker发送选择改变,携带值为", e.detail.value); let regionArr = e.detail.value; this.setFormData("receiveRegion", regionArr.join(" ")); this.setData({ region: e.detail.value, }); }, goSubmit() { if (!this.data.form.receiveName || !this.data.form.receivePhone || this.data.form.receivePhone.length < 11 || !this.data.form.receiveAddress || !this.data.form.receiveRegion) { wx.showLoading({ title: '请填写完整收货信息', duration: 1500, }) return } let form = this.data.form; let id = app.globalData.cusGiftId console.log(form, id); app.reqPost(`***`, { form, id }).then((res) => { wx.hideLoading(); if (res.code = 100000) { wx.showToast({ title: '提交成功', icon: "success", duration: 2000 }) } }) },
.city { width: calc(388rpx / 1125 * 750); height: calc(111rpx / 1125 * 750); position: absolute; top: calc(680rpx / 1125 * 750); left: calc(580rpx / 1125 * 750); } .save { width: calc(800rpx / 1125 * 750); height: calc(111rpx / 1125 * 750); position: absolute; top: calc(680rpx / 1125 * 750); left: calc(150rpx / 1125 * 750); line-height: calc(111rpx / 1125 * 750); } .save_a{ width: calc(300rpx / 1125 * 750); position: absolute; top: calc(0rpx / 1125 * 750); left: calc(60rpx / 1125 * 750); } .save_b{ width: calc(300rpx / 1125 * 750); position: absolute; top: calc(0rpx / 1125 * 750); left: calc(500rpx / 1125 * 750); } js data: { form: { receiveAddress: "", receiveName: "", receivePhone: "", receiveRegion: "", }, region: ["省", "市"], }, getInputName(e) { this.setFormData("receiveName", e.detail.value); }, getInputPhone(e) { this.setFormData("receivePhone", e.detail.value); }, getInputAddress(e) { this.setFormData("receiveAddress", e.detail.value); }, setFormData(formName, formValue) { // 更新form里对应的参数 // 获取 data 里的 form let form = this.data.form; // 用输入的e.detail.value 更改获取到的form里的receiveName form[formName] = formValue; // 更新 data 里的 form this.setData({ form, }); }, bindRegionChange: function (e) { console.log("picker发送选择改变,携带值为", e.detail.value); let regionArr = e.detail.value; this.setFormData("receiveRegion", regionArr.join(" ")); this.setData({ region: e.detail.value, }); }, goSubmit() { if (!this.data.form.receiveName || !this.data.form.receivePhone || this.data.form.receivePhone.length < 11 || !this.data.form.receiveAddress || !this.data.form.receiveRegion) { wx.showLoading({ title: '请填写完整收货信息', duration: 1500, }) return } let form = this.data.form; let id = app.globalData.cusGiftId console.log(form, id); app.reqPost(`***`, { form, id }).then((res) => { wx.hideLoading(); if (res.code = 100000) { wx.showToast({ title: '提交成功', icon: "success", duration: 2000 }) } }) },
标签：750,form,top,程序,1125,表单,提交,calc,left 来源： https://www.cnblogs.com/yangcaicai/p/15878351.html