integrated_traffic_uniapp/pages/application/onlinexxks/strengthen_video_study.vue

<template>
  <view>
<!--    <cu-custom bgColor="bg-gradual-blueness" :isBack="true">-->
<!--      <block slot="backText">返回</block>-->
<!--      <block slot="content">加强学习</block>-->
<!--    </cu-custom>-->
    <view class="container">
      <view class="fixed">
        <view v-if="videoSrc">
          <video
              id="video"
              :src="videoSrc"
              :poster="videoPoster"
              autoplay
              controls
              style="width: 100vw"
          />
        </view>
      </view>
      <scroll-view scroll-y :style="{ height: `calc(100vh - 450upx)` }">
        <view class="video_container">
          <view
              v-for="(item, index) in videoList"
              :key="index"
              class="video_list_main_wrap"
              @click="fnGetPlayInfo(item.VIDEOCOURSEWARE_ID)"
          >
            <view class="video_list_main_wrap_tit">
              {{ item.COURSEWARENAME }}
            </view>
            <view class="video_list_main_wrap_info">
              <text class="ml5">{{ secondsCount(item.VIDEOTIME) }}</text>
              <image src="/static/study/play.png"/>
            </view>
          </view>
        </view>
      </scroll-view>
      <view class="footer">
        <button class="cu-btn bg-blue" @click="fnNavigationExamination">
          效果评估考试
        </button>
      </view>
    </view>
  </view>
</template>

<script>
import {basePath} from "@/common/tool";

export default {
  data() {
    return {
      CLASS_ID: '',
      POST_ID: '',
      STUDENT_ID: '',
      videoSrc: '',
      videoPoster: '',
      videoList: [],
      info: {}
    }
  },
  onLoad(options) {
    this.CLASS_ID = options.CLASS_ID;
    this.POST_ID = options.POST_ID;
    this.STUDENT_ID = options.STUDENT_ID;
    this.fnGetData()
  },
  methods: {
    fnGetData() {
      uni.showLoading({
        title: '请稍候'
      })
      uni.request({
        url: basePath + '/app/stagestudentrelation/listStrengthenVideo',
        method: 'POST',
        dataType: 'json',
        header: {
          'Content-type': 'application/x-www-form-urlencoded'
        },
        data: {
          CLASS_ID: this.CLASS_ID,
          STUDENT_ID: this.STUDENT_ID,
          TYPE: "APP",
        },
        success: (res) => {
          uni.hideLoading(); //结束加载中动画
          var resData = res.data;
          if ("success" == resData.result) {
            this.info = resData.relation;
            this.videoList = resData.videoList;
          }
        }
      });
    },
    // 视频秒数转换时分秒
    secondsCount(second) {
      if (!second) return 0;
      const h = parseInt((second / 60 / 60) % 24, 10);
      const m = parseInt((second / 60) % 60, 10);
      const s = parseInt(second % 60, 10);
      return (
          (h < 10 ? "0" + h : h) +
          ":" +
          (m < 10 ? "0" + m : m) +
          ":" +
          (s < 10 ? "0" + s : s)
      );
    },
    fnGetPlayInfo(VIDEOCOURSEWARE_ID) {
      uni.showLoading({
        title: '请稍候'
      })
      uni.request({
        url: basePath + '/app/audioOrVideo/getPlatPlayInfo',
        method: 'POST',
        dataType: 'json',
        header: {
          'Content-type': 'application/x-www-form-urlencoded'
        },
        data: {
          VIDEOCOURSEWARE_ID,
        },
        success: (res) => {
          uni.hideLoading(); //结束加载中动画
          var resData = res.data;
          if ("success" == resData.result) {
            if (resData.PLAYURL) {
              this.videoSrc = resData.PLAYURL;
              this.videoPoster = resData.COVERURL;
            } else {
              uni.showToast({
                title: resData.msg,
                icon: 'none'
              })
            }
          }
        }
      })
    },
    fnNavigationExamination() {
      uni.navigateTo({
        url: '/pages/application/onlinexxks/course_exam?STAGEEXAMPAPERINPUT_ID=' + this.info.STRENGTHEN_STAGEEXAMPAPER_INPUT_ID + '&STAGEEXAMPAPER_ID=' + this.info.STRENGTHEN_STAGEEXAMPAPER_INPUT_ID + '&CLASS_ID=' + this.CLASS_ID + '&POST_ID=' + this.POST_ID + '&STUDENT_ID=' + this.STUDENT_ID + '&entrySite=strengththen'
      })
    }
  },
}
</script>

<style scoped lang="scss">
.video_container {
  width: 100%;
  background: #ffffff;
  padding: 40upx;
  margin-top: 20upx;
  box-sizing: border-box;

  .video_list_title {
    display: flex;
    align-items: center;
    margin-left: -10upx;
  }

  .video_list_main_wrap {
    width: 100%;
    background: #fafafa;
    padding: 20upx;
    border-radius: 10upx;
    font-size: 26upx;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    color: #666666;
    margin-bottom: 20upx;

    .video_list_main_wrap_info {
      display: flex;

      image {
        width: 28upx;
        height: 28upx;
      }
    }
  }
}

.footer {
  display: flex;
  position: fixed;
  bottom: 0;
  justify-content: space-between;
  width: 100%;
  left: 0;
  padding: 20upx;
  box-sizing: border-box;
  background: #fff;

  button {
    width: 100%;
    border-radius: 10upx;
  }
}

.video_bg, #video {
  width: 100%;
  height: 450upx;
}

.ml5 {
  margin-left: 10upx;
  margin-right: 10upx;
}
</style>