parent
b9df80e2df
commit
bd2985541b
11 changed files with 223 additions and 677 deletions
@ -1,450 +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" |
|
||||||
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 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"; |
|
||||||
import { mapActions } from "vuex"; |
|
||||||
|
|
||||||
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: { |
|
||||||
...mapActions("match", [ |
|
||||||
"setMatchId" |
|
||||||
]), |
|
||||||
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.setMatchId(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