288 lines
8.5 KiB
Vue
288 lines
8.5 KiB
Vue
<template>
|
|
<u-popup :show="show" mode="center" round="16">
|
|
<view class="dialog-container">
|
|
<view class="dialog-title">填写收货地址</view>
|
|
|
|
<u-form :model="form" ref="uForm" labelPosition="left">
|
|
<u-form-item label="姓名" prop="name" borderBottom>
|
|
<u-input v-model="form.name" placeholder="请输入姓名" border="none"/>
|
|
</u-form-item>
|
|
|
|
<u-form-item label="联系电话" prop="phone" borderBottom>
|
|
<u-input v-model="form.phone" placeholder="请输入联系电话" border="none"/>
|
|
</u-form-item>
|
|
|
|
<u-form-item label="所在地区" prop="region" borderBottom>
|
|
<CitySelect
|
|
ref="cityselect"
|
|
:defaultValue="addressText"
|
|
@callback="result"
|
|
:items="district"
|
|
></CitySelect>
|
|
</u-form-item>
|
|
|
|
<u-form-item label="详细地址" prop="address" borderBottom>
|
|
<u-input v-model="form.address" placeholder="请输入详细地址" border="none" />
|
|
</u-form-item>
|
|
</u-form>
|
|
|
|
<view class="dialog-footer">
|
|
<u-button type="primary" color="#C52733" shape="circle" @click="handleSave">立即保存</u-button>
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
</template>
|
|
|
|
<script>
|
|
import CitySelect from '@/components/CitySelect'
|
|
import { getAddress, getCity, postAddress, analysisAddress } from '@/api/user'
|
|
import { isWeixin } from '@/utils'
|
|
export default {
|
|
components: {
|
|
CitySelect
|
|
},
|
|
data() {
|
|
return {
|
|
district: [],
|
|
id: 0,
|
|
// 是否选择地址模式：0-不是，1-来源订单创建页面，2-来源购物车
|
|
choosMode: 0,
|
|
userAddress: {
|
|
realName: '',
|
|
phone: '',
|
|
detail: '',
|
|
isDefault: 0
|
|
},
|
|
address: {},
|
|
isWechat: isWeixin(),
|
|
addressText: "",
|
|
pageKeyId: Object.freeze('userAddressEdit'),
|
|
addressInput: '',
|
|
show: false,
|
|
showRegionPicker: false,
|
|
form: {
|
|
name: '',
|
|
phone: '',
|
|
region: '',
|
|
address: ''
|
|
},
|
|
rules: {
|
|
name: [
|
|
{ required: true, message: '请输入姓名', trigger: 'blur' }
|
|
],
|
|
phone: [
|
|
{ required: true, message: '请输入联系电话', trigger: 'blur' },
|
|
{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
|
|
],
|
|
region: [
|
|
{ required: true, message: '请选择所在地区', trigger: 'change' }
|
|
],
|
|
address: [
|
|
{ required: true, message: '请输入详细地址', trigger: 'blur' }
|
|
]
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
open() {
|
|
this.show = true
|
|
this.getUserAddress()
|
|
this.getCityList()
|
|
},
|
|
result() {
|
|
|
|
},
|
|
handleRegionConfirm(e) {
|
|
this.form.region = e.province.label + ' ' + e.city.label + ' ' + e.area.label
|
|
},
|
|
handleSave() {
|
|
this.$refs.uForm.validate(valid => {
|
|
if (valid) {
|
|
// 这里处理保存逻辑
|
|
this.$emit('save', this.form)
|
|
this.show = false
|
|
}
|
|
})
|
|
},
|
|
//获取当前定位地址
|
|
getCurAddress() {
|
|
var that = this;
|
|
//定位
|
|
uni.showLoading({
|
|
title: '定位中...'
|
|
});
|
|
//this.getLocation();
|
|
uni.getLocation({
|
|
type: 'wgs84',
|
|
success: function (res) {
|
|
let latitude = res.latitude;
|
|
let longitude = res.longitude;
|
|
|
|
console.log('latitude:' + latitude + 'longitude:' + longitude)
|
|
|
|
// #ifdef H5
|
|
Vue.jsonp(
|
|
'https://apis.map.qq.com/ws/geocoder/v1/?location=' + latitude + ',' + longitude + '&key=' + config.key,
|
|
{
|
|
//callbackName: 'QQmap',
|
|
output: 'jsonp',
|
|
}).then(json => {
|
|
// Success.
|
|
uni.hideLoading();
|
|
|
|
that.addressText =
|
|
json.result.ad_info.province + " " + json.result.ad_info.city + " " + json.result.ad_info.district;
|
|
that.address.province = json.result.ad_info.province;
|
|
that.address.city = json.result.ad_info.city;
|
|
that.address.district = json.result.ad_info.district;
|
|
that.$set(that.userAddress, 'detail', json.result.formatted_addresses.recommend);
|
|
//that.userAddress.detail = json.result.formatted_addresses.recommend;
|
|
// that.$refs.cityselect.adjustDefaultValue();
|
|
|
|
//设置city_id
|
|
var pIdx = that.getIndex(that.address.province, that.district);
|
|
if (pIdx > -1) {
|
|
var citys = that.district[pIdx].c;
|
|
var cIdx = that.getIndex(that.address.city, citys);
|
|
if (cIdx > -1) {
|
|
var city = citys[cIdx];
|
|
that.address.city_id = city.v;
|
|
console.log('city_id:' + city.v);
|
|
}
|
|
}
|
|
|
|
|
|
}).catch(err => {
|
|
// Failed.
|
|
console.log('地址解析失败:' + JSON.stringify(err));
|
|
uni.hideLoading();
|
|
})
|
|
// #endif
|
|
|
|
// #ifndef H5
|
|
uni.request({
|
|
url: 'https://apis.map.qq.com/ws/geocoder/v1/?location=' + latitude + ',' + longitude + '&key=' + config.key,
|
|
success: function (res) {
|
|
// console.log('res:'+JSON.stringify(res.data));
|
|
uni.hideLoading();
|
|
that.addressText =
|
|
res.data.result.ad_info.province + " " + res.data.result.ad_info.city + " " + res.data.result.ad_info.district;
|
|
that.address.province = res.data.result.ad_info.province;
|
|
that.address.city = res.data.result.ad_info.city;
|
|
that.address.district = res.data.result.ad_info.district;
|
|
//that.userAddress.detail = res.data.result.formatted_addresses.recommend;
|
|
that.$set(that.userAddress, 'detail', res.data.result.formatted_addresses.recommend);
|
|
// that.$refs.cityselect.adjustDefaultValue();
|
|
//设置city_id
|
|
var pIdx = that.getIndex(that.address.province, that.district);
|
|
if (pIdx > -1) {
|
|
var citys = that.district[pIdx].c;
|
|
var cIdx = that.getIndex(that.address.city, citys);
|
|
if (cIdx > -1) {
|
|
var city = citys[cIdx];
|
|
that.address.city_id = city.v;
|
|
console.log('city_id:' + city.v);
|
|
}
|
|
}
|
|
|
|
|
|
},
|
|
fail: function (res) {
|
|
console.log('地址解析失败');
|
|
uni.hideLoading();
|
|
},
|
|
complete: function () {
|
|
|
|
}
|
|
});
|
|
// #endif
|
|
},
|
|
fail: function (res) {
|
|
uni.hideLoading();
|
|
|
|
// uni.showToast({
|
|
// title:'城市定位失败:'+JSON.stringify(res),
|
|
// icon:'none',
|
|
// duration:2000
|
|
// })
|
|
}
|
|
});
|
|
|
|
},
|
|
getCityList: function () {
|
|
let that = this;
|
|
getCity()
|
|
.then(res => {
|
|
that.district = res.data;
|
|
that.ready = true;
|
|
|
|
if (this.id) {
|
|
//设置city_id
|
|
var pIdx = that.getIndex(that.address.province, that.district);
|
|
if (pIdx > -1) {
|
|
var citys = that.district[pIdx].c;
|
|
var cIdx = that.getIndex(that.address.city, citys);
|
|
if (cIdx > -1) {
|
|
var city = citys[cIdx];
|
|
that.address.city_id = city.v;
|
|
console.log('city_id:' + city.v);
|
|
}
|
|
}
|
|
}
|
|
|
|
})
|
|
.catch(err => {
|
|
that.$dialog.error(err.msg);
|
|
});
|
|
},
|
|
getUserAddress: function () {
|
|
if (!this.id) return false;
|
|
let that = this;
|
|
getAddress(that.id).then(res => {
|
|
that.userAddress = res.data;
|
|
that.addressText = res.data.province + " " + res.data.city + " " + res.data.district;
|
|
that.address.province = res.data.province;
|
|
that.address.city = res.data.city;
|
|
that.address.district = res.data.district;
|
|
|
|
if (that.district.length > 0) {
|
|
//设置city_id
|
|
var pIdx = that.getIndex(that.address.province, that.district);
|
|
if (pIdx > -1) {
|
|
var citys = that.district[pIdx].c;
|
|
var cIdx = that.getIndex(that.address.city, citys);
|
|
if (cIdx > -1) {
|
|
var city = citys[cIdx];
|
|
that.address.city_id = city.v;
|
|
console.log('city_id:' + city.v);
|
|
}
|
|
}
|
|
}
|
|
});
|
|
},
|
|
getAddress() {
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.dialog-container {
|
|
width: 600rpx;
|
|
padding: 40rpx;
|
|
background-color: #fff;
|
|
border-radius: 16rpx;
|
|
}
|
|
|
|
.dialog-title {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
margin-bottom: 40rpx;
|
|
}
|
|
|
|
.dialog-footer {
|
|
margin-top: 40rpx;
|
|
}
|
|
</style>
|