mteacher/src/views/activeProgram/activeDetail.vue

<template>
    <div class="activeDetail">
        <van-cell-group class="van-cell-group--inset" v-if="vipGroup.name">
            <van-cell :title="vipGroup.name" class="titleContent" title-class="titleStyle" label-class="labelStyle">
                <template #label>
                    <p>{{ vipGroup.description }}</p>
                </template>
            </van-cell>
        </van-cell-group>

        <h2 class="van-block__title">详细规则</h2>
        <van-row class="active-row">
            <van-col span="10">排课时间范围</van-col>
            <van-col span="14" v-if="vipGroup.coursesStartTime && vipGroup.coursesEndTime">{{ vipGroup.coursesStartTime }} 至 {{ vipGroup.coursesEndTime }}</van-col>
            <van-col span="14" v-else>--</van-col>
            <van-col span="10">是否扣减课程余额</van-col>
            <van-col span="14">{{ vipGroup.payToBalance ? '是' : '否' }}</van-col>
        </van-row>

        <h2 class="van-block__title">付费课程</h2>
        <div class="active-row">
            <van-row>
                <van-col span="8">课程类型</van-col>
                <van-col span="16">{{ vipGroup.courseType | coursesType }}&nbsp;</van-col>
                <van-col span="8" v-if="vipGroup.courseType == 'VIP'">课程形式</van-col>
                <van-col span="16" v-if="vipGroup.courseType == 'VIP'">{{ vipGroup.vipGroupCategoryNames }}&nbsp;</van-col>
                <van-col span="8">上课模式</van-col>
                <van-col span="16" v-if="vipGroup.courseType == 'PRACTICE'">线上&nbsp;</van-col>
                <van-col span="16" v-else>{{ vipGroup.giveTeachMode | formatTeachModel }}&nbsp;</van-col>
                <van-col span="8">单课时时长</van-col>
                <van-col span="16">{{ vipGroup.singleCourseTime }}分钟</van-col>
                <van-col span="8">课时数</van-col>
                <van-col span="16">{{ vipGroup.avgCourseNum }}&nbsp;</van-col>
            </van-row>
            <van-cell is-link class="teaching" :clickable="false">
                <template #title>
                    剩余 <span style="color: #01C1B5">
                        {{vipGroup.courseType == 'VIP' ? vipDetail.vipNum : null}}
                        {{vipGroup.courseType == 'PRACTICE' ? vipDetail.practiceNum : null}}
                    </span> 名学员未排课
                </template>
                <template #default>
                    <span  v-if="vipGroup.courseType == 'VIP' && vipDetail.vipNum || vipGroup.courseType == 'PRACTICE' && vipDetail.practiceNum" style="color: #01C1B5" @click="onProgram('pay')">立即排课</span>
                    <span v-else style="color: #c0c0c0">立即排课</span>
                </template>
            </van-cell>
        </div>

        <!-- 赠送课程类型，只有VIP和网管课的时候才有赠送课程 -->
        <template v-if="vipGroup.giveCourseType != 'MEMBER'">
            <h2 class="van-block__title">赠送课程</h2>
            <div class="active-row">
                <van-row>
                    <van-col span="8">课程类型</van-col>
                    <van-col span="16">{{ vipGroup.giveCourseType | coursesType }}&nbsp;</van-col>
                    <van-col span="8" v-if="vipGroup.giveCourseType == 'VIP'">课程形式</van-col>
                    <van-col span="16" v-if="vipGroup.giveCourseType == 'VIP'">{{ vipGroup.giveCategoryName }}&nbsp;</van-col>
                    <van-col span="8">上课模式</van-col>
                    <van-col span="16" v-if="vipGroup.giveCourseType == 'PRACTICE'">线上&nbsp;</van-col>
                    <van-col span="16" v-else>{{ vipGroup.giveTeachMode | formatTeachModel }}&nbsp;</van-col>
                    <van-col span="8">单课时时长</van-col>
                    <van-col span="16">{{ vipGroup.giveSingleCourseTime }}分钟</van-col>
                    <van-col span="8">课时数</van-col>
                    <van-col span="16">{{ vipGroup.giveCourseNum }}课时</van-col>
                </van-row>
                <van-cell is-link class="teaching" :clickable="false">
                    <template #title>
                        剩余 <span style="color: #01C1B5">
                            {{vipGroup.giveCourseType == 'VIP' ? vipDetail.giveVipNum : null}}
                            {{vipGroup.giveCourseType == 'PRACTICE' ? vipDetail.givePracticeNum : null}}
                        </span> 名学员未排课
                    </template>
                    <template #default>
                        <span v-if="vipGroup.giveCourseType == 'VIP' && vipDetail.giveVipNum || vipGroup.giveCourseType == 'PRACTICE' && vipDetail.givePracticeNum" style="color: #01C1B5" @click="onProgram('give')">立即排课</span>
                        <span v-else style="color: #c0c0c0">立即排课</span>
                    </template>
                </van-cell>
            </div>
        </template>

        <!-- <m-empty v-if="!vipDetail.giveVipNum && !vipDetail.givePracticeNum && !vipDetail.vipNum && !vipDetail.practiceNum" msg="暂无排课内容" /> -->
    </div>
