e
3 years ago
parent
5d6a20c796
commit
7aec9afa0f
27 changed files with 581 additions and 62 deletions
@ -0,0 +1,446 @@ |
|||||||
|
<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" |
||||||
|
name="file" |
||||||
|
> |
||||||
|
<img v-if="coverUrl" :src="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" |
||||||
|
name="file" |
||||||
|
> |
||||||
|
<img v-if="carouselUrl" :src="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 class="d-inline-block"> |
||||||
|
<el-input placeholder="请输入竞赛名称" v-model="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="description" :height="400" /> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item> |
||||||
|
<el-button size="small" v-throttle @click="save(1)">保存</el-button> |
||||||
|
<el-button type="primary" v-if="publishStatus == 1" v-throttle @click="save(0)">发布</el-button> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import quill from "@/components/quill"; |
||||||
|
import util from "@/libs/util"; |
||||||
|
|
||||||
|
export default { |
||||||
|
name: "matchDetail", |
||||||
|
data() { |
||||||
|
return { |
||||||
|
id: this.$route.query.id, |
||||||
|
coverUrl: "", |
||||||
|
carouselUrl: "", |
||||||
|
publishStatus: 0, |
||||||
|
uploadList: [], |
||||||
|
uploadDataList: [], |
||||||
|
name: "", |
||||||
|
sponsor: "", |
||||||
|
sponsorList: [""], |
||||||
|
undertaker: "", |
||||||
|
undertakerList: [], |
||||||
|
signUpStartTime: "", |
||||||
|
signUpEndTime: "", |
||||||
|
signupTime: "", |
||||||
|
playTime: "", |
||||||
|
playStartTime: "", |
||||||
|
playEndTime: "", |
||||||
|
description: "" |
||||||
|
}; |
||||||
|
}, |
||||||
|
components: { |
||||||
|
quill |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
signupTime: function(val) { |
||||||
|
if (val) { |
||||||
|
this.signUpStartTime = val[0]; |
||||||
|
this.signUpEndTime = val[1]; |
||||||
|
} else { |
||||||
|
this.signUpStartTime = ""; |
||||||
|
this.signUpEndTime = ""; |
||||||
|
} |
||||||
|
}, |
||||||
|
playTime: function(val) { |
||||||
|
if (val) { |
||||||
|
this.playStartTime = val[0]; |
||||||
|
this.playEndTime = val[1]; |
||||||
|
} else { |
||||||
|
this.playStartTime = ""; |
||||||
|
this.playEndTime = ""; |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.getData(); |
||||||
|
this.commitId(); |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
save(status) { |
||||||
|
this.sponsor = this.sponsorList.filter(d => d).join(); |
||||||
|
this.undertaker = this.undertakerList.filter(d => d).join(); |
||||||
|
|
||||||
|
if (!this.name) return util.warningMsg("请填写竞赛名称"); |
||||||
|
if (status == 0) { |
||||||
|
if (!this.sponsor) return util.warningMsg("请填写主办方"); |
||||||
|
if (!this.signUpStartTime) return util.warningMsg("请选择报名时间"); |
||||||
|
} |
||||||
|
let now = new Date().getTime(); |
||||||
|
let signUpStartTime = new Date(this.signUpStartTime).getTime(); |
||||||
|
let signUpEndTime = new Date(this.signUpEndTime).getTime(); |
||||||
|
let playStartTime = new Date(this.playStartTime).getTime(); |
||||||
|
// if(signUpStartTime && now > signUpStartTime) return this.$$message.warning('报名时间不能早于当前时间') |
||||||
|
if (!this.playStartTime && status == 0) return util.warningMsg("请选择竞赛时间"); |
||||||
|
if (playStartTime && playStartTime < signUpEndTime) return util.warningMsg("竞赛时间不能早于报名结束时间"); |
||||||
|
if (!this.description && status == 0) return util.warningMsg("请填写竞赛详情"); |
||||||
|
|
||||||
|
let data = { |
||||||
|
id: this.id, |
||||||
|
coverUrl: this.coverUrl, |
||||||
|
carouselUrl: this.carouselUrl, |
||||||
|
description: this.description, |
||||||
|
founderId: 1, |
||||||
|
name: this.name, |
||||||
|
playEndTime: this.playEndTime, |
||||||
|
playStartTime: this.playStartTime, |
||||||
|
publishStatus: status ? this.publishStatus : 0, |
||||||
|
signUpEndTime: this.signUpEndTime, |
||||||
|
signUpStartTime: this.signUpStartTime, |
||||||
|
sponsor: this.sponsor, |
||||||
|
undertaker: this.undertaker |
||||||
|
}; |
||||||
|
if (this.id) { |
||||||
|
this.$put(this.api.editContest, data).then(res => { |
||||||
|
util.successMsg("修改成功"); |
||||||
|
this.$router.back(); |
||||||
|
}) |
||||||
|
.catch(err => { |
||||||
|
}); |
||||||
|
} else { |
||||||
|
this.$post(this.api.addContest, data).then(res => { |
||||||
|
util.successMsg("创建成功"); |
||||||
|
this.$router.back(); |
||||||
|
}) |
||||||
|
.catch(err => { |
||||||
|
}); |
||||||
|
} |
||||||
|
}, |
||||||
|
getData() { |
||||||
|
this.$get(this.api.getContest + "/" + this.id) |
||||||
|
.then(res => { |
||||||
|
let data = res.contest; |
||||||
|
this.coverUrl = data.coverUrl; |
||||||
|
this.carouselUrl = data.carouselUrl; |
||||||
|
this.description = data.description; |
||||||
|
this.name = data.name; |
||||||
|
this.playEndTime = data.playEndTime; |
||||||
|
this.playStartTime = data.playStartTime; |
||||||
|
this.publishStatus = data.publishStatus; |
||||||
|
this.signUpEndTime = data.signUpEndTime; |
||||||
|
this.signUpStartTime = data.signUpStartTime; |
||||||
|
this.sponsor = data.sponsor; |
||||||
|
this.undertaker = data.undertaker; |
||||||
|
|
||||||
|
this.signupTime = [data.signUpStartTime, data.signUpEndTime]; |
||||||
|
this.playTime = [data.playStartTime, data.playEndTime]; |
||||||
|
this.sponsorList = data.sponsor.split(","); |
||||||
|
this.undertakerList = data.undertaker.split(","); |
||||||
|
}) |
||||||
|
.catch(err => { |
||||||
|
|
||||||
|
}); |
||||||
|
}, |
||||||
|
commitId() { |
||||||
|
this.$store.commit("setMatchId", { matchId: this.id }); |
||||||
|
}, |
||||||
|
handleExceed(files, fileList) { |
||||||
|
util.warningMsg(`当前限制选择 1 个文件，如需更换，请删除上一个文件再重新选择！`); |
||||||
|
}, |
||||||
|
uploadSuccess(res, file, fileList) { |
||||||
|
if (this.coverUrl) { |
||||||
|
let fileName = this.coverUrl.replace("https://liuwanr.oss-cn-shenzhen.aliyuncs.com/", ""); |
||||||
|
this.$del(`${this.api.fileDeletion}?keys=${fileName}`).then(res => { |
||||||
|
}).catch(res => { |
||||||
|
}); |
||||||
|
} |
||||||
|
this.coverUrl = res.data.filesResult.fileUrl; |
||||||
|
}, |
||||||
|
uploadLgSuccess(res, file, fileList) { |
||||||
|
if (this.carouselUrl) { |
||||||
|
let fileName = this.carouselUrl.replace("https://liuwanr.oss-cn-shenzhen.aliyuncs.com/", ""); |
||||||
|
this.$del(`${this.api.fileDeletion}?keys=${fileName}`).then(res => { |
||||||
|
}).catch(res => { |
||||||
|
}); |
||||||
|
} |
||||||
|
this.carouselUrl = res.data.filesResult.fileUrl; |
||||||
|
}, |
||||||
|
uploadError(err, file, fileList) { |
||||||
|
this.$message({ |
||||||
|
message: "上传出错，请重试！", |
||||||
|
type: "error", |
||||||
|
center: true |
||||||
|
}); |
||||||
|
}, |
||||||
|
beforeRemove(file, fileList) { |
||||||
|
return this.$confirm(`确定移除 ${file.name}？`); |
||||||
|
}, |
||||||
|
handleRemove(file, fileList) { |
||||||
|
let fileName = this.coverUrl.replace("https://liuwanr.oss-cn-shenzhen.aliyuncs.com/", ""); |
||||||
|
this.$del(`${this.api.fileDeletion}?keys=${fileName}`).then(res => { |
||||||
|
this.coverUrl = ""; |
||||||
|
}).catch(res => { |
||||||
|
}); |
||||||
|
}, |
||||||
|
handleLgRemove(file, fileList) { |
||||||
|
let fileName = this.carouselUrl.replace("https://liuwanr.oss-cn-shenzhen.aliyuncs.com/", ""); |
||||||
|
this.$del(`${this.api.fileDeletion}?keys=${fileName}`).then(res => { |
||||||
|
this.carouselUrl = ""; |
||||||
|
}).catch(res => { |
||||||
|
}); |
||||||
|
}, |
||||||
|
uploadSure() { |
||||||
|
this.BatchUpload = false; |
||||||
|
this.pageNo = 1; |
||||||
|
this.keyword = ""; |
||||||
|
this.getData(); |
||||||
|
}, |
||||||
|
goback() { |
||||||
|
this.$confirm("确定返回？未更新的信息将不会保存。", "提示", { |
||||||
|
type: "warning" |
||||||
|
}) |
||||||
|
.then(() => { |
||||||
|
this.$router.push("/match"); |
||||||
|
}) |
||||||
|
.catch(() => { |
||||||
|
}); |
||||||
|
}, |
||||||
|
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> |
||||||
Loading…
Reference in new issue