小程序自定义时间轴

 

 根据实际需求自定义的时间轴：

<template>
    <div class="time-axis-wrap">
        <!--  时间 -->
        <div class="mr-15">
            <div v-if="!schedule.repeat" class="text-right" :class="{ curentTime: isCurent }">
                {{ getTime.date === curDate ? '今天' : getTime.date }}
            </div>
            <div class="text-ccc f-12" :class="{ curentTime: isCurent }">
                {{ getTime.timeRange }}
            </div>
        </div>
        <!--  分割线 -->
        <div class="line">
            <div class="round"></div>
            <div v-if="isShowLeftLine" class="leftLine"></div>
        </div>

        <!-- 右边 -->
        <div class="content">
            <div class="flex items-center mb-10" :class="isCurent === true ? 'curentTitle' : 'outTitle'">
                <van-image class="flex mr-10" width="17" height="17" src="/static/img/icons/icon-course.png" />
                <span class="font-bold">{{ schedule.ca_name }}</span>
            </div>
            <div class="flex items-center text-565656 f-14">
                <van-image class="flex mr-10" width="10" height="12" src="/static/img/icons/icon-person.png" />
                <span>{{ schedule.real_name }}</span>
                <van-image
                    class="flex ml-20 mr-10"
                    width="11"
                    height="12"
                    :src="schedule.type === 2 ? '/static/img/icons/icon-sign-error.png' : '/static/img/icons/icon-sign.png'"
                />
                <span :class="{ 'text-danger': schedule.type === 2 }">{{ getSignStatus(schedule.type) }}</span>
                <template v-if="showApprovalBtn(schedule)">
                    <van-image
                        class="flex ml-20 mr-10"
                        width="11"
                        height="12"
                        :src="
                            schedule.approval_status === 2
                                ? '/static/img/icons/icon-approval-error.png'
                                : '/static/img/icons/icon-approval.png'
                        "
                    />
                    <span
                        class="text-primary"
                        :class="{ 'text-danger': schedule.approval_status === 2 }"
                        @click="$emit('action', schedule)"
                    >
                        {{ getApprovalStatus(schedule.approval_status) }}
                    </span>
                </template>
            </div>
        </div>
    </div>
</template>

<script>
import { format } from '@/utils/common'
import VanImage from '@/wxcomponents/vant/dist/image'
import moment from 'moment'

export default {
    name: 'timeAxis',
    components: {
        VanImage
    },
    props: {
        isCurent: {
            type: Boolean,
            default: false
        },
        isShowLeftLine: {
            type: Boolean,
            default: true
        },
        schedule: {
            type: Object,
            default: {}
        }
    },
    data() {
        return {
            curDate: ''
        }
    },
    created() {
        const date = new Date()
        this.curDate = format('mm-dd', date)
    },
    computed: {
        getTime() {
            const startTime = new Date(this.schedule.start_time)
            const endTime = new Date(this.schedule.end_time)
            return {
                date: format('mm-dd', startTime),
                timeRange: `${format('HH:MM', startTime)}-${format('HH:MM', endTime)}`
            }
        }
    },
    methods: {
        getSignStatus(i) {
            const status = ['已请假', '迟到', '旷课', '未签到', '已签到']
            return i === null ? '未开课' : status[i]
        },
        getApprovalStatus(status) {
            return ['审批中', '已请假', '驳回'][status] || '请假'
        },
        showApprovalBtn(item) {
            if (item.approval_status === null) {
                const time = moment(item.start_time).subtract(30, 'm')
                if (time.isBefore(moment())) {
                    return false
                }
                return true
            }
            return true
        }
    }
}
</script>

<style lang="scss" scoped>
.time-axis-wrap {
    display: flex;
    flex: 1;
    padding: 0px 10px 0 10px;
    color: #42464a;
}
.line {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 8px;
}
.round {
    width: 4px;
    height: 4px;
    border-radius: 100%;
    border: 2px solid #1989fa;
}
.leftLine {
    display: flex;
    flex: 1;
    width: 1px;
    margin: 3px 0 0 3px;
    background: #dadada;
}

.content {
    display: flex;
    flex: 1;
    flex-direction: column;
    margin-left: 15px;
    padding-bottom: 24px;
}

.curentTime {
    font-size: 14px;
    color: #1989fa;
}
.curentTitle {
    font-size: 16px;
    color: #1989fa;
}
.outTitle {
    font-size: 16px;
}
</style>

页面中调用：

<timeAxis v-for="(item, i) in scheduleList" :key="i" :schedule="item" @action="handleAction" />

参考链接：https://www.jianshu.com/p/a60e01b4a124