2023年5月5日修改直播页样式

2023-05-05 23:52:51 +08:00 · 2023-05-05 23:52:51 +08:00 · 9ac777f949
parent 678e32dccf
commit 9ac777f949
4 changed files with 185 additions and 56 deletions
--- a/src/views/site/common/video/videojs/util.ts
+++ b/src/views/site/common/video/videojs/util.ts
@ -16,6 +16,7 @@ export function getDefOptions(object) {
    fluid: true,
    liveui: true,
    hotkeys: false,
+    caches: true,
    // playbackRates: [1,2,3,4,5,8,10,20],
    trechIrder: ['flash'],
    // sources: [{
--- a/src/views/site/common/video/videojs/video.vue
+++ b/src/views/site/common/video/videojs/video.vue
@ -5,7 +5,6 @@
    :id="props.videoId"
    playsinline="true"
    class="video-js"
-    controls
    preload="auto"
    poster="//vjs.zencdn.net/v/oceans.png"
  >
@ -37,6 +36,10 @@ const player = ref();
 const emit = defineEmits(['loadEnd']);

 onMounted(() => {
+  init();
+});
+
+function init(){
  let option = {};
  if(props.src){
    option = {
@ -55,10 +58,10 @@ onMounted(() => {
    // });
  });
  player.value = playerMain;
-
-})
+}

 defineExpose({
+  init,
  player
 });

--- a/src/views/site/common/video/videojs/viewPage.vue
+++ b/src/views/site/common/video/videojs/viewPage.vue
@ -1,50 +1,69 @@
 <template>
-  <div class="maxSite" style="width:100%;height: 100%;margin-top: 1rem;" v-if="!isError">
-    <a-row :gutter="[16,16]">
-      <a-col :span="22">
-        <div>
-          <a-card :title="mainVideoCardBoxTitle" class="videoCardMain" style="width:100%">
-            <bVideo ref="mainVideo" videoId="mainVideo" :videoOption="{ autoplay: true }"/>
-          </a-card>
-        </div>
-        <!-- <div style="display: flex;flex-direction: row;flex-wrap: nowrap;overflow-x: scroll;"> -->
-          <!-- <div v-for="(item,index) of tableData" class="videoMax"> -->
-            <!-- <a-card :title="item?.xm" class="videoCardMain"> -->
-              <!-- <bVideo :ref="el=> bVideoRefs[index]=el" :videoId="'other-'+item.id" :src="item.pullUrl" :videoOption="{ autoplay: true, userActions: { click: bVideoClick } }" @load-end="loadEnd"/> -->
-              <!-- <bVideo :ref="el=> bVideoRefs[index]=el" :videoId="'other-'+index" :src="'http://127.0.0.1/live_hls/soures.m3u8'" :videoOption="{ autoplay: true, userActions: { click: bVideoClick } }" @load-end="loadEnd"/> -->
-            <!-- </a-card>
+  <div id="siteMain">
+    <div id="maxSite">
+      <a-layout>
+        <!-- 页头 -->
+        <headerPage/>
+        <!-- 主体部分 -->
+        <a-layout-content>
+          <div style="width:100%;height: 100%;margin-top: 1rem;" v-if="!isError">
+            <a-row :gutter="[16,16]">
+              <a-col :span="19">
+                <div>
+                  <a-card class="videoCardMain" style="width:100%">
+                    <template #title>
+                      <span style="background: #23c6c8;">
+                        {{ kcCardBoxTitle || ' ' }}
+                      </span>
+                      <span style="margin-left: 10px;background: #1c84c6;color: #fff;padding: 0.4rem;border-radius: 6px;" @click="() => tingKeZuJiAddModal.view({ ketangbiaoid: route.query.ktId })">填写评价表</span>
+                    </template>
+                    <div style="padding: 1rem;">
+                      <div >{{ mainVideoCardBoxTitle || '' }}</div>
+                      <bVideo ref="mainVideo" videoId="mainVideo" :videoOption="{ autoplay: true }"/>
+                      <div style="width: 100%;">
+                        <a-textarea style="width: calc(100% - 7rem);" v-model:value="model.notes" placeholder="您可以填写听课笔记"></a-textarea>
+                        <a-button type="primary" style="width: 7rem;height: 100%;" @click="saveSuibi">保存听课笔记</a-button>
+                      </div>
+                    </div>
+                  </a-card>
+                </div>
+              </a-col>
+              <a-col :span="5">
+                <a-row>
+                  <a-col :span="24" v-for="(item,index) of tableData" style="text-align: center;">
+                    <a-card>
+                      <div>
+                        <div style="margin-bottom: .5rem;">
+                          <span class="smallTxt miniButton" :class="item.id == curentPlayerVideo.id?'activte':''" @click="changeLive(item)">
+                            <i class="fa-solid fa-right-left"></i>{{ item?.xm }}
+                          </span>
+                          <span class="smallTxt miniButton miniButtonRight" v-show="!item.isShow" @click="(item.isShow = true,initVideo('other-'+item.id))"><i class="fa-solid fa-film"></i>显示缩略窗口</span>
+                          <span class="smallTxt miniButton miniButtonRight activte" v-show="item.isShow" @click="item.isShow = false"><i class="fa-solid fa-film"></i>隐藏缩略窗口</span>
+                        </div>
+                        <div style="height: 2rem;">&nbsp;</div>
+                        <div v-show="item.isShow" :key="'other-div-'+index">
+                          <bVideo :key="'other-'+index" :ref="el=> bVideoRefs['other-'+item.id] = el" :videoId="'other-'+item.id" :src="item.pullUrl" :videoOption="{ autoplay: true, controls: false }" @load-end="loadEnd"/>
+                        </div>
+                      </div>
+                    </a-card>
+                  </a-col>
+                </a-row>
+              </a-col>
+            </a-row>
          </div>
-        </div> -->
-      </a-col>
-      <a-col :span="2">
-        <a-row>
-          <a-col :span="24">
-            <a-button type="primary" style="width: 100%;margin-bottom: 0.5rem;" @click="() => tingKeZuJiAddModal.view({ ketangbiaoid: route.query.ktId })">评价</a-button>
-          </a-col>
-          <a-col :span="24" v-for="(item,index) of tableData" style="text-align: center;">
-            <a-button type="primary" style="width: 100%;margin-bottom: 0.5rem;" @click="changeLive(item)">{{ item?.xm }}</a-button>
-          </a-col>
-        </a-row>
-      </a-col>
-    </a-row>
-    <a-row :gutter="[16,16]">
-      <a-col :span="22">
-        <a-textarea v-model:value="model.notes"></a-textarea>
-      </a-col>
-      <a-col :span="2">
-        <a-button type="primary" @click="saveSuibi">保存</a-button>
-      </a-col>
-    </a-row>
-  </div>
-  <div v-else style="height: 100%;display: flex;justify-content: center;align-items: center;">
-    <a-empty>
-      <template #description>
-        <span>
-          没有找到直播间
-        </span>
-      </template>
-      <!-- <a-button type="primary" @="">关闭</a-button> -->
-    </a-empty>
+          <div v-else style="height: 100%;display: flex;justify-content: center;align-items: center;">
+            <a-empty>
+              <template #description>
+                <span>
+                  没有找到直播间
+                </span>
+              </template>
+              <!-- <a-button type="primary" @="">关闭</a-button> -->
+            </a-empty>
+          </div>
+        </a-layout-content>
+      </a-layout>
+    </div>
  </div>
  <addModalPage ref="tingKeZuJiAddModal"/>
 </template>
@ -52,6 +71,7 @@

 import { defHttp } from '/@/utils/http/axios';
 import { ref, reactive, onMounted } from 'vue';
+import headerPage from '/@/views/site/common/header.vue';
 import bVideo from '/@/views/site/common/video/videojs/video.vue';
 import addModalPage from '/@/views/site/tingKeZuJi/components/addModal.vue';
 import { nextTick } from 'vue';
@ -59,8 +79,11 @@ import { useRoute } from 'vue-router'
 import { getUserId } from '/@/views/site/utils/index';

 const mainVideo = <any>ref();
+const bVideoRefs = <any>ref([]);

 const tingKeZuJiAddModal = <any>ref({});
+const curentPlayerVideo = <any>ref({});
+const kcCardBoxTitle = <any>ref('');
 const mainVideoCardBoxTitle = <any>ref('');
 const tableData = ref<Recordable>([])
 const isError = ref(false);
@ -74,8 +97,9 @@ const route = useRoute();
 enum Api {
  list = '/jiaoshi/kcZhihuijiaoshi/list',
  querySuibi = '/kc/kcKetangSuibi/list',
-  addSuibi = '/kc/kcKetangSuibi/add'
+  addSuibi = '/kc/kcKetangSuibi/add',
  // editSuibi = '/kc/kcKetangSuibi/edit'
+  getKtangInfo = '/ktgl/kcKetangbiao/queryById'
 }

 /**
@ -85,6 +109,7 @@ enum Api {
 const list = (params) => defHttp.get({ url: Api.list, params });
 const querySuibi = (params) => defHttp.get({ url: Api.querySuibi, params });
 const addSuibi = (params) => defHttp.post({ url: Api.addSuibi, params });
+const getKtangInfo = (params) => defHttp.get({ url: Api.getKtangInfo, params });
 // const editSuibi = (params) => defHttp.post({ url: Api.editSuibi, params });

 onMounted(() => {
@ -94,22 +119,54 @@ onMounted(() => {
    list({ pageSize: -1, sfyx: '0', jsbh: route.query.id }).then(res => {
      let list = (res?.records) ?? [];
      tableData.value = list;
+      tableData.value.forEach(x => x.isShow = true);//默认展开
      nextTick(() => {
        changeLive(tableData.value[0]);
+        tableData.value.forEach(x => x.isShow = false);//关闭
      })
    });
    getSuibi();
+    getKcxx();
  }else{
    isError.value = true;
  }
 });

+/**
+ * 子页加载完成后回调
+ * @param player
+ */
+ function loadEnd(player){
+  nextTick(() => {
+    player.on('play',() => {
+      setTimeout(() => {
+        player.pause();
+      },1000);
+    })
+  })
+}
+
+function initVideo(key){
+  nextTick(() => {
+    let ref = bVideoRefs.value[key];
+    console.log(`🚀 --------------------------------------------------🚀`);
+    console.log(`🚀 ~ file: viewPage.vue:158 ~ nextTick ~ ref:`, key,bVideoRefs,ref);
+    console.log(`🚀 --------------------------------------------------🚀`);
+    ref.init();
+  })
+}
+
 function changeLive(item:any){
  let mainVideo = <any> document.querySelector('#mainVideo');
  mainVideo?.player?.src([{ type:'application/x-mpegURL',src: item.pullUrl }])
+  mainVideoCardBoxTitle.value = item.jsmc+item.xm;
+
+  curentPlayerVideo.value = item;
+
 }

 function getSuibi(){
+  //查询随笔
  let param = {
    userId: getUserId(),
    ketangbiaoId: route.query.ktId,
@ -122,6 +179,18 @@ function getSuibi(){
  });
 }

+function getKcxx(){
+  //查询课程信息
+  //route.query.ktId
+  let param = {
+    id: route.query.ktId
+  }
+  getKtangInfo(param).then(res => {
+    // console.log(res);
+    kcCardBoxTitle.value = res.kcmc;
+  });
+}
+
 function saveSuibi(){
  //addSuibi editSuibi
  // if(model.value.id){
@ -133,6 +202,53 @@ function saveSuibi(){

 </script>
 <style lang="less" scoped>
+#siteMain {
+  // font-size: ;
+  height: 100%;
+  background: #f3f3f4;
+  #maxSite {
+    //最大宽度
+    max-width: 1170px;
+    //居中
+    margin: 0 auto;
+    .rowGutter{
+      margin-top: 1rem;
+      margin-bottom: 1rem;
+    }
+
+    .ant-layout-header {
+      color: #fff;
+      background: #1ab394;
+    }
+    .ant-layout-footer {
+      line-height: 1.5;
+      background: #FFF;
+    }
+    .ant-layout-sider {
+      color: #fff;
+      line-height: 120px;
+      background: #3ba0e9;
+    }
+    .ant-layout-content {
+      min-height: 120px;
+      color: #000;
+      /*line-height: 120px;*/
+      background: #f3f3f4;
+    }
+  }
+}
+/**暗黑模式特殊配色*/
+[data-theme='dark'] #siteMain #maxSite {
+  .ant-layout-header, .ant-layout-footer {
+    background: #6aa0c7;
+  }
+  .ant-layout-content {
+    background: #107bcb;
+  }
+  .ant-layout-sider {
+    background: #3499ec;
+  }
+}
 .videoMax{
  width: 25%;
 }
