视频资源开发

.eslintrc-auto-import.json

@@ -134,6 +134,7 @@
     "useDisplayMedia": true,
     "useDocumentVisibility": true,
     "useDraggable": true,
+    "useDropZone": true,
     "useElementBounding": true,
     "useElementByPoint": true,
     "useElementHover": true,

auto-imports.d.ts

@@ -135,6 +135,7 @@ declare global {
   const useDisplayMedia: typeof import('@vueuse/core')['useDisplayMedia']
   const useDocumentVisibility: typeof import('@vueuse/core')['useDocumentVisibility']
   const useDraggable: typeof import('@vueuse/core')['useDraggable']
+  const useDropZone: typeof import('@vueuse/core')['useDropZone']
   const useElementBounding: typeof import('@vueuse/core')['useElementBounding']
   const useElementByPoint: typeof import('@vueuse/core')['useElementByPoint']
   const useElementHover: typeof import('@vueuse/core')['useElementHover']

src/modules/resource/video/components/CardListItem.vue

@@ -12,7 +12,7 @@ const props:any = defineProps<{ data: object }>()
         <router-link :to="`/resource/video/update?id=${props.data.id}`">
           <div class="edit-btn">编辑</div>
         </router-link>
-        <router-link to="/resource/video/view">
+        <router-link :to="`/resource/video/view?id=${props.data.id}`">
           <div class="view-btn">查看</div>
         </router-link>
       </div>

src/modules/resource/video/components/Operation.vue

@@ -114,7 +114,7 @@ const handlesetBelong = () => {
 </script>
 
 <template>
-  <div class="tool-btn-box" v-if="$route.query.id">
+  <div class="tool-btn-box" v-if="$route.query.id" style="margin-bottom: 20px;">
     <div class="btn-item" @click="handleDepartment">{{ props.data.department_public == 0 ? '部门共享' : '取消部门共享' }}</div>
     <div class="btn-item" @click="handlePlatform">{{ props.data.platform_public == 0 ? '平台共享' : '取消平台共享' }}</div>
     <div class="btn-item" @click="handleStatus">{{ props.data.status == 0 ? '资源上线' : '资源下线' }}</div>

src/modules/resource/video/components/view/CenterInfo.vue

 <script setup lang="ts">
+const props = defineProps(['data'])
 </script>
 <template>
 <div class="center-video-box">
-  <video width="812" height="433" controls>
-    <source src="https://video.shipin520.com/videos/17/36/71/b_KSyZ5ujXfz7R1567173671.mp4" type="video/mp4">
+  <!-- <video width="812" height="433" controls>
+    <source :src="props.data.play_auth.play_info_list[0].PlayURL" type="video/mp4">
+  </video> -->
+  <video  width="812" height="433" controls id="video" :src="props.data.play_auth.play_info_list[0].PlayURL" :poster="props.data.cover">
+    <source :src="props.data.play_auth.play_info_list[1].PlayURL" />
   </video>
   <div class="right-statistics">
     <div class="stat-item">
       <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/view-vicon1.png">
       <div class="content">
-        <div class="unit">758<span>个</span></div>
+        <div class="unit">{{ props.data.project_count }}<span>个</span></div>
         <div class="tag">使用项目/学校</div>
       </div>
     </div>
     <div class="stat-item">
       <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/view-vicon2.png">
       <div class="content">
-        <div class="unit">758<span>个</span></div>
+        <div class="unit">{{ props.data.course_count }}<span>个</span></div>
         <div class="tag">使用课程</div>
       </div>
     </div>
     <div class="stat-item">
       <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/view-vicon3.png">
       <div class="content">
-        <div class="unit">758<span>个</span></div>
+        <div class="unit">{{ props.data.learn_count }}<span>个</span></div>
         <div class="tag">累计学习人次</div>
       </div>
     </div>
     <div class="stat-item">
       <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/view-vicon4.png">
       <div class="content">
-        <div class="unit">758<span>个</span></div>
+        <div class="unit">{{ props.data.learn_time_count }}<span>个</span></div>
         <div class="tag">累计学习时长</div>
       </div>
     </div>

src/modules/resource/video/components/view/TopInfo.vue

 <script setup lang="ts">
-
+  const props = defineProps(['data'])
+  console.log(props, 'porps')
 </script>
 
 <template>
@@ -13,49 +14,49 @@
         <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/video-view-icon1.png" class="icons">
         <div class="text-box">
           <div class="name">状态</div>
-          <div class="value active">有效</div>
+          <div :class="props.data.status == '1' ? 'value active' : 'value'">{{ props.data.status_name }}</div>
         </div>
       </div>
       <div class="i-items">
         <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/video-view-icon12.png" class="icons">
         <div class="text-box">
           <div class="name">创建者</div>
-          <div class="value">张三丰</div>
+          <div class="value">{{ props.data.created_operator_name }}</div>
         </div>
       </div>
       <div class="i-items">
         <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/video-view-icon3.png" class="icons">
         <div class="text-box">
           <div class="name">创建时间</div>
-          <div class="value">2021-08-09 12:32:21</div>
+          <div class="value">{{ props.data.created_time }}</div>
         </div>
       </div>
       <div class="i-items">
         <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/video-view-icon4.png" class="icons">
         <div class="text-box">
           <div class="name">更新时间</div>
-          <div class="value">2021-08-09 12:32:21</div>
+          <div class="value">{{ props.data.updated_time }}</div>
         </div>
       </div>
       <div class="i-items">
         <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/video-view-icon5.png" class="icons">
         <div class="text-box">
           <div class="name">视频名称</div>
-          <div class="value">基金产品(中)(初级)</div>
+          <div class="value">{{ props.data.name }}</div>
         </div>
       </div>
       <div class="i-items">
         <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/video-view-icon6.png" class="icons">
         <div class="text-box">
           <div class="name">资源来源</div>
-          <div class="value">金融产品数字化营销-黄老师</div>
+          <div class="value">{{ props.data.source_name }}</div>
         </div>
       </div>
       <div class="i-items">
         <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/video-view-icon7.png" class="icons">
         <div class="text-box">
           <div class="name">视频分类</div>
-          <div class="value">金融产品数字化营销-黄老师</div>
+          <div class="value">{{ props.data.classification_name }}</div>
         </div>
       </div>
       <div class="i-items" style="align-items: flex-start;">
@@ -63,7 +64,7 @@
         <div class="text-box">
           <div class="name">知识点</div>
           <div class="textarea-box">
-            某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某
+            {{ props.data.knowledge_points }}
           </div>
         </div>
       </div>
@@ -108,6 +109,7 @@
         line-height: 24px;
         color: #505050;
         margin-top: 14px;
+        min-width: 500px;
       }
       .text-box{
         margin-left: 16px;

src/modules/resource/video/views/List.vue

@@ -55,7 +55,7 @@ const listOptions = $computed(() => {
       { label: '更新人', prop: 'updated_operator_name', align: 'center' },
       { label: '更新人部门', prop: 'organ_id_name', align: 'center' },
       { label: '更新日期', prop: 'updated_time', align: 'center' },
-      { label: '操作', slots: 'table-operate', align: 'center' }
+      { label: '操作', slots: 'table-operate', align: 'center', width: 200 }
     ]
   }
 })
