@ -17,7 +17,7 @@
< template v-if ="form.competitionScope === 2" >
< div class = "select-wrap" >
< span class = "label" > 省份 < / span >
< el -select size = "small" v-model ="form.provinceId" @change="getCity" >
< el -select size = "small" v-model ="form.provinceId" clearable @change="getCity" >
< el -option label = "请选择" value = "" > < / e l - o p t i o n >
< el -option
v - for = "(item,index) in provinces"
@ -29,7 +29,7 @@
< / div >
< div class = "select-wrap" >
< span class = "label" > 城市 < / span >
< el -select size = "small" v-model ="form.cityId" @change="initData" >
< el -select size = "small" v-model ="form.cityId" clearable @change="initData" >
< el -option label = "请选择" value = "" > < / e l - o p t i o n >
< el -option
v - for = "(item,index) in cities"
@ -57,7 +57,7 @@
< li v-for ="(item,index) in listData" :key="index" @click="toDetail(item)" >
< div class = "left" >
< div class = "cover" >
< img :src ="item.coverUrl "alt = "" >
< img : src = "item.coverUrl || 'https://huoran.oss-cn-shenzhen.aliyuncs.com/20220623/png/1539857403162943488.png' "alt = "" >
< / div >
< div class = "info" >
< div class = "title" > { { item . competitionName } } < / div >
@ -100,8 +100,7 @@
@ 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 >
< em > { { item . end } } < / em >
< / p >
< / div >
< / li >
@ -129,9 +128,8 @@
< / template >
< script >
import { mapAc tions } from "vuex" ;
import { mapMuta tions } from "vuex" ;
import { Loading } from "element-ui" ;
import bus from "@/libs/bus" ;
import Setting from "@/setting"
import util from "@/libs/util"
@ -139,6 +137,7 @@ export default {
name : "match" ,
data ( ) {
return {
timer : null ,
token : util . local . get ( Setting . tokenKey ) ,
way : 2 ,
statusList : [ "等待报名" , "已报名" , "立即报名" , "报名截止" , "比赛中" , "已结束" ] ,
@ -163,9 +162,13 @@ export default {
provinceId : '' ,
cityId : '' ,
sequence : '' ,
competitionScope : 1 , / / 大 赛 范 围 ( 0 : 本 校 内 1 : 全 平 台 2 . 指 定 区 域 、 院 校 )
competitionScope : '' , / / 大 赛 范 围 ( 0 : 本 校 内 1 : 全 平 台 2 . 指 定 区 域 、 院 校 )
} ,
scopes : [
{
id : '' ,
name : '不限'
} ,
{
id : 1 ,
name : '全平台'
@ -197,81 +200,8 @@ export default {
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 ) {
/ / s t a t u s 每 个 值 的 解 释 请 看 g e t D a t a 方 法
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 ) ;
@ -283,75 +213,88 @@ export default {
mounted ( ) {
this . getProvince ( )
this . getData ( )
this . $once ( "hook:beforeDestroy" , function ( ) {
this . timerList . forEach ( ( n , k ) => {
clearInterval ( n ) ;
} ) ;
this . timerList = [ ] ;
} ) ;
this . $once ( 'hook:beforeDestroy' , function ( ) {
clearInterval ( this . timer )
} )
} ,
methods : {
... mapActions ( "match" , [
"setMatchId" , "setMatchSignupStatus"
... mapMutations ( 'match' , [
'SET_SOURCE'
] ) ,
async getData ( ) {
this . loadIns = Loading . service ( )
const { token , form } = this
const scope = form . competitionScope
this . $post ( this . api . contestPageConditionQueryByOccupationlabStu , {
pageNum : this . page ,
pageSize : this . pageSize ,
platformSource : 1 , / / 大 赛 来 源 ( 0 中 台 ， 1 职 站 )
competitionScope : scope ,
cityId : scope === 2 ? ( form . cityId || null ) : null , / / 选 择 了 全 平 台 则 不 用 传 省 市 i d
provinceId : scope === 2 ? ( form . provinceId || null ) : null ,
sequence : form . sequence || null ,
keyWord : this . keyword
} ) . then ( ( { data } ) => {
this . listData = data . records
this . totals = data . total
let time = 60 * 60 * 1000 * 24 ;
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 ( ) ; / / 比 赛 结 束 时 间
/ / w h e t h e r T o S i g n U p 0 已 报 名 ， 1 未 报 名
if ( now < signUpStartTime ) { / / 报 名 没 开 始
n . status = 0 ;
n . end = Math . floor ( ( signUpStartTime - now ) / time ) ;
} else if ( now > signUpStartTime && now < signUpEndTime ) { / / 报 名 进 行 中
n . status = ( ! token || n . whetherToSignUp ) ? 2 : 1 / / 1 已 报 名 ， 2 立 即 报 名 ( 未 登 录 ， 或 者 w h e t h e r T o S i g n U p = 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 ;
}
getList ( ) {
const { form } = this
const scope = form . competitionScope
const data = {
pageNum : this . page ,
pageSize : this . pageSize ,
platformSource : 1 , / / 大 赛 来 源 ( 0 中 台 ， 1 职 站 )
cityId : scope === 2 ? ( form . cityId || null ) : null , / / 选 择 了 全 平 台 则 不 用 传 省 市 i d
provinceId : scope === 2 ? ( form . provinceId || null ) : null ,
sequence : form . sequence || null ,
keyWord : this . keyword
}
if ( scope ) data . competitionScope = scope
this . $post ( this . api . contestPageConditionQueryByOccupationlabStu , data ) . then ( ( { data } ) => {
this . listData = data . records
this . totals = data . total
const second = 1000 ;
const minute = second * 60 ;
const hour = minute * 60 ;
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 ( ) ; / / 比 赛 结 束 时 间
let total = 0
/ / w h e t h e r T o S i g n U p 0 已 报 名 ， 1 未 报 名
if ( now < signUpStartTime ) { / / 报 名 没 开 始
n . status = 0 ;
total = signUpStartTime - now
} else if ( now > signUpStartTime && now < signUpEndTime ) { / / 报 名 进 行 中
n . status = n . whetherToSignUp ? 2 : 1 / / 1 已 报 名 ， 2 立 即 报 名
total = signUpEndTime - now
} else if ( now > signUpEndTime && now < playStartTime ) { / / 报 名 结 束 了 , 但 比 赛 没 开 始
n . status = 3 ;
total = playStartTime - now
} else if ( now > playStartTime && now < playEndTime ) { / / 比 赛 进 行 中
n . status = 4 ;
total = playEndTime - now
} else if ( now > playEndTime ) { / / 比 赛 结 束
n . status = 5 ;
}
if ( total > 0 ) {
const day = Math . floor ( total / ( 60 * 60 * 1000 * 24 ) )
const time = ` ${ this . core . formateTime ( Math . floor ( total / hour ) ) } : ${ this . core . formateTime ( Math . floor ( total % hour / minute ) ) } : ${ this . core . formateTime ( Math . floor ( total % hour % minute / second ) ) } `
n . end = day ? day + '天' : time
}
/ / 比 赛 范 围
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
}
} ) ;
this . loadIns . close ( )
} ) . catch ( res => {
this . loadIns . close ( )
} )
/ / 比 赛 范 围
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
}
} ) ;
this . loadIns . close ( )
} ) . catch ( res => {
this . loadIns . close ( )
} )
} ,
getData ( ) {
this . loadIns = Loading . service ( )
this . getList ( )
if ( ! Setting . isDev ) {
clearInterval ( this . timer )
this . timer = setInterval ( this . getList , 1000 )
}
} ,
initData ( ) {
this . page = 1
@ -367,12 +310,14 @@ export default {
getCity ( ) {
const { form } = this
form . cityId = ''
this . $get ( this . api . queryCity , {
provinceId : form . provinceId
} ) . then ( ( { list } ) => {
this . cities = list
form . provinceId ?
this . $get ( this . api . queryCity , {
provinceId : form . provinceId
} ) . then ( ( { list } ) => {
this . cities = list
this . initData ( )
} ) . catch ( res => { } ) :
this . initData ( )
} ) . catch ( res => { } )
} ,
changeType ( type ) {
this . way = type ;
@ -389,10 +334,7 @@ export default {
this . initData ( )
} ,
toDetail ( item ) {
let status = item . status == 1 ? ( item . signup ? true : false ) : "hide" ;
this . setMatchId ( item . id ) ;
this . setMatchSignupStatus ( status ) ;
this . $router . push ( ` /touristMatch/details?status= ${ item . status } &end= ${ item . end } ` ) ;
this . $router . push ( ` /touristMatch/details?id= ${ item . id } &status= ${ item . status } &end= ${ item . end } ` ) ;
} ,
handleCurrentChange ( val ) {
this . page = val ;
@ -401,7 +343,7 @@ export default {
signup ( item ) {
/ / 如 果 没 登 录 ， 提 示 去 登 录
if ( item . status == 2 ) {
if ( this . token ) {
if ( util . local . get ( Setting . tokenKey ) ) {
this . $post ( this . api . addApplicant , {
contestId : item . id
} ) . then ( res => {
@ -412,6 +354,7 @@ export default {
this . $confirm ( '请先登录，是否直接前往登录？' , "提示" , {
type : 'success'
} ) . then ( ( ) => {
this . SET _SOURCE ( )
this . $router . push ( '/login' )
} ) . catch ( ( ) => { } )
}
@ -492,6 +435,9 @@ export default {
. label {
margin - right : 10 px ;
}
. el - select {
width : 130 px ;
}
}
. list - inner {
display : flex ;
