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="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 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>
      <view class="bottom-icon">
        <view class="item" @click="leavingMessage">
          <image class="icon-img" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/leaving_message.png"></image>
          <view>留言</view>
        </view>
        <view class="item" @click="collectHandle">
          <image
            class="icon-img"
            :src="isCollection ? 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/collect_act.png' : 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/collect_ico.png'"
          ></image>
          <view>收藏</view>
        </view>
      </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 v-show="false">
      <audioModule :showAudioPop="showAudioPop" />
    </view>
  </view>
</template>

<script>
import { Reports, Report, User, FreeButton } from "@/config/api.js";
import statement from "@/reportPages/components/statement.vue";
import freeCharge from "@/components/freeCharge";
import audioModule from "@/components/audioModule/index";
let app = getApp({ allowDefault: true });
export default {
  data() {
    return {
      id: "", //
      detali: "", //详情
      audioContext: "", //音频
      isPlay: false, //mp3 播放的图片
      isShowStatement: false, //免责声明隐现
      haveAuth: "", //权限判断
      videoUrl: "",
      isShowAlert: false,
      isCollection: 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,
    };
  },
  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;
    },
  },
  filters: {
    formatVoiceTime(e) {
      let m = parseInt(e / 60);
      let s = parseInt(e % 60);
      return `${m > 9 ? m : "0" + m}:${s > 9 ? s : "0" + s}`;
    },
  },
  watch: {
    "$store.state.audioBg.curTime": {
      handler(newVal) {
        this.curTime = this.curVoiceId === this.detali.ArticleId ? newVal : 0;
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    // 留言
    leavingMessage() {
      uni.navigateTo({
        url: "/activityPages/generationAsk/generationAsk?id=" + this.id + "&type=文章",
      });
    },
    /* 收藏 */
    collectHandle() {
      Report.collectRpt({
        ArticleId: this.id,
        PageRouter: this.$store.state.pageRouterReport,
      }).then((res) => {
        this.isCollection = !this.isCollection;
        this.$util.toast(res.Msg);
      });
    },
    // 获取报告详情
    async getDetail() {
      const res = await Reports.roadshowEssence({
        ArticleId: this.id,
      });
      if (res.Ret === 200) {
        this.haveAuth = res.Data.HasPermission;
        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.isCollection = this.detali.IsCollect;
          this.videoUrl = res.Data.Detail.VideoUrl;
          if (this.globalBgAudioManager.src === this.videoUrl && this.globalBgAudioManager.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",
      });
    },
    //音频点击暂停播放
    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 });
      }
    },
    audiouspend() {
      this.isPlay = false;
      this.globalBgAudioManager.pause();
    },
    //获取权限弹窗是否展示免费月卡接口
    async userIsShowAlert() {
      const res = await FreeButton.userIsShowAlert();
      if (res.Ret === 200) {
        this.isShowAlert = res.Data.IsShow;
      }
    },
    // //拖动进度条
    // handleAudioSliderChange(e) {
    //   const value = e.detail.value;
    //   this.globalBgAudioManager.seek(value);
    // },
    // handleAudioSliderChangeing(e) {
    //   this.curTime = e.detail.value;
    // },
    //拖动进度条
    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.detali.VideoPlaySeconds ? this.detali.VideoPlaySeconds - 1 : isTime;
      this.globalBgAudioManager.seek(isTime);
    },
  },
  components: {
    statement,
    freeCharge,
    audioModule,
  },
  async onLoad(option) {
    this.id = Number(option.id) || "";

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

    await this.$store.dispatch("checkHandle");
    if (!this.$store.state.isAuth && !this.$store.state.isBind) {
      //已授权已绑定
      this.getDetail();
    }
  },
  onShow() {
    this.$store.commit("setRouterReport", "路演精华");
    this.showAudioBox = true;
  },
  onHide() {
    this.showAudioBox = false;
  },
  /**
   * 用户点击分享
   */
  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 134rpx 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;
  }
  .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;
      }
    }
  }
  .bottom-icon {
    position: fixed;
    display: flex;
    width: 100%;
    height: constant(100rpx + safe-area-inset-bottom);
    height: env(100rpx + safe-area-inset-bottom);
    justify-content: space-around;
    z-index: 99;
    bottom: 0;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    left: 0;
    font-size: 20rpx;
    color: #999;
    background-color: #fff;
    border-top: 1px solid #dddddd;
    padding-top: 20rpx;
    .item {
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
      .icon-img {
        width: 44rpx;
        height: 44rpx;
        margin-bottom: 4rpx;
      }
    }
  }
  @import "../jurisdiction.scss";
}
</style>