horzi_rai_wxa/reportPages/reportSecretDetail/reportSecretDetail.vue

<template>
  <view class="container content-secret forbid-copy">
    <block v-if="hasPermission == 1 || !hasPermission">
      <view class="container-top" v-if="detali">
        <view class="content-title">
          {{ detali.Title }}
        </view>
        <view class="content-time">
          <text>{{ detali.Department }}</text>
          <text>{{ detali.PublishDate }}</text>
        </view>
        <view class="content-statement">
          <text>注：请务必阅读</text>
          <text class="statement" @click="isShowStatement = true">免责声明 </text>
        </view>
        <view class="content-audio">
          <view class="audio-img">
            <image
              @click.stop="audioPlayBack"
              class=""
              :src="
                curVoiceId === detali.ArticleId && !curAudioPaused
                  ? 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/suspend_icon.png'
                  : 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/play_icon.png'
              "
            ></image>
          </view>
          <view class="audio-title">
            <text>{{ detali.VideoName }}</text>
            <text>{{ detali.VideoPlaySeconds }}</text>
          </view>
        </view>
        <view v-if="detali.Abstract" class="content-abstract">
          <text>摘要：</text>
          <text>
            {{ detali.Abstract }}
          </text>
        </view>
        <view v-if="detali.ProductDescription && isType == 1" class="content-abstract">
          <text>产品说明：</text>
          <text>
            {{ detali.ProductDescription }}
          </text>
        </view>
        <view v-if="detali.UpdateDescription && isType == 1" class="content-abstract">
          <text>变更说明：</text>
          <text>
            {{ detali.UpdateDescription }}
          </text>
        </view>
        <view v-if="detali.FocusOn && isType == 1" class="content-focuson">
          <text class="focuson">近期重点关注方向：</text>
          <mp-html :content="detali.FocusOn" />
        </view>
      </view>
      <view class="container-text">
        <researchSummary v-if="isType == 1" :dataList="dataList" />
        <reportChoiceness v-if="isType == 2 || isType == 3" :dataListResearch="dataListResearch" />
      </view>
      <statement :show="isShowStatement" />
    </block>
    <view class="noauth-cont" v-else-if="hasPermission == 3 || hasPermission == 4">
      <block v-if="!isShowAlert">
        <image src="https://hzstatic.hzinsights.com/cygx/czbk/noauth.png" class="noauth-ico"></image>
        <block>
          <view class="tip">您暂无权限查看此文章内容，若想查看可以申请开通哦</view>
          <view class="btn-cont" @click="applyAuth"> 立即申请 </view>
        </block>
        <view class="btn-cont back-btn" @click="backIndex"> 返回首页 </view>
      </block>
      <block v-else>
        <text class="moneh-text"> 上传名片并填写简单信息，24小时内我们会为您开通一个月的免费月卡 </text>
        <img src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/month_card.png" class="month_card" alt="" />
        <view class="btn-cont btn-dl" @click="applyAuth"> 立即上传 </view>
        <view class="btn-cont month-back" @click="backIndex"> 返回</view>
      </block>
    </view>
    <freeCharge class="free-charge" :isShowFreeBtn="isShowFree" />
    <audioModule :showAudioPop="false" />
  </view>
</template>

