|
|
|
|
@ -12,13 +12,18 @@ |
|
|
|
|
<div class="content-wrap"> |
|
|
|
|
<el-card shadow="hover" style="margin: 24px 0"> |
|
|
|
|
<div class="flex-between"> |
|
|
|
|
<el-page-header @back="goBack" :content="'赛事详情'"></el-page-header> |
|
|
|
|
<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"> |
|
|
|
|
@ -37,12 +42,6 @@ |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
|
import { mapState, mapActions } from 'vuex' |
|
|
|
|
import { Loading } from 'element-ui'; |
|
|
|
|
import 'quill/dist/quill.core.css'; |
|
|
|
|
import 'quill/dist/quill.snow.css'; |
|
|
|
|
import 'quill/dist/quill.bubble.css'; |
|
|
|
|
import bus from '@/libs/bus' |
|
|
|
|
export default { |
|
|
|
|
name: 'matchdetail', |
|
|
|
|
data() { |
|
|
|
|
@ -51,7 +50,6 @@ export default { |
|
|
|
|
showSignup: this.$store.state.match.matchSignupStatus, |
|
|
|
|
coverUrl: '', |
|
|
|
|
title: '', |
|
|
|
|
time: '', |
|
|
|
|
curType: 1, |
|
|
|
|
typeList: [ |
|
|
|
|
{ |
|
|
|
|
@ -68,111 +66,45 @@ export default { |
|
|
|
|
description: '', |
|
|
|
|
gmtModified: '', |
|
|
|
|
progress: [], |
|
|
|
|
end: '', |
|
|
|
|
status: 0, |
|
|
|
|
statusList: ['准备报名','正在报名','准备竞赛','竞赛中','竞赛结束'], |
|
|
|
|
endList: ['报名开始','报名截止','竞赛开始','竞赛结束',''], |
|
|
|
|
loadIns: null |
|
|
|
|
status: this.$route.query.status, |
|
|
|
|
statusList: ["等待报名", "已报名", "立即报名", "报名截止", "比赛中", "已结束"], |
|
|
|
|
}; |
|
|
|
|
}, |
|
|
|
|
computed: { |
|
|
|
|
...mapState([ |
|
|
|
|
'userId', |
|
|
|
|
'name', |
|
|
|
|
'account', |
|
|
|
|
'phone', |
|
|
|
|
'schoolName', |
|
|
|
|
]), |
|
|
|
|
}, |
|
|
|
|
mounted() { |
|
|
|
|
bus.$emit('setBg','match') |
|
|
|
|
this.getData() |
|
|
|
|
this.getProgress() |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
...mapActions("match", [ |
|
|
|
|
"setMatchId", "setMatchSignupStatus" |
|
|
|
|
]), |
|
|
|
|
goBack() { |
|
|
|
|
goBack() { // 返回 |
|
|
|
|
this.$router.back(); |
|
|
|
|
}, |
|
|
|
|
getData() { |
|
|
|
|
this.loadIns = Loading.service() |
|
|
|
|
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 |
|
|
|
|
|
|
|
|
|
let time = 60 * 60 * 1000 * 24 |
|
|
|
|
let now = new Date().getTime() |
|
|
|
|
// 每个字段的含义请看match.vue |
|
|
|
|
let signUpStartTime = new Date(data.signUpStartTime).getTime() |
|
|
|
|
let signUpEndTime = new Date(data.signUpEndTime).getTime() |
|
|
|
|
let playStartTime = new Date(data.playStartTime).getTime() |
|
|
|
|
let playEndTime = new Date(data.playEndTime).getTime() |
|
|
|
|
if(now < signUpStartTime){ |
|
|
|
|
this.status = 0 |
|
|
|
|
this.end = Math.floor((signUpStartTime - now) / time) |
|
|
|
|
this.time = `报名开始时间：${data.signUpStartTime}` |
|
|
|
|
}else if(now > signUpStartTime && now < signUpEndTime){ |
|
|
|
|
this.status = 1 |
|
|
|
|
this.end = Math.floor((signUpEndTime - now) / time) |
|
|
|
|
this.time = `报名结束时间：${data.signUpEndTime}` |
|
|
|
|
}else if(now > signUpEndTime && now < playStartTime){ |
|
|
|
|
this.status = 2 |
|
|
|
|
this.end = Math.floor((playStartTime - now) / time) |
|
|
|
|
this.time = `竞赛开始时间：${data.playStartTime}` |
|
|
|
|
}else if(now > playStartTime && now < playEndTime){ |
|
|
|
|
this.status = 3 |
|
|
|
|
this.end = Math.floor((playEndTime - now) / time) |
|
|
|
|
this.time = `竞赛结束时间：${data.playEndTime}` |
|
|
|
|
}else if(now > playEndTime){ |
|
|
|
|
this.status = 4 |
|
|
|
|
this.time = '竞赛结束' |
|
|
|
|
} |
|
|
|
|
this.loadIns.close() |
|
|
|
|
}) |
|
|
|
|
.catch(err => { |
|
|
|
|
this.loadIns.close() |
|
|
|
|
}); |
|
|
|
|
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 => { |
|
|
|
|
|
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
toArticle(id){ |
|
|
|
|
this.$router.push('article?id=' + id) |
|
|
|
|
getProgress() { // 获取竞赛进展 |
|
|
|
|
this.$get(this.api.getContestProgress + '/' + this.id).then(res => { |
|
|
|
|
this.progress = res.contestProgressList |
|
|
|
|
}).catch(err => {}); |
|
|
|
|
}, |
|
|
|
|
tabChange(index){ |
|
|
|
|
tabChange(index){ // 切换菜单 |
|
|
|
|
this.curType = index |
|
|
|
|
}, |
|
|
|
|
signup(){ |
|
|
|
|
let data = { |
|
|
|
|
contestId: this.id, |
|
|
|
|
account: this.account, |
|
|
|
|
phone: this.phone, |
|
|
|
|
school: this.schoolName, |
|
|
|
|
userId: this.userId, |
|
|
|
|
userName: this.name |
|
|
|
|
} |
|
|
|
|
this.$post(this.api.addApplicant,data).then(res => { |
|
|
|
|
if(res.success){ |
|
|
|
|
this.$message.success('报名成功') |
|
|
|
|
this.setMatchId(this.id); |
|
|
|
|
this.setMatchSignupStatus(false); |
|
|
|
|
this.showSignup = false |
|
|
|
|
}else{ |
|
|
|
|
this.$message.error(res.message) |
|
|
|
|
signup(){ // 立即报名 |
|
|
|
|
if (this.status == 2) { |
|
|
|
|
let data = { |
|
|
|
|
contestId: this.id |
|
|
|
|
} |
|
|
|
|
}).catch(res => {}) |
|
|
|
|
this.$post(this.api.addApplicant,data).then(res => { |
|
|
|
|
this.$message.success('报名成功') |
|
|
|
|
this.status = 1; |
|
|
|
|
}).catch(res => {}) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
@ -227,6 +159,10 @@ export default { |
|
|
|
|
width: 700px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/deep/.el-page-header__left::after{ |
|
|
|
|
width: 0; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.content{ |
|
|
|
|
position: relative; |
|
|
|
|
padding: 20px 40px; |
|
|
|
|
@ -241,11 +177,44 @@ export default { |
|
|
|
|
color: rgba(0, 0, 0, 0.85); |
|
|
|
|
} |
|
|
|
|
.meta{ |
|
|
|
|
padding: 16px 0 32px; |
|
|
|
|
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; |
|
|
|
|
|
