shuju_ui/test/_components/picker/areaPicker.vue

<template>
	<template>
	    <view class="areaPicker">
	        <h-picker ref="picker"
	                  @cancel="cancel"
	                  @change="change"
	                  range_key="name"
	                  :value="default_area"
	                  title="选择城市"
	                  @sure="sure"
	                  :column="[prov_list,city_list]"></h-picker>
	    </view>
	
	</template>
	
	<script>
	    import hPicker from "./hPicker.vue";
	    import commonReq from "../../_common/requestCon/commonReq";
	
	    export default {
	        name: "areaPicker",
	        components: {hPicker},
	        props: {
	            // default_area: {
	            //     default(){
	            //         return [0,0]
	            //     }
	            // }
	        },
	        data() {
	            return {
	                prov_list: [],
	                city_list: [],
	                default_area:[0,0]
	
	            }
	
	        },
	        methods: {
	            hide(){
	                this.$refs.picker.hide()
	
	            },
	            show(){
	                this.$refs.picker.show()
	
	            },
	            /*获取省份列表*/
	            getProv() {
	                return new Promise((resolve, reject) => {
	                    commonReq.getArea()
	                        .then(res => {
	                            this.prov_list = res.data.map(v => {
	                                return {...v, value: v.uuid}
	                            })
	                            resolve(this.prov_list)
	                        })
	                })
	
	            },
	            /*获取城市信息*/
	            getCity(id) {
	                return new Promise((resolve, reject) => {
	                    commonReq.getArea({grade: 1, parent_uuid: id})
	                        .then(res => {
	                            this.city_list = res.data.map(v => {
	                                return {...v, value: v.uuid}
	                            })
	                            resolve(this.city_list)
	                        })
	                })
	
	            },
	            /*初始化地区选择*/
	            initArea() {
	
	                let index = this.default_area[0];//默认序号的省份
	
	
	                this.getProv()
	                    .then(res => {
	
	                        let prov_list = this.prov_list;
	                        this.getCity(prov_list[index].uuid)
	                    })
	            },
	            /*省份变化*/
	            provChange(val){
	                console.log('provChange')
	                let prov_list =this.prov_list;
	                let city_list =this.city_list;
	
	                let prov_index = val[0];
	
	                //默认城市重置为第一个
	                this.default_area[1] = 0;
	                this.getCity(prov_list[prov_index].uuid)
	                .then(res=>{
	                    this.$emit('change',[
	                        {_index:prov_index,...prov_list[prov_index]},
	                        {_index:0,...city_list[0]},
	                    ])
	                })
	            },
	            // 城市变化
	            cityChange(val){
	                console.log('cityChange')
	                let prov_list =this.prov_list;
	                let city_list =this.city_list;
	                let prov_index = val[0];
	                let city_index = val[1];
	                this.$emit('change',[
	                    {_index:prov_index,...prov_list[prov_index]},
	                    {_index:city_index,...city_list[city_index]},
	                ])
	            },
	
	            sure(val){
	
	                let prov_list =this.prov_list;
	                let city_list =this.city_list;
	
	                let prov_index =val ? val[0] :0;
	                let city_index = val ? val[1] :0;
	                this.$emit('sure',[
	                    {_index:prov_index,...prov_list[prov_index]},
	                    {_index:city_index,...city_list[city_index]},
	                ])
	
	            },
	            cancel(){
	                this.$emit('cancel',{})
	            },
	            change({_value}){
	                let val =_value
	
	                let default_area = this.default_area;
	
	                if(val[0] !== default_area[0]){
	                    this.provChange(val)
	                }
	                if(val[1] !== default_area[1]){
	                    this.cityChange(val)
	                }
	
	                this.default_area = _value;
	
	            }
	        },
	        mounted() {
	            this.initArea()
	        }
	    }
	</script>
	
	<style scoped lang="scss">
	
	</style>
</template>

<script>
</script>

<style>
</style>