<template>
|
<view>
|
<u-toast ref="uToast" /><u-no-network></u-no-network>
|
<u-navbar title="编辑地址" safeAreaInsetTop fixed placeholder>
|
<view class="coreshop-navbar-left-slot" slot="left">
|
<u-icon name="arrow-left" size="19" @click="goNavigateBack"></u-icon>
|
<u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
|
<u-icon name="home" size="22" @click="goHome"></u-icon>
|
</view>
|
<view slot="right">
|
</view>
|
</u-navbar>
|
|
<view class="coreshop-padding-10" v-if="alert.show">
|
<u-alert :title="alert.title" type="error" :description="alert.description" effect="dark"></u-alert>
|
</view>
|
|
<view class="coreshop-padding-10">
|
<u--form :model="form" :rules="rules" ref="uForm" errorType="message" labelPosition="left" labelWidth="80">
|
<u-form-item label="收货人" prop="name" borderBottom clearValidate>
|
<u--input v-model="form.name" placeholder="请填写收货人姓名" />
|
</u-form-item>
|
<u-form-item label="手机号" prop="mobile" borderBottom clearValidate>
|
<u--input v-model="form.mobile" placeholder="请填写收货人手机号" />
|
</u-form-item>
|
|
<u-form-item label="省市县" borderBottom>
|
<coreshop-select v-model="show" mode="mutil-column-auto" :list="pickerList" :default-value="pickerIndex" @confirm="onConfirm"></coreshop-select>
|
<!-- 注意：由于兼容性差异，如果需要使用前后插槽，nvue下需使用u--input，非nvue下需使用u-input -->
|
<!-- #ifndef APP-NVUE -->
|
<u-input :value="pickerValue" type="select" disabled placeholder="请选择省市区区域">
|
<template slot="suffix">
|
<!--<u-button text="请选择" type="success" size="mini" @click="toMap"></u-button>-->
|
<u-button text="请选择" type="success" size="mini" @click="show = true"></u-button>
|
</template>
|
</u-input>
|
<!-- #endif -->
|
<!-- #ifdef APP-NVUE -->
|
<u--input :value="pickerValue" type="select" disabled placeholder="请选择省市区区域">
|
<template slot="suffix">
|
<!--<u-button text="请选择" type="success" size="mini" @click="toMap"></u-button>-->
|
<u-button text="请选择" type="success" size="mini" @click="show = true"></u-button>
|
</template>
|
</u--input>
|
<!-- #endif -->
|
</u-form-item>
|
|
<u-form-item label="街道社区" borderBottom @click="toMap">
|
<!-- 注意：由于兼容性差异，如果需要使用前后插槽，nvue下需使用u--input，非nvue下需使用u-input -->
|
<!-- #ifndef APP-NVUE -->
|
<u-input :value="form.street" type="text" disabled placeholder="请定位">
|
<template slot="suffix">
|
<u-button text="请选择" type="success" size="mini"></u-button>
|
</template>
|
</u-input>
|
<!-- #endif -->
|
<!-- #ifdef APP-NVUE -->
|
<u--input :value="form.street" type="text" disabled placeholder="请定位">
|
<template slot="suffix">
|
<u-button text="请选择" type="success" size="mini"></u-button>
|
</template>
|
</u--input>
|
<!-- #endif -->
|
</u-form-item>
|
|
<!--<u-form-item label="经度" prop="longitude" borderBottom>
|
<u--input v-model="form.longitude" disabled placeholder="请选择街道获取经度" />
|
</u-form-item>
|
|
<u-form-item label="纬度" prop="latitude" disabled borderBottom>
|
<u--input v-model="form.latitude" disabled placeholder="请选择街道获取纬度" />
|
</u-form-item>-->
|
|
<u-form-item label="详细地址" prop="address" borderBottom clearValidate>
|
<u--textarea v-model="form.address" placeholder="请输入内容"></u--textarea>
|
<!--<u--input v-model="form.address" placeholder="请填写收货详细地址" type="textarea" />-->
|
</u-form-item>
|
<u-form-item label="设为默认">
|
<u-switch slot="right" v-model="checked"></u-switch>
|
</u-form-item>
|
</u--form>
|
</view>
|
|
<view class="coreshop-bottomBox">
|
<button class="coreshop-btn coreshop-btn-square coreshop-btn-w" @click="delShip" v-if="id && id != 0" :disabled='submitStatus' :loading='submitStatus'>删除</button>
|
<!-- #ifdef MP-WEIXIN -->
|
<button class="coreshop-btn coreshop-btn-square coreshop-btn-w" @click="wechatAddress" v-if="!id">从微信获取</button>
|
<!-- #endif -->
|
<button class="coreshop-btn coreshop-btn-square coreshop-btn-b" @click="saveShip" :disabled='submitStatus' :loading='submitStatus'>保存</button>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
// #ifdef MP-WEIXIN
|
const chooseLocation = requirePlugin('chooseLocation');
|
// #endif
|
// #ifdef APP-PLUS || APP-PLUS-NVUE
|
// #endif
|
export default {
|
data() {
|
return {
|
getType: 1, //1手动输入，0从微信获取
|
id: 0,
|
form: {
|
name: '',
|
mobile: '',
|
address: '',
|
isDefault: 2,
|
longitude: '',
|
latitude: '',
|
street: ''
|
},
|
longitude: 0,
|
latitude: 0,
|
region: ['湖南省', '怀化市', '鹤城区'],
|
areaId: this.$store.state.config.reshipAreaId || 0,
|
checked: false,
|
pickerValue: '',
|
submitStatus: false,
|
show: false,
|
pickerList: this.$db.get("areaList"),
|
province: this.$db.get("areaList"),
|
pickerIndex: [17, 11, 1], // picker索引值
|
provinceKey: 17,//省份id
|
cityKey: 11,//市id
|
areaKey: 1,//区域id
|
rules: {
|
name: [
|
{
|
required: true,
|
message: '请输入姓名',
|
trigger: 'blur',
|
},
|
{
|
min: 2,
|
max: 10,
|
message: '姓名长度在2到10个字长',
|
trigger: ['change', 'blur'],
|
}
|
],
|
address: [
|
{
|
required: true,
|
message: '请输入地址',
|
trigger: 'blur',
|
},
|
{
|
min: 5,
|
max: 50,
|
message: '地址长度在5到50个字符',
|
trigger: ['change', 'blur'],
|
}
|
],
|
mobile: [
|
{
|
required: true,
|
message: '请输入手机号',
|
trigger: ['change', 'blur'],
|
},
|
{
|
validator: (rule, value, callback) => {
|
return this.$u.test.mobile(value);
|
},
|
message: '手机号码不正确',
|
trigger: ['change', 'blur'],
|
}
|
]
|
},
|
alert: {
|
title: '获取定位失败，请检查是否开启定位功能。',
|
description: '未获取到您的经纬度坐标，我们需要获取您的经纬度坐标，来计算与发货点的配送距离。不然无法开启同城配送计算运费。',
|
closable: true,
|
show: false
|
},
|
}
|
},
|
onShow() {
|
// #ifdef MP-WEIXIN
|
const chooseLocation = requirePlugin('chooseLocation');
|
const location = chooseLocation.getLocation();
|
// #endif
|
// #ifdef APP-PLUS || APP-PLUS-NVUE
|
const location = uni.getLocation();
|
// #endif
|
if (location != null) {
|
this.form.latitude = location.latitude;
|
this.form.longitude = location.longitude;
|
|
this.region = [location.province, location.district, location.city];
|
this.form.street = location.name;
|
if (this.getType == 1) {
|
this.form.address = location.address;
|
}
|
console.log("location1:", location);
|
}
|
},
|
onUnload() {
|
// 页面卸载时设置插件选点数据为null，防止再次进入页面，geLocation返回的是上次选点结果
|
// #ifdef MP-WEIXIN
|
chooseLocation.setLocation(null);
|
// #endif
|
// #ifdef APP-PLUS || APP-PLUS-NVUE
|
//uni.setLocation(null);
|
// #endif
|
},
|
onLoad(e) {
|
this.getMyLocation();
|
if (e.shipId) {
|
//编辑
|
this.id = e.shipId;
|
this.getShipInfo();
|
} else {
|
//添加（取消初始化）
|
//this.pickerValue = this.region[0] + " " + this.region[1] + " " + this.region[2];
|
this.init();
|
}
|
},
|
computed: {},
|
onReady() {
|
this.$refs.uForm.setRules(this.rules);
|
},
|
methods: {
|
// 获取自己的位置信息
|
getMyLocation() {
|
let _this = this;
|
// #ifdef MP-WEIXIN
|
wx.getFuzzyLocation({
|
type: 'wgs84',
|
success(res) {
|
_this.latitude = res.latitude
|
_this.longitude = res.longitude
|
console.log('当前位置的经度1：' + res);
|
},
|
fail: function () {
|
_this.$u.toast("获取您的经纬度坐标失败")
|
}
|
})
|
// #endif
|
// #ifndef MP-WEIXIN
|
uni.getLocation({
|
type: 'wgs84',
|
success: function (res) {
|
_this.longitude = res.longitude;
|
_this.latitude = res.latitude;
|
console.log('当前位置的经度2：' + res);
|
},
|
fail: function () {
|
_this.$u.toast("获取您的经纬度坐标失败")
|
}
|
});
|
// #endif
|
},
|
onConfirm(e) {
|
console.log(e);
|
let provinceName = e[0].label;
|
let cityName = e[1].label;
|
let countyName = e[2].label;
|
this.pickerValue = e[0].label + " " + e[1].label + " " + e[2].label
|
let data = {
|
provinceName: provinceName,
|
cityName: cityName,
|
countyName: countyName
|
}
|
this.$u.api.getAreaId(data).then(res => {
|
if (res.status) {
|
this.areaId = res.data;
|
this.init();
|
} else {
|
uni.showModal({
|
title: '提示',
|
content: '地区选择出现问题，请重新选择地区',
|
showCancel: false
|
});
|
}
|
});
|
},
|
//编辑获取收货地址信息
|
getShipInfo() {
|
let data = {
|
id: this.id
|
}
|
this.$u.api.shipDetail(data).then(res => {
|
if (res.status) {
|
let region = res.data.areaName.split(" ");
|
this.form.name = res.data.name;
|
this.form.mobile = res.data.mobile;
|
this.region = region;
|
this.areaId = res.data.areaId;
|
this.init();
|
this.pickerValue = this.region[0] + " " + this.region[1] + " " + this.region[2]
|
this.form.address = res.data.address;
|
this.form.isDefault = res.data.isDefault;
|
this.form.longitude = res.data.longitude;
|
this.form.latitude = res.data.latitude;
|
this.form.street = res.data.street;
|
if (res.data.isDefault) {
|
this.checked = true;
|
this.isDefault = 1;
|
} else {
|
this.checked = false;
|
this.isDefault = 2;
|
}
|
} else {
|
this.$u.toast('获取收货地址信息出现问题');
|
// this.submitStatus = false;
|
}
|
this.submitStatus = false;
|
});
|
},
|
//删除地址
|
delShip() {
|
this.submitStatus = true;
|
this.$u.api.removeShip({ 'id': this.id }).then(res => {
|
this.submitStatus = false;
|
if (res.status) {
|
this.$refs.uToast.show({
|
message: res.msg, type: 'success', complete: function () {
|
uni.navigateBack({
|
delta: 1
|
});
|
}
|
})
|
} else {
|
this.$u.toast(res.msg);
|
// this.submitStatus = false;
|
}
|
});
|
},
|
//存储收货地址
|
saveShip() {
|
this.$refs.uForm.validate().then(res => {
|
console.log('验证通过');
|
if (this.checked) {
|
this.form.isDefault = 1;
|
} else {
|
this.form.isDefault = 2;
|
}
|
this.submitStatus = false;
|
if (!this.form.name) {
|
this.$u.toast('请输入收货人姓名')
|
return false
|
} else if (!this.form.mobile) {
|
this.$u.toast('请输入收货人手机号')
|
return false
|
} else if (this.form.mobile.length !== 11) {
|
this.$u.toast('收货人手机号格式不正确')
|
return false
|
} else if (this.areaId <= 0) {
|
this.$u.toast('请选择地区信息')
|
return false
|
} else if (!this.form.street) {
|
this.$u.toast('请选择街道')
|
return false
|
} else if (!this.form.latitude) {
|
this.$u.toast('请选择街道获取纬度')
|
return false
|
} else if (!this.form.longitude) {
|
this.$u.toast('请选择街道获取经度')
|
return false
|
}
|
let data = {
|
name: this.form.name,
|
address: this.form.address,
|
mobile: this.form.mobile,
|
isDefault: this.form.isDefault,
|
areaId: this.areaId,
|
longitude: this.form.longitude,
|
latitude: this.form.latitude,
|
street: this.form.street,
|
}
|
if (this.id && this.id != 0) {
|
//编辑存储
|
data.id = this.id
|
this.$u.api.editShip(data).then(res => {
|
this.submitStatus = false;
|
if (res.status) {
|
this.$refs.uToast.show({
|
message: res.msg, type: 'success', complete: function () {
|
uni.navigateBack({
|
delta: 1
|
});
|
}
|
})
|
} else {
|
this.$u.toast(res.msg);
|
// this.submitStatus = false;
|
}
|
});
|
} else {
|
//添加
|
this.$u.api.saveUserShip(data).then(res => {
|
this.submitStatus = false;
|
if (res.status) {
|
this.$refs.uToast.show({
|
message: res.msg, type: 'success', complete: function () {
|
uni.navigateBack({
|
delta: 1
|
});
|
}
|
})
|
} else {
|
this.$u.toast(res.msg);
|
// this.submitStatus = false;
|
}
|
});
|
}
|
}).catch(errors => {
|
uni.$u.toast('提交的数据校验失败，请输入合法信息！')
|
})
|
},
|
//倒查城市信息
|
getFullPath(id, data) {
|
for (var i = 0; i < data.length; i++) {
|
if (id == data[i].value) {
|
if (!data[i].children) {
|
this.areaKey = i;
|
return true;
|
} else if (data[i].hasOwnProperty("children")) {
|
if (data[i].children[0] && !data[i].children[0].children) {
|
this.cityKey = i;
|
return true;
|
} else {
|
this.provinceKey = i;
|
return true;
|
}
|
}
|
} else {
|
if (data[i].hasOwnProperty("children")) {
|
if (data[i].children[0] !== undefined) {
|
if (data[i].children[0].hasOwnProperty("children")) {
|
this.provinceKey = i;
|
} else {
|
this.cityKey = i;
|
}
|
}
|
if (typeof data[i].children != 'undefined') {
|
var res = this.getFullPath(id, data[i].children);
|
if (res) {
|
return true;
|
}
|
}
|
}
|
}
|
}
|
},
|
init() {
|
this.getFullPath(this.areaId, this.province);
|
this.pickerIndex = [this.provinceKey, this.cityKey, this.areaKey];
|
},
|
toMap() {
|
// #ifdef MP-WEIXIN
|
const txMapkey = this.$store.state.config.qqMapKey; //使用在腾讯位置服务申请的key
|
const referer = this.$store.state.config.shopName; //调用插件的app的名称
|
const location = JSON.stringify({
|
latitude: this.form.latitude == "" ? this.latitude : this.form.latitude,
|
longitude: this.form.longitude == "" ? this.longitude : this.form.longitude
|
});
|
const category = '';
|
|
wx.navigateTo({
|
url: 'plugin://chooseLocation/index?key=' + txMapkey + '&referer=' + referer + '&location=' +
|
location + '&category=' + category
|
});
|
// #endif
|
|
// #ifdef APP-PLUS || APP-PLUS-NVUE
|
uni.chooseLocation({
|
success: (res) => {
|
this.form.street = res.name;
|
this.form.latitude = res.latitude;
|
this.form.longitude = res.longitude;
|
}
|
});
|
// #endif
|
},
|
// #ifdef MP-WEIXIN
|
wechatAddress() {
|
this.getType = 0;
|
let _that = this;
|
wx.chooseAddress({
|
success: res => {
|
if (res.errMsg == "chooseAddress:ok") {
|
//获取成功
|
_that.form.name = res.userName;
|
_that.form.mobile = res.telNumber;
|
_that.form.address = res.detailInfo;
|
|
_that.pickerValue = res.provinceName + " " + res.cityName + " " + res.countyName;
|
let data = {
|
provinceName: res.provinceName,
|
cityName: res.cityName,
|
countyName: res.countyName,
|
};
|
this.$u.api.getAreaId(data).then(res => {
|
if (res.status) {
|
this.areaId = res.data;
|
this.init();
|
} else {
|
uni.showModal({
|
title: '提示',
|
content: '地区选择出现问题，请重新选择地区',
|
showCancel: false
|
});
|
}
|
});
|
|
console.log(res);
|
} else {
|
this.$refs.uToast.show({ title: '获取微信地址失败', type: 'error' });
|
}
|
}
|
});
|
},
|
// #endif
|
|
},
|
|
}
|
</script>
|
<style lang="scss">
|
page { background: #fff; }
|
</style>
|
