会员营期新增查看视频功能

src/views/course/userCoursePeriod/index.vue

@@ -227,37 +227,15 @@
                 <el-tag type="danger">{{scope.row.lastJoinTime}}</el-tag>
               </template>
             </el-table-column>
-<!--            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
               <template slot-scope="scope">
                 <el-button
                   size="mini"
                   type="text"
-                  icon="el-icon-top"
-                  @click="handleTop(scope.row)"
-                  v-hasPermi="['course:period:courseMove']"
-                >上移</el-button>
-              <el-button
-                size="mini"
-                type="text"
-                icon="el-icon-bottom"
-                @click="handleBottom(scope.row)"
-                v-hasPermi="['course:period:courseMove']"
-              >下移</el-button>
-              <el-button
-                size="mini"
-                type="text"
-                icon="el-icon-edit"
-                @click="handleUpdateDate(scope.row)"
-              >修改营期时间</el-button>
-                <el-button
-                  size="mini"
-                  type="text"
-                  icon="el-icon-delete"
-                  @click="handleDeleteCourse(scope.row)"
-                  v-hasPermi="['course:period:dayRemove']"
-                >删除课程</el-button>
+                  @click="handleDetails(scope.row)"
+                >查看</el-button>
               </template>
-            </el-table-column>-->
+            </el-table-column>
           </el-table>
             <pagination
               v-show="course.total > 0"
@@ -285,7 +263,12 @@
       </el-tabs>
     </div>
   </el-drawer>
-
+    <el-drawer
+      :with-header="false"
+      size="75%"
+      :visible.sync="open" append-to-body>
+      <userCourseVideoDetails  ref="userCourseVideoDetails" />
+    </el-drawer>
   <batch-red-packet
     :visible.sync="batchRedPacketVisible"
     :selected-data="selectedPeriods"
@@ -302,13 +285,14 @@ import { courseList,videoList } from '@/api/course/courseRedPacketLog'
 import RedPacket from './redPacket.vue'
 import BatchRedPacket from './batchRedPacket.vue'
 import CourseStatistics from './statistics.vue'
-
+import userCourseVideoDetails from '../../components/course/userCourseVideoDetails.vue';
 export default {
   name: "Period",
   components: {
     RedPacket,
     BatchRedPacket,
-    CourseStatistics
+    CourseStatistics,
+    userCourseVideoDetails
   },
   data() {
     return {
@@ -841,8 +825,15 @@ export default {
     disabledDate(time) {
       return time.getTime() < new Date(new Date().setHours(0,0,0,0));
     },
+    handleDetails(row) {
+      this.open=true;
+      setTimeout(() => {
+        this.$refs.userCourseVideoDetails.getDetails(row.videoId);
+      }, 500);
 
+    }
   },
+
 };
 </script>
 
@@ -898,41 +889,6 @@ export default {
   width: 280px;
 }
 
-.color-wrapper {
-  display: flex;
-  align-items: center;
-  margin-bottom: 10px;
-}
-
-.color-label {
-  width: 70px;
-  color: #606266;
-}
-
-.color-hint {
-  margin-left: 10px;
-  color: #606266;
-  font-size: 12px;
-}
-
-.color-help {
-  margin-left: 5px;
-  color: #909399;
-  cursor: pointer;
-}
-
-.hint-text {
-  color: #606266;
-  font-size: 12px;
-  margin-top: 5px;
-}
-
-.camp-list {
-  flex: 1;
-  overflow-y: auto;
-  padding: 3px;
-}
-
 .camp-item {
   margin-bottom: 5px;
   padding: 15px;
@@ -1019,59 +975,6 @@ export default {
   min-width: 50px;
 }
 
-.action-btn {
-  padding: 2px 5px;
-  font-size: 12px;
-  border-radius: 4px;
-  transition: all 0.2s;
-}
-
-.action-btn:hover {
-  background-color: rgba(255, 255, 255, 0.8);
-}
-
-.delete-btn {
-  color: #f56c6c;
-}
-
-.delete-btn:hover {
-  background-color: rgba(245, 108, 108, 0.1);
-}
-
-.copy-btn {
-  color: #409EFF;
-}
-
-.copy-btn:hover {
-  background-color: rgba(64, 158, 255, 0.1);
-}
-
-.warning-icon {
-  color: #E6A23C;
-  font-size: 16px;
-  margin-left: 5px;
-}
-
-.el-main {
-  padding: 10px;
-}
-
-/* 添加训练营表单样式 */
-.drawer-footer {
-  /* position: absolute; */
-  bottom: 0;
-  left: 0;
-  right: 0;
-  padding: 20px;
-  background: #fff;
-  text-align: right;
-  border-top: 1px solid #e8e8e8;
-}
-
-.el-input-number {
-  width: 100%;
-}
-
 /* 加载更多样式 */
 .loading-more {
   display: flex;