H5_module/mine/addAddress/addAddress.vue

<template>
	<!--pages/addAddress/addAddress.wxml-->
	<form @submit="formSubmit">
		<!-- #ifdef MP-WEIXIN -->
		<view class="wxaddr dflex">
			<text>获取微信收件地址</text>
			<view class="wechat dflex" @tap="chooseAddress">
				<image src="/static/pages/images/wxico.png"></image>立即获取
			</view>
		</view>
		<!-- #endif -->
		<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/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>
				<!-- 	<view class="item" @click="chooseLocation()">
					<view :class="'picker' + (region.length > 0 ? '' : ' placeholder')">{{ region.length > 0 ? region[0] + region[1] + region[2] : '请选择所在地区' }}</view>
				</view>
				<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">
			<view class="li">
				<text>设为默认</text>
				<view class="item she" @tap="setDefault">
					<image :src="isDefault ? '/static/pages/images/gou_h.png' : '/static/pages/images/gou.png'"
						class="check"></image>
				</view>
			</view>
		</view>
		<button class="submit" form-type="submit">确定</button>
	</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: ""
			};
		},

		components: { pickerAddress },
		props: {},
		onLoad: function(options) {
			if (options && options.isChoose) this.isChoose = options.isChoose; // 实例化API核心类

			QQMapWX.initMap(req.public.mapLBSKEY);
		},
		methods: {
			chooseLocation() {
				var tha = this;
				uni.chooseLocation({
					success: function(res) {
						if (res.name) {
							tha.form.detailInfo = res.name;
							// #ifdef MP-WEIXIN
							tha.reverseGeocoder(res);
							// #endif
							// #ifndef MP-WEIXIN
							var reg = /.+?(省|市|自治区|自治州|县|区)/g;
							console.log(res.address.match(reg));
							tha.region = res.address
								.match(reg)
								.toString()
								.split(',');
							// #endif
						}
					}
				});
			},
			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;
				// console.log(event);
			},


			bindAddressChange(data) {
				this.region = data.data;
				// this.addIds = data.ids;
				// console.log('addIds====', this.addIds);
			},

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

			chooseAddress() {
				let _ts = this;

				req.scopeAddress(data => {
					// console.log(data);

					_ts.setData({
						form: data,
						region: [data.provinceName, data.cityName, data.countyName]
					});
				});
			},

			formSubmit(event) {
				let data = event.detail.value;
				// console.log(data);
				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; //进行地址解析

				QQMapWX.geocoder(data.address + data.house, res => {
					// console.log(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 (that.isChoose) {
							//选择地址
							let pages = getCurrentPages();
							var prevPage = pages[pages.length - 2];
							prevPage.$vm.setData({
								address: dto
							});
						}

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

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