gaoyixia-pc/src/views/information/information-details.vue

<template>
  <div class="wrap">
    <div class="title">
      <DetailTitle
        :info="info"
        :show_desc="false"
        :series_info="datum_info"
        @handleSwitch="handleSwitch"
        @toVideoDetail="toVideoDetail"
        @toSupplierDetail="toSupplierDetail"
        @toImageTextDetail="toImageTextDetail"
        @toCollection="toCollection"
      />
    </div>
    <div class="content" v-if="!showVip">
      <div class="view" @click="handleView">点击查看</div>
      <div class="download" v-if="info.is_down" @click="handleDownload">
        下载
      </div>
    </div>
    <div class="vip-content" v-if="showVip">
      <div class="tips">您当前身份处于非VIP普通用户 请开通VIP进行观看</div>
      <div class="btn" @click="$router.push('/vip')">立即开通</div>
    </div>
    <div class="comment">
      <Comment ref="comment" />
    </div>
    <div class="interactive">
      <DetailInteractive
        :info="info"
        :dict="{
          is_like: 'is_praise',
          like_num: 'praise_num',
        }"
        @handleComment="handleComment"
        @handleLike="handleLike"
        @handleCollect="handleCollect"
        @handleForward="handleForward"
        @handleReport="handleReport"
        @handleNotice="handleNotice"
      />
    </div>
    <CommentAll
      v-model="visible"
      :info="info"
      :option="comment_option"
      :reportType="8"
    />
    <Report :type="4" :info="info" v-model="reportVisible" />
    <FileViewer :info="info" v-model="viewerVisible" />
  </div>
</template>

<script>
import { DatumService, GeneralService } from "@/common/service";
import { downloadLocalFile } from "@/common/request";
import { INFORMATION_PREVIEWABLE_FILE_TYPE, OSS_URL } from "@/common/config";
import { getFileType } from "@/common/util";
import DetailTitle from "@/components/module/detail-title.vue";
import DetailInteractive from "@/components/module/detail-interactive.vue";
import Comment from "@/components/module/comment.vue";
import CommentAll from "@/components/module/comment-all.vue";
import Report from "@/components/module/report.vue";
import FileViewer from "@/components/module/file-viewer.vue";
export default {
  components: {
    DetailTitle,
    DetailInteractive,
    CommentAll,
    Comment,
    Report,
    FileViewer,
  },
  data() {
    return {
      datum_info: {},
      info: {},
      visible: false,
      reportVisible: false,
      previewable: false, // 是否可预览
      viewerVisible: false,
    };
  },
  computed: {
    comment_option() {
      return {
        // 列表api
        listApi: (params) =>
          DatumService.getDatumCommentList({
            ...params,
            url_id: this.info.id,
          }),
        // 点赞
        likeApi: (comment) =>
          DatumService.commentTags({
            comment_id: comment.id,
          }),
        // 发布评论
        postApi: (params) =>
          DatumService.datumComment({
            ...params,
            datum_id: this.datum_info.id,
            url_id: this.info.id,
          }),
        // 回复评论
        postReplyApi: (params, comment) =>
          DatumService.secondCommend({
            ...params,
            id: comment.id,
          }),
        reportType: 10,
        // 删除评论
        delApi: (params) => DatumService.delComment({ id: params.id }),
      };
    },
    showVip() {
      let info_vip = !!this.info.is_vip;
      let user_vip = !!this.$store.state.userInfo.level_id;
      let is_release = !!this.info.is_release;
      return info_vip && !user_vip && !is_release;
    },
  },
  created() {
    const option = this.$route.query;
    this.datum_info.id = option.id;
    this.info.id = option.url_id;
    if (option.id) this.getSeriesDetail();
    if (option.url_id) this.getDetail();
    if (localStorage.getItem("user_info"))
      this.$store.dispatch("getMarkNum", "information");
  },
  mounted() {
    // this.handleRead();
  },
  activated() {
    window.scrollTo(0, 0);
  },
  methods: {
    // 获取系列资料详情
    getSeriesDetail() {
      DatumService.getDatumDetail({ id: this.datum_info.id }).then(
        ({ data }) => {
          this.datum_info = data.detail;
        }
      );
    },
    // 获取资料详情
    getDetail() {
      DatumService.getDatumItemInfo({ url_id: this.info.id }).then(
        ({ data }) => {
          data.detail["fileType"] = getFileType(data.detail.url);
          this.previewable = INFORMATION_PREVIEWABLE_FILE_TYPE.includes(
            data.detail["fileType"]
          );
          this.info = data.detail;
          this.$nextTick((_) => {
            this.$refs["comment"].init(this.comment_option);
          });
        }
      );
    },
    // 订阅
    handleSwitch() {
      GeneralService.switchSet({ id: this.datum_info.id, type: 4 }).then(
        ({ data, msg }) => {
          this.datum_info.follow_switch = data.status;
          this.$message.success(msg);
        }
      );
    },
    // 跳转合集
    toCollection() {
      this.$router.push({
        path: "/information-collection",
        query: {
          id: this.datum_info.id,
        },
      });
    },
    // 跳转视频
    toVideoDetail() {
      this.$router.open({
        path: "/video-details",
        query: {
          id: this.info.video_id,
          videoArrId: this.info.video_item,
        },
      });
    },
    // 跳转图文
    toImageTextDetail() {
      if (this.info.article_item) {
        this.$router.open({
          path: "/image-text-details",
          query: {
            item_id: this.info.article_item,
            id: this.info.article_id,
          },
        });
      } else {
        this.$router.open({
          path: "/image-text-collection",
          query: {
            id: this.info.article_id,
          },
        });
      }
    },
    // 跳转产品
    toSupplierDetail() {
      this.$router.open({
        path: "/supplier-details",
        query: {
          id: this.info.goods_id,
        },
      });
    },
    // 评论
    handleComment() {
      this.visible = true;
    },
    // 点赞
    handleLike() {
      DatumService.datumTags({
        datum_id: this.datum_info.id,
        url_id: this.info.id,
      }).then(({ data, msg }) => {
        this.info.is_praise = data.tags;
        this.info.praise_num = data.tags
          ? Number(this.info.praise_num) + 1
          : Number(this.info.praise_num) - 1;
        this.$message.success(msg);
      });
    },
    // 收藏
    handleCollect() {
      DatumService.datumCollect({
        datum_id: this.datum_info.id,
        url_id: this.info.id,
      }).then(({ data, msg }) => {
        this.info.is_collect = data.status;
        this.$message.success(msg);
      });
    },
    // 分享---统计分享量
    handleForward() {
      DatumService.datumTransmit({
        datum_id: this.datum_info.id,
        url_id: this.info.id,
      }).then(
        (_) => (this.info.transmit_num = Number(this.info.transmit_num) + 1)
      );
    },
    // 举报
    handleReport() {
      this.reportVisible = true;
    },
    // 通知
    handleNotice() {
      GeneralService.switchSet({ id: this.info.id, type: 9 }).then(
        ({ data, msg }) => {
          this.info.switch_open = data.status;
          this.$message.success(msg);
        }
      );
    },
    // 预览
    handleView() {
      if (!this.previewable) return (this.viewerVisible = true);
      let params = {
        datum_info: this.datum_info,
        previewable: this.previewable,
        info: this.info,
      };
      sessionStorage.setItem("params", JSON.stringify(params));
      this.$router.push({
        path: "/information-details-content",
      });
    },
    // 下载---统计下载量
    handleDownload() {
      let url = this.info.url;
      if (this.info.is_down && this.info.is_encrypt) {
        url = OSS_URL + this.urlInfo.pdf_clear;
      }
      DatumService.datumDownload({
        datum_id: this.info.datum_id,
        url_id: this.info.id,
      }).then(() => {
        downloadLocalFile(url, this.info.title);
      });
    },
    // 统计阅读量
    handleRead() {
      DatumService.datumRead({ url_id: this.info.id });
    },
  },
};
</script>

