odjbin/city-store-transfer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

梁航：表单二级联动

Browse Source
This commit is contained in:
hot777zz
2023-11-27 10:25:14 +08:00
parent 105aecb255
commit 7042c7e5d0
3 changed files with 76 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
pages/publish/publishAddress/publishAddress.vue
View File

@@ -18,23 +18,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.commercialForm}}</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="commercialForm">
<text @click="choosecommercialForm" class="checkedtext"
v-if="form.commercialForm">{{form.commercialForm}}</text>
<text @click="choosecommercialForm" class="checktext" v-else>请选择业态</text>
<view class="arrow-icon">
<u-icon name="arrow-right" size="30px" @click="choosecommercialForm"></u-icon>
</view>
<u-picker mode="region" :show="show3" :closeOnClickOverlay="true" @close="show3 = false"
:columns="[Karmacolumns]" v-model="form.commercialForm" @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>
@@ -217,6 +207,30 @@
this.show3 = true
}
},
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)
})
}
},
getRegionList() {
var that = this
uni.request({
@@ -233,17 +247,7 @@
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
})
})
},
karmaConfirm(e) {
this.show3 = false
this.form.commercialForm = e.value[0]
this.form.commercialForm = e.value[1]
},
regionConfirm(e) {
this.show1 = false
@@ -272,9 +276,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) {

53
pages/publish/publishInvestment/publishInvestment.vue
View File

@@ -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="area">
<u-input v-model="form.area" placeholder="请输入店铺面积" placeholder-class="input-class" border="none" type="number"></u-input>
@@ -83,6 +83,7 @@
longitude: '',
latitude: '',
id: '',
commercial: '',
},
Classcolumns: [],
@@ -255,6 +256,30 @@
// console.log('changeAddress', e);
this.getAddressList(e)
},
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)
})
}
},
getRegionList() {
var that = this
uni.request({
@@ -292,17 +317,11 @@
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
@@ -368,9 +387,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) {

1
pages/publish/publishRent/publishRent.vue
View File

@@ -396,6 +396,7 @@
} else {
console.log('发布');
}
this.getRegionList()
this.$api.getClassList().then(res => {
// console.log(res.data.data.length);
this.Classcolumns = res.data.data.map((item) => {