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

<template>
    <div class="wrap index">
        <div class="banner" :style="{backgroundImage: coverUrlComputed}"></div>
        <div class="center-wrap">
            <breadcrumb ref="breadcrumb" :data="'全部赛事/' + title"></breadcrumb>
            <div class="content">
                <div class="flex-between">
                    <el-tabs v-model="curType">
                        <el-tab-pane v-for="(item, index) in typeList" :key="index" :label="item.name" :name="item.id"></el-tab-pane>
                    </el-tabs>
                    <a class="status" :class="{wait: status == 0 || status == 4,signing: status == 2,signed: status == 1,finish: status == 3 || status == 5}" @click.stop="signup">{{ statusList[status] }}</a>
                </div>
                <h6 class="title">{{title}}</h6>
                <div class="meta">最近编辑时间：{{gmtModified}}</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>
        </div>
    </div>
</template>

<script>
import breadcrumb from '@/components/breadcrumb'
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: ["等待报名", "已报名", "立即报名", "报名截止", "比赛中", "已结束"],
        };
    },
    components: {
        breadcrumb
    },
    computed: {
        coverUrlComputed() {
            return this.coverUrl? 'url(' + this.coverUrl +  ')' : "url('../../../assets/img/info-banner.png')"
        }
    },
    mounted() {
        this.getData()
        this.getProgress()
    },
    methods: {
        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
                this.$refs.breadcrumb.update('全部赛事/' + data.name)
            }).catch(err => {})
        },
        getProgress() { // 获取竞赛进展
            this.$get(this.api.getContestProgress + '/' + this.id).then(res => {
                this.progress = res.contestProgressList
            }).catch(err => {});
        },
        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 => {})
            }
        }
    }
};
</script>

<style lang="scss" scoped>
.banner{
    width: 100%;
    height: 350px;
    background-size: 100% 350px;
    background-repeat: no-repeat;
}
.main .center-wrap {
    margin-top: 30px;
}
.content{
    position: relative;
    padding: 20px 40px;
    margin-top: 30px;
    background-color: #fff;
    .title{
        width: 67%;
        margin: 0 auto;
        font-size: 28px;
        text-align: center;
        color: #0B1D30;
    }
    .meta{
        padding: 16px 0;
        font-size: 12px;
        color: #999;
        text-align: center;
    }
    .status {
        padding: 0 23px;
        line-height: 34px;
        font-size: 14px;
        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: #ccc;
        }
    }
    .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>