ks-app-employment-service/components/expected-station/expected-station.vue

<template>
    <view class="expected-station">
        <view class="sex-search" v-if="search">
            <uni-icons class="iconsearch" type="search" size="20"></uni-icons>
            <input class="uni-input searchinput" confirm-type="search" />
        </view>
        <view class="sex-content">
            <scroll-view ref="leftScroll" :show-scrollbar="false" :scroll-y="true" class="sex-content-left">
                <view
                    v-for="item in copyTree"
                    :key="item.id"
                    class="left-list-btn"
                    :class="{ 'left-list-btned': item.id === leftValue.id }"
                    @click="changeStationLog(item)"
                >
                    {{ item.label }}
                    <!-- <view class="positionNum" v-show="item.checkednumber">
                        {{ item.checkednumber }}
                    </view> -->
                </view>
            </scroll-view>
            <scroll-view
                :show-scrollbar="false"
                :scroll-top="scrollTop"
                @scroll="scrollTopBack"
                :scroll-y="true"
                class="sex-content-right"
            >
                <view v-for="item in rightValue" :key="item.id">
                    <view class="secondary-title">{{ item.label }}</view>
                    <view class="grid-sex">
                        <view
                            v-for="item in item.children"
                            :key="item.id"
                            :class="{ 'sex-right-btned': item.checked }"
                            class="sex-right-btn"
                            @click="addItem(item)"
                        >
                            {{ item.label }}
                        </view>
                        <!-- <view class="sex-right-btn sex-right-btned" @click="addItem()">客户经理</view>
                        <view class="sex-right-btn" @click="addItem()">客户经理</view> -->
                    </view>
                </view>
            </scroll-view>
        </view>
    </view>
</template>

