flying-monkey/components/city/city-new.vue

<template>
	<!--地址picker-->
	<view :status="checkStatus" v-if="lotusAddressData.visible" class="lotus-address-mask">
		<view :class="lotusAddressData.visible?'lotus-address-box':'lotus-address-box lotus-address-box-out'">
			<view class="lotus-address-action">
				<text @tap="cancelPicker" class="lotus-address-action-cancel">取消</text>
				<text @tap="chosedVal" class="lotus-address-action-affirm">确认</text>
			</view>
			<view class="lotus-address-picker-box">
				<!--省-->
				<scroll-view scroll-y :scroll-into-view="'pid'+pChoseIndex" class="lotus-address-picker-box-item">
					<view @tap="clickPicker(1,pIndex);" :id="'pid'+pIndex" :class="pIndex === pChoseIndex?'lotus-address-picker lotus-address-picker2':'lotus-address-picker'"  v-for="(pItem,pIndex) in province" :key="pIndex">{{pItem.value}}</view>
				</scroll-view>
				<!--市-->
				<scroll-view scroll-y :scroll-into-view="'cid'+cChoseIndex" class="lotus-address-picker-box-item" v-if="isShow">
					<view @tap="clickPicker(2,cIndex);" :id="'cid'+cIndex" :class="cIndex === cChoseIndex?'lotus-address-picker lotus-address-picker2':'lotus-address-picker'" v-for="(cItem,cIndex) in city" :key="cIndex">{{cItem.value}}</view>
				</scroll-view>
				<!--区-->
				<scroll-view scroll-y :scroll-into-view="'tid'+tChoseIndex" class="lotus-address-picker-box-item">
					<view @tap="clickPicker(3,tIndex);" :id="'tid'+tIndex" :class="tIndex === tChoseIndex?'lotus-address-picker lotus-address-picker2':'lotus-address-picker'" v-for="(tItem,tIndex) in town" :key="tIndex">{{tItem.value}}</view>
				</scroll-view>
			</view>
		</view>
	</view>
	<!--地址picker END-->
</template>

<script>
	export default {
		props:['lotusAddressData'],
		data() {
			return {
				visible: false,
				province:[],
				city:[],
				town:[],
				provinceName:'',
				cityName:'',
				townName:'',
				type:0,//0新增 1编辑
				pChoseIndex:-1,
				cChoseIndex:-1,
				tChoseIndex:-1,
				pidkey:'pid',
				pid:0,
				getType:'', //0省，1市，2区
				isShow: true
			};
		},
		onReady() {
			this.getProvince(1);
		},
		methods:{
			//取消
			cancelPicker(){
				this.$emit("choseVal",{
					visible:false
				});
			},
			
			//确认传值
			chosedVal(){
				//已选省市区 isChose = 1
				if((this.provinceName&&this.cityName)||(this.provinceName&&this.cityName&&this.townName)){
					this.$emit("choseVal",{
						province:this.provinceName,
						city:this.cityName,
						town:this.townName,
						area_id:this.pid,
						isChose:1,
						visible:false
					});
				}else{
					this.$toolAll.tools.showToast('您还未选择城市')
				}
			},
			
			// 查询省市区数据
			getProvince(getType) {
				let params = {
					pidkey:this.pidkey,
					pid:this.pid,
				}
				this.$requst.get('/universal/api.other/city',params).then(res=>{
					if(res.code) {
						if(getType == 1){
							console.log(res.data,'省数据')
							this.province = res.data;
						}
						if(getType == 2){
							console.log(res.data,'市数据')
							this.city = res.data;
						}
						if(getType == 3){
							console.log(res.data,'区数据')
							this.town = res.data;
						}
					} else {
						this.$toolAll.tools.showToast(res.msg);
					}
				})
			},
			
			// 选择省市区交互
			clickPicker(type,index){
				if(type == 1){
					this.pChoseIndex = index;
					this.pid = this.province[index].pid;
					this.provinceCode = this.province[index].pid;
					this.provinceName = this.province[index].value;
					this.cChoseIndex = -1;
					this.tChoseIndex = -1;
					this.city = [];
					this.town = [];
					if(this.provinceName == '北京市' || this.provinceName == '天津市' || this.provinceName == '上海市' || this.provinceName == '重庆市'){
						this.isShow = false;
						this.getProvince(2);
						setTimeout(()=>{
							this.cChoseIndex = 0;
							this.pid = this.city[0].pid
							this.cityCode = this.city[0].pid;
							this.cityName = this.city[0].value;
							this.tChoseIndex = -1;
							this.town = [];
							this.getProvince(3);
						},200)
					}else{
						this.isShow = true;
						this.getProvince(2);
					}
				}
				if(type == 2){
					this.cChoseIndex = index;
					this.pid = this.city[index].pid
					this.cityCode = this.city[index].pid;
					this.cityName = this.city[index].value;
					this.tChoseIndex = -1;
					this.town = [];
					this.getProvince(3);
				}
				if(type == 3){
					this.tChoseIndex = index;
					this.pid = this.town[index].pid
					this.townCode = this.town[index].pid;
					this.townName = this.town[index].value;
				}
			}
		}
	}
</script>

<style lang="less">
	@import "./city.css";
</style>