huoran
/
FE_occupationlab_client
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 14 Wiki Activity

fix

Browse Source
alioss V2.3.0
yujialong 2 years ago
parent 4e745615fb
commit d543dbf308
4 changed files with 2396 additions and 2114 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1797
      src/pages/account/login/index.vue
  2. 771
      src/pages/activity/list/index.vue
  3. 242
      src/pages/activity/manage/manage/index.vue
  4. 1700
      src/pages/station/preview/index.vue

1797
src/pages/account/login/index.vue
View File

File diff suppressed because it is too large Load Diff

771
src/pages/activity/list/index.vue
Unescape View File

@ -1,99 +1,127 @@
<template> <template>
<div class="wrap index"> <div class="wrap index">
<div class="search"> <div class="search">
<h6>创业活动</h6> <h6>创业活动</h6>
<div class="input"> <div class="input">
<img src="@/assets/img/search.png" alt=""> <img src="@/assets/img/search.png"
<input type="text" placeholder="请输入关键词" v-model="keyword"> alt="">
</div> <input type="text"
</div> placeholder="请输入关键词"
v-model="keyword">
</div>
</div>
<div class="main"> <div class="main">
<div class="center-wrap list-inner"> <div class="center-wrap list-inner">
<ul v-if="token" class="nav"> <ul v-if="token"
<li :class="{ active: form.whetherToSignUp === item.id }" v-for="(item, index) in typeList" :key="index" @click="changeType(item.id)">{{ item.name }} class="nav">
</li> <li :class="{ active: form.whetherToSignUp === item.id }"
</ul> v-for="(item, index) in typeList"
<div class="list-wrap"> :key="index"
<!-- 课程筛选 --> @click="changeType(item.id)">{{ item.name }}
<div class="filter"> </li>
<div> </ul>
<dl> <div class="list-wrap">
<dt>筛选排序：</dt> <!-- 课程筛选 -->
<dd v-for="(item, i) in sorts" :key="i" :class="{active: form.filterSort == item.id}" @click="changeSort(item.id)">{{ item.name }}</dd> <div class="filter">
</dl> <div>
</div> <dl>
<el-button type="primary" @click="$router.push('manage')">我的项目</el-button> <dt>筛选排序：</dt>
</div> <dd v-for="(item, i) in sorts"
:key="i"
:class="{active: form.filterSort == item.id}"
@click="changeSort(item.id)">{{ item.name }}</dd>
</dl>
</div>
<el-button type="primary"
@click="$router.push('manage')">我的项目</el-button>
</div>
<div class="list"> <div class="list">
<template v-if="listData.length"> <template v-if="listData.length">
<ul> <ul>
<li v-for="(item,index) in listData" :key="index" @click="toDetail(item)"> <li v-for="(item,index) in listData"
<div class="left"> :key="index"
<div class="cover"> @click="toDetail(item)">
<img :src="item.coverUrl || 'https://huoran.oss-cn-shenzhen.aliyuncs.com/20230515/jpg/1657937339328520192.jpg'" alt=""> <div class="left">
</div> <div class="cover">
<div class="info"> <img :src="item.coverUrl || 'https://huoran.oss-cn-shenzhen.aliyuncs.com/20230515/jpg/1657937339328520192.jpg'"
<div class="title">{{ item.projectName }}</div> alt="">
<div class="metas"> </div>
<div> <div class="info">
<span class="label">报名时间：</span><span class="val">{{ item.signUpStartTime}} ~ {{ item.signUpEndTime }}</span> <div class="title">{{ item.projectName }}</div>
</div> <div class="metas">
<div> <div>
<span class="label">项目时间：</span><span class="val">{{ item.playStartTime}} ~ {{ item.playEndTime }}</span> <span class="label">报名时间：</span><span class="val">{{ item.signUpStartTime}} ~ {{ item.signUpEndTime }}</span>
</div> </div>
<template v-if="item.initiator"> <div>
<div :class="{'flex-top': item.initiator.split(',').length > 1}"> <span class="label">项目时间：</span><span class="val">{{ item.playStartTime}} ~ {{ item.playEndTime }}</span>
<span class="label">发起方：&emsp;</span> </div>
<span class="val">{{ item.initiator }}</span> <template v-if="item.initiator">
</div> <div :class="{'flex-top': item.initiator.split(',').length > 1}">
</template> <span class="label">发起方：&emsp;</span>
</div> <span class="val">{{ item.initiator }}</span>
</div> </div>
</div>
<div class="right">
<p class="status"
:class="{wait: item.status == 0,signing: item.status == 2,signed: item.status == 1,playing: item.status == 4,finish: item.status == 3 || item.status == 4}" @click.stop="signup(item)">{{ statusList[item.status] }}</p>
<p class="end-text" v-if="item.end">
距离{{ endList[item.status] }}还有
<em >{{ 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> </template>
</div>
</div> </div>
</div>
<div class="right">
<p class="status"
:class="{wait: item.status == 0,signing: item.status == 2,signed: item.status == 1,playing: item.status == 4,finish: item.status == 3 || item.status == 4}"
@click.stop="signup(item)">{{ statusList[item.status] }}</p>
<p class="end-text"
v-if="item.end">
距离{{ endList[item.status] }}还有
<em>{{ 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>
</div> </div>
</template>
</div>
</div> </div>
</div>
<el-dialog title="报名" :visible.sync="signupVisible" :close-on-click-modal="false" width="300px">
<el-form class="dia-form">
<el-form-item>
<el-input placeholder="请输入4位数大赛邀请码" maxlength="4" v-model="invitationCode"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button size="small" type="primary" @click="signupSubmit">报名</el-button>
<el-button size="small" @click="signupVisible = false">取消</el-button>
</span>
</el-dialog>
</div> </div>
<el-dialog title="报名"
:visible.sync="signupVisible"
:close-on-click-modal="false"
width="300px">
<el-form class="dia-form">
<el-form-item>
<el-input placeholder="请输入4位数大赛邀请码"
maxlength="4"
v-model="invitationCode"></el-input>
</el-form-item>
</el-form>
<span slot="footer"
class="dialog-footer">
<el-button size="small"
type="primary"
@click="signupSubmit">报名</el-button>
<el-button size="small"
@click="signupVisible = false">取消</el-button>
</span>
</el-dialog>
</div>
</template> </template>
<script> <script>
@ -102,270 +130,270 @@ import { Loading } from "element-ui";
import Setting from "@/setting" import Setting from "@/setting"
import util from "@/libs/util" import util from "@/libs/util"
export default { export default {
data() { data () {
return { return {
timer: null, timer: null,
redisTimer: null, redisTimer: null,
token: util.local.get(Setting.tokenKey), token: util.local.get(Setting.tokenKey),
statusList: ["待报名", "取消报名", "马上报名", "报名截止", "已结束"], statusList: ["待报名", "取消报名", "马上报名", "报名截止", "已结束"],
endList: ["报名开始", "报名截止", "报名截止", "项目开始", "项目结束"], endList: ["报名开始", "报名截止", "报名截止", "项目开始", "项目结束"],
typeList: [ typeList: [
{ {
id: '', id: '',
name: "本校项目" name: "本校项目"
}, },
{ {
id: 0, id: 0,
name: "已报名" name: "已报名"
}
],
form: {
filterSort: 0,
whetherToSignUp: ''
},
sorts: [
{
id: 0,
name: '最近更新'
},
{
id: 1,
name: '近期报名'
}
],
sort: 1,
keyword: "",
searchTimer: null,
page: 1,
pageSize: 10,
totals: 0,
listData: [],
loadIns: null,
timerList: [],
signupVisible: false,
curRow: {},
invitationCode: ''
};
},
watch: {
keyword: function(val) {
clearTimeout(this.searchTimer);
this.searchTimer = setTimeout(() => {
this.initData();
}, 500);
} }
}, ],
mounted() { form: {
this.getData() filterSort: 0,
this.$once('hook:beforeDestroy', function() { whetherToSignUp: ''
this.clearTimer() },
clearInterval(this.redisTimer) sorts: [
{
id: 0,
name: '最近更新'
},
{
id: 1,
name: '近期报名'
}
],
sort: 1,
keyword: "",
searchTimer: null,
page: 1,
pageSize: 10,
totals: 0,
listData: [],
loadIns: null,
timerList: [],
signupVisible: false,
curRow: {},
invitationCode: ''
};
},
watch: {
keyword: function (val) {
clearTimeout(this.searchTimer);
this.searchTimer = setTimeout(() => {
this.initData();
}, 500);
}
},
mounted () {
this.getData()
this.$once('hook:beforeDestroy', function () {
this.clearTimer()
clearInterval(this.redisTimer)
})
},
methods: {
...mapMutations('match', [
'SET_TYPE'
]),
getList () {
this.clearTimer()
const data = {
pageNum: this.page,
pageSize: this.pageSize,
platformSource: 2,
keyWords: this.keyword,
...this.form
}
this.$post(this.api.schoolActivities, data).then(({ data }) => {
const { records } = data
this.listData = records
this.totals = data.total
this.handleStatus()
// this.loadIns.close();
}).catch(res => {
// this.loadIns.close()
}) })
}, },
methods: { // 定时处理时间及状态
...mapMutations('match', [ handleStatus () {
'SET_TYPE' this.listData.map(item => {
]), if (item.signUpStartTime && item.signUpEndTime && item.playStartTime && item.playEndTime) {
getList() { let total = ''
this.clearTimer() let time = ''
const data = { let status = ''
pageNum: this.page, let signUpStartTime = new Date(this.core.dateCompatible(item.signUpStartTime)) // 报名开始时间
pageSize: this.pageSize, let signUpEndTime = new Date(this.core.dateCompatible(item.signUpEndTime)) // 报名结束时间
platformSource: 2, let playStartTime = new Date(this.core.dateCompatible(item.playStartTime)) // 比赛开始时间
keyWords: this.keyword, let playEndTime = new Date(this.core.dateCompatible(item.playEndTime)) // 比赛结束时间
...this.form let timer = setInterval(() => {
} const now = new Date()
this.$post(this.api.schoolActivities, data).then(({ data }) => { if (now < signUpStartTime) { // 报名没开始
const { records } = data status = 0
this.listData = records total = signUpStartTime - now
this.totals = data.total } else if (now > signUpStartTime && now < signUpEndTime) { // 报名进行中
this.handleStatus() // whetherToSignUp 0已报名，1未报名
// this.loadIns.close(); status = item.whetherToSignUp ? 2 : 1 // 1已报名，2立即报名
}).catch(res => { total = signUpEndTime - now
// this.loadIns.close() } else if (now > signUpEndTime && now < playStartTime) { // 报名结束了,但比赛没开始
}) status = 3
}, total = playStartTime - now
// 定时处理时间及状态 } else if (now > playEndTime) { // 比赛结束
handleStatus() { status = 4
this.listData.map(item => {
if (item.signUpStartTime && item.signUpEndTime && item.playStartTime && item.playEndTime) {
let total = ''
let time = ''
let status = ''
let signUpStartTime = new Date(this.core.dateCompatible(item.signUpStartTime)) // 报名开始时间
let signUpEndTime = new Date(this.core.dateCompatible(item.signUpEndTime)) // 报名结束时间
let playStartTime = new Date(this.core.dateCompatible(item.playStartTime)) // 比赛开始时间
let playEndTime = new Date(this.core.dateCompatible(item.playEndTime)) // 比赛结束时间
let timer = setInterval(() => {
const now = new Date()
if (now < signUpStartTime) { // 报名没开始
status = 0
total = signUpStartTime - now
} else if (now > signUpStartTime && now < signUpEndTime) { // 报名进行中
// whetherToSignUp 0已报名，1未报名
status = item.whetherToSignUp ? 2 : 1 // 1已报名，2立即报名
total = signUpEndTime - now
} else if (now > signUpEndTime && now < playStartTime) { // 报名结束了,但比赛没开始
status = 3
total = playStartTime - now
} else if (now > playEndTime) { // 比赛结束
status = 4
}
this.$set(item, 'status', status)
total = total / 1000
--total
if (total > 86400) { // 超过一天则显示天数
// clearInterval(timer)
this.$set(item, 'end', Math.floor(total / 86400) + '天')
} else if (total > 0) { // 一天之内，显示时分秒
let hours = Math.floor(total / (60 * 60))
let minutes = Math.floor(total % (60 * 60) / 60)
let seconds = Math.floor(total % (60 * 60) % 60)
time = `${this.core.formateTime(hours)}:${this.core.formateTime(minutes)}:${this.core.formateTime(seconds)}`
if (total > 0) this.$set(item, 'end', time)
} else if (item.status === 4) { // 竞赛结束，清除定时器
clearInterval(timer)
}
}, 1000)
this.timerList.push(timer)
} }
}) this.$set(item, 'status', status)
}, total = total / 1000
// 清除定时器 --total
clearTimer() { if (total > 86400) { // 超过一天则显示天数
this.timerList.forEach(n => { // clearInterval(timer)
clearInterval(n) this.$set(item, 'end', Math.floor(total / 86400) + '天')
}) } else if (total > 0) { // 一天之内，显示时分秒
this.timerList = [] let hours = Math.floor(total / (60 * 60))
}, let minutes = Math.floor(total % (60 * 60) / 60)
getData() { let seconds = Math.floor(total % (60 * 60) % 60)
// this.loadIns = Loading.service() time = `${this.core.formateTime(hours)}:${this.core.formateTime(minutes)}:${this.core.formateTime(seconds)}`
this.getList() if (total > 0) this.$set(item, 'end', time)
// if (!Setting.isDev) { } else if (item.status === 4) { // 竞赛结束，清除定时器
clearInterval(this.redisTimer) clearInterval(timer)
this.redisTimer = setInterval(this.getRedis, 1000)
// }
},
initData() {
this.page = 1
this.getData()
},
// 获取redis缓存
getRedis() {
this.$post(this.api.getRedisCacheActivity).then(({ data }) => {
if (data) {
localStorage.getItem('activityTimestampClient') !== data && this.getList() // 本地缓存跟redis返回的不一样，就查询列表
localStorage.setItem('activityTimestampClient', data)
} }
}).catch(res => {}) }, 1000)
}, this.timerList.push(timer)
changeType(type) { }
const { form } = this })
form.competitionScope = 3 },
form.provinceId = '' // 清除定时器
form.cityId = '' clearTimer () {
form.filterSort = 2 this.timerList.forEach(n => {
form.whetherToSignUp = type clearInterval(n)
this.initData() })
}, this.timerList = []
// 筛选排序 },
changeSort(type) { getData () {
this.form.filterSort = type // this.loadIns = Loading.service()
this.initData() this.getList()
}, // if (!Setting.isDev) {
toDetail(item) { clearInterval(this.redisTimer)
this.$router.push(`/activity/details?id=${item.id}`); this.redisTimer = setInterval(this.getRedis, 1000)
}, // }
handleCurrentChange(val) { },
this.page = val; initData () {
this.getData(); this.page = 1
}, this.getData()
},
// 获取redis缓存
getRedis () {
this.$post(this.api.getRedisCacheActivity).then(({ data }) => {
if (data) {
localStorage.getItem('activityTimestampClient') !== data && this.getList() // 本地缓存跟redis返回的不一样，就查询列表
localStorage.setItem('activityTimestampClient', data)
}
}).catch(res => { })
},
changeType (type) {
const { form } = this
form.competitionScope = 3
form.provinceId = ''
form.cityId = ''
form.filterSort = 2
form.whetherToSignUp = type
this.initData()
},
// 筛选排序
changeSort (type) {
this.form.filterSort = type
this.initData()
},
toDetail (item) {
this.$router.push(`/activity/details?id=${item.id}`);
},
handleCurrentChange (val) {
this.page = val;
this.getData();
},
// 报名提交 // 报名提交
signupSubmit() { signupSubmit () {
this.$post(this.api.saveActivityApplicant, {
activityId: this.curRow.id,
registrationInvitationCode: this.invitationCode
}).then(res => {
this.signupVisible = false
this.getData()
this.$message.success('报名成功')
}).catch(res => { })
},
// 报名
signup (item) {
const { status, id } = item
if (status == 2) { // 报名
// 如果需要邀请码
if (item.isNeedCode) {
this.invitationCode = ''
this.curRow = item
this.signupVisible = true
} else {
this.$post(this.api.saveActivityApplicant, { this.$post(this.api.saveActivityApplicant, {
activityId: this.curRow.id, activityId: id
registrationInvitationCode: this.invitationCode
}).then(res => { }).then(res => {
this.signupVisible = false
this.getData() this.getData()
this.$message.success('报名成功') this.$message.success('报名成功')
}).catch(res => {}) }).catch(res => { })
},
// 报名
signup(item) {
const { status, id } = item
if (status == 2) { // 报名
// 如果需要邀请码
if (item.isNeedCode) {
this.invitationCode = ''
this.curRow = item
this.signupVisible = true
} else {
this.$post(this.api.saveActivityApplicant, {
activityId: id
}).then(res => {
this.getData()
this.$message.success('报名成功')
}).catch(res => {})
}
} else if (status == 1) {
// 已报名，点击取消报名
this.$confirm('是否要取消报名？', '提示', {
type: 'success'
}).then(() => {
this.$post(`${this.api.delActivityApplicant}?id=${item.cancelId}`).then(res => {
this.getData()
this.$message.success('取消报名成功')
}).catch(res => {})
}).catch(() => {})
}
},
// 进入python系统
toPython() {
const form = this.curItem.curStage
let token = util.local.get(Setting.tokenKey);
util.cookies.set('assessmentId', '', -1)
util.cookies.set('startTime', '', -1)
util.cookies.set('stopTime', '', -1)
util.cookies.set('projectId', form.projectId)
util.cookies.set('token', token)
util.cookies.set('courseId', form.cid)
util.cookies.set('curriculumName', escape(form.systemName))
util.cookies.set('systemId', form.systemId)
util.cookies.set('competitionId', this.curItem.id)
util.cookies.set('stageId', form.stageId)
util.cookies.set('teamId', this.curItem.teamId)
util.cookies.set('stopTime', form.endTime)
util.cookies.set('resultsDetails', form.resultsDetails)
util.cookies.set('resultAnnouncementTime', form.resultAnnouncementTime)
util.cookies.set('fromManager', '', -1)
// 8个python子系统都跳这个地址，子系统会通过cookie里的systemId识别展示哪套系统
location.href = process.env.NODE_ENV === 'development' ?
`http://${location.hostname}:8085/#/` :
Setting.isPro ?
`https://${location.hostname}/pyTrials` :
`${location.origin}/pyTrials`
},
// 进入子系统
toSub() {
const form = this.curItem
const { systemId, projectId, cid, stageId } = form.curStage
const competitionId = form.id
const teamId = form.teamId
let token = util.local.get(Setting.tokenKey);
if (systemId == 11) {
// 银行系统
location.href = `${Setting.systemPath}/#/index/list?curriculumName=${this.curriculumName}&token=${token}&cid=${cid}&systemId=${systemId}&projectId=${projectId}&competitionId=${competitionId}&stageId=${stageId}&teamId=${teamId}&assessmentId=&classId=&stopTime=&test=true`
} else if (systemId == 12) {
// 众筹系统
window.open(`http://120.78.139.126:8879?systemId=${systemId}&courseId=${cid}&projectId=${projectId}&token=${token}&userId=${this.userId}&classId=1&competitionId=${competitionId}&stageId=${stageId}&teamId=${teamId}`);
} else {
// python系统
this.toPython()
}
} }
} else if (status == 1) {
// 已报名，点击取消报名
this.$confirm('是否要取消报名？', '提示', {
type: 'success'
}).then(() => {
this.$post(`${this.api.delActivityApplicant}?id=${item.cancelId}`).then(res => {
this.getData()
this.$message.success('取消报名成功')
}).catch(res => { })
}).catch(() => { })
}
},
// 进入python系统
toPython () {
const form = this.curItem.curStage
let token = util.local.get(Setting.tokenKey);
util.cookies.set('assessmentId', '', -1)
util.cookies.set('startTime', '', -1)
util.cookies.set('stopTime', '', -1)
util.cookies.set('projectId', form.projectId)
util.cookies.set('token', token)
util.cookies.set('courseId', form.cid)
util.cookies.set('curriculumName', escape(form.systemName))
util.cookies.set('systemId', form.systemId)
util.cookies.set('competitionId', this.curItem.id)
util.cookies.set('stageId', form.stageId)
util.cookies.set('teamId', this.curItem.teamId)
util.cookies.set('stopTime', form.endTime)
util.cookies.set('resultsDetails', form.resultsDetails)
util.cookies.set('resultAnnouncementTime', form.resultAnnouncementTime)
util.cookies.set('fromManager', '', -1)
// 8个python子系统都跳这个地址，子系统会通过cookie里的systemId识别展示哪套系统
location.href = process.env.NODE_ENV === 'development' ?
`http://${location.hostname}:8085/#/` :
Setting.isPro ?
`https://${location.hostname}/pyTrials` :
`${location.origin}/pyTrials`
},
// 进入子系统
toSub () {
const form = this.curItem
const { systemId, projectId, cid, stageId } = form.curStage
const competitionId = form.id
const teamId = form.teamId
let token = util.local.get(Setting.tokenKey);
if (systemId == 11) {
// 银行系统
location.href = `${Setting.systemPath}/#/index/list?curriculumName=${this.curriculumName}&token=${token}&cid=${cid}&systemId=${systemId}&projectId=${projectId}&competitionId=${competitionId}&stageId=${stageId}&teamId=${teamId}&assessmentId=&classId=&stopTime=&test=true`
} else if (systemId == 12) {
// 众筹系统
window.open(`http://120.78.139.126:8879?systemId=${systemId}&courseId=${cid}&projectId=${projectId}&token=${token}&userId=${this.userId}&classId=1&competitionId=${competitionId}&stageId=${stageId}&teamId=${teamId}`);
} else {
// python系统
this.toPython()
}
} }
}
}; };
</script> </script>
@ -402,11 +430,11 @@ export default {
border-radius: 4px; border-radius: 4px;
} }
} }
.main{ .main {
background: url(../../../assets/img/match-bg1.png) (0px 95px)/auto auto no-repeat, 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; url(../../../assets/img/match-bg2.png) (98% bottom) / auto auto no-repeat;
.center-wrap { .center-wrap {
width: 1078px; width: 1078px;
} }
} }
.filter { .filter {
@ -441,23 +469,23 @@ export default {
} }
} }
.select-wrap { .select-wrap {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
margin: 0 10px; margin: 0 10px;
.label { .label {
margin-right: 10px; margin-right: 10px;
white-space: nowrap; white-space: nowrap;
} }
.el-select { .el-select {
width: 130px; width: 130px;
} }
} }
.list-inner { .list-inner {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items:flex-start; align-items: flex-start;
} }
.nav{ .nav {
width: 156px; width: 156px;
text-align: right; text-align: right;
overflow: hidden; overflow: hidden;
@ -516,11 +544,11 @@ export default {
font-size: 14px; font-size: 14px;
color: #fff; color: #fff;
white-space: nowrap; white-space: nowrap;
background-color: #52C41A; background-color: #52c41a;
border-radius: 4px; border-radius: 4px;
@include ellipsis(); @include ellipsis();
&.wait { &.wait {
background-color: #FAAD14; background-color: #faad14;
} }
&.signing { &.signing {
@ -528,7 +556,7 @@ export default {
} }
&.signed { &.signed {
background-color: #52C41A; background-color: #52c41a;
} }
&.playing { &.playing {
background-color: #f96d6d; background-color: #f96d6d;
@ -547,7 +575,7 @@ export default {
cursor: pointer; cursor: pointer;
&:hover { &:hover {
opacity: .9; opacity: 0.9;
} }
&.disabled { &.disabled {
@ -558,7 +586,7 @@ export default {
.end-text { .end-text {
margin-top: 10px; margin-top: 10px;
color: rgba(0, 0, 0, .65); color: rgba(0, 0, 0, 0.65);
font-size: 12px; font-size: 12px;
white-space: nowrap; white-space: nowrap;
@ -597,7 +625,7 @@ export default {
margin-bottom: 10px; margin-bottom: 10px;
font-size: 20px; font-size: 20px;
font-weight: 500; font-weight: 500;
color: #0B1D30; color: #0b1d30;
word-break: break-all; word-break: break-all;
@include mul-ellipsis(2); @include mul-ellipsis(2);
} }
@ -614,7 +642,8 @@ export default {
} }
} }
.label, .val { .label,
.val {
font-size: 14px; font-size: 14px;
color: #666; color: #666;
white-space: nowrap; white-space: nowrap;
@ -639,13 +668,13 @@ export default {
} }
} }
/deep/.dia-form { /deep/.dia-form {
.w-100 { .w-100 {
width: 100%; width: 100%;
} }
.tips { .tips {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
} }
</style> </style>

242
src/pages/activity/manage/manage/index.vue
Unescape View File

@ -1,20 +1,28 @@
<template> <template>
<div> <div>
<el-card shadow="hover" class="m-b-20"> <el-card shadow="hover"
<div class="flex-between"> class="m-b-20">
<el-page-header @back="back" :content="name + '/管理'"></el-page-header> <div class="flex-between">
</div> <el-page-header @back="back"
</el-card> :content="name + '/管理'"></el-page-header>
<div class="page" style="margin-bottom: 24px"> </div>
<div class="tabs"> </el-card>
<a class="item" v-for="(item,index) in tabs" :key="index" :class="{active: index == active}" @click="tabChange(index)">{{ item }}</a> <div class="page"
</div> style="margin-bottom: 24px">
<MatchDetail v-if="active == 'tab1'" ref="detail" /> <div class="tabs">
<MatchProgress v-else-if="active == 'tab2'" /> <a class="item"
<notice v-else-if="active == 'tab3'" /> v-for="(item,index) in tabs"
<MatchSignup v-else-if="active == 'tab4'" /> :key="index"
</div> :class="{active: index == active}"
@click="tabChange(index)">{{ item }}</a>
</div>
<MatchDetail v-if="active == 'tab1'"
ref="detail" />
<MatchProgress v-else-if="active == 'tab2'" />
<notice v-else-if="active == 'tab3'" />
<MatchSignup v-else-if="active == 'tab4'" />
</div> </div>
</div>
</template> </template>
@ -26,122 +34,122 @@ import notice from "./notice";
import MatchSignup from "./matchSignup"; import MatchSignup from "./matchSignup";
import { mapState } from "vuex"; import { mapState } from "vuex";
export default { export default {
name: "matchManage", name: "matchManage",
data() { data () {
return { return {
name: this.$route.query.name, name: this.$route.query.name,
active: this.$route.query.tab || "tab1", active: this.$route.query.tab || "tab1",
tabs: { tabs: {
tab1: "项目详情", tab1: "项目详情",
tab2: "项目进展", tab2: "项目进展",
tab3: "公告通知", tab3: "公告通知",
tab4: "报名人员" tab4: "报名人员"
}, },
}; };
}, },
components: { components: {
MatchDetail, MatchDetail,
MatchProgress, MatchProgress,
notice, notice,
MatchSignup MatchSignup
},
beforeRouteLeave (to, from, next) {
const detail = this.$refs.detail
if (detail && detail.updateTime) {
this.$confirm(`编辑的内容未保存，是否保存并且发布？`, '提示.......', {
type: 'warning'
}).then(() => {
detail.save(detail.form.publishStatus)
}).catch(() => {
next()
})
} else {
next()
}
},
mounted () {
},
methods: {
back () {
this.handleSave(0) && this.backPage()
}, },
beforeRouteLeave(to, from, next) { // 判断是否需要confirm
const detail = this.$refs.detail handleSave (i) {
if (detail && detail.updateTime) { // 如果是赛事详情，则要判断是否已经保存，未保存则提示是否保存
this.$confirm(`编辑的内容未保存，是否保存并且发布？`, '提示.......', { if (this.active === 'tab1') {
type: 'warning' const detail = this.$refs.detail
}).then(() => { if (detail && detail.updateTime) {
detail.save(detail.form.publishStatus) this.$confirm(`编辑的内容未保存，是否保存并且发布？`, '提示', {
}).catch(() => { type: 'warning'
next() }).then(() => {
}) detail.save(detail.form.publishStatus)
this.backOrTab(i)
}).catch(() => {
this.backOrTab(i)
})
} else {
this.backOrTab(i)
}
return false
} else { } else {
next() return true
} }
}, },
mounted() { // 返回列表
backPage () {
this.$router.push(`/activity/manage?page=${this.$store.state.activity.page}`)
}, },
methods: { // tab切换
back() { tabSwitch (i) {
this.handleSave(0) && this.backPage() this.active = i
}, this.$router.push(`manageDetail?id=${this.$route.query.id}&tab=${i}&name=${this.name}`)
// 判断是否需要confirm },
handleSave(i) { // 判断返回还是tab
// 如果是赛事详情，则要判断是否已经保存，未保存则提示是否保存 backOrTab (i) {
if (this.active === 'tab1') { i ? this.tabSwitch(i) : this.backPage()
const detail = this.$refs.detail },
if (detail && detail.updateTime) { // tab回调
this.$confirm(`编辑的内容未保存，是否保存并且发布？`, '提示', { tabChange (i) {
type: 'warning' this.handleSave(i) && this.tabSwitch(i)
}).then(() => {
detail.save(detail.form.publishStatus)
this.backOrTab(i)
}).catch(() => {
this.backOrTab(i)
})
} else {
this.backOrTab(i)
}
return false
} else {
return true
}
},
// 返回列表
backPage(){
this.$router.push(`/activity/manage?page=${this.$store.state.activity.page}`)
},
// tab切换
tabSwitch(i) {
this.active = i
this.$router.push(`manageDetail?id=${this.$route.query.id}&tab=${i}&name=${this.name}`)
},
// 判断返回还是tab
backOrTab(i) {
i ? this.tabSwitch(i) : this.backPage()
},
// tab回调
tabChange(i) {
this.handleSave(i) && this.tabSwitch(i)
}
} }
}
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.tabs { .tabs {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0 24px; padding: 0 24px;
border-bottom: 1px solid rgba(0, 0, 0, .06); border-bottom: 1px solid rgba(0, 0, 0, 0.06);
.item { .item {
position: relative; position: relative;
padding: 20px 0; padding: 20px 0;
margin-right: 40px; margin-right: 40px;
font-size: 16px; font-size: 16px;
color: rgba(0, 0, 0, 0.65); color: rgba(0, 0, 0, 0.65);
cursor: pointer; cursor: pointer;
&:after { &:after {
content: ''; content: '';
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 3px; height: 3px;
border-bottom: 3px solid transparent; border-bottom: 3px solid transparent;
border-radius: 2px; border-radius: 2px;
} }
&.active { &.active {
font-weight: 500; font-weight: 500;
color: rgba(0, 0, 0, 0.85); color: rgba(0, 0, 0, 0.85);
} }
&.active:after { &.active:after {
border-bottom-color: $main-color; border-bottom-color: $main-color;
}
} }
}
} }
</style> </style>

1700
src/pages/station/preview/index.vue
View File

File diff suppressed because it is too large Load Diff
Write Preview
Loading…
Cancel
Save