完善课程模块；添加轮播图模块

2023-02-02 15:26:20 +08:00
parent 34bc6f1af0
commit 5b2fdcb833
7 changed files with 450 additions and 33 deletions
--- a/src/view/course/addCourse/index.vue
+++ b/src/view/course/addCourse/index.vue
@@ -146,16 +146,16 @@ function handleAvatarSuccess(res) {
  form.value.cover = res.data.file.url
 }
 function beforeAvatarUpload(file) {
-      const isLt05M = file.size / 1024 / 1024 < 5
-      const isJPG = file.type.indexOf('image/') === -1
-      if (isJPG) {
-        ElMessage.error('文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件')
-      }
-      if (!isLt05M) {
-        ElMessage.error('上传头像图片大小不能超过 2M!')
-      }
-      return !isJPG && isLt05M
-    }
+  const isLt05M = file.size / 1024 / 1024 < 20
+  const isJPG = file.type.indexOf('image/') === -1
+  if (isJPG) {
+    ElMessage.error('文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件')
+  }
+  if (!isLt05M) {
+    ElMessage.error('上传头像图片大小不能超过 2M!')
+  }
+  return !isJPG && isLt05M
+}
 function onSubmit() {
  router.push({name:'courseManage'})
 }
--- a/src/view/course/components/chapter.vue
+++ b/src/view/course/components/chapter.vue
@@ -156,7 +156,9 @@ async function enterChapterChildDialog() { // 提交小章节
  }
 }
 function getFilePath(file) { // 获取上传文件之后的地址
-
+  console.log(file)
+  chapterChildForm.value.url = file.url
+  chapterChildForm.value.url_name = file.url_name
 }
 function chooseChapterChildExercises() { // 打开选择习题窗口

@@ -278,7 +280,7 @@ function openExercisesWinFunc() { // 打开媒体库
          <!--            class="upload-btn"-->
          <!--            @on-success="getFilePath"-->
          <!--          />-->
-          <exercises-com @on-success="getFilePath" />
+          <exercises-com @on-success="getFilePath" :url_name="chapterChildForm.url_name" />
          <!--          <el-button size="small" type="primary" @click="openExercisesWinFunc">点击上传</el-button>-->
        </el-form-item>
        <el-form-item label="习题管理">
--- a/src/view/course/components/mediaPool.vue
+++ b/src/view/course/components/mediaPool.vue
@@ -12,7 +12,7 @@ const route = useRoute()
 import { useUserStore } from '@/pinia/modules/user'
 const userStore = useUserStore()
 // import chapterCom from '../components/chapter.vue'
-const props = defineProps(['course_id','chapter_info'])
+const props = defineProps(['url_name'])
 const emit = defineEmits(['on-success'])
 import { clients, getNowDate } from '@/utils'
 import { getToken } from '@/utils/auth'
@@ -22,7 +22,8 @@ const drawer = ref(false)
 const queryParams =ref({
  pageIndex:1,
  pageSize:10,
-  name:''
+  name:'',
+  subject:''
 })
 // 生命周期
 const subjectList = inject('subjectList')
@@ -83,6 +84,12 @@ async function httpUpload(file) { // 上传oss
        // 上传成功之后添加媒体库
        // this.addDepotFun(`${imgUrl}/${fileName}`, file.file.name)
        // 数据赋值
+        const params = {
+          url:`${imgUrl}/${fileName}`,
+          url_name:file.file.name
+        }
+        // console.log(params)
+        emit('on-success',params)
        // this.$set(this.chapterTable.sel, 'url', `${imgUrl}/${fileName}`)
        // this.$set(this.chapterTable.sel, 'url_name', file.file.name)
      }
@@ -91,6 +98,7 @@ async function httpUpload(file) { // 上传oss
 <template>
  <div>
    <el-button size="small" type="primary" @click="openExercisesWinFunc">点击上传</el-button>
+    <div v-if="url_name">{{url_name}}</div>
    <el-drawer v-model="drawer" title="媒体库" size="50%">
      <div class="drawer-section">
        <!--      搜索框-->
@@ -115,6 +123,7 @@ async function httpUpload(file) { // 上传oss
            </el-form-item>
            <el-form-item>
              <el-upload
+                :headers="headers"
                class="upload-demo"
                action
                :http-request="httpUpload"
@@ -129,7 +138,9 @@ async function httpUpload(file) { // 上传oss
          </el-form>
        </div>
        <!--      数据列表-->
-        <div class="list-box"></div>
+        <div class="list-box">
+
+        </div>
      </div>
    </el-drawer>
  </div>
--- a/src/view/course/index.vue
+++ b/src/view/course/index.vue
@@ -124,11 +124,13 @@ function deleteCourseFunc(row) {
  },() => {
  })
 }
-function handleCurrentChange() {
-
+function handleCurrentChange(val) {
+  queryParams.value.pageIndex = val
+  getCourseList()
 }
-function handleSizeChange() {
-
+function handleSizeChange(val) {
+  queryParams.value.pageSize = val
+  getCourseList()
 }
 function closeDialog(){
  dialogFormVisible.value = false
@@ -190,7 +192,11 @@ function viewCourseFunc(row) { // 查看课程
        <el-table-column align="left" label="名称" min-width="150" prop="name" />
        <el-table-column align="left" label="科目" min-width="150" prop="subject" />
        <el-table-column align="left" label="价格" min-width="150" prop="price" />
-        <el-table-column align="left" label="状态" min-width="150" prop="status" />
+        <el-table-column align="left" label="状态" min-width="150" prop="status">
+          <template #default="scope">
+            {{scope.row.status == 1?'上架':scope.row.status == 2?'待审核':scope.row.status == 3?'通过':scope.row.status == 4?'未通过':'下架'}}
+          </template>
+        </el-table-column>
        <el-table-column align="left" label="是否精品" min-width="150" prop="is_boutique" />
        <el-table-column align="left" fixed="right" label="操作" width="200">
          <template #default="scope">
--- a/src/view/course/viewCourse/index.vue
+++ b/src/view/course/viewCourse/index.vue
@@ -21,6 +21,11 @@ async function getCourse() { // 获取课程信息
    courseData.value = res.data
  }
 }
+function downloadChapterChildFunc(item) { // 点击下载
+  console.log(item)
+
+  window.open(row.url)
+}
 </script>
 <template>
  <div>
@@ -28,24 +33,24 @@ async function getCourse() { // 获取课程信息
    <div class="gva-search-box">
      <div class="baseinfoBox">
        <div class="base-card course-name">
-          <div class="bc-left">课程名称：</div>
-          <div class="bc-right">{{courseData.step1.name}}</div>
+          <div class="bc-left" style="font-size: 18px">课程名称：</div>
+          <div class="bc-right" style="font-size: 18px">{{courseData.name}}</div>
        </div>
        <div class="base-card">
          <div class="bc-left">课程名称：</div>
-          <div class="bc-right">{{courseData.step1.name}}</div>
+          <div class="bc-right">{{courseData.name}}</div>
        </div>
        <div class="base-card">
          <div class="bc-left">课程科目：</div>
-          <div class="bc-right">{{courseData.step1.subject}}</div>
+          <div class="bc-right">{{courseData.subject}}</div>
        </div>
        <div class="base-card">
          <div class="bc-left">课程状态：</div>
-          <div class="bc-right">{{courseData.step1.status === 1?'上架':'下架'}}</div>
+          <div class="bc-right">{{courseData.status === 1?'上架':'下架'}}</div>
        </div>
        <div class="base-card">
          <div class="bc-left">课程价格：</div>
-          <div class="bc-right">{{courseData.step1.price}}</div>
+          <div class="bc-right">{{courseData.price}}</div>
        </div>
        <div class="base-card">
          <div class="bc-left">教师姓名：</div>
@@ -53,27 +58,86 @@ async function getCourse() { // 获取课程信息
        </div>
        <div class="base-card">
          <div class="bc-left">创建时间：</div>
-          <div class="bc-right"></div>
+          <div class="bc-right">{{courseData.CreatedAt}}</div>
        </div>
        <div class="base-card">
          <div class="bc-left">课程简介：</div>
-          <div class="bc-right">{{courseData.step1.introduction}}</div>
+          <div class="bc-right">{{courseData.introduction}}</div>
        </div>
      </div>
    </div>
    <!--    章节信息-->
    <div class="gva-table-box">
-
+      <div class="list-box">
+        <div class="lb-card" v-for="(item,i) in courseData.course_ware_json">
+          <!--大章节标题-->
+          <div class="lb-title-part">
+            <div class="lbt-title">{{item.name}}</div>
+          </div>
+          <!--表格数据-->
+          <div class="lb-table-part" style="margin-bottom: 20px">
+            <el-table :data="item.children" >
+              <el-table-column align="left" label="id" width="60" prop="id" />
+              <el-table-column align="left" label="子章节名称" min-width="60" prop="name" />
+              <el-table-column align="left" label="课件名称" min-width="60">
+                <template #default="scope">
+                  {{scope.row.url_name === ''?'未上传课件':scope.row.url_name}}
+                </template>
+              </el-table-column>
+              <el-table-column align="left" label="章节习题" min-width="60" prop="is_contain_exercise">
+                <template #default="scope">
+                  {{scope.row.is_contain_exercise === 0?'未添加习题':scope.row.is_contain_exercise}}
+                </template>
+              </el-table-column>
+              <el-table-column align="left" label="是否免费" min-width="60">
+                <template #default="scope">
+                  {{scope.row.is_free === 1? '是':'否'}}
+                </template>
+              </el-table-column>
+              <el-table-column align="left" label="是否展示" min-width="60">
+                <template #default="scope">
+                  {{scope.row.is_show === 1? '是':'否'}}
+                </template>
+              </el-table-column>
+              <el-table-column align="left" label="操作" min-width="60">
+                <template #default="scope">
+                  <el-button v-if="scope.row.url"
+                    icon="edit"
+                    size="small"
+                    type="primary"
+                    link
+                    @click="downloadChapterChildFunc(scope.row)"
+                  >下载</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
    </div>
  </div>
 </template>
 <style scoped>
+.lbt-title{
+  margin-right: 20px;
+  font-size: 18px;
+  margin-bottom: 10px;
+}
+.base-card{
+  display: flex;
+  float: left;
+  white-space: nowrap;
+  width: 33%;
+  padding: 10px 0px;
+  color: gray;
+}
 .course-name{
  font-weight: 900;
-  font-size: 18px;
+  font-size: 18px !important;
  width: 100%;
+  color:black
+}
+.baseinfoBox{
+  overflow: hidden;
 }
-  .baseinfoBox{
-    overflow: hidden;
-  }
 </style>