JingTieXueTang.H5/src/views/home/learn/page-learn-content.vue

<template>
  <div class="page-learn-content-box">
    <van-nav-bar title="学习" left-arrow @click-left="onClickLeft" />
    <div v-if="seconds > 0" class="learn-content-rest-time">
      剩余学习时间: {{ getTimeHoursMinuteSecondsFun(seconds) }}
    </div>
    <!-- 内容 -->
    <div class="learn-content-body">
      <div class="learn-content-body-title">
        {{ contentObj.name }}
      </div>
      <div class="learn-content-body-auther">编辑：{{ contentObj.userId }}</div>
      <div class="learn-content-body-description">
        {{ contentObj.contents }}
      </div>
      <div class="learn-content-body-time-row">
        <div class="learn-content-body-time">
          发布日期：
          {{
            formateDateTimeFun(contentObj.createdTime) || contentObj.createdTime
          }}
        </div>
        <div class="learn-content-body-collect">
          <div
            v-show="!isCollected"
            class="learn-content-body-collect-div"
            @click="clickCollection"
          >
            <span>收藏</span>
            <div class="learn-content-body-collect-img">
              <van-image width="100%" height="100%" :src="collectImg" />
            </div>
          </div>
          <div
            v-show="isCollected"
            class="learn-content-body-collect-div"
            @click="clickRemoveCollection"
          >
            <span>取消收藏</span>
            <div class="learn-content-body-collect-img">
              <van-image width="100%" height="100%" :src="collectedImg" />
            </div>
          </div>
        </div>
      </div>
      <div class="learn-content-body-count">
        <div class="learn-content-body-count-btn">
          阅读<span>{{ contentObj.readerCount }}</span>
        </div>
        <!-- <div class="learn-content-body-count-btn">
          点赞<span>{{ contentObj.likesCount }}</span>
        </div> -->
      </div>
    </div>
    <!-- 评论 -->
    <div class="learn-content-comment">
      <div class="learn-content-comment-title">
        <div class="learn-content-comment-title-icon"></div>
        <span>评论</span>
      </div>
      <div class="learn-content-comment-list">
        <div
          class="learn-content-comment-item"
          v-for="(item, index) in commentList"
          :key="index"
        >
          <div class="learn-content-comment-item-userHead">
            <van-image
              width="100%"
              height="100%"
              round
              alt="cover"
              :src="item.headerUrl"
            />
          </div>
          <div class="learn-content-comment-item-userInfo">
            <div class="learn-content-comment-item-name">{{ item.userId }}</div>
            <div class="learn-content-comment-item-content">
              {{ item.content }}
            </div>
            <div class="learn-content-comment-item-createdtime">
              {{ item.createdTime }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 发布评论 -->
    <div class="learn-content-post-comment">
      <input
        v-model="commentValue"
        maxlength="200"
        placeholder="发表你的评论"
      />
      <div class="learn-content-post-comment-btn">
        <div @click="postCommentFun">发布</div>
        <div @click="canclePostCommentFun">取消</div>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  name: "page-learn-content",
  props: {
    materialId: [Number, String]
  },
  components: {},
  data() {
    return {
      contentObj: { contents: "" },
      seconds: 0,
      collectImg: require("@/assets/image/learn/collect.png"),
      collectedImg: require("@/assets/image/learn/collected.png"),
      isCollected: false, // 是否被收藏了
      commentList: [], // 评论列表内容
      commentValue: "" // 即将评论的内容
    };
  },
  computed: {},
  created() {},
  mounted() {
    this.getContent();
  },
  methods: {
    //   查询具体内容
    getContent() {
      let path = {
        materialId: this.materialId
      };
      this.$_http
        .get(this.$pathParams(this.$_API.JTXT_GET_MATERIAL_MATERIALID, path))
        .then(res => {
          console.log("--content--", res.data);
          this.contentObj = res.data;
          // 开始倒计时
          this.seconds = res.data.readTimeInSec;
          this.caculateTime();
          // ！！！需要查询该文章是否已被当前用户收藏！！！
          // TODO...
          // ！！！需要查询该文章是否已被当前用户点赞！！！
          // TODO...
          this.getCommentListFun(); // 查询：评论列表内容
        })
        .catch(() => {
          this.$store.commit("toggleLoading", false);
        });
    },
    // 查询：评论列表内容
    getCommentListFun() {
      // ！！！需要查询评论列表内容！！！
      // TODO...
      this.commentList = [
        {
          headerUrl: "", // 头像路径
          userId: "评论的用户ID1", // 用户名
          content: "这里是评论的内容1", // 评论内容
          createdTime: "2021-04-10" // 评论日期
        },
        {
          headerUrl: "", // 头像路径
          userId: "评论的用户ID2", // 用户名
          content: "这里是评论的内容2", // 评论内容
          createdTime: "2021-04-10" // 评论日期
        },
        {
          headerUrl: "", // 头像路径
          userId: "评论的用户ID3", // 用户名
          content: "这里是评论的内容3", // 评论内容
          createdTime: "2021-04-10" // 评论日期
        }
      ];
    },
    // 操作：返回
    onClickLeft() {
      this.$router.back();
    },
    // 方法：获取阅读倒计时
    caculateTime() {
      var interval = setInterval(() => {
        if (this.seconds > 0) {
          this.seconds--;
        } else {
          clearInterval(interval);
        }
      }, 1000);
    },
    // 操作：收藏
    clickCollection() {
      let path = {
        userName: "testuser-ztdxxDGdNj"
      };
      let params = {
        id: this.materialId
      };
      this.$_http
        .get(this.$pathParams(this.$_API.JTXT_POST_FAVORITE_MATERIALID, path), {
          params
        })
        .then(res => {
          console.log("--收藏--", res.data);
          this.isCollected = true;
        })
        .catch(() => {
          this.$store.commit("toggleLoading", false);
        });
    },
    // 操作：移除收藏
    clickRemoveCollection() {
      let path = {
        userName: "testuser-ztdxxDGdNj"
      };
      let params = {
        id: this.materialId
      };
      this.$_http
        .delete(
          this.$pathParams(
            this.$_API.JTXT_DELETE_REMOVE_FAVORITE_MATERIALID,
            path
          ),
          {
            params
          }
        )
        .then(res => {
          console.log("--取消收藏--", res.data);
          this.isCollected = false;
        })
        .catch(() => {
          this.$store.commit("toggleLoading", false);
        });
    },
    // 操作：发布评论
    postCommentFun() {
      // TODO...
      let inputVal = this.commentValue.replace(/(^\s*)|(\s*$)/g, ""); // 去掉两端空格
      if (!inputVal.length) {
        Toast("未填写有效评论，无法发布");
        return;
      }
      Toast("发布评论成功");
      this.canclePostCommentFun(); // 置空输入框
    },
    // 操作：取消评论
    canclePostCommentFun() {
      this.commentValue = "";
    }
  }
};
</script>

