dz-app/pages/index/components/schedule-steps.vue

<template>
    <index-title-wrap title="考试日程">
        <view class="bg-white p-40 mx-card">
            <uv-steps :current="currentStep" direction="column" dot>
                <uv-steps-item v-for="(s,idx) in currentPage" :key="idx" v-bind="s">
                    <template #desc>
                        <uv-text prefix-icon="clock" :type="idx==currentStep?'main':'tips'"
                                 :size="idx==currentStep?15:13" :text="s.time"/>
                        <uv-text v-if="s.desc" type="tips" size="12" margin="5px 0 0 0" :text="s.desc"/>
                    </template>
                </uv-steps-item>
            </uv-steps>
        </view>
        <view v-if="schedules.length>minSize" class="fx-row fx-cen-cen" style="margin-top: -22px">
            <view class="icon36 rd18-only bg-white shadow fx-col fx-cen-cen border-white half-circle rel"
                  @click="togglePage">
                <text class="f10 f-999" style="visibility: hidden; margin-top: -5px">{{
                        isOpen ? '收起' : '展开'
                    }}
                </text>
                <uv-icon size="12" :name="isOpen?'arrow-up':'arrow-down'" color="#999"/>
            </view>
        </view>
    </index-title-wrap>
</template>

<script>
import IndexTitleWrap from "@/pages/index/components/index-title-wrap.vue";
import {getMainCourseDate} from "@/api/webApi/career-news";

export default {
    name: "schedule-steps",
    components: {IndexTitleWrap},
    computed: {
        currentStep() {
            let step = -1
            const now = this.$uv.timeFormat()
            for (let i = 0; i < this.schedules.length; i++) {
                const schedule = this.schedules[i]
                if (now >= schedule.fireTime) step = i
                else break
            }
            return step
        },
        currentPage() {
            return this.schedules.slice(0, this.currentSize)
        },
        isOpen() {
            return this.schedules.length <= this.currentSize
        }
    },
    data() {
        return {
            minSize: 3,
            currentSize: 3,
            schedules: []
        }
    },
    mounted() {
        this.loadData()
    },
    methods: {
        async loadData() {
            const res = await getMainCourseDate()
            this.schedules = res.rows
        },
        togglePage() {
            this.currentSize = this.currentSize != this.schedules.length ? this.schedules.length : this.minSize
        }
    }
}
</script>

<style scoped>
.half-circle:before {
    content: ' ';
    position: absolute;
    z-index: 5;
    width: 50px; /*larger than circle area*/
    height: 20px;
    top: 0;
    background-color: white;
}
</style>