horzi_rai_wxa/reportPages/reportSecretDetail/reportSecretDetail.vue

<template>
  <view class="container content-secret forbid-copy">
    <block v-if="hasPermission == 1">
      <view class="container-top" v-if="detali">
        <view class="report-content-title">
          {{ detali.Title }}
        </view>
        <view class="content-time">
          <text>{{ detali.Department }}</text>
          <text>{{ detali.PublishDate }}</text>
        </view>
        <view class="content-statement">
          <view style="display: flex">
            <text>注：请务必阅读</text>
            <text class="statement" @click="isShowStatement = true">免责声明 </text>
          </view>
          <text class="statement" @click="goSecret">往期汇总>> </text>
        </view>
        <view class="audio-card">
          <view class="card-title text_oneLine">
            {{ detali.VideoName }}
          </view>
          <view class="slider-paly">
            <view style="flex: 1; padding-top: 20rpx">
              <slider
                activeColor="#3385FF"
                :max="detali.VideoPlaySeconds"
                :value="curTime"
                @touchstart="touchstartHandler"
                @change="handleAudioSliderChange($event)"
                @changing="handleAudioSliderChangeing($event)"
                block-size="16"
                class="slider"
              />
              <view class="card-time">
                <text class="time">{{ curTime | formatVoiceTime }}</text>
                <text class="time">{{ detali.VideoPlaySeconds | formatVoiceTime }}</text>
              </view>
            </view>
            <view class="is-paly-card">
              <image
                @click.stop="audioPlayBack"
                :src="
                  curVoiceId === detali.ArticleId && !curAudioPaused
                    ? 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/play_icon.gif'
                    : 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/pause_icon.png'
                "
              ></image>
            </view>
          </view>
          <view class="fast-reverse">
            <image
              @click="speedReverseHandler('reverse')"
              class="speed-img"
              src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/fastReverse_icon.png"
            ></image>
            <block v-for="(item, index) in timesTheSpeed" :key="item.value">
              <view class="speed-button" v-if="isTimes == item.value" @click="isTimesHandler(index)">
                {{ item.name }}
              </view>
            </block>
            <image
              @click="speedReverseHandler('speed')"
              class="speed-img"
              src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/speed_icon.png"
            ></image>
          </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="strFontSize(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" />
    <view v-show="false">
      <audioModule :showAudioPop="showAudioPop" />
    </view>
  </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,
      timesTheSpeed: [
        { name: "倍速", value: 1 },
        { name: "1.25倍", value: 1.25 },
        { name: "1.5倍", value: 1.5 },
        { name: "2倍", value: 2 },
      ],
      showAudioBox: false,
      curTime: 0,
      titleTxT: "",
    };
  },
  filters: {
    formatVoiceTime(e) {
      let m = parseInt(e / 60);
      let s = parseInt(e % 60);
      return `${m > 9 ? m : "0" + m}:${s > 9 ? s : "0" + s}`;
    },
  },
  computed: {
    curVoiceId() {
      //当前正在播放的音频id
      return this.$store.state.audioBg.reportId;
    },
    curAudioPaused() {
      //当前音频是否暂停状态
      return this.$store.state.audioBg.paused;
    },
    //几倍的播放数度
    isTimes() {
      let isMultiple = this.curVoiceId === this.detali.ArticleId ? this.$store.state.audioBg.multiple : 1;
      return isMultiple;
    },
    showAudioPop() {
      return this.$store.state.audioBg.show;
    },
  },
  watch: {
    "$store.state.audioBg.curTime": {
      handler(newVal) {
        this.curTime = this.curVoiceId === this.detali.ArticleId ? newVal : 0;
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    //获取数据详情
    async getDetilaiList() {
      const res =
        this.isType == 1
          ? await Reports.reportSelectionDetail({
              ArticleId: this.id,
              PageRouter: this.$store.state.pageRouterReport,
            })
          : this.isType == 3
          ? await Reports.minutesSummaryDetail({
              ArticleId: this.id,
              PageRouter: this.$store.state.pageRouterReport,
            })
          : await Reports.researchSummaryDetail({
              ArticleId: this.id,
              PageRouter: this.$store.state.pageRouterReport,
            });
      if (res.Ret === 200) {
        this.hasPermission = res.Data.HasPermission;
        this.isType == 1 ? (this.dataList = res.Data.List || []) : (this.dataListResearch = res.Data.List || []);
        if (res.Data.Detail) {
          let arr = res.Data.Detail.VideoPlaySeconds.split(":");
          res.Data.Detail.VideoPlaySeconds = arr[0] * 60 + (arr[1] - 0);
          this.detali = res.Data.Detail;
          this.videoUrl = res.Data.Detail.VideoUrl;
          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;
      }
    },
    //音频点击暂停播放
    audioPlayBack() {
      let list = { Url: this.detali.VideoUrl, Name: this.detali.Title, PlaySeconds: this.detali.VideoPlaySeconds };
      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/updateAudioTime", 0);
        this.$store.commit("audioBg/addAudio", { list, reportId: this.detali.ArticleId });
      }
    },
    //拖动进度条
    handleAudioSliderChangeing(e) {
      this.curTime = e.detail.value;
    },
    //拖动进度条
    handleAudioSliderChange(e) {
      const value = e.detail.value;
      this.globalBgAudioManager.seek(value);
      setTimeout(() => {
        this.$store.commit("audioBg/setSlide", false);
      }, 300);
    },
    touchstartHandler() {
      this.$store.commit("audioBg/setSlide", true);
    },
    //倍速播放
    isTimesHandler(i) {
      let list = { Url: this.detali.VideoUrl, Name: this.detali.Title, PlaySeconds: this.detali.VideoPlaySeconds };
      let index = i == 3 ? 0 : i + 1;
      this.$store.commit("audioBg/setMultiple", this.timesTheSpeed[index].value);
      this.globalBgAudioManager.playbackRate = this.isTimes;
      this.globalBgAudioManager.startTime = this.curTime;
      if (this.$store.state.audioBg.reportId != this.detali.ArticleId) {
        this.$store.commit("audioBg/addAudio", { list, reportId: this.detali.ArticleId });
        this.globalBgAudioManager.play();
      } else {
        if (this.globalBgAudioManager.paused) {
          this.globalBgAudioManager.play();
        }
      }
    },
    //快进 快退
    speedReverseHandler(type) {
      let isTime = type == "reverse" ? this.curTime - 15 : this.curTime + 15;
      isTime = isTime <= 0 ? 0 : isTime >= this.audioTime ? this.audioTime - 1 : isTime;
      this.globalBgAudioManager.seek(isTime);
    },
    // 跳转往期汇总
    goSecret() {
      uni.navigateTo({
        url: "/reportPages/secretDetails/secretDetails?type=" + this.isType,
      });
    },
  },
  components: {
    statement,
    researchSummary,
    reportChoiceness,
    freeCharge,
    audioModule,
  },
  async onLoad(option) {
    this.isType = option.type;
    this.id = Number(option.id) || "";
    this.titleTxT = this.isType == 1 ? "报告精选" : this.isType == 2 ? "本周研究汇总" : "上周纪要汇总";
    uni.setNavigationBarTitle({
      title: this.titleTxT,
    });
    await this.$store.dispatch("checkHandle");
    if (!this.$store.state.isAuth && !this.$store.state.isBind) this.getDetilaiList();

    // 免费送月卡
    // this.userIsShowAlert();
  },

  onShow() {
    this.$store.commit("setRouterReport", this.titleTxT);
    this.showAudioBox = true;
  },
  onHide() {
    this.showAudioBox = false;
  },
  /**
   * 用户点击分享
   */
  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-time {
      margin: 24rpx 0 34rpx 0;
      display: flex;
      justify-content: space-between;
      color: #333333;
    }
    .content-statement {
      display: flex;
      color: #707070;
      justify-content: space-between;
      align-items: center;
      .statement {
        margin-left: 10rpx;
        color: #3385ff;
      }
    }
    .audio-card {
      width: 100%;
      height: 282rpx;
      background: #f9f9f9;
      border-radius: 16rpx;
      margin: 30rpx auto;
      padding: 30rpx;
      .slider {
        width: 100%;
        margin: 0;
      }
      .slider-paly {
        display: flex;
        height: 80rpx;
        align-items: center;
        padding-left: 20rpx;
      }
      .card-title {
        font-size: 28rpx;
        padding: 0 40rpx;
        text-align: center;
        margin-bottom: 35rpx;
      }
      .card-time {
        display: flex;
        justify-content: space-between;
        color: #999999;
        font-size: 20rpx;
      }
      .is-paly-card {
        width: 70rpx;
        height: 70rpx;
        flex-shrink: 0;
        margin-left: 30rpx;
        image {
          width: 70rpx;
          height: 70rpx;
        }
      }
      .fast-reverse {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 30rpx;
        .speed-button {
          width: 96rpx;
          height: 47rpx;
          background: #eaeaea;
          border-radius: 8rpx;
          text-align: center;
          line-height: 47rpx;
          margin: 0 70rpx;
        }
        .speed-img {
          width: 50rpx;
          height: 50rpx;
        }
      }
    }
    .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>