h5-elab-open-ownerUnion/components/subComponents/dmHomeChoose.vue

<template>
	<view class="pop-view" v-if='visible'>
		<view class="pop-maskView" :style="{
		  'background-color': maskBgColor,
		  zIndex: zIndex - 1
		}" @tap.stop="handleMaskTap"
		 @touchmove.stop.prevent="moveHandle">
		</view>
		
		<view :class="['pop-contentView',containerVisible ? 'pop-contentView-show' : '']" :style="{zIndex: zIndex}"
		 @touchmove.stop.prevent="moveHandle">
			<view class="content">
				<view class="content_top">
					<view class="content_left">
						<view class="content_item" @click="type(1)" :style="{background:tab==1?'#f8f8f8':'transparent'}">
							城市
						</view>
						<view class="content_item" @click="type(2)" :style="{background:tab==2?'#f8f8f8':'transparent'}">
							类型
						</view>
					</view>
					<view class="content_right">
						<view class="content_city" v-if="tab==1">
							<scroll-view scroll-y="true" class="city_province">
								<view class="province_item" v-for="(item1,index1) in region" :key='index1.id' @click="chooceProvince(item1)" :style="{'color':provinceId==item1.id?color1:'#999999','background':provinceId==item1.id?'#FFFFFF':'transparent'}">
									{{item1.name}}
								</view>
							</scroll-view>
							
							<scroll-view scroll-y="true" class="city_town">
								<view class="city_item" v-for="(item2,index2) in cities" :key='item2.id' @click="chooseCity(item2)" :style="{'color':cityId==item2.id?color1:'#999999'}">
									{{item2.name}}
								</view>
							</scroll-view>
						</view>
						<view class="content_type" v-if="tab==2">
							<view class="content_type_item" v-for="(item,index) in  types" :key='item.id' @click="typeChooce(item)" :style='{color:currentType==item.id?color1:"#999999"}'>
								{{item.name}}
							</view>
						</view>
					</view>
				</view>
				<view class="bottom">
					<view class="reset" @click="reset">
						重置
					</view>
					<view class="confirm" @click="confirm">
						确定
					</view>
				</view>
			</view>
		</view>
		
		
	</view>
</template>
<script>
	let region = require('@/static/region.json');
	export default {
		props: {
			title: String,
			maskColor: {
				type: String,
				default: 'rgba(0, 0, 0, 0.3)'
			},
			zIndex: {
				type: Number,
				default: 999
			},
			maskTapHide: {
				type: Boolean,
				default: true
			},
			isShowTitle: {
				type: Boolean,
				default: true
			},
			isShowClose: {
				type: Boolean,
				default: true
			},
			isShowConfirm: {
				type: Boolean,
				default: true
			},
			isScannerOption:{
				type:Boolean,
				default:false
			},
			marginSize:{
				type: String,
				default: '20rpx'
			},
		},
		
		data() {
			return {
				visible: false,
				containerVisible: false,
				maskBgColor: '',
				selectValue: [0],
				selIdx: 0,
				color2:'',
				color1:'',
				tab:1,
				types:[],
				currentType:"",
				region:[],
				cities:[],
				province:"",
				provinceId:"",
				city:"",
				cityId:"",
				typeName:"",
			}
		},
		mounted() {
			let app = getApp();
			this.globalData = app.globalData;
			this.color2 = this.globalData.color2;
			this.color1 = this.globalData.color1;
			this.region = region;
			this.cities = region[0].children;
		},
		methods: {
			async queryCategoryBox(){
				let res = await this.$myRequest({
					url: "/task/queryCategoryBox",
					data: {
						whetherBox: false
					}
				})
				if(res.data.success){
					this.types = res.data.list||[];
					this.types = this.types.filter(item=>item.name.indexOf('注册')==-1)
				}
			},
			setOptionType(option){
				this.tab = option;
			},
			show() {
				this.visible = true
				setTimeout(() => {
					this.maskBgColor = this.maskColor
					this.containerVisible = true
				}, 20)
				console.log("regin",region)
				this.queryCategoryBox();
			},
			hide() {
				this.maskBgColor = ''
				this.containerVisible = false
				this.visible = false
				this.$emit('close')
			},
			handleCancel() {
				this.hide()
			},
			handleConfirm() {
				this.hide()
				this.$emit('confirm')
			},
			handleMaskTap() {
				if (this.maskTapHide) {
					this.hide()
				}
			},
			moveHandle() {},
			type(tab){
				this.tab = tab;
			},
			typeChooce(item){
				this.currentType = item.id;
				this.typeName = item.name;
			},
			chooceProvince(item){
				this.cities = item.children;
				this.province = item.name;
				this.provinceId = item.id;
			},
			chooseCity(item){
				this.city = item.name;
				this.cityId = item.id;
			},
			reset(){
				this.city = "";
				this.cityId = "";
				this.province = "";
				this.provinceId = "";
				this.currentType = "";
				this.typeName = "";
			},
			confirm(){
				let param = {
					type:this.currentType,
					typeName:this.typeName,
					city:this.city,
				}
				this.$emit('chooiceType',param)
				this.handleConfirm()
			}
		}
	}
