编辑地址功能调整

src/pages/mine/address/addSite.vue

@@ -4,17 +4,17 @@
 		<view class="top">
 			<view class="item">
 				<view class="left">收货人</view>
-				<input disabled v-model="name" type="text" placeholder-class="line" placeholder="请填写收货人姓名" />
+				<input :disabled="nameStatus" v-model="name" type="text" placeholder-class="line" placeholder="请填写收货人姓名" />
 			</view>
 			<view class="item">
-				<view class="left">手机号码</view>
-				<input disabled v-model="mobile" type="text" placeholder-class="line" placeholder="请填写收货人手机号" />
+				<view class="left">电话号码</view>
+				<input :disabled="mobileStatus" v-model="mobile" type="text" placeholder-class="line" placeholder="请填写收货人手机号" />
 			</view>
-			
+
 			<view class="item">
 				<view class="left">所在地区</view>
-				<input @tap="showRegionPicker" disabled v-model="region" type="text" placeholder-class="line" placeholder="省市区县、乡镇等" />
-				<u-icon @click="autoLocation" class="right" name="map"  label="定位" label-size="24" label-color="#2272FF" />
+				<input @tap="showRegionPicker" disabled v-model="formatRegion" type="text" placeholder-class="line" placeholder="省市区县、乡镇等" />
+				<u-icon @click="autoLocation" class="right" name="map" label="定位" label-size="24" label-color="#2272FF" />
 			</view>
 			<u-field
 				class="item-address"
@@ -26,13 +26,10 @@
 				type="textarea"
 				:auto-height="false"
 				:border-bottom="false"
-			>
-			</u-field>
+			></u-field>
 		</view>
 		<view class="bottom">
-			<button class="btn, bottom-btn" @click="show = true">
-				<text class="button-text">保存</text>
-			</button>
+			<button class="btn, bottom-btn" @click="show = true"><text class="button-text">保存</text></button>
 			<!-- <view class="default">
 				<view class="left">
 					<view class="set">设置默认地址</view>
@@ -41,149 +38,211 @@
 				<view class="right"><switch color="red" @change="setDefault" /></view>
 			</view> -->
 		</view>
-		<u-picker mode="region" ref="uPicker" v-model="showPicker" :params="params" @confirm="confirmRegion" />
-		<u-popup 
-			border-radius="12"
-			width="690"
-			height="520"
-			v-model="show" 
-			mode="center">
+		<u-picker mode="region" v-model="showPicker" :default-region="region" @confirm="confirmRegion" />
+		<u-popup border-radius="12" width="690" height="520" v-model="show" mode="center">
 			<view class="save-pop">
 				<view class="header">确认保存信息</view>
-				<view class="content">
-					<view class="tips">您填写的信息尚未保存，是否保存</view>
-				</view>
+				<view class="content"><view class="tips">您填写的信息尚未保存，是否保存</view></view>
 			</view>
 			<view class="pop-bottom">
 				<button class="plain" @click="show = false" shape="circle" :plain="true">不保存</button>
-				<button 
-					class="solid"
-					shape="circle"
-					@click="$u.throttle(submitForm, 500)"
-					:loading="submiting"
-					:disabled="disabledSubmit">保存</button>
+				<u-button :custom-style="submitBtn" shape="circle" @click="submitForm" :disabled="disabledSubmit">保存</u-button>
 			</view>
 		</u-popup>
 	</view>
 </template>
 
 <script>
