mint结合Android实现四级联动

template:

            <div :class="{borBm: activeCol == 5,region:true}">
                <span>收货地址：</span>
                <div @click="regionShow()" v-if="villageName =='[请选择]'">请选择<i class="mintui mintui-back"></i></div>
                <div @click="regionShow()" v-if="villageName !='[请选择]'">{{provinceName}}-{{cityName}}-{{countyName}}-{{villageName}}</div>
            </div>

        <mt-popup v-model="regionVisible" position="bottom" style="width: 100%">
            <div class="popupTop">
                <span @click="HiddenVisible()">确认</span>
            </div>
            <div class="region" style="display: flex">
                <mt-picker :slots="myAddressSlots1" valueKey="name" @change="addressChange1" :itemHeight="40" style="width: 25%"></mt-picker>
                <mt-picker :slots="myAddressSlots2" valueKey="name" @change="addressChange2" :itemHeight="40" style="width: 25%"></mt-picker>
                <mt-picker :slots="myAddressSlots3" valueKey="name" @change="addressChange3" :itemHeight="40" style="width: 25%"></mt-picker>
                <mt-picker :slots="myAddressSlots4" valueKey="name" @change="addressChange4" :itemHeight="40" style="width: 25%"></mt-picker>
            </div>
        </mt-popup>

data:

            regionVisible: false, //弹出框是否可见
            //省
            myAddressSlots1: [{
                flex: 1,
                values: [{
                    name: "北京市",
                    id: "1"
                }], //省份数组
                textAlign: 'center'
            }],
            //市
            myAddressSlots2: [{
                flex: 1,
                values: [{
                    name: "[请选择]",
                    id: -1
                }, ],
                textAlign: 'center'
            }],
            //县
            myAddressSlots3: [{
                flex: 1,
                values: [{
                    name: "[请选择]",
                    id: -1
                }],
                textAlign: 'center'
            }],
            // 乡
            myAddressSlots4: [{
                flex: 1,
                values: [{
                    name: "[请选择]",
                    id: -1
                }],
                textAlign: 'center'
            }],
            provinceName: '',
            cityName: '',
            countyName: '',
            villageName: '',
            provinceId: null,
            cityId: null,
            countyId: null,
            villageId: null,

created:

            this.$store.dispatch("newTitle", "新增收货地址")
            this.getRegion()

methods

            HiddenVisible() {
                this.regionVisible = false
            },
            getRegion() {
                // 进入页面时的处理
                let Slots1 = $App.getProvinceList(); //省
                this.myAddressSlots1[0].values = JSON.parse(Slots1)
            },
            addressChange1(msg, value) {
                this.provinceId = value[0].id;
                this.provinceName = value[0].name;
                let Slots2 = $App.getCityList(this.provinceId); // 市
                this.myAddressSlots2[0].values = JSON.parse(Slots2)
                this.myAddressSlots2[0].values.unshift({
                    name: "[请选择]",
                    id: -1
                })
            },
            addressChange2(msg, value) {
                this.cityId = value[0].id;
                this.cityName = value[0].name;
                let Slots3 = $App.getCountryList(this.cityId); // 区县
                this.myAddressSlots3[0].values = JSON.parse(Slots3)
                this.myAddressSlots3[0].values.unshift({
                    name: "[请选择]",
                    id: -1
                })
            },
            addressChange3(msg, value) {
                this.countyId = value[0].id;
                this.countyName = value[0].name;
                let Slots4 = $App.getTownsList(this.countyId); // 乡镇
                this.myAddressSlots4[0].values = JSON.parse(Slots4)
                this.myAddressSlots4[0].values.unshift({
                    name: "[请选择]",
                    id: -1
                })
                if (!Slots4) {
                    this.villageId = -1
                    this.villageName = "[请选择]"
                }
            },
            addressChange4(msg, value) {
                this.villageId = value[0].id;
                this.villageName = value[0].name;
            },
            // 弹窗显示
            regionShow() {
                this.regionVisible = true
            },

css:

.popupTop {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            padding: 10px 15px;
            span {
                height: 80%; // background: #39c;
                color: #fff;
                color: #39c;
                padding: 4px 20px;
                /* prettier-ignore */
                border: 1PX solid #39c;
                border-radius: 3px;
            }
        }