<script>
export default {
    name: 'expected-station',
    data() {
        return {
            leftValue: {},
            rightValue: [],
            stationCateLog: 0,
            copyTree: [],
            scrollTop: 0,
            scrollTimer: null,
            lastScrollTime: 0,
        };
    },
    props: {
        station: {
            type: Array,
            default: [],
        },
        search: {
            type: Boolean,
            default: true,
        },
        max: {
            type: Number,
            default: 5,
        },
    },
    created() {
        this.copyTree = this.station;
        if (this.copyTree.length) {
            this.leftValue = this.copyTree[0];
            this.rightValue = this.copyTree[0].children;
        }
    },
    watch: {
        station(newVal) {
            this.copyTree = this.station;
            if (this.copyTree.length) {
                this.leftValue = this.copyTree[0];
                this.rightValue = this.copyTree[0].children;
            }
        },
    },
    beforeDestroy() {
        // 组件销毁前清除定时器
        if (this.scrollTimer) {
            clearTimeout(this.scrollTimer);
            this.scrollTimer = null;
        }
    },
    methods: {
        changeStationLog(item) {
            this.leftValue = item;
            this.rightValue = item.children;
            this.scrollTop = 0;
            
            // 使用更激进的防抖策略，避免频繁的左侧滚动
            if (this.scrollTimer) {
                clearTimeout(this.scrollTimer);
            }
            
            this.scrollTimer = setTimeout(() => {
                // 确保左侧列表滚动到正确位置，让当前选中的标签可见
                const index = this.copyTree.findIndex(i => i.id === item.id);
                if (index !== -1 && this.$refs.leftScroll) {
                    const itemHeight = 160; // 每个选项高度
                    const visibleHeight = 4 * itemHeight; // 可见区域高度
                    
                    // 计算目标位置
                    const targetTop = index * itemHeight;
                    
                    // 获取当前左侧列表的滚动位置
                    const currentLeftScrollTop = this.$refs.leftScroll.scrollTop || 0;
                    
                    // 只有当目标位置不在当前可见区域内时才滚动
                    if (targetTop < currentLeftScrollTop || targetTop > currentLeftScrollTop + visibleHeight - itemHeight) {
                        let targetScrollTop = targetTop;
                        
                        // 如果选中的标签在底部，确保它不会滚动出可见区域
                        if (targetTop > this.$refs.leftScroll.scrollHeight - visibleHeight) {
                            targetScrollTop = Math.max(0, this.$refs.leftScroll.scrollHeight - visibleHeight);
                        }
                        
                        this.$refs.leftScroll.scrollTo({
                            top: targetScrollTop,
                            duration: 100 // 进一步减少滚动动画时间
                        });
                    }
                }
            }, 100);
        },
        scrollTopBack(e) {
            const currentTime = Date.now();
            
            // 更严格的防抖处理：如果距离上次滚动时间太短，则跳过处理
            if (currentTime - this.lastScrollTime < 80) {
                return;
            }
            this.lastScrollTime = currentTime;
            
            // 清除之前的定时器
            if (this.scrollTimer) {
                clearTimeout(this.scrollTimer);
            }
            
            // 设置新的定时器，延迟处理滚动事件
            this.scrollTimer = setTimeout(() => {
                this.scrollTop = e.detail.scrollTop;
                
                // 滚动时自动选中对应的左侧标签
                const scrollTop = e.detail.scrollTop;
                let currentSection = null;
                let minDistance = Infinity;
                
                // 遍历所有右侧的二级标题，找到当前最接近顶部的那个
                this.rightValue.forEach((section, index) => {
                    // 更精确地估算每个section的位置（考虑标题高度和内容高度）
                    const sectionTop = index * 280; // 增加估算高度，避免过于敏感
                    const distance = Math.abs(sectionTop - scrollTop);
                    
                    if (distance < minDistance) {
                        minDistance = distance;
                        currentSection = section;
                    }
                });
                
                // 只有当距离足够近时才切换左侧标签，避免过于敏感
                if (currentSection && minDistance < 100 && this.leftValue.id !== currentSection.parentId) {
                    const parentItem = this.copyTree.find(item => item.id === currentSection.parentId);
                    if (parentItem) {
                        this.leftValue = parentItem;
                        
                        // 使用更激进的防抖策略，避免频繁的左侧滚动
                        if (this.scrollTimer) {
                            clearTimeout(this.scrollTimer);
                        }
                        
                        this.scrollTimer = setTimeout(() => {
                            // 只在必要时滚动左侧列表，避免频繁滚动导致的抖动
                            const index = this.copyTree.findIndex(i => i.id === parentItem.id);
                            if (index !== -1 && this.$refs.leftScroll) {
                                // 获取当前左侧列表的滚动位置
                                const currentLeftScrollTop = this.$refs.leftScroll.scrollTop || 0;
                                const itemHeight = 160; // 每个选项高度
                                const visibleHeight = 4 * itemHeight; // 可见区域高度
                                
                                // 计算目标位置
                                const targetTop = index * itemHeight;
                                
                                // 只有当目标位置不在当前可见区域内时才滚动
                                if (targetTop < currentLeftScrollTop || targetTop > currentLeftScrollTop + visibleHeight - itemHeight) {
                                    let targetScrollTop = targetTop;
                                    
                                    // 如果选中的标签在底部，确保它不会滚动出可见区域
                                    if (targetTop > this.$refs.leftScroll.scrollHeight - visibleHeight) {
                                        targetScrollTop = Math.max(0, this.$refs.leftScroll.scrollHeight - visibleHeight);
                                    }
                                    
                                    this.$refs.leftScroll.scrollTo({
                                        top: targetScrollTop,
                                        duration: 100 // 进一步减少滚动动画时间
                                    });
                                }
                            }
                        }, 150); // 增加延迟，避免滚动冲突
                    }
                }
            }, 80); // 增加防抖延迟到80ms
        },
        addItem(item) {
            let titiles = [];
            let labels = [];
            let count = 0;

            // 先统计已选中的职位数量
            for (const firstLayer of this.copyTree) {
                for (const secondLayer of firstLayer.children) {
                    for (const thirdLayer of secondLayer.children) {
                        if (thirdLayer.checked) {
                            count++;
                        }
                    }
                }
            }
            for (const firstLayer of this.copyTree) {
                firstLayer.checkednumber = 0; // 初始化当前层级的 checked 计数
                for (const secondLayer of firstLayer.children) {
                    for (const thirdLayer of secondLayer.children) {
                        // **如果是当前点击的职位**
                        if (thirdLayer.id === item.id) {
                            if (!thirdLayer.checked && count >= 5) {
                                // 如果已经选了 5 个，并且点击的是未选中的职位，则禁止选择
                                uni.showToast({
                                    title: `最多选择5个职位`,
                                    icon: 'none',
                                });
                                continue; // 跳过后续逻辑，继续循环
                            }
                            // 切换选中状态
                            thirdLayer.checked = !thirdLayer.checked;
                        }
                        // 统计被选中的第三层节点
                        if (thirdLayer.checked) {
                            titiles.push(`${thirdLayer.id}`);
                            labels.push(`${thirdLayer.label}`);
                            firstLayer.checkednumber++; // 累加计数器
                        }
                    }
                }
            }
            titiles = titiles.join(',');
            labels = labels.join(',');
            this.$emit('onChange', {
                ids: titiles,
                labels,
            });
        },
    },
};
</script>

