|
|
@@ -7,11 +7,16 @@ import img_lczs from "~/assets/zbktssys/bar.png";
|
|
|
import img_tx from "~/assets/zbktssys/tx.png";
|
|
|
import { ArrowRight, ArrowLeft } from "@element-plus/icons-vue";
|
|
|
import { ElMessage } from "element-plus";
|
|
|
-import { zbkt_dg } from "./api";
|
|
|
+import QrcodeVue from "qrcode.vue";
|
|
|
+import { zbkt_dg, zbkt_pjList, zbkt_pj } from "./api";
|
|
|
import { ref } from "vue";
|
|
|
import { useRoute } from "vue-router";
|
|
|
+const size = ref("92");
|
|
|
+const activeName = ref("evaluate");
|
|
|
const https = ref(window.GLOBAL_CONFIG.api);
|
|
|
const route = useRoute();
|
|
|
+
|
|
|
+// 详情
|
|
|
let dgData = {
|
|
|
id: route.params.id,
|
|
|
};
|
|
|
@@ -22,6 +27,49 @@ function getDgDetail() {
|
|
|
});
|
|
|
}
|
|
|
getDgDetail();
|
|
|
+
|
|
|
+// 评价列表
|
|
|
+let plMsg = ref([]);
|
|
|
+let pjList = {
|
|
|
+ cq_key_id: route.params.id,
|
|
|
+ cq_key_type: "1",
|
|
|
+ site: "tyyx",
|
|
|
+};
|
|
|
+let dgCode = "";
|
|
|
+function getPjList() {
|
|
|
+ zbkt_pjList(pjList)
|
|
|
+ .then((res) => {
|
|
|
+ plMsg.value = res.data.page_data;
|
|
|
+ dgCode = res.code;
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ console.log(err);
|
|
|
+ });
|
|
|
+}
|
|
|
+getPjList();
|
|
|
+
|
|
|
+let starNum = ref(null);
|
|
|
+let star;
|
|
|
+function starChange() {
|
|
|
+ star = starNum.value;
|
|
|
+}
|
|
|
+// 评价
|
|
|
+let pjData = {
|
|
|
+ site: "tyyx",
|
|
|
+ comment_question: {
|
|
|
+ cq_key_id: route.params.id,
|
|
|
+ cq_key_type: 1,
|
|
|
+ cq_content: "",
|
|
|
+ },
|
|
|
+};
|
|
|
+function pingjia() {
|
|
|
+ Object.assign(pjData.comment_question, {
|
|
|
+ cq_star: star,
|
|
|
+ });
|
|
|
+ zbkt_pj(pjData).then((res) => {
|
|
|
+ getPjList();
|
|
|
+ });
|
|
|
+}
|
|
|
const data_zy = $ref([
|
|
|
{
|
|
|
img: img_lczs1,
|
|
|
@@ -69,11 +117,49 @@ async function copyLink() {
|
|
|
await navigator.clipboard.writeText(shareLink);
|
|
|
ElMessage.success("已复制");
|
|
|
}
|
|
|
+function changeActiveName(val) {
|
|
|
+ activeName.value = val;
|
|
|
+}
|
|
|
+const loading = ref(true);
|
|
|
+const fullscreenLoading = ref(false);
|
|
|
+fullscreenLoading.value = true;
|
|
|
+setTimeout(() => {
|
|
|
+ fullscreenLoading.value = false;
|
|
|
+ if (!dgMsg) {
|
|
|
+ alert("请刷新");
|
|
|
+ }
|
|
|
+}, 3000);
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ console.log(dgMsg.value.status);
|
|
|
+ var player = new Aliplayer(
|
|
|
+ {
|
|
|
+ id: "player-con",
|
|
|
+ source: "//player.alicdn.com/video/aliyunmedia.mp4",
|
|
|
+ width: "100%",
|
|
|
+ height: "500px",
|
|
|
+ autoplay: true,
|
|
|
+ isLive: dgMsg.value.status==1 ? true : false,
|
|
|
+ rePlay: false,
|
|
|
+ playsinline: true,
|
|
|
+ preload: true,
|
|
|
+ controlBarVisibility: "hover",
|
|
|
+ useH5Prism: true,
|
|
|
+ },
|
|
|
+ function (player) {
|
|
|
+ console.log("The player is created");
|
|
|
+ }
|
|
|
+ );
|
|
|
+});
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
<common-header />
|
|
|
- <div class="w-full flex items-center justify-center shadow h-60px bg-hex-fff">
|
|
|
+ <div
|
|
|
+ v-loading.fullscreen.lock="fullscreenLoading"
|
|
|
+ type="primary"
|
|
|
+ class="w-full flex items-center justify-center shadow h-60px bg-hex-fff"
|
|
|
+ >
|
|
|
<div class="w-1400px flex items-center">
|
|
|
<div class="text-lg text-hex-050026">内容</div>
|
|
|
<el-divider direction="vertical" />
|
|
|
@@ -108,7 +194,12 @@ async function copyLink() {
|
|
|
|
|
|
<div class="w-full">
|
|
|
<div class="w-full text-center">呼唤小伙伴们前来围观吧</div>
|
|
|
- <div></div>
|
|
|
+ <div class="flex justify-around m-10">
|
|
|
+ <div class="weibo">微博</div>
|
|
|
+ <div class="qq">qq</div>
|
|
|
+ <div class="qqkj">QQ空间</div>
|
|
|
+ <qrcode-vue :value="shareLink" :size="size" level="H" />
|
|
|
+ </div>
|
|
|
<el-divider></el-divider>
|
|
|
<div class="text-hex-00a3ff mb-2">直播间地址</div>
|
|
|
<div class="flex">
|
|
|
@@ -125,6 +216,7 @@ async function copyLink() {
|
|
|
flex_center
|
|
|
rounded
|
|
|
cursor-pointer
|
|
|
+ copy
|
|
|
"
|
|
|
@click="copyLink"
|
|
|
>
|
|
|
@@ -160,69 +252,96 @@ async function copyLink() {
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <div class="w-full h-800px mb-4 bg-hex-CEE5FB video">
|
|
|
+ <div class="w-full h-800px mb-4 bg-hex-CEE5FB video" id="player-con">
|
|
|
<video class="w-full h-full" src=""></video>
|
|
|
+ <!-- <div class="prism-player" ></div> -->
|
|
|
<div class="slave">助教：{{ dgMsg.slave_teacher }}</div>
|
|
|
<div class="watch">当前观看人数：{{ dgMsg.lll }}人</div>
|
|
|
</div>
|
|
|
|
|
|
- <div class="flex_center">
|
|
|
- <div class="w-176px ">
|
|
|
- <el-tabs v-model="activeTap">
|
|
|
- <el-tab-pane label="" name="pj">
|
|
|
- <template #label>
|
|
|
- <span class="text-base font-bold">评价</span>
|
|
|
- </template>
|
|
|
- </el-tab-pane>
|
|
|
- <el-tab-pane label="作业" name="zye">
|
|
|
- <template #label>
|
|
|
- <span class="text-base font-bold">作业</span>
|
|
|
- </template>
|
|
|
- </el-tab-pane>
|
|
|
- <el-tab-pane label="资源" name="zyuan">
|
|
|
- <template #label>
|
|
|
- <span class="text-base font-bold">资源</span>
|
|
|
- </template>
|
|
|
- </el-tab-pane>
|
|
|
- </el-tabs>
|
|
|
+ <div class="activityContent">
|
|
|
+ <div
|
|
|
+ class="activityItem"
|
|
|
+ @click="changeActiveName('evaluate')"
|
|
|
+ :class="activeName == 'evaluate' ? 'activityItem-active' : ''"
|
|
|
+ >
|
|
|
+ 评价
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ @click="changeActiveName('job')"
|
|
|
+ :class="activeName == 'job' ? 'activityItem-active' : ''"
|
|
|
+ class="activityItem"
|
|
|
+ >
|
|
|
+ 作业
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ @click="changeActiveName('resource')"
|
|
|
+ :class="activeName == 'resource' ? 'activityItem-active' : ''"
|
|
|
+ class="activityItem"
|
|
|
+ >
|
|
|
+ 资源
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="w-full p-8">
|
|
|
- <div v-show="activeTap === 'pj'">
|
|
|
- <el-rate></el-rate>
|
|
|
+ <div class="evaluate" v-show="activeName == 'evaluate'">
|
|
|
+ <el-rate @change="starChange" v-model="starNum"></el-rate>
|
|
|
<div
|
|
|
+ @click="pingjia"
|
|
|
class="
|
|
|
text-sm
|
|
|
bg-hex-0A8AFF
|
|
|
text-white
|
|
|
- w-100px
|
|
|
+ w-111px
|
|
|
h-32px
|
|
|
flex_center
|
|
|
rounded-full
|
|
|
cursor-pointer
|
|
|
+ pingjia
|
|
|
"
|
|
|
>
|
|
|
评价
|
|
|
</div>
|
|
|
|
|
|
- <div class="my-1">
|
|
|
+ <div class="my-1" v-for="p in plMsg" :key="p">
|
|
|
<div class="flex items-end">
|
|
|
- <div class="text-sm font-bold text-hex-171721 mr-4">余枫</div>
|
|
|
- <div class="text-xs text-hex-8083A3">2021-01-23 11:15</div>
|
|
|
+ <div class="text-sm font-bold text-hex-171721 mr-4">
|
|
|
+ {{ p.user_realname }}
|
|
|
+ </div>
|
|
|
+ <div class="text-xs text-hex-8083A3">
|
|
|
+ {{ p.create_dateline_format }}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <el-rate :model-value="5" disabled class="my-2"></el-rate>
|
|
|
+ <el-rate :model-value="p.cq_star" disabled class="my-2"></el-rate>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="job" v-show="activeName == 'job'">
|
|
|
+ <div v-for="j in dgMsg.kzkt_kczy" :key="j" class="homework">
|
|
|
+ <div class="job-nav">{{ j.kkz_name }}</div>
|
|
|
+ <!-- <div
|
|
|
+ class="
|
|
|
+ text-xs
|
|
|
+ border border-hex-00a3ff
|
|
|
+ text-hex-00a3ff
|
|
|
+ w-60px
|
|
|
+ h-24px
|
|
|
+ rounded-full
|
|
|
+ cursor-pointer
|
|
|
+ down-load
|
|
|
+ "
|
|
|
+ >
|
|
|
+ 下达
|
|
|
+ </div> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div v-show="activeTap === 'zye'"></div>
|
|
|
- <div v-show="activeTap === 'zyuan'">
|
|
|
- <div class="my-1">
|
|
|
+ <div class="resource" v-show="activeName == 'resource'">
|
|
|
+ <div v-for="z in dgMsg.kzkt_kcwj" :key="z" class="my-1 ziyuan">
|
|
|
<div class="flex items-end">
|
|
|
- <div class="text-sm font-bold text-hex-171721 mr-4">余枫</div>
|
|
|
- <div class="text-xs text-hex-8083A3">2021-01-23 11:15 上传</div>
|
|
|
+ <div class="text-sm font-bold text-hex-171721 mr-4">{{z.kkw_author}}</div>
|
|
|
+ <div class="text-xs text-hex-8083A3">{{z.kkw_datetime}} 上传</div>
|
|
|
</div>
|
|
|
<div class="flex justify-between items-center my-2">
|
|
|
- <div class="text-hex-171721 text-sm">数学体系</div>
|
|
|
+ <div class="text-hex-171721 text-sm">{{z.kkw_name}}</div>
|
|
|
<div
|
|
|
class="
|
|
|
text-xs
|
|
|
@@ -233,6 +352,7 @@ async function copyLink() {
|
|
|
flex_center
|
|
|
rounded-full
|
|
|
cursor-pointer
|
|
|
+ down-load
|
|
|
"
|
|
|
>
|
|
|
下载
|
|
|
@@ -273,7 +393,11 @@ async function copyLink() {
|
|
|
</template>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-.focus{
|
|
|
+.copy {
|
|
|
+ text-align: center;
|
|
|
+ line-height: 40px;
|
|
|
+}
|
|
|
+.focus {
|
|
|
line-height: 40px;
|
|
|
text-align: center;
|
|
|
}
|
|
|
@@ -303,8 +427,77 @@ async function copyLink() {
|
|
|
text-align: center;
|
|
|
font-size: 14px;
|
|
|
color: #fff;
|
|
|
- background: rgba(106,115,144,.5);
|
|
|
+ background: rgba(106, 115, 144, 0.5);
|
|
|
border-radius: 10px 0px 0px 10px;
|
|
|
}
|
|
|
}
|
|
|
+.activityContent {
|
|
|
+ background: #ffffff;
|
|
|
+ margin: auto;
|
|
|
+ padding: 10px 8px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ .activityItem {
|
|
|
+ margin: 0 20px;
|
|
|
+ text-align: center;
|
|
|
+ background: #fff;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #a09dbb;
|
|
|
+ border-radius: 10px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .activityItem-active {
|
|
|
+ color: #222;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .activityItem-active::after {
|
|
|
+ position: absolute;
|
|
|
+ content: "";
|
|
|
+ height: 10px;
|
|
|
+ width: 125%;
|
|
|
+ border-radius: 10px;
|
|
|
+ background-color: #6c5dd3;
|
|
|
+ opacity: 0.4;
|
|
|
+ bottom: 0;
|
|
|
+ left: -5px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.evaluate {
|
|
|
+ .pingjia {
|
|
|
+ text-align: center;
|
|
|
+ line-height: 32px;
|
|
|
+ background: linear-gradient(90deg, #00a3ff 1%, #57c38f);
|
|
|
+ margin: 15px 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+.resource {
|
|
|
+ .ziyuan {
|
|
|
+ height: 70px;
|
|
|
+ border-bottom: 1px dashed #b8ade3;
|
|
|
+ padding: 0 20px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.down-load {
|
|
|
+ text-align: center;
|
|
|
+ line-height: 24px;
|
|
|
+ vertical-align: middle;
|
|
|
+}
|
|
|
+.homework {
|
|
|
+ display: flex;
|
|
|
+ height: 55px;
|
|
|
+ line-height: 55px;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 0 20px;
|
|
|
+ border-bottom: 1px dashed #e4e6e8;
|
|
|
+ .down-load {
|
|
|
+ margin-top: 15px;
|
|
|
+ }
|
|
|
+ .job-nav {
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: PingFangSC, PingFangSC-Semibold;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #000000;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
ZhaoJing