小程序表单提交
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
})
}
})
},
浙公网安备 33010602011771号