fbySrcm_uniapp/pages/courseManage/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 navData" :key="index" @click="navClick(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>{{item.name}}</text>
						<image src="https://i.loli.net/2020/07/15/QsHxlr1gbSImvWt.png" mode="" class="icon-triangle" v-if="index === actNav"></image>
						<image src="https://i.loli.net/2020/07/15/xjVSvzWcH9NO7al.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: 'calc(var(--window-statsu-bar) + 44px)'
        // },
        border: {
            type: Boolean,
            default: false
        },
        filterData: {
            //必填
            type: Array,
            default: () => {
                return []
            }
        },
        defaultIndex: {
            //默认选中条件索引,超出一类时必填
            type: Array,
            default: () => {
                return [0];
            }
        }
    },
    data() {
        return {
			top: 0,
            navData: [],
            popupShow: false,
            showMask: false,
            actNav: null,
         
            selIndex: [] //选中条件索引
        };
    },
    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');
		},
		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(index) {
            if (index === this.actNav) {
                this.tapMask();
                return;
            }
            this.popupShow = true;
            this.showMask = true;
            this.actNav = index;
			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>