</script>

<style scoped lang="scss">
	.pop-view {
		position: relative;

		.pop-maskView {
			position: fixed;
			top: 0;
			right: 0;
			left: 0;
			bottom: 0;
		
		}

		.pop-contentView {
			position: fixed;
			left: 0;
			right: 0;
			top: 0;
			overflow-y: scroll;
			background-color: #fff;
			display: flex;
			flex-direction: column;
			align-items: center;
		

			.pop-title {
				margin-top: 60rpx;
				font-size: 32rpx;
				font-family: Verdana, Verdana-Bold;
				font-weight: 700;
				text-align: center;
				color: #333333;
			}

			.pop-close {
				position: absolute;
				top: 64rpx;
				right: 30rpx;
				width: 40rpx;
				height: 40rpx;
			}

			.pop-commit {
				margin-bottom: 54rpx;
				width: 260rpx;
				height: 84rpx;
				line-height: 84rpx;
				border-radius: 42rpx;
				font-size: 32rpx;
				font-family: Verdana, Verdana-Regular;
				font-weight: 400;
				text-align: center;
				color: #ffffff;
			}
		}

		.pop-contentView-show {
			
		}
		
		.content{
			width: 100%;
			.content_top{
				width: 100%;
				height: 470rpx;
				display: flex;
				.content_left{
					width: 140rpx;
					height: 470rpx;
					background: #f0f1f2;
					padding-top: 50rpx;
					box-sizing: border-box;
					display: flex;
					flex-direction: column;
					align-items: center;
					.content_item{
						width: 140rpx;
						height: 60rpx;
						line-height: 60rpx;
						text-align: center;
						font-size: 28rpx;
						font-family: Verdana, Verdana-Regular;
						font-weight: 400;
						color: #666666;
						margin-bottom: 20rpx;
					}
				}
				.content_right{
					box-sizing: border-box;
				    height: 100%;
					.content_city{
						display: flex;
						height: 100%;
						box-sizing: border-box;
						.city_province{
							width: 280rpx;
							min-width: 280rpx;
							height: 100%;
							box-sizing: border-box;
							padding-top: 50rpx;
							background: #f8f8f8;
							overflow: hidden;
							overflow-y: scroll;
							.province_item{
								width: 280rpx;
								line-height: 60rpx;
								text-align: center;
								font-size: 28rpx;
								font-family: Verdana, Verdana-Regular;
								font-weight: 400;
								color: #999999;
							}
						}
						
						.city_town{
							overflow-y: scroll;
							padding-top: 50rpx;
							box-sizing: border-box;
							.city_item{
								width: 300rpx;
								line-height: 60rpx;
								font-size: 28rpx;
								font-family: Verdana, Verdana-Regular;
								font-weight: 400;
								text-align: center;
								color: #999999;
							}
						}
						
					}
					.content_type{
						padding-top: 40rpx;
						padding-left: 60rpx;
						box-sizing: border-box;
						.content_type_item{
							line-height: 75rpx;
							text-align: center;
							font-size: 28rpx;
							font-family: Verdana, Verdana-Regular;
							font-weight: 400;
							color: #999999;
						}
					}
				}
			}
			.bottom{
				width: 100%;
				height: 140rpx;
				background: #ffffff;
				display: flex;
				justify-content: center;
				align-items: center;
				.reset{
					width: 156rpx;
					height: 80rpx;
					line-height: 80rpx;
					background: #f8f8f8;
					border-radius: 40rpx;
					font-size: 28rpx;
					font-family: Verdana, Verdana-Bold;
					font-weight: 700;
					text-align: center;
					color: #f07423;
				}
				.confirm{
					width: 444rpx;
					height: 80rpx;
					line-height: 80rpx;
					background: #f07423;
					border-radius: 40rpx;
					font-size: 28rpx;
					font-family: Verdana, Verdana-Bold;
					font-weight: 700;
					text-align: center;
					color: #ffffff;
					margin-left: 30rpx;
				}
			}
		}
	}
</style>