|
|
@@ -0,0 +1,447 @@
|
|
|
+<template>
|
|
|
+ <div class="editor">
|
|
|
+ <!--作品名称-->
|
|
|
+ <div class="app__dp_f app__f_r app__alig_c">
|
|
|
+ <h5 class="app__f_s_0"><span class="app__fc_r">*</span>作品名称</h5>
|
|
|
+ <el-input show-word-limit v-model="workName" class="title _title" placeholder="50字符以内，不能包含&*\#等特殊字符" :maxlength="50" @blur="workNameBlur"></el-input>
|
|
|
+ </div>
|
|
|
+ <!--作品描述-->
|
|
|
+ <h5 class="label app__mt_20"><span class="app__fc_r">*</span>作品描述 <span class="app__ml_10"><a>查看参考案例</a></span></h5>
|
|
|
+ <editor placeholder="请输入作品描述，支持图文混排，可添加【文字描述】【方案视频】【作品图片】【担任职责】等模块;可添加方案截图、PDF文档转图片，不低于60字" :content="content" @change="handleChange"
|
|
|
+ class="app__bd_g"></editor>
|
|
|
+ <!--作品封面图 -->
|
|
|
+ <h5 class="label app__mt_20">作品封面图</h5>
|
|
|
+ <div class="uploadInfo">
|
|
|
+ <div class="left">
|
|
|
+ <el-upload class="avatar-uploader" action="#" :show-file-list="false" :multiple="false" accept="image/png, image/jpeg"
|
|
|
+ :before-upload="handleFileChange">
|
|
|
+ <i v-if="cover_url" class="el-icon-delete avatar-uploader-icon" @click.stop="handleDeleteFile"></i>
|
|
|
+ <img v-if="cover_url" :src="cover_url" class="avatar"/>
|
|
|
+ <!--无照片-->
|
|
|
+ <div v-else class="app__dp_f app__f_c app__alig_c app__jus__c" style="height: 100%">
|
|
|
+ <i class="el-icon-plus avatar-uploader-icon"></i>
|
|
|
+ <p class="app__fz_12 app__mt_10 el-p-upload">上传照片</p>
|
|
|
+ </div>
|
|
|
+ </el-upload>
|
|
|
+ <p class="app__fz_12 app__mt_10 app__tg_c app__fc_grey">支持JPG、PNG格式</p>
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <p>(800*800,图片最大2M,最多一张)</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--作品链接-->
|
|
|
+ <div class="app__dp_f app__f_r app__alig_c app__mt_20">
|
|
|
+ <h5 class="app__f_s_0">作品链接</h5>
|
|
|
+ <el-input show-word-limit v-model="title" class="title _title" placeholder="例如：https://www.proginn.com 若无法添加作品有效链接,请添加作品截图" :maxlength="50"></el-input>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ <footer class="app__tg_c">
|
|
|
+ <el-button type="primary" @click="publish" class="btn-save">保存</el-button>
|
|
|
+ <!-- <el-button @click="cancel">取消</el-button>-->
|
|
|
+ </footer>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import editor from "@/components/editor";
|
|
|
+
|
|
|
+ export default {
|
|
|
+ head() {
|
|
|
+ return {
|
|
|
+ script: []
|
|
|
+ };
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ editor
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ topicId: "", // 编辑
|
|
|
+ hashID: null,
|
|
|
+ workName: "",
|
|
|
+ title: "",
|
|
|
+ subTitle: "",
|
|
|
+ content: "",
|
|
|
+ cover_url: "",
|
|
|
+ dialogVisible: false,
|
|
|
+ disabled: false,
|
|
|
+ collectionId: "",
|
|
|
+ collectionList: [],
|
|
|
+ categoryList: [
|
|
|
+ {
|
|
|
+ value: "default",
|
|
|
+ label: "推荐"
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ fileList: [],
|
|
|
+ uploading: false
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {},
|
|
|
+ mounted() {
|
|
|
+ this.needLogin();
|
|
|
+ this.needVerify();
|
|
|
+ this.getHejiList();
|
|
|
+ if (this.$route.params.id) {
|
|
|
+ this.loadData();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ loadData() {
|
|
|
+ const data = {topicId: this.$route.params.id};
|
|
|
+ this.$axios
|
|
|
+ .$post(`/api/community/topic/get_edit_topic`, data)
|
|
|
+ .then(res => {
|
|
|
+ console.log(res);
|
|
|
+ const topic = res.data;
|
|
|
+ if (topic) {
|
|
|
+ this.cover_url = topic.cover_url;
|
|
|
+ this.topicId = topic.id;
|
|
|
+ this.title = topic.title;
|
|
|
+ this.subTitle = topic.intro;
|
|
|
+ this.content = topic.body;
|
|
|
+ this.hashID = topic.hash_id;
|
|
|
+ if (this.cover_url) {
|
|
|
+ this.fileList.push({
|
|
|
+ name: "cover_image",
|
|
|
+ url: this.cover_url
|
|
|
+ });
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.goHome();
|
|
|
+ }
|
|
|
+ // TODO go details
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getHejiList() {
|
|
|
+ this.$axios.post("/api/jishuquan/get_collections", {
|
|
|
+ uid: this.$store.state.userinfo.uid,
|
|
|
+ page: 1,
|
|
|
+ size: 200
|
|
|
+ }).then(res => {
|
|
|
+ if (res.data.status === 1) {
|
|
|
+ this.collectionList = res.data.data
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ publish() {
|
|
|
+ this.needVerify();
|
|
|
+ if (!this.title) {
|
|
|
+ this.$message.error("请输入文章标题");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (this.title.length < 2) {
|
|
|
+ this.$message.error("文章标题不可少于2字符");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (this.title.length > 64) {
|
|
|
+ this.$message.error("文章标题不可超过64字符，请删减");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (!this.content) {
|
|
|
+ this.$message.error("请输入文章正文");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (this.content.length < 100) {
|
|
|
+ this.$message.error("文章正文不可少于100字符");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (this.content.length > 100000) {
|
|
|
+ this.$message.error("文章正文不可超过1万字符，请删减");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ const data = {
|
|
|
+ title: this.title,
|
|
|
+ intro: this.subTitle,
|
|
|
+ body: this.content,
|
|
|
+ provider_id: this.collectionId,
|
|
|
+ cover_url: this.cover_url
|
|
|
+ };
|
|
|
+ if (this.topicId) {
|
|
|
+ data.topic_id = this.topicId;
|
|
|
+ this.$axios
|
|
|
+ .$post(`/api/community/topic/update_topic`, data)
|
|
|
+ .then(res => {
|
|
|
+ console.log(res);
|
|
|
+ if (res.status === -99) {
|
|
|
+ this.goHome();
|
|
|
+ }
|
|
|
+ if (res.status === 1) {
|
|
|
+ this.$message.success("编辑成功！");
|
|
|
+ }
|
|
|
+ // TODO go details
|
|
|
+ window.location.href = `/p/${this.hashID}.html`;
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.$axios
|
|
|
+ .$post(`/api/community/topic/create_topic`, data)
|
|
|
+ .then(res => {
|
|
|
+ console.log(res);
|
|
|
+ if (res.status === -99) {
|
|
|
+ this.goHome();
|
|
|
+ }
|
|
|
+ if (res.status === 1) {
|
|
|
+ this.$message.success("发布成功！");
|
|
|
+ }
|
|
|
+ // TODO go details
|
|
|
+ window.location.href = `/p/${res.data.hash_id}.html`;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ cancel() {
|
|
|
+ this.$router.back();
|
|
|
+ },
|
|
|
+ handleChange(val) {
|
|
|
+ this.content = val;
|
|
|
+ },
|
|
|
+ handleDeleteFile() {
|
|
|
+ this.cover_url = "";
|
|
|
+ },
|
|
|
+ handleFileChange(file) {
|
|
|
+ console.log(file);
|
|
|
+ if (file.size / 1024 > 500) {
|
|
|
+ this.$message.error("图片大小不得超过500k，请重新选择");
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ const formData = new FormData();
|
|
|
+ formData.append("target", '{ "type": 3 }');
|
|
|
+ formData.append("id", "WU_FILE_0");
|
|
|
+ formData.append("name", file.name);
|
|
|
+ formData.append("type", file.type);
|
|
|
+ formData.append("lastModifiedDate", file.lastModifiedDate);
|
|
|
+ formData.append("size", file.size);
|
|
|
+ formData.append("file", file);
|
|
|
+ this.$axios
|
|
|
+ .$post(`/file/proxyUpload`, formData, {
|
|
|
+ headers: {"Content-Type": "multipart/form-data"}
|
|
|
+ })
|
|
|
+ .then(res => {
|
|
|
+ this.cover_url = (res.data && res.data.url) || "";
|
|
|
+ this.fileList = [
|
|
|
+ {
|
|
|
+ name: "file.name",
|
|
|
+ url: this.cover_url
|
|
|
+ }
|
|
|
+ ];
|
|
|
+ });
|
|
|
+ },
|
|
|
+ workNameBlur(e) {
|
|
|
+ this.workName = this.workName.replace(/[&|\*|#|\\]/g, "");
|
|
|
+
|
|
|
+ },
|
|
|
+ handleChange(e){
|
|
|
+ console.log(e);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ @import "../../assets/css/common.css";
|
|
|
+
|
|
|
+ .editor {
|
|
|
+ position: relative;
|
|
|
+ padding: 20px 100px;
|
|
|
+ /*width: 740px;*/
|
|
|
+ background: #fff;
|
|
|
+
|
|
|
+ .title,
|
|
|
+ .sub-title {
|
|
|
+ .el-input__inner {
|
|
|
+ padding: 0;
|
|
|
+ border: 0;
|
|
|
+ border-radius: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .title {
|
|
|
+ margin: 10px auto 20px;
|
|
|
+ font-size: 28px;
|
|
|
+ font-family: PingFangSC-Medium;
|
|
|
+ font-weight: 500;
|
|
|
+ color: rgba(29, 42, 58, 1);
|
|
|
+ line-height: 40px;
|
|
|
+ }
|
|
|
+
|
|
|
+ ._title {
|
|
|
+ font-size: 15px !important;
|
|
|
+ margin: 0 0 0 20px !important;
|
|
|
+ border-bottom: 1px solid #ddd;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sub-title {
|
|
|
+ margin-bottom: 28px;
|
|
|
+ min-height: 18px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: PingFangSC-Regular;
|
|
|
+ font-weight: 400;
|
|
|
+ color: rgba(145, 154, 167, 1);
|
|
|
+ line-height: 18px;
|
|
|
+ border: 0;
|
|
|
+
|
|
|
+ .el-textarea__inner {
|
|
|
+ height: 18px;
|
|
|
+ line-height: 18px;
|
|
|
+ border: 0;
|
|
|
+ padding-left: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .label {
|
|
|
+ margin: 20px auto 10px;
|
|
|
+ font-size: 13px;
|
|
|
+ font-family: PingFangSC-Medium;
|
|
|
+ font-weight: 500;
|
|
|
+ color: rgba(25, 34, 46, 1);
|
|
|
+ line-height: 18px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ql-toolbar {
|
|
|
+ border-width: 1px 0 0 0 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .quill-editor {
|
|
|
+ height: 450px;
|
|
|
+ border-left: 0 !important;
|
|
|
+ border-right: 0 !important;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 25px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ql-snow.ql-toolbar::after {
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+
|
|
|
+ .class {
|
|
|
+ width: 320px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tags {
|
|
|
+ width: 560px;
|
|
|
+ }
|
|
|
+
|
|
|
+ footer {
|
|
|
+ margin: 40px 0;
|
|
|
+
|
|
|
+ /*button {*/
|
|
|
+ /* width: 100px;*/
|
|
|
+ /* height: 40px;*/
|
|
|
+ /* border-radius: 0;*/
|
|
|
+ /*}*/
|
|
|
+ }
|
|
|
+
|
|
|
+ strong {
|
|
|
+ font-weight: 800 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ em {
|
|
|
+ font-style: italic !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .uploadInfo {
|
|
|
+ display: flex;
|
|
|
+ padding-left: 30px;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .left {
|
|
|
+ width: 150px;
|
|
|
+ height: 180px;
|
|
|
+ flex-shrink: 0;
|
|
|
+ overflow: hidden;
|
|
|
+ position: relative;
|
|
|
+ background: #fff;
|
|
|
+
|
|
|
+ .el-icon-delete {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .avatar-uploader .el-upload {
|
|
|
+ width: 150px;
|
|
|
+ height: 150px;
|
|
|
+ border: 1px dashed #dce1e8;
|
|
|
+ border-radius: 6px;
|
|
|
+ cursor: pointer;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ object-fit: contain;
|
|
|
+ object-position: top left;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .avatar-uploader .el-upload:hover {
|
|
|
+ border-color: #409eff;
|
|
|
+
|
|
|
+ .el-icon-plus {
|
|
|
+ color: #409eff
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-p-upload {
|
|
|
+ color: #409eff
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-icon-delete {
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .avatar-uploader-icon {
|
|
|
+ /*position: absolute;*/
|
|
|
+ /*top: 0;*/
|
|
|
+ /*left: 0;*/
|
|
|
+ font-size: 44px;
|
|
|
+ color: #dce1e8;;
|
|
|
+ /*width: 150px;*/
|
|
|
+ /*height: 150px;*/
|
|
|
+ /*line-height: 140px;*/
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-p-upload {
|
|
|
+ color: #dce1e8
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .avatar {
|
|
|
+ width: 180px;
|
|
|
+ height: 140px;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title {
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ bottom: 40px;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ font-size: 13px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #dce1e8;
|
|
|
+ line-height: 18px;
|
|
|
+ text-decoration: underline;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .right {
|
|
|
+ margin-left: 18px;
|
|
|
+ height: 34px;
|
|
|
+
|
|
|
+ p {
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: rgba(145, 154, 167, 1);
|
|
|
+ line-height: 17px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-save {
|
|
|
+ width: 20vw;
|
|
|
+ border-radius: 5px;
|
|
|
+ }
|
|
|
+</style>
|
