ylrz_scrm_company_h5/components/dropdownPanel.vue

<template>
	<view class="filter-wrapper" :style="{ height: height + 'px'}" @touchmove.stop.prevent="discard">
		<view class="inner-wrapper">
			<view class="mask" :class="showMask ? 'show' : 'hide'" :style="{top: top}" @tap="tapMask"></view>
			<view class="navs">
				<view class="c-flex-center" :class="{ 'c-flex-center': index > 0, actNav: index === actNav }"
					v-for="(item, index) in filterData" :key="index" @click="navClick(item,index)">
					<view v-if="item.special&&item.name=='批量'" class="x-f" style="align-items: end;">
						<u-icon name="file-text" :color="index === actNav ?'#2979ff':'#222'" size="20"></u-icon>
						{{index === actNav ? '取消':'批量'}}
					</view>
					<template v-else>
						<text style="width: max-content;">{{item.name}}</text>
							<image :src="imgPath+'/app/manergevip/icon-pullup.png'" mode="" class="icon-triangle"
								v-if="index === actNav"></image>
						<image :src="imgPath+'/app/manergevip/icon-down.png'" mode="" class="icon-triangle"
							v-else></image>
					</template>
				</view>
			</view>
			<view scroll-y="true" class="popup" :class="popupShow ? 'popupShow' : ''">
				<scroll-view scroll-y="true" style="height: 30vh;">
					<slot></slot>
				</scroll-view>
				<view class="footer x-bc">
					<view class="footer-btn" @click="reset">重置</view>
					<view class="footer-btn footer-blue" @click="confirm">确认</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// import { getCurDateTime } from '@/libs/utils.js';
	export default {
		props: {
			height: {
				type: Number,
				default: 40
			},
			top: {
			    type: String,
			    default: ''
			},
			border: {
				type: Boolean,
				default: false
			},
			filterData: {
				//必填
				type: Array,
				default: () => {
					return []
				}
			},
			ispopshow: {
				type: Boolean,
				default: false
			},
			itemname: {
				type: String,
				default: ''
			},
			defaultIndex: {
				//默认选中条件索引,超出一类时必填
				type: Array,
				default: () => {
					return [0];
				}
			}
		},
		data() {
			return {
				navData: [],
				popupShow: false,
				showMask: false,
				actNav: null,
				selIndex: [] ,//选中条件索引
			};
		},
		watch: {
			// titname(newVal,oldVal){
			// 	console.log(newVal,oldVal)
			// 	if(newVal==2){
			// 		console.log(newVal,oldVal)
			// 		this.popupShow=false
			// 		this.showMask=false
			// 	}
			// }
			navData(newVal,oldVal){
				console.log(newVal,oldVal)
				// if(newVal==2){
				// 	console.log(newVal,oldVal)
				// 	this.popupShow=false
				// 	this.showMask=false
				// }
			}
		},
		computed: {
		    imgPath() {
		      return this.$store.state.imgpath
		    }
		  },
		created() {
			this.navData = this.filterData;
			this.selIndex = this.defaultIndex;
			// this.keepStatus();
		},
		mounted() {
			const query = uni.createSelectorQuery().in(this);
			// query
			// 	.select(".filter-wrapper")
			// 	.boundingClientRect((data) => {
			// 		// console.log(data)
			// 		this.top = data.top + 'px'
			// 	})
			// 	.exec();
		},
		methods: {
			reset() {
				this.$emit('reset');
				this.showMask = false;
				this.popupShow = false;
			},
			confirm() {
				this.showMask = false;
				this.popupShow = false;
				this.$emit('confirm');
			},
			keepStatus() {
				// this.navData.forEach(itemnavData => {
				//     itemnavData.map(child => {
				//         child.select = false;
				//     });
				//     return itemnavData;
				// });
				// for (let i = 0; i < this.selIndex.length; i++) {
				//     let selindex = this.selIndex[i];
				//     this.navData[i][selindex].select = true;
				// }
			},
			navClick(item, index) {
				if (this.showMask && item.type == 'piliang') {
					this.popupShow = false
					this.showMask = false
					this.actNav = null
					return
				}
				if(item.type=='click'){
					this.popupShow = false
					this.showMask = false
					this.$emit('onChange', this.actNav);
					this.$emit('onClick', item);
					this.actNav = index;
					return
				}

				this.titname = index
				this.$emit('onClick', item);
				if (index === this.actNav) return this.tapMask();
				this.actNav = index;
				if (item.stopPrevent) return
				this.popupShow = true;
				this.showMask = true;
				this.$emit('onChange', this.actNav);

			},
			handleOpt(index) {
				// this.selIndex[this.actNav] = index;
				// this.keepStatus();
				// setTimeout(() => {
				//     this.tapMask();
				// }, 100);
				// let data = [];
				// let res = this.navData.forEach(item => {
				//     let sel = item.filter(child => child.select);
				//     data.push(sel);
				// });
				// console.log(data);
				// this.$emit('onSelected', data);
			},
			tapMask() {
				this.showMask = false;
				this.popupShow = false;
				this.actNav = null;
			},
			discard() {}
		}
	};
</script>

<style lang="scss" scoped>
	.c-flex-align {
		display: flex;
		align-items: center;
	}

	.c-flex-center {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.footer {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 14px;
		color: #222;
		padding: 10px;

		&-btn {
			flex: 1;
			text-align: center;
			background-color: #fff;
			border: 1px solid #999;
			border-radius: 50px;
			padding: 10px 0;
		}

		&-blue {
			background-color: #1677ff;
			border: 1px solid #1677ff;
			color: #fff;
			margin-left: 10px;
		}
	}

	.filter-wrapper {

		// position: fixed;
		// left: 0;
		// width: 750rpx;
		// z-index: 999;
		.inner-wrapper {

			// position: relative;
			.navs {
				position: relative;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 14px;
				color: #222;
				padding: 10px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				background-color: #fff;
				z-index: 999;
				box-sizing: border-box;

				&>view {
					flex: 1;
					height: 100%;
					flex-direction: row;
					z-index: 999;
				}

				.date {
					justify-content: flex-end;
				}

				.actNav {
					color: #1677ff;
					font-weight: bold;
				}
			}

			.mask {
				z-index: 666;
				position: fixed;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background-color: rgba(0, 0, 0, 0);
				transition: background-color 0.15s linear;

				&.show {
					background-color: rgba(0, 0, 0, 0.4);
				}

				&.hide {
					display: none;
				}
			}

			.popup {
				position: relative;
				// max-height: 500rpx;
				background-color: #fff;
				border-bottom-left-radius: 20rpx;
				border-bottom-right-radius: 20rpx;
				overflow: scroll;
				z-index: 999;
				transition: all 1s linear;
				opacity: 0;
				display: none;

				.item-opt {
					height: 100rpx;
					padding: 0 40rpx;
					color: #8b9aae;
					border-bottom: 2rpx solid #f5f6f9;
				}

				.actOpt {
					color: #1677ff;
					font-weight: bold;
					position: relative;

					&::after {
						content: '✓';
						font-weight: bold;
						font-size: 36rpx;
						position: absolute;
						right: 40rpx;
					}
				}
			}

			.popupShow {
				display: block;
				opacity: 1;
			}
		}

		.icon-triangle {
			width: 16rpx;
			height: 16rpx;
			margin-left: 10rpx;
		}
	}
</style>