邓洁 ：发布表单区域街道联动

pages/publish/publishInvestment/publishInvestment.vue

@@ -21,8 +21,9 @@
 				<view class="arrow-icon">
 					<u-icon name="arrow-right" size="30px" @click="show1 = true"></u-icon>
 				</view>
-				<u-picker :columns="regionColumns" :show="show1" :closeOnClickOverlay="true" @close="show1 = false"
-					v-model="form.region" @confirm="regionConfirm"></u-picker>
+				<u-picker :columns="[regionColumns]" ref="regionPicker" :show="show1" :closeOnClickOverlay="true"
+					@close="show1 = false" v-model="form.region" @confirm="regionConfirm"
+					@change="changeRegionHandler"></u-picker>
 			</u-form-item>
 			<u-form-item label="项目地址" label-position="top" border-bottom="true" prop="address" label-width="auto">
 				<u-input v-model="form.address" placeholder="请输入项目地址" placeholder-class="input-class" border="none"
@@ -39,17 +40,20 @@
 					:columns="[Classcolumns]" v-model="form.business" @confirm="tradeConfirm"></u-picker>
 			</u-form-item>
 			<u-form-item label="面积" label-position="top" border-bottom="true" label-width="auto" prop="area">
-				<u-input v-model="form.area" placeholder="请输入店铺面积" placeholder-class="input-class" border="none" type="number"></u-input>
+				<u-input v-model="form.area" placeholder="请输入店铺面积" placeholder-class="input-class" border="none"
+					type="number"></u-input>
 			</u-form-item>
 			<u-form-item label="租金（元/月）" label-position="top" border-bottom="true" label-width="auto" prop="rent">
-				<u-input v-model="form.rent" placeholder="请输入店铺租金" placeholder-class="input-class" border="none" type="number"></u-input>
+				<u-input v-model="form.rent" placeholder="请输入店铺租金" placeholder-class="input-class" border="none"
+					type="number"></u-input>
 			</u-form-item>
 			<u-form-item label="联系人" label-position="top" border-bottom="true" label-width="auto" prop="contactPerson">
 				<u-input v-model="form.contactPerson" placeholder="请输入联系人姓名" placeholder-class="input-class"
 					border="none"></u-input>
 			</u-form-item>
 			<u-form-item label="手机号码" label-position="top" border-bottom="true" label-width="auto" prop="phone">
-				<u-input v-model="form.phone" placeholder="请输入联系人手机号码" placeholder-class="input-class" border="none" type="number"></u-input>
+				<u-input v-model="form.phone" placeholder="请输入联系人手机号码" placeholder-class="input-class" border="none"
+					type="number"></u-input>
 			</u-form-item>
 			<u-form-item label="详情介绍" label-position="top" border-bottom="true" label-width="auto" prop="details">
 				<u-input v-model="form.details" placeholder="请输入介绍详情" placeholder-class="input-class" border="none"></u-input>
@@ -69,6 +73,9 @@
 				imageLength: 0,
 				fileList1: [],
 				regionColumns: [],
+				regionSecondColumns: [],
+				regionId: [],
+				regionCheckId: '',
 				form: {
 					title: '',
 					region: '',
@@ -226,6 +233,8 @@
 					}
 					let data = {
 						...this.form,
+						address: this.form.region.split('-')[1] + this.form.address,
+						region: this.form.region.split('-')[0],
 						images: temp.join(',')
 					}
 					console.log("项目招商:", data)
@@ -255,13 +264,53 @@
 				// console.log('changeAddress', e);
 				this.getAddressList(e)
 			},
+			changeRegionHandler(e) {
+				const {
+					columnIndex,
+					value,
+					values, // values为当前变化列的数组内容
+					index,
+					// 微信小程序无法将picker实例传出来，只能通过ref操作
+					picker = this.$refs.regionPicker
+				} = e
+				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
+				if (columnIndex === 0) {
+					// picker为选择器this实例，变化第二列对应的选项
+					this.regionCheckId = this.regionId[index]
+					const that = this
+					uni.request({
+						url: 'https://apis.map.qq.com/ws/district/v1/getchildren?id=' + that.regionCheckId + '&key=' +
+							that.$api.key,
+						success(res) {
+							that.regionSecondColumns = res.data.result[0].map(item => item.fullname)
+							picker.setColumnValues(1, that.regionSecondColumns)
+						},
+						fail(err) {
+							console.log('请求区域失败：', err);
+						}
+					})
+				}
+			},
 			getRegionList() {
 				var that = this
 				uni.request({
 					url: 'https://apis.map.qq.com/ws/district/v1/getchildren?id=' + uni.getStorageSync('city_code') + '&key=' +
 						that.$api.key,
 					success(res) {
-						that.regionColumns = [res.data.result[0].map(item => item.fullname)]
+						that.regionColumns = res.data.result[0].map(item => item.fullname)
+						that.regionId = res.data.result[0].map(item => item.id)
+						var that1 = that
+						uni.request({
+							url: 'https://apis.map.qq.com/ws/district/v1/getchildren?id=' + that1.regionId[0] + '&key=' +
+								that1.$api.key,
+							success(res) {
+								that1.regionSecondColumns = res.data.result[0].map(item => item.fullname)
+								that1.$refs.regionPicker.setColumnValues(1, that1.regionSecondColumns)
+							},
+							fail(err) {
+								console.log('请求区域失败：', err);
+							}
+						})
 					},
 					fail(err) {
 						console.log('请求区域失败：', err);
@@ -274,7 +323,6 @@
 					url: 'https://apis.map.qq.com/ws/geocoder/v1/?address=' + that.form.region + value + '&key=' +
 						that.$api.key,
 					success(res) {
-						console.log('diz', res.data.result.location);
 						if (res.data.message == "query ok") {
 							// console.log('lat', res.data.result.location.lat);
 							that.form.latitude = res.data.result.location.lat
@@ -306,7 +354,7 @@
 			},
 			regionConfirm(e) {
 				this.show1 = false
-				this.form.region = e.value[0]
+				this.form.region = e.value[0] + '-' + e.value[1]
 			},
 			getDetail(type, id) {
 				console.log('type, id', type, id);