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
            },