@ -145,10 +261,19 @@ function saveSuibi(){
 video::-webkit-media-controls-timeline {
    display: none;
 }
-.maxSite {
-  //最大宽度
-  max-width: 1170px;
-  //居中
-  margin: 0 auto;
+.smallTxt {
+  font-size: .8rem;
+}
+.activte {
+  background: #1ab394;
+  color: #FFF;
+}
+.miniButton {
+  float: left;
+  padding: 0.3rem;
+  border-radius: 5px;
+}
+.miniButtonRight {
+  float: right
 }
 </style>
--- a/src/views/site/tingKeZuJi/list.vue
+++ b/src/views/site/tingKeZuJi/list.vue
@ -15,11 +15,11 @@
              <span v-if="item.score" style="color: #337ab7;" @click="viewModal.view(item)">已评分：{{ item.score }}分</span>
              <span v-else style="color: #337ab7;" @click="tingKeZuJiAddModal.view(item)"><FormOutlined/>填写评价</span>
              <span v-if="item.suibiNotes" style="padding-left: .5rem;color: #337ab7;">
-                <a-popover title="随笔">
+                <a-popover title="听课笔记">
                  <template #content>
                    {{ item.suibiNotes }}
                  </template>
-                  查看随笔
+                  查看听课笔记
                </a-popover>
              </span>
            </div>