txwx_manage/src/pages/jsd/wdkc/zbkc/live.vue

<template>
  <div
    class="mt-10px shadow-default bg-white pl-35px pr-30px pr-35px h-60px rounded-10px relative flex items-center justify-between"
  >
    <h3 class="nav-title">
      直播课程 -
      <span>{{ course_title }}</span>
    </h3>
    <div class="btnDiv">
      <el-button
        size="large"
        @click="linkTo('jsd_personal_wdkc_zbkc_chapter')"
        class="w-100px"
        >返回
      </el-button>
    </div>
  </div>
  <div
    class="mt-10px shadow-default bg-white-grey pt-25px pl-35px pr-35px pb-35px rounded-10px"
  >
    <div class="flex justify-between">
      <div class="w-800px relative">
        <div class="flex justify-between items-center">
          <h3 class="nav-title flex-1">
            <span>第{{ numberToChinese(chapter_info.order_num) }}课时：</span>
            <span>{{ chapter_info.tzk_ksmc }}</span>
          </h3>
          <div class="flex">
            <div class="relative align-middle share cursor-pointer">
              <span class="align-middle"></span>
              <i
                class="ml-5px text-16px color-blue inline-block align-middle not-italic"
                >分享</i
              >
              <div class="share-box">
                <div class="share-arrow"></div>
                <div class="share-con">
                  <h3 class="text-16px text-center text-black">
                    呼唤小伙伴们前来围观吧
                  </h3>
                  <div class="flex items-center">
                    <div class="pt-15px">
                      <h3 class="t-1">直播间地址</h3>
                      <h4 class="t-2 mt-8px truncate px-5px">
                        {{ shareLink }}
                      </h4>
                      <div class="mt-10px btnDiv">
                        <el-button
                          size="small"
                          class="w-100px"
                          @click="copyLink"
                          >复制链接
                        </el-button>
                      </div>
                    </div>
                    <div class="d-line"></div>
                    <div class="w-100px h-100px">
                      <qrcode-vue
                        :value="chapter_info.pull_m3u8_address"
                        size="100"
                        level="H"
                      />
                    </div>
                    <h3 class="ml-15px text-12px text-black">手机扫码分享</h3>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="mt-20px" id="player-con"></div>
        <ChatBlock :id="tzk_id" />
      	</div>
		<!-- v-if="chapter_info.tzk_zjr_user_id === user.user_id"  -->
            <div class="w-300px mt-46px right-box pt-30px relative">
                 <el-button v-if="chapter_info.tzk_zjr_user_id === user.user_id" type="primary" color="#1259a1" size="large" class="w-100px live-btn" @click="launchLive">启动直播工具
                </el-button>
                <!-- <div v-if="user.user_role_id === '75'" class="right-nav ml-20px">
                    <span>相关文档</span>
                    <i></i>
                </div> -->
            	<homeworkBlock :id="tzk_id" :dxa="chapter_info.tzk_dxa_file" :homework="chapter_info.tzk_ksce_file" :file="chapter_info.tzk_files_json" :zjr="chapter_info.tzk_zjr_user_id" :ks_id="chapter_info.tzk_ksce_tq_id" @filePre="filePre"></homeworkBlock>
            </div>
   		 </div>
  </div>
  <el-dialog v-model="dialogVisible" :title="title" width="80%">
    <!-- <iframe
      style="width: 100%; height: 700px; overflow-y: auto"
      :src="chapter_info.kscs_preview"
    ></iframe> -->
	<filePreview style="width: 100%; height: 700px; overflow-y: auto" :url="previewUrl"></filePreview>
    <template #footer>
      <div class="text-center">
        <el-button size="large" type="primary" @click="dialogVisible = false"
          >确定</el-button
        >
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { user } from "@/store/index";
import filePreview from '@/components/FilePreview/index.vue'
import { ElMessageBox } from "element-plus";
import ChatBlock from "../../../zbkc/chat.vue";
import homeworkBlock from "../../../zbkc/homework.vue";
import { useRoute, useRouter } from "vue-router";
import {
  chapter_detail,
  thumb_add,
  thumb_del,
} from "@/pages/jsd/wdkc/zbkc/api.js";
import QrcodeVue from "qrcode.vue";
import { numberToChinese } from "@/utils/helper.ts";
const router = useRouter();
const route = useRoute();
let course_title = $ref("");
let tz_id = $ref("");
let tzk_id = $ref("");
let shareLink = $ref("");
let chapter_info = $ref({
  tzk_ksmc: "",
  tzk_dzl: "",

  is_like: "",
  tmz_video_url: "",
  tmk_sftjmszx: "",
});
let chapterList = $ref([]);
const navList = [
  {
    id: "1",
    title: "作业&答案",
  },
  {
    id: "2",
    title: "资源",
  },
];
let navSelected = $ref("1");
let res_list = $ref([]);
let homework_list = $ref([]);
let dialogVisible = $ref(false);
let previewUrl = $ref("");
const linkTo = (name) => {
  router.push({ name: name, params: { tz_id: tz_id } });
};

