dz-app/pages/ie/entry-single-result/components/result-tabs.vue

<template>
    <view class="result-tabs">
        <view class="tabs-header">
            <uv-tabs :list="tabs" :current="current" @click="onTabClick"></uv-tabs>
        </view>
        <view class="tabs-content">
            <index-title-wrap title="历年录取" id="lnlq">
                <enroll-table :headers="enrollHistoryHeaders" :data="result.histories"/>
            </index-title-wrap>
            <index-title-wrap v-if="false" title="历年补录" class="mt-30" id="lnbl">
                <enroll-table :headers="clearingHistoryHeaders" :data="result.clearings"/>
            </index-title-wrap>
            <index-title-wrap title="院校开设" class="mt-30" id="yxks">
                <college-grouped-major/>
            </index-title-wrap>
            <index-title-wrap title="招生简章" class="mt-30" id="zsjz">
                <college-detail-brochure-cell v-for="item in enrollRuleBrochures" :item="item"
                                              :detail="detail" class="-mx-20"/>
            </index-title-wrap>
            <index-title-wrap title="相关推荐" class="mt-30" id="xgtj">
                <college-recommend v-if="major.code" :detail="detail" :major="major"/>
            </index-title-wrap>
        </view>
    </view>
</template>
<script>
import MxConst from "@/common/MxConst";
import IndexTitleWrap from "@/pages/index/components/index-title-wrap.vue";
import EnrollTable from './enroll-table.vue';
import CollegeDetailBrochureCell from "@/pages/college-library/components/college-detail-brochureCell.vue";
import CollegeGroupedMajor from "@/pages/ie/entry-single-result/components/college-grouped-major.vue";
import CollegeRecommend from "@/pages/ie/entry-single-result/components/college-recommend.vue";
import InjectAISingleDataMixin from "@/pages/ie/entry-single-result/components/InjectAISingleDataMixin";

export default {
    mixins: [InjectAISingleDataMixin],
    props: {
        scrollTop: {
            type: Number,
            default: 0
        }
    },
    components: {
        CollegeRecommend,
        CollegeGroupedMajor,
        CollegeDetailBrochureCell,
        IndexTitleWrap,
        EnrollTable
    },
    data() {
        return {
            tabs: [{name: '录取', id: 'lnlq'},
                {name: '院校开设', id: 'yxks'},
                {name: '招生简章', id: 'zsjz'},
                {name: '推荐', id: 'xgtj'}],
            current: 0,
            layout: [],
            enrollHistoryHeaders: [{label: '年份', prop: 'year'},
                {label: '人数', prop: 'enroll'},
                {label: '录取分数', prop: 'score'}],
            clearingHistoryHeaders: [{label: '年份', prop: 'year'},
                {label: '补录人数', prop: 'realNum'},
                {label: '录取分数', prop: 'score'}]
        };
    },
    computed: {
        enrollRuleBrochures() {
            return this.detail.enrollBrochures?.filter(eb => eb.type == MxConst.enum.brochureType.enrollRule) || []
        }
    },
    watch: {
        scrollTop(val) {
            for (let i = 0; i < this.layout.length; i++) {
                const h = val + 88;
                if (h > this.layout[i]) {
                    if (this.layout[i + 1] && h < this.layout[i + 1]) {
                        this.current = i; // TODO: 点击tab后定位不准？因为有的tab没有内容，导致希望的高度没有达到
                        break;
                    }
                }
            }
        },
        detail() {
            this.initLayout();
        }
    },
    mounted() {
        this.initLayout();
    },
    methods: {
        onTabClick(item) {
            const dom = document.getElementById(item.id);
            this.$nextTick(() => {
                uni.pageScrollTo({
                    scrollTop: dom.offsetTop - 90,
                    duration: 0
                });
            });
        },
        initLayout() {
            this.$nextTick(() => {
                this.layout = this.tabs.map(item => {
                    return document.getElementById(item.id).offsetTop;
                });
            });
        }
    }
};
</script>
<style lang="scss" scoped>
.result-tabs {
    background-color: white;

    ::v-deep .uv-tabs__wrapper__nav__item {
        flex: 1;
    }

    ::v-deep .uv-tabs__wrapper__nav__item__text {
        white-space: nowrap;
    }

    .tabs-header {
        position: sticky;
        top: 44px;
        z-index: 90;
        background-color: white;
    }

    .tabs-content {
        padding: 10rpx 30rpx 30rpx;
        margin-top: 20rpx;
    }
}
</style>