tqApp-webView/pages/realtimeWatch/module/panel.vue

<template>
    <view class="popup-warpper" 
		:class="{
			'popup-warpper-show': isShow
		}"
	>
		<u-overlay
			:show="isShow"
			@click="close"
			v-if="isShow"
			:duration="350"
			:opacity="0.5"
		></u-overlay>
		
		<view class="popup-container">

				<view class="munes" 
					:class="{
						'events-none': $store.state.realtimeWatch.loading
					}"
				>
					<view v-for="(item,index) in typeList" :key="index"
						class="munes-item"
						:class="{
							'munes-item-active': item.value == tabStyle
						}"
						@click="handleActive(item)"
					>
						<text>{{item.label}}</text>
					</view>
				</view>
				<eleChoose v-if="tabStyle=='vehicle'" ref="eleChooseRef" :queryType='2' key="vehicle" @getDataed="getDataed"></eleChoose>
				<eleChoose v-else-if="tabStyle=='personnel'" ref="eleChooseRef"  :queryType='1' key="personnel"  @getDataed="getDataed"></eleChoose>

		</view>
	</view>
</template>

<script>
import {isArray,clone,isObject } from 'lodash'
import {realTimeList, realTimeMap} from '@/api/realtimeWatch.js'
import {getImages} from '@/plugins/images'
import {copyProps,clearProps} from '@/utils/gdtq.js'
//资源引入
import eleChoose from './eleChoose.vue'

export default {
	props: {
	},
	components: {
		eleChoose
	},
    data() {
        return {
			isShow: false,
		   tabStyle: 'vehicle',
		   typeList: [
				{label: '车辆',value: 'vehicle'},
				{label: '人员',value: 'personnel'},
		   ],
		   firstLoade: true,
        }
    },
	mounted() {
				
	},
	
    methods: {
		handleActive(item) {
			if(this.tabStyle == item.value) return
			this.tabStyle = item.value	
			 this.$store.dispatch('setVheicleCheckArr',[])
			 this.$store.dispatch('setPeopleCheckArr',[])
			 
		},
		show() {
			this.isShow= true;
		},
		getDataed() {
			if(this.firstLoade) {
				setTimeout(() => {
					this.$refs.eleChooseRef.handleChooseAll()
					this.close()
					this.firstLoade = false
				},500)
				
			}
			
		},
		close() {
			this.$refs.eleChooseRef.getChoosed()
		    this.isShow = false
		},
		
	},
	
}
</script>

<style lang="scss" scoped>
	.popup-warpper-show {
		bottom: 0 !important;
	}
	.popup-warpper {
		position: fixed;
		bottom: -100vh;
		right: 0;
		width: 100%;
		height: 100vh;
		z-index: 90000;
		transition: all ease 0.35s;
		
		.popup-container {
			
			position: absolute;
			bottom: 0;
			right: 0;
			width: 100%;
			z-index: 90002;
			background: #fff;
			max-height: 85vh;
			
			.munes {
				height: 80rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background: #fff;
				.munes-item {
					flex: 1;
					height: 100%;
					// background: #F2f2f2;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 30rpx;
					font-weight: bold;
				}
				.munes-item-active {
					// background: #fff;
					color: #2979ff;
					position: relative;
					
					&::after {
						position: absolute;
						bottom: 0;
						content: '';
						width: 50rpx;
						border-bottom: 4rpx solid #2979ff;
					}
				}
			}
		
		}
	}
	
	.choosed-image {
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
	}
	
	.events-none {
		pointer-events: none;
	}
</style>