提交

src/pages/zbkt/wlzb/api.js

@@ -15,10 +15,17 @@ export const zbkt_recommend = (data={}) =>{
     })
 }
 
-// 直播课程下详情
+// 直播课程详情
 export const zbkt_detail = (data={}) =>{
     return request({
         url:'/kzkt/zbkc/detail',
         data,
     })
+}
+// 直播大纲详情
+export const zbkt_dg = (data={}) =>{
+    return request({
+        url:'/kzkt/zbkc_kcdg/detail',
+        data,
+    })
 }

src/pages/zbkt/wlzb/content.vue

@@ -8,10 +8,11 @@ import img_tx from '~/assets/zbktssys/tx.png';
 import img_bg1 from '~/assets/zbkt/bg1.png';
 
 import { Histogram as IconHistogram } from '@element-plus/icons-vue';
-import { useRoute } from "vue-router";
+import { useRoute,useRouter } from "vue-router";
 import { zbkt_detail } from "./api";
 
 const route = useRoute();
+const router = useRouter();
 let detailData = {
   id: route.params.id,
   site:'tyyx'
@@ -25,6 +26,14 @@ function getDetail(){
 }
 getDetail();
 
+function linkDetail(i){
+  router.push({
+    name:'wlzb_detail',
+    params:{
+      id:i.id
+    }
+  })
+}
 const data_kczjdg = $ref([
   { img: img_lczs1, title: '01 课时 形成问题', bfl: 100, desc: '领略生肖传奇，品味传统文化！', nj: '四年级', xk: '美术', ls: '尚老师', tx: img_tx, zt: '1' },
   { img: img_lczs2, title: '02 课时 行程问题', bfl: 100, desc: '领略生肖传奇，品味传统文化！', nj: '四年级', xk: '美术', ls: '尚老师', tx: img_tx, zt: '' },
@@ -67,6 +76,7 @@ const data_kcap = $ref([
     <div class="w-1400px flex flex-col">
 
       <div class="w-full mb-4 relative">
+        <!-- detailMsg.img -->
         <img :src="img_bg1" alt="">
         <div class="absolute w-full h-full top-0 flex flex-col justify-center p-16 text-white">
           <div class="text-2xl mb-4">{{detailMsg.title}}</div>
@@ -88,17 +98,17 @@ const data_kcap = $ref([
         <div class="flex-auto shadow p-4">
           <div class="font-bold mb-8">课程章节大纲</div>
           <ul>
-            <li v-for="i in data_kczjdg"
+            <li v-for="i in detailMsg.kcdg"
               class="border_top cursor-pointer flex w-full justify-between px-4 py-2 my-4 bg-opacity-5 bg-hex-00A3FF"
               :class="i.zt && 'bg-opacity-50 text-white'">
               <div>{{  i.title  }}</div>
               <div @click="linkDetail(i)"
                 class="h-26px rounded-14px px-2 flex items-center mr-4 border"
-                :class="i.zt ? 'border-hex-ff0f00 text-hex-ff0f00' : 'border-hex-949494 text-hex-949494'">
-                <el-icon :color="i.zt ? '#FF0000' : '#949494'">
+                :class="i.status==1 ? 'border-hex-ff0f00 text-hex-ff0f00' : 'border-hex-949494 text-hex-949494'">
+                <el-icon :color="i.status==1 ? '#FF0000' : '#949494'">
                   <icon-histogram />
                 </el-icon>
-                <span class="ml-2 text-xs"> {{  i.zt ? '直播中' : '待直播'  }}</span>
+                <span class="ml-2 text-xs"> {{ i.status_msg }}</span>
               </div>
             </li>
           </ul>
@@ -106,10 +116,10 @@ const data_kcap = $ref([
 
         <div class="w-500px ml-10px shadow p-4">
           <div class="font-bold mb-8">课程安排</div>
-          <el-table :data="data_kcap" row-class-name="h-64px">
-            <el-table-column prop="time" label="时间" width="100" />
-            <el-table-column prop="sknr" label="授课内容" width="auto" />
-            <el-table-column prop="skls" label="授课内容" width="100" />
+          <el-table :data="detailMsg.kcdg" row-class-name="h-64px">
+            <el-table-column prop="date" label="时间" width="100" />
+            <el-table-column prop="no" label="授课内容" width="auto" />
+            <el-table-column prop="master_teacher" label="授课老师" width="100" />
           </el-table>
         </div>
       </div>

src/pages/zbkt/wlzb/detail.vue

@@ -1,32 +1,73 @@
 <script setup>
 import commonHeader from "@/components/header/index.vue";
-import img_lczs1 from '~/assets/zbktssys/1.png';
-import img_lczs2 from '~/assets/zbktssys/2.png';
-import img_lczs3 from '~/assets/zbktssys/3.png';
-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 img_lczs1 from "~/assets/zbktssys/1.png";
+import img_lczs2 from "~/assets/zbktssys/2.png";
+import img_lczs3 from "~/assets/zbktssys/3.png";
+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 { ref } from "vue";
+import { useRoute } from "vue-router";
+const https = ref(window.GLOBAL_CONFIG.api);
+const route = useRoute();
+let dgData = {
+  id: route.params.id,
+};
+let dgMsg = ref({});
+function getDgDetail() {
+  zbkt_dg(dgData).then((res) => {
+    dgMsg.value = res.data.one_info;
+  });
+}
+getDgDetail();
 const data_zy = $ref([
-  { img: img_lczs1, title: '走进生肖文化——寅虎卯兔', bfl: 100, desc: '领略生肖传奇，品味传统文化！', nj: '四年级', xk: '美术', ls: '尚老师', tx: img_tx, zt: '1' },
-  { img: img_lczs2, title: '走进生肖文化——寅虎卯兔', bfl: 100, desc: '领略生肖传奇，品味传统文化！', nj: '四年级', xk: '美术', ls: '尚老师', tx: img_tx, zt: '' },
-  { img: img_lczs3, title: '走进生肖文化——寅虎卯兔', bfl: 100, desc: '领略生肖传奇，品味传统文化！', nj: '四年级', xk: '美术', ls: '尚老师', tx: img_tx, zt: '' },
-])
-
+  {
+    img: img_lczs1,
+    title: "走进生肖文化——寅虎卯兔",
+    bfl: 100,
+    desc: "领略生肖传奇，品味传统文化！",
+    nj: "四年级",
+    xk: "美术",
+    ls: "尚老师",
+    tx: img_tx,
+    zt: "1",
+  },
+  {
+    img: img_lczs2,
+    title: "走进生肖文化——寅虎卯兔",
+    bfl: 100,
+    desc: "领略生肖传奇，品味传统文化！",
+    nj: "四年级",
+    xk: "美术",
+    ls: "尚老师",
+    tx: img_tx,
+    zt: "",
+  },
+  {
+    img: img_lczs3,
+    title: "走进生肖文化——寅虎卯兔",
+    bfl: 100,
+    desc: "领略生肖传奇，品味传统文化！",
+    nj: "四年级",
+    xk: "美术",
+    ls: "尚老师",
+    tx: img_tx,
+    zt: "",
+  },
+]);
 
 function hrefTo(href) {
-  window.open(href, '_blank')
+  window.open(href, "_blank");
 }
 
-let activeTap = $ref('pj')
+let activeTap = $ref("pj");
 
-const shareLink = window.location.href
+const shareLink = window.location.href;
 async function copyLink() {
-  await navigator.clipboard.writeText(shareLink)
-  ElMessage.success('已复制')
+  await navigator.clipboard.writeText(shareLink);
+  ElMessage.success("已复制");
 }
 </script>
   
@@ -44,15 +85,23 @@ async function copyLink() {
     </div>
   </div>
   <!-- bg-gradient-to-b from-hex-00A3FF via-hex-DDFEEE to-hex-FFF7E4 opacity-60 bg-opacity-60 blur-50px -->
-  <div class="w-full flex items-center justify-center bg-hex-FCFEFF ">
+  <div class="w-full flex items-center justify-center bg-hex-FCFEFF">
     <div class="w-1400px flex flex-col">
-
       <div class="flex items-center justify-start h-60px px-4">
-        <div class="text-lg text-hex-050026 font-bold">信息技术与学科教学的深度融合</div>
+        <div class="text-lg text-hex-050026 font-bold">{{ dgMsg.no }}</div>
 
         <el-popover placement="bottom" :width="410" trigger="hover">
           <template #reference>
-            <div class="cursor-pointer text-hex-00A3FF ml-8 flex items-center text-sm ">
+            <div
+              class="
+                cursor-pointer
+                text-hex-00A3FF
+                ml-8
+                flex
+                items-center
+                text-sm
+              "
+            >
               <i-fluent:share-28-regular class="mr-1" />分享
             </div>
           </template>
@@ -63,31 +112,62 @@ async function copyLink() {
             <el-divider></el-divider>
             <div class="text-hex-00a3ff mb-2">直播间地址</div>
             <div class="flex">
-              <div class="bg-hex-F7F7F7 p-2 flex-auto mr-4  truncate">{{ shareLink }}</div>
-              <div class="text-sm bg-hex-0A8AFF text-white w-100px h-40px flex_center rounded cursor-pointer"
-                @click="copyLink">复制链接</div>
+              <div class="bg-hex-F7F7F7 p-2 flex-auto mr-4 truncate">
+                {{ shareLink }}
+              </div>
+              <div
+                class="
+                  text-sm
+                  bg-hex-0A8AFF
+                  text-white
+                  w-100px
+                  h-40px
+                  flex_center
+                  rounded
+                  cursor-pointer
+                "
+                @click="copyLink"
+              >
+                复制链接
+              </div>
             </div>
           </div>
         </el-popover>
       </div>
 
       <div class="w-full shadow bg-white rounded-lg flex items-center mb-4 p-4">
-        <el-avatar :size="77" src="" />
+        <el-avatar :size="dgMsg.master_user_avatar" src="" />
         <div class="flex-auto p-4 flex flex-col justify-center">
           <div>
-            <div class="font-bold">陈老师</div>
+            <div class="font-bold">{{ dgMsg.master_teacher }}</div>
           </div>
           <div class="h-20px"></div>
         </div>
-        <div class="text-sm bg-hex-0A8AFF text-white w-100px h-40px flex_center rounded cursor-pointer">关注</div>
+        <div
+          class="
+            text-sm
+            bg-hex-0A8AFF
+            text-white
+            w-100px
+            h-40px
+            flex_center
+            rounded
+            cursor-pointer
+            focus
+          "
+        >
+          关注
+        </div>
       </div>
 
-      <div class="w-full h-800px mb-4 bg-hex-CEE5FB">
+      <div class="w-full h-800px mb-4 bg-hex-CEE5FB video">
         <video class="w-full h-full" src=""></video>
+        <div class="slave">助教：{{ dgMsg.slave_teacher }}</div>
+        <div class="watch">当前观看人数：{{ dgMsg.lll }}人</div>
       </div>
 
       <div class="flex_center">
-        <div class="w-176px">
+        <div class="w-176px ">
           <el-tabs v-model="activeTap">
             <el-tab-pane label="" name="pj">
               <template #label>
@@ -111,7 +191,20 @@ async function copyLink() {
       <div class="w-full p-8">
         <div v-show="activeTap === 'pj'">
           <el-rate></el-rate>
-          <div class="text-sm bg-hex-0A8AFF text-white w-100px h-32px flex_center rounded-full cursor-pointer">评价</div>
+          <div
+            class="
+              text-sm
+              bg-hex-0A8AFF
+              text-white
+              w-100px
+              h-32px
+              flex_center
+              rounded-full
+              cursor-pointer
+            "
+          >
+            评价
+          </div>
 
           <div class="my-1">
             <div class="flex items-end">
@@ -131,19 +224,26 @@ async function copyLink() {
             <div class="flex justify-between items-center my-2">
               <div class="text-hex-171721 text-sm">数学体系</div>
               <div
-                class="text-xs border border-hex-00a3ff text-hex-00a3ff w-60px h-24px flex_center rounded-full cursor-pointer">
-                下载</div>
+                class="
+                  text-xs
+                  border border-hex-00a3ff
+                  text-hex-00a3ff
+                  w-60px
+                  h-24px
+                  flex_center
+                  rounded-full
+                  cursor-pointer
+                "
+              >
+                下载
+              </div>
             </div>
           </div>
         </div>
       </div>
-
     </div>
   </div>
 
-
-
-
   <!-- <div class="w-full flex items-center justify-center mt-4">
     <div class="w-1400px flex flex-col">
 
@@ -172,4 +272,39 @@ async function copyLink() {
   </div> -->
 </template>
   
-  
+<style lang="scss" scoped>
+.focus{
+  line-height: 40px;
+  text-align: center;
+}
+.video {
+  position: relative;
+  .slave {
+    position: absolute;
+    top: 0;
+    left: 0px;
+    width: 185px;
+    height: 51px;
+    line-height: 51px;
+    opacity: 0.5;
+    background: #ffffff;
+    border-radius: 0px 10px 10px 0px;
+    font-size: 16px;
+    color: #00a3ff;
+    text-align: center;
+  }
+  .watch {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 200px;
+    height: 40px;
+    line-height: 40px;
+    text-align: center;
+    font-size: 14px;
+    color: #fff;
+    background: rgba(106,115,144,.5);
+    border-radius: 10px 0px 0px 10px;
+  }
+}
+</style>

src/pages/zbkt/wlzb/index.vue

@@ -269,6 +269,7 @@ const queryForm = ref({
   keywords: "",
   grade_id: null,
   team_id: null,
+  subject_id: null,
 });
 
 let zbMsg = ref([]);
@@ -283,6 +284,20 @@ function getList() {
 }
 getList();
 
+// 排行榜
+let bangMsg = ref([]);
+function getRec() {
+  Object.assign(zbktData, {
+    kz_phb: "1",
+    limit: "999",
+  });
+  zbkt_list(zbktData).then((res) => {
+    bangMsg.value=res.data.page_data;
+    console.log(bangMsg.value);
+  });
+}
+getRec();
+
 let keywords = ref("");
 // 搜索
 function searchKey() {
@@ -290,13 +305,14 @@ function searchKey() {
   getList();
 }
 // 点击年级
-function njClick(){
+function njClick() {
   Object.assign(zbktData, { grade_id: queryForm.value.grade_id });
   getList();
 }
 // 点击分册
-function fcClick(){
-  Object.assign(zbktData,{})
+function fcClick() {
+  Object.assign(zbktData, { subject_id: queryForm.value.subject_id });
+  getList();
 }
 
 // 推荐
@@ -311,6 +327,7 @@ function getTuijian() {
 }
 getTuijian();
 
+
 const router = useRouter();
 function handleTjzbClick(i) {
   router.push({
@@ -404,13 +421,15 @@ function hrefTo(href) {
   <div class="w-full flex items-center justify-center mt-4">
     <div class="w-1400px flex flex-col">
       <div>
-        <check-row @click="njClick"
+        <check-row
+          @click="njClick"
           v-model="queryForm.grade_id"
           label="年级"
           :items="nj"
         ></check-row>
-        <check-row @click="fcClick"
-          v-model="queryForm.team_id"
+        <check-row
+          @click="fcClick"
+          v-model="queryForm.subject_id"
           label="分册"
           :items="fc"
         ></check-row>
@@ -442,7 +461,8 @@ function hrefTo(href) {
         <div
           @click="linkZb(i)"
           class="w-647px h-155px rounded-xl shadow-lg mb-7 flex"
-          v-for="i in zbMsg" :key="i"
+          v-for="i in zbMsg"
+          :key="i"
         >
           <div class="w-264px h-full flex-none">
             <img :src="https + i.img" alt="" class="w-full h-full" />
@@ -507,7 +527,7 @@ function hrefTo(href) {
         </div>
       </div>
 
-      <div class="flex w-full justify-between ">
+      <div class="flex w-full justify-between">
         <div class="flex-auto mr-8">
           <div class="text-lg font-bold mt-7 mb-3">推荐直播</div>
           <div class="flex flex-wrap justify-between scrollTj">
@@ -522,7 +542,8 @@ function hrefTo(href) {
                 overflow-hidden
                 cursor-pointer
               "
-              v-for="i in zbMsg" :key="i"
+              v-for="i in zbMsg"
+              :key="i"
               @click="handleTjzbClick(i)"
             >
               <div class="w-full flex-none">
@@ -537,7 +558,7 @@ function hrefTo(href) {
 
         <div class="w-320px shadow flex-none p-6">
           <div class="text-lg font-bold mt-1 mb-3">直播课程排行榜</div>
-          <template v-for="(i, index) in data_phb" :key="i">
+          <template v-for="(i, index) in bangMsg" :key="i">
             <div
               v-if="index < 2"
               class="w-full h-167px mb-4 relative cursor-pointer"
@@ -549,7 +570,7 @@ function hrefTo(href) {
                 class="w-full h-full overflow-hidden rounded-md"
               />
               <div class="p-2 absolute z-2 bottom-0 w-full text-white">
-                {{ i.title }}
+                {{ i.kcjj }}
               </div>
               <div
                 class="

src/router/index.js

@@ -143,7 +143,7 @@ export default createRouter({
 							component: () => import("~/pages/zbkt/wlzb/content.vue"),
 						},
 						{
-							path: 'detail',
+							path: 'detail/:id',
 							name: 'wlzb_detail',
 							component: () => import("~/pages/zbkt/wlzb/detail.vue"),
 						},