function getChapterDetail() {
  let data = {
    tzk_id: tzk_id,
  };
  chapter_detail(data).then((res) => {
    if (res.code === "1") {
      chapter_info = res.data.one_info;
      course_title = res.data.one_info.kc_info.tz_kcbt;
      // if(res.data.one_info.tmz_zjkj_file !== '') {
      //   let res_obj = {
      //     title:res.data.one_info.tmz_zjkj_file.split(';')[0],
      //     url:res.data.one_info.online_file
      //   }
      //   res_list.push(res_obj);
      // }
      // if(res.data.one_info.tmz_zjsjdajx_file !== '') {
      //   let work_obj = {
      //     title:res.data.one_info.tmz_zjsjdajx_file.split(';')[0],
      //     url:res.data.one_info.online_zy_file
      //   }
      //   homework_list.push(work_obj);
      // }
      var player = new Aliplayer(
        {
          id: "player-con",
          source: res.data.one_info.pull_m3u8_address,
          width: "100%",
          height: "636px",
          autoplay: true,
          cover: res.data.one_info.tzk_img,
          isLive: true,
          rePlay: false,
          playsinline: true,
          preload: true,
          controlBarVisibility: "hover",
          useH5Prism: true,
          skinLayout: [
            {
              name: "bigPlayButton",
              align: "blabs",
              x: 30,
              y: 80,
            },
            {
              name: "H5Loading",
              align: "cc",
            },
            {
              name: "errorDisplay",
              align: "tlabs",
              x: 0,
              y: 0,
            },
            {
              name: "infoDisplay",
            },
            {
              name: "tooltip",
              align: "blabs",
              x: 0,
              y: 56,
            },
            {
              name: "thumbnail",
            },
            {
              name: "controlBar",
              align: "blabs",
              x: 0,
              y: 0,
              children: [
                {
                  name: "progress",
                  align: "blabs",
                  x: 0,
                  y: 44,
                },
                {
                  name: "playButton",
                  align: "tl",
                  x: 15,
                  y: 12,
                },
                {
                  name: "timeDisplay",
                  align: "tl",
                  x: 10,
                  y: 7,
                },
                {
                  name: "fullScreenButton",
                  align: "tr",
                  x: 10,
                  y: 12,
                },
                {
                  name: "setting",
                  align: "tr",
                  x: 15,
                  y: 12,
                },
                {
                  name: "volume",
                  align: "tr",
                  x: 5,
                  y: 10,
                },
              ],
            },
          ],
        },
        function (player) {
          console.log("The player is created");
        }
      );
    }
  });
}

function changeChapter(item) {
  router.replace({
    name: "jsd_personal_wdkc_mszy_detail",
    params: { tmk_id: item.tmk_id, tmz_id: item.tmz_id },
  });
  // ttk_id=item.ttk_id;
  // ttz_id=item.ttz_id;
  // getChapterDetail();
}

