dev_202207
yujialong 2 years ago
parent 010ce30364
commit db1d679da4
  1. 5
      package-lock.json
  2. 1
      package.json
  3. BIN
      src/assets/img/none.png
  4. BIN
      src/assets/img/rocket.png
  5. 134
      src/views/match/add/index.vue
  6. 40
      src/views/match/list/index.vue
  7. 2
      src/views/match/manage/matchSignup.vue
  8. 294
      src/views/match/preview/index.vue

5
package-lock.json generated

@ -4711,6 +4711,11 @@
"schema-utils": "^1.0.0"
}
},
"file-saver": {
"version": "2.0.5",
"resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz",
"integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA=="
},
"filesize": {
"version": "3.6.1",
"resolved": "https://registry.npmjs.org/filesize/-/filesize-3.6.1.tgz",

@ -14,6 +14,7 @@
"clipboard": "^2.0.11",
"element-theme": "^2.0.1",
"element-ui": "^2.13.0",
"file-saver": "^2.0.5",
"js-cookie": "^3.0.1",
"mavon-editor": "^2.6.17",
"postcss-px2rem": "^0.3.0",

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

@ -143,26 +143,29 @@
</div>
<el-dialog title="请勾选院校" :visible.sync="rangeVisible" width="580px" custom-class="range-dia" :close-on-click-modal="false">
<el-cascader
ref="range"
key="range"
v-model="range"
:props="props"
:show-all-levels="false"
clearable
filterable
:before-filter="beforeFilter"
@visible-change="rangeViChange"
:options="rangeList"
@change="rangeChange"
@input.native="rangeSearch"></el-cascader>
<div class="range-check">
<el-tag
v-for="tag in rangeChecked"
:key="tag.value"
closable>
{{tag.label}}
</el-tag>
<div class="range-wrap">
<el-cascader
ref="range"
class="range-cas"
key="range"
v-model="range"
:props="props"
:show-all-levels="false"
clearable
filterable
:before-filter="beforeFilter"
:options="rangeList"
@change="rangeChange"
@input.native="rangeSearch"></el-cascader>
<el-tag
v-for="(tag, i) in rangeChecked"
:key="tag.value"
class="range-check"
closable
:disable-transitions="false"
@close="val => closeRange(i)">
{{tag.label}}
</el-tag>
</div>
<span slot="footer" class="dialog-footer">
@ -216,11 +219,13 @@ export default {
}
},
rangeVisible: false,
casVisible: true,
range: [],
rangeInit: [],
rangeName: '',
rangeChecked: [],
schools: [],
rangeList: [],
rangeTimer: null,
//
props: {
multiple: true,
@ -229,20 +234,22 @@ export default {
lazyLoad (node, resolve) {
//
const input = document.querySelector('.el-cascader__search-input')
console.log("🚀 ~ file: index.vue ~ line 219 ~ lazyLoad ~ input", input, node)
if (input && input.value) return resolve([])
if (input && input.value.trim()) {
const val = input.value.trim()
return that.schools.filter(e => e.label.includes(val))
}
const { level, value } = node
//
console.log('lazy', node, that.range)
if (!level) {
that.$get(that.api.queryProvince).then(({ list }) => {
const data = []
list.map(e => {
data.push({
value: e.provinceId,
label: e.provinceName,
children: []
})
e.value = e.provinceId
e.label = e.provinceName
e.children = []
data.push(e)
})
resolve(data)
}).catch(res => {})
@ -253,11 +260,10 @@ export default {
}).then(({ list }) => {
const data = []
list.map(e => {
data.push({
provinceId: value,
value: e.cityId,
label: e.cityName
})
e.value = e.cityId
e.label = e.cityName
e.children = []
data.push(e)
})
resolve(data)
}).catch(res => {})
@ -270,11 +276,10 @@ export default {
}).then(({ list }) => {
const data = []
list.map(e => {
data.push({
value: e.schoolId,
label: e.schoolName,
leaf: true
})
e.value = e.schoolId
e.label = e.schoolName
e.leaf = true
data.push(e)
})
resolve(data)
}).catch(res => {})
@ -285,9 +290,6 @@ export default {
},
submiting: false,
updateTime: 0,
rangeTimer: null,
schools: [],
rangeList: []
};
},
components: {
@ -360,7 +362,6 @@ export default {
range.push(item)
})
this.range = range
console.log("🚀 ~ file: matchDetail.vue ~ line 327 ~ this.$post ~ this.range", this.range)
}
// name
@ -379,36 +380,24 @@ export default {
showRange() {
this.rangeVisible = true
},
rangeViChange(boolean){
console.log(33, this.$refs.range.$refs.panel)
//true false
if(boolean){
this.$refs.range.$refs.panel.activePath=[];
// this.getCascader("region", null);
}
},
rangeChange(val, e) {
console.log("🚀 ~ file: index.vue ~ line 388 ~ rangeChange ~ val", val, this.$refs.range.getCheckedNodes())
const checked = this.$refs.range.getCheckedNodes()
const name = []
const { rangeChecked } = this
checked.map(e => {
name.push({
value: e.value,
label: e.label
})
rangeChecked.find(n => n.value === e.value) || name.push(e.data)
})
this.rangeChecked = name
this.rangeChecked = checked
},
//
getSchool() {
this.$get(this.api.querySchoolData).then(({ list }) => {
const result = []
list.map(e => {
result.push({
value: e.schoolId,
label: e.schoolName,
leaf: true
})
e.value = e.schoolId
e.label = e.schoolName
e.leaf = true
result.push(e)
})
this.schools = result
}).catch(res => {})
@ -419,15 +408,19 @@ export default {
},
//
rangeSearch(el) {
const val = el.target.value
if (!val) return false
const val = el.target.value.trim()
if (!val) {
this.rangeList = []
return false
}
clearTimeout(this.rangeTimer)
this.rangeTimer = setTimeout(() => {
// this.$refs.range.$refs.panel.activePath = []
let result = this.schools.filter(e => e.label.includes(val)) //
console.log("🚀 ~ file: index.vue ~ line 428 ~ this.rangeTimer=setTimeout ~ result",this.schools.filter(e => e.label.includes(val)), this.schools)
this.rangeList = result
}, 500)
}, 100)
},
closeRange(i) {
this.rangeChecked.splice(i, 1)
},
//
rangeSubmit() {
@ -737,9 +730,12 @@ $upload-lg-height: 150px;
}
}
.range-check {
margin-top: 10px;
display: inline-block;
margin: 0 0 10px 10px;
}
/deep/.range-cas {
.el-tag {
margin-right: 10px;
display: none;
}
}
</style>

