小程序城市联动(二级)

小程序-城市联动(二级)

  <div class="item">
       <picker mode="multiSelector" @change="bindMultiPickerChange" @columnchange="bindMultiPickerColumnChange" :value="multiIndex" :range="multiArray">
         <input type="text" disabled placeholder="省份、城市" v-model="area">
        </picker>
</div>
<script>
        import {
                get,
                post,
                getStorageOpenid
        } from "../../utils";
        import $store from "../../store/index";
        export default {
                data() {
                        return {
                                items: [
                                        {id: 1, checked: false},
                                ],
                                tt:0,
                                imgurl: $store.state.str,
                                token: $store.state.token,
                                multiIndex:[0,0],
                                multiArray:[],
                                area:'',
                                objectMultiArray: [],
                                city_id : '',
                                privince_id:'',
                        };
                },
                methods: {
                        async  bindMultiPickerChange(e){
                                console.log("省");
                                this.multiIndex[0] = e.mp.detail.value[0];
                                this.multiIndex[1] = e.mp.detail.value[1];
                                var privince = this.multiArray[0][e.mp.detail.value[0]];
                                var city = this.multiArray[1][e.mp.detail.value[1]];
                                this.area = privince+"-"+city;
                                for (var i = 0; i < this.objectMultiArray.length; i++) {
                                        if (this.objectMultiArray[i].region_name == city ){
                                                this.city_id = this.objectMultiArray[i].region_id;
                                        }
                                        if(this.objectMultiArray[i].region_name == privince){
                                                this.privince_id =this.objectMultiArray[i].region_id;
                                        }
                                }
                        },
                        //初始化事件
                        async getPrence(){
                                const data = await get("Checkout/getprivince", { });
                                console.log(data);
                                if(data.code == 200){
                                        this.multiArray = data.data.privince;
                                        this.objectMultiArray =data.data.city;
                                }else if(data.code == 201){
                                        wx.navigateTo({
                                                url: '/pages/login/main'　　// 跳到登录页面
                                        })
                                }
                        },
                        bindMultiPickerColumnChange(e){
                                switch (e.target.column) {
                                        case 0:
                                                var  list = [];
                                                for (var i = 0; i < this.objectMultiArray.length; i++) {
                                                        if (this.objectMultiArray[i].parent_id == this.objectMultiArray[e.target.value].region_id) {
                                                                list.push(this.objectMultiArray[i].region_name)
                                                        }
                                                }
                                                this.multiArray[1] = list;
                                                this.multiIndex[0] = e.target.value;
                                                this.multiIndex[1] = 0;
                                                var privince = this.multiArray[0][e.target.value];
                                                var city = this.multiArray[1][0];
                                                this.area = privince+"-"+city;
                                }
                        },
        };
</script>