function changeNav(item) {
  navSelected = item.id;
}

if (route.params.tz_id) {
  tz_id = route.params.tz_id;
  tzk_id = route.params.tzk_id;
  // shareLink = window.location.href;
  let a = window.location.href.indexOf("#");
  let link = window.location.href.substring(0, a);
  shareLink = `${link}#/home_zbkc/home_zbkc_isLive/${route.params.tz_id}/${route.params.tzk_id}`;
  getChapterDetail();
  // getChapterList();
}
watch(
  () => route.path,
  () => {
    router.go(0);
  }
);

async function copyLink() {
  await navigator.clipboard.writeText(shareLink);
  ElMessage.success("已复制");
}

function showDetail(url) {
  dialogVisible = true;
  previewUrl = url;
}
function launchLive() {
  window.open(chapter_info.push_rtmp_address, "_blank");
}

let title = $ref('资源预览')
function filePre(item) {
	console.log(item, 111111);
	dialogVisible = true;
	previewUrl = getFullUrl(item);
}
</script>

<style lang="scss" scoped>
$color: #1259a1;
.color-blue {
  color: $color;
}

.bg-white-grey {
  background: #fcfeff;
}

.shadow-default {
  box-shadow: 0 10px 24px rgba(161, 153, 168, 0.18);
}

.color-grey {
  color: #999;
}

.border-bottom-1 {
  border-bottom: 1px solid #eee;
}

.nav-title {
  font-size: 16px;
  color: #949494;

  span {
    font-size: 18px;
    color: #050026;
  }
}

.btnDiv {
  .el-button {
    background: $color;
    border-color: $color;
    color: #fff;
  }
}

.search-box {
  width: 300px;
  height: 48px;
  background: #f6f8fa;
  border-radius: 8px;
  padding: 0 10px 0 14px;
  display: flex;
  align-items: center;

  input {
    flex: 1;
    height: 48px;
    border: 0;
    font-size: 16px;
    color: #333;
    outline: none;
    background: #f6f8fa;
  }

  .search-btn {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: $color url("/images/icon-search.png") center no-repeat;
    background-size: 13px 13px;
  }
}

.course-list {
  display: flex;
  flex-wrap: wrap;

  li {
    min-width: 0;
    width: 268px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.11);
    margin-right: 19px;
    margin-bottom: 15px;
    cursor: pointer;

    &:nth-child(4n) {
      margin-right: 0;
    }

    .course-img {
      width: 100%;
      height: 151px;
      border-radius: 10px 10px 0 0;
      overflow: hidden;

      img {
        width: 100%;
      }

      .info-bottom {
        position: absolute;
        left: 0;
        bottom: 0;
        z-index: 30;
        width: 152px;
        height: 27px;
        background: rgba(0, 0, 0, 0.5);
        border-radius: 0 10px 0 0;
        display: flex;

        .icon-view {
          width: 24px;
          height: 16px;
          background: url("/images/icon/view.png") center no-repeat;
          background-size: 24px 16px;
        }

        .icon-thumb {
          width: 17px;
          height: 16px;
          background: url("/images/icon/thumb.png") center no-repeat;
          background-size: 17px 16px;
        }
      }
    }
  }
}

.thumb {
  display: inline-block;
  font-size: 16px;
  color: $color;

  span {
    width: 21px;
    height: 20px;
    display: inline-block;
    background: url("/images/icon-thumb.png") center no-repeat;
    background-size: 21px 20px;

    &.selected {
      background: url("/images/icon-thumb-blue.png") center no-repeat;
      background-size: 21px 20px;
    }
  }
}