</template>

<script>
import { getActivityWaitCourseStudentNum } from './api'
import MEmpty from '@/components/MEmpty'
import dayjs from 'dayjs'
export default {
    components: {
        MEmpty
    },
    data() {
        const query = this.$route.query
        return {
            activityId: query.activityId,
            vipDetail: {},
            vipGroup: {}
        }
    },
    mounted() {
        document.title = '活动详情'
        this.__init()
    },
    methods: {
        async __init() {
            try {
                let res = await getActivityWaitCourseStudentNum({ activityId: this.activityId })
                this.vipDetail = res.data
                let vipGroup = res.data.vipGroupActivity
                vipGroup.coursesStartTime = vipGroup.coursesStartTime ? dayjs(vipGroup.coursesStartTime).format('YYYY-MM-DD') : null
                vipGroup.coursesEndTime = vipGroup.coursesEndTime ? dayjs(vipGroup.coursesEndTime).format('YYYY-MM-DD') : null
                if(vipGroup.minCourseNum > 0) {
                    if(vipGroup.minCourseNum != vipGroup.maxCourseNum) {
                        vipGroup.avgCourseNum = vipGroup.minCourseNum + '课时 ~ ' + vipGroup.maxCourseNum + '课时'
                    } else {
                        vipGroup.avgCourseNum = vipGroup.maxCourseNum + '课时'
                    }
                } else {
                    vipGroup.avgCourseNum = '自定义'
                }
                this.vipGroup = vipGroup
            } catch {
                //
            }
        },
        onProgram(type) {
            // type pay 付费课 give 赠送课
            this.$router.push({
                path: '/program',
                query: {
                    activityId: this.activityId,
                    type: type
                }
            })
        }
    },
    filters: {
        formatTeachModel(val) {
            if(val === -1) {
                return '线上，线下'
            } else if(val === 0) {
                return '线上'
            } else if(val === 1) {
                return '线下'
            }
        }
    }
}
</script>

<style lang="less" scoped>
.activeDetail {
    background-color: #F5F5F5;
    min-height: 97vh;
    overflow: hidden;
    padding-bottom: 3vh;
}
.van-cell-group--inset {
    margin: .12rem .12rem 0;
    overflow: hidden;
    border-radius: 8px;
    .titleContent {
        padding: .14rem .16rem;
    }
    .titleStyle {
        font-size: .2rem;
        color: #333333;
        font-size: 500;
    }
    .labelStyle {
        padding-top: .08rem;
        color: #666666;
        font-size: .13rem;
        line-height: .2rem;
    }
}
.van-block__title {
    padding: .12rem .14rem .06rem;
    color: #808080;
    font-size: .14rem;
    line-height: .2rem;
}
.active-row {
    padding: .15rem .14rem;
    background: #FFF;
    font-size: .14rem;
    color: #1A1A1A;
    .van-col {
        border: 1px solid #E5E5E5;
        padding: .09rem .08rem;
        margin-bottom: -1px;
    }
    .van-col--8, .van-col--10 {
        margin-right: -1px;
        padding-left: .14rem;
        background: #F8F8F8;
        font-weight: 500;
    }
    .teaching {
        margin-top: .2rem;
        padding: 0;
        font-size: .16rem;
        color: #1A1A1A;
    }
}
</style>