From 105aecb255860357300a718f09516ce5a9ebd7ae Mon Sep 17 00:00:00 2001
From: hot777zz <912275990@qq.com>
Date: Sun, 26 Nov 2023 17:14:22 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A2=81=E8=88=AA=EF=BC=9A=E8=A1=8C=E4=B8=9A?=
 =?UTF-8?q?=E4=B8=8E=E4=B8=9A=E6=80=81=E4=B8=A4=E7=BA=A7=E8=81=94=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../publish/publishAddress/publishAddress.vue |  2 +-
 pages/publish/publishRent/publishRent.vue     | 51 ++++++++++++----
 .../publishTransfer/publishTransfer.vue       | 60 ++++++++++++-------
 3 files changed, 77 insertions(+), 36 deletions(-)

diff --git a/pages/publish/publishAddress/publishAddress.vue b/pages/publish/publishAddress/publishAddress.vue
index fe4e49d..21c0b2c 100644
--- a/pages/publish/publishAddress/publishAddress.vue
+++ b/pages/publish/publishAddress/publishAddress.vue
@@ -40,7 +40,7 @@
 				<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="transferFee">
-				<u-input v-model="form.transferFee" placeholder="请输入预计投资" placeholder-class="input-class"
+				<u-input v-model="form.transferFee" placeholder="请输入预计投资" placeholder-class="input-class" type="number"
 					border="none"></u-input>
 			</u-form-item>
 			<u-form-item label="租金（元/月）" label-position="top" border-bottom="true" label-width="auto" prop="rent">
diff --git a/pages/publish/publishRent/publishRent.vue b/pages/publish/publishRent/publishRent.vue
index 54097a9..a9c2a65 100644
--- a/pages/publish/publishRent/publishRent.vue
+++ b/pages/publish/publishRent/publishRent.vue
@@ -28,15 +28,15 @@
 				<u-input v-model="form.address" placeholder="请输入店铺地址" placeholder-class="input-class" border="none"
 					@focus="changeAddressFocus" @blur="changeAddress"></u-input>
 			</u-form-item>
-			<u-form-item label="适合行业" label-position="top" border-bottom="true" class="picker" label-width="auto"
+			<u-form-item label="行业" label-position="top" border-bottom="true" class="picker" label-width="auto"
 				prop="business">
-				<text @click="show2 = true" class="checkedtext" v-if="form.business.length>0">{{form.business}}</text>
-				<text @click="show2 = true" class="checktext" v-else>请选择店铺行业</text>
+				<text @click="show2 = true" class="checkedtext" v-if="form.business">{{form.business}}-{{form.commercial}}</text>
+				<text @click="show2 = true" class="checktext" v-else>请选择店铺行业与业态</text>
 				<view class="arrow-icon">
 					<u-icon name="arrow-right" size="30px" @click="show2 = true"></u-icon>
 				</view>
-				<u-picker mode="region" :show="show2" :closeOnClickOverlay="true" @close="show2 = false"
-					:columns="[Classcolumns]" v-model="form.business" @confirm="tradeConfirm"></u-picker>
+				<u-picker mode="region" :show="show2" :closeOnClickOverlay="true" @close="show2 = false" ref="uPicker"
+					:columns="[Classcolumns]" v-model="form.business" @confirm="tradeConfirm" @change="changeHandler"></u-picker>
 			</u-form-item>
 			<!-- <u-form-item label="业态" label-position="top" border-bottom="true" label-width="auto" prop="commercial">
 				<text @click="chooseCommercial" class="checkedtext" v-if="form.commercial.length>0">{{form.commercial}}</text>
@@ -303,16 +303,35 @@
 					}
 				})
 			},
+			changeHandler(e) {
+			                const {
+			                    columnIndex,
+			                    value,
+			                    values, // values为当前变化列的数组内容
+			                    index,
+								// 微信小程序无法将picker实例传出来，只能通过ref操作
+			                    picker = this.$refs.uPicker
+			                } = e
+			                // 当第一列值发生变化时，变化第二列(后一列)对应的选项
+							console.log(e);
+			                if (columnIndex === 0) {
+			                    // picker为选择器this实例，变化第二列对应的选项
+								this.ClassCheckId = this.pid[index]
+								this.$api.getClassList(this.ClassCheckId).then(res => {
+								console.log(res);
+								this.Karmacolumns = res.data.data.map((item) => {
+									return item = item.name
+									})
+								picker.setColumnValues(1, this.Karmacolumns)
+								})
+			                    
+			                }
+			            },
 			tradeConfirm(e) {
 				this.show2 = false
 				this.form.business = e.value[0]
-				this.ClassCheckId = this.pid[e.indexs[0]]
-				this.$api.getClassList(this.ClassCheckId).then(res => {
-					// console.log(res);
-					this.Karmacolumns = res.data.data.map((item) => {
-						return item = item.name
-					})
-				})
+				this.form.commercial = e.value[1]
+				
 			},
 			karmaConfirm(e) {
 				this.show3 = false
@@ -384,8 +403,14 @@
 				})
 				this.pid = res.data.data.map((item) => {
 					return item = item.id
+					
+				})
+				this.$api.getClassList(9).then(res => {
+					this.Karmacolumns = res.data.data.map((item) => {
+						return item = item.name
+						})
+						this.$refs.uPicker.setColumnValues(1,this.Karmacolumns)
 				})
