剔除不上线内容

src/apps/AppPartyHistoryEducation/videoDetail.vue

@@ -0,0 +1,180 @@
+<template>
+  <section class="home" v-if="pageShow">
+    <div class="page" v-if="videoList.length">
+      <video :src="videoList[activeIndex].videoUrl" :id="`video${activeIndex+1}`"></video>
+      <p class="video-name">{{videoList[activeIndex].title}}</p>
+      <div class="time">{{info.organizationName}}  {{info.createDate}}</div>
+      <div class="title">
+        <span>选集</span>
+        <p @click="show=true" v-if="videoList.length > 7">查看全部&nbsp;&nbsp;></p>
+      </div>
+      <div class="select page-select">
+        <div class="item" :class="index == activeIndex ? 'active' : ''" v-for="(item, index) in videoList" :key="index" @click="activeIndex=index">{{item.num}}</div>
+      </div>
+      <div class="title">
+        <span>内容简介</span>
+      </div>
+      <div class="content">
+        <u-parse :html="info.content"></u-parse>
+      </div>
+      <u-popup v-model="show" mode="bottom">
+        <div class="title">
+          <span>选集</span>
+        </div>
+        <div class="select pop-select">
+          <div class="item" :class="index == activeIndex ? 'active' : ''" v-for="(item, index) in videoList" :key="index" @click="activeIndex=index;show=false">{{item.num}}</div>
+        </div>
+      </u-popup>
+    </div>
+    <AiEmpty v-else />
+  </section>
+</template>
+<script>
+import { mapState } from "vuex";
+export default {
+  name: "home",
+  computed: {
+    ...mapState(["user", "token"]),
+  },
+  data() {
+    return {
+      show: false,
+      id: '',
+      info: {},
+      videoList: [],
+      activeIndex: 0,
+      pageShow: false
+    };
+  },
+  onLoad(options) {
+    this.id = options.id
+    this.getClassDetail()
+    this.getVideoList()
+  },
+  methods: {
+    change(index) {
+      this.current = index;
+    },
+    getClassDetail() {
+      this.$http.post(`/app/apppartyclassroom/queryDetailById?id=${this.id}`).then((res) => {
+        if (res.code == 0) {
+          if (res.data) {
+            res.data.createDate = res.data.createDate.substring(0, 10)
+            this.info= res.data
+          }
+        }
+      });
+    },
+    getVideoList() {
+      this.$http.post(`/app/apppartyclassroomepisode/list?classroomId=${this.id}&size=10000`).then((res) => {
+        if (res.code == 0) {
+          console.log(res)
+          if (res.data && res.data.records) {
+            this.videoList = res.data.records
+            this.pageShow = true
+          }
+        }
+      });
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+@import "../../common/common.css";
+.home {
+  width: 100%;
+  height: 100%;
+}
+.page {
+  width: 100%;
+  height: 100%;
+  overflow-x: hidden;
+  background-color: #fff;
+  video{
+    width: 100%;
+    height: 416px;
+  }
+  .video-name{
+    padding: 24px 32px 20px;
+    width: 686px;
+    font-size: 34px;
+    font-family: PingFang-SC-Heavy, PingFang-SC;
+    font-weight: 800;
+    color: #333;
+    line-height: 48px;
+  }
+  .time{
+    font-size: 24px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #999;
+    line-height: 30px;
+    margin-bottom: 32px;
+    padding-left: 32px;
+  }
+  .title{
+    width: 100%;
+    height: 80px;
+    line-height: 80px;
+    padding: 0 32px 16px 32px;
+    display: flex;
+    justify-content: space-between;
+    box-sizing: border-box;
+    span{
+      display: inline-block;
+      font-size: 34px;
+      font-family: PingFang-SC-Heavy, PingFang-SC;
+      font-weight: 800;
+      color: #333;
+      line-height: 80px;
+    }
+    p{
+      font-size: 26px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #999;
+      line-height: 80px;
+    }
+  }
+  .select{
+    padding: 0 0 24px 32px;
+    width: 800px;
+    overflow-x: hidden;
+    .item{
+      width: 96px;
+      height: 96px;
+      line-height: 96px;
+      text-align: center;
+      background: #F0F4FB;
+      border-radius: 8px;
+      float: left;
+      font-size: 32px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #333;
+      margin-right: 11px;
+    }
+    .active{
+      color: #DA2D1A;
+    }
+  }
+  .page-select{
+    height: 96px;
+    padding-bottom: 0;
+    overflow-y: hidden;
+  }
+  .content{
+    padding: 0 32px;
+    font-size: 32px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    color: #333;
+    line-height: 48px;
+    word-break: break-all;
+  }
+  .pop-select{
+    .item{
+      margin: 0 22px 22px 0;
+    }
+  }
+}
+</style>