增加可下载模块

pages/knowledge/knowledgeDetail.vue

@@ -40,7 +40,7 @@
             />
           </div>
           <div v-if="isfile == false">
-            <img :src="fileSrc" class="detail-content-right-img">
+            <img :src="fileSrc" class="detail-content-right-img" />
           </div>
         </div>
         <!-- <el-input
@@ -64,6 +64,13 @@
             <div />
           </nuxt-link>
         </div>
+        <attachment-list
+          :file="file"
+          :is-paid="isPaid"
+          :price="price"
+          :is-paid-attachment="isPaidAttachment"
+          :attachment-price="attachmentPrice"
+        />
         <topic-reward-list
           :author="thread.user || {}"
           :paid-information="paidInformation"
@@ -94,35 +101,37 @@
   </div>
 </template>
 <script>
-import axios from '@/plugins/axios.js';
-import handleError from '@/mixin/handleError';
-const threadInclude
-  = 'posts.replyUser,threadAudio,user.groups,user,'
-  + 'user.groups.permissionWithoutCategories,posts,posts.user,posts.likedUsers,posts.images,'
-  + 'firstPost,firstPost.likedUsers,firstPost.images,firstPost.attachments,rewardedUsers,'
-  + 'category,threadVideo,paidUsers,question,question.beUser,question.images,onlookers';
-import env from '@/utils/env';
-import config from '@/config.js';
+import axios from "@/plugins/axios.js";
+import handleError from "@/mixin/handleError";
+const threadInclude =
+  "posts.replyUser,threadAudio,user.groups,user," +
+  "user.groups.permissionWithoutCategories,posts,posts.user,posts.likedUsers,posts.images," +
+  "firstPost,firstPost.likedUsers,firstPost.images,firstPost.attachments,rewardedUsers," +
+  "category,threadVideo,paidUsers,question,question.beUser,question.images,onlookers";
+import env from "@/utils/env";
+import config from "@/config.js";
+import AttachmentList from "../../components/topic/AttachmentList.vue";
 export default {
+  components: { AttachmentList },
   data() {
     return {
-      threadId: '26',
+      threadId: "26",
       renderComponent: true,
       loading: false,
       showViewloading: false,
       isShowView: false,
       isfile: true,
-      fileSrc: '',
+      fileSrc: "",
       isPost: true,
-      qywxUserid: '',
-      publishType: 'knowledge',
-      fileMd5: '',
-      title: '',
-      inputContent: '',
+      qywxUserid: "",
+      publishType: "knowledge",
+      fileMd5: "",
+      title: "",
+      inputContent: "",
       data: [],
       defaultProps: {
-        children: 'children',
-        label: 'label'
+        children: "children",
+        label: "label"
       },
       list: [],
       thread: {},
@@ -131,76 +140,76 @@ export default {
       postId: 0,
       actions: [
         {
-          text: this.$t('topic.read'),
+          text: this.$t("topic.read"),
           count: 0,
-          command: '',
+          command: "",
           canOpera: false,
-          icon: 'book'
+          icon: "book"
         },
         {
-          text: this.$t('topic.getLike'),
+          text: this.$t("topic.getLike"),
           count: 0,
-          command: 'isLiked',
+          command: "isLiked",
           canOpera: true,
           isStatus: false,
-          icon: 'like'
+          icon: "like"
         },
         {
-          text: this.$t('topic.collection'),
-          command: 'isFavorite',
+          text: this.$t("topic.collection"),
+          command: "isFavorite",
           canOpera: true,
           isStatus: false,
-          icon: 'favor'
+          icon: "favor"
         },
         {
-          text: this.$t('topic.share'),
-          command: 'showLink',
+          text: this.$t("topic.share"),
+          command: "showLink",
           canOpera: true,
-          icon: 'link'
+          icon: "link"
         }
       ],
       paidInformation: {
-        price: '0',
+        price: "0",
         paid: false,
         paidUsers: [],
         paidCount: 0,
         isPaidAttachment: false,
-        attachmentPrice: '0'
+        attachmentPrice: "0"
       },
-      payment: { wechat_qrcode: '', rewardAmount: '' },
-      location: { location: '', latitude: '', longitude: '' },
+      payment: { wechat_qrcode: "", rewardAmount: "" },
+      location: { location: "", latitude: "", longitude: "" },
       managementList: [
         {
-          name: 'canEdit',
-          command: 'toEdit',
+          name: "canEdit",
+          command: "toEdit",
           isStatus: false,
           canOpera: false,
-          text: this.$t('topic.edit'),
-          type: '0'
+          text: this.$t("topic.edit"),
+          type: "0"
         },
         {
-          name: 'canEssence',
-          command: 'isEssence',
+          name: "canEssence",
+          command: "isEssence",
           isStatus: false,
           canOpera: false,
-          text: this.$t('topic.essence'),
-          type: '1'
+          text: this.$t("topic.essence"),
+          type: "1"
         },
         {
-          name: 'canSticky',
-          command: 'isSticky',
+          name: "canSticky",
+          command: "isSticky",
           isStatus: false,
           canOpera: false,
-          text: this.$t('topic.sticky'),
-          type: '2'
+          text: this.$t("topic.sticky"),
+          type: "2"
         },
         {
-          name: 'canHide',
-          command: 'isDeleted',
+          name: "canHide",
+          command: "isDeleted",
           isStatus: false,
           canOpera: false,
-          text: this.$t('topic.delete'),
-          type: '3'
+          text: this.$t("topic.delete"),
+          type: "3"
         }
       ],
       showCheckoutCounter: false,
@@ -209,8 +218,28 @@ export default {
       defaultLoading: false,
       articleLoading: false,
       passwordError: false,
-      passwordErrorTip: '',
-      findPassword: false
+      passwordErrorTip: "",
+      findPassword: false,
+      attachmentPrice: "0.00",
+      file: {
+        ttachment: "考勤与假期管理制度-百伦全员、歌戈儿办公室人员适用.pdf",
+        extension: "pdf",
+        fileName: "考勤与假期管理制度-百伦全员、歌戈儿办公室人员适用.pdf",
+        filePath: "http://img.blsct.com/imgUrl_1611558105.2312.pdf",
+        fileSize: 349279,
+        fileType: "application/pdf",
+        id: 93,
+        isApproved: 1,
+        isRemote: false,
+        order: 0,
+        thumbUrl: "http://img.blsct.com/imgUrl_1611558105.2312.pdf",
+        type: 0,
+        type_id: 118,
+        url: "http://img.blsct.com/imgUrl_1611558105.2312.pdf"
+      },
+      isPaid: false,
+      isPaidAttachment: false,
+      price: "0.00"
     };
   },
   computed: {
@@ -226,21 +255,21 @@ export default {
     rewardOrPay() {
       const price = parseFloat(this.paidInformation.price);
       const attachmentPrice = parseFloat(this.paidInformation.attachmentPrice);
-      const questionPrice
-        = Object.keys(this.question).length > 0
+      const questionPrice =
+        Object.keys(this.question).length > 0
           ? parseFloat(this.question.onlooker_unit_price)
           : 0;
       return price > 0 || attachmentPrice > 0 || questionPrice > 0
-        ? 'pay'
-        : 'reward';
+        ? "pay"
+        : "reward";
     },
     payOrRewardAmount() {
-      const price = parseFloat(this.paidInformation.price || '0');
+      const price = parseFloat(this.paidInformation.price || "0");
       const attachmentPrice = parseFloat(
-        this.paidInformation.attachmentPrice || '0'
+        this.paidInformation.attachmentPrice || "0"
       );
-      const questionPrice
-        = Object.keys(this.question).length > 0
+      const questionPrice =
+        Object.keys(this.question).length > 0
           ? parseFloat(this.question.onlooker_unit_price)
           : 0;
       return (
@@ -248,12 +277,12 @@ export default {
       );
     },
     payOrderType() {
-      const price = parseFloat(this.paidInformation.price || '0');
+      const price = parseFloat(this.paidInformation.price || "0");
       const attachmentPrice = parseFloat(
-        this.paidInformation.attachmentPrice || '0'
+        this.paidInformation.attachmentPrice || "0"
       );
-      const questionPrice
-        = Object.keys(this.question).length > 0
+      const questionPrice =
+        Object.keys(this.question).length > 0
           ? parseFloat(this.question.onlooker_unit_price)
           : 0;
       // 1：注册，2：打赏，3：付费主题，4：付费用户组，5：问答提问支付，6：问答围观付费, 7: 付费附件
@@ -269,11 +298,11 @@ export default {
     }
   },
   created() {
-    this.fileSrc = '';
+    this.fileSrc = "";
     this.isShowView = false;
-    this.inputContent = '';
-    this.title = '';
-    this.qywxUserid = '';
+    this.inputContent = "";
+    this.title = "";
+    this.qywxUserid = "";
     this.data = [];
     this.loading = true;
     // 获取知识库带过来的id
@@ -290,16 +319,13 @@ export default {
         // this.data = res.data.result;
         this.data = this.deleteChildren(res.data.result);
         this.loading = false;
-        if(!!this.data)
-        {
-           let file=this.data.filter(item => item.file==true);
-           if(!!file)
-           {
+        if (this.data) {
+          const file = this.data.filter(item => item.file == true);
+          if (file) {
             // 触发点击事件
             this.handleNodeClick(file[0]);
-           }
+          }
         }
-      
       });
     if (Object.keys(this.thread).length === 0) this.getThread();
     else this.initData();
@@ -333,7 +359,7 @@ export default {
       return arr;
     },
     openNewForm() {
-      window.open(this.fileSrc, '_blank');
+      window.open(this.fileSrc, "_blank");
     },
     handleNodeClick(data) {
       self = this;
@@ -378,24 +404,24 @@ export default {
     },
     getThread() {
       return this.$store
-        .dispatch('jv/get', [
+        .dispatch("jv/get", [
           `threads/${this.threadId}`,
-          { params: { include: threadInclude }}
+          { params: { include: threadInclude } }
         ])
         .then(
           data => {
-            if (data.isDeleted) return this.$router.replace('/error');
+            if (data.isDeleted) return this.$router.replace("/error");
             this.articleLoading = false;
             this.thread = data;
             this.article = data.firstPost;
             this.postId = this.article._jv.id;
             this.initData();
           },
-          e => this.handleError(e, 'thread')
+          e => this.handleError(e, "thread")
         );
     },
     initData() {
-      console.log('thread => ', this.thread);
+      console.log("thread => ", this.thread);
       this.initManagementList(this.thread);
       this.initPaidInformation(this.thread);
       this.initActions(this.thread, this.article);
@@ -406,10 +432,10 @@ export default {
     filterImages() {
       this.article.imageSource = this.article.images; // 把原图路径记为 imageSource
       if (
-        this.article.contentAttachIds
-        && this.article.contentAttachIds.length > 0
-        && this.article.images
-        && this.article.images.length > 0
+        this.article.contentAttachIds &&
+        this.article.contentAttachIds.length > 0 &&
+        this.article.images &&
+        this.article.images.length > 0
       ) {
         this.article.images = this.article.images.filter(
           image => this.article.contentAttachIds.indexOf(image._jv.id) < 0
@@ -420,7 +446,7 @@ export default {
       if (!data.question) return;
       this.question = data.question;
       this.question.onlookerState = data.onlookerState;
-      console.log(this.question, 'question');
+      console.log(this.question, "question");
     },
     initLocation(data) {
       for (const key in this.location) this.location[key] = data[key];
@@ -433,25 +459,25 @@ export default {
     initManagementList(data) {
       this.managementList.forEach(item => {
         item.canOpera = data[item.name];
-        if (item.name === 'canEssence') {
+        if (item.name === "canEssence") {
           item.isStatus = data.isEssence;
           item.text = item.isStatus
-            ? this.$t('topic.cancelEssence')
-            : this.$t('topic.essence');
-        } else if (item.name === 'canSticky') {
+            ? this.$t("topic.cancelEssence")
+            : this.$t("topic.essence");
+        } else if (item.name === "canSticky") {
           item.isStatus = data.isSticky;
           item.text = item.isStatus
-            ? this.$t('topic.cancelSticky')
-            : this.$t('topic.sticky');
+            ? this.$t("topic.cancelSticky")
+            : this.$t("topic.sticky");
         }
       });
       if (
-        (this.thread.type === 4 || this.thread.type === 5)
-        && this.managementList.filter(item => item.name === 'canEdit').length > 0
+        (this.thread.type === 4 || this.thread.type === 5) &&
+        this.managementList.filter(item => item.name === "canEdit").length > 0
       ) {
         // 语音贴和问答帖，不支持编辑
         this.managementList.filter(
-          item => item.name === 'canEdit'
+          item => item.name === "canEdit"
         )[0].canOpera = false;
       }
       this.thread.isEssence = data.isEssence;
@@ -465,9 +491,9 @@ export default {
         viewInfo.count = data.viewCount;
         favorInfo.isStatus = data.isFavorite;
         favorInfo.text = favorInfo.isStatus
-          ? this.$t('topic.collectionAlready')
-          : this.$t('topic.collection');
-        favorInfo.icon = favorInfo.isStatus ? 'favored' : 'favor';
+          ? this.$t("topic.collectionAlready")
+          : this.$t("topic.collection");
+        favorInfo.icon = favorInfo.isStatus ? "favored" : "favor";
         favorInfo.canOpera = data.canFavorite;
       }
       if (firstPost) {
@@ -475,9 +501,9 @@ export default {
         likeInfo.isStatus = firstPost.isLiked;
         likeInfo.canOpera = firstPost.canLike;
         likeInfo.text = likeInfo.isStatus
-          ? this.$t('topic.liked')
-          : this.$t('topic.getLike');
-        likeInfo.icon = likeInfo.isStatus ? 'liked' : 'like';
+          ? this.$t("topic.liked")
+          : this.$t("topic.getLike");
+        likeInfo.icon = likeInfo.isStatus ? "liked" : "like";
       }
 
       this.$set(this.actions, 0, viewInfo);
@@ -486,14 +512,14 @@ export default {
     },
     paying({ payWay, hideAvatar, rewardAmount }) {
       if (
-        this.rewardOrPay === 'reward'
-        && (!rewardAmount || parseFloat(rewardAmount) === 0)
+        this.rewardOrPay === "reward" &&
+        (!rewardAmount || parseFloat(rewardAmount) === 0)
       ) {
-        return this.$message.error(this.$t('pay.AmountCannotBeLessThan0'));
+        return this.$message.error(this.$t("pay.AmountCannotBeLessThan0"));
       }
       this.payment.rewardAmount = rewardAmount;
       this.showCheckoutCounter = false;
-      if (payWay === 'walletPay') {
+      if (payWay === "walletPay") {
         this.showPasswordInput = true;
         this.createOrder(
           hideAvatar,
@@ -503,9 +529,9 @@ export default {
         ).finally(() => {
           this.defaultLoading = false;
         });
-      } else if (payWay === 'wxPay') {
+      } else if (payWay === "wxPay") {
         if (!this.forums.paycenter.wxpay_close) {
-          return this.$message.warning(this.$t('pay.wxPayClose'));
+          return this.$message.warning(this.$t("pay.wxPayClose"));
         }
         this.createOrder(
           hideAvatar,
@@ -521,10 +547,10 @@ export default {
                   () => {
                     this.getThread();
                   },
-                  () => console.log('支付失败')
+                  () => console.log("支付失败")
                 );
               },
-              () => console.log('支付失败')
+              () => console.log("支付失败")
             );
           })
           .finally(() => {
@@ -537,32 +563,32 @@ export default {
         () => {
           this.getThread();
         },
-        () => console.log('支付失败')
+        () => console.log("支付失败")
       );
     },
     postCommand(item) {
       if (this.defaultLoading) return;
       this.defaultLoading = true;
-      const params
-        = item.command === 'isLiked'
-          ? { _jv: { type: `posts`, id: this.postId }}
-          : { _jv: { type: `threads`, id: this.threadId }};
+      const params =
+        item.command === "isLiked"
+          ? { _jv: { type: `posts`, id: this.postId } }
+          : { _jv: { type: `threads`, id: this.threadId } };
       params[item.command] = !item.isStatus;
       return this.$store
-        .dispatch('jv/patch', params)
+        .dispatch("jv/patch", params)
         .then(
           data => {
             data.firstPost && this.initManagementList(data);
             data.firstPost && this.initActions(data);
-            if (item.command === 'isSticky') {
+            if (item.command === "isSticky") {
               return item.isStatus
-                ? this.$message.success(this.$t('topic.stickySuccess'))
-                : this.$message.success(this.$t('topic.cancelStickySuccess'));
+                ? this.$message.success(this.$t("topic.stickySuccess"))
+                : this.$message.success(this.$t("topic.cancelStickySuccess"));
             }
-            if (item.command === 'isLiked') {
+            if (item.command === "isLiked") {
               return this.setLikeUser(!item.isStatus, data);
             }
-            if (item.command === 'isDeleted') return this.afterDeleted();
+            if (item.command === "isDeleted") return this.afterDeleted();
           },
           e => this.handleError(e)
         )
@@ -575,41 +601,40 @@ export default {
       status
         ? this.article.likedUsers.unshift(this.currentUser)
         : this.article.likedUsers.forEach((item, index, array) => {
-          item.id === this.currentUser.id && array.splice(index, 1);
-        });
+            item.id === this.currentUser.id && array.splice(index, 1);
+          });
     },
     afterDeleted() {
       this.$message({
-        typeInformation: 'success',
-        message: this.$t('topic.deleteSuccessAndJumpToBack')
+        typeInformation: "success",
+        message: this.$t("topic.deleteSuccessAndJumpToBack")
       });
       setTimeout(() => {
-        this.$router.push('/');
+        this.$router.push("/");
       }, 1000);
     }
   },
   head() {
     return {
-      title:
-        '知识库',
+      title: "知识库",
       meta: [
         {
-          hid: 'keywords',
-          name: 'keywords',
-          content: (this.thread.category && this.thread.category.name) || ''
+          hid: "keywords",
+          name: "keywords",
+          content: (this.thread.category && this.thread.category.name) || ""
         },
         {
-          hid: 'description',
-          name: 'description',
+          hid: "description",
+          name: "description",
           content:
-            (this.thread.firstPost
-              && this.thread.firstPost.summaryText.slice(0, 80))
-            || ''
+            (this.thread.firstPost &&
+              this.thread.firstPost.summaryText.slice(0, 80)) ||
+            ""
         },
         {
-          name: 'og:video',
+          name: "og:video",
           content:
-            (this.thread.threadVideo && this.thread.threadVideo.media_url) || ''
+            (this.thread.threadVideo && this.thread.threadVideo.media_url) || ""
         }
       ]
     };
@@ -632,18 +657,21 @@ export default {
   width: 200px;
   overflow: hidden;
 } */
-.detail-content-left-text .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{
-  color: #2e8cf0  !important;
+.detail-content-left-text
+  .el-tree--highlight-current
+  .el-tree-node.is-current
+  > .el-tree-node__content {
+  color: #2e8cf0 !important;
 }
 .detail-content-left-text .el-tree-node:focus > .el-tree-node__content {
-    background-color: transparent !important;
-    color: #2e8cf0 !important;
+  background-color: transparent !important;
+  color: #2e8cf0 !important;
 }
 .detail-content-left-text .el-tree-node.is-current > .el-tree-node__content {
-    background-color:transparent !important;
+  background-color: transparent !important;
 }
-.detail-content-left-text .el-tree-node__hover{
-   color: #2e8cf0 !important;
+.detail-content-left-text .el-tree-node__hover {
+  color: #2e8cf0 !important;
 }
 </style>
 <style lang="scss" scoped>