@@ -100,10 +100,10 @@ const defaultProps = {
       </template>
       <template #table-operate="{ row }">
         <el-space>
-          <router-link :to="`/resource/video/update/${row.id}`">
+          <router-link :to="`/resource/video/update?id=${row.id}`">
             <el-button plain>编辑</el-button>
           </router-link>
-          <router-link :to="`/resource/video/view/${row.id}`">
+          <router-link :to="`/resource/video/view?id=${row.id}`">
             <el-button type="primary" plain>查看</el-button>
           </router-link>
         </el-space>

src/modules/resource/video/views/Update.vue

@@ -15,7 +15,7 @@
   const router = useRouter()
 
   // 下拉选择tree 视频分类
-   const defaultProps = {
+  const defaultProps = {
     children: 'children',
     label: 'category_name',
     value: 'id'

src/modules/resource/video/views/View.vue

@@ -2,6 +2,12 @@
 import TopInfo from '../components/view/TopInfo.vue'
 import CenterInfo from '../components/view/CenterInfo.vue'
 import BottomInfo from '../components/view/BottomInfo.vue'
+// api
+import { getVideoDetails } from '../api'
+
+// 路由
+const router = useRouter()
+
 const listOptions = {
   columns: [
     { label: '课程图片', prop: 'img', align: 'center' },
@@ -20,6 +26,14 @@ const listOptions = {
     { img: 5, cursor_name: '宏观经济学.pptx', type_name: '5', zhang: '5', jie: '吉林师范大学', update: '王重阳' }
   ]
 }
+
+const id = router.currentRoute.value.query.id as string
+// 获取详情
+let videoDetails:any = ref({})
+getVideoDetails({ id: id }).then(res => {
+  videoDetails.value = res.data
+  console.log(videoDetails, '1111111aaaaaaaaa')
+})
 </script>
 
 <template>
@@ -32,9 +46,9 @@ const listOptions = {
       <div class="btn-item">资源下线</div>
       <div class="btn-item">更改负责人</div>
     </div>
-    <TopInfo></TopInfo>
-    <CenterInfo></CenterInfo>
-    <BottomInfo></BottomInfo>
+    <TopInfo :data="videoDetails"></TopInfo>
+    <CenterInfo v-if="Object.keys(videoDetails).length" :data="videoDetails"></CenterInfo>
+    <BottomInfo :data="videoDetails"></BottomInfo>
   </AppCard>
   <AppCard title="视频资源信息">
     <AppList v-bind="listOptions" ref="appList" stripe>