parent
5498353989
commit
35e94fcad8
12 changed files with 1380 additions and 99 deletions
|
Before Width: | Height: | Size: 168 KiB After Width: | Height: | Size: 129 KiB |
|
After Width: | Height: | Size: 602 B |
|
After Width: | Height: | Size: 861 B |
@ -0,0 +1,433 @@ |
||||
<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> |
||||
<div class="action"> |
||||
<p class="end-text" v-if="status != 5"> |
||||
距离{{ endList[status] }}还有<em>{{ end }}</em>天 |
||||
</p> |
||||
<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> |
||||
</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" :class="item.status == 0 ? 'not' : (item.status == 1 ? 'ing' : 'done')"> |
||||
<i class="dot"></i> |
||||
<p class="name">{{item.title}}</p> |
||||
<p class="desc">{{item.description}}</p> |
||||
</li> |
||||
<img class="rocket" src="@/assets/img/rocket.png" alt=""> |
||||
</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, |
||||
end: this.$route.query.end, |
||||
statusList: ["等待报名", "已报名", "立即报名", "报名截止", "比赛中", "已结束"], |
||||
endList: ["报名开始", "报名截止", "报名截止", "竞赛开始", "竞赛结束", ""], |
||||
coverUrl: '', |
||||
title: '', |
||||
curType: '1', |
||||
typeList: [ |
||||
{ |
||||
id: '1', |
||||
name: '竞赛信息' |
||||
}, |
||||
{ |
||||
id: '2', |
||||
name: '竞赛进展' |
||||
}, |
||||
{ |
||||
id: '3', |
||||
name: '通知公告' |
||||
} |
||||
], |
||||
description: '', |
||||
gmtModified: '', |
||||
signUpStartTime: '', |
||||
signUpEndTime: '', |
||||
playStartTime: '', |
||||
playEndTime: '', |
||||
progress: [], |
||||
status: this.$route.query.status, |
||||
statusList: ["等待报名", "已报名", "立即报名", "报名截止", "比赛中", "已结束"], |
||||
timer: null |
||||
}; |
||||
}, |
||||
components: { |
||||
breadcrumb |
||||
}, |
||||
directives: { |
||||
countdown: { |
||||
bind: function(el, binding, vnode) { |
||||
let that = vnode.context; |
||||
let time = '' |
||||
let second = 1000; |
||||
let minute = second * 60; |
||||
let hour = minute * 60; |
||||
let now = new Date().getTime(); |
||||
let signUpStartTime = new Date(that.core.dateCompatible(that.signUpStartTime)).getTime(); // 报名开始时间 |
||||
let signUpEndTime = new Date(that.core.dateCompatible(that.signUpEndTime)).getTime(); // 报名结束时间 |
||||
let playStartTime = new Date(that.core.dateCompatible(that.playStartTime)).getTime(); // 比赛开始时间 |
||||
let playEndTime = new Date(that.core.dateCompatible(that.playEndTime)).getTime(); // 比赛结束时间 |
||||
switch (that.status) { |
||||
// status每个值的解释请看getData方法 |
||||
case 0: |
||||
if (now > signUpStartTime) { |
||||
that.status = 1; |
||||
} else { |
||||
time = signUpStartTime - now; |
||||
} |
||||
break; |
||||
case 1: |
||||
if (now > signUpEndTime) { |
||||
that.status = 3; |
||||
} else { |
||||
time = signUpEndTime - now; |
||||
} |
||||
break; |
||||
case 2: |
||||
if (now > signUpEndTime) { |
||||
that.status = 3; |
||||
} else { |
||||
time = signUpEndTime - now; |
||||
} |
||||
break; |
||||
case 3: |
||||
if (now > playStartTime) { |
||||
that.status = 4; |
||||
} else { |
||||
time = playStartTime - now; |
||||
} |
||||
break; |
||||
case 4: |
||||
if (now > playEndTime) { |
||||
that.status = 5; |
||||
} else { |
||||
time = playEndTime - now; |
||||
} |
||||
break; |
||||
} |
||||
time = `${Math.floor(time / hour)}:${Math.floor(time % hour / minute)}:${Math.floor(time % hour % minute / second)}`; |
||||
that.timer = setInterval(() => { |
||||
let timeList = time.split(":"); |
||||
let total = Number.parseInt(timeList[0] * 60 * 60) + Number.parseInt(timeList[1] * 60) + Number.parseInt(timeList[2]); |
||||
if (total > 0) { |
||||
--total; |
||||
let hours = Math.floor(total / (60 * 60)); |
||||
let minutes = Math.floor(total % (60 * 60) / 60); |
||||
let seconds = Math.floor(total % (60 * 60) % 60); |
||||
time = `${that.core.formateTime(hours)}:${that.core.formateTime(minutes)}:${that.core.formateTime(seconds)}`; |
||||
} else { |
||||
clearInterval(that.timer); |
||||
} |
||||
el.innerHTML = time; |
||||
}, 1000) |
||||
} |
||||
} |
||||
}, |
||||
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.signUpStartTime = data.signUpStartTime |
||||
this.signUpEndTime = data.signUpEndTime |
||||
this.playStartTime = data.playStartTime |
||||
this.playEndTime = data.playEndTime |
||||
this.$forceUpdate() |
||||
this.$refs.breadcrumb.update('全部赛事/' + data.name) |
||||
}).catch(err => {}) |
||||
}, |
||||
getProgress() { // 获取竞赛进展 |
||||
this.$get(this.api.getContestProgress + '/' + this.id).then(res => { |
||||
this.progress = res.contestProgressList.reverse() |
||||
}).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; |
||||
padding: 120px 0 0 20%; |
||||
color: #fff; |
||||
background-size: 100% 350px; |
||||
background-repeat: no-repeat; |
||||
h6 { |
||||
margin-bottom: 30px; |
||||
font-size: 42px; |
||||
} |
||||
.text { |
||||
font-size: 20px; |
||||
line-height: 30px; |
||||
} |
||||
} |
||||
.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; |
||||
} |
||||
.action { |
||||
display: inline-flex; |
||||
align-items: center; |
||||
} |
||||
.status { |
||||
padding: 0 16px; |
||||
margin-left: 20px; |
||||
line-height: 34px; |
||||
font-size: 14px; |
||||
color: #fff; |
||||
background-color: #52C41A; |
||||
border-radius: 4px; |
||||
cursor: pointer; |
||||
&.wait { |
||||
background-color: #FAAD14; |
||||
} |
||||
&.signing { |
||||
background-color: $main-color; |
||||
} |
||||
&.signed { |
||||
background-color: #52C41A; |
||||
} |
||||
&.finish { |
||||
background-color: #ccc; |
||||
} |
||||
} |
||||
.end-text { |
||||
font-size: 12px; |
||||
color: #666; |
||||
em { |
||||
font-style: normal; |
||||
color: #f00; |
||||
} |
||||
} |
||||
.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; |
||||
width: 95%; |
||||
padding: 50px 0; |
||||
margin: 40px auto 60px; |
||||
text-align: left; |
||||
&:before{ |
||||
content: ''; |
||||
position: absolute; |
||||
top: 0; |
||||
left: 50%; |
||||
width: 2px; |
||||
height: 100%; |
||||
background-color: #E1E6F2; |
||||
} |
||||
&:after { |
||||
content: ''; |
||||
position: absolute; |
||||
top: -10px; |
||||
left: 430px; |
||||
border: 8px solid transparent; |
||||
border-bottom-color: #E1E6F2; |
||||
} |
||||
.rocket { |
||||
position: absolute; |
||||
bottom: -50px; |
||||
left: 425px; |
||||
} |
||||
li{ |
||||
position: relative; |
||||
width: 400px; |
||||
margin-bottom: 42px; |
||||
.dot{ |
||||
position: absolute; |
||||
top: 12px; |
||||
left: 431px; |
||||
width: 15px; |
||||
height: 15px; |
||||
background-color: #DCDCDC; |
||||
border-radius: 50%; |
||||
} |
||||
.name{ |
||||
display: inline-block; |
||||
padding: 0 19px; |
||||
margin-bottom: 16px; |
||||
line-height: 40px; |
||||
text-align: center; |
||||
font-size: 16px; |
||||
color: #fff; |
||||
border-radius: 20px; |
||||
background-color: #C4C4C4; |
||||
} |
||||
.desc{ |
||||
position: relative; |
||||
color: #333; |
||||
font-size: 14px; |
||||
} |
||||
&.ing, &.done { |
||||
.dot { |
||||
top: 8px; |
||||
background-color: #007EFF; |
||||
} |
||||
.name { |
||||
background-color: #007EFF; |
||||
} |
||||
} |
||||
&.ing { |
||||
.dot { |
||||
width: 27px; |
||||
height: 27px; |
||||
border: 6px solid #E2F1FB; |
||||
} |
||||
} |
||||
&:nth-child(odd) { |
||||
text-align: right; |
||||
&.ing { |
||||
.dot { |
||||
left: auto; |
||||
right: -51px; |
||||
} |
||||
} |
||||
.name { |
||||
&:before { |
||||
content: ''; |
||||
z-index: 2; |
||||
position: absolute; |
||||
top: 14px; |
||||
right: -35px; |
||||
border: 18px solid transparent; |
||||
border-top-width: 6px; |
||||
border-bottom-width: 6px; |
||||
border-left-color: #C4C4C4; |
||||
} |
||||
} |
||||
.desc { |
||||
text-align: right; |
||||
} |
||||
&.ing, &.done { |
||||
.name { |
||||
&:before { |
||||
border-left-color: #007EFF; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
&:nth-child(even) { |
||||
margin-left: 482px; |
||||
.dot { |
||||
left: -51px; |
||||
} |
||||
&.ing { |
||||
.dot { |
||||
left: -57px; |
||||
} |
||||
} |
||||
.name { |
||||
text-align: left; |
||||
&:after { |
||||
content: ''; |
||||
z-index: 2; |
||||
position: absolute; |
||||
top: 14px; |
||||
left: -35px; |
||||
border: 18px solid transparent; |
||||
border-top-width: 6px; |
||||
border-bottom-width: 6px; |
||||
border-right-color: #C4C4C4; |
||||
} |
||||
} |
||||
.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; |
||||
} |
||||
} |
||||
|
||||
&.ing, &.done { |
||||
.name { |
||||
&:after { |
||||
border-right-color: #007EFF; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
&:last-child{ |
||||
margin-bottom: 0; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,666 @@ |
||||
<template> |
||||
<div class="wrap index"> |
||||
<div class="search"> |
||||
<h6>赛事竞技，精彩纷呈</h6> |
||||
<div class="input"> |
||||
<img src="@/assets/img/search.png" alt=""> |
||||
<input type="text" placeholder="请输入关键词" v-model="keyword"> |
||||
</div> |
||||
</div> |
||||
|
||||
<!-- 课程筛选 --> |
||||
<div class="filter"> |
||||
<div class="center-wrap" style="padding: 0;margin: 0 auto;"> |
||||
<dl> |
||||
<dt>比赛范围：</dt> |
||||
<div class="select-wrap"> |
||||
<span class="label">省份</span> |
||||
<el-select size="small" v-model="form.provinceId" @change="getCity"> |
||||
<el-option label="不限" value=""></el-option> |
||||
<el-option |
||||
v-for="(item,index) in provinces" |
||||
:key="index" |
||||
:label="item.provinceName" |
||||
:value="item.provinceId" |
||||
></el-option> |
||||
</el-select> |
||||
</div> |
||||
<div class="select-wrap"> |
||||
<span class="label">城市</span> |
||||
<el-select size="small" v-model="form.cityId" @change="initData"> |
||||
<el-option label="不限" value=""></el-option> |
||||
<el-option |
||||
v-for="(item,index) in cities" |
||||
:key="index" |
||||
:label="item.cityName" |
||||
:value="item.cityId" |
||||
></el-option> |
||||
</el-select> |
||||
</div> |
||||
</dl> |
||||
<dl> |
||||
<dt>筛选排序：</dt> |
||||
<dd v-for="(item, i) in sorts" :key="i" :class="{active: form.sequence == item.id}" @click="changeSort(item.id)">{{ item.name }}</dd> |
||||
</dl> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="main"> |
||||
<div class="center-wrap list-inner"> |
||||
<div class="list-wrap"> |
||||
<div class="list"> |
||||
<template v-if="listData.length"> |
||||
<ul> |
||||
<li v-for="(item,index) in listData" :key="index" @click="toDetail(item)"> |
||||
<div class="left"> |
||||
<div class="cover"> |
||||
<img :src="item.coverUrl" alt=""> |
||||
</div> |
||||
<div class="info"> |
||||
<div class="title">{{ item.competitionName }}</div> |
||||
<div class="metas"> |
||||
<div :class="{'flex-top': item.sponsor.split(',').length > 1}"> |
||||
<span class="label">主办方：</span> |
||||
<template v-if="item.sponsor.split(',').length > 1"> |
||||
<div> |
||||
<span v-for="(sponsor,index) in item.sponsor.split(',')" |
||||
:key="index" class="val a-line">{{ sponsor }}</span> |
||||
</div> |
||||
</template> |
||||
<span v-else class="val">{{ item.sponsor }}</span> |
||||
</div> |
||||
<div :class="{'flex-top': item.undertaker.split(',').length > 1}"> |
||||
<span class="label">承办方：</span> |
||||
<template v-if="item.undertaker.split(',').length > 1"> |
||||
<div> |
||||
<span v-for="(undertaker,index) in item.undertaker.split(',')" |
||||
:key="index" class="val a-line">{{ undertaker }}</span> |
||||
</div> |
||||
</template> |
||||
<span v-else class="val">{{ item.undertaker }}</span> |
||||
</div> |
||||
<div> |
||||
<span class="label">报名时间：</span><span class="val">{{ item.signUpStartTime}} ~ {{ item.signUpEndTime }}</span> |
||||
</div> |
||||
<div> |
||||
<span class="label">比赛时间：</span><span class="val">{{ item.playStartTime}} ~ {{ item.playEndTime }}</span> |
||||
</div> |
||||
<div> |
||||
<span class="label">比赛范围：</span><span class="val">{{ item.ranges }}</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="right"> |
||||
<p class="status" |
||||
:class="{wait: item.status == 0 || item.status == 4,signing: item.status == 2,signed: item.status == 1,finish: item.status == 3 || item.status == 5}" |
||||
@click.stop="signup(item)">{{ statusList[item.status] }}</p> |
||||
<p class="end-text" v-if="item.status != 5"> |
||||
距离{{ endList[item.status] }}还有 |
||||
<template v-if="item.end > 0"><em>{{ item.end }}</em> 天</template> |
||||
<em v-else v-countdown="index">{{ item.end }}</em> |
||||
</p> |
||||
</div> |
||||
</li> |
||||
</ul> |
||||
<div class="pagination"> |
||||
<el-pagination background layout="total, prev, pager, next" :total="totals" |
||||
@current-change="handleCurrentChange" |
||||
:current-page="page"> |
||||
</el-pagination> |
||||
</div> |
||||
</template> |
||||
<template v-else> |
||||
<div class="empty"> |
||||
<div> |
||||
<img src="@/assets/img/none.png" alt=""> |
||||
<p>暂无赛事</p> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { mapActions } from "vuex"; |
||||
import { Loading } from "element-ui"; |
||||
import bus from "@/libs/bus"; |
||||
import Setting from "@/setting" |
||||
import util from "@/libs/util" |
||||
|
||||
export default { |
||||
name: "match", |
||||
data() { |
||||
return { |
||||
token: util.local.get(Setting.tokenKey), |
||||
way: 2, |
||||
statusList: ["等待报名", "已报名", "立即报名", "报名截止", "比赛中", "已结束"], |
||||
endList: ["报名开始", "报名截止", "报名截止", "竞赛开始", "竞赛结束", ""], |
||||
typeList: [ |
||||
{ |
||||
id: 1, |
||||
name: "本校赛事" |
||||
}, |
||||
{ |
||||
id: 2, |
||||
name: "赛事广场" |
||||
}, |
||||
{ |
||||
id: 3, |
||||
name: "已报名" |
||||
} |
||||
], |
||||
provinces: [], |
||||
cities: [], |
||||
form: { |
||||
provinceId: '', |
||||
cityId: '', |
||||
sequence: '' |
||||
}, |
||||
sorts: [ |
||||
{ |
||||
id: 1, |
||||
name: '近期报名' |
||||
}, |
||||
{ |
||||
id: 2, |
||||
name: '最近更新' |
||||
} |
||||
], |
||||
sort: 1, |
||||
keyword: "", |
||||
searchTimer: null, |
||||
page: 1, |
||||
pageSize: 10, |
||||
totals: 0, |
||||
listData: [], |
||||
covers: [], |
||||
loadIns: null, |
||||
contestIds: [], |
||||
isFirst: true, |
||||
timerList: [], |
||||
defaultBanner:'../../../assets/img/info-banner.png', |
||||
}; |
||||
}, |
||||
directives: { |
||||
countdown: { |
||||
bind: function(el, binding, vnode) { |
||||
let that = vnode.context; |
||||
let item = that.listData[binding.value]; |
||||
let time = ""; |
||||
|
||||
let second = 1000; |
||||
let minute = second * 60; |
||||
let hour = minute * 60; |
||||
let now = new Date().getTime(); |
||||
let signUpStartTime = new Date(that.core.dateCompatible(item.signUpStartTime)).getTime(); // 报名开始时间 |
||||
let signUpEndTime = new Date(that.core.dateCompatible(item.signUpEndTime)).getTime(); // 报名结束时间 |
||||
let playStartTime = new Date(that.core.dateCompatible(item.playStartTime)).getTime(); // 比赛开始时间 |
||||
let playEndTime = new Date(that.core.dateCompatible(item.playEndTime)).getTime(); // 比赛结束时间 |
||||
switch (item.status) { |
||||
// status每个值的解释请看getData方法 |
||||
case 0: |
||||
if (now > signUpStartTime) { |
||||
item.status = 1; |
||||
} else { |
||||
time = signUpStartTime - now; |
||||
} |
||||
break; |
||||
case 1: |
||||
if (now > signUpEndTime) { |
||||
item.status = 3; |
||||
} else { |
||||
time = signUpEndTime - now; |
||||
} |
||||
break; |
||||
case 2: |
||||
if (now > signUpEndTime) { |
||||
item.status = 3; |
||||
} else { |
||||
time = signUpEndTime - now; |
||||
} |
||||
break; |
||||
case 3: |
||||
if (now > playStartTime) { |
||||
item.status = 4; |
||||
} else { |
||||
time = playStartTime - now; |
||||
} |
||||
break; |
||||
case 4: |
||||
if (now > playEndTime) { |
||||
item.status = 5; |
||||
} else { |
||||
time = playEndTime - now; |
||||
} |
||||
break; |
||||
} |
||||
time = `${Math.floor(time / hour)}:${Math.floor(time % hour / minute)}:${Math.floor(time % hour % minute / second)}`; |
||||
let timer = setInterval(() => { |
||||
let timeList = time.split(":"); |
||||
let total = Number.parseInt(timeList[0] * 60 * 60) + Number.parseInt(timeList[1] * 60) + Number.parseInt(timeList[2]); |
||||
if (total > 0) { |
||||
--total; |
||||
let hours = Math.floor(total / (60 * 60)); |
||||
let minutes = Math.floor(total % (60 * 60) / 60); |
||||
let seconds = Math.floor(total % (60 * 60) % 60); |
||||
time = `${that.core.formateTime(hours)}:${that.core.formateTime(minutes)}:${that.core.formateTime(seconds)}`; |
||||
} else { |
||||
clearInterval(timer); |
||||
} |
||||
el.innerHTML = time; |
||||
}, 1000); |
||||
that.timerList.push(timer); |
||||
} |
||||
} |
||||
}, |
||||
watch: { |
||||
keyword: function(val) { |
||||
clearTimeout(this.searchTimer); |
||||
this.searchTimer = setTimeout(() => { |
||||
this.initData(); |
||||
}, 500); |
||||
} |
||||
}, |
||||
mounted() { |
||||
this.getProvince() |
||||
this.getData() |
||||
this.$once("hook:beforeDestroy", function() { |
||||
this.timerList.forEach((n, k) => { |
||||
clearInterval(n); |
||||
}); |
||||
this.timerList = []; |
||||
}); |
||||
}, |
||||
methods: { |
||||
...mapActions("match", [ |
||||
"setMatchId", "setMatchSignupStatus" |
||||
]), |
||||
async getData() { |
||||
this.loadIns = Loading.service() |
||||
const { way, form } = this |
||||
const res = await this.$post(this.api.contestPageConditionQueryByOccupationlabStu, { |
||||
pageNum: this.page, |
||||
pageSize: this.pageSize, |
||||
platformSource: 1, // 大赛来源(0中台，1职站) |
||||
cityId: form.cityId || null, |
||||
provinceId: form.provinceId || null, |
||||
sequence: form.sequence || null, |
||||
keyWord: this.keyword |
||||
}) |
||||
const { data } = res |
||||
this.listData = data.records |
||||
this.totals = data.total |
||||
// let contestIds = res.contestIds; |
||||
// this.contestIds = contestIds; |
||||
let time = 60 * 60 * 1000 * 24; |
||||
let covers = []; |
||||
this.listData.forEach((n, k) => { |
||||
// 报名时间、比赛时间处理 |
||||
let now = new Date().getTime(); |
||||
let signUpStartTime = new Date(this.core.dateCompatible(n.signUpStartTime)).getTime(); // 报名开始时间 |
||||
let signUpEndTime = new Date(this.core.dateCompatible(n.signUpEndTime)).getTime(); // 报名结束时间 |
||||
let playStartTime = new Date(this.core.dateCompatible(n.playStartTime)).getTime(); // 比赛开始时间 |
||||
let playEndTime = new Date(this.core.dateCompatible(n.playEndTime)).getTime(); // 比赛结束时间 |
||||
|
||||
if (now < signUpStartTime) { // 报名没开始 |
||||
n.status = 0; |
||||
n.end = Math.floor((signUpStartTime - now) / time); |
||||
} else if (now > signUpStartTime && now < signUpEndTime) { // 报名进行中 |
||||
n.status = 1; |
||||
n.end = Math.floor((signUpEndTime - now) / time); |
||||
} else if (now > signUpEndTime && now < playStartTime) { // 报名结束了,但比赛没开始 |
||||
n.status = 3; |
||||
n.end = Math.floor((playStartTime - now) / time); |
||||
} else if (now > playStartTime && now < playEndTime) { // 比赛进行中 |
||||
n.status = 4; |
||||
n.end = Math.floor((playEndTime - now) / time); |
||||
} else if (now > playEndTime) { // 比赛结束 |
||||
n.status = 5; |
||||
} |
||||
|
||||
// 比赛范围 |
||||
const list = n.contestRangeRespList |
||||
if (list) { |
||||
const range = [] |
||||
list.map(e => { |
||||
range.push(e.type ? (e.provinceName || e.cityName) : e.schoolName) |
||||
}) |
||||
n.ranges = `${n.range}（${range.join('，')}）` |
||||
} else { |
||||
n.ranges = n.range |
||||
} |
||||
|
||||
// 判断该用户已报名的比赛id集合中有没有该比赛id |
||||
// let isInclude = contestIds.includes(n.id); |
||||
// if (n.status == 1 && !isInclude) { // 如果报名在进行中,而且该用户没报名,则显示报名按钮,必须status为2,并且signup为true才能报名,下面报名的方法中有做判断 |
||||
// n.status = 2; |
||||
// n.signup = true; |
||||
// } else { |
||||
// n.signup = false; |
||||
// } |
||||
// (covers.length < 3 && n.carouselUrl) && covers.push(n); |
||||
}); |
||||
if (this.isFirst) this.covers = covers; |
||||
this.loadIns.close(); |
||||
this.isFirst = false; |
||||
}, |
||||
initData() { |
||||
this.page = 1 |
||||
this.getData() |
||||
}, |
||||
// 获取省份 |
||||
getProvince() { |
||||
this.$get(this.api.queryProvince).then(({ list }) => { |
||||
this.provinces = list |
||||
}).catch(res => {}) |
||||
}, |
||||
// 获取城市 |
||||
getCity() { |
||||
const { form } = this |
||||
form.cityId = '' |
||||
this.$get(this.api.queryCity, { |
||||
provinceId: form.provinceId |
||||
}).then(({ list }) => { |
||||
this.cities = list |
||||
this.initData() |
||||
}).catch(res => {}) |
||||
}, |
||||
changeType(type) { |
||||
this.way = type; |
||||
this.initData() |
||||
// if (type != 1) { |
||||
// this.getData(); |
||||
// } else { |
||||
// let listData = this.listData; |
||||
// let result = []; |
||||
// listData.forEach((n, k) => { |
||||
// let isInclude = this.contestIds.includes(n.id); |
||||
// if (n.status == 1 && isInclude) { |
||||
// result.push(n); |
||||
// } |
||||
// }); |
||||
// this.listData = result; |
||||
// this.totals = this.listData.length; |
||||
// } |
||||
}, |
||||
// 筛选排序 |
||||
changeSort(type) { |
||||
this.form.sequence = type |
||||
this.initData() |
||||
}, |
||||
toDetail(item) { |
||||
// console.log(item.status); |
||||
let status = item.status == 1 ? (item.signup ? true : false) : "hide"; |
||||
this.setMatchId(item.id); |
||||
this.setMatchSignupStatus(status); |
||||
this.$router.push(`/match/details?status=${item.status}&end=${item.end}`); |
||||
}, |
||||
handleCurrentChange(val) { |
||||
this.page = val; |
||||
this.getData(); |
||||
}, |
||||
signup(item) { |
||||
if (item.status == 2 && item.signup) { |
||||
let data = { |
||||
contestId: item.id, |
||||
}; |
||||
this.$post(this.api.addApplicant, data).then(res => { |
||||
this.$message.success("报名成功"); |
||||
this.getData(); |
||||
}).catch(res => {}) |
||||
} |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.search { |
||||
position: relative; |
||||
padding: 100px 0 130px; |
||||
text-align: center; |
||||
background: url(../../../assets/img/match-bg4.png) (27px 10px)/auto no-repeat, |
||||
url(../../../assets/img/match-bg5.png) (98% 20px)/auto no-repeat, |
||||
url(../../../assets/img/match-bg3.png) 0 0/100% 100% no-repeat; |
||||
h6 { |
||||
margin-bottom: 25px; |
||||
font-size: 26px; |
||||
color: #fff; |
||||
} |
||||
.input { |
||||
position: relative; |
||||
width: 700px; |
||||
margin: 0 auto; |
||||
} |
||||
img { |
||||
position: absolute; |
||||
top: 19px; |
||||
left: 14px; |
||||
} |
||||
input { |
||||
width: 100%; |
||||
height: 62px; |
||||
line-height: 62px; |
||||
padding: 0 50px; |
||||
font-size: 18px; |
||||
color: #333; |
||||
border: 0; |
||||
outline: none; |
||||
border-radius: 4px; |
||||
} |
||||
} |
||||
.main{ |
||||
background: url(../../../assets/img/match-bg1.png) (0px 95px)/auto auto no-repeat, |
||||
url(../../../assets/img/match-bg2.png) (98% bottom)/auto auto no-repeat; |
||||
.filter { |
||||
width: 100%; |
||||
background-color: #fff; |
||||
dl { |
||||
display: flex; |
||||
align-items: center; |
||||
margin: 20px 0; |
||||
dt { |
||||
color: #333; |
||||
font-size: 16px; |
||||
font-weight: 600; |
||||
} |
||||
dd { |
||||
margin: 0 10px; |
||||
color: #333; |
||||
font-size: 16px; |
||||
cursor: pointer; |
||||
&.active { |
||||
color: $main-color; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.select-wrap { |
||||
display: inline-flex; |
||||
align-items: center; |
||||
margin: 0 20px; |
||||
.label { |
||||
margin-right: 10px; |
||||
} |
||||
} |
||||
.list-inner { |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items:flex-start; |
||||
} |
||||
.nav{ |
||||
width: 156px; |
||||
text-align: right; |
||||
overflow: hidden; |
||||
background-color: #fff; |
||||
li { |
||||
padding: 0 24px; |
||||
font-size: 16px; |
||||
color: #666; |
||||
line-height: 48px; |
||||
border-bottom: 2px solid #f3f6fa; |
||||
border-right: 2px solid transparent; |
||||
cursor: pointer; |
||||
&:before { |
||||
content: ''; |
||||
display: inline-block; |
||||
width: 3px; |
||||
height: 3px; |
||||
margin-right: 10px; |
||||
vertical-align: middle; |
||||
border-radius: 50%; |
||||
background-color: #666; |
||||
} |
||||
&.active { |
||||
color: $main-color; |
||||
border-right-color: $main-color; |
||||
&:before { |
||||
background-color: $main-color; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.list-wrap { |
||||
flex: 1; |
||||
margin-left: 24px; |
||||
.list { |
||||
li { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
padding: 16px; |
||||
margin-bottom: 12px; |
||||
transition: all 0.3s; |
||||
cursor: pointer; |
||||
border-radius: 6px; |
||||
background-color: #fff; |
||||
.right { |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
align-items: flex-end; |
||||
flex: 1; |
||||
|
||||
.status { |
||||
padding: 0 23px; |
||||
line-height: 34px; |
||||
font-size: 14px; |
||||
color: #fff; |
||||
background-color: #52C41A; |
||||
border-radius: 4px; |
||||
&.wait { |
||||
background-color: #FAAD14; |
||||
} |
||||
|
||||
&.signing { |
||||
background-color: $main-color; |
||||
} |
||||
|
||||
&.signed { |
||||
background-color: #52C41A; |
||||
} |
||||
|
||||
&.finish { |
||||
background-color: #ccc; |
||||
} |
||||
} |
||||
|
||||
.btn { |
||||
padding: 12px 20px; |
||||
color: #fff; |
||||
background-color: #cb221c; |
||||
border-radius: 4px; |
||||
cursor: pointer; |
||||
|
||||
&:hover { |
||||
opacity: .9; |
||||
} |
||||
|
||||
&.disabled { |
||||
cursor: not-allowed; |
||||
background-color: #969696; |
||||
} |
||||
} |
||||
|
||||
.end-text { |
||||
margin-top: 10px; |
||||
color: rgba(0, 0, 0, .65); |
||||
font-size: 12px; |
||||
white-space: nowrap; |
||||
|
||||
em { |
||||
font-style: normal; |
||||
color: #f00; |
||||
} |
||||
} |
||||
} |
||||
|
||||
&:hover { |
||||
.left { |
||||
.info { |
||||
.title { |
||||
color: $main-color; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.left { |
||||
display: inline-flex; |
||||
.cover { |
||||
img { |
||||
width: 220px; |
||||
height: 140px; |
||||
border-radius: 6px; |
||||
} |
||||
} |
||||
|
||||
.info { |
||||
margin-left: 16px; |
||||
.title { |
||||
margin: 5px 0 15px; |
||||
font-size: 20px; |
||||
font-weight: 500; |
||||
color: #0B1D30; |
||||
} |
||||
.metas { |
||||
font-size: 14px; |
||||
color: #666; |
||||
div { |
||||
display: flex; |
||||
align-items: center; |
||||
margin-bottom: 5px; |
||||
|
||||
&.flex-top { |
||||
align-items: flex-start; |
||||
} |
||||
} |
||||
|
||||
.label, .val { |
||||
font-size: 14px; |
||||
color: #666; |
||||
white-space: nowrap; |
||||
} |
||||
|
||||
.val { |
||||
max-width: 350px; |
||||
} |
||||
|
||||
.a-line { |
||||
display: block; |
||||
} |
||||
} |
||||
|
||||
.desc { |
||||
font-size: 14px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,29 @@ |
||||
import BasicLayout from "@/layouts/home"; |
||||
|
||||
const meta = {}; |
||||
|
||||
const pre = "touristMatch-"; |
||||
|
||||
export default { |
||||
path: "/touristMatch", |
||||
name: "touristMatch", |
||||
redirect: { |
||||
name: `${pre}list` |
||||
}, |
||||
meta, |
||||
component: BasicLayout, |
||||
children: [ |
||||
{ |
||||
name: `${pre}list`, |
||||
path: `list`, |
||||
component: () => import("@/pages/touristMatch/list"), |
||||
meta: { title: "线上赛事" } |
||||
}, |
||||
{ |
||||
name: `${pre}details`, |
||||
path: `details`, |
||||
component: () => import("@/pages/touristMatch/details"), |
||||
meta: { title: "竞赛信息" } |
||||
} |
||||
] |
||||
}; |
||||
Loading…
Reference in new issue