FE_occupationlab_client/src/pages/match/details/index.vue

<template>
    <div>
        <div class="banner-con" :style="{backgroundImage: coverUrlComputed}"></div>
        <div class="main">
            <div class="nav">
                <div class="sub-title">赛事报名</div>
                <div class="sidebar">
                    <div class="item" :class="{ active: curType === item.id }" v-for="(item, index) in typeList" :key="index" @click="tabChange(item.id)">{{item.name}}</div>
                </div>
            </div>

            <div class="content-wrap">
                <el-card shadow="hover" style="margin: 24px 0">
                    <div class="flex-between">
                        <el-page-header @back="goBack"></el-page-header>
                    </div>
                </el-card>
                <el-card shadow="hover">
                    <div class="content">
                        <h6 class="title">{{title}}</h6>
                        <div class="meta">最近编辑时间：{{gmtModified}}</div>
                        <div class="right">
                            <p class="status"
                               :class="{wait: status == 0 || status == 4,signing: status == 2,signed: status == 1,finish: status == 3 || status == 5}"
                               @click.stop="signup">{{ statusList[status] }}</p>
                        </div>
                        <div class="texts ql-editor" v-html="description" v-if="curType == 1"></div>
                        <div v-else>
                            <ul class="progress" v-if="progress.length">
                                <li v-for="(item,index) in progress" :key="index">
                                    <i class="dot" :class="[item.status == 0 ? 'not' : (item.status == 1 ? 'ing' : 'done el-icon-circle-check')]"></i>
                                    <p class="name">{{item.title}}</p>
                                    <p class="desc">{{item.description}}</p>
                                </li>
                            </ul>
                        </div>
                    </div>
                </el-card>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'matchdetail',
    data() {
        return {
            id: this.$store.state.match.matchId,
            showSignup: this.$store.state.match.matchSignupStatus,
            coverUrl: '',
            title: '',
            curType: 1,
            typeList: [
                {
                    id: 1,
                    icon: 'el-icon-document',
                    name: '竞赛信息'
                },
                {
                    id: 2,
                    icon: 'el-icon-setting',
                    name: '竞赛进展'
                }
            ],
            description: '',
            gmtModified: '',
            progress: [],
            status: this.$route.query.status,
            statusList: ["等待报名", "已报名", "立即报名", "报名截止", "比赛中", "已结束"],
        };
    },
    mounted() {
        this.getData()
        this.getProgress()
    },
    methods: {
        goBack() { // 返回
            this.$router.back();
        },
        getData() { // 获取竞赛信息
            this.$get(this.api.getContest + '/' + this.id).then(res => {
                let data = res.contest
                this.coverUrl = data.carouselUrl
                this.description = data.description
                this.title = data.name
                this.gmtModified = data.gmtModified
            }).catch(err => {});
        },
        getProgress() { // 获取竞赛进展
            this.$get(this.api.getContestProgress + '/' + this.id).then(res => {
                this.progress = res.contestProgressList
            }).catch(err => {});
        },
        tabChange(index){ // 切换菜单
            this.curType = index
        },
        signup(){ // 立即报名
            if (this.status == 2) {
                let data = {
                    contestId: this.id
                }
                this.$post(this.api.addApplicant,data).then(res => {
                    this.$message.success('报名成功')
                    this.status = 1;
                }).catch(res => {})
            }
        }
    },
    computed: {
        coverUrlComputed() {
            return this.coverUrl? 'url(' + this.coverUrl +  ')' : "url('../../../assets/img/info-banner.png')"
        }
    }
};
</script>

