
<view class="container">
<form bindsubmit="formSubmit" bindreset="formReset">
<view class="section">
<input type="text" hidden="true" value="{{mid}}" name="user_id"/>
<input type="text" name="name" placeholder="收货人姓名" />
</view>
<view class="section">
<input type="text" name="phone" placeholder="电话号码" />
</view>
<view class="section">
<picker bindchange="bindPickerChangeshengArr" value="{{shengIndex}}" range="{{shengArr}}" data-id="{{shengId[shengIndex]}}">
<view class="picker">
选择省份:{{shengArr[shengIndex]}}
<input hidden="true" name="province" value="{{shengArr[shengIndex]}}"/>
</view>
</picker>
</view>
<view class="section">
<picker bindchange="bindPickerChangeshiArr" value="{{shiIndex}}" range="{{shiArr}}">
<view class="picker">
选择城市:{{shiArr[shiIndex]}}
<input hidden="true" name="city" value="{{shiArr[shiIndex]}}"/>
</view>
</picker>
</view>
<view class="section">
<picker bindchange="bindPickerChangequArr" value="{{quIndex}}" range="{{quArr}}">
<view class="picker">
选择地区:{{quArr[quIndex]}}
<input hidden="true" name="town" value="{{quArr[quIndex]}}"/>
</view>
</picker>
</view>
<view class="section">
<input type="text" class="ww" name="address" placeholder="详细地址" />
</view>
<view>
<label></label>
</view>
<view class="btn-area">
<button formType="submit">保存地址</button>
</view>
</form>
</view>
|
page {
background: #efeff4;
}
/* pages/address/address.wxss */
.container {
font-size: 12px;
background-color: white;
}
.section {
height: 100rpx;
border-bottom: 1px lightgrey solid;
display: flex;
align-items: center;
margin: 0 30rpx;
}
button {
width: 90%;
position: relative;
top:100rpx;
color: #fff;
background-color: #d9002f;
}
.picker {
width: 600rpx;
height: 100%;
}
.ww{
width: 250px;
}
|
//城市选择
var app = getApp();
Page({
data: {
shengArr: [],//省级数组
shengId: [],//省级id数组
shiArr: [],//城市数组
shiId: [],//城市id数组
quArr: [],//区数组
shengIndex: 0,
shiIndex: 0,
quIndex: 0,
mid: 0,
sheng:0,
city:0,
area:0,
code:0,
cartId:0
},
formSubmit: function (e) {
var adds = e.detail.value;
var cartId = this.data.cartId;
wx.request({
url: app.d.ceshiUrl + '/Api/Address/add_adds',
data: {
user_id:app.d.userId,
receiver: adds.name,
tel: adds.phone,
sheng: this.data.sheng,
city: this.data.city,
quyu: this.data.area,
adds: adds.address,
code: this.data.code,
},
method: 'POST', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
header: {// 设置请求的 header
'Content-Type': 'application/x-www-form-urlencoded'
},
success: function (res) {
// success
var status = res.data.status;
if(status==1){
wx.showToast({
title: '保存成功!',
duration: 2000
});
}else{
wx.showToast({
title: res.data.err,
duration: 2000
});
}
wx.redirectTo({
url: 'user-address/user-address?cartId=' + cartId
});
},
fail: function () {
// fail
wx.showToast({
title: '网络异常!',
duration: 2000
});
}
})
},
onLoad: function (options) {
// 生命周期函数--监听页面加载
var that = this;
that.setData({
cartId: options.cartId
})
//获取省级城市
wx.request({
url: app.d.ceshiUrl + '/Api/Address/get_province',
data: {},
method: 'POST',
success: function (res) {
var status = res.data.status;
var province = res.data.list;
var sArr = [];
var sId = [];
sArr.push('请选择');
sId.push('0');
for (var i = 0; i < province.length; i++) {
sArr.push(province[i].name);
sId.push(province[i].id);
}
that.setData({
shengArr: sArr,
shengId: sId
})
},
fail: function () {
// fail
wx.showToast({
title: '网络异常!',
duration: 2000
});
},
})
},
bindPickerChangeshengArr: function (e) {
this.setData({
shengIndex: e.detail.value,
shiArr: [],
shiId: [],
quArr:[],
quiId: []
});
var that = this;
wx.request({
url: app.d.ceshiUrl + '/Api/Address/get_city',
data: {sheng:e.detail.value},
method: 'POST', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
header: {// 设置请求的 header
'Content-Type': 'application/x-www-form-urlencoded'
},
success: function (res) {
// success
var status = res.data.status;
var city = res.data.city_list;
var hArr = [];
var hId = [];
hArr.push('请选择');
hId.push('0');
for (var i = 0; i < city.length; i++) {
hArr.push(city[i].name);
hId.push(city[i].id);
}
that.setData({
sheng:res.data.sheng,
shiArr: hArr,
shiId: hId
})
},
fail: function () {
// fail
wx.showToast({
title: '网络异常!',
duration: 2000
});
},
})
},
bindPickerChangeshiArr: function (e) {
this.setData({
shiIndex: e.detail.value,
quArr:[],
quiId: []
})
var that = this;
wx.request({
url: app.d.ceshiUrl + '/Api/Address/get_area',
data: {
city:e.detail.value,
sheng:this.data.sheng
},
method: 'POST', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
header: {// 设置请求的 header
'Content-Type': 'application/x-www-form-urlencoded'
},
success: function (res) {
var status = res.data.status;
var area = res.data.area_list;
var qArr = [];
var qId = [];
qArr.push('请选择');
qId.push('0');
for (var i = 0; i < area.length; i++) {
qArr.push(area[i].name)
qId.push(area[i].id)
}
that.setData({
city:res.data.city,
quArr: qArr,
quiId: qId
})
},
fail: function () {
// fail
wx.showToast({
title: '网络异常!',
duration: 2000
});
}
})
},
bindPickerChangequArr: function (e) {
console.log(this.data.city)
this.setData({
quIndex: e.detail.value
});
var that = this;
wx.request({
url: app.d.ceshiUrl + '/Api/Address/get_code',
data: {
quyu:e.detail.value,
city:this.data.city
},
method: 'POST', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
header: {// 设置请求的 header
'Content-Type': 'application/x-www-form-urlencoded'
},
success: function (res) {
that.setData({
area:res.data.area,
code:res.data.code
})
},
fail: function () {
// fail
wx.showToast({
title: '网络异常!',
duration: 2000
});
}
})
}
})
|
模板简介:该模板名称为【微信小程序收货人联系地址设置页面样式设计制作开发教程】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。