ArticleComment.vue

/* eslint-disable vue/valid-template-root */
<template>
  <div class="articleCommentsClass">
    <div class="showComment">
      <div class="contentClass">
        <template v-if="contentRes.length">
          <div v-for="(item, key) in contentRes" :key="key">
            <h5>{{ item.user }}({{ item.date }}):</h5>
            <p>{{ item.content }}</p>
          </div>
        </template>
        <template v-else>
          <h5>{{ noneMsg }}</h5>
        </template>
      </div>
    </div>
    <div class="postComment">
      <div style="position: relative; display: flex; width: 100%">
        <el-input
          type="text"
          :rows="2"
          placeholder="填写评论(20字以内)"
          v-model="articleCommit"
          maxlength="20"
        >
        </el-input>
        <el-button
          type="primary"
          style="margin-left: 5px"
          @click="increment(userId, articleId, articleCommit)"
          >提交评论</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "ArticleComment",
  props: ["articleId"],
  // props定义则data()无需定义
  data() {
    return {
      noneMsg: "还没人评论>_<",
      msg: "评论区",
      baseurl: "/api/",
      // baseurl: "http://yongma16.xyz/comment/",
      userImg: "",
      username: "匿名",
      contentRes: [],
      userId: "匿名",
      articleCommit: "",
      childArticleId: "",
    };
  },
  watch: {
    articleId: function (newData) {
      this.childArticleId = newData;
      return newData
    },
  },
  mounted() {
    this.childArticleId && this.getComments(this.childArticleId);
  },
  methods: {
    dateToString(dateValue) {
      let timeCreate = new Date(dateValue);
      let year = timeCreate.getFullYear(),
        month = timeCreate.getMonth() + 1,
        day = timeCreate.getDate(),
        hour =
          timeCreate.getHours() > 9
            ? timeCreate.getHours()
            : "0" + timeCreate.getHours(),
        minute =
          timeCreate.getMinutes() > 9
            ? timeCreate.getMinutes()
            : "0" + timeCreate.getMinutes(),
        second =
          timeCreate.getSeconds() > 9
            ? timeCreate.getSeconds()
            : "0" + timeCreate.getSeconds();
      return (
        year +
        "年" +
        month +
        "月" +
        day +
        "日" +
        " " +
        hour +
        ":" +
        minute +
        ":" +
        second
      );
    },
    getComments(articleId) {
      let that = this;
      let params = {
        articleId: articleId ? articleId : that.articleId,
      };
      axios
        .post(that.baseurl + "comment/get/", params)
        .then((res) => {
          try {
            let resData = res.data;
            that.contentRes = resData.content;
            that.contentRes.map((item) => {
              item.date = that.dateToString(item.date);
            });
          } catch (e) {
            throw Error(e);
          }
        })
        .catch((r) => {
          throw Error(r);
        });
    },
    increment(userId, articleId, content) {
      let that = this;
      if (!localStorage.getItem("yma16siteUserInfo")) {
        that.$router
          .push({
            path: "/login",
          })
          .catch((error) => {
            throw Error(error);
          });
      } else {
        if (content === "" || !content) {
          that.$notify({
            title: "评论失败！",
            message: "评论内容不能为空",
            position: "top-left",
          });
          return false;
        }
        const userInfo = JSON.parse(localStorage.getItem("yma16siteUserInfo"));
        that.userId = userInfo.username;
        let params = {
          username: that.userId,
          articleId: articleId,
          content: content,
        };
        axios
          .post(that.baseurl + "comment/post/", params)
          .then((res) => {
            that.articleCommit = null;
            try {
              let resData = res.data;
              that.contentRes = resData.content;
              that.contentRes.map((item) => {
                item.date = that.dateToString(item.date);
              });
            } catch (e) {
              throw Error(e);
            }
          })
          .catch((r) => {
            that.$router
              .push({
                path: "/login",
              })
              .catch((error) => {
                throw Error(error);
              });
            throw Error(r);
          });
      }
    },
  },
};
</script>

<style scoped>
.articleCommentsClass {
  position: relative;
  widows: 100%;
  height: 100%;
  /* background: burlywood; */
  margin-bottom: 10px;
}

.showComment {
  position: relative;
  width: 100%;
  height: auto;
  background: rgba(187, 168, 164, 0.8);
}

.contentClass {
  position: relative;
  width: 100%;
  margin: 10px;
  padding: 5px;
}

.postComment {
  position: relative;
  width: 100%;
  height: auto;
  line-height: 10px;
  display: flex;
  width: 100%;
  margin-top: 10px;
}

.loginUsernameClass {
  display: block;
  width: 20px;
  /*内联对象需加*/
  word-break: keep-all;
  /* 不换行 */
  white-space: nowrap;
  /* 不换行 */
  overflow: hidden;
  /* 内容超出宽度时隐藏超出部分的内容 */
  text-overflow: ellipsis;
}
</style>