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: "http://yongma16.xyz/comment/",
      userImg: "",
      username: "匿名",
      contentRes: [],
      userId: "匿名",
      articleCommit: "",
    };
  },
  mounted() {
    this.getComments();
  },
  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,
      };
      console.log("获取评论id", params.articleId);
      axios
        .post(that.baseurl + "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) {
            console.log(e);
          }
          console.log("评论获取成功", res);
        })
        .catch((r) => {
          console.log("评论获取失败", r);
        });
    },
    increment(userId, articleId, content) {
      if (content === "" || !content) {
        this.$notify({
          title: "评论失败！",
          message: "评论内容不能为空",
          position: "top-left",
        });
        return false;
      }
      let that = this;
      if (!localStorage.getItem("yma16siteUserInfoName")) {
        that.$router
          .push({
            path: "/login",
          })
          .catch((error) => {
            console.log(error);
          });
      } else {
        that.userId = localStorage.getItem("yma16siteUserInfoName");
        console.log("提交评论", articleId, that.userId, content);
        let params = {
          username: that.userId,
          articleId: articleId,
          content: content,
        };
        axios
          .post(that.baseurl + "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) {
              console.log(e);
            }
          })
          .catch((r) => {
            console.log("评论提交失败", 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>