<style lang="scss" scoped>
.banner-con{
    width: 100%;
    height: 400px;
    // background-image: url('../../../assets/img/info-banner.png');
    background-size: 100vw 400px;
    background-repeat: no-repeat;
}
.main{
    display: flex;
    justify-content: center;
    align-items:flex-start;
    padding-bottom: 40px;
    .nav{
        width: 220px;
        border-radius: 8px;
        overflow: hidden;
        margin-top: -44px;
        .sub-title{
            line-height: 88px;
            color: #fff;
            font-size: 24px;
            text-align: center;
            background: #9076FF;
        }
        /deep/.sidebar{
            background-color: #fff;
            .item{
                padding: 15px 0;
                color: rgba(0,0,0,.85);
                font-size: 18px;
                text-align: center;
                cursor: pointer;
                &.active{
                    color: #9076FF;
                }
                &:hover{
                    background-color: #f4f1ff;
                }
            }
        }
    }
    .content-wrap{
        width: 950px;
        margin-left: 40px;
        @media(max-width: 1300px){
            width: 700px;
        }

        /deep/.el-page-header__left::after{
            width: 0;
        }

        .content{
            position: relative;
            padding: 20px 40px;
            background-color: #fff;
            border-radius: 8px;

            .title{
                width: 67%;
                margin: 0 auto;
                font-size: 24px;
                text-align: center;
                color: rgba(0, 0, 0, 0.85);
            }
            .meta{
                padding: 16px 0;
                font-size: 12px;
                color: rgba(0, 0, 0, 0.45);
                text-align: center;
            }
            .right{
                padding: 16px 0 32px;
                border-bottom: 1px solid rgba(0, 0, 0, 0.06);
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: flex-end;
                flex: 1;
                .status {
                    padding: 0 15px;
                    line-height: 32px;
                    font-size: 12px;
                    color: #fff;
                    background-color: #52C41A;
                    border-radius: 4px;
                    cursor: pointer;

                    &.wait {
                        background-color: #FAAD14;
                    }

                    &.signing {
                        background-color: #9076FF;
                    }

                    &.signed {
                        background-color: #52C41A;
                    }

                    &.finish {
                        background-color: rgba(0, 0, 0, .45);
                    }
                }
            }
            .texts{
                margin: 20px 0 50px;
                font-size: 16px;
                line-height: 1.6;
                text-indent: 2em;
                overflow: hidden;
                /deep/img{
                    max-width: 100%;
                }
            }
            .progress{
                position: relative;
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                padding: 50px 0;
                margin: 40px 0 20px;
                &:before{
                    content: '';
                    position: absolute;
                    left: 413px;
                    width: 1px;
                    height: 100%;
                    background-color: #E6E6E6;
                    @media(max-width: 1300px){
                        left: 289px;
                    }
                }
                li{
                    position: relative;
                    display: inline-flex;
                    align-items: center;
                    width: 90%;
                    margin-bottom: 40px;
                    .dot{
                        position: absolute;
                        left: 366px;
                        width: 13px;
                        height: 13px;
                        background-color: #fff;

                        &.not{
                            border-radius: 50%;
                            background-color: #fff;
                            border: 1px solid #cb221c;
                        }
                        &.ing{
                            width: 13px;
                            height: 13px;
                            padding: 1px;
                            border: 1px solid #cb221c;
                            border-radius: 50%;
                            background-color: #cb221c;
                            background-clip: content-box;
                        }
                        &.done{
                            left: 365px;
                            color: #cb221c;
                            font-size: 16px;
                        }
                        @media(max-width: 1300px){
                            left: 254px;
                            &.done{
                                left: 253px;
                            }
                        }
                    }
                    .name{
                        width: 43%;
                        font-size: 24px;
                        color: rgba(0, 0, 0, 0.85);
                    }
                    .desc{
                        position: relative;
                        padding: 24px 30px;
                        text-align: center;
                        color: rgba(0, 0, 0, 0.85);
                        font-size: 16px;
                        background-color: #fff;
                        border: 1px solid #E6E6E6;
                        border-radius: 8px;
                        &:before{
                            content: '';
                            z-index: 2;
                            position: absolute;
                            top: 28px;
                            left: -16px;
                            border: 8px solid transparent;
                            border-right-color: #fff;
                        }
                        &:after{
                            content: '';
                            z-index: 1;
                            position: absolute;
                            top: 27px;
                            left: -18px;
                            border: 9px solid transparent;
                            border-right-color: #E6E6E6;
                        }
                    }
                    &:nth-child(even){
                        flex-direction: row-reverse;
                        .name{
                            margin-left: 16%;
                            text-align: left;
                        }
                        .desc{
                            &:before{
                                left: auto;
                                right: -16px;
                                border: 8px solid transparent;
                                border-left-color: #fff;
                            }
                            &:after{
                                left: auto;
                                right: -18px;
                                border: 9px solid transparent;
                                border-left-color: #E6E6E6;
                            }
                        }
                    }
                    &:nth-child(odd){
                        .name{
                            margin-right: 16%;
                            text-align: right;
                        }
                    }
                    &:last-child{
                        margin-bottom: 0;
                    }
                }
            }
        }
    }
}
</style>