.share {
  display: inline-block;
  font-size: 16px;
  color: $color;

  &:hover {
    .share-box {
      display: block;
    }
  }

  span {
    width: 20px;
    height: 20px;
    display: inline-block;
    background: url("/images/icon-share.png") center no-repeat;
    background-size: 20px 20px;
  }

  .share-box {
    display: none;
    position: absolute;
    left: 50%;
    top: 24px;
    z-index: 1000;
    margin-left: -209px;
    width: 418px;
    padding-top: 7px;

    .share-arrow {
      margin: 0 auto;
      width: 17px;
      height: 9px;
      background: url("/images/icon-share-arrow.png") center no-repeat;
      background-size: 17px 9px;
    }

    .share-con {
      margin-top: -2px;
      width: 100%;
      border-top: 4px solid #1259a1;
      height: 198px;
      background: #fff;
      border-radius: 10px;
      padding: 20px 0 0 15px;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);

      .t-1 {
        font-size: 12px;
        color: #00a3ff;
      }

      .t-2 {
        width: 177px;
        height: 34px;
        background: #f7f7f7;
        font-size: 12px;
        color: #000;
        line-height: 34px;
      }

      .d-line {
        margin: 15px 15px 0 15px;
        width: 1px;
        height: 120px;
        background: rgb(232, 232, 232);
      }
    }
  }
}

.right-box {
  height: 460px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 2px 10px 24px rgba(161, 153, 168, 0.18);

  .right-nav {
    position: relative;
    width: 72px;

    span {
      position: relative;
      display: block;
      z-index: 30;
      font-size: 16px;
      color: #222;
      text-align: center;
      line-height: 30px;
    }

    i {
      position: absolute;
      left: 0;
      bottom: 3px;
      width: 100%;
      height: 6px;
      border-radius: 3px;
      background: rgba(108, 93, 211, 0.2);
    }
  }

  .right-chapter-list {
    width: 100%;
    height: 350px;
    overflow-y: auto;

    li {
      margin: 0 auto;
      width: 253px;
      height: 40px;
      background: rgba(18, 89, 161, 0.05);
      border-radius: 16px 16px 0 0;
      padding: 0 20px;
      font-size: 14px;
      color: #050026;
      line-height: 40px;
      cursor: pointer;

      &.selected {
        background: #1259a1;
        color: #fff;
      }

      & + li {
        margin: 20px auto 0;
      }
    }
  }
}

.res-box {
  width: 100%;
  height: 317px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 2px 10px 24px rgba(161, 153, 168, 0.18);

  .res-nav {
    display: flex;
    justify-content: center;
    align-items: center;

    li {
      position: relative;
      padding: 0 5px;
      cursor: pointer;

      &.selected {
        span {
          color: #1259a1;
        }
      }

      & + li {
        margin-left: 60px;
      }

      span {
        position: relative;
        display: block;
        font-size: 16px;
        color: #9fa9b4;
        text-align: center;
      }

      i {
        position: absolute;
        left: 0;
        bottom: 2px;
        width: 100%;
        height: 6px;
        opacity: 0.2;
        background: #1259a1;
        border-radius: 3px;
      }
    }
  }

  .res-list {
    width: 100%;
    padding: 0 20px 0 30px;
    height: 200px;
    overflow-y: auto;

    li {
      display: flex;
      padding: 20px;
      align-items: center;

      & + li {
        border-top: 1px dashed rgba(110, 88, 197, 0.5);
      }

      .file-type {
        min-width: 0;
        width: 26px;
        height: 26px;

        &.word {
          background: url("/images/word.png") center no-repeat;
        }

        &.excel {
          background: url("/images/excel.png") center no-repeat;
        }

        &.ppt {
          background: url("/images/ppt.png") center no-repeat;
        }

        &.pdf {
          background: url("/images/pdf.png") center no-repeat;
        }
      }

      .file-btn {
        width: 58px;
        height: 24px;
        border: 1px solid #1259a1;
        border-radius: 12px;
        font-size: 12px;
        color: #1259a1;
        text-align: center;
      }
    }
  }
}

::v-deep .el-dialog__footer {
  text-align: center;
}
.live-btn {
  position: absolute;
  right: 0;
  top: -55px;
}

:deep(.chat) {
  // background-color: rgba($color:#fff, $alpha: .7);
  position: absolute;
  bottom: 0;
  z-index: 100;
}
</style>