UI_2022-02-10
parent
bc11841b59
commit
6277ff7435
77 changed files with 6682 additions and 5395 deletions
@ -1,24 +1,25 @@ |
||||
<template> |
||||
<div id="app" > |
||||
<div id="app"> |
||||
<router-view></router-view> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import Setting from '@/setting'; |
||||
import util from '@/libs/util'; |
||||
export default { |
||||
name: 'App', |
||||
created () { |
||||
import Setting from "@/setting"; |
||||
import util from "@/libs/util"; |
||||
|
||||
export default { |
||||
name: "App", |
||||
created() { |
||||
//在页面加载时读取localStorage里的状态信息 |
||||
if (util.local.get(Setting.storeKey) ) { |
||||
this.$store.replaceState(Object.assign({}, this.$store.state,util.local.get(Setting.storeKey))) |
||||
if (util.local.get(Setting.storeKey)) { |
||||
this.$store.replaceState(Object.assign({}, this.$store.state, util.local.get(Setting.storeKey))); |
||||
} |
||||
|
||||
//在页面刷新时将vuex里的信息保存到localStorage里 |
||||
window.addEventListener("beforeunload",()=>{ |
||||
util.local.get(Setting.tokenKey) && util.local.set(Setting.storeKey,this.$store.state) |
||||
}) |
||||
} |
||||
window.addEventListener("beforeunload", () => { |
||||
util.local.get(Setting.tokenKey) && util.local.set(Setting.storeKey, this.$store.state); |
||||
}); |
||||
} |
||||
}; |
||||
</script> |
||||
@ -1,16 +1,16 @@ |
||||
export default [ |
||||
['bold', 'italic', 'underline', 'strike'], |
||||
['blockquote', 'code-block'], |
||||
[{ 'header': 1 }, { 'header': 2 }], |
||||
[{ 'list': 'ordered' }, { 'list': 'bullet' }], |
||||
[{ 'script': 'sub' }, { 'script': 'super' }], |
||||
[{ 'indent': '-1' }, { 'indent': '+1' }], |
||||
[{ 'direction': 'rtl' }], |
||||
[{ 'size': ['small', false, 'large', 'huge'] }], |
||||
[{ 'header': [1, 2, 3, 4, 5, 6, false] }], |
||||
[{ 'color': [] }, { 'background': [] }], |
||||
[{ 'font': [] }], |
||||
[{ 'align': [] }], |
||||
['clean'], |
||||
['link', 'image', 'video'] |
||||
] |
||||
["bold", "italic", "underline", "strike"], |
||||
["blockquote", "code-block"], |
||||
[{ "header": 1 }, { "header": 2 }], |
||||
[{ "list": "ordered" }, { "list": "bullet" }], |
||||
[{ "script": "sub" }, { "script": "super" }], |
||||
[{ "indent": "-1" }, { "indent": "+1" }], |
||||
[{ "direction": "rtl" }], |
||||
[{ "size": ["small", false, "large", "huge"] }], |
||||
[{ "header": [1, 2, 3, 4, 5, 6, false] }], |
||||
[{ "color": [] }, { "background": [] }], |
||||
[{ "font": [] }], |
||||
[{ "align": [] }], |
||||
["clean"], |
||||
["link", "image", "video"] |
||||
]; |
||||
@ -1,30 +1,30 @@ |
||||
export const messages = { |
||||
'zh': { |
||||
"zh": { |
||||
i18n: { |
||||
breadcrumb: '国际化产品', |
||||
tips: '通过切换语言按钮，来改变当前内容的语言。', |
||||
btn: '切换英文', |
||||
title1: '常用用法', |
||||
p1: '要是你把你的秘密告诉了风，那就别怪风把它带给树。', |
||||
p2: '没有什么比信念更能支撑我们度过艰难的时光了。', |
||||
p3: '只要能把自己的事做好，并让自己快乐，你就领先于大多数人了。', |
||||
title2: '组件插值', |
||||
info: 'Element组件需要国际化，请参考 {action}。', |
||||
value: '文档' |
||||
breadcrumb: "国际化产品", |
||||
tips: "通过切换语言按钮，来改变当前内容的语言。", |
||||
btn: "切换英文", |
||||
title1: "常用用法", |
||||
p1: "要是你把你的秘密告诉了风，那就别怪风把它带给树。", |
||||
p2: "没有什么比信念更能支撑我们度过艰难的时光了。", |
||||
p3: "只要能把自己的事做好，并让自己快乐，你就领先于大多数人了。", |
||||
title2: "组件插值", |
||||
info: "Element组件需要国际化，请参考 {action}。", |
||||
value: "文档" |
||||
} |
||||
}, |
||||
'en': { |
||||
"en": { |
||||
i18n: { |
||||
breadcrumb: 'International Products', |
||||
tips: 'Click on the button to change the current language. ', |
||||
btn: 'Switch Chinese', |
||||
title1: 'Common usage', |
||||
breadcrumb: "International Products", |
||||
tips: "Click on the button to change the current language. ", |
||||
btn: "Switch Chinese", |
||||
title1: "Common usage", |
||||
p1: "If you reveal your secrets to the wind you should not blame the wind for revealing them to the trees.", |
||||
p2: "Nothing can help us endure dark times better than our faith. ", |
||||
p3: "If you can do what you do best and be happy, you're further along in life than most people.", |
||||
title2: 'Component interpolation', |
||||
info: 'The default language of Element is Chinese. If you wish to use another language, please refer to the {action}.', |
||||
value: 'documentation' |
||||
title2: "Component interpolation", |
||||
info: "The default language of Element is Chinese. If you wish to use another language, please refer to the {action}.", |
||||
value: "documentation" |
||||
} |
||||
} |
||||
} |
||||
}; |
||||
@ -1,16 +1,18 @@ |
||||
// rem等比适配配置文件
|
||||
// 基准大小
|
||||
const baseSize = 16 |
||||
const baseSize = 16; |
||||
|
||||
// 设置 rem 函数
|
||||
function setRem () { |
||||
function setRem() { |
||||
// 当前页面宽度相对于 1920宽的缩放比例，可根据自己需要修改。
|
||||
const scale = document.documentElement.clientWidth / 1920 |
||||
const scale = document.documentElement.clientWidth / 1920; |
||||
// 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整）
|
||||
document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px' |
||||
document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + "px"; |
||||
} |
||||
|
||||
// 初始化
|
||||
setRem() |
||||
setRem(); |
||||
// 改变窗口大小时重新设置 rem
|
||||
window.onresize = function () { |
||||
setRem() |
||||
} |
||||
window.onresize = function() { |
||||
setRem(); |
||||
}; |
||||
@ -1,31 +1,31 @@ |
||||
import store from '@/store'; |
||||
import router from '@/router'; |
||||
import generateBtnPermission from '../auth/generateBtnPermission'; |
||||
import store from "@/store"; |
||||
import router from "@/router"; |
||||
import generateBtnPermission from "../auth/generateBtnPermission"; |
||||
|
||||
const newRoutes = [] |
||||
const newRoutes = []; |
||||
|
||||
function createMeta(item){ |
||||
let meta = { title: item.name } |
||||
return meta |
||||
function createMeta(item) { |
||||
let meta = { title: item.name }; |
||||
return meta; |
||||
} |
||||
|
||||
function createRoute(data){ |
||||
function createRoute(data) { |
||||
data.map(e => { |
||||
if(e.select && e.path){ |
||||
let meta = createMeta(e) |
||||
if (e.select && e.path) { |
||||
let meta = createMeta(e); |
||||
newRoutes.push({ |
||||
name: e.path, |
||||
path: () => import(`@/pages/${e.path}.vue`), |
||||
meta |
||||
}) |
||||
}); |
||||
} |
||||
e.children && e.children.length && createRoute(e.children) |
||||
}) |
||||
e.children && e.children.length && createRoute(e.children); |
||||
}); |
||||
} |
||||
|
||||
export default function(data,path){ |
||||
generateBtnPermission(data) |
||||
createRoute(data) |
||||
store.dispatch('auth/addRoutes',newRoutes) |
||||
export default function(data, path) { |
||||
generateBtnPermission(data); |
||||
createRoute(data); |
||||
store.dispatch("auth/addRoutes", newRoutes); |
||||
// router.addRoutes(routes)
|
||||
} |
||||
@ -1,26 +1,26 @@ |
||||
import store from '@/store'; |
||||
import router from '@/router'; |
||||
import store from "@/store"; |
||||
import router from "@/router"; |
||||
|
||||
export default function(){ |
||||
export default function() { |
||||
setTimeout(() => { |
||||
let routes = store.state.auth.routes |
||||
let routes = store.state.auth.routes; |
||||
routes.forEach(e => { |
||||
if(e.path == '/'){ |
||||
e.component = () => import('@/layouts/home/index.vue') |
||||
}else{ |
||||
e.component = () => import(`@/pages/${e.path}.vue`) |
||||
if (e.path == "/") { |
||||
e.component = () => import("@/layouts/home/index.vue"); |
||||
} else { |
||||
e.component = () => import(`@/pages/${e.path}.vue`); |
||||
} |
||||
|
||||
e.children && e.children.forEach(n => { |
||||
n.path && (n.component = () => import(`@/pages/${n.path}.vue`)) |
||||
}) |
||||
}) |
||||
n.path && (n.component = () => import(`@/pages/${n.path}.vue`)); |
||||
}); |
||||
}); |
||||
|
||||
routes.push({ |
||||
path: '*', |
||||
redirect: '404' |
||||
}) |
||||
path: "*", |
||||
redirect: "404" |
||||
}); |
||||
|
||||
router.addRoutes(routes) |
||||
},500) |
||||
router.addRoutes(routes); |
||||
}, 500); |
||||
} |
||||
@ -1,6 +1,6 @@ |
||||
import router from '@/router'; |
||||
import router from "@/router"; |
||||
|
||||
export default function(){ |
||||
const newRouter = createRouter() |
||||
router.matcher = newRouter.matcher |
||||
export default function() { |
||||
const newRouter = createRouter(); |
||||
router.matcher = newRouter.matcher; |
||||
} |
||||
File diff suppressed because it is too large
Load Diff
@ -1,8 +1,8 @@ |
||||
export default { |
||||
beforeCreate() { |
||||
document.querySelector('body').setAttribute('style', 'background-color:#fff') |
||||
document.querySelector("body").setAttribute("style", "background-color:#fff"); |
||||
}, |
||||
beforeDestroy() { |
||||
document.body.removeAttribute('style') |
||||
document.body.removeAttribute("style"); |
||||
} |
||||
} |
||||
}; |
||||
@ -1,32 +1,278 @@ |
||||
<template> |
||||
<div class="box"> |
||||
<div class="search"> |
||||
<input type="text" placeholder="请输入课程名称" v-model="keyword" /> |
||||
<button>搜索</button> |
||||
</div> |
||||
|
||||
<div class="main"> |
||||
<div class="filter"> |
||||
<dl> |
||||
<dt>课程分类：</dt> |
||||
<dd> |
||||
<el-select v-model="classificationId" clearable placeholder="请选择课程分类" size="small" |
||||
@change="getData"> |
||||
<el-option label="不限" value=""></el-option> |
||||
<el-option v-for="(item,index) in classificationList" :key="index" :label="item.name" |
||||
:value="item.id"></el-option> |
||||
</el-select> |
||||
</dd> |
||||
</dl> |
||||
</div> |
||||
|
||||
<div class="courses"> |
||||
<template v-if="courseData.length"> |
||||
<ul> |
||||
<li v-for="(item, index) in courseData" :key="index" @click="toDetail(item.id)"> |
||||
<img :src="item.coverUrl" alt="" /> |
||||
<div class="title">{{ item.name }}</div> |
||||
<div class="desc" :class="{ie: core.isIE(),ie: core.isFirefox()}" v-html="item.description"></div> |
||||
</li> |
||||
</ul> |
||||
<div class="pagination"> |
||||
<el-pagination background layout="total, prev, pager, next" :total="totals" |
||||
@current-change="handleCurrentChange" :current-page="pageNo"> |
||||
</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> |
||||
</template> |
||||
|
||||
<script> |
||||
import { Loading } from "element-ui"; |
||||
import bus from "@/libs/bus"; |
||||
|
||||
export default { |
||||
name: 'course', |
||||
name: "course", |
||||
data() { |
||||
return { |
||||
|
||||
} |
||||
userId: this.$store.state.userId, |
||||
schoolId: this.$store.state.schoolId, |
||||
classificationId: "", |
||||
classificationList: [], |
||||
courseData: [], |
||||
keyword: "", |
||||
totals: 0, |
||||
pageNo: 1, |
||||
pageSize: 8, |
||||
searchTimer: null, |
||||
loadIns: null |
||||
}; |
||||
}, |
||||
computed: { |
||||
|
||||
mounted() { |
||||
bus.$emit("setBg", "course"); |
||||
this.getClassification(); |
||||
this.getData(); |
||||
}, |
||||
watch: { |
||||
|
||||
keyword: function(val) { |
||||
clearTimeout(this.searchTimer); |
||||
this.searchTimer = setTimeout(() => { |
||||
this.initData(); |
||||
}, 500); |
||||
} |
||||
}, |
||||
methods: { |
||||
|
||||
getData() { |
||||
this.loadIns = Loading.service(); |
||||
let data = { |
||||
classificationId: this.classificationId, |
||||
name: this.keyword, |
||||
port: 0, |
||||
schoolId: this.schoolId |
||||
}; |
||||
this.$get(`${this.api.queryCourseByCondition}/${this.pageNo}/${this.pageSize}`, data).then(res => { |
||||
this.courseData = res.courseList; |
||||
this.totals = res.total; |
||||
this.courseData.map(n => { |
||||
n.description = n.description.replace(/<img.*?(?:>|\/>)/gi, ""); |
||||
}); |
||||
this.loadIns.close(); |
||||
}).catch(res => { |
||||
this.loadIns.close(); |
||||
}); |
||||
}, |
||||
mounted() { |
||||
|
||||
initData() { |
||||
this.pageNo = 1; |
||||
this.getData(); |
||||
}, |
||||
} |
||||
getClassification() { |
||||
this.$get(this.api.queryGlClassification).then(res => { |
||||
this.classificationList = res.classificationList; |
||||
}).catch(res => { |
||||
}); |
||||
}, |
||||
changeType(type) { |
||||
this.classificationId = type; |
||||
this.initData(); |
||||
}, |
||||
handleCurrentChange(val) { |
||||
this.pageNo = val; |
||||
this.getData(); |
||||
}, |
||||
toDetail(id) { |
||||
this.$router.push(`/course/details?id=${id}`); |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.box { |
||||
padding: 20px; |
||||
background-color: #fff; |
||||
|
||||
.search { |
||||
position: relative; |
||||
width: 30%; |
||||
margin: 50px auto; |
||||
border-radius: 30px; |
||||
border: 1px solid #9076FF; |
||||
border-right: 0; |
||||
overflow: hidden; |
||||
|
||||
input { |
||||
width: 100%; |
||||
height: 44px; |
||||
line-height: 44px; |
||||
padding: 0 20px; |
||||
font-size: 14px; |
||||
color: #333; |
||||
border: 0; |
||||
outline: none !important; |
||||
box-sizing: border-box; |
||||
} |
||||
|
||||
button { |
||||
position: absolute; |
||||
top: 0; |
||||
right: 0; |
||||
padding: 0 20px; |
||||
line-height: 46px; |
||||
color: #fff; |
||||
background-color: #9076FF; |
||||
border: 0; |
||||
outline: none !important; |
||||
} |
||||
} |
||||
|
||||
.main { |
||||
width: 70%; |
||||
min-width: 920px; |
||||
padding: 40px; |
||||
margin: 0 auto; |
||||
border-radius: 16px; |
||||
background-color: #fdfdfd; |
||||
box-sizing: border-box; |
||||
|
||||
.filter { |
||||
margin-bottom: 10px; |
||||
|
||||
dl { |
||||
display: flex; |
||||
line-height: 30px; |
||||
|
||||
dt { |
||||
color: rgba(0, 0, 0, .85); |
||||
font-size: 14px; |
||||
} |
||||
|
||||
dd { |
||||
display: inline-flex; |
||||
align-items: center; |
||||
|
||||
span { |
||||
padding: 2px 10px; |
||||
margin: 0 10px; |
||||
color: rgba(0, 0, 0, .65); |
||||
font-size: 14px; |
||||
|
||||
cursor: pointer; |
||||
|
||||
&:hover { |
||||
color: #CC221C; |
||||
} |
||||
|
||||
&.classification { |
||||
border-radius: 4px; |
||||
color: #fff; |
||||
background-color: #CC221C; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.courses { |
||||
ul { |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
|
||||
li { |
||||
width: 24%; |
||||
min-height: 250px; |
||||
overflow: hidden; |
||||
padding: 10px; |
||||
margin: 10px .5%; |
||||
box-sizing: border-box; |
||||
cursor: pointer; |
||||
border-radius: 8px; |
||||
background-color: #fff; |
||||
transition: all 0.3s; |
||||
|
||||
img { |
||||
width: 100%; |
||||
height: 165px; |
||||
} |
||||
|
||||
.title { |
||||
margin: 10px 0 5px; |
||||
color: #333; |
||||
font-size: 16px; |
||||
word-wrap: break-word; |
||||
word-break: break-all; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
white-space: nowrap; |
||||
} |
||||
|
||||
.desc span { |
||||
color: #f00; |
||||
font-size: 14px; |
||||
background-color: #f00; |
||||
} |
||||
|
||||
.desc { |
||||
color: #999; |
||||
font-size: 14px; |
||||
display: -webkit-box; |
||||
-webkit-box-orient: vertical; |
||||
-webkit-line-clamp: 2; |
||||
overflow: hidden; |
||||
|
||||
&.ie { |
||||
height: 80px; |
||||
text-overflow: ellipsis; |
||||
white-space: nowrap; |
||||
} |
||||
} |
||||
|
||||
&:hover { |
||||
box-shadow: 0px 5px 12px 4px rgba(142, 123, 253, 0.09), 0px 3px 6px 0px rgba(142, 123, 253, 0.12), 0px 1px 2px -2px rgba(142, 123, 253, 0.16); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -1,32 +0,0 @@ |
||||
<template> |
||||
<div> |
||||
资讯 |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
name: 'information', |
||||
data() { |
||||
return { |
||||
|
||||
} |
||||
}, |
||||
computed: { |
||||
|
||||
}, |
||||
watch: { |
||||
|
||||
}, |
||||
methods: { |
||||
|
||||
}, |
||||
mounted() { |
||||
|
||||
}, |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
|
||||
</style> |
||||
@ -1,32 +1,573 @@ |
||||
<template> |
||||
<div class="box"> |
||||
<div class="search"> |
||||
<input type="text" placeholder="请输入竞赛名称" v-model="keyword" /> |
||||
<button>搜索</button> |
||||
</div> |
||||
|
||||
<div class="main"> |
||||
<div class="nav"> |
||||
<div class="sub-title">赛事报名</div> |
||||
<div class="sidebar"> |
||||
<div class="item" :class="{ active: way === item.id }" v-for="(item, index) in typeList" |
||||
:key="index" @click="changeType(item.id)">{{ item.name }} |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<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.name }}</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> |
||||
<p> |
||||
<span class="label">报名时间：</span><span class="val">{{ item.signUpStartTime}} ~ {{ item.signUpEndTime }}</span> |
||||
</p> |
||||
<p> |
||||
<span class="label">比赛时间：</span><span class="val">{{ item.playStartTime}} ~ {{ item.playEndTime }}</span> |
||||
</p> |
||||
</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">{{ item.end }}天</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="pageNo"> |
||||
</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> |
||||
</template> |
||||
|
||||
<script> |
||||
import { mapState, mapActions } from "vuex"; |
||||
import { Loading } from "element-ui"; |
||||
import bus from "@/libs/bus"; |
||||
|
||||
export default { |
||||
name: 'match', |
||||
name: "match", |
||||
data() { |
||||
return { |
||||
|
||||
way: "", |
||||
statusList: ["等待报名", "已报名", "立即报名", "报名截止", "比赛中", "已结束"], |
||||
endList: ["报名开始", "报名截止", "报名截止", "竞赛开始", "竞赛结束", ""], |
||||
typeList: [ |
||||
{ |
||||
id: "", |
||||
name: "近期报名" |
||||
}, |
||||
{ |
||||
id: 0, |
||||
name: "最近更新" |
||||
}, |
||||
{ |
||||
id: 1, |
||||
name: "已报名" |
||||
} |
||||
], |
||||
keyword: "", |
||||
searchTimer: null, |
||||
pageNo: 1, |
||||
pageSize: 10, |
||||
totals: 0, |
||||
listData: [], |
||||
covers: [], |
||||
loadIns: null, |
||||
contestIds: [], |
||||
isFirst: true, |
||||
timerList: [] |
||||
}; |
||||
}, |
||||
computed: { |
||||
...mapState([ |
||||
"userId", |
||||
"name", |
||||
"account", |
||||
"phone", |
||||
"schoolName" |
||||
]) |
||||
}, |
||||
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.getData(); |
||||
}, 500); |
||||
} |
||||
}, |
||||
mounted() { |
||||
bus.$emit("setBg", "match"); |
||||
this.getData(); |
||||
|
||||
this.$once("hook:beforeDestroy", function() { |
||||
this.timerList.forEach((n, k) => { |
||||
clearInterval(n); |
||||
}); |
||||
this.timerList = []; |
||||
}); |
||||
}, |
||||
methods: { |
||||
...mapActions("match", [ |
||||
"setMatchId", "setMatchSignupStatus" |
||||
]), |
||||
getData() { |
||||
let data = { |
||||
name: this.keyword, |
||||
way: this.way, |
||||
userId: this.userId |
||||
}; |
||||
this.loadIns = Loading.service(); |
||||
this.$get(`${this.api.onlineContestQuery}/${this.pageNo}/${this.pageSize}`, data).then(res => { |
||||
this.listData = res.contestList; |
||||
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(); // 比赛结束时间 |
||||
|
||||
}, |
||||
mounted() { |
||||
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; |
||||
} |
||||
|
||||
// 判断该用户已报名的比赛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.totals = res.total; |
||||
this.loadIns.close(); |
||||
this.isFirst = false; |
||||
}).catch(res => { |
||||
this.loadIns.close(); |
||||
}); |
||||
}, |
||||
} |
||||
changeType(type) { |
||||
this.way = type; |
||||
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; |
||||
} |
||||
}, |
||||
toDetail(item) { |
||||
let status = item.status == 1 ? (item.signup ? true : false) : "hide"; |
||||
this.setMatchId(item.id); |
||||
this.setMatchSignupStatus(status); |
||||
this.$router.push(`/match/details`); |
||||
}, |
||||
handleCurrentChange(val) { |
||||
this.pageNo = val; |
||||
this.getData(); |
||||
}, |
||||
signup(item) { |
||||
if (item.status == 2 && item.signup) { |
||||
let data = { |
||||
contestId: item.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.getData(); |
||||
} else { |
||||
this.$message.error(res.message); |
||||
} |
||||
}).catch(res => { |
||||
}); |
||||
} |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.box { |
||||
padding: 20px; |
||||
|
||||
.search { |
||||
position: relative; |
||||
width: 30%; |
||||
margin: 50px auto; |
||||
border-radius: 30px; |
||||
border: 1px solid #9076FF; |
||||
border-right: 0; |
||||
overflow: hidden; |
||||
|
||||
input { |
||||
width: 100%; |
||||
height: 44px; |
||||
line-height: 44px; |
||||
padding: 0 20px; |
||||
font-size: 14px; |
||||
color: #333; |
||||
border: 0; |
||||
outline: none !important; |
||||
box-sizing: border-box; |
||||
} |
||||
|
||||
button { |
||||
position: absolute; |
||||
top: 0; |
||||
right: 0; |
||||
padding: 0 20px; |
||||
line-height: 46px; |
||||
color: #fff; |
||||
background-color: #9076FF; |
||||
border: 0; |
||||
outline: none !important; |
||||
} |
||||
} |
||||
|
||||
.main { |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: flex-start; |
||||
padding-bottom: 40px; |
||||
margin-top: 20px; |
||||
|
||||
.nav { |
||||
width: 220px; |
||||
border-radius: 8px; |
||||
overflow: hidden; |
||||
|
||||
.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; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.list-wrap { |
||||
width: 50%; |
||||
min-width: 790px; |
||||
margin-left: 40px; |
||||
|
||||
.list { |
||||
padding: 32px; |
||||
background-color: #fff; |
||||
border-radius: 8px; |
||||
|
||||
li { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
padding-bottom: 24px; |
||||
margin-bottom: 20px; |
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.06); |
||||
transition: all 0.3s; |
||||
cursor: pointer; |
||||
|
||||
.left { |
||||
display: inline-flex; |
||||
|
||||
.cover { |
||||
img { |
||||
width: 200px; |
||||
height: 120px; |
||||
border-radius: 4px; |
||||
} |
||||
} |
||||
|
||||
.info { |
||||
display: inline-flex; |
||||
flex-direction: column; |
||||
justify-content: space-between; |
||||
margin-left: 20px; |
||||
|
||||
.title { |
||||
font-size: 20px; |
||||
color: rgba(0, 0, 0, .85); |
||||
} |
||||
|
||||
.metas { |
||||
font-size: 14px; |
||||
color: #999; |
||||
|
||||
div { |
||||
display: flex; |
||||
align-items: center; |
||||
margin-bottom: 5px; |
||||
|
||||
&.flex-top { |
||||
align-items: flex-start; |
||||
} |
||||
} |
||||
|
||||
.label, .val { |
||||
font-size: 14px; |
||||
color: rgba(0, 0, 0, .65); |
||||
white-space: nowrap; |
||||
} |
||||
|
||||
.val { |
||||
max-width: 350px; |
||||
} |
||||
|
||||
.a-line { |
||||
display: block; |
||||
} |
||||
} |
||||
|
||||
.desc { |
||||
font-size: 14px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.right { |
||||
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; |
||||
|
||||
&.wait { |
||||
background-color: #FAAD14; |
||||
} |
||||
|
||||
&.signing { |
||||
background-color: #9076FF; |
||||
} |
||||
|
||||
&.signed { |
||||
background-color: #52C41A; |
||||
} |
||||
|
||||
&.finish { |
||||
background-color: rgba(0, 0, 0, .45); |
||||
} |
||||
} |
||||
|
||||
.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: 14px; |
||||
white-space: nowrap; |
||||
|
||||
em { |
||||
font-size: 20px; |
||||
font-style: normal; |
||||
font-weight: bold; |
||||
color: #cb221c; |
||||
} |
||||
} |
||||
} |
||||
|
||||
&:hover { |
||||
.left { |
||||
.info { |
||||
.title { |
||||
color: #9076FF; |
||||
} |
||||
} |
||||
} |
||||
|
||||
border-bottom-color: #9076FF; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -1,27 +1,27 @@ |
||||
import router from './index' |
||||
import Setting from '@/setting' |
||||
import util from '@/libs/util' |
||||
import router from "./index"; |
||||
import Setting from "@/setting"; |
||||
import util from "@/libs/util"; |
||||
|
||||
router.beforeEach((to, from, next) => { |
||||
document.title = Setting.titleSuffix |
||||
const role = util.local.get(Setting.tokenKey) |
||||
if (!role && to.path !== '/login') { |
||||
next('/login') |
||||
} else if(role && to.path == '/login') { |
||||
next('/index') |
||||
document.title = Setting.titleSuffix; |
||||
const role = util.local.get(Setting.tokenKey); |
||||
if (!role && to.path !== "/login") { |
||||
next("/login"); |
||||
} else if (role && to.path == "/login") { |
||||
next("/index"); |
||||
} else { |
||||
let mg = from.query.mg |
||||
if(mg){ |
||||
if(!to.query.mg){ |
||||
let mg = from.query.mg; |
||||
if (mg) { |
||||
if (!to.query.mg) { |
||||
next({ |
||||
path: to.path, |
||||
query: {mg} |
||||
}) |
||||
}else{ |
||||
next() |
||||
query: { mg } |
||||
}); |
||||
} else { |
||||
next(); |
||||
} |
||||
}else{ |
||||
next() |
||||
} else { |
||||
next(); |
||||
} |
||||
} |
||||
}); |
||||
@ -1,4 +1,2 @@ |
||||
const getters = { |
||||
|
||||
} |
||||
export default getters |
||||
const getters = {}; |
||||
export default getters; |
||||
@ -1,25 +1,25 @@ |
||||
import Vue from 'vue'; |
||||
import Vuex from 'vuex'; |
||||
import getters from './getters' |
||||
import Vue from "vue"; |
||||
import Vuex from "vuex"; |
||||
import getters from "./getters"; |
||||
|
||||
Vue.use(Vuex); |
||||
|
||||
// https://webpack.js.org/guides/dependency-management/#requirecontext
|
||||
const modulesFiles = require.context('./modules', true, /\.js$/) |
||||
const modulesFiles = require.context("./modules", true, /\.js$/); |
||||
|
||||
// you do not need `import app from './modules/app'`
|
||||
// it will auto require all vuex module from modules file
|
||||
const modules = modulesFiles.keys().reduce((modules, modulePath) => { |
||||
// set './app.js' => 'app'
|
||||
const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1') |
||||
const value = modulesFiles(modulePath) |
||||
modules[moduleName] = value.default |
||||
return modules |
||||
}, {}) |
||||
const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, "$1"); |
||||
const value = modulesFiles(modulePath); |
||||
modules[moduleName] = value.default; |
||||
return modules; |
||||
}, {}); |
||||
|
||||
const store = new Vuex.Store({ |
||||
modules, |
||||
getters |
||||
}) |
||||
}); |
||||
|
||||
export default store |
||||
export default store; |
||||
@ -1,26 +1,26 @@ |
||||
/** |
||||
* 项目、系统相关 |
||||
* */ |
||||
export default { |
||||
export default { |
||||
namespaced: true, |
||||
state: { |
||||
lastSystemId: 1, |
||||
lastRecordType: 'practice' |
||||
lastRecordType: "practice" |
||||
}, |
||||
mutations: { |
||||
SET_SYSTEM_ID: (state, systemId) => { |
||||
state.lastSystemId = systemId |
||||
state.lastSystemId = systemId; |
||||
}, |
||||
SET_RECORD: (state, type) => { |
||||
state.lastRecordType = type |
||||
}, |
||||
state.lastRecordType = type; |
||||
} |
||||
}, |
||||
actions: { |
||||
setSystemId({ state,commit },systemId) { |
||||
commit('SET_SYSTEM_ID',systemId) |
||||
}, |
||||
setRecord({ state,commit },type) { |
||||
commit('SET_RECORD',type) |
||||
setSystemId({ state, commit }, systemId) { |
||||
commit("SET_SYSTEM_ID", systemId); |
||||
}, |
||||
setRecord({ state, commit }, type) { |
||||
commit("SET_RECORD", type); |
||||
} |
||||
} |
||||
} |
||||
}; |
||||
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 11 KiB |
@ -1,3 +1,3 @@ |
||||
[class*=" icon-"], [class^=icon-] { |
||||
font-family: iconfont!important; |
||||
font-family: iconfont !important; |
||||
} |
||||
Loading…
Reference in new issue