H5_module/mine/editAddress/editAddress.vue

<template>
	<!--pages/editAddress/editAddress.wxml-->
	<form @submit="formSubmit">
		<view class="list">
			<view class="li">
				<text>收货人</text>
				<view class="item">
					<input name="name" :value="form.userName" placeholder="请填写收货人姓名"></input>
				</view>
			</view>
			<view class="li">
				<text>手机号</text>
				<view class="item">
					<input type="number" maxlength="11" name="phone" :value="form.telNumber"
						placeholder="请填写手机号"></input>
				</view>
			</view>
			<view class="li">
				<text>所在地区</text>
				<!-- #ifdef MP-WEIXIN -->
				<picker class="item" mode="region" @change="bindRegionChange" :value="region" :custom-item="customItem">
					<view class="picker">{{ region.length > 0 ? region[0] + region[1] + region[2] : '请选择所在地区' }}</view>
				</picker>
				<!-- <image src="/static/pages/images/more.png" class="rico"></image> -->
				<image src="../static/mine/images/fbico2.png" class="loca" @click="chooseLocation()"></image>
				<!-- #endif -->
				<!-- #ifndef MP-WEIXIN -->
				<pickerAddress class="item" @change="bindAddressChange">
					<view class="picker">{{ region.length > 0 ? region[0] + region[1] + region[2] : '请选择所在地区' }}</view>
				</pickerAddress>
				<image src="../static/mine/images/fbico2.png" class="loca" @click="chooseLocation()"></image>
				<!-- #endif -->
			</view>
			<view class="li">
				<text>详细信息</text>
				<view class="item">
					<input name="house" :value="form.detailInfo" placeholder="如街道、门牌号"></input>
				</view>
			</view>
		</view>
		<view class="list moren">
			<view class="li">
				<text>设为默认</text>
				<view class="item she">
					<image :src="isDefault ? '/static/pages/images/gou_h.png' : '/static/pages/images/gou.png'"
						class="check" @tap="setDefault"></image>
				</view>
			</view>
		</view>
		<view class="btn dflex">
			<view class="del" @tap="deleteAddress" v-if="!isOpen">删除</view>
			<button class="submit fflex" form-type="submit">确定</button>
		</view>
	</form>
</template>

<script>
	import pickerAddress from '../../components/wangding-pickerAddress/wangding-pickerAddress.vue';
	
	const req = require("../../utils/request.js"); // 引入SDK核心类
	// 引入SDK核心类
	var QQMapWX = require("../../utils/qqmap.js");

	export default {
		data() {
			return {
				region: [],
				isDefault: false,
				isChoose: false,
				form: {},
				once: false,
				address: "",
				isOpen: false, //是否从开通健康卡进入
			};
		},

		components: { pickerAddress },
		props: {},
		onLoad: function(options) {
			this.id = options.id;
			this.addressId = options.addressId;
			if (options.isOpen) this.isOpen = true;
			this.chooseAddress(); // 实例化API核心类

			QQMapWX.initMap(req.public.mapLBSKEY);
		},
		methods: {
			chooseLocation() {
				var tha = this;
				uni.chooseLocation({
					success: function(res) {
						if (res.name) {
							tha.form.detailInfo = res.name;
							tha.reverseGeocoder(res);
							console.log('地址数据》》》：', res);
						}
					}
				});
			},
			reverseGeocoder(location) {
				QQMapWX.initMap(req.public.mapLBSKEY);
				QQMapWX.reverseGeocoder(location, data => {
					this.region = [data.ad_info.province, data.ad_info.city, data.ad_info.district]
					console.log('解析后的地址地址数据：', data);
				});
			},

			bindRegionChange(event) {
				this.region = event.detail.value;
			},

			bindAddressChange(data) {
				this.region = data.data;
			},

			setDefault() {
				this.setData({
					isDefault: !this.isDefault
				});
			},

			chooseAddress() {
				let _ts = this;

				req.getRequest('/api/address/get', {
					id: this.id
				}, res => {
					// console.log(res);
					const form = {
						id: res.id,
						userName: res.name,
						telNumber: res.phone,
						detailInfo: res.house
					};

					_ts.setData({
						form: form,
						isDefault: res.isDefault,
						region: res.region.split(',')
					});
				});
			},

			formSubmit(event) {
				let data = event.detail.value;
				if (!data.name) return req.msg('请填写收货人姓名');
				data.name = req.excludeSpecial(data.name);
				if (!data.phone) return req.msg('请填写手机号');
				if (this.region.length == 0) return req.msg('请选择收货人地区');
				data.address = this.region.join('');
				data.region = this.region.join(',');
				if (!data.house) return req.msg('请输入详细地址');
				data.isDefault = this.isDefault ? 1 : 0;
				let that = this; //进行地址解析

				data.id = this.form.id;
				QQMapWX.geocoder(data.address + data.house, res => {
					if(res){
						data.lat = res.location.lat;
						data.lng = res.location.lng;
					}
					
					// if (res.deviation < 0 || res.reliability < 7) return req.msg('请输入详细的街道及门牌号');
					let isShowLoading = false;
					if (this.once) return false;
					this.setData({
						once: true
					});

					if (!isShowLoading) {
						req.loadIng('保存中');
						isShowLoading = true;
					}

					req.postRequest('/api/address/save', data, dto => {
						// 如果选择的地址和修改的地址一致就修改提交订单页面的地址
						if (this.addressId == this.id) {
							let pages = getCurrentPages();
							var prevPage = pages[pages.length - 3];
							prevPage.$vm.setData({
								address: data
							});
						}
						if (this.isOpen) {
							let pages = getCurrentPages();
							var prevPage = pages[pages.length - 2];
							prevPage.$vm.setData({
								address: data
							});
						}

						if (isShowLoading) {
							uni.hideLoading();
							uni.navigateBack();
							isShowLoading = false;
						}
					});
				});
			},

			deleteAddress() {
				let that = this;
				req.msgConfirm('确定删除该地址', () => {
					req.postRequest('/api/address/delete', {
						id: that.form.id
					}, () => {
						uni.navigateBack();
					});
				});
			}

		}
	};
</script>
<style>
	@import "./editAddress.css";
</style>