382 行
10 KiB
Vue
382 行
10 KiB
Vue
<!-- 添加修改地址 -->
|
||
<template>
|
||
<view class="address-wrap">
|
||
<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
|
||
<!-- 地址定位 -->
|
||
<view v-if="platform != 'App'" class="location-item u-flex u-row-between u-p-20 u-m-b-20" @tap="getLocation">
|
||
<view class="u-flex">
|
||
<text class="u-iconfont uicon-map-fill" style="#a76f0d;"></text>
|
||
<text>{{ chooseAddress }}</text>
|
||
</view>
|
||
<text class="u-iconfont uicon-arrow-right" style="color: #666"></text>
|
||
</view>
|
||
<view v-else class="location-item u-flex u-row-between u-p-20 u-m-b-20" @tap="handleOpenAuth('ACCESS_FINE_LOCATION')">
|
||
<view class="u-flex">
|
||
<text class="u-iconfont uicon-map-fill" style="#a76f0d;"></text>
|
||
<text>{{ chooseAddress }}</text>
|
||
</view>
|
||
<text class="u-iconfont uicon-arrow-right" style="color: #666"></text>
|
||
</view>
|
||
<view class="address-box">
|
||
<!-- 地址表单 -->
|
||
<u-form-item :labelStyle="labelStyle" label-width="150" label-position="left" label="收货人:" prop="consignee">
|
||
<u-input placeholder="请填写收货人姓名" v-model="model.consignee" type="text"></u-input>
|
||
</u-form-item>
|
||
<u-form-item :labelStyle="labelStyle" label-width="150" label-position="left" label="手机号:" prop="phone">
|
||
<u-input placeholder="请输入收货人手机号" v-model="model.phone" type="number"></u-input>
|
||
</u-form-item>
|
||
<u-form-item :labelStyle="labelStyle" label-width="150" label-position="left" label="所在地区:" prop="area_text">
|
||
<u-input type="select" v-model="model.area_text" :select-open="showSelect" placeholder="请选择地区" @click="showSelect = true"></u-input>
|
||
</u-form-item>
|
||
<u-form-item :labelStyle="labelStyle" label-position="left" label-width="150" label="详细地址:" prop="address">
|
||
<u-input border type="textarea" v-model="model.address" placeholder="如道路、门牌号、小区、楼栋号、单元室等" />
|
||
</u-form-item>
|
||
</view>
|
||
|
||
<!-- 设置默认 -->
|
||
<view class="default-box u-flex u-row-between">
|
||
<text class="title">设为默认地址</text>
|
||
<u-switch v-model="model.is_default" activeColor="#F0E6C8" size="40"></u-switch>
|
||
</view>
|
||
|
||
<!-- 功能按钮 -->
|
||
<view class="foot_box u-p-30 u-m-t-50 u-flex u-row-around">
|
||
<button v-show="addressId" class=" u-m-20 u-reset-button delete-btn u-flex-1" @tap="deleteAddress">删除收货地址</button>
|
||
<button class=" u-m-20 u-reset-button save-btn u-flex-1" @tap="submit">保存收货地址</button>
|
||
</view>
|
||
</u-form>
|
||
|
||
<!-- 省市区选择器 -->
|
||
<u-select mode="mutil-column-auto" safe-area-inset-bottom :list="addressAreaList" v-model="showSelect" @confirm="regionConfirm"></u-select>
|
||
|
||
<!-- 权限 -->
|
||
<yk-authpup ref="authpup" type="top" @changeAuth="handleChangeAuth" :permissionID="permissionID"></yk-authpup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { MAP_KEY } from '@/env.js';
|
||
import Auth from '@/shopro/permission/index.js';
|
||
import ykAuthpup from '@/components/yk-authpup/yk-authpup.vue';
|
||
|
||
export default {
|
||
components: {
|
||
ykAuthpup
|
||
},
|
||
data() {
|
||
return {
|
||
platform: this.$platform.get(),
|
||
permissionID: '',
|
||
showSelect: false, //省市区
|
||
addressAreaList: [],
|
||
addressId: 0, //收货地址ID
|
||
labelStyle: {
|
||
'font-size': '28rpx',
|
||
'font-weight': '600',
|
||
color: '#595959'
|
||
},
|
||
model: {
|
||
id: 0,
|
||
consignee: '',
|
||
phone: '',
|
||
area_text: '',
|
||
address: '',
|
||
is_default: false,
|
||
latitude: '',
|
||
longitude: ''
|
||
},
|
||
rules: {
|
||
phone: [
|
||
{
|
||
required: true,
|
||
message: '请输入收货人手机号',
|
||
trigger: ['change', 'blur']
|
||
},
|
||
{
|
||
validator: (rule, value, callback) => {
|
||
return this.$u.test.mobile(value);
|
||
},
|
||
message: '手机号码不正确',
|
||
trigger: ['change', 'blur']
|
||
}
|
||
],
|
||
consignee: [
|
||
{
|
||
required: true,
|
||
message: '请填写收货人姓名',
|
||
trigger: ['change', 'blur']
|
||
}
|
||
],
|
||
area_text: [
|
||
{
|
||
required: true,
|
||
message: '请选择地区',
|
||
trigger: ['change', 'blur']
|
||
}
|
||
],
|
||
address: [
|
||
{
|
||
required: true,
|
||
message: '请输入详细地址',
|
||
trigger: ['change', 'blur']
|
||
}
|
||
]
|
||
},
|
||
errorType: ['message'],
|
||
chooseAddress: '点击选择地理位置' //定位地址
|
||
};
|
||
},
|
||
computed: {},
|
||
onReady() {
|
||
this.$refs.uForm.setRules(this.rules);
|
||
},
|
||
onLoad() {
|
||
this.getArea();
|
||
this.addressId = this.$Route.query.id ? this.$Route.query.id : 0;
|
||
uni.setNavigationBarTitle({
|
||
title: this.addressId ? '编辑收货地址' : '添加收货地址'
|
||
});
|
||
this.addressId && this.getAddressInfo();
|
||
// 微信导入
|
||
this.$Route.query.addressData && this.wxAddressInit();
|
||
},
|
||
methods: {
|
||
// 打开权限
|
||
handleOpenAuth(permissionID) {
|
||
this.permissionID = permissionID;
|
||
setTimeout(() => {
|
||
this.$refs['authpup'].open();
|
||
}, 500)
|
||
},
|
||
// 同意授权后回调
|
||
async handleChangeAuth() {
|
||
let authState = await new Auth('userLocation').check();
|
||
authState &&
|
||
uni.chooseLocation({
|
||
success: res => {
|
||
this.model.latitude = res.latitude;
|
||
this.model.longitude = res.longitude;
|
||
this.getLocationInfo();
|
||
},
|
||
fail: err => {
|
||
console.log(err);
|
||
}
|
||
});
|
||
},
|
||
// 获取省市区
|
||
getArea() {
|
||
this.$http('address.area').then(res => {
|
||
if (res.code === 1) {
|
||
let { provinceData, cityData, areaData } = res.data;
|
||
provinceData.forEach((item, index) => {
|
||
this.addressAreaList.push({ ...item, children: [] });
|
||
this.addressAreaList[index].children.push(...cityData[index]);
|
||
this.addressAreaList[index].children.forEach((item1, index1) => {
|
||
item1['children'] = [];
|
||
item1.children.push(...areaData[index][index1]);
|
||
});
|
||
});
|
||
}
|
||
});
|
||
},
|
||
// 微信导入数据格式
|
||
wxAddressInit() {
|
||
let wxAddress = this.$Route.query.addressData; //微信导入
|
||
this.model.id = 0;
|
||
this.model.consignee = wxAddress.userName;
|
||
this.model.phone = wxAddress.telNumber;
|
||
// #ifdef MP-WEIXIN
|
||
this.model.area_text = `${wxAddress.provinceName}-${wxAddress.cityName}-${wxAddress.countyName}`;
|
||
// #endif
|
||
// #ifdef H5
|
||
this.model.area_text = `${wxAddress.provinceName}-${wxAddress.cityName}-${wxAddress.countryName}`;
|
||
// #endif
|
||
this.model.address = wxAddress.detailInfo.replace(/%20/g, '');
|
||
this.model.is_default = false;
|
||
},
|
||
|
||
// 确认省市区
|
||
regionConfirm(e) {
|
||
this.model.area_text = `${e[0].label}-${e[1].label}-${e[2].label}`;
|
||
},
|
||
|
||
// 获取定位
|
||
async getLocation() {
|
||
let authState = await new Auth('userLocation').check();
|
||
authState &&
|
||
uni.chooseLocation({
|
||
success: res => {
|
||
this.model.latitude = res.latitude;
|
||
this.model.longitude = res.longitude;
|
||
this.getLocationInfo();
|
||
},
|
||
fail: err => {
|
||
console.log(err);
|
||
}
|
||
});
|
||
},
|
||
|
||
//逆坐标解析
|
||
async getLocationInfo() {
|
||
this.chooseAddress = '定位中...';
|
||
const [error, res] = await uni.request({
|
||
url: `https://restapi.amap.com/v3/geocode/regeo?location=${this.model.longitude},${this.model.latitude}&key=${MAP_KEY}`
|
||
});
|
||
if (res.data.status === '1') {
|
||
const addressComponent = res.data.regeocode.addressComponent;
|
||
this.chooseAddress = res.data.regeocode.formatted_address;
|
||
this.model.area_text = `${addressComponent.province}-${addressComponent.city.length ? addressComponent.city : addressComponent.province}-${
|
||
addressComponent.district
|
||
}`;
|
||
this.model.address = res.data.regeocode.formatted_address.replace(`${addressComponent.province}${addressComponent.city}${addressComponent.district}`, '');
|
||
} else {
|
||
console.log('%c逆地址解析失败，请检查是否在env中配置地图key', 'color:green;background:yellow');
|
||
}
|
||
},
|
||
|
||
// 提交
|
||
submit() {
|
||
this.$refs.uForm.validate(valid => {
|
||
valid ? this.editAddress() : console.log('验证失败');
|
||
});
|
||
},
|
||
|
||
// 编辑添加地址
|
||
editAddress() {
|
||
let that = this;
|
||
that.$http(
|
||
'address.edit',
|
||
{
|
||
...that.model,
|
||
id: that.addressId
|
||
},
|
||
'保存中...'
|
||
).then(res => {
|
||
if (res.code === 1) {
|
||
that.$Router.back();
|
||
}
|
||
});
|
||
},
|
||
|
||
// 地址信息
|
||
getAddressInfo() {
|
||
const that = this;
|
||
this.$http('address.info', {
|
||
id: that.$Route.query.id
|
||
}).then(res => {
|
||
if (res.code === 1) {
|
||
let addressData = res.data;
|
||
that.addressId = addressData.id;
|
||
that.model.area_text = `${addressData.province_name}-${addressData.city_name}-${addressData.area_name}`;
|
||
that.model.is_default = addressData.is_default === '1' ? true : false;
|
||
that.model.address = addressData.address;
|
||
that.model.phone = addressData.phone;
|
||
that.model.consignee = addressData.consignee;
|
||
}
|
||
});
|
||
},
|
||
|
||
// 删除收货地址
|
||
deleteAddress() {
|
||
const that = this;
|
||
that.$http(
|
||
'address.del',
|
||
{
|
||
id: that.addressId
|
||
},
|
||
'删除中...'
|
||
).then(res => {
|
||
if (res.code === 1) {
|
||
that.$Router.back();
|
||
}
|
||
});
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
// 点击定位
|
||
.location-item {
|
||
font-size: 28rpx;
|
||
font-weight: 500;
|
||
background-color: #fff;
|
||
color: rgba(167, 111, 13, 1);
|
||
}
|
||
|
||
// 表单
|
||
.address-box {
|
||
background-color: #fff;
|
||
padding: 0 30rpx;
|
||
}
|
||
.address-item {
|
||
height: 96rpx;
|
||
background: #fff;
|
||
border-bottom: 1rpx solid rgba(#dfdfdf, 0.5);
|
||
padding: 0 25rpx;
|
||
|
||
.item-title {
|
||
color: #333;
|
||
font-size: 28rpx;
|
||
white-space: nowrap;
|
||
}
|
||
.inp {
|
||
color: #333;
|
||
font-size: 28rpx;
|
||
}
|
||
}
|
||
.area-box {
|
||
min-height: 120rpx;
|
||
padding-bottom: 60rpx;
|
||
background: #fff;
|
||
padding: 30rpx 25rpx;
|
||
.item-title {
|
||
font-size: 28rpx;
|
||
line-height: 28rpx;
|
||
vertical-align: middle;
|
||
white-space: nowrap;
|
||
}
|
||
.area-inp {
|
||
color: #333;
|
||
font-size: 28rpx;
|
||
vertical-align: middle;
|
||
margin-top: 8rpx;
|
||
width: 550rpx;
|
||
}
|
||
}
|
||
.default-box {
|
||
height: 100rpx;
|
||
padding: 0 25rpx;
|
||
background: #fff;
|
||
margin-top: 20rpx;
|
||
.title {
|
||
font-size: 28rpx;
|
||
}
|
||
.switch {
|
||
transform: scale(0.8);
|
||
}
|
||
}
|
||
// 底部按钮
|
||
.foot_box {
|
||
.delete-btn {
|
||
line-height: 70rpx;
|
||
background: linear-gradient(93deg, rgba(208, 19, 37, 1), rgba(237, 60, 48, 1));
|
||
box-shadow: 0px 7rpx 6rpx 0px rgba(#ed3c30, 0.22);
|
||
font-size: 28rpx;
|
||
|
||
font-weight: 500;
|
||
color: rgba(255, 255, 255, 1);
|
||
border-radius: 35rpx;
|
||
padding: 0;
|
||
margin-right: 20rpx;
|
||
}
|
||
.save-btn {
|
||
line-height: 70rpx;
|
||
background: linear-gradient(90deg, #1677FF, #4096FF);
|
||
border: 1rpx solid rgba(238, 238, 238, 1);
|
||
border-radius: 40rpx;
|
||
color: rgba(#fff, 0.9);
|
||
}
|
||
}
|
||
</style>
|