keysass_app/components/onLineCourseItem/index.vue

<template>
    <view class="onLineCourseItemWrap" @click="toLearn(onLineCourse)">
        <view class="onLineTitle">
            <view v-if="rejectStatus == '1'" class="backVersion">预告</view>
            <view v-if="rejectStatus == '2'" class="starting">直播中<img src="./liveSteam.png" alt=""></view>
            <view v-if="rejectStatus == '3'" class="preVersion">回放</view>
            <view>{{ courseTime(onLineCourse.courseTime) }}</view>
            <view class="onLineClassName">{{ onLineCourse.courseName }}</view>
        </view>
        <view class="onLineCourse">{{ onLineCourse.className }}</view>
        <view class="onLineTeacher">
            <img src="http://image.bjkeyware.com/static/index/teacher.png" alt="">
            讲师: {{ onLineCourse.instructor }}
        </view>
        <!-- <view>{{ courseTime(onLineCourse.date_time) }}</view> -->

        <view class="onLineBtnWrap">
            <view v-if="toLearnShow" class="onLineBtn toPay">付费学习￥{{ onLineCourse.amount }}</view>
            <view v-else class="onLineBtn toLearn">去学习</view>
        </view>
    </view>
</template>

<script>
import { dateFormat } from '../../utils/util';

export default {
    computed: {
        toLearnShow() {
            if ((this.onLineCourse.isPay == '1') && (this.onLineCourse.remark.indexOf(this.onLineCourse.courseId) == -1)) {
                return true
            }
            return false
        },
        rejectStatus() {
            const endTime = new Date(this.onLineCourse.date_time).getTime()
            const startTime = new Date(this.onLineCourse.courseTime).getTime()
            const nowTime = new Date().getTime()
            if (startTime > nowTime) {
                return '1'
            } else if (startTime < nowTime && endTime > nowTime) {
                return '2'
            } else {
                return '3'
            }
        },
        courseTime() {
            return function (val) {
                const tarTime = dateFormat(new Date(val))
                const nowTime = dateFormat(new Date())
                const day = tarTime.split(' ')[0];
                const nday = nowTime.split(' ')[0];

                let preDay = ''
                if (nday === day) {
                    preDay = '今日'
                } else if ((day.substr(0, 8) === nday.substr(0, 8)) && (day.substr(8, 10) * 1 - nday.substr(8, 10)) == 1) {
                    preDay = '明日'
                } else {
                    preDay = day
                }
                const temp = tarTime.split(' ')[1]
                const time = temp.slice(0, temp.lastIndexOf(':'));
                console.log(time);
                console.log(preDay + ' ' + time);
                return preDay + ' ' + time
            }
        }
    },
    props: {
        onLineCourse: Object
    },
    data() {
        return {

        }
    },
    methods: {
        toggleShow() {
            if ((this.onLineCourse.isPay == '1') && (this.onLineCourse.remark.indexOf(this.onLineCourse.courseId) == -1)) {
                this.onLineCourse.show = false
                return
            }
            this.onLineCourse.show = true
            return
        },
        toLearn() {
            this.toggleShow()
            this.$emit('toLearn', this.onLineCourse)
        },

    }
}
</script>

<style lang="scss">
.onLineCourseItemWrap {
    height: 270rpx;
    width: 700rpx;
    background: linear-gradient(135deg, #FCF5F0, #ECF3FD);
    box-shadow: 0rpx 2rpx 14rpx 1rpx rgba(8, 67, 140, 0.12);
    border-radius: 10rpx;
    margin: 0 auto;
    margin-bottom: 30rpx;


    .onLineTitle {
        font-size: 32rpx;
        display: flex;
        justify-content: flex-start;
        font-family: PingFang SC;
        font-weight: bold;
        height: 88rpx;
        padding: 30rpx 0 0 20rpx;
        line-height: 54rpx;

        .starting {
            font-family: PingFang SC;
            font-weight: 500;
            color: #FFFFFF;
            font-size: 28rpx;
            line-height: 40rpx;
            margin-top: 7rpx;
            height: 40rpx;
            margin-right: 10rpx;
            min-width: 120rpx;
            text-align: center;
            background: linear-gradient(90deg, #09B885, #0BE8A5);
            border-radius: 8rpx;

            img {
                margin-left: 5rpx;
                width: 15rpx;
                height: 15rpx;
            }
        }

        .backVersion {
            font-family: PingFang SC;
            font-weight: 500;
            color: #FFFFFF;
            font-size: 28rpx;
            line-height: 35rpx;
            margin-top: 10rpx;
            height: 35rpx;
            padding: 0 20rpx;
            background: linear-gradient(90deg, #FCA041, #FD6841);
            margin-right: 10rpx;
            border-radius: 8rpx;
            min-width: 95rpx;
        }

        .preVersion {
            font-family: PingFang SC;
            font-weight: 500;
            color: #FFFFFF;
            font-size: 28rpx;
            line-height: 35rpx;
            margin-top: 10rpx;
            height: 35rpx;
            padding: 0 20rpx;
            margin-right: 10rpx;
            background: linear-gradient(90deg, #06466b, #1479b3af);
            border-radius: 8rpx;
            min-width: 95rpx;
        }
    }
}


.onLineClassName {
    flex:1;width: 0;
    margin-left: 25rpx;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.onLineCourse {
    display: inline;
    padding: 5rpx 15rpx;
    border-radius: 6rpx;
    font-size: 30rpx;
    // width: 320rpx;
    color: #1A1A1A;
    line-height: 46rpx;
    background: #DEE9FD;
    margin-left: 18rpx;
}


.onLineTeacher {
    margin-top: 10rpx;
    margin-left: 24rpx;
    font-size: 28rpx;
    font-weight: 500;
    color: #666666;
    line-height: 46rpx;

    img {
        width: 20rpx;
        height: 20rpx;
        margin-right: 10rpx;
    }
}

.onLineBtnWrap {
    display: flex;
    justify-content: flex-end;
    margin: 0 25rpx;
}

.onLineBtn {
    min-width: 209rpx;
    padding: 0 5rpx;
    height: 56rpx;
    line-height: 56rpx;
    border-radius: 28rpx;
    // width: 209rpx;
    width: 167rpx;
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 24rpx;
    color: #FFFFFF;
    line-height: 56rpx;
    text-align: center;
}

.toLearn {
    background: linear-gradient(90deg, #FB8C16, #FEC36E);
}

.toPay {
    background: linear-gradient(90deg, #5EA6FD, #1A81F9);
    border: 1px solid #AAD1FE;
}
</style>