-let r = require("libs/bmap-wx.min.js");
+/**
+ * addSite 新增地址|修改地址|选择地址（返回选择地址信息）
+ * @description 编辑地址共通页
+ * @property {String} type 编辑类型（默认为修改，add--新增、edit--修改、select--选择）
+ * @property {String} info 地址信息（json字符串：包含地址信息）
+ */
+let r = require('libs/bmap-wx.min.js');
 let h = new r.BMapWX({
-	ak: process.uniEnv.bmapAK
+	// ak: process.uniEnv.bmapAK,
+	ak: 'G1wPip2Oj62NnoUctXhiE1faZVHbeo2A'
 });
 export default {
 	data() {
 		return {
-			title: '新增地址',
+			title: '修改地址',
+			siteInfo: null,
+			siteType: 'edit',
 			show: false,
 			location: '',
 			address: '',
 			type: '充电桩安装',
-			name: '--',
+			name: '',
 			mobile: '',
+			nameStatus: true,
+			mobileStatus: true,
 			settled: null,
-			region: [],
+			adcode: '',
 			regionObj: [],
+			region: [],
 			showPicker: false,
-			params: {
-				province: true,
-				city: true,
-				area: true
-			},
+			loading: true
 		};
 	},
-	computed: {},
+	computed: {
+		formatRegion() {
+			return this.region.join(' ');
+		},
+		submitBtn() {
+			return {
+				color: '#FFFFFF',
+				backgroundColor: '#2272FF'
+			};
+		}
+	},
 	async onLoad(e) {
-		getApp().trackPage('我的收获地址修改页')
-		if(e && e.title) {
-			this.title = decodeURIComponent(e.title)
+		getApp().trackPage('我的收获地址修改页');
+		if (!this.vuex_token) {
+			this.$u.route({ url: 'pages/login/index' });
 		}
-		if(!this.vuex_token) {
-			this.$u.route({url: 'pages/login/index'})
+		if (e) {
+			if (e.type === 'add') {
+				this.title = '新增地址';
+				this.siteType = 'add';
+			} else if (e.type === 'select') {
+				this.title = '选择地址';
+				this.siteType = 'select';
+			} else if (e.info && this.$u.test.jsonString(e.info)) {
+				// 默认修改我的地址
+				this.siteInfo = JSON.parse(decodeURIComponent(e.info));
+			} else if (e.type == 'edit') {
+				this.title = '修改地址';
+				this.siteType = 'edit';
+			}
 		}
+	},
+	onShow() {
 		this.getData();
 	},
 	methods: {
-		async getData() {
-			const callback = (vm, res) => {
-				vm.settled = res.record
-				vm.address = vm.settled.address
-				vm.name = vm.settled.id_card_name
-				vm.mobile = vm.settled.mobile
-			}
-			if(this.vuex_settled && this.vuex_settled.record || null) {
-				callback(this, this.vuex_settled)
+		getData() {
+			if (this.siteType == 'add' || this.siteType == 'select') {
+				this.nameStatus = false;
+				this.mobileStatus = false;
+			} else if (this.siteType == 'edit') {
+				let address = '';
+				if (this.$u.test.isEmpty(this.siteInfo)) {
+					const callback = (vm, res) => {
+						this.settled = res.record;
+						if (this.loading) {
+							this.name = this.settled.id_card_name;
+							this.mobile = this.settled.mobile;
+							this.address = this.settled.address;
+							this.geocoding();
+						}
+						this.loading = this.$u.test.isEmpty(this.settled);
+					};
+					if (this.vuex_settled && this.vuex_settled.record) {
+						callback(this, this.vuex_settled);
+					} else {
+						getApp().getBaseInfo(this, callback);
+					}
+				} else {
+					if (this.loading) {
+						this.loading = false;
+						this.name = this.siteInfo.name;
+						this.mobile = this.siteInfo.mobile;
+						this.address = this.siteInfo.address;
+						this.geocoding();
+					}
+				}
 			}
-			getApp().getBaseInfo(this, callback);
 		},
 		showRegionPicker() {
-			this.showPicker = true
+			this.showPicker = true;
 		},
 		confirmRegion(params) {
-			this.regionObj = params
-			this.region = params.province.label+params.city.label+params.area.label
+			this.regionObj = params;
+			this.region = [params.province.label, params.city.label, params.area.label];
 		},
 		/**
 		 * 百度定位
 		 * @param {Object} long
 		 * @param {Object} lat
 		 */
-		baiduLocation(long, lat) {
-			console.log("11111111111", this.title)
-			let t = {
-				success: (res) => {
-					console.log('success:', res)
-					let e = res.wxMarkerData[0];
-					let i = e.address;
-					this.location = i;
-				},
-				fail: (res) => {
-					console.log('fail:', res)
-				}
-			}
+		regeocoding(lat, long) {
 			if (lat && long) {
-				let e = lat + "," + long
-				t.location = e
-				// t.coordtype = 'wgs84'
-				// t.latitude = lat
-				// t.longitude = long
-				console.log('regeocoding:', t)
-				h.regeocoding(t);
+				h.regeocoding({
+					location: lat + ',' + long,
+					success: data => {
+						console.log('regeocoding[success]:', data);
+						this.location = data.wxMarkerData[0];
+						let regeocod = data.originalData.result.addressComponent;
+						this.adcode = regeocod.adcode;
+						this.region = [regeocod.province, regeocod.city, regeocod.district];
+						let region = this.region.join('');
+						if (this.$u.test.contains(this.address, region)) {
+							this.address = this.address.replace(region, '');
+						}
+					},
+					fail: res => {
+						console.log('regeocoding[fail]:', res);
+					}
+				});
 			}
-			
 		},
-		
+		geocoding() {
+			if (this.address) {
+				let t = {
+					success: res => {
+						console.log('[geocoding][success]:', res);
+						let e = res.wxMarkerData[0];
+						if (e.longitude && e.latitude) {
+							this.regeocoding(e.latitude, e.longitude);
+						}
+					},
+					fail: res => {
+						console.log('[geocoding][fail]:', res);
+					}
+				};
+				t.address = this.address;
+				h.geocoding(t);
+			}
+		},
+
 		/**
 		 * 自动定位
 		 */
 		autoLocation() {
-			let that = this
+			let that = this;
 			uni.chooseLocation({
-				success: (res) => { 
-					this.baiduLocation(res.longitude, res.latitude)
+				success: res => {
+					this.address = res.address + res.name;
+					this.regeocoding(res.latitude, res.longitude);
 				},
 				fail: function(res) {
-					// uni.showToast({
-					// 	title: '定位失败'
-					// })
+					console.log('chooseLocation[fail]:', res);
 				}
 			});
-			
 		},
-		
+
 		async submitForm() {
-			let self = this
-			let params = {
-				type: self.type,
-				address: self.address
-			}
-			let res = await self.$u.api.syncAddress(params)
-			const callback = (vm, res) => {
-				vm.$u.route({type: 'back'})
-			}
-			if(res && res.code == 200) {
-				getApp().getBaseInfo(this, callback);
+			if (this.siteType === 'add') {
+			} else if (this.siteType === 'select') {
+			} else if (this.siteType === 'edit') {
+				if (this.$u.test.isEmpty(this.siteInfo)) {
+					let params = {
+						type: this.type,
+						address: this.region.join("") + this.address
+					};
+					let res = await this.$u.api.syncAddress(params);
+					const callback = (vm, res) => {
+						this.$u.route({ type: 'back' });
+						this.show = false
+					};
+					if (res && res.code == 200) {
+						getApp().getBaseInfo(this, callback);
+					}
+				} else {
+					
+				}
 			}
 		}
 	}
@@ -196,7 +255,7 @@ export default {
 	font-size: 28rpx;
 }
 .wrap {
-	background-color: #FFFFFF;
+	background-color: #ffffff;
 	width: 750rpx;
 	height: 100vh;
 	.top {
@@ -209,7 +268,7 @@ export default {
 			color: #333333;
 			line-height: 88rpx;
 			align-items: center;
-			border-bottom: solid 2rpx #F4F5F7;
+			border-bottom: solid 2rpx #f4f5f7;
 			.left {
 				width: 160rpx;
 				color: #999999;
@@ -218,15 +277,14 @@ export default {
 				text-align: left;
 				flex: auto;
 			}
-			
+
 			.textarea {
-				
 			}
 			.right {
 				margin-left: 30rpx;
 				font-size: 30rpx;
 				font-weight: 400;
-				color: #2272FF;
+				color: #2272ff;
 			}
 		}
 		.item-address {
@@ -236,7 +294,7 @@ export default {
 			/deep/ .u-field {
 				padding: 0;
 				padding-top: 30rpx;
-				border-bottom: solid 2rpx #F4F5F7;
+				border-bottom: solid 2rpx #f4f5f7;
 				.u-label {
 					color: #999999;
 					line-height: normal;
@@ -257,7 +315,7 @@ export default {
 					margin-left: 30rpx;
 					font-size: 30rpx;
 					font-weight: 400;
-					color: #2272FF;
+					color: #2272ff;
 					align-self: top;
 				}
 			}
@@ -281,7 +339,7 @@ export default {
 			}
 		}
 	}
-	
+
 	.save-pop {
 		padding: 0 30rpx;
 		.header {
@@ -289,7 +347,7 @@ export default {
 			font-size: 40rpx;
 			font-weight: bold;
 			color: #333333;
-			border-bottom: solid 2rpx #F4F5F7;
+			border-bottom: solid 2rpx #f4f5f7;
 			line-height: 40rpx;
 			padding: 60rpx 0 40rpx 0;
 		}
@@ -304,8 +362,6 @@ export default {
 				line-height: 28rpx;
 			}
 		}
-		
-		
 	}
 	/deep/ .pop-bottom {
 		padding: 0 16rpx;
@@ -319,12 +375,12 @@ export default {
 			padding: 0;
 		}
 		.plain {
-			border: 2px solid #2272FF;
-			color: #2272FF;
+			border: 2px solid #2272ff;
+			color: #2272ff;
 		}
 		.solid {
-			color: #FFFFFF;
-			background-color: #2272FF;
+			color: #ffffff;
+			background-color: #2272ff;
 		}
 	}
 }

src/pages/mine/address/index.vue

@@ -58,9 +58,9 @@ export default {
 		toAddSite(title){
 			this.$u.route({
 				url: 'pages/mine/address/addSite',
-				params: {
-					title: title
-				}
+				// params: {
+				// 	title: title
+				// }
 			})
 		}
 	}