<template>
|
<div class="content">
|
<div v-if="!submissionStatus" style="min-height: 600px" v-loading="loading">
|
<template>
|
<el-button
|
type="primary"
|
class="btn"
|
@click="changeSubmissionStatus"
|
plain
|
>投稿</el-button
|
>
|
</template>
|
<el-empty
|
description="暂无数据"
|
class="empty"
|
:image-size="200"
|
v-if="tableData.length == 0 && !loading"
|
></el-empty>
|
<template v-if="tableData.length > 0 && !loading">
|
<el-table
|
:header-cell-style="rowClass"
|
:data="tableData"
|
border
|
style="width: 100%"
|
>
|
<el-table-column
|
align="center"
|
prop="date"
|
type="index"
|
label="序号"
|
width="60"
|
>
|
<template slot-scope="scope">
|
{{
|
(paginationData.page - 1) * paginationData.limit +
|
scope.$index +
|
1
|
}}
|
</template>
|
</el-table-column>
|
<el-table-column label="作品名称">
|
<span class="ellipsis" slot-scope="scope">
|
{{ scope.row.contribute_workName || "-" }}
|
</span>
|
</el-table-column>
|
<el-table-column label="作品描述">
|
<span class="ellipsis" slot-scope="scope">
|
{{ scope.row.contribute_workDescription || "-" }}
|
</span>
|
</el-table-column>
|
<el-table-column label="查看" width="60" align="center">
|
<span
|
class="see"
|
slot-scope="scope"
|
@click="viewContributions(scope.row.content)"
|
>
|
查看
|
</span>
|
</el-table-column>
|
</el-table>
|
<!-- 分页 -->
|
<div class="pageinateBox" v-if="tableData.length > 0">
|
<el-pagination
|
@size-change="
|
(val) => {
|
paginationData.limit = val;
|
getAuthorContribution();
|
}
|
"
|
@current-change="
|
(val) => {
|
paginationData.page = val;
|
getAuthorContribution();
|
}
|
"
|
background=""
|
:current-page="paginationData.page - 0"
|
:page-size="paginationData.limit"
|
prev-text="上一页"
|
next-text="下一页"
|
layout="total, prev, pager, next, slot, jumper"
|
:total="paginationData.totalCount"
|
>
|
</el-pagination>
|
</div>
|
</template>
|
</div>
|
<div v-else>
|
<el-form
|
:model="ruleForm"
|
:rules="rules"
|
ref="form"
|
:disabled="disabled"
|
class="demo-ruleForm"
|
label-position="left"
|
label-suffix=":"
|
label-width="140px"
|
>
|
<el-form-item label="作品名称" prop="contribute_workName">
|
<el-input
|
v-model="ruleForm.contribute_workName"
|
placeholder="请输入作品名称"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="电子邮箱" prop="contribute_email">
|
<el-input
|
v-model="ruleForm.contribute_email"
|
placeholder="请输入您的邮箱地址"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="联系方式" prop="contribute_contact">
|
<el-input
|
v-model="ruleForm.contribute_contact"
|
placeholder="请输入手机号"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="相关证件" prop="contribute_workCertificates">
|
<div class="lecturingSpecixalty">
|
<el-upload
|
:file-list="ruleForm.contribute_workCertificates"
|
action=""
|
:limit="5"
|
:on-exceed="
|
() => {
|
this.$message({
|
message: '最多上传5个文件，请移除其他文件后再上传。',
|
type: 'warning',
|
});
|
}
|
"
|
:http-request="beforeRead"
|
:multiple="false"
|
list-type="picture-card"
|
:before-remove="beforeDelimg"
|
:on-preview="handlePictureCardPreview"
|
:on-success="uploadSucceeded"
|
:on-error="uploadFailed"
|
:on-remove="handleRemove"
|
>
|
<i class="el-icon-plus"></i>
|
</el-upload>
|
</div>
|
</el-form-item>
|
<div class="notice">
|
注：推荐优先上传您的教师证电子版或校园卡或工作证或身份证
|
支持上传jpg、png文件
|
</div>
|
<el-form-item label="作品描述" prop="contribute_workDescription">
|
<el-input
|
class=""
|
type="textarea"
|
v-model="ruleForm.contribute_workDescription"
|
:autosize="{ minRows: 5, maxRows: 15 }"
|
placeholder="请对作品做大概简介"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="作品" prop="contribute_works">
|
<el-upload
|
:http-request="uploadFile"
|
action=""
|
:on-remove="handleRemoveFile"
|
:on-error="uploadFailed"
|
:on-success="fileuploadSucceeded"
|
:before-remove="beforeRemove"
|
multiple
|
:limit="3"
|
:on-exceed="
|
() => {
|
this.$message({
|
message: '最多上传5个文件，请移除其他文件后再上传。',
|
type: 'warning',
|
});
|
}
|
"
|
:file-list="ruleForm.contribute_works"
|
>
|
<el-button size="small" type="primary">点击上传</el-button>
|
</el-upload>
|
</el-form-item>
|
<span class="notice">注：作品大小不得超过 30Mb </span>
|
<div class="agreement" v-if="!disabled">
|
<span
|
class="choose"
|
@click="
|
() => {
|
this.agreement = !this.agreement;
|
}
|
"
|
>
|
<img
|
v-show="agreement"
|
src="@/assets/images/personalCenter/choose.png"
|
alt=""
|
/>
|
</span>
|
<span class="infoTxt">
|
已阅读并同意<span class="textpro" @click.stop="onPrivacy"
|
>《隐私权政策》</span
|
><span class="textpro" @click.stop="onStatement">《法律声明》</span>
|
</span>
|
</div>
|
</el-form>
|
<div>
|
<div
|
v-if="!disabled"
|
class="basic addAddressButton greenButton"
|
type="primary"
|
@click="authorContribution()"
|
>
|
提交
|
</div>
|
<div class="basic addAddressButton delete" @click="cancel">返回</div>
|
</div>
|
<el-dialog :visible.sync="dialogImageState">
|
<img width="100%" :src="dialogImageUrl" alt="" />
|
</el-dialog>
|
<el-dialog
|
:title="dialogName"
|
:visible.sync="centerDialogVisible"
|
width="40%"
|
center
|
>
|
<p class="protocolBox" v-html="dialoagContent"></p>
|
<span slot="footer" class="dialog-footer">
|
<el-button type="primary" @click="onCancel">确 定</el-button>
|
</span>
|
</el-dialog>
|
</div>
|
</div>
|
</template>
|
<script>
|
import { mapState } from "vuex";
|
import { getPublicImage } from "@/assets/js/middleGround/tool";
|
|
export default {
|
data() {
|
return {
|
dialogName: "",
|
centerDialogVisible: false,
|
disabled: false,
|
ruleForm: {
|
contribute_workName: "",
|
contribute_email: "",
|
contribute_contact: "",
|
contribute_workCertificates: [],
|
contribute_workDescription: "",
|
contribute_works: [],
|
},
|
rules: {
|
contribute_workName: [
|
{ required: true, message: "请填写作品名称", trigger: "blur" },
|
],
|
contribute_email: [
|
{ required: true, message: "请填写邮箱", trigger: "blur" },
|
{
|
pattern: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,
|
message: "邮箱格式校验失败，请输入邮箱",
|
trigger: "blur",
|
},
|
],
|
contribute_contact: [
|
{ required: true, message: "请输入手机号", trigger: "blur" },
|
{
|
pattern:
|
/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
|
message: "请输入正确手机号",
|
trigger: "blur",
|
},
|
],
|
contribute_workCertificates: [
|
{ required: true, message: "请上传您的证件", trigger: "blur" },
|
],
|
contribute_workDescription: [
|
{ required: true, message: "请填写您的作品描述", trigger: "blur" },
|
],
|
contribute_works: [
|
{ required: true, message: "请上传您的作品", trigger: "change" },
|
],
|
},
|
agreement: false,
|
lecturingSpecialty: "",
|
file: "",
|
pictrueList: [],
|
// 查看已选中的图片
|
dialogImageUrl: "",
|
// 查看已选中的图片 显示状态
|
dialogImageState: false,
|
certificatesImg: "",
|
loading: false,
|
paginationData: {
|
page: 1,
|
totalCount: 0,
|
limit: 10,
|
totalPage: 0,
|
},
|
tableData: [],
|
worksInfo: [],
|
submissionStatus: false, // 切换显示 表单列表 、 提交表单
|
protocolPrivacyTxt: "",
|
protocolStatementTxt: "",
|
dialoagContent: "",
|
};
|
},
|
computed: {
|
...mapState(["userInfo"]),
|
},
|
created() {
|
this.getAuthorContribution();
|
this.getTypeItem();
|
this.getPrivacy();
|
},
|
methods: {
|
onCancel() {
|
this.dialoagContent = "";
|
this.centerDialogVisible = false;
|
},
|
onPrivacy() {
|
this.dialogName = "《隐私权政策》";
|
this.dialoagContent = this.protocolPrivacyTxt
|
? this.protocolPrivacyTxt
|
: "暂无协议";
|
this.centerDialogVisible = true;
|
},
|
onStatement() {
|
this.dialogName = "《法律声明》";
|
this.dialoagContent = this.protocolStatementTxt
|
? this.protocolStatementTxt
|
: "暂无协议";
|
this.centerDialogVisible = true;
|
},
|
getPrivacy() {
|
var that = this;
|
that.MG.resource
|
.getItem({
|
path: this.config.refCodes.Privacy,
|
fields: {
|
caupress_content: [],
|
},
|
})
|
.then((res) => {
|
try {
|
const authorPrivacyPolic = res.datas.find(
|
(e) => e.refCode == "caupress_authorPrivacyPolicy"
|
);
|
const legalNotices = res.datas.find(
|
(e) => e.refCode == "caupress_legalNotices"
|
);
|
this.protocolPrivacyTxt = authorPrivacyPolic
|
? authorPrivacyPolic.caupress_content
|
: "暂无协议";
|
this.protocolStatementTxt = legalNotices
|
? legalNotices.caupress_content
|
: "暂无协议";
|
} catch (error) {
|
this.protocolPrivacyTxt = "暂无协议";
|
this.protocolStatementTxt = "暂无协议";
|
}
|
});
|
},
|
getStatement() {},
|
rowClass() {
|
//表格数据居中显示
|
return "text-align:center";
|
},
|
// 切换 提交表单 、 表单列表
|
changeSubmissionStatus(openEdit) {
|
if (this.userInfo.phoneNumber) {
|
this.submissionStatus = !this.submissionStatus;
|
// 切换到列表页重新获取数据
|
if (!openEdit) {
|
// 不让编辑 选中协议
|
this.disabled = true;
|
} else {
|
this.disabled = false;
|
}
|
if (!this.submissionStatus) {
|
this.paginationData.page = 1;
|
this.getAuthorContribution();
|
}
|
} else {
|
this.$message({
|
message: "请先绑定手机号！",
|
type: "warning",
|
});
|
}
|
},
|
// 获取所有作者投稿
|
getAuthorContribution() {
|
this.loading = true;
|
let { limit, page } = this.paginationData;
|
|
let query = {
|
start: limit * page - limit,
|
size: limit,
|
sort: {
|
field: "createDate",
|
type: "Desc",
|
},
|
appRefCode: this.config.appRefCode,
|
topicIdOrRefCode: "contribution",
|
};
|
this.MG.ugc.getTopicMessageList(query).then((res) => {
|
this.loading = false;
|
this.paginationData.totalCount = res.totalSize;
|
this.tableData = [];
|
res.datas.map((item) => {
|
let content = JSON.parse(item.content);
|
this.tableData.push({
|
contribute_workName: content.contribute_workName,
|
contribute_workDescription: content.contribute_workDescription,
|
content: content,
|
});
|
});
|
});
|
},
|
handlePictureCardPreview(file) {
|
this.dialogImageState = true;
|
this.dialogImageUrl = file.url;
|
},
|
// 移除图片后的处理
|
handleRemove(file, filelist) {
|
this.ruleForm.contribute_workCertificates = filelist;
|
},
|
// 移除上传文件后的处理
|
handleRemoveFile(file, filelist) {
|
this.ruleForm.contribute_works = filelist;
|
},
|
// 上传作品
|
uploadFile(file) {
|
this.isLoding = true;
|
return new Promise((resolve, reject) => {
|
const FileName = file.file.name.split(".")[0];
|
const Extension = file.file.name.split(".")[1];
|
const FileType = file.file.type;
|
// 如果文件大于 30mb 提示文件过大，不允许上传
|
if (file.file.size > 30000000) {
|
this.$message({
|
message: "作品大小超过30Mb,请上传小于30Mb大小的作品",
|
type: "error",
|
});
|
return reject();
|
}
|
let size = 1024;
|
this.tool
|
.getFileMd5(file.file, size * 1024)
|
.then((e) => {
|
const imgData = new FormData();
|
this.fileMd5 = e;
|
imgData.append("Md5", e);
|
imgData.append("FileName", FileName);
|
imgData.append("Extension", Extension);
|
imgData.append("FileType", FileType);
|
imgData.append("MetaData", null);
|
imgData.append("file", file.file);
|
this.MG.file.upload(imgData).then((res) => {
|
this.$message({
|
message: "作品上传成功",
|
type: "success",
|
});
|
return resolve(e);
|
});
|
})
|
.catch((e) => {
|
this.isLoding = false;
|
console.error(e);
|
return reject();
|
});
|
});
|
},
|
// 作品上传成功后的处理
|
fileuploadSucceeded(res, file, filelist) {
|
filelist[filelist.length - 1].md5 = res;
|
this.ruleForm.contribute_works = filelist;
|
this.$refs["form"].validateField("contribute_works");
|
},
|
// 获取FormTypeItem
|
getTypeItem() {
|
const data = {
|
refCodes: ["contributedWorks"],
|
};
|
this.MG.resource.getCmsTypeByRefCode(data).then((res) => {
|
this.worksInfo = res[0].cmsTypeLinks[0].children;
|
});
|
},
|
// 提交作者投稿
|
authorContribution() {
|
this.$refs["form"].validate((valid) => {
|
if (valid) {
|
// 判断是否同意了协议
|
if (this.agreement) {
|
this.loading = true;
|
this.teacherRegisterLoading = true;
|
|
// 移除图片不相关属性
|
this.ruleForm.contribute_workCertificates.map((item) => {
|
delete item.status;
|
delete item.uid;
|
delete item.url;
|
delete item.percentage;
|
delete item.raw;
|
delete item.response;
|
delete item.size;
|
});
|
// 移除文件不相关属性
|
this.ruleForm.contribute_works.map((item) => {
|
delete item.status;
|
delete item.uid;
|
delete item.url;
|
delete item.percentage;
|
delete item.raw;
|
delete item.response;
|
delete item.size;
|
});
|
|
const data = {
|
topicIdOrRefCode: "contribution",
|
name: this.ruleForm.contribute_workName,
|
content: JSON.stringify(this.ruleForm),
|
state: "Normal",
|
type: "authorOfSubmission",
|
cmsTypeRefCode: this.config.refCodes.Contribution,
|
newDataListRequest: this.tool.worksDataBytool(
|
this.worksInfo,
|
this.ruleForm,
|
this.ruleForm.contribute_workCertificates
|
),
|
};
|
this.MG.ugc.newTopicMessage(data).then((res) => {
|
if (res) {
|
// 恢复默认值
|
for (const key in this.ruleForm) {
|
this.ruleForm[key] = Array.isArray(this.ruleForm[key])
|
? []
|
: "";
|
}
|
this.$message({
|
message: "投稿成功",
|
type: "success",
|
});
|
this.loading = false;
|
this.changeSubmissionStatus();
|
} else {
|
this.$message.error("投稿失败，请稍后重试");
|
}
|
});
|
} else {
|
this.$message({
|
message: "请勾选，已阅读并同意《隐私权政策》《法律声明》",
|
type: "warning",
|
});
|
}
|
} else {
|
return false;
|
}
|
});
|
},
|
// 取消投稿
|
cancel() {
|
this.changeSubmissionStatus();
|
// 恢复默认值
|
for (const key in this.ruleForm) {
|
this.ruleForm[key] = Array.isArray(this.ruleForm[key]) ? [] : "";
|
}
|
},
|
// 上传图片
|
beforeRead(file) {
|
this.isLoding = true;
|
return new Promise((resolve, reject) => {
|
const FileName = file.file.name.split(".")[0];
|
const Extension = file.file.name.split(".")[1];
|
const FileType = file.file.type;
|
if (FileType != "image/jpeg" && FileType != "image/png") {
|
this.$message({
|
message: "文件格式不允许，只允许上传图片格式",
|
type: "error",
|
});
|
return reject();
|
}
|
let size = 1024;
|
this.tool
|
.getFileMd5(file.file, size * 1024)
|
.then((e) => {
|
this.isLoding = false;
|
const imgData = new FormData();
|
this.fileMd5 = e;
|
imgData.append("Md5", e);
|
imgData.append("FileName", FileName);
|
imgData.append("Extension", Extension);
|
imgData.append("FileType", FileType);
|
imgData.append("MetaData", null);
|
imgData.append("file", file.file);
|
this.MG.file.upload(imgData).then((res) => {
|
if (res == "文件上传成功") {
|
this.$message({
|
message: "图片上传成功",
|
type: "success",
|
});
|
return resolve(e);
|
} else {
|
return reject();
|
}
|
});
|
})
|
.catch((e) => {
|
this.isLoding = false;
|
console.error(e);
|
return reject();
|
});
|
});
|
},
|
// 上传图片成功后的处理
|
uploadSucceeded(res, file, filelist) {
|
filelist[filelist.length - 1].md5 = res;
|
this.ruleForm.contribute_workCertificates = filelist;
|
this.$refs["form"].validateField("contribute_workCertificates");
|
},
|
// 删除图片文件之前的钩子
|
beforeDelimg() {
|
return this.$confirm(`确定移除证件照吗？`);
|
},
|
// 上传失败
|
uploadFailed() {
|
this.$message.error("文件上传失败，请稍后重试");
|
},
|
// 移除上传的文件
|
beforeRemove() {
|
return this.$confirm(`确定移除作品吗？`);
|
},
|
// 查看投稿
|
viewContributions(ele) {
|
ele.contribute_workCertificates?.map((item) => {
|
item.url = getPublicImage(item.md5);
|
});
|
Object.assign(this.ruleForm, ele);
|
this.changeSubmissionStatus(false);
|
},
|
},
|
};
|
</script>
|
<style lang="less" scoped>
|
.protocolBox {
|
text-align: left;
|
line-height: 23px;
|
z-index: 1;
|
height: 500px;
|
overflow-y: auto;
|
margin-top: -20px;
|
box-sizing: border-box;
|
padding: 10px;
|
}
|
.content {
|
padding: 40px;
|
overflow: hidden;
|
.btn {
|
margin-bottom: 20px;
|
}
|
.see {
|
cursor: pointer;
|
}
|
.notice {
|
font-size: 14px;
|
color: #b3b3b3;
|
margin-left: 140px;
|
margin-bottom: 20px;
|
}
|
.lecturingSpecixalty {
|
display: flex;
|
border: 1px solid #dcdfe6;
|
border-radius: 4px;
|
padding: 20px;
|
min-height: 148px;
|
}
|
.agreement {
|
display: flex;
|
padding: 40px 0;
|
height: 20px;
|
align-items: center;
|
.choose {
|
display: inline-block;
|
border: 1px solid #e2e2e2;
|
width: 13px;
|
height: 13px;
|
margin-right: 10px;
|
cursor: pointer;
|
img {
|
margin-left: 2px;
|
margin-bottom: 2px;
|
}
|
}
|
.infoTxt {
|
.textpro {
|
color: #00873c;
|
cursor: pointer;
|
}
|
}
|
}
|
.basic {
|
width: 120px;
|
height: 40px;
|
border-radius: 4px;
|
color: #fff;
|
font-size: 16px;
|
text-align: center;
|
line-height: 40px;
|
cursor: pointer;
|
}
|
.addAddressButton {
|
float: right;
|
margin-right: 20px;
|
}
|
.greenButton {
|
background: linear-gradient(0deg, #00873c 0%, #00aa4c 100%);
|
}
|
.delete {
|
color: #00873c;
|
background-color: #fff;
|
border: 1px solid #00873c;
|
border-radius: 4px;
|
}
|
.pageinateBox {
|
text-align: center;
|
padding: 40px 0 0 0;
|
:deep(.el-pagination.is-background .btn-next) {
|
padding: 0 10px;
|
}
|
:deep(.el-pagination.is-background .btn-prev) {
|
padding: 0 10px;
|
}
|
}
|
}
|
</style>
|
