wardrobe/tm-vuetify/components/tm-quickCity/tm-quickCity.vue

<template>
	<view class="tm-quickCity fulled">
		
		<view @click="qiehuan"><slot ></slot></view>
		<view @click.stop="qiehuan" v-if="showbgOpen" class="tm-quickCity-fullbg fulled  fixed b-0 l-0" :style="{height:sysHeight+'px'}">
			
			<view :style="{height:(height+250+content_jian_height)+'rpx'}"  @click.stop="" :class="[black_tmeme?'grey-darken-5 bk':'white']"  class=" tm-quickCity-wk absolute fulled round-t-10" >
				<view class="tm-quickCity-title px-32 pt-32 shadow-4 relative">
					<view class="text-size-g text-weight-b mb-32 relative">
						<view>
							请选择城市位置
						</view>
						<view @click.stop="qiehuan" class="tm-calendar-close  rounded flex-center"  :class="black_tmeme?'grey-darken-3':'grey-lighten-3'">
							<tm-icons dense name="icon-times" size="24" :color="black_tmeme?'white':'grey'"></tm-icons>
						</view>
					</view>
					<view class="flex-start pb-24">
						
						<view :class="[pageIndex==0?`outlined ${color_tmeme} text-weight-b`:'outlined grey',black_tmeme?'bk':'']" @click="indexChange(0)" class=" px-12 py-6 round-10 flex-center text-size-s  mr-24   flex-shrink">
							<text>{{childrenIndx[0]!==null?childrenIndx[0].title:'请选择省'}}</text>
							
						</view>
						<view v-if="childrenIndx[0]!==null" class="flex-center pr-24">
							<tm-icons :color="black_tmeme?'white':'grey'" :size="24" dense name="icon-angle-right"></tm-icons>
						</view>
						<view style="max-width: 120rpx;" :class="[pageIndex==1?`outlined ${color_tmeme} text-weight-b`:'outlined grey',black_tmeme?'bk':'']" @click="indexChange(1)" v-if="childrenIndx[0]!==null" class="px-12 py-6 round-10 flex-center text-size-s  mr-24 pb-10 ">
							
							<text class="text-overflow">{{childrenIndx[1]!==null?childrenIndx[1].title:'请选择市'}}</text>
						</view>
						<view v-if="childrenIndx[1]!==null" class="flex-center pr-24">
							<tm-icons :color="black_tmeme?'white':'grey'" :size="24" dense name="icon-angle-right"></tm-icons>
						</view>
						<view  style="max-width: 220rpx;" :class="[pageIndex==2?`outlined ${color_tmeme} text-weight-b`:'outlined grey',black_tmeme?'bk':'']" @click="indexChange(2)" v-if="childrenIndx[1]!==null" class="px-12 py-6 round-10 flex-center text-size-s  mr-24 pb-10 "> 
						
						<text class="text-overflow">{{childrenIndx[2]!==null?childrenIndx[2].title:'请选择县/区'}}</text>
						</view>
					</view>
				</view>
				<view v-if="hotCity_chuli.length>0" class="tm-quickCity-jg  py-24">
					<view :class="[black_tmeme?'grey-darken-5':'grey-lighten-4 text']" class="text-size-s text-weight-b py-12 px-32">热门城市</view>
					<view class="px-20 pt-12">
						<tm-tags model="text" rounded :black="black_tmeme" @click="selectedDefaultHot(index)" v-for="(item,index) in hotCity_chuli" :key="index"  color="white" :fllowTheme="fllowTheme">
						{{item[1]?item[1]:item[0]}}
						</tm-tags>
					</view>
					
				</view>
				<view v-show="pageIndex==0">
					<tm-quickIndex :black="black_tmeme" :fllowTheme="false"  :color="color_tmeme" key="ref_k_1" v-model="active" :height="content_height" :list="list">
						<template v-slot:cell="{data}">
							<view @click="cityClick_pr(data,0)" :class="[data.black?'bk':'',data.children!==data.total-1?'border-grey-lighten-4-b-1':'']" class="py-24 mx-32  flex-between">
								<view class="text-size-n flex-start" >
									<view v-if="data.item['checked']" class="mr-24">
										<tm-icons :color="data.color" dense name="icon-check"></tm-icons>
									</view>
									<text  :class="[data.item['checked']?'text-'+data.color+' text-weight-b':'']" class="text-size-n">
										{{data.title}}
									</text>
								</view>
							</view>
						</template>
					</tm-quickIndex>
				</view>
				<view v-if="pageIndex==1">
					<tm-quickIndex :black="black_tmeme" :fllowTheme="false" :color="color_tmeme" key="ref_k_2" v-model="active_2" v-if="childrenIndx[0]" :height="content_height" :list="childrenIndx[0].children">
						<template #cell="{data}">
							<view @click="cityClick_pr(data,1)" :class="[data.black?'bk':'',data.children!==data.total-1?'border-grey-lighten-4-b-1':'']" class="py-24 mx-32 border-grey-lighten-4-b-1 flex-between">
								<view class="text-size-n flex-start" >
									<view v-if="data.item['checked']" class="mr-24">
										<tm-icons :color="data.color" dense name="icon-check"></tm-icons>
									</view>
									<text  :class="[data.item['checked']?'text-'+data.color+' text-weight-b':'']" class="text-size-n">
										{{data.title}}
									</text>
								</view>
							</view>
							
						</template>
					</tm-quickIndex>
				</view>
				<view v-if="pageIndex==2">
					<tm-quickIndex :black="black_tmeme" :fllowTheme="false"  :color="color_tmeme" key="ref_k_3" v-model="active_3" v-if="childrenIndx[1]" :height="content_height" :list="childrenIndx[1].children">
						<template #cell="{data}">
							<view @click="cityClick_pr(data,2)" :class="[data.black?'bk':'',data.children!==data.total-1?'border-grey-lighten-4-b-1':'']" class="py-24 mx-32 border-grey-lighten-4-b-1 flex-between">
								<view class="text-size-n flex-start" >
									<view v-if="data.item['checked']" class="mr-24">
										<tm-icons :color="data.color" dense name="icon-check"></tm-icons>
									</view>
									<text  :class="[data.item['checked']?'text-'+data.color+' text-weight-b':'']" class="text-size-n">
										{{data.title}}
									</text>
								</view>
							</view>
							
						</template>
					</tm-quickIndex>
				</view>
			
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * 城区索引选择
	 * @property {Boolean} value = [true|false] 显示和隐藏组件，请使用v-model或者value.sync你也可以不提供些参数，使用默认插槽也可打开，请见示例。
	 * @property {Array} default-value = [] 默认选择的地址:[],字符串数组，如["江西省","南昌市"]。使用.sync双向绑定。
	 * @property {Array} hot-city = [] 默认选择的地址:[],格式同default-value
	 * @property {String} color = [] 默认：primary,主题色
	 * @property {Number} height = [] 默认：1000,组件高度，单位rpx
	 * @property {Boolean} black = [true|false] 默认：false,是否深色模式
	 * @property {Function} change 选中地址时触发，返回当前选中的地区数组。
	 */
	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';
	import queryCnChart from "@/tm-vuetify/tool/function/findCnChart.js";

	
	import tmQuickIndex from "@/tm-vuetify/components/tm-quickIndex/tm-quickIndex.vue"
	import tmListitem from "@/tm-vuetify/components/tm-listitem/tm-listitem.vue"
	import tmGrouplist from "@/tm-vuetify/components/tm-grouplist/tm-grouplist.vue"
	import tmIcons from "@/tm-vuetify/components/tm-icons/tm-icons.vue"
	import tmTags from "@/tm-vuetify/components/tm-tags/tm-tags.vue"
	export default {
		components:{tmQuickIndex,tmListitem,tmGrouplist,tmIcons,tmTags
		},
		name:"tm-quickCity",
		model:{
			event:'input',
			prop:'value'
		},
		props:{
			defaultValue:{
				type:Array,
				default:()=>{
					return [];
				}
			},
			hotCity:{
				type:Array,
				default:()=>[["江西省","南昌市"],["北京市"],["广东省","广州市"],["浙江省","杭州市"],["重庆市"],["湖南省","长沙市"],["湖北省","武汉市"],["四川省","成都市"]]
			},
			color:{
				type:String,
				default:"primary"
			},
			height:{
				type:String|Number,
				default:900
			},
			value:{
				type:Boolean,
				default:false
			},
			black:{
				type:Boolean,
				default:null
			},
			// 跟随主题色的改变而改变。
			fllowTheme:{
				type:Boolean|String,
				default:true
			}
		},
		data() {
			return {
				
				list:[],
				active:0,
				active_2:0,
				active_3:0,
				childrenIndx:[null,null,null],
				indexobj:{
					pr:null,
					ar:null,
					co:null
				},
				pageIndex:0,
				sysHeight:0,
				showbgOpen:false,
				
				content_height:0,
				content_jian_height:0,
				hotCity_chuli:[]
			};
		},
		watch:{
			value:function(val){
				this.show = val;
				
			}
		},
		destroyed() {
			this.list=[];
			this.childrenIndx=[];
		},
		computed:{
			
			
			black_tmeme: function() {
				if (this.black !== null) return this.black;
				return this.$tm.vx.state().tmVuetify.black;
			},
			color_tmeme:function(){
				if(this.$tm.vx.state().tmVuetify.color!==null&&this.$tm.vx.state().tmVuetify.color && this.fllowTheme){
					return this.$tm.vx.state().tmVuetify.color;
				}
				return this.color;
			},
			show:{
				get:function(){
					return this.showbgOpen;
				},
				set:function(val){
					this.showbgOpen = val;
					this.$emit('input',val);
					this.$emit('update:value',val);
					
				}
			}
		},
		async mounted() {
			this.sysHeight = uni.getSystemInfoSync().windowHeight;
			this.show = this.value;
			this.content_height = this.height;
			this.hotCity_chuli_fun();
			await this.chiliFormatCity_area()
			await this.setDefaultValue();
			await this.content_heightToh();
		},
		methods: {
			hotCity_chuli_fun(){
				let hot = uni.$tm.deepClone(this.hotCity);
				let hostar = [];
				hot.forEach(item=>{
					if(item.length==1) hostar.push([item[0],null,null])
					if(item.length==2) hostar.push([item[0],item[1],null])
					if(item.length==3) hostar.push([item[0],item[1],item[2]])
				})
				this.hotCity_chuli = [...hostar];
			},
			async qiehuan(){
				this.show = !this.showbgOpen
				await this.content_heightToh();
				
			},
			async content_heightToh(){
				// if(!this.showbgOpen) return;
				if(this.hotCity_chuli.length==0){
					return this.height;
				}
				this.$nextTick(async function(){
					let h = await this.$Querey(".tm-quickCity-jg",this).catch(e=>{});
					
					if(!h[0]) return;
					h = h[0].height;
					
					let blv = uni.upx2px(4) / 4;
					this.content_jian_height = (h+h*blv)
					this.content_height = parseInt(this.height - this.content_jian_height);
				})
			},
			async selectedDefaultHot(index){
				
				this.$emit('update:defaultValue',this.hotCity[index]);
				let chl = this.childrenIndx[0];
				if(chl){
					this.$set(this.list[chl.index].children[chl.childrenIndex],'checked',false)
				}
				this.childrenIndx=[null,null,null];
				this.$nextTick(async function(){
					
					await this.setDefaultValue()
					
					this.cityClick_pr(this.list[this.childrenIndx[0]],this.childrenIndx[0])
				})
			},
			async setDefaultValue(){
				let t = this;
				function chuili(ix){
					let pitem = null;
					let chilIndex=-1;
					let pdindex = -1;
					if(ix==0&&t.defaultValue[ix]){
						 pdindex = t.list.findIndex((item)=>{
							let citem = item.children
							
							let index = citem.findIndex(ditem=>{
								if(ditem.title == t.defaultValue[ix]){
									pitem = ditem;
								}
								return ditem.title == t.defaultValue[ix]
							})
							if(index>-1){
								chilIndex = index;
							}
							return index>-1;
						})
					}else if(t.defaultValue[ix]){
						let dsst = t.childrenIndx[ix-1].children
						
						 pdindex = dsst.findIndex((item)=>{
							let citem = item.children
							
							let index = citem.findIndex(ditem=>{
								if(ditem.title == t.defaultValue[ix]){
									pitem = ditem;
								}
								return ditem.title == t.defaultValue[ix]
							})
							if(index>-1){
								chilIndex = index;
							}
							return index>-1;
						})
					}
					return {prevent:pdindex,chileIndex:chilIndex,item:pitem};
				}
				let d = chuili(0)
				if(d.prevent>-1){
					let chl = this.childrenIndx[0];
					if(chl){
						this.$set(this.list[chl.index].children[chl.childrenIndex],'checked',false)
					}
					t.childrenIndx.splice(0,1,{
						index:d.prevent,
						childrenIndex:d.chileIndex,
						title:d.item.title,
						children:t.chuliKey(d.item.children)
					})
					
					t.active = d.prevent;
					this.$set(this.list[d.prevent].children[d.chileIndex],'checked',true)
				}
				if(t.defaultValue[1]){
					let d = chuili(1)
					let chl = this.childrenIndx[1];
					if(chl){
						this.$set(this.childrenIndx[0].children[chl.index].children[chl.childrenIndex],'checked',false)
					}
					t.childrenIndx.splice(1,1,{
						index:d.prevent,
						childrenIndex:d.chileIndex,
						title:d.item.title,
						children:t.chuliKey(d.item.children)
					})
					this.$set(this.childrenIndx[0].children[d.prevent].children[d.chileIndex],'checked',true)
				}else{
					
				}
				await uni.$tm.sleep(50)
				if(t.defaultValue[2]){
					let d = chuili(2)
					
					let chl = this.childrenIndx[2];
					
					if(chl){
						this.$set(this.childrenIndx[1].children[chl.index].children[chl.childrenIndex],'checked',false)
					}
					t.childrenIndx.splice(2,1,{
						index:d.prevent,
						childrenIndex:d.chileIndex,
						title:d.item.title,
						children:[]
					})
					
					this.$set(this.childrenIndx[1].children[d.prevent].children[d.chileIndex],'checked',true)
					
				}
			},
			indexChange(index){
				let t= this;
				this.pageIndex = index;
				this.childrenIndx.forEach((item,idx)=>{
					if(idx===index && item!==null){
						if(t.defaultValue[idx]==item.title){
							if(idx==0){
								t.active = item.index;
							}else if(idx==1){
								t.active_2 = item.index;
							}else if(idx==2){
								t.active_3 = item.index;
							}
							
						}
					}
				})
				
			},
			cityClick_pr(data_item,tindex){
				if(tindex===0){
					let chl = this.childrenIndx[0];
					if(chl){
						this.$set(this.list[chl.index].children[chl.childrenIndex],'checked',false)
					}
					this.childrenIndx=[{
						index:data_item.prevent,
						childrenIndex:data_item.children,
						title:data_item.title,
						children:this.chuliKey(data_item.item.children)
					},null,null]
					this.$set(this.indexobj,'pr',data_item.prevent)
					this.$set(this.indexobj,'ar',null)
					this.$set(this.indexobj,'co',null)
					this.pageIndex=1;
					
					this.$set(this.list[data_item.prevent].children[data_item.children],'checked',true)
				}else if(tindex===1){
					let chl = this.childrenIndx[1]
					
					if(chl){
						this.$set(this.childrenIndx[0].children[chl.index].children[chl.childrenIndex],'checked',false)
					}
					this.childrenIndx.splice(1,1,{
						index:data_item.prevent,
						childrenIndex:data_item.children,
						title:data_item.title,
						children:this.chuliKey(data_item.item.children)
					})
					this.childrenIndx.splice(2,1,null)
					this.$set(this.indexobj,'pr',data_item.prevent)
					this.$set(this.indexobj,'ar',data_item.prevent)
					this.$set(this.indexobj,'co',null)
					this.pageIndex=2;
					this.$set(this.childrenIndx[0].children[data_item.prevent].children[data_item.children],'checked',true)
				}else if(tindex===2){
					let chl = this.childrenIndx[2]
					
					if(chl){
						this.$set(this.childrenIndx[1].children[chl.index].children[chl.childrenIndex],'checked',false)
					}
					this.childrenIndx.splice(2,1,{
						index:data_item.prevent,
						childrenIndex:data_item.children,
						title:data_item.title,
						children:[]
					})
					this.$set(this.indexobj,'pr',data_item.prevent)
					this.$set(this.indexobj,'ar',data_item.prevent)
					this.$set(this.indexobj,'co',data_item.prevent)
					this.$set(this.childrenIndx[1].children[data_item.prevent].children[data_item.children],'checked',true)
				}
				let cdite = this.defaultValue;
				this.childrenIndx.forEach((item,index)=>{
					if(item){
						cdite.splice(index,1,item.title)
					}else{
						cdite.splice(index,1,null)
					}
				})
				this.$emit("update:defaultValue",cdite)
				this.$emit("change",cdite)
			},
			//处理地区数据以便符合规范。
			async chiliFormatCity_area() {
				
				let list = [];
				let list_index_Str = []
				provinceData.forEach((item,index)=>{
					let quick = queryCnChart(item.label[0])["0"];
					
					if(item.label=='重庆市'){
						quick = 'C'
						
					}
					list.push({
						id:item.value,
						text:item.label,
						quick:quick,
						children:[]
					})
					
				})
				cityData.forEach((item,index)=>{
					item.forEach((citem,cindex)=>{
						list[index].children.push({
							id:citem.value,
							text:citem.label,
							quick:queryCnChart(citem.label[0])["0"],
							children:[]
						})
					})
				})
				list.forEach((item,index)=>{
					item.children.forEach((citem,cindex)=>{
						areaData[index][cindex].forEach(jitem=>{
							list[index].children[cindex].children.push({
								id:jitem.value,
								quick:queryCnChart(jitem.label[0])["0"],
								text:jitem.label
							})
						})
					})
				})
				
				
				function  sortFun(a,b){
					  var nameA = a.quick.toUpperCase(); // ignore upper and lowercase
					  var nameB = b.quick.toUpperCase(); // ignore upper and lowercase
					 
					  if (nameA < nameB) {
							return -1;
					  }
					  if (nameA > nameB) {
							return 1;
					  }
					  // names must be equal
					  return 0;
				}
				
				function sort(itemArray){
					if(typeof itemArray === 'object' && Array.isArray(itemArray)){
						itemArray.sort(sortFun)
					}else{
						return itemArray;
					}
					
					for(let i=0;i<itemArray.length;i++){
						let cl = itemArray[i]['children'];
						if(typeof cl === 'object' && Array.isArray(cl)){
							
							itemArray[i]['children'] = sort(cl);
						}
						
					}
					return itemArray;
				}
				
				let plst = sort(list);
				
				function fenzu(ar){
					let jg = {};
					for(let i=0;i<ar.length;i++){
						let cl = ar[i]['children'];
						if(typeof cl === 'object' && Array.isArray(cl)){
							if(typeof jg[ar[i].quick] !=='undefined'){
								jg[ar[i].quick].push({
									title:ar[i].text,
									index:ar[i].quick,
									children:fenzu(cl)
								})
							}else{
								jg[ar[i].quick] = [];
								
								jg[ar[i].quick].push({
									title:ar[i].text,
									index:ar[i].quick,
									children:fenzu(cl)
								})
							}
						}else{
							if(typeof jg[ar[i].quick] !=='undefined'){
								jg[ar[i].quick].push({
									title:ar[i].text,
									index:ar[i].quick,
									children:ar[i]
								})
							}else{
								jg[ar[i].quick] = [];
								
								jg[ar[i].quick].push({
									title:ar[i].text,
									index:ar[i].quick,
									children:ar[i]
								})
							}
						}
						
					}
					return jg;
				}
				let ruslt = fenzu(plst);
				let tddd = this.chuliKey(ruslt);
				this.list = tddd;
				
				return tddd;
				
			},
			
			chuliKey(arritem){
				let ruslt = arritem;
				let zuihojg = [];
				let keyarray = Object.keys(arritem);
				for(let i=0;i<keyarray.length;i++){
					zuihojg.push({
						title:keyarray[i],
						index:keyarray[i],
						children:ruslt[keyarray[i]]
					})
					
				}
				return zuihojg;
			}
		},                             
	}
</script>

<style lang="scss" scoped>
.tm-quickCity{
	.tm-quickCity-fullbg{
		background-color: rgba(0,0,0,0.3);
	
		z-index: 501;
		.tm-quickCity-wk{
			bottom: 0;
			left: 0;
			.tm-quickCity-title{
				z-index: 10;
				.tm-calendar-close {
					position: absolute;
					top: 0rpx;
					right: 0rpx;
					height: 50rpx;
					line-height: 50rpx;
					width: 50rpx;
				}
			}
		}
	}
	
}
</style>