地区选择器

This commit is contained in:
yanran200730
2022-01-13 16:47:34 +08:00
parent c1378fca9e
commit 1847db5fdc
7 changed files with 131 additions and 85 deletions

View File

@@ -7,11 +7,11 @@
<div class="label" v-if="addressArea">{{ addressArea }}</div>
<i v-else>请选择</i>
</AiArea> -->
<AiAreaPicker ref="area" class="aiArea" :name.sync="addressArea" :areaId="areaId" mode="custom"
<ai-area-picker ref="area" class="aiArea" :value="addressAreaId" :name.sync="addressArea" :areaId="areaId" mode="custom"
@select="onChange">
<span class="label" v-if="addressArea">{{ addressArea }}</span>
<i v-else>请选择</i>
</AiAreaPicker>
</ai-area-picker>
</div>
<div class="list-wrapper">
<div class="tab">
@@ -45,6 +45,7 @@
</template>
<script>
import AiAreaPicker from '@/components/AiAreaPicker'
export default {
name: 'list',
@@ -62,6 +63,10 @@ export default {
}
},
components: {
AiAreaPicker
},
created() {
uni.showLoading()
this.areaId = this.$store.state.user.areaId
@@ -86,7 +91,7 @@ export default {
},
onChange(e) {
this.addressAreaId = e.id
this.addressAreaId = e
this.$nextTick(() => {
this.reload()

View File

@@ -3,7 +3,7 @@
<div class="area">
<i>可选范围</i>
<span class="separat">/</span>
<AiAreaPicker ref="area" class="aiArea" :areaId="areaId" :name.sync="addressArea" mode="custom"
<AiAreaPicker ref="area" class="aiArea" :value="addressAreaId" :areaId="areaId" :name.sync="addressArea" mode="custom"
@select="onChange">
<span class="label" v-if="addressArea">{{ addressArea }}</span>
<i v-else>请选择</i>
@@ -100,7 +100,7 @@ export default {
},
onChange(e) {
this.addressAreaId = e.id
this.addressAreaId = e
this.$nextTick(() => {
this.reload()

View File

@@ -33,15 +33,12 @@
<span>地址</span>
</div>
<div class="right">
<!-- <AiArea class="aiArea" v-model="form.addressAreaId" mode="custom" fullname :areaRange="$areaId" :name.sync="form.addressArea">
<span class="label" v-if="form.addressArea">{{ form.addressArea }}</span>
<i v-else>请选择</i>
<u-icon name="arrow-right" color="#ddd"/>
</AiArea> -->
<AiAreaPicker ref="address" class="aiArea" :areaId="$areaId" mode="custom" all @select="onAreaChange">
<span class="label" v-if="form.addressArea">{{ form.addressArea }}</span>
<i v-else>请选择</i>
<u-icon name="arrow-right" color="#ddd"/>
<AiAreaPicker ref="address" class="aiArea" :fullName.sync="form.addressArea" :value="form.addressAreaId" :areaId="$areaId" mode="custom" all @select="onAreaChange">
<div class="aiArea">
<span class="label" v-if="form.addressArea">{{ form.addressArea }}</span>
<i v-else>请选择</i>
<u-icon name="arrow-right" color="#ddd"/>
</div>
</AiAreaPicker>
</div>
</div>
@@ -81,11 +78,13 @@
<span>安置地区</span>
</div>
<div class="right">
<AiAreaPicker ref="area" class="aiArea" :areaId.sync="form.placeAreaId" mode="custom" all
<AiAreaPicker ref="area" class="aiArea" :value="form.placeAreaId" :fullName.sync="form.placeArea" mode="custom" all
@select="onChange">
<span class="label" v-if="form.placeArea">{{ form.placeArea }}</span>
<i v-else>请选择</i>
<u-icon name="arrow-right" color="#ddd"/>
<div class="aiArea">
<span class="label" v-if="form.placeArea">{{ form.placeArea }}</span>
<i v-else>请选择</i>
<u-icon name="arrow-right" color="#ddd"/>
</div>
</AiAreaPicker>
</div>
</div>
@@ -174,25 +173,11 @@ export default {
},
onAreaChange(e) {
this.form.addressAreaId = e.id
const areaList = this.$refs.address.fullArea
let fullAreaName = ''
areaList.forEach(item => {
fullAreaName = fullAreaName + item.name
})
this.form.addressArea = fullAreaName.replace('全国', '')
this.form.addressAreaId = e
},
onChange(e) {
this.form.placeAreaId = e.id
const areaList = this.$refs.area.fullArea
let fullAreaName = ''
areaList.forEach(item => {
fullAreaName = fullAreaName + item.name
})
this.form.placeArea = fullAreaName.replace('全国', '')
this.form.placeAreaId = e
},
getInfo(id) {
@@ -218,6 +203,11 @@ export default {
align-items: center;
.label {
max-width: 480px;
height: 112px;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
color: #303133 !important;
font-size: 30px;
}