<template> <view class="tm-pickersCity d-inline-block fulled"> <view @click.stop.prevent="openPoup"><slot></slot></view> <tm-poup @change="toogle" ref="pop" v-model="showpop" :height="750" :bg-color="black_tmeme?'grey-darken-5':bgColor"> <view class="tm-pickersCity-title pa-32 pb-16"> <view class="text-size-g text-align-center" style="min-height: 48rpx;">{{title}}</view> <view class="tm-pickersCity-close rounded flex-center " :class="black_tmeme?'grey-darken-3':'grey-lighten-3'"> <tm-icons @click="close" name="icon-times" size="24" :color="black_tmeme?'white':'grey'"></tm-icons> </view> </view> <tm-pickersView v-if="showpop" @aniStart="aniisTrue=false" @aniEnd="aniisTrue=true" :default-value="dataValue" :bg-color="bgColor" :black="black_tmeme" :disabled="disabled" ref="tmPicKersTest" :list="list" ></tm-pickersView> <view class="pa-32"> <tm-button @click="confirm" block itemeClass="round-24" :black="black_tmeme" :theme="btnColor" fontSize="32">{{btnText}}</tm-button> </view> </tm-poup> </view> </template> <script> import provinceData from '@/tm-vuetify/tool/util/province.js'; import cityData from '@/tm-vuetify/tool/util/city.js'; import areaData from '@/tm-vuetify/tool/util/area.js'; /** * 地区选择器(弹层试) * @description 地区选择器(弹层试) * @property {String} title = [] 弹层层标题 * @property {String} btn-text = [] 底部按钮确认的文字 * @property {String} btn-color = [primary|green|orange|red|blue|bg-gradient-blue-lighten] 默认:bg-gradient-blue-lighten底部按钮确认的背景颜色仅支持主题色名称 * @property {String} bg-color = [white|blue] 默认:white,白色背景;请填写背景的主题色名称。 * @property {Function} confirm = [] 返回当前选中的数据 * @property {String} level = [province|city|area] ,默认area,显示的级别province:仅显示省,city仅显示省市,area:显示省市区。 * @property {Array} default-value = [] 同tm-pckerView格式,可以是数组内:序列,对象,字符串赋值。 * @property {String|Boolean} black = [true|false] 是否开启暗黑模式。 * @property {String|Boolean} disabled = [true|false] 是否禁用 * @example <tm-pickersCityView ref="city" :defaultValue='["上海市", "市辖区", "徐汇区"]'></tm-pickersCityView> * * */ import tmButton from "@/tm-vuetify/components/tm-button/tm-button.vue" import tmPoup from "@/tm-vuetify/components/tm-poup/tm-poup.vue" import tmIcons from "@/tm-vuetify/components/tm-icons/tm-icons.vue" import tmPickersView from "@/tm-vuetify/components/tm-pickersView/tm-pickersView.vue" export default { components:{tmButton,tmPoup,tmIcons,tmPickersView}, name:"tm-pickersCity", model:{ prop:'value', event:'input' }, props: { defaultValue:{ type:Array, default:()=>{return []} }, // 显示的级别。province,city,area。 level:{ type:String, default:'area' }, black:{ type:String|Boolean, default:null }, // 是否禁用 disabled:{ type:String|Boolean, default:false }, // 等同v-model,或者value.sync value: { type: String | Number, default: false }, // 背景颜色,主题色名称。 bgColor:{ type:String, default:'white' }, show:{ type:Boolean, default:true }, // 顶部标题。 title:{ type:String, default:'请选择地址' }, // 底部按钮文件 btnText:{ type:String, default:'确认' }, // 底部按钮背景主题色名称 btnColor:{ type:String, default:'primary' }, }, data() { return { showpop:false, dataValue:[], list:[], aniisTrue:true, }; }, computed: { black_tmeme: function() { if (this.black !== null) return this.black; return this.$tm.vx.state().tmVuetify.black; } }, mounted() { this.showpop = this.value; this.$nextTick(function(){ this.chili_level(); uni.hideKeyboard(); }) }, watch:{ value:function(val){ this.showpop = val; } }, methods: { // 获取选中的资料。 getSelectedValue(){ let d = this.$refs.tmPicKersTest.getSelectedValue(); let p = []; if(this.level=='province'){ p = [d[0].data.text] }else if(this.level=='city'){ p = [d[0].data.text,d[1].data.text] }else{ p = [d[0].data.text,d[1].data.text,d[2].data.text] } //返回对象数组 if(typeof this.defaultValue[0] === 'object'){ this.$emit("update:defaultValue",[d[0].data,d[1].data,d[2].data]) //返回索引数组 }else if(typeof this.defaultValue[0] === 'number'){ this.$emit("update:defaultValue",[d[0].index,d[1].index,d[2].index]) //返回字符串数组 }else{ this.$emit("update:defaultValue",p) } return p; }, chili_level(){ if(this.level=='province'){ this.chiliFormatCity_pro(); }else if(this.level=='city'){ this.chiliFormatCity_city(); }else{ this.chiliFormatCity_area(); } }, chiliFormatCity_area() { let list = []; provinceData.forEach((item,index)=>{ list.push({ id:item.value, text:item.label, children:[] }) }) cityData.forEach((item,index)=>{ item.forEach((citem,cindex)=>{ list[index].children.push({ id:citem.value, text:citem.label, children:[] }) }) }) list.forEach((item,index)=>{ item.children.forEach((citem,cindex)=>{ areaData[index][cindex].forEach(jitem=>{ list[index].children[cindex].children.push({ id:jitem.value, text:jitem.label }) }) }) }) this.list = list; }, chiliFormatCity_pro() { let list = []; provinceData.forEach((item,index)=>{ list.push({ id:item.value, text:item.label }) }) this.list = list; }, chiliFormatCity_city() { let list = []; provinceData.forEach((item,index)=>{ list.push({ id:item.value, text:item.label, children:[] }) }) cityData.forEach((item,index)=>{ item.forEach((citem,cindex)=>{ list[index].children.push({ id:citem.value, text:citem.label }) }) }) this.list = list; }, confirm() { if(!this.aniisTrue){ console.log('no'); return ; } this.$emit('confirm',this.getSelectedValue()) this.$refs.pop.close(); }, close(){ this.$refs.pop.close(); }, openPoup(){ if(this.disabled==true) return; this.showpop=!this.showpop }, toogle(e){ if(e){ this.$nextTick( function(){ if(this.dataValue != this.defaultValue){ this.dataValue = this.defaultValue; this.$refs.tmPicKersTest.setDefaultValue(this.dataValue) }else{ if(!this.dataValue || this.dataValue?.length==0){ this.$refs.tmPicKersTest.setDefaultValue([0,0,0]) }else{ this.$refs.tmPicKersTest.setDefaultValue(this.dataValue) } } this.$emit('input',e); this.$emit('update:value',e); }) } } }, } </script> <style lang="scss" scoped> .tm-pickersCity-title { position: relative; .tm-pickersCity-close { position: absolute; top: 32upx; right: 32upx; width: 50upx; height: 50upx; } } </style>