[更新]
This commit is contained in:
240
pages/address_form/address_form.js
Normal file
240
pages/address_form/address_form.js
Normal file
@@ -0,0 +1,240 @@
|
||||
|
||||
/*
|
||||
* 本时生活
|
||||
*/
|
||||
|
||||
const app = getApp()
|
||||
|
||||
|
||||
Page({
|
||||
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
addressInfo: '',
|
||||
type : '', //类型
|
||||
addressId : '',
|
||||
defaultVal :'',
|
||||
name : '',
|
||||
mobile : '',
|
||||
address : '',
|
||||
|
||||
//省份选择
|
||||
areas : [],
|
||||
areaSn : '',
|
||||
areaIndex : 0,
|
||||
|
||||
//市级选择
|
||||
cityList : [],
|
||||
cityId : 0,
|
||||
cityIndex : 0,
|
||||
|
||||
//区域选择
|
||||
regiList : [],
|
||||
regiId : 0,
|
||||
regiIndex : 0,
|
||||
|
||||
cityLayer : false
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad (options) {
|
||||
this.setData({
|
||||
type : options.type
|
||||
})
|
||||
if (options.type == 'Add') {
|
||||
wx.setNavigationBarTitle({
|
||||
title: '添加收货地址'
|
||||
})
|
||||
// 获取位置
|
||||
wx.getLocation({
|
||||
type: 'gcj02',
|
||||
success: res=> {
|
||||
this.setData({
|
||||
longitude : res.longitude,
|
||||
latitude : res.latitude
|
||||
})
|
||||
// 解析坐标
|
||||
getApp().qqmapsdk.reverseGeocoder({
|
||||
location: {
|
||||
latitude : res.latitude,
|
||||
longitude : res.longitude
|
||||
},
|
||||
success: res=>{
|
||||
if(res.message == "query ok"){
|
||||
let addressInfo = res.result.address_component
|
||||
let areaIndex = this.data.areas.findIndex(val => val.name == addressInfo.province)
|
||||
this.setData({
|
||||
areaIndex : areaIndex
|
||||
})
|
||||
this.getProvince()
|
||||
}else{
|
||||
wx.showToast({
|
||||
title: res.message,
|
||||
icon : 'none'
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
this.getProvince()
|
||||
} else if (options.type == 'Compile') {
|
||||
wx.setNavigationBarTitle({
|
||||
title: '编辑收货地址'
|
||||
})
|
||||
this.setData({
|
||||
addressId: options.id
|
||||
})
|
||||
this.getUserAddress()
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取收货人信息
|
||||
*/
|
||||
getUserAddress(){
|
||||
wx.$api.address.edit(this.data.addressId).then(res=>{
|
||||
let areasValue = res.data.provinces.findIndex(val=> val.name == res.data.address.province_name),
|
||||
cityValue = res.data.cities.findIndex(val=> val.name == res.data.address.city_name),
|
||||
regiValue = res.data.districts.findIndex(val=> val.name == res.data.address.district_name)
|
||||
this.setData({
|
||||
name : res.data.address.name,
|
||||
mobile : res.data.address.mobile,
|
||||
areas : res.data.provinces,
|
||||
cityList : res.data.cities,
|
||||
regiList : res.data.districts,
|
||||
areaIndex : areasValue,
|
||||
cityIndex : cityValue,
|
||||
regiIndex : regiValue,
|
||||
areaSn : res.data.address.province_id,
|
||||
cityId : res.data.address.city_id,
|
||||
regiId : res.data.address.district_id,
|
||||
address : res.data.address.address,
|
||||
defaultList : res.data.address,
|
||||
isDefault : res.data.address.is_default
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取省信息
|
||||
*/
|
||||
getProvince() {
|
||||
wx.$api.address.create().then(res=>{
|
||||
let areaArr = res.data.provinces,
|
||||
areaIndex = this.data.areaIndex
|
||||
this.citylist(areaArr[areaIndex].code)
|
||||
this.setData({
|
||||
areaSn : areaArr[areaIndex].code,
|
||||
areas : areaArr
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 所在省份
|
||||
*/
|
||||
areasChange(e) {
|
||||
let area = this.data.areas,
|
||||
index = e.detail.value,
|
||||
atcode = area[index].code
|
||||
if (index != this.data.areaIndex) {
|
||||
this.setData({
|
||||
areaIndex : index,
|
||||
areaSn : atcode
|
||||
})
|
||||
|
||||
// 获取市级列表
|
||||
this.citylist(atcode)
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 市级列表
|
||||
*/
|
||||
citylist(code) {
|
||||
wx.$api.address.children(code).then(res=>{
|
||||
let cityArr = res.data
|
||||
this.regilist(cityArr[0].code)
|
||||
this.setData({
|
||||
cityId : cityArr[0].code,
|
||||
cityList : cityArr,
|
||||
cityIndex : 0
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 市级下拉筛选
|
||||
*/
|
||||
city(e) {
|
||||
let city = this.data.cityList,
|
||||
index = e.detail.value,
|
||||
citycode = city[index].code
|
||||
if (index != this.data.areaIndex) {
|
||||
this.setData({
|
||||
cityIndex: index,
|
||||
cityId : citycode
|
||||
})
|
||||
|
||||
// 获取市级列表
|
||||
this.regilist(citycode)
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* 区列表
|
||||
*/
|
||||
regilist(areaCode) {
|
||||
wx.$api.address.children(areaCode).then(res=>{
|
||||
this.setData({
|
||||
regiList : res.data,
|
||||
regiId : res.data[0].code,
|
||||
regiIndex : 0
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 区下拉筛选
|
||||
*/
|
||||
regi(e) {
|
||||
let newIndex = e.detail.value
|
||||
this.setData({
|
||||
regiIndex : newIndex,
|
||||
regiId : this.data.regiList[newIndex].code
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 保存信息
|
||||
*/
|
||||
siteform(e) {
|
||||
if(this.data.type == 'Compile') {
|
||||
// 编辑地址
|
||||
wx.$api.address.keep(this.data.addressId, e.detail.value.name, e.detail.value.mobile, this.data.areaSn, this.data.cityId, this.data.regiId, e.detail.value.address).then(res=>{
|
||||
wx.navigateBack()
|
||||
})
|
||||
} else {
|
||||
// 创建地址
|
||||
wx.$api.address.add(e.detail.value.name, e.detail.value.mobile, this.data.areaSn, this.data.cityId, this.data.regiId, e.detail.value.address, this.data.defaultVal).then(res=>{
|
||||
wx.navigateBack()
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 设为默认地址
|
||||
*/
|
||||
addressDefault(e) {
|
||||
let val = e.detail.value
|
||||
this.setData({
|
||||
defaultVal: val
|
||||
})
|
||||
}
|
||||
})
|
||||
3
pages/address_form/address_form.json
Normal file
3
pages/address_form/address_form.json
Normal file
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"usingComponents": {}
|
||||
}
|
||||
71
pages/address_form/address_form.wxml
Normal file
71
pages/address_form/address_form.wxml
Normal file
@@ -0,0 +1,71 @@
|
||||
|
||||
<form bindsubmit="siteform" class="site-form">
|
||||
<view class="site-input">
|
||||
<label>收货人</label>
|
||||
<input placeholder="请输入收货人姓名" name="name" value="{{name}}"></input>
|
||||
</view>
|
||||
<view class="site-input">
|
||||
<label>手机号码</label>
|
||||
<input placeholder="请输入手机号码" name="mobile" type="number" value="{{mobile}}"></input>
|
||||
</view>
|
||||
<view class="site-input">
|
||||
<label>所在省份</label>
|
||||
<picker bindchange="areasChange" value="{{areaIndex}}" range="{{areas}}" range-key="name" name="province_id">
|
||||
<view class="picker">
|
||||
{{areas[areaIndex].name}}
|
||||
</view>
|
||||
<image src="/static/icon/rightsArrow.png"></image>
|
||||
</picker>
|
||||
</view>
|
||||
<view class="site-input">
|
||||
<label>所在城市</label>
|
||||
<picker bindchange="city" value="{{cityIndex}}" range="{{cityList}}" range-key="name" class="conneColor" name="city_id">
|
||||
<view class="picker">
|
||||
{{cityList[cityIndex].name}}
|
||||
</view>
|
||||
<image src="/static/icon/rightsArrow.png"></image>
|
||||
</picker>
|
||||
</view>
|
||||
|
||||
<view class="site-input">
|
||||
<label>所在区域</label>
|
||||
<picker bindchange="regi" value="{{regiIndex}}" range="{{regiList}}" range-key="name" class="conneColor" name="district_id">
|
||||
<view class="picker">
|
||||
{{regiList[regiIndex].name}}
|
||||
</view>
|
||||
<image src="/static/icon/rightsArrow.png"></image>
|
||||
</picker>
|
||||
</view>
|
||||
<view class="site-input">
|
||||
<label>收货地址</label>
|
||||
<input placeholder="请输入详细地址" name="address" value="{{address}}"></input>
|
||||
</view>
|
||||
|
||||
<view class="site-switch" wx-if="{{type != 'Compile'}}">
|
||||
<text>设置默认地址</text>
|
||||
<switch style='zoom:.6;' bindchange="addressDefault" color="#f57e32"/>
|
||||
</view>
|
||||
|
||||
<view class="site-btn">
|
||||
<button form-type="submit" size="mini">保存</button>
|
||||
</view>
|
||||
|
||||
<view class="pickerView-back {{cityLayer? 'active':''}}" bindtap="cityLayer"></view>
|
||||
<view class="pickerView-layer {{cityLayer? 'active':''}}">
|
||||
<view class="pickerView-btn">
|
||||
<view class="pickerView-cancel" bindtap="cityLayer">取消</view>
|
||||
<view class="pickerView-determine" bindtap="cityDetermine">确定</view>
|
||||
</view>
|
||||
<picker-view class="pickerView" mask-class="pickerView-mask" value="{{pickerValue}}" indicator-class="pickerView-indicator" bindchange="pickerCity">
|
||||
<picker-view-column>
|
||||
<view class="pickerView-name nowrap" wx:for="{{provinceArr}}" wx:key="province">{{item.name}}</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<view class="pickerView-name nowrap" wx:for="{{cityArr}}" wx:key="city">{{item.name}}</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<view class="pickerView-name nowrap" wx:for="{{districtArr}}" wx:key="district">{{item.name}}</view>
|
||||
</picker-view-column>
|
||||
</picker-view>
|
||||
</view>
|
||||
</form>
|
||||
148
pages/address_form/address_form.wxss
Normal file
148
pages/address_form/address_form.wxss
Normal file
@@ -0,0 +1,148 @@
|
||||
/**
|
||||
* 亿时代
|
||||
*/
|
||||
|
||||
.site-form {
|
||||
background: white;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.site-btn {
|
||||
padding: 20rpx 30rpx;
|
||||
}
|
||||
|
||||
.site-input {
|
||||
padding: 0 30rpx 0 200rpx;
|
||||
position: relative;
|
||||
line-height: 90rpx;
|
||||
min-height: 90rpx;
|
||||
}
|
||||
|
||||
.site-input label {
|
||||
position: absolute;
|
||||
left: 30rpx;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.site-input input {
|
||||
height: 90rpx;
|
||||
}
|
||||
|
||||
.site-input image {
|
||||
width: 38rpx;
|
||||
height: 38rpx;
|
||||
position: absolute;
|
||||
right: 20rpx;
|
||||
top: calc(50% - 19rpx);
|
||||
}
|
||||
|
||||
.conneColor {
|
||||
width: calc(100%- 100rpx);
|
||||
}
|
||||
|
||||
.site-input::before {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 30rpx;
|
||||
right: 0;
|
||||
height: 1rpx;
|
||||
content: "";
|
||||
background: #e4e6f2;
|
||||
}
|
||||
|
||||
.site-input:last-child::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tui-picker-detail {
|
||||
width: 33%;
|
||||
}
|
||||
|
||||
.site-btn button[size="mini"] {
|
||||
width: 100%;
|
||||
background: #f57e32;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
font-size: 30rpx;
|
||||
color: white;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* pickerView */
|
||||
|
||||
.pickerView-back {
|
||||
background: rgba(0, 0, 0, .3);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pickerView-back.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.pickerView-layer {
|
||||
position: fixed;
|
||||
bottom: -571rpx;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background: white;
|
||||
transition: all .3s;
|
||||
}
|
||||
|
||||
.pickerView-layer.active {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.pickerView-btn {
|
||||
line-height: 90rpx;
|
||||
font-size: 30rpx;
|
||||
padding: 0 30rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.pickerView {
|
||||
height: 480rpx;
|
||||
padding: 0 10rpx;
|
||||
}
|
||||
|
||||
.pickerView-name {
|
||||
line-height: 80rpx;
|
||||
padding: 0 20rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pickerView-mask {
|
||||
border-top: solid 1rpx #e4e6f2;
|
||||
}
|
||||
|
||||
.pickerView-indicator {
|
||||
height: 80rpx;
|
||||
}
|
||||
|
||||
.pickerView-determine {
|
||||
color: #f57e32;
|
||||
}
|
||||
|
||||
.pickerView-cancel {
|
||||
color: #747788;
|
||||
}
|
||||
|
||||
.site-switch {
|
||||
font-size: 32rpx;
|
||||
margin: 30rpx;
|
||||
display: flex;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
.site-switch text {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.site-switch-active {
|
||||
color: #797979;
|
||||
}
|
||||
Reference in New Issue
Block a user