horzi_rai_wxa/reportPages/trainVideoPages/trainVideoPages.vue

<template>
  <view class="container train-video-pages">
    <view class="title-box">
      <view class="item">弘则策略首席 马冬凡 主讲</view>
    </view>
    <view class="ul-content">
      <view v-for="item in videoList" :key="item.SourceId" class="global_card_content container-roadshow-item">
        <view class="global_title item-title" @click="goDetails">
          {{ item.Title }}
        </view>
        <view class="content-box" @click.stop="handelPlay(item)">
          <image :src="item.BackgroundImg"></image>
        </view>
        <text class="time">{{ item.PublishTime }}</text>
      </view>
    </view>
    <videoModule :showVideoPop.sync="showVideoPop" :curVideoId="curVideoId" :videoPopList="videoPopList" />
  </view>
</template>

<script>
import { Reports } from "@/config/api.js";

import videoModule from "@/components/videoModule/index";
export default {
  data() {
    return {
      showVideoPop: false,
      showAudioPop: false, //播放音频
      videoPopList: {},
      videoList: [],
    };
  },
  components: {
    videoModule,
    // modalDialog,
  },
  methods: {
    //播放的权限判断
    async handelPlay(item) {
      await this.$store.dispatch("showLoginModal");
      if (item.AuthInfo.HasPermission == 1) {
        this.handelVideoPlay(item);
      }
      //    else {
      //     this.hasPermission = item.AuthInfo.HasPermission;
      //     this.jurisdictionList.ActivityId = item.Id;
      //     this.jurisdictionList.isAudioVideo = item.Type;
      //     if (this.hasPermission == 2) {
      //       this.jurisdictionList.SellerMobile = item.AuthInfo.SellerMobile;
      //       this.jurisdictionList.SellerName = item.AuthInfo.SellerName;
      //       this.jurisdictionList.PopupMsg = item.AuthInfo.PopupMsg;
      //       this.isShowhasPermission = true;
      //     } else if (this.hasPermission == 3 || this.hasPermission == 4 || this.hasPermission == 5) {
      //       this.jurisdictionList.PopupMsg = item.AuthInfo.PopupMsg;
      //       this.applyForIsShow = true;
      //     }
      //   }
    },
    //视频的播放事件
    handelVideoPlay(item) {
      if (this.$store.state.videoPlay.playVideoId != item.Id) {
        this.$store.commit("videoPlay/palyTimeUpdate", 0);
        this.$store.commit("videoPlay/playVideo", item.Id);
      }
      this.globalBgAudioManager.stop();
      this.videoPopList = item;
      this.showVideoPop = true;
    },
    async getVideoList(item) {
      const res = await Reports.microRoadshowTrainingList();
      if (res.Ret === 200) {
        this.videoList = res.Data.List;
      }
    },
  },
  onLoad() {
    this.getVideoList();
  },
};
</script>

<style scoped lang="scss">
.train-video-pages {
  background-color: #f3f5f9;
  word-break: break-all;
  .title-box {
    display: flex;
    align-items: center;
    width: 100%;
    height: 96rpx;
    border-top: 0.5rpx solid #dcdfe6;
    border-bottom: 0.5rpx solid #dcdfe6;
    padding-left: 25rpx;
    background-color: #fff;
    font-size: 28rpx;
    color: #333;
    .item {
      padding: 10rpx 25rpx;
      border-radius: 100rpx;
      background-color: #f8f8fa;
    }
  }
  .ul-content {
    display: flex;
    flex-wrap: wrap;
    padding: 30rpx 25rpx;
    justify-content: space-between;
    .container-roadshow-item {
      background-color: #fff;
      width: 340rpx;
      height: 440rpx;
      margin-bottom: 20rpx;
      .content-box {
        flex: 1;
        height: 228rpx;
        background-color: #f0f1f3;
        margin: 20rpx 0;
        image {
          width: 100%;
          height: 100%;
        }
      }
    }
    .item-title {
      height: 105rpx;
    }
    .time {
      font-size: 24rpx;
      color: #666;
      text-align: right;
    }
  }
}
</style>