renshou/mine/addAddress/addAddress.vue

<template>
	<!--pages/addAddress/addAddress.wxml-->
	<form @submit="formSubmit">
		<view class="wxaddr dflex">
			<text>获取微信收件地址</text>
			<view class="wechat dflex" @tap="chooseAddress">
				<image src="/static/pages/images/wxico.png"></image>立即获取
			</view>
		</view>
		<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 name="phone" :value="form.telNumber" placeholder="请填写手机号"></input>
				</view>
			</view>
			<view class="li">
				<text>所在地区</text>
				<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>
			</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>
	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: {},
		props: {},
		onLoad: function(options) {
			if (options && options.isChoose) this.isChoose = options.isChoose; // 实例化API核心类

			QQMapWX.initMap('3OJBZ-EQEKO-PFNWC-SHHEK-CGWAJ-KRBF7');
		},
		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();
				QQMapWX.reverseGeocoder(location, data => {
					this.region = [data.ad_info.province, data.ad_info.city, data.ad_info.district]
					console.log('解析后的地址地址数据：', data);
				});
			},
			bindRegionChange(event) {
				this.setData({
					region: event.detail.value
				});
				// console.log(event);
			},

			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);
					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>