horzi_rai_wxa/reportPages/roadEssence/roadEssence.vue

<template>
  <view class="container content-road forbid-copy">
    <block v-if="haveAuth === 1">
      <view class="container-top">
        <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 v-if="isPlay" @click="audiouspend" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/suspend_icon.png"></image>
            <image v-else @click="audioPlay" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/play_icon.png" mode=""></image>
          </view>
          <view class="audio-title">
            <text>{{ detali.VideoName }}</text>
            <text>{{ detali.VideoPlaySeconds }}</text>
          </view>
        </view>
        <view class="content-abstract">
          <text>摘要：</text>
          <text>
            {{ detali.Abstract }}
          </text>
        </view>
        <view class="content-boby">
          <mp-html :content="detali.Body" />
        </view>
      </view>
      <view class="content-link" v-if="detali.ReportLink" @click="goDetali"> 查看深度报告 </view>
      <statement :show="isShowStatement" />
    </block>
    <view class="noauth-cont" v-else-if="haveAuth === 3 || haveAuth === 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>
</template>

<script>
import { Reports, User, FreeButton } from "@/config/api.js";
import statement from "@/reportPages/components/statement.vue";
import freeCharge from "@/components/freeCharge";
let app = getApp({ allowDefault: true });
export default {
  data() {
    return {
      id: "", //
      detali: "", //详情
      audioContext: "", //音频
      isPlay: false, //mp3 播放的图片
      isShowStatement: false, //免责声明隐现
      haveAuth: "", //权限判断
      videoUrl: "",
      isShowAlert: false,
    };
  },
  methods: {
    async getDetail() {
      const res = await Reports.roadshowEssence({
        ArticleId: this.id,
      });
      if (res.Ret === 200) {
        this.detali = res.Data.Detail;
        this.haveAuth = res.Data.HasPermission;
        this.videoUrl = res.Data.Detail.VideoUrl;
        if (app.globalData.bgAudioManager.src === this.videoUrl && app.globalData.bgAudioManager.paused === false) {
          this.isPlay = true;
        }
      }
    },
    goDetali() {
      uni.navigateTo({
        url: "/pageMy/reportDetail/reportDetail?id=" + this.detali.ReportLink,
      });
    },
    /* 无权限申请开通权限 */
    applyAuth() {
      this.haveAuth === 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",
      });
    },
    audioPlay(e) {
      if (this.videoUrl === app.globalData.bgAudioManager.src) {
        app.globalData.bgAudioManager.play();
      } else {
        app.globalData.bgAudioManager.title = this.detali.VideoName;
        app.globalData.bgAudioManager.src = this.videoUrl;
      }
      this.isPlay = true;
    },
    audiouspend() {
      this.isPlay = false;
      app.globalData.bgAudioManager.pause();
    },
    //获取权限弹窗是否展示免费月卡接口
    async userIsShowAlert() {
      const res = await FreeButton.userIsShowAlert();
      if (res.Ret === 200) {
        this.isShowAlert = res.Data.IsShow;
      }
    },
  },
  components: {
    statement,
    freeCharge,
  },
  onLoad(option) {
    this.id = Number(option.id) || "";
    app.globalData.bgAudioManager.onEnded((res) => {
      this.isPlay = false;
    });
    app.globalData.bgAudioManager.onPause((res) => {
      this.isPlay = false;
    });
    app.globalData.bgAudioManager.onPlay((res) => {
      this.isPlay = true;
    });
    app.globalData.bgAudioManager.onStop((res) => {
      this.isPlay = false;
    });
    this.userIsShowAlert();
  },
  async onShow() {
    await this.$store.dispatch("checkHandle");
    if (!this.$store.state.isAuth && !this.$store.state.isBind) {
      //已授权已绑定
      this.getDetail();
      this.audioContext = uni.createInnerAudioContext();
      //音频自然播放结束事件
      this.audioContext.onEnded((res) => {
        this.isPlay = true;
      });
    }
  },
  /**
   * 用户点击分享
   */
  onShareAppMessage: function (res) {
    return {
      title: this.isHorzMobile ? "好友向您推荐此内容，上传名片享查研观向免费试用月卡！" : this.detali.Title,
      url: "reportPages/roadEssence/roadEssence?id=" + this.id,
      success: (res) => {},
      fail: (err) => {},
    };
  },
};
</script>

<style lang="scss" scoped>
.content-road {
  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-boby {
      font-size: 32rpx;

      image,
      img {
        width: 100%;
      }
    }
  }
  .content-link {
    width: 368rpx;
    height: 80rpx;
    border: 2rpx solid #2c83ff;
    opacity: 1;
    border-radius: 4rpx;
    line-height: 76rpx;
    text-align: center;
    color: #2c83ff;
    font-size: 32rpx;
    box-sizing: border-box;
    margin: 100rpx auto;
  }
  .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;
  }
  @import "../jurisdiction.scss";
}
</style>