@ -318,17 +318,39 @@ export default {
if (date == "0000-00-00 00:00:00") return "---";
return date;
},
disable(val, row) {
this.$post(this.api.disabledEvents, {
contestId: row.id,
isOpen: val,
type: 0 // (01)
}).then(res => {
val == 1 ? util.warningMsg('禁用成功') : util.successMsg('启用成功')
}).catch(err => {})
},
switchOff(val, row, index) {
this.$post(this.api.disabledEvents, {
contestId: row.id,
isOpen: val,
type: 0 // (01)
})
.then(res => {
if (val) {
this.disable(val, row)
} else if (!row.publishStatus) {
this.$confirm('是否发布该大赛?', '提示', {
type: 'success'
}).then(() => {
this.$post(this.api.disabledEvents, {
contestId: row.id,
isOpen: val,
type: 0 // (01)
}).then(res => {
row.publishStatus = 1
this.$post(this.api.editContest, row).then(res => {
this.getData()
val == 1 ? util.warningMsg('禁用成功') : util.successMsg('启用成功')
})
.catch(err => {
});
}).catch(err => {})
}).catch(err => {})
}).catch(() => {
row.ztOpen = 1
})
} else {
this.disable(val, row)
}
}
}
};

@ -5,7 +5,7 @@
<ul class="filter">
<li>
<label>搜索</label>
<el-input placeholder="请输入姓名/手机号" prefix-icon="el-icon-search" v-model="keyword" clearable size="mini"></el-input>
<el-input placeholder="请输入姓名/手机号/学校" prefix-icon="el-icon-search" v-model="keyword" clearable size="mini"></el-input>
</li>
</ul>
<div>

