基于uView组件库封装的地址选择弹框组件

在用uniapp做h5页面时，需要一个类似京东的地址选择弹框组件，故基于uView自己动手封装了一个（如若需要做回显，可以绑定v-model，然后监听value的变化；或者直接在调用open方法时从外部传入参数过来，请自行更改）。

组件region-selection页面如下：

<template><u-popup :show="show" :round="10" mode="bottom" @close="close" :closeable="true"><view style="height: 500px"><view><u--text text="所在地区" margin="30rpx 0" size="18" bold align="center"></u--text></view><!-- 当前选中的地区 --><view class="hasSelected"><view v-for="(item, index) in result" :key="index" :class="index === current ? 'item active' : 'item'"@click="resultChange(item, index)">{{ item.label }}</view></view><!-- 地区数据展示区 --><view><u-list showScrollbar height="380px" v-if="!isFail"><u-list-item v-for="(item, index) in list" :key="index"><u-cell @click="listChange" :name="JSON.stringify(item)"><view slot="title"><u--text :suffixIcon="result[current].value === item.dmbm ? 'checkbox-mark' : ''"iconStyle="font-size: 25px;color:#f56c6c;margin-left:30rpx;" :text="item.dmmc"size="18" :bold="result[current].value === item.dmbm"></u--text></view></u-cell></u-list-item></u-list><u-empty v-else mode="data" text="请求失败"><u-button @click="refresh" type="primary" class="mt-20">重新请求</u-button></u-empty></view></view></u-popup>
</template><script>
/*** @Date 2024-03-01* @Description 基于uView（https://www.uviewui.com/components/intro.html）组件封装的地区选择组件*/
import { getXzqhList } from '@/common/api/common';export default {name: 'region-selection',props: {// value: {//     type: Array,//     required: true// }},watch: {// value: {//     immediate: true,//     handler(newValue, oldValue) {//         if (newValue && newValue.length > 0) {//             this.result = newValue;//         } else {//             this.result = [{ label: '请选择', value: '' }]//         }//     }// }},data() {return {show: false,current: 0, //当前在第几层result: [{ label: '请选择', value: '', sjdm: '' }],list: [],isFail: false //控制是否请求失败};},methods: {//打开时展示第一层数据open() {this.show = true;this.current = 0;getXzqhList().then((res) => {this.isFail = false;this.list = res.data || [];}).catch(() => {this.isFail = true;});},//点击城市列表listChange({ name }) {try {const item = JSON.parse(name);this.result.splice(this.current, 1, { label: item.dmmc, value: item.dmbm, sjdm: item.sjdmbm });getXzqhList({ sjdmbm: item.dmbm }).then((res) => {this.isFail = false;this.list = res.data;if (this.list && this.list.length > 0) {//如果还有下一级城市this.result.splice(this.current + 1);this.current++;this.result.splice(this.current, 1, { label: '请选择', value: '', sjdm: '' });} else {//没有下一级城市了this.show = false;this.$emit('ok', this.result);// this.$emit('input', JSON.stringify(this.result));}}).catch(() => {this.isFail = true;});} catch (e) { }},//点击顶部已选择的城市resultChange(item, index) {if (item.value) {this.current = index;getXzqhList({ sjdmbm: item.sjdm }).then((res) => {this.isFail = false;this.list = res.data;}).catch(() => {this.isFail = true;});}},//重新加载refresh() {getXzqhList({ sjdmbm: this.result[this.current].sjdm }).then((res) => {this.isFail = false;this.list = res.data;}).catch(() => {this.isFail = true;});},close() {this.show = false;}}
};
</script><style scoped lang="scss">
.hasSelected {padding-bottom: 20rpx;border-bottom: 1px solid #4b4848;.item {font-size: 20px;display: inline;padding: 0 10rpx;}.active {color: #f56c6c;}
}
</style>

页面中使用：

<template><packPage><packHeader slot="gHeader" center title="新增地址"></packHeader><view slot="gBody" class="content"><view class="contentWrap"><u--form labelPosition="left" :model="form" :rules="formRules" labelWidth="90" ref="formRef"><u-gap height="8" bgColor="#f6f6f8"></u-gap><u-form-item label="所在地区" prop="xzdxzqhName" required @click="openRegion()" borderBottom><u--input v-model="form.xzdxzqhName" border="none" placeholder="请选择地区" readonly></u--input><u-icon name="arrow-right" slot="right"></u-icon></u-form-item><view style="padding: 5px 10px 0 7px"><span style="color: #f56c6c">*</span><span>详细地址</span></view><u-form-item label="" prop="pic1" borderBottom labelWidth="0"><u--textarea v-model="form.xxdz" placeholder="请输入详细地址，如小区、写字楼、门牌号等"></u--textarea></u-form-item></u--form><view style="width: 60%; display: flex; margin: 0 auto; padding: 50rpx 0"><u-button @click="submit" type="primary" shape="circle">提交</u-button></view></view></view><!--选择住址--><regionSelection ref="regionSelect" @ok="confirmRegion"></regionSelection></packPage>
</template><script>
import regionSelection from '@/components/region-selection';
export default {components:{regionSelection},data() {return {form: {}};},methods: {openRegion(){this.$refs.regionSelect.open();},confirmRegion(data){let temp='';data.map(i=>temp+=i.label)this.$set(this.form, 'xzdxzqhName', temp);}}
};
</script>

地址选择组件内部只调用了一个接口，通过传入上级城市代码一层一层调用，第一层接口返回格式如下：

{"code": 200,"msg": "操作成功","data": [{"dmbm": "494","xzqhdm": "110000","dmmc": "北京市","sm": "北京市","dsm": null,"xqm": null,"sjdmbm": "0"},{"dmbm": "2955","xzqhdm": "120000","dmmc": "天津市","sm": "天津市","dsm": null,"xqm": null,"sjdmbm": "0"},{"dmbm": "237","xzqhdm": "130000","dmmc": "河北省","sm": "河北省","dsm": null,"xqm": null,"sjdmbm": "0"},{"dmbm": "1063","xzqhdm": "140000","dmmc": "山西省","sm": "山西省","dsm": null,"xqm": null,"sjdmbm": "0"},]}