parent
bd2985541b
commit
12b3c6e314
8 changed files with 263 additions and 731 deletions
@ -1,665 +0,0 @@ |
|||||||
<template> |
|
||||||
<!-- 大赛详情 --> |
|
||||||
<div style="padding: 24px"> |
|
||||||
<div class="page-content"> |
|
||||||
<el-form label-width="170px" label-suffix=":" size="small"> |
|
||||||
<el-form-item label="竞赛封面（选填）"> |
|
||||||
<el-upload |
|
||||||
class="avatar-uploader" |
|
||||||
accept=".jpg,.png,.jpeg,.gif" |
|
||||||
:on-remove="handleRemove" |
|
||||||
:on-error="uploadError" |
|
||||||
:on-success="uploadSuccess" |
|
||||||
:before-remove="beforeRemove" |
|
||||||
:limit="1" |
|
||||||
:on-exceed="handleExceed" |
|
||||||
:action="this.api.fileupload" |
|
||||||
:headers="headers" |
|
||||||
name="file" |
|
||||||
> |
|
||||||
<img v-if="form.coverUrl" :src="form.coverUrl" class="avatar"> |
|
||||||
<div class="uploader-default" v-else> |
|
||||||
<i class="el-icon-plus"></i> |
|
||||||
<p>上传封面</p> |
|
||||||
</div> |
|
||||||
<div slot="tip" class="el-upload__tip"> |
|
||||||
<p>展示宽度为220，高度140，JPG/PNG/GIF，3MB以内</p> |
|
||||||
</div> |
|
||||||
</el-upload> |
|
||||||
</el-form-item> |
|
||||||
<el-form-item label="竞赛封面长图（选填）"> |
|
||||||
<el-upload |
|
||||||
class="avatar-uploader avatar-uploader-lg" |
|
||||||
accept=".jpg,.png,.jpeg,.gif" |
|
||||||
:on-remove="handleLgRemove" |
|
||||||
:on-error="uploadError" |
|
||||||
:on-success="uploadLgSuccess" |
|
||||||
:before-remove="beforeRemove" |
|
||||||
:limit="1" |
|
||||||
:on-exceed="handleExceed" |
|
||||||
:action="this.api.fileupload" |
|
||||||
:headers="headers" |
|
||||||
name="file" |
|
||||||
> |
|
||||||
<img v-if="form.carouselUrl" :src="form.carouselUrl" class="avatar-lg"> |
|
||||||
<div class="uploader-default" v-else> |
|
||||||
<i class="el-icon-plus"></i> |
|
||||||
<p>上传封面</p> |
|
||||||
</div> |
|
||||||
<div slot="tip" class="el-upload__tip"> |
|
||||||
<p>展示宽度为1920，高度300，JPG/PNG/GIF，3MB以内</p> |
|
||||||
</div> |
|
||||||
</el-upload> |
|
||||||
</el-form-item> |
|
||||||
<el-form-item label="比赛范围"> |
|
||||||
<div> |
|
||||||
<el-radio v-model="form.competitionScope" :label="0">本校内</el-radio> |
|
||||||
</div> |
|
||||||
<div> |
|
||||||
<el-radio v-model="form.competitionScope" :label="1">全平台</el-radio> |
|
||||||
</div> |
|
||||||
<div> |
|
||||||
<el-radio v-model="form.competitionScope" :label="2">指定区域、院校</el-radio> |
|
||||||
<el-button v-if="form.competitionScope === 2" type="primary" size="mini" @click="showRange">选择院校</el-button> |
|
||||||
<span style="margin-left: 20px">{{ rangeName }}</span> |
|
||||||
</div> |
|
||||||
</el-form-item> |
|
||||||
<el-form-item label="竞赛名称"> |
|
||||||
<div class="d-inline-block"> |
|
||||||
<el-input placeholder="请输入竞赛名称" v-model="form.name" clearable></el-input> |
|
||||||
</div> |
|
||||||
</el-form-item> |
|
||||||
<el-form-item label="主办方"> |
|
||||||
<div class="inline-input"> |
|
||||||
<div class="input-wrap" v-for="(item,index) in sponsorList" :key="index"> |
|
||||||
<el-input placeholder="主办方名称" v-model="sponsorList[index]"></el-input> |
|
||||||
<i v-if="sponsorList.length > 1" class="remove" @click="delSponsor(index)"></i> |
|
||||||
<button v-if="index == 0" class="add-btn" @click="addSponsor"> |
|
||||||
<i class="el-icon-plus"></i> |
|
||||||
<span>添加</span> |
|
||||||
</button> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</el-form-item> |
|
||||||
<el-form-item label="承办方（选填）"> |
|
||||||
<div class="inline-input"> |
|
||||||
<div class="input-wrap" v-for="(item,index) in undertakerList" :key="index"> |
|
||||||
<el-input placeholder="承办方名称" v-model="undertakerList[index]"></el-input> |
|
||||||
<i v-if="undertakerList.length > 1" class="remove" @click="delOrganizer(index)"></i> |
|
||||||
<button v-if="index == 0" class="add-btn" @click="addOrganizer"> |
|
||||||
<i class="el-icon-plus"></i> |
|
||||||
<span>添加</span> |
|
||||||
</button> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<button v-if="!undertakerList.length" class="add-btn" @click="addOrganizer"> |
|
||||||
<i class="el-icon-plus"></i> |
|
||||||
<span>添加</span> |
|
||||||
</button> |
|
||||||
</el-form-item> |
|
||||||
<el-form-item label="报名时间"> |
|
||||||
<el-date-picker v-model="signupTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker> |
|
||||||
</el-form-item> |
|
||||||
<el-form-item label="竞赛时间"> |
|
||||||
<el-date-picker v-model="playTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker> |
|
||||||
</el-form-item> |
|
||||||
<el-form-item label="竞赛详情"> |
|
||||||
<quill :border="true" v-model="form.description" :height="400" /> |
|
||||||
</el-form-item> |
|
||||||
<el-form-item label="附件"> |
|
||||||
<el-upload |
|
||||||
:on-remove="handleAnnexRemove" |
|
||||||
:on-error="uploadError" |
|
||||||
:before-upload="beforeUpload" |
|
||||||
:on-success="uploadAnnexSuccess" |
|
||||||
:limit="5" |
|
||||||
:on-exceed="handleExceedAnnex" |
|
||||||
:action="this.api.fileupload" |
|
||||||
:headers="headers" |
|
||||||
:file-list="fileList" |
|
||||||
name="file" |
|
||||||
> |
|
||||||
<el-button size="small" type="primary">点击上传</el-button> |
|
||||||
<div slot="tip" class="el-upload__tip"> |
|
||||||
<p>支持扩展名：.rar .zip .doc .docx .pdf .jpg...</p> |
|
||||||
</div> |
|
||||||
</el-upload> |
|
||||||
</el-form-item> |
|
||||||
<el-form-item> |
|
||||||
<el-button type="primary" @click="save(1)">发布</el-button> |
|
||||||
<el-button @click="$router.back()">取消</el-button> |
|
||||||
</el-form-item> |
|
||||||
</el-form> |
|
||||||
</div> |
|
||||||
|
|
||||||
<el-dialog title="请勾选院校" :visible.sync="rangeVisible" width="580px" custom-class="range-dia" :close-on-click-modal="false"> |
|
||||||
<el-cascader |
|
||||||
ref="range" |
|
||||||
v-model="range" |
|
||||||
:options="ranges" |
|
||||||
:props="props" |
|
||||||
clearable |
|
||||||
filterable></el-cascader> |
|
||||||
<span slot="footer" class="dialog-footer"> |
|
||||||
<el-button size="small" @click="rangeVisible = false">取 消</el-button> |
|
||||||
<el-button size="small" type="primary" @click="rangeSubmit">确 定</el-button> |
|
||||||
</span> |
|
||||||
</el-dialog> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import util from "@/libs/util"; |
|
||||||
import quill from "@/components/quill"; |
|
||||||
import Setting from "@/setting"; |
|
||||||
|
|
||||||
export default { |
|
||||||
name: "add", |
|
||||||
data() { |
|
||||||
const that = this |
|
||||||
return { |
|
||||||
headers: { |
|
||||||
token: util.local.get(Setting.tokenKey) |
|
||||||
}, |
|
||||||
form: { |
|
||||||
id: this.$route.query.id, |
|
||||||
platformSource: 1, // 平台来源(0:中台，1：职站) |
|
||||||
isOpen: 0, // 职站是否开启(0开启 1未开启 默认0) |
|
||||||
name: '', |
|
||||||
sponsor: '', |
|
||||||
undertaker: '', |
|
||||||
competitionScope: 0, // 大赛范围(0:本校内 1:全平台 2:指定区域、院校) |
|
||||||
contestRangeList: [], // 大赛范围选择 |
|
||||||
contestAnnexList: [], // 赛事附件 |
|
||||||
fileName: '', |
|
||||||
coverUrl: '', |
|
||||||
carouselUrl: '', |
|
||||||
publishStatus: 0, |
|
||||||
signUpStartTime: '', |
|
||||||
signUpEndTime: '', |
|
||||||
playStartTime: '', |
|
||||||
playEndTime: '', |
|
||||||
description: '', |
|
||||||
}, |
|
||||||
signupTime: '', |
|
||||||
playTime: '', |
|
||||||
sponsorList: [""], |
|
||||||
undertakerList: [""], |
|
||||||
fileList: [], |
|
||||||
pickerOptions: { |
|
||||||
disabledDate: time => { |
|
||||||
return time.getTime() < new Date().getTime() - 86400000; |
|
||||||
} |
|
||||||
}, |
|
||||||
provinceList: this.$store.state.provinceList, |
|
||||||
rangeVisible: false, |
|
||||||
range: [], |
|
||||||
ranges: [], |
|
||||||
rangeName: '', |
|
||||||
// 选择区域懒加载 |
|
||||||
props: { |
|
||||||
multiple: true, |
|
||||||
checkStrictly: true, |
|
||||||
lazy: true, |
|
||||||
lazyLoad (node, resolve) { |
|
||||||
const { level, value } = node |
|
||||||
// 省份 |
|
||||||
console.log('lazy', node) |
|
||||||
if (!level) { |
|
||||||
that.$get(that.api.queryProvince).then(({ list }) => { |
|
||||||
const data = [] |
|
||||||
list.map(e => { |
|
||||||
data.push({ |
|
||||||
value: e.provinceId, |
|
||||||
label: e.provinceName |
|
||||||
}) |
|
||||||
}) |
|
||||||
resolve(data) |
|
||||||
}).catch(res => {}) |
|
||||||
} else if (level === 1) { |
|
||||||
// 城市 |
|
||||||
that.$get(that.api.queryCity, { |
|
||||||
provinceId: value |
|
||||||
}).then(({ list }) => { |
|
||||||
const data = [] |
|
||||||
list.map(e => { |
|
||||||
data.push({ |
|
||||||
provinceId: value, |
|
||||||
value: e.cityId, |
|
||||||
label: e.cityName |
|
||||||
}) |
|
||||||
}) |
|
||||||
resolve(data) |
|
||||||
}).catch(res => {}) |
|
||||||
} else if (level === 2) { |
|
||||||
// 学校 |
|
||||||
that.$get(that.api.getSchoolsByProvince, { |
|
||||||
provinceId: node.data.provinceId, |
|
||||||
cityId: value, |
|
||||||
schoolName: '' |
|
||||||
}).then(({ list }) => { |
|
||||||
const data = [] |
|
||||||
list.map(e => { |
|
||||||
data.push({ |
|
||||||
value: e.schoolId, |
|
||||||
label: e.schoolName, |
|
||||||
leaf: true |
|
||||||
}) |
|
||||||
}) |
|
||||||
resolve(data) |
|
||||||
}).catch(res => {}) |
|
||||||
} else { |
|
||||||
resolve([]) |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
submiting: false, |
|
||||||
updateTime: 0 |
|
||||||
}; |
|
||||||
}, |
|
||||||
components: { |
|
||||||
quill |
|
||||||
}, |
|
||||||
watch: { |
|
||||||
// 监听信息是否有更改,有的话页面离开的时候要询问是否要保存 |
|
||||||
form: { |
|
||||||
handler(){ |
|
||||||
this.updateTime++ |
|
||||||
}, |
|
||||||
deep:true |
|
||||||
}, |
|
||||||
signupTime: function(val) { |
|
||||||
const { form } = this |
|
||||||
if (val) { |
|
||||||
form.signUpStartTime = val[0]; |
|
||||||
form.signUpEndTime = val[1]; |
|
||||||
} else { |
|
||||||
form.signUpStartTime = '' |
|
||||||
form.signUpEndTime = '' |
|
||||||
} |
|
||||||
}, |
|
||||||
playTime: function(val) { |
|
||||||
const { form } = this |
|
||||||
if (val) { |
|
||||||
form.playStartTime = val[0] |
|
||||||
form.playEndTime = val[1] |
|
||||||
} else { |
|
||||||
form.playStartTime = '' |
|
||||||
form.playEndTime = '' |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
mounted() { |
|
||||||
this.getData() |
|
||||||
}, |
|
||||||
methods: { |
|
||||||
getData() { |
|
||||||
this.$post(`${this.api.getContest}?contestId=${this.form.id}`).then(({ contest }) => { |
|
||||||
this.signupTime = [contest.signUpStartTime, contest.signUpEndTime] |
|
||||||
this.playTime = [contest.playStartTime, contest.playEndTime] |
|
||||||
this.sponsorList = contest.sponsor.split(",") |
|
||||||
this.undertakerList = contest.undertaker.split(",") |
|
||||||
// 附件 |
|
||||||
const fileList = contest.contestAnnexList |
|
||||||
if (fileList) { |
|
||||||
const files = [] |
|
||||||
fileList.map(e => { |
|
||||||
files.push({ |
|
||||||
name: e.fileName, |
|
||||||
url: e.filePath |
|
||||||
}) |
|
||||||
}) |
|
||||||
this.fileList = files |
|
||||||
} else { |
|
||||||
contest.contestAnnexList = [] |
|
||||||
} |
|
||||||
|
|
||||||
// 选择范围 |
|
||||||
const ranges = contest.contestRangeList |
|
||||||
if (ranges) { |
|
||||||
const range = [] |
|
||||||
ranges.map(e => { |
|
||||||
const item = [+e.provinceId] |
|
||||||
e.cityId && item.push(+e.cityId) |
|
||||||
e.schoolId && item.push(+e.schoolId) |
|
||||||
range.push(item) |
|
||||||
}) |
|
||||||
this.range = range |
|
||||||
} |
|
||||||
|
|
||||||
// 选择范围name |
|
||||||
const rangeName = contest.contestRangeRespList |
|
||||||
if (rangeName) { |
|
||||||
const range = [] |
|
||||||
rangeName.map(e => { |
|
||||||
range.push(e.type ? (e.cityName || e.provinceName) : e.schoolName) |
|
||||||
}) |
|
||||||
this.rangeName = range.join('，') |
|
||||||
} |
|
||||||
this.form = contest |
|
||||||
// 处理显示的name |
|
||||||
this.$nextTick(() => { |
|
||||||
this.updateTime = 1 |
|
||||||
// const checked = this.$refs.range.getCheckedNodes() |
|
||||||
// console.log(444, contest, checked) |
|
||||||
// const name = [] |
|
||||||
// checked.map(e => { |
|
||||||
// name.push(e.label) |
|
||||||
// }) |
|
||||||
// this.rangeName = name.join('、') |
|
||||||
}) |
|
||||||
}).catch(err => {}) |
|
||||||
}, |
|
||||||
// 选择范围 |
|
||||||
showRange() { |
|
||||||
this.rangeVisible = true |
|
||||||
console.log(33, this.form.contestRangeList) |
|
||||||
}, |
|
||||||
// 范围确定 |
|
||||||
rangeSubmit() { |
|
||||||
// 处理提交需要的id |
|
||||||
const data = [] |
|
||||||
this.range.map(e => { |
|
||||||
data.push({ |
|
||||||
contestId: this.form.id || '', |
|
||||||
provinceId: e[0] || '', |
|
||||||
cityId: e[1] || '', |
|
||||||
schoolId: e[2] || '', |
|
||||||
type: e.length > 2 ? 0 : 1 |
|
||||||
}) |
|
||||||
}) |
|
||||||
this.form.contestRangeList = data |
|
||||||
|
|
||||||
// 处理显示的name |
|
||||||
const checked = this.$refs.range.getCheckedNodes() |
|
||||||
const name = [] |
|
||||||
checked.map(e => { |
|
||||||
name.push(e.label) |
|
||||||
}) |
|
||||||
this.rangeName = name.join('、') |
|
||||||
|
|
||||||
this.rangeVisible = false |
|
||||||
}, |
|
||||||
handleExceed(files, fileList) { |
|
||||||
util.warningMsg(`当前限制选择 1 个文件，如需更换，请删除上一个文件再重新选择！`); |
|
||||||
}, |
|
||||||
handleExceedAnnex(files, fileList) { |
|
||||||
util.warningMsg(`当前限制选择 5 个文件，如需更换，请删除一个文件再重新选择！`); |
|
||||||
}, |
|
||||||
uploadSuccess(res) { |
|
||||||
const { coverUrl } = this.form |
|
||||||
coverUrl && this.$del(`${this.api.fileDeletion}?keys=${coverUrl}`).then(res => {}).catch(res => {}) |
|
||||||
this.form.coverUrl = res.data.filesResult.fileUrl |
|
||||||
}, |
|
||||||
uploadLgSuccess(res) { |
|
||||||
const { carouselUrl } = this.form |
|
||||||
carouselUrl && this.$del(`${this.api.fileDeletion}?keys=${carouselUrl}`).then(res => {}).catch(res => {}) |
|
||||||
this.form.carouselUrl = res.data.filesResult.fileUrl |
|
||||||
}, |
|
||||||
// 附件上传成功 |
|
||||||
uploadAnnexSuccess(res) { |
|
||||||
const file = res.data.filesResult |
|
||||||
const { id } = this.form |
|
||||||
const data = { |
|
||||||
contestId: id || '', |
|
||||||
fileName: this.fileName, |
|
||||||
filePath: file.fileUrl |
|
||||||
} |
|
||||||
this.form.contestAnnexList.push(data) |
|
||||||
// 编辑的时候需要调新增附件接口 |
|
||||||
id && this.$post(this.api.saveAnnex, data).then(res => {}).catch(res => {}) |
|
||||||
console.log(44, this.form) |
|
||||||
}, |
|
||||||
// 附件上传前 |
|
||||||
beforeUpload(file) { |
|
||||||
const isLt2M = file.size / 1024 / 1024 < 10 |
|
||||||
if (!isLt2M) util.warningMsg('请上传小于10MB的附件！') |
|
||||||
if (isLt2M) { |
|
||||||
this.fileName = file.name |
|
||||||
return true |
|
||||||
} else { |
|
||||||
return false |
|
||||||
} |
|
||||||
}, |
|
||||||
uploadError(err, file, fileList) { |
|
||||||
this.$message({ |
|
||||||
message: "上传出错，请重试！", |
|
||||||
type: "error", |
|
||||||
center: true |
|
||||||
}) |
|
||||||
}, |
|
||||||
beforeRemove(file, fileList) { |
|
||||||
return this.$confirm(`确定移除 ${file.name}？`); |
|
||||||
}, |
|
||||||
handleRemove(file, fileList) { |
|
||||||
this.$del(`${this.api.fileDeletion}?keys=${this.form.coverUrl}`).then(res => { |
|
||||||
this.form.coverUrl = '' |
|
||||||
}).catch(res => {}) |
|
||||||
}, |
|
||||||
handleLgRemove(file, fileList) { |
|
||||||
this.$del(`${this.api.fileDeletion}?keys=${this.form.carouselUrl}`).then(res => { |
|
||||||
this.form.carouselUrl = '' |
|
||||||
}).catch(res => {}) |
|
||||||
}, |
|
||||||
handleAnnexRemove(file, fileList) { |
|
||||||
this.$del(`${this.api.fileDeletion}?keys=${file.url}`).then(res => {}).catch(res => {}) |
|
||||||
const id = this.form.contestAnnexList.find(e => e.fileName === file.name).id |
|
||||||
this.$post(`${this.api.deleteAnnex}?id=${id}`).then(res => {}).catch(res => {}) |
|
||||||
}, |
|
||||||
// 提交 |
|
||||||
save(status) { |
|
||||||
if (this.submiting) return false; |
|
||||||
const { form } = this |
|
||||||
form.sponsor = this.sponsorList.filter(d => d).join(); |
|
||||||
form.undertaker = this.undertakerList.filter(d => d).join(); |
|
||||||
if (form.competitionScope == 2 && !form.contestRangeList.length) return util.warningMsg('请选择区域、院校') |
|
||||||
if (!form.name) return util.warningMsg("请填写竞赛名称"); |
|
||||||
if (status == 1) { |
|
||||||
if (!form.sponsor) return util.warningMsg("请填写主办方"); |
|
||||||
if (!form.signUpStartTime) return util.warningMsg("请选择报名时间"); |
|
||||||
} |
|
||||||
let now = new Date().getTime(); |
|
||||||
let signUpStartTime = new Date(form.signUpStartTime).getTime(); |
|
||||||
let signUpEndTime = new Date(form.signUpEndTime).getTime(); |
|
||||||
let playStartTime = new Date(form.playStartTime).getTime(); |
|
||||||
// if (signUpStartTime && now > signUpStartTime) return util.warningMsg("报名时间不能早于当前时间"); |
|
||||||
if (!form.playStartTime && status == 1) return util.warningMsg("请选择竞赛时间"); |
|
||||||
if (playStartTime && playStartTime < signUpEndTime) return util.warningMsg("竞赛时间不能早于报名结束时间"); |
|
||||||
if (!form.description && status == 1) return util.warningMsg("请填写竞赛详情"); |
|
||||||
|
|
||||||
this.submiting = true |
|
||||||
form.publishStatus = status |
|
||||||
form.isOpen = 0 // 发布后变为启用 |
|
||||||
if (this.form.id) { |
|
||||||
delete form.contestAnnexList |
|
||||||
this.$post(this.api.editContest, form).then(res => { |
|
||||||
this.updateTime = 1 |
|
||||||
this.submiting = false; |
|
||||||
util.successMsg("修改成功"); |
|
||||||
this.$router.back(); |
|
||||||
}) |
|
||||||
.catch(err => { |
|
||||||
this.submiting = false; |
|
||||||
}); |
|
||||||
} else { |
|
||||||
this.$post(this.api.addContest, form).then(res => { |
|
||||||
this.submiting = false; |
|
||||||
util.successMsg("创建成功"); |
|
||||||
this.$router.back(); |
|
||||||
}) |
|
||||||
.catch(err => { |
|
||||||
this.submiting = false; |
|
||||||
}); |
|
||||||
} |
|
||||||
}, |
|
||||||
// 预览 |
|
||||||
preview() { |
|
||||||
|
|
||||||
}, |
|
||||||
back() { |
|
||||||
const updateTime = this.updateTime |
|
||||||
// 更改了信息才需要提示 |
|
||||||
if (updateTime > 1) { |
|
||||||
this.$confirm(`编辑的内容未保存，是否保存？`, '提示', { |
|
||||||
type: 'warning' |
|
||||||
}).then(() => { |
|
||||||
this.save(1) |
|
||||||
}).catch(() => { |
|
||||||
this.backPage() |
|
||||||
}) |
|
||||||
} else { |
|
||||||
this.backPage() |
|
||||||
} |
|
||||||
}, |
|
||||||
backPage(){ |
|
||||||
this.$router.back() |
|
||||||
}, |
|
||||||
addSponsor() { |
|
||||||
this.sponsorList.push(""); |
|
||||||
}, |
|
||||||
delSponsor(index) { |
|
||||||
this.sponsorList.splice(index, 1); |
|
||||||
}, |
|
||||||
addOrganizer() { |
|
||||||
this.undertakerList.push(""); |
|
||||||
}, |
|
||||||
delOrganizer(index) { |
|
||||||
this.undertakerList.splice(index, 1); |
|
||||||
} |
|
||||||
} |
|
||||||
}; |
|
||||||
</script> |
|
||||||
|
|
||||||
<style scoped lang="scss"> |
|
||||||
$upload-width: 220px; |
|
||||||
$upload-height: 140px; |
|
||||||
$upload-lg-height: 150px; |
|
||||||
/deep/ .avatar-uploader { |
|
||||||
.el-upload { |
|
||||||
position: relative; |
|
||||||
width: $upload-width; |
|
||||||
height: $upload-height; |
|
||||||
border: 1px dashed #d9d9d9; |
|
||||||
border-radius: 6px; |
|
||||||
cursor: pointer; |
|
||||||
overflow: hidden; |
|
||||||
|
|
||||||
&:hover { |
|
||||||
border-color: #cb221c; |
|
||||||
} |
|
||||||
|
|
||||||
.uploader-default { |
|
||||||
display: flex; |
|
||||||
height: $upload-height; |
|
||||||
flex-direction: column; |
|
||||||
justify-content: center; |
|
||||||
text-align: center; |
|
||||||
background: rgba(0, 0, 0, 0.04); |
|
||||||
|
|
||||||
i { |
|
||||||
font-size: 20px; |
|
||||||
font-weight: bold; |
|
||||||
color: #8c939d; |
|
||||||
} |
|
||||||
|
|
||||||
p { |
|
||||||
margin-top: 10px; |
|
||||||
font-size: 14px; |
|
||||||
color: rgba(0, 0, 0, 0.65); |
|
||||||
line-height: 1; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
&.avatar-uploader-lg { |
|
||||||
.el-upload { |
|
||||||
width: 100%; |
|
||||||
max-width: 960px; |
|
||||||
height: $upload-lg-height; |
|
||||||
|
|
||||||
.uploader-default { |
|
||||||
height: $upload-lg-height; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.avatar { |
|
||||||
display: block; |
|
||||||
width: $upload-width; |
|
||||||
height: $upload-height; |
|
||||||
} |
|
||||||
|
|
||||||
.avatar-lg { |
|
||||||
display: block; |
|
||||||
width: 100%; |
|
||||||
height: $upload-lg-height; |
|
||||||
} |
|
||||||
|
|
||||||
.el-upload__tip { |
|
||||||
margin-top: 0; |
|
||||||
|
|
||||||
p { |
|
||||||
font-size: 14px; |
|
||||||
color: rgba(0, 0, 0, 0.45); |
|
||||||
line-height: 1; |
|
||||||
|
|
||||||
&:first-child { |
|
||||||
margin-bottom: 5px; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
/deep/ .d-inline-block { |
|
||||||
width: 216px; |
|
||||||
|
|
||||||
.el-select, .el-input { |
|
||||||
width: 100%; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.inline-input { |
|
||||||
.input-wrap { |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
margin-bottom: 10px; |
|
||||||
|
|
||||||
.el-input { |
|
||||||
display: inline-block; |
|
||||||
width: 216px; |
|
||||||
margin-right: 8px; |
|
||||||
} |
|
||||||
|
|
||||||
.remove { |
|
||||||
width: 16px; |
|
||||||
height: 16px; |
|
||||||
background: url("../../../assets/img/close.png") 0 0/cover no-repeat; |
|
||||||
cursor: pointer; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.add-btn { |
|
||||||
margin-left: 32px; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.add-btn { |
|
||||||
display: flex; |
|
||||||
justify-content: center; |
|
||||||
align-items: center; |
|
||||||
width: 216px; |
|
||||||
line-height: 32px; |
|
||||||
font-size: 14px; |
|
||||||
color: rgba(0, 0, 0, 0.65); |
|
||||||
background-color: transparent; |
|
||||||
border: 1px dashed rgba(0, 0, 0, 0.15); |
|
||||||
border-radius: 4px; |
|
||||||
cursor: pointer; |
|
||||||
|
|
||||||
i { |
|
||||||
margin-right: 8px; |
|
||||||
font-size: 14px; |
|
||||||
font-weight: bold; |
|
||||||
} |
|
||||||
} |
|
||||||
</style> |
|
||||||
@ -0,0 +1,127 @@ |
|||||||
|
<template> |
||||||
|
<div class="match"> |
||||||
|
<div class="banner" :style="{backgroundImage: 'url(' + (form.carouselUrl || 'https://huoran.oss-cn-shenzhen.aliyuncs.com/20220613/png/1536269450851409920.png') + ')'}"></div> |
||||||
|
<div class="match-inner"> |
||||||
|
<div class="info"> |
||||||
|
<h6 class="title">{{ form.name }}</h6> |
||||||
|
<div class="meta">最近编辑时间：{{ form.updateTime }}</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="l-title" id="part1"><img src="@/assets/img/label.png" alt=""> 竞赛信息</div> |
||||||
|
<div v-if="form.description" class="texts ql-editor" v-html="form.description"></div> |
||||||
|
<template v-if="form.contestAnnexList"> |
||||||
|
<h6 class="p-title">附件下载</h6> |
||||||
|
<ul class="files"> |
||||||
|
<li v-for="(item, i) in form.contestAnnexList" :key="i"> |
||||||
|
<el-link v-if="item.canPreview" class="m-r-10" type="primary" @click="previewFile(item)">{{ item.fileName }}</el-link> |
||||||
|
<span v-else class="file-name">{{ item.fileName }}</span> |
||||||
|
<el-link type="primary" :underline="false" @click="download(item)">下载</el-link> |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
</template> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import util from "@/libs/util"; |
||||||
|
export default { |
||||||
|
name: "match", |
||||||
|
data() { |
||||||
|
return { |
||||||
|
form: util.local.get('match') |
||||||
|
}; |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.handleAnnex() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
// 处理附件 |
||||||
|
handleAnnex() { |
||||||
|
const list = this.form.contestAnnexList |
||||||
|
if (list) { |
||||||
|
list.map(e => { |
||||||
|
const { filePath } = e |
||||||
|
e.canPreview = util.canPreview(filePath.substr(filePath.lastIndexOf('.') + 1)) // 判断是否能够预览 |
||||||
|
}) |
||||||
|
this.$forceUpdate() |
||||||
|
} |
||||||
|
}, |
||||||
|
// 预览附件 |
||||||
|
previewFile(item) { |
||||||
|
const { filePath } = item |
||||||
|
const suffix = filePath.substr(filePath.lastIndexOf('.') + 1) |
||||||
|
window.open((util.isDoc(suffix) || suffix === 'pdf' ? 'https://view.officeapps.live.com/op/view.aspx?src=' : '') + item.filePath) |
||||||
|
}, |
||||||
|
// 下载附件 |
||||||
|
download(item) { |
||||||
|
util.downloadFile(item.fileName, item.filePath) |
||||||
|
}, |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.match { |
||||||
|
.banner{ |
||||||
|
width: 100%; |
||||||
|
height: 350px; |
||||||
|
color: #fff; |
||||||
|
background-size: 100% 350px; |
||||||
|
background-repeat: no-repeat; |
||||||
|
box-sizing: border-box; |
||||||
|
} |
||||||
|
.match-inner { |
||||||
|
width: 1000px; |
||||||
|
min-height: calc(100vh - 465px); |
||||||
|
padding: 30px 40px 20px; |
||||||
|
margin: 40px auto 0; |
||||||
|
background-color: #fff; |
||||||
|
box-sizing: border-box; |
||||||
|
} |
||||||
|
.l-title{ |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
margin-bottom: 12px; |
||||||
|
font-size: 18px; |
||||||
|
color: #333; |
||||||
|
img{ |
||||||
|
margin-right: 5px; |
||||||
|
} |
||||||
|
} |
||||||
|
.title{ |
||||||
|
width: 67%; |
||||||
|
margin: 0 auto; |
||||||
|
font-size: 28px; |
||||||
|
text-align: center; |
||||||
|
color: #0B1D30; |
||||||
|
} |
||||||
|
.info .meta{ |
||||||
|
padding: 16px 0; |
||||||
|
font-size: 12px; |
||||||
|
color: #999; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
.texts { |
||||||
|
margin-bottom: 30px; |
||||||
|
font-size: 14px; |
||||||
|
line-height: 1.6; |
||||||
|
text-indent: 2em; |
||||||
|
overflow: hidden; |
||||||
|
/deep/img{ |
||||||
|
max-width: 100%; |
||||||
|
} |
||||||
|
} |
||||||
|
.files { |
||||||
|
li { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
margin: 10px 0; |
||||||
|
} |
||||||
|
.file-name { |
||||||
|
margin-right: 10px; |
||||||
|
font-size: 12px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue