gaoyixia-pc/src/views/image-text/image-text-details.vue

<template>
  <div class="wrap">
    <div class="title">
      <DetailTitle
        :info="info"
        :series_info="article_info"
        @handleSwitch="handleSwitch"
        @toVideoDetail="toVideoDetail"
        @toSupplierDetail="toSupplierDetail"
        @toInformationDetail="toInformationDetail"
        @toCollection="toCollection"
      />
    </div>
    <div class="content" v-if="info.content && !showVip">
      <ImageTextDetailContent :content="info.content" />
    </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"
        @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="5" :info="info" v-model="reportVisible" />
  </div>
</template>

<script>
import { ArticleService, GeneralService } from "@/common/service";
import DetailTitle from "@/components/module/detail-title.vue";
import DetailInteractive from "@/components/module/detail-interactive.vue";
import ImageTextDetailContent from "@/components/image-text/image-text-detail-content new.vue";
import Comment from "@/components/module/comment.vue";
import CommentAll from "@/components/module/comment-all.vue";
import Report from "@/components/module/report.vue";
export default {
  components: {
    DetailTitle,
    DetailInteractive,
    ImageTextDetailContent,
    CommentAll,
    Comment,
    Report,
  },
  data() {
    return {
      article_info: {},
      info: {},
      visible: false,
      reportVisible: false,
    };
  },
  computed: {
    comment_option() {
      return {
        // 列表api
        listApi: (params) =>
          ArticleService.getArticleCommentList({
            ...params,
            article_id: this.article_info.id, // 图文id
            item_id: this.info.id, // item_id
          }),
        // 点赞
        likeApi: (comment) =>
          ArticleService.commentTags({
            comment_id: comment.id,
          }),
        // 发布评论
        postApi: (params) =>
          ArticleService.articleComment({
            ...params,
            article_id: this.article_info.id,
            item_id: this.info.id,
          }),
        // 回复评论
        postReplyApi: (params, comment) =>
          ArticleService.secondCommend({
            ...params,
            id: comment.id,
          }),
        reportType: 8,
        // 删除评论
        delApi: (params) => ArticleService.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.article_info.id = option.id;
    this.info.id = option.item_id;
    if (option.id) this.getSeriesDetail();
    if (option.item_id) this.getDetail();
    if (localStorage.getItem("user_info"))
      this.$store.dispatch("getMarkNum", "imageText");
  },
  mounted() {
    // this.handleRead();
  },
  activated() {
    window.scrollTo(0, 0);
  },
  methods: {
    // 获取系列图文详情
    getSeriesDetail() {
      ArticleService.getArticleDetail({ id: this.article_info.id }).then(
        ({ data }) => {
          this.article_info = data.detail;
        }
      );
    },
    // 获取图文详情
    getDetail() {
      ArticleService.getArticleItemInfo({ item_id: this.info.id }).then(
        ({ data }) => {
          this.info = data.detail;
          this.$nextTick((_) => {
            this.$refs["comment"].init(this.comment_option);
          });
        }
      );
    },
    // 订阅
    handleSwitch() {
      GeneralService.switchSet({ id: this.article_info.id, type: 3 }).then(
        ({ data, msg }) => {
          this.article_info.follow_switch = data.status;
          this.$message.success(msg);
        }
      );
    },
    // 跳转合集
    toCollection() {
      this.$router.push({
        path: "/image-text-collection",
        query: {
          id: this.article_info.id,
        },
      });
    },
    // 跳转视频
    toVideoDetail() {
      this.$router.open({
        path: "/video-details",
        query: {
          id: this.info.video_id,
          videoArrId: this.info.video_item,
        },
      });
    },
    // 跳转资料
    toInformationDetail() {
      if (this.info.datum_item) {
        this.$router.open({
          path: "/information-details",
          query: {
            url_id: this.info.datum_item,
            id: this.info.datum_id,
          },
        });
      } else {
        this.$router.open({
          path: "/information-collection",
          query: {
            id: this.info.datum_id,
          },
        });
      }
    },
    // 跳转产品
    toSupplierDetail() {
      this.$router.open({
        path: "/supplier-details",
        query: {
          id: this.info.goods_id,
        },
      });
    },
    // 评论
    handleComment() {
      this.visible = true;
    },
    // 点赞
    handleLike() {
      ArticleService.articleTags({ item_id: this.info.id }).then(
        ({ data, msg }) => {
          this.info.is_like = data.tags;
          this.info.like_num = data.tags
            ? Number(this.info.like_num) + 1
            : Number(this.info.like_num) - 1;
          this.$message.success(msg);
        }
      );
    },
    // 收藏
    handleCollect() {
      ArticleService.articleCollect({
        article_id: this.article_info.id,
        item_id: this.info.id,
      }).then(({ data, msg }) => {
        this.info.is_collect = data.status;
        this.$message.success(msg);
      });
    },
    // 分享---统计分享量
    handleForward() {
      ArticleService.articleTransmit({ item_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: 8 }).then(
        ({ data, msg }) => {
          this.info.switch_open = data.status;
          this.$message.success(msg);
        }
      );
    },
    // 统计阅读量
    handleRead() {
      ArticleService.articleRead({ item_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 {
    margin-top: 30px;
    width: calc(100% - 120px);
    padding: 30px 60px;
    background-color: white;
  }
  .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>