myc/pages/address/addressManage.vue

<template>
	<view class="content">
		<view class="row b-b">
			<text class="tit">联系人</text>
			<input class="input" type="text" v-model="addressData.name" placeholder="收货人姓名" placeholder-class="placeholder" />
		</view>
		<view class="row b-b">
			<text class="tit">手机号</text>
			<input class="input" type="number" v-model="addressData.mobile" placeholder="收货人手机号码" placeholder-class="placeholder" />
		</view>
		<view class="row b-b">
			<text class="tit">地址</text>
			<!-- <picker mode="multiSelector" :range="arrDate" @change="cityChange">
				<view>{{ addressDetail || '请选择地址（点击选择地址）' }}</view>
			</picker> -->
			<pickerAddress class="input"  @change="onCityClick">{{ addressDetail || '请选择地址（点击选择地址）' }}</pickerAddress>
		</view>
		<view class="row b-b" @click="clickMap">
			<text class="tit">定位</text>
			<input class="input" type="text" v-model="addressLocation.name" disabled="disabled" placeholder="请在列表选择要定位的地址" placeholder-class="placeholder" />
			<text class="iconfont iconlocation"></text>
		</view>
		<view class="row b-b">
			<text class="tit">门牌号</text>
			<input class="input" type="text" v-model="addressData.area" placeholder="请填写精确地址方便快速送到" placeholder-class="placeholder" />
		</view>

		<uni-list class="margin-t-20">
			<uni-list-item
				title="设为默认"
				:switch-checked="addressData.default"
				:show-switch="true"
				:show-arrow="false"
				switch-color="#5dbc7c"
				@switchChange="switchChange"
			></uni-list-item>
		</uni-list>

		<button class="add-btn" @click="confirm">提交</button>
	</view>
</template>

