453 lines
14 KiB
Vue
453 lines
14 KiB
Vue
<template>
|
|
<view class="addAddress absolute">
|
|
<view class="list">
|
|
<view class="item acea-row row-between-wrapper">
|
|
<view class="name">姓名</view>
|
|
<input type="text" placeholder="请输入姓名" v-model="userAddress.realName" required/>
|
|
</view>
|
|
<view class="item acea-row row-between-wrapper">
|
|
<view class="name">联系电话</view>
|
|
<input type="number" placeholder="请输入联系电话" v-model="userAddress.phone" required :maxlength="11"/>
|
|
</view>
|
|
<view class="item acea-row row-between-wrapper">
|
|
<view class="name">所在地区</view>
|
|
<view class="picker acea-row row-between-wrapper select-value form-control">
|
|
<view class="address">
|
|
<CitySelect
|
|
ref="cityselect"
|
|
:defaultValue="addressText"
|
|
@callback="result"
|
|
:items="district"
|
|
></CitySelect>
|
|
</view>
|
|
<view class="iconfont icon-dizhi font-color-red" @click="getCurAddress()"></view>
|
|
</view>
|
|
</view>
|
|
<view class="item acea-row row-between-wrapper" style="flex-wrap: nowrap;">
|
|
<view class="name">详细地址</view>
|
|
<input type="text" placeholder="请填写具体地址" v-model="userAddress.detail" required/>
|
|
<!-- <textarea v-model="userAddress.detail" placeholder="请填写具体地址" /> -->
|
|
</view>
|
|
</view>
|
|
<view class="address-analysis-wrap">
|
|
<view class="inp">
|
|
<textarea
|
|
v-model.trim="addressInput"
|
|
placeholder="请粘贴收件人手机号、姓名、收货地址并用空格区分，系统将自动识别地址信息"
|
|
placeholder-style="font-size:24rpx;color:#C2C5CC;"
|
|
class="inp-textarea"
|
|
/>
|
|
</view>
|
|
<view class="btn-wrap">
|
|
<view
|
|
class="txt"
|
|
@click="clearHandle"
|
|
>
|
|
清空
|
|
</view>
|
|
<view
|
|
:class="addressInput ? '' : 'disable'"
|
|
class="btn"
|
|
@click="distinguishHandle"
|
|
>
|
|
识别
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="default acea-row row-middle">
|
|
<view class="select-btn">
|
|
<view class="checkbox-wrapper">
|
|
<checkbox-group @change="ChangeIsDefault">
|
|
<label class="well-check">
|
|
<checkbox :checked="userAddress.isDefault ? true : false"></checkbox>
|
|
<text class="def">设置为默认地址</text>
|
|
</label>
|
|
</checkbox-group>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view></view>
|
|
<view class="keepBnt bg-color-red" @tap="submit">立即保存</view>
|
|
<view class="wechatAddress" v-if="isWechat && !id" @click="getAddress">导入微信地址</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script type="text/babel">
|
|
import CitySelect from '@/components/CitySelect'
|
|
import config from '@/utils/mapConfig'
|
|
import { getAddress, getCity, postAddress, analysisAddress } from '@/api/user'
|
|
import attrs, { chs_extphone, required } from '@/utils/validate'
|
|
import { validatorDefaultCatch } from '@/utils/dialog'
|
|
import { isWeixin } from '@/utils'
|
|
import { pageListenMixins } from '@/mixins/pageListenMixins'
|
|
|
|
export default {
|
|
name: "AddAddress",
|
|
components: {
|
|
CitySelect
|
|
},
|
|
mixins: [pageListenMixins],
|
|
data() {
|
|
return {
|
|
district: [],
|
|
id: 0,
|
|
userAddress: {
|
|
realName: '',
|
|
phone: '',
|
|
detail: '',
|
|
isDefault: 0
|
|
},
|
|
address: {},
|
|
isWechat: isWeixin(),
|
|
addressText: "",
|
|
pageKeyId: Object.freeze('userAddressEdit'),
|
|
addressInput: ''
|
|
};
|
|
},
|
|
mounted: function () {
|
|
const id = this.$yroute.query.id
|
|
this.id = id
|
|
if (this.id) {
|
|
uni.setNavigationBarTitle({
|
|
title: '编辑地址'
|
|
})
|
|
}
|
|
this.getUserAddress()
|
|
this.getCityList()
|
|
},
|
|
methods: {
|
|
getIndex(value, arr) {
|
|
var idx = -1
|
|
for (var i = 0; i < arr.length; i++) {
|
|
if (arr[i].n == value) {
|
|
idx = i
|
|
break
|
|
}
|
|
}
|
|
return idx
|
|
},
|
|
clearHandle() {
|
|
if (!this.addressInput) return
|
|
this.addressInput = ''
|
|
},
|
|
// 识别
|
|
distinguishHandle() {
|
|
if (!this.addressInput) return
|
|
uni.showLoading()
|
|
analysisAddress({
|
|
content: this.addressInput
|
|
}).then((res) => {
|
|
uni.hideLoading()
|
|
console.log(res)
|
|
const { success, data } = res
|
|
if (success) {
|
|
this.address = {
|
|
province: data.province || '',
|
|
city: data.city || '',
|
|
district: data.district || '',
|
|
city_id: data.cityId
|
|
}
|
|
this.userAddress.realName = data.realName || ''
|
|
this.userAddress.phone = data.phone || ''
|
|
this.userAddress.detail = data.detail || ''
|
|
this.addressText = `${this.address.province} ${this.address.city} ${this.address.district}`
|
|
}
|
|
}).catch((err) => {
|
|
uni.hideLoading()
|
|
uni.showToast({
|
|
title: err.msg + '',
|
|
icon: 'none',
|
|
mask: false,
|
|
duration: 1500
|
|
})
|
|
})
|
|
},
|
|
//获取当前定位地址
|
|
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() {
|
|
},
|
|
async submit() {
|
|
const name = this.userAddress.realName || ''
|
|
const phone = this.userAddress.phone || ''
|
|
const addressText = this.addressText || ''
|
|
const detail = this.userAddress.detail || ''
|
|
const isDefault = this.userAddress.isDefault
|
|
|
|
if (phone.length < 11) {
|
|
uni.showToast({
|
|
title: "请输入11位手机号码",
|
|
icon: "none"
|
|
})
|
|
return;
|
|
}
|
|
|
|
try {
|
|
await this.$validator({
|
|
name: [
|
|
required(required.message("姓名")),
|
|
attrs.range([2, 16], attrs.range.message("姓名"))
|
|
],
|
|
phone: [
|
|
required(required.message("联系电话")),
|
|
chs_extphone(chs_extphone.message())
|
|
//chs_phone(chs_phone.message())
|
|
],
|
|
addressText: [required("请选择地址")],
|
|
detail: [required(required.message("具体地址"))]
|
|
}).validate({name, phone, addressText, detail});
|
|
} catch (e) {
|
|
return validatorDefaultCatch(e);
|
|
}
|
|
try {
|
|
let that = this,
|
|
data = {
|
|
id: that.id,
|
|
real_name: name,
|
|
phone: phone,
|
|
address: this.address,
|
|
detail: detail,
|
|
is_default: isDefault ? true : false,
|
|
post_code: ""
|
|
};
|
|
postAddress(data).then(function () {
|
|
if (that.id) {
|
|
uni.showToast({
|
|
title: "修改成功",
|
|
icon: "none",
|
|
duration: 2000
|
|
});
|
|
} else {
|
|
uni.showToast({
|
|
title: "已取消绑定",
|
|
icon: "none",
|
|
duration: 2000
|
|
});
|
|
}
|
|
that.$yrouter.back();
|
|
});
|
|
} catch (err) {
|
|
uni.showToast({
|
|
title: err.msg || err.response.data.msg || err.response.data.message,
|
|
icon: "none",
|
|
duration: 2000
|
|
});
|
|
}
|
|
},
|
|
ChangeIsDefault: function () {
|
|
this.userAddress.isDefault = !this.userAddress.isDefault;
|
|
},
|
|
result(values) {
|
|
console.log(this);
|
|
console.log(values);
|
|
this.address = {
|
|
province: values.province.name || "",
|
|
city: values.city.name || "",
|
|
district: values.district.name || "",
|
|
city_id: values.city.id
|
|
};
|
|
this.addressText = `${this.address.province} ${this.address.city} ${this.address.district}`;
|
|
// this.addressText =
|
|
// this.address.province + this.address.city + this.address.district;
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="less">
|
|
.address {
|
|
text {
|
|
width: 100%;
|
|
display: block;
|
|
}
|
|
}
|
|
.address-analysis-wrap {
|
|
padding: 20rpx;
|
|
margin: 20rpx;
|
|
border-radius: 15rpx;
|
|
background-color: #fff;
|
|
font-size: 24rpx;
|
|
.inp-textarea {
|
|
width: 100%;
|
|
height: 120rpx;
|
|
}
|
|
.btn-wrap {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
margin: 20rpx 0 0 0;
|
|
.txt {
|
|
color: #999;
|
|
}
|
|
.btn {
|
|
padding: 12rpx 25rpx;
|
|
margin: 0 0 0 20rpx;
|
|
border-radius: 8rpx;
|
|
color: #fff;
|
|
background-color: #FE5261;
|
|
&.disable {
|
|
opacity: 0.75;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|