-
 			})
 		},
 		computed: {
diff --git a/pages/publish/publishTransfer/publishTransfer.vue b/pages/publish/publishTransfer/publishTransfer.vue
index cd94600..e1ed415 100644
--- a/pages/publish/publishTransfer/publishTransfer.vue
+++ b/pages/publish/publishTransfer/publishTransfer.vue
@@ -29,22 +29,13 @@
 			</u-form-item>
 			<u-form-item label="行业" label-position="top" border-bottom="true" class="picker" label-width="auto"
 				prop="business">
-				<text @click="show2 = true" class="checkedtext" v-if="form.business">{{form.business}}</text>
-				<text @click="show2 = true" class="checktext" v-else>请选择店铺行业</text>
+				<text @click="show2 = true" class="checkedtext" v-if="form.business">{{form.business}}-{{form.commercial}}</text>
+				<text @click="show2 = true" class="checktext" v-else>请选择店铺行业与业态</text>
 				<view class="arrow-icon">
 					<u-icon name="arrow-right" size="30px" @click="show2 = true"></u-icon>
 				</view>
-				<u-picker mode="region" :show="show2" :closeOnClickOverlay="true" @close="show2 = false"
-					: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="commercial">
-				<text @click="chooseCommercial" class="checkedtext" v-if="form.commercial">{{form.commercial}}</text>
-				<text @click="chooseCommercial" class="checktext" v-else>请选择店铺业态</text>
-				<view class="arrow-icon">
-					<u-icon name="arrow-right" size="30px" @click="chooseCommercial"></u-icon>
-				</view>
-				<u-picker mode="region" :show="show3" :closeOnClickOverlay="true" @close="show3 = false"
-					:columns="[Karmacolumns]" v-model="form.commercial" @confirm="karmaConfirm"></u-picker>
+				<u-picker mode="region" :show="show2" :closeOnClickOverlay="true" @close="show2 = false" ref="uPicker"
+					:columns="[Classcolumns]" v-model="form.business" @confirm="tradeConfirm" @change="changeHandler"></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>
@@ -325,20 +316,38 @@
 					}
 				})
 			},
+			changeHandler(e) {
+			                const {
+			                    columnIndex,
+			                    value,
+			                    values, // values为当前变化列的数组内容
+			                    index,
+								// 微信小程序无法将picker实例传出来，只能通过ref操作
+			                    picker = this.$refs.uPicker
+			                } = e
+			                // 当第一列值发生变化时，变化第二列(后一列)对应的选项
+							console.log(e);
+			                if (columnIndex === 0) {
+			                    // picker为选择器this实例，变化第二列对应的选项
+								this.ClassCheckId = this.pid[index]
+								this.$api.getClassList(this.ClassCheckId).then(res => {
+								console.log(res);
+								this.Karmacolumns = res.data.data.map((item) => {
+									return item = item.name
+									})
+									picker.setColumnValues(1, this.Karmacolumns)
+								})
+			                    
+			                }
+			            },
 			tradeConfirm(e) {
 				this.show2 = false
 				this.form.business = e.value[0]
-				this.ClassCheckId = this.pid[e.indexs[0]]
-				this.$api.getClassList(this.ClassCheckId).then(res => {
-					// console.log(res);
-					this.Karmacolumns = res.data.data.map((item) => {
-						return item = item.name
-					})
-				})
+				this.form.commercial = e.value[1]
 			},
 			karmaConfirm(e) {
 				this.show3 = false
-				this.form.commercial = e.value[0]
+				
 			},
 			regionConfirm(e) {
 				this.show1 = false
@@ -407,8 +416,15 @@
 				this.pid = res.data.data.map((item) => {
 					return item = item.id
 				})
-
+				this.$api.getClassList(9).then(res => {
+					this.Karmacolumns = res.data.data.map((item) => {
+						return item = item.name
+						})
+						this.$refs.uPicker.setColumnValues(1,this.Karmacolumns)
+				})
 			})
+			
+		
 		},
 		computed: {
 			isChecked(index) {