<script>
import uniList from '@/components/uni-list/uni-list.vue';
import uniListItem from '@/components/uni-list-item/uni-list-item.vue';
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import pickerAddress from '@/components/wangding-pickerAddress/wangding-pickerAddress.vue';
import { addressEdit } from '@/api/address.js';
import { openMap } from '@/utils/rocessor.js';
export default {
	components: {
		uniList,
		uniListItem,
		pickerAddress,
		uniPopup
	},
	data() {
		return {
			addressDetail: '',
			addressData: {
				name: '',
				mobile: '',
				address: {
					province: '',
					city: '',
					district: ''
				},
				area: '',
				default: false
			},
			// 定位地址
			addressLocation: {
				name: '',
				address: '',
				errMsg: 'chooseLocation:ok',
				latitude: '',
				longitude: '',
				name: '',
				// 判断是否地址选择页进入
				isIndex: false
			},
			arrDate:[
				['浙江省'],
				['台州市'],
				['椒江区','黄岩区','路桥区','温岭市','临海市','玉环县'],
			],
		};
	},
	onLoad(option) {
		let title = '新增收货地址';
		// #ifdef MP
		// 获取地图权限
		uni.authorize({
			scope: 'scope.userLocation',
			success: res => {}
		});
		// #endif
		if (option.isIndex == 3) {
			this.isIndex = true;
		}
		if (option.type === 'edit') {
			title = '编辑收货地址';
			let data = JSON.parse(option.data);
			console.log(data);
			let arr = data.detail.split(',')
			let len = arr.length - 1
			this.addressLocation.name = arr[0]
			this.addressLocation.latitude = data.latitude
			this.addressLocation.longitude = data.longitude
			this.addressData = {
				name: data.real_name,
				mobile: data.phone,
				address: {
					province: data.province,
					city: data.city,
					district: data.district
				},
				area: data.detail.split(',')[len],
				default: data.is_default == 1,
				id: data.id
			};
			this.addressDetail = data.province + data.city + data.district;
		}
		this.manageType = option.type;
		uni.setNavigationBarTitle({
			title
		});
	},
	methods: {
		// 选中经纬度
		clickMap() {
			uni.showLoading({
				title: '加载中'
			});
			let obj = this;
			// #ifndef APP-PLUS
			uni.chooseLocation({
				type: 'gcj02',
				success: function(res) {
					obj.addressLocation.name = res.name;
					console.log('位置名称：' + res.name);
					console.log('详细地址：' + res.address);
					console.log('纬度：' + res.latitude);
					console.log('经度：' + res.longitude);
					obj.addressLocation.latitude = res.latitude;
					obj.addressLocation.longitude = res.longitude;
				}
			});
			// #endif
			// #ifdef APP-PLUS
			uni.hideLoading();
			uni.getLocation({
				type: 'gcj02',
				success(e) {
					uni.chooseLocation({
						latitude: e.latitude,
						longitude: e.longitude,
						success(e) {
							obj.addressLocation = e;
							console.log(e,"123456")
						},
						fail(e) {
							uni.showModal({
								title:'地址选择错误',
								content:JSON.parse(e)
							})
							console.log(e);
						}
					});
				},fail(e) {
					uni.showModal({
						title:'定位错误',
						content:JSON.parse(e)
					})
				}
			});
			// uni.chooseLocation()
			// #endif
			
		},
		// 选中城市切换
		onCityClick({ data }) {
			let address = this.addressData.address;
			address.province = data[0];
			address.city = data[1];
			address.district = data[2];
			this.addressDetail = data.join(',');
		},
		
		// 选择地址
		cityChange:function(e) {
			console.log(e)
			let address = this.addressData.address;
			let type1 = e.detail.value[0];
			let type2 = e.detail.value[1];
			let type3 = e.detail.value[2];
			address.province = this.arrDate[0][type1];
			console.log(address.province)
			address.city = this.arrDate[1][type2];
			console.log(address.city)
			address.district = this.arrDate[2][type3];
			console.log(address.district)
			this.addressDetail = address.province + ' ' + address.city + ' ' + address.district;
		},
		
		// 设置是否为默认地址
		switchChange(e) {
			this.addressData.default = e.value;
		},
		//提交
		confirm() {
			let obj = this;
			let data = this.addressData;
			if (!data.name) {
				this.$api.msg('请填写收货人姓名');
				return;
			}
			if (!/(^1[3|4|5|7|8][0-9]{9}$)/.test(data.mobile)) {
				this.$api.msg('请输入正确的手机号码');
				return;
			}
			if (!data.address) {
				this.$api.msg('请在地图选择所在位置');
				return;
			}
			if (!data.area) {
				this.$api.msg('请填写门牌号信息');
				return;
			}
			if(data.area.length<4){
				this.$api.msg('请填写具体信息精确到门牌号');
				return;
			}
			if(obj.addressLocation.longitude == '') {
				this.$api.msg('请选择正确的定位地址');
				return;
			}
			if(obj.addressLocation.latitude == '') {
				this.$api.msg('请选择正确的定位地址');
				return;
			}
			//this.$api.prePage()获取上一页实例，可直接调用上页所有数据和方法，在App.vue定义
			addressEdit({
				type: 1,
				real_name: data.name,
				phone: data.mobile,
				address: {
					province: data.address.province,
					city: data.address.city,
					district: data.address.district
				},
				detail: obj.addressLocation.name + ',' + data.area,
				is_default: data.default,
				id: data.id || '',
				longitude: obj.addressLocation.longitude,
				latitude: obj.addressLocation.latitude,
			}).then(function(e) {
				uni.showToast({
					title: '提交成功',
					duration: 2000,
					icon: 'none'
				});
				setTimeout(function() {
					console.log('返回');
					uni.navigateBack();
				}, 800);

				obj.$api.prePage().refreshList();
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background: $page-color-base;
	padding-top: 16rpx;
}

.row {
	display: flex;
	align-items: center;
	position: relative;
	padding: 0 30rpx;
	height: 110rpx;
	background: #fff;

	.tit {
		flex-shrink: 0;
		width: 120rpx;
		font-size: 30rpx;
		color: $font-color-dark;
	}
	.input {
		flex: 1;
		font-size: 30rpx;
		color: $font-color-dark;
	}
	.iconlocation {
		font-size: 36rpx;
		color: $font-color-light;
	}
}
.default-row {
	margin-top: 16rpx;
	.tit {
		flex: 1;
	}
	switch {
		transform: translateX(16rpx) scale(0.9);
	}
}
.add-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 690rpx;
	height: 80rpx;
	margin: 60rpx auto;
	font-size: $font-lg;
	color: #fff;
	background-color: $base-color;
	border-radius: 10rpx;
	// box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
}

.alert-box {
	background-color: #ffffff;
}
</style>