<style lang="scss" scoped>
.wrap {
  width: 70%;
  margin: 0 auto;
  min-width: 800px;
  padding-top: 20px;
  position: relative;
  .title {
    padding: 30px;
    background-color: white;
  }
  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: white;
    justify-content: center;
    height: 400px;
    width: 100%;
    div {
      width: 160px;
      height: 45px;
      box-shadow: 0px 2px 0px 0px rgba(5, 145, 255, 0.1);
      border-radius: 6px;
      font-size: 14px;
      font-weight: 400;
      text-align: center;
      line-height: 45px;
      cursor: pointer;
    }
    .view {
      background: #1677ff;
      border: 1px solid transparent;
      color: #ffffff;
    }
    .download {
      margin-top: 20px;
      border: 1px solid #2a63f3;
      color: #2a63f3;
    }
  }
  .vip-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: white;
    justify-content: center;
    height: 400px;
    width: 100%;
    .tips {
      width: 220px;
      font-size: 16px;
      font-weight: 400;
      color: #333333;
      text-align: center;
      margin-bottom: 20px;
    }
    .btn {
      width: 160px;
      height: 45px;
      background: #ebd793;
      border-radius: 10px;
      text-align: center;
      line-height: 45px;
      font-size: 16px;
      font-weight: 400;
      color: #553d0e;
      cursor: pointer;
    }
  }
  .comment {
    margin-top: 30px;
    padding: 10px 30px 30px 30px;
    background-color: white;
  }
  .interactive {
    position: fixed;
    top: 100px;
    right: calc(15% - 100px);
  }
  @media (max-width: 69.0625rem) {
    .interactive {
      position: absolute;
      top: 20px;
      left: 860px;
    }
  }
}
</style>