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