<script>
import statement from "@/reportPages/components/statement.vue";
import researchSummary from "./components/researchSummary.vue";
import reportChoiceness from "./components/reportChoiceness.vue";
import audioModule from "@/components/audioModule/index";
import freeCharge from "@/components/freeCharge";
import { Reports, FreeButton } from "@/config/api.js";
let app = getApp({ allowDefault: true });
export default {
  data() {
    return {
      isShowStatement: false,
      isPlay: false,
      audioContext: "", //音频
      isType: "", //类型
      id: "", //
      detali: "", //详情
      dataList: [], //精选，上周 数组
      dataListResearch: [], //本周数组
      hasPermission: "", //权限判断
      videoUrl: "",
      isShowAlert: false,
    };
  },
  computed: {
    curVoiceId() {
      //当前正在播放的音频id
      return this.$store.state.audioBg.reportId;
    },
    curAudioPaused() {
      //当前音频是否暂停状态
      return this.$store.state.audioBg.paused;
    },
  },
  methods: {
    //音频点击暂停播放
    audioPlayBack() {
      let list = { Url: this.detali.VideoUrl, Name: this.detali.Title, PlaySeconds: this.detali.VideoPlaySeconds };
      if (this.globalBgAudioManager.src) {
        if (this.$store.state.audioBg.reportId == this.detali.ArticleId) {
          if (this.globalBgAudioManager.paused) {
            this.globalBgAudioManager.play();
          } else {
            this.globalBgAudioManager.pause();
          }
        } else {
          this.$store.commit("audioBg/addAudio", { list, reportId: this.detali.ArticleId });
        }
      } else {
        this.$store.commit("audioBg/removeAudio");
        this.$store.commit("audioBg/addAudio", { list, reportId: this.detali.ArticleId });
      }
    },
    //获取数据详情
    async getDetilaiList() {
      const res =
        this.isType == 1
          ? await Reports.reportSelectionDetail({
              ArticleId: this.id,
            })
          : this.isType == 3
          ? await Reports.minutesSummaryDetail({
              ArticleId: this.id,
            })
          : await Reports.researchSummaryDetail({
              ArticleId: this.id,
            });
      if (res.Ret === 200) {
        this.detali = res.Data.Detail;
        this.hasPermission = res.Data.HasPermission;
        this.videoUrl = res.Data.Detail.VideoUrl;
        this.isType == 1 ? (this.dataList = res.Data.List || []) : (this.dataListResearch = res.Data.List || []);
        if (this.globalBgAudioManager.src === this.videoUrl && this.globalBgAudioManager.paused === false) {
          this.isPlay = true;
        }
      }
    },
    /* 无权限申请开通权限 */
    applyAuth() {
      this.hasPermission === 4
        ? uni.navigateTo({
            url: "/pageMy/applyTrial/applyTrial?tryType=Article&detailId=" + this.id,
          })
        : uni.showModal({
            title: "",
            content: "您已经提交过申请了，请耐心等待",
            showCancel: false,
            confirmColor: "#365595",
            success: function (res) {
              uni.navigateBack({
                fail() {
                  uni.switchTab({
                    url: "/pages/index/index",
                  });
                },
              });
            },
          });
    },
    // 返回首頁
    backIndex() {
      uni.switchTab({
        url: "/pages/index/index",
      });
    },
    //获取权限弹窗是否展示免费月卡接口
    async userIsShowAlert() {
      const res = await FreeButton.userIsShowAlert();
      if (res.Ret === 200) {
        this.isShowAlert = res.Data.IsShow;
      }
    },
  },
  components: {
    statement,
    researchSummary,
    reportChoiceness,
    freeCharge,
    audioModule,
  },
  async onLoad(option) {
    this.isType = option.type;
    this.id = Number(option.id) || "";
    uni.setNavigationBarTitle({
      title: this.isType == 1 ? "报告精选" : this.isType == 2 ? "本周研究汇总" : "上周纪要汇总",
    });
    this.userIsShowAlert();
    await this.$store.dispatch("checkHandle");
    if (!this.$store.state.isAuth && !this.$store.state.isBind) this.getDetilaiList();
  },
  /**
   * 用户点击分享
   */
  onShareAppMessage: function (res) {
    return {
      title: this.isHorzMobile ? "好友向您推荐此内容，上传名片享查研观向免费月卡！" : this.detali.Title,
      path: "/reportPages/reportSecretDetail/reportSecretDetail?type=" + this.isType + "&id=" + this.id,
      success: (res) => {},
      fail: (err) => {},
    };
  },
};
</script>

<style lang="scss" scoped>
.content-secret {
  @import "../jurisdiction.scss";
  padding: 10rpx 34rpx 34rpx;

  .container-top {
    font-size: 28rpx;

    .content-title {
      color: #4a4a4a;
      font-size: 34rpx;
      font-weight: bold;
    }

    .content-time {
      margin: 24rpx 0 34rpx 0;
      display: flex;
      justify-content: space-between;
      color: #333333;
    }

    .content-statement {
      display: flex;
      color: #707070;

      .statement {
        margin-left: 10rpx;
        color: #3385ff;
      }
    }

    .content-audio {
      margin: 60rpx 0;
      width: 682rpx;
      align-items: center;
      background: #ffffff;
      box-shadow: 0rpx 0rpx 12rpx rgba(33, 74, 135, 0.16);
      opacity: 1;
      border-radius: 16rpx;
      display: flex;
      padding: 24rpx 21rpx 18rpx;

      .audio-img {
        width: 154rpx;
        height: 154rpx;
        margin-right: 20rpx;

        image {
          width: 154rpx;
          height: 154rpx;
        }
      }

      .audio-title {
        font-size: 28rpx;
        color: #333;

        :first-child {
          width: 450rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          margin-bottom: 30rpx;
          font-size: 32rpx;
        }
      }
    }

    .content-abstract {
      margin-bottom: 30rpx;
      font-size: 32rpx;
      color: #4a4a4a;

      :first-child {
        float: left;
        font-weight: 700;
      }
    }

    .content-focuson {
      font-size: 32rpx !important;
      margin-bottom: 30rpx;
      color: #4a4a4a;

      .focuson {
        font-weight: 700;
      }
    }
  }
  .month_card {
    width: 100%;
    height: 565rpx;
    padding-left: -20rpx;
  }
  .btn-dl {
    background: linear-gradient(253deg, #fcf3e9 0%, #eedec8 100%) !important;
    color: #333 !important;
    margin: 30rpx auto !important;
  }
  .month-back {
    background: #f6f6f6 !important;
    color: #999 !important;
  }
  .moneh-text {
    text-align: center;
    width: 632rpx;
    margin: 0 auto 20rpx;
    color: #999999;
  }
}
</style>