<style lang="stylus" scoped>
.secondary-title{
    color: #333333
    font-size: 28rpx
    padding: 40rpx 0 10rpx 30rpx;
}
.expected-station{
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%
}
.sex-search
    width: calc(100% - 28rpx - 28rpx);
    padding: 10rpx 28rpx;
    display: grid;
    // grid-template-columns: 50rpx auto;
    position: relative;
    .iconsearch
        position: absolute;
        left: 40rpx;
        top: 20rpx;
    .searchinput
        border-radius: 10rpx;
        background: #FFFFFF;
        padding: 10rpx 0 10rpx 58rpx;
.sex-content
    background: #FFFFFF;
    // border-radius: 20rpx;
    width: 100%;
    margin-top: 20rpx;
    display: flex;
    border-bottom: 2px solid #D9D9D9;
    overflow: hidden;
    height: 100%;
    .sex-content-left
        width: 198rpx;
        padding: 20rpx 0 0 0;
        /* 添加硬件加速优化 */
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
        will-change: transform;
        .left-list-btn
            padding: 0 40rpx 0 24rpx;
            display: grid;
            place-items: center;
            height: 100rpx;
            text-align: center;
            color: #606060;
            font-size: 28rpx;
            position: relative
            margin-top: 60rpx
            /* 优化渲染性能 */
            transform: translateZ(0);
            -webkit-transform: translateZ(0);
        .left-list-btn:first-child
            margin-top: 0
        // .positionNum
        //     position: absolute
        //     right: 0
        //     top: 50%;
        //     transform: translate(0, -50%)
        //     color: #FFFFFF
        //     background: #4778EC
        //     border-radius: 50%
        //     width: 36rpx;
        //     height: 36rpx;
        .left-list-btned
            color: #4778EC;
            position: relative;
        // .left-list-btned::after
        //     position: absolute;
        //     left: 20rpx;
        //     content: '';
        //     width: 7rpx;
        //     height: 38rpx;
        //     background: #4778EC;
        //     border-radius: 0rpx 0rpx 0rpx 0rpx;

    .sex-content-right
        // border-left: 2px solid #D9D9D9;
        background: #F6F6F6;
        flex: 1;
        /* 添加硬件加速优化 */
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
        will-change: transform;
        .grid-sex
            display: grid;
            grid-template-columns: 50% 50%;
            place-items: center;
            padding: 0 20rpx 40rpx 20rpx;
            .sex-right-btn
                width: 228rpx;
                height: 80rpx;
                font-size: 28rpx;
                line-height: 41rpx;
                text-align: center;
                display: grid;
                place-items: center;
                border-radius: 12rpx;
                margin-top: 30rpx;
                background: #E8EAEE;
                color: #606060;
                /* 优化渲染性能 */
                transform: translateZ(0);
                -webkit-transform: translateZ(0);
            .sex-right-btned
                font-weight: 500
                width: 224rpx;
                height: 76rpx;
                background: rgba(37,107,250,0.06);
                border: 2rpx solid #256BFA;
                color: #256BFA
                /* 优化渲染性能 */
                transform: translateZ(0);
                -webkit-transform: translateZ(0);
</style>