@ -5,7 +5,7 @@
<breadcrumb ref="breadcrumb" :data="'全部赛事/' + form.name" route="matchPreview"></breadcrumb>
<div class="match-inner">
<div class="flex-between">
<el-tabs v-model="curType">
<el-tabs v-model="curType" @tab-click="typeChange">
<el-tab-pane v-for="(item, index) in typeList" :key="index" :label="item.name" :name="item.id"></el-tab-pane>
</el-tabs>
<div class="status wait">等待报名</div>
@ -27,6 +27,51 @@
</li>
</ul>
</template>
<template v-if="!form.description && (!form.contestAnnexList || !form.contestAnnexList.length )">
<div class="empty">
<div>
<img src="@/assets/img/none.png" alt="">
<p>暂无数据</p>
</div>
</div>
</template>
<!-- 进展 -->
<div class="l-title" id="part2"><img src="@/assets/img/label.png" alt=""> 竞赛进展</div>
<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>
<template v-else>
<div class="empty">
<div>
<img src="@/assets/img/none.png" alt="">
<p>暂无数据</p>
</div>
</div>
</template>
<!-- 公告 -->
<div class="l-title" id="part3"><img src="@/assets/img/label.png" alt=""> 通知公告</div>
<ul class="notice-list" v-if="notices.length">
<li v-for="(item, i) in notices" :key="i" @click="toNotice(item)">
<h6>{{ item.announcementTitle }}</h6>
<p class="meta">{{ item.updateTime }}</p>
<div class="des" v-html="item.announcementText"></div>
</li>
</ul>
<template v-else>
<div class="empty">
<div>
<img src="@/assets/img/none.png" alt="">
<p>暂无通知公告</p>
</div>
</div>
</template>
</div>
</div>
</div>
@ -54,7 +99,9 @@ export default {
name: '通知公告'
}
],
form: util.local.get('match')
form: util.local.get('match'),
progress: [],
notices: [],
};
},
components: {
@ -62,6 +109,10 @@ export default {
},
mounted() {
this.handleAnnex()
if (this.form.id) {
this.getProgress()
this.getNotice()
}
},
methods: {
//
@ -75,6 +126,19 @@ export default {
this.$forceUpdate()
}
},
getProgress() { //
this.$get(this.api.getContestProgress, {
contestId: this.form.id
}).then(res => {
this.progress = res.contestProgressList.reverse()
}).catch(err => {});
},
//
getNotice() {
this.$post(`${this.api.queryAnnouncementByContestId}?pageNum=1&pageSize=1000&contestId=${this.form.id}`).then(({ data }) => {
this.notices = data.records.filter(e => e.status) // status 0稿 1
}).catch(res => {})
},
//
previewFile(item) {
const { filePath } = item
@ -85,13 +149,17 @@ export default {
download(item) {
util.downloadFile(item.fileName, item.filePath)
},
// tab
typeChange() {
document.querySelector(`#part${this.curType}`).scrollIntoView()
},
}
};
</script>
<style lang="scss" scoped>
.match {
min-height: 100%;
padding-bottom: 20px;
background-color: #F3F6FA;
.banner{
width: 100%;
@ -178,6 +246,7 @@ export default {
}
}
.files {
margin-bottom: 30px;
li {
display: flex;
align-items: center;
@ -188,5 +257,224 @@ export default {
font-size: 12px;
}
}
.el-link.el-link--primary {
color: #007EFF !important;
&:after {
border-color: #007EFF;
}
}
}
.progress{
position: relative;
width: 95%;
padding: 50px 0;
margin: 40px auto 80px;
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: -58px;
}
}
.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;
}
}
}
.notice-list {
text-align: left;
li {
padding: 16px;
margin-bottom: 12px;
transition: all 0.3s;
cursor: pointer;
border-radius: 6px;
background-color: #fff;
border-bottom: 1px dashed #ebebeb;
&:last-child {
border-bottom: 0;
}
}
h6 {
font-size: 20px;
font-weight: 500;
color: #0B1D30;
&:hover {
color: #007EFF;
}
}
.meta {
margin: 10px 0;
font-size: 14px;
color: #666;
}
.des {
font-size: 14px;
color: #333;
line-height: 24px;
display: -webkit-box;
display:-moz-box;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-webkit-line-clamp: 2;
-moz-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
}
}
.empty{
display: flex;
justify-content: center;
align-items: center;
padding: 50px 0;
text-align: center;
img{
width: 471px;
}
p{
margin-top: 40px;
font-size: 18px;
color: rgba(0, 0, 0, 0.25);
}
}
</style>
Loading…
Cancel
Save