<style lang="scss" scoped>
@import "~@/styles/mixin";
.page-learn-content-box {
  font-size: 0.6rem;
  padding-bottom: 2rem;
  .learn-content-rest-time {
    height: 1.5rem;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-right: 1rem;
    border-bottom: 1px solid #e5e5e5;
    font-size: 0.65rem;
  }
  .learn-content-body {
    padding: 0.5rem 0.5rem;
    .learn-content-body-title {
      font-size: 0.7rem;
      font-weight: bold;
      word-break: break-all;
      word-wrap: break-word;
    }
    .learn-content-body-auther {
      margin-top: 0.5rem;
      color: #666;
    }
    .learn-content-body-description {
      margin-top: 1rem;
      word-break: break-all;
      word-wrap: break-word;
    }
    .learn-content-body-time-row {
      margin-top: 1rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .learn-content-body-time {
        color: #666;
      }
      .learn-content-body-collect {
        .learn-content-body-collect-div {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          .learn-content-body-collect-img {
            margin-left: 0.5rem;
            width: 0.7rem;
            height: 0.7rem;
          }
        }
      }
    }
    .learn-content-body-count {
      width: 100%;
      margin-top: 1rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .learn-content-body-count-btn {
        width: calc(50% - 0.5rem);
        height: 1.5rem;
        padding: 0 0.5rem;
        display: flex;
        align-items: center;
        background-color: #d9d9d9;
        border-radius: 4px;
        span {
          margin-left: 0.5rem;
        }
      }
    }
  }
  .learn-content-comment {
    margin-top: 1rem;
    .learn-content-comment-title {
      padding: 0 0.5rem;
      display: flex;
      align-items: center;
      height: 1.25rem;
      .learn-content-comment-title-icon {
        width: 0.15rem;
        height: 100%;
        background-color: #fe6347;
      }
      span {
        font-size: 0.7rem;
        margin-left: 0.4rem;
      }
    }
    .learn-content-comment-list {
      border-top: 1px solid #e5e5e5;
      margin-top: 0.5rem;
      padding: 0.5rem 0.5rem;
      .learn-content-comment-item {
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin-bottom: 0.5rem;
        .learn-content-comment-item-userHead {
          width: 1.5rem;
          height: 1.5rem;
          border-radius: 100%;
          overflow: hidden;
          border: 1px dashed #e5e5e5;
        }
        .learn-content-comment-item-userInfo {
          width: calc(100% - 2rem);
          padding-bottom: 0.25rem;
          border-bottom: 1px solid #e5e5e5;
          .learn-content-comment-item-name {
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }
          .learn-content-comment-item-content {
            margin-top: 0.25rem;
            word-break: break-all;
            word-wrap: break-word;
          }
          .learn-content-comment-item-createdtime {
            margin-top: 0.25rem;
            color: #666;
          }
        }
      }
    }
  }
  .learn-content-post-comment {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2rem;
    border-top: 1px solid #e5e5e5;
    background-color: #f5f5f5;
    padding: 0.2rem 0.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    input {
      width: calc(100% - 4.5rem);
      height: 100%;
      font-size: 0.7rem;
      padding: 0 0.3rem;
      border-radius: 4px;
      background-color: #d9d9d9;
    }
    .learn-content-post-comment-btn {
      display: flex;
      div {
        margin-left: 0.5rem;
        font-size: 0.7rem;
      }
    }
  }
}
</style>