python_93040206/ClientPlatform/src 2/pages/blogDetails/blogDetails.vue

<template>
  <div class="page-box">
    <div class="blogDetails-box">
      <div class="name">
        {{ blogDetail.name }}
      </div>
      <div class="info-box">
        <div class="info">
          <div class="author">发布人: {{ blogDetail.author }}</div>
          <div class="createTime">发布时间: {{ blogDetail.createTime }}</div>
          <div class="likes">
            点赞量:
            <i class="el-icon-thumb icon" @click="like"
              >&nbsp;{{ blogDetail.likes }}</i
            >
          </div>
        </div>
        <div class="search-box">
          <el-input
            placeholder="请输入内容"
            v-model="searchText"
            @keyup.enter="search()"
          >
            <el-button slot="append" @click="search()">搜索</el-button>
          </el-input>
        </div>
      </div>
      <div class="content-box">
        <div v-html="blogDetail.content" />
      </div>
      <div class="files-box">
        <div class="title">附件：</div>
        <div class="file" v-for="item in files" :key="item.id">
          <i class="el-icon-document icon" @click="download(item)"></i>
        </div>
      </div>
    </div>
    <div class="comments-box">
      <div class="title">评论： {{ total }}</div>
      <div class="comments">
        <div class="item-box" v-for="item in comments" :key="item.id">
          <div class="content-box">
            <div class="id">#{{ item.id }}</div>
            <div class="content">
              <div v-html="item.content"></div>
            </div>
          </div>
          <div class="info-box">
            <div class="author">评论用户: {{ item.author }}</div>
            <div class="createTime">评论时间: {{ item.createTime }}</div>
            <div class="likes">
              点赞量:
              <i class="el-icon-thumb icon" @click="likeComment(item)"
                >&nbsp;{{ item.likes }}</i
              >
            </div>
          </div>
        </div>
      </div>
      <div class="pagination-box">
        <el-pagination
          background
          layout="prev, pager, next"
          :current-page="size"
          :total="total"
          @current-change="sizeChange"
          :pager-count="this.pageSize"
        >
        </el-pagination>
      </div>
      <div class="editor-box" :key="tinymceKey">
        <vue2-tinymce-editor
          :options="options"
          ref="tinymce"
          v-model="content"
        ></vue2-tinymce-editor>
        <el-button class="push-comment" type="primary" @click="pushComment"
          >发布</el-button
        >
      </div>
    </div>
    <loginCom ref="loginCom" />
  </div>
</template>

<script>
import { Vue2TinymceEditor } from "vue2-tinymce-editor";
import loginCom from "../../components/login.vue";

import {
  getBlogDetail,
  getComments,
  getFiles,
  like,
  likeComment,
  pushComment,
} from "@/api";

export default {
  name: "blogDetail",
  data() {
    return {
      blogDetail: {},
      searchText: "",
      total: 0,
      comments: [],
      files: [],
      pageSize: 15,
      size: 1,
      content: "",
      options: {
        language_url: "./tinymce/lang/zh-Hans.js",
        language: "zh-Hans", // 注意大小写
      },
      tinymceKey: "12131",
    };
  },
  components: { Vue2TinymceEditor, loginCom },
  mounted() {
    this.getBlogDetailFn();
    this.getFilesFn();
    this.getCommentsFn();
  },
  methods: {
    async getBlogDetailFn() {
      const res = await getBlogDetail(this.$route.query);
      console.log(17, res);
      this.blogDetail = res.data;
    },
    async getFilesFn() {
      const res = await getFiles(this.$route.query);
      this.files = res.data;
      console.log(17, res);
    },
    async getCommentsFn() {
      const params = {
        ...this.$route.query,
        size: this.size,
        pageSize: this.pageSize,
      };
      const res = await getComments(params);
      this.total = res.data.total;
      this.comments = res.data.list;
      console.log(17, res);
    },
    // 喜欢文章
    like() {
      like({
        id: this.blogDetail.id,
      }).then(() => {
        this.blogDetail.likes++;
      });
    },
    likeComment(item) {
      likeComment({
        id: item.id,
      }).then(() => {
        item.likes++;
      });
    },
    // 搜索
    search() {
      this.$router.push({
        name: "home",
        query: {
          search: this.searchText,
        },
      });
    },
    // 分页
    sizeChange(size) {
      console.log(200, size);
      this.size = size;
      this.getCommentsFn();
    },
    download(item) {
      console.log(167, item);
      window.open(item.download, "_blank");
    },
    async pushComment() {
      if (!this.content.length) {
        this.$message.error("请输入评论内容");
        return;
      }
      if (window.localStorage.getItem("token")) {
        let userInfo = window.localStorage.getItem("userInfo");
        if (typeof userInfo === "string" && userInfo) {
          userInfo = JSON.parse(userInfo);
        }
        const params = {
          userId: userInfo?.userId || "999",
          blogId: this.blogDetail?.id,
          content: this.content,
        };

        const res = await pushComment(params);
        console.log(res);
        this.pageSize = 15;
        this.size = 1;
        this.content = "";
        this.tinymceKey = new Date().getTime();
        this.getCommentsFn();
      } else {
        // 提示登陆
        this.$refs.loginCom.show();
      }
    },
  },
};
</script>

<style lang="less" scoped>
.page-box {
  .blogDetails-box {
    background-color: #ffffff;
    border-radius: 4px;
    padding: 0 24px;
    .name {
      padding-top: 24px;
    }
    .info-box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 24px;
      .info {
        display: flex;
        font-size: 14px;

        flex: 1;
        align-items: center;
        .author {
          margin-right: 10px;
        }
        .createTime {
          margin-right: 10px;
        }
        .likes {
          .icon {
            user-select: none;
            cursor: pointer;
          }
        }
      }
      .search-box {
        width: 300px;
      }
    }
    .content-box {
      padding-bottom: 24px;
    }
    .files-box {
      display: flex;
      .title {
        font-weight: bold;
      }
      .file {
        margin-right: 5px;
        .icon {
          user-select: none;
          cursor: pointer;
          &:hover {
            color: #409eff;
          }
        }
      }
    }
  }
  .comments-box {
    margin-top: 24px;
    background-color: #ffffff;
    border-radius: 4px;
    .title {
      text-align: left;
      font-weight: 600;
      padding-left: 24px;
      padding-top: 24px;
    }
    .comments {
      .item-box {
        margin-bottom: 24px;
        .content-box {
          display: flex;
          .id {
            width: 80px;
          }
          .content {
            flex: 1;
            text-align: left;
          }
        }
        .info-box {
          display: flex;
          padding-left: 24px;
          font-size: 14px;
          .author {
            margin-right: 10px;
          }
          .createTime {
            margin-right: 10px;
          }
          .icon {
            cursor: pointer;
            user-select: none;
          }
        }
      }
    }
    .pagination-box {
      //margin-bottom: 24px;
    }
    .editor-box {
      padding: 24px;
      position: relative;
      z-index: 1;
      .push-comment {
        position: absolute;
        right: 25px;
        top: 25px;
        z-index: 2;
      }
    }
  }
}
</style>