update

d5c2eaec · lihuihui · 31edd649 · d5c2eaec · d5c2eaec · d5c2eaec
--- a/src/modules/course/my/api.ts
+++ b/src/modules/course/my/api.ts
@@ -153,6 +153,11 @@ export function delCharacter(data: { id: string; course_id: string }) {
  return httpRequest.post('/api/resource/v1/course/course/delete-chapter', data)
 }
 // 直播列表
-export function getLiveList(params: { name: string; page?: number; ['page_size']?: number }) {
+export function getLiveList(params: { name: string; page?: number;['page_size']?: number }) {
  return httpRequest.get('/api/resource/v1/course/course/search-live', { params })
 }
+// 获取课程详情
+export function getViewCourseDetails(params: { id: string }) {
+  return httpRequest.get('/api/resource/v1/course/course/view', { params })
+}
--- a/src/modules/course/my/components/ViewTop.vue
+++ b/src/modules/course/my/components/ViewTop.vue
 <script setup lang="ts">
+import VEditor from '@/components/tinymce/Index.vue'
+const props: any = defineProps({
+  data: {
+    type: Object
+  }
+})
+const form: any = ref({})
+watch(() => props.data, value => {
+  form.value = value
+})
+interface IBasicInfo {
+  icon: string
+  label: string
+  value: string
+  key: string
+}
+// interface ILecturerInfo {
+//   icon: string
+//   label: string
+//   value: string
+//   key: string
+// }
+const basicInfo = computed((): IBasicInfo[] => {
+  const basicList = [
+    {
+      icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/course-view-icon1.png',
+      label: '课程类型',
+      value: '',
+      key: 'online_type_name'
+    },
+    {
+      icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/course-view-icon2.png',
+      label: '课程分类',
+      value: '',
+      key: 'classification_name'
+    },
+    {
+      icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/course-view-icon3.png',
+      label: '课程学分',
+      value: '',
+      key: 'credit'
+    },
+    {
+      icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/course-view-icon4.png',
+      label: '创建人',
+      value: '',
+      key: 'created_operator_name'
+    },
+    {
+      icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/course-view-icon5.png',
+      label: '更新人',
+      value: '',
+      key: 'updated_operator_name'
+    },
+    {
+      icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/course-view-icon6.png',
+      label: '选课类型',
+      value: '',
+      key: 'elective_type_name'
+    },
+    {
+      icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/course-view-icon7.png',
+      label: '是否可用',
+      value: '',
+      key: 'status_name'
+    },
+    {
+      icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/course-view-icon8.png',
+      label: '创建时间',
+      value: '',
+      key: 'created_time'
+    },
+    {
+      icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/course-view-icon9.png',
+      label: '更新时间',
+      value: '',
+      key: 'updated_time'
+    }
+  ]
+  basicList.map((item: any) => {
+    item.value = props?.data[item.key] || '-'
+    return item
+  })
+  return basicList
+})
 </script>
 <template>
-<div class="top-info">
+  <div class="info-box">
+    <div class="top-info">
      <div class="cover"></div>
-</div>
+      <div class="infos">
+        <div class="item" v-for="item in basicInfo" :key="item.key">
+          <img :src="item.icon" />
+          <div class="item-right">
+            <div class="label">{{ item.label }}</div>
+            <div class="value">{{ item.value }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="bottom-info">
+      <div class="lecturer-list">
+        <div class="item" v-for="item in props.data.lecturers" :key="item.id">
+          <div class="avatar" :style="`background-image:url(${item.avatar})`"></div>
+          <div class="name">{{ item.name }}</div>
+        </div>
+      </div>
+      <div class="other-info">
+        <div class="item">
+          <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/course-view-icon10.png" />
+          <div class="label">课程所属部门</div>
+          <div class="value">{{ props.data.organ_id_name }}</div>
+        </div>
+        <div class="item">
+          <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/course-view-icon11.png" />
+          <div class="label">课程公开信息</div>
+          <div class="value">{{ props.data.department_public_name }}</div>
+          <div class="value">{{ props.data.platform_public_name }}</div>
+        </div>
+        <div class="item">
+          <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/course-view-icon12.png" />
+          <div class="label">课程授权信息</div>
+          <div class="value">Marrywood</div>
+        </div>
+      </div>
+    </div>
+    <el-form ref="ruleFormRef" label-position="top" :model="form" style="width: 100%; margin-top: 30px">
+      <el-form-item label="课程简介与描述：">
+        <v-editor disabled v-model="form.represent" class="editor" :height="200"></v-editor>
+      </el-form-item>
+      <el-form-item label="课程小论文：">
+        <v-editor disabled v-model="form.essay" class="editor" :height="200"></v-editor>
+      </el-form-item>
+      <el-form-item label="前期准备与预备知识：">
+        <v-editor disabled v-model="form.previous_preparation" class="editor" :height="200"></v-editor>
+      </el-form-item>
+      <el-form-item label="授课目标：">
+        <v-editor disabled v-model="form.target" class="editor" :height="200"></v-editor>
+      </el-form-item>
+    </el-form>
+  </div>
 </template>
 <style lang="scss" scoped>
-.top-info{
+.info-box {
+  background: #f7f7f7;
+  border-radius: 10px;
+  padding: 25px 17px;
+}
+.top-info {
  display: flex;
-  .cover{
+  .cover {
-    width: 240px;
+    min-width: 240px;
    height: 180px;
    background: url(https://webapp-pub.ezijing.com/upload/admin/0d58c61cda01afd20d8ec0274b4d8a08.jpg);
    background-size: cover;
  }
+  .infos {
+    padding-left: 20px;
+    display: flex;
+    flex-wrap: wrap;
+    .item {
+      width: 180px;
+      display: flex;
+      align-items: center;
+      height: fit-content;
+      .item-right {
+        margin-left: 15px;
+        .label {
+          font-size: 14px;
+          line-height: 100%;
+          color: #999999;
+          margin-bottom: 8px;
+        }
+        .value {
+          font-size: 16px;
+          font-weight: 500;
+          line-height: 100%;
+          color: #333333;
+        }
+      }
+    }
+  }
+}
+.bottom-info {
+  display: flex;
+  padding-top: 20px;
+  .other-info {
+    width: 594px;
+    background: #ebe4d9;
+    border-radius: 6px;
+    display: flex;
+    padding: 64px 0 38px;
+    .item {
+      flex: 1;
+      &:nth-child(2) {
+        // height: 150px;
+        border-left: 1px solid #ddb67c;
+        border-right: 1px solid #ddb67c;
+      }
+      img {
+        width: 52px;
+        display: block;
+        margin: 0 auto;
+      }
+      .label {
+        font-size: 14px;
+        line-height: 100%;
+        color: #666666;
+        padding-top: 10px;
+        padding-bottom: 13px;
+        text-align: center;
+      }
+      .value {
+        font-size: 16px;
+        font-weight: 500;
+        line-height: 100%;
+        color: #333333;
+        margin-bottom: 10px;
+        text-align: center;
+      }
+    }
+  }
+  .lecturer-list {
+    width: 230px;
+    display: flex;
+    flex-wrap: wrap;
+    // justify-content: center;
+    .item {
+      padding-top: 25px;
+      width: 115px;
+      .avatar {
+        width: 56px;
+        height: 56px;
+        background-size: cover;
+        border-radius: 50%;
+        margin: 0 auto;
+      }
+      .name {
+        text-align: center;
+        font-size: 16px;
+        font-weight: 500;
+        line-height: 100%;
+        color: #333333;
+        margin-top: 10px;
+      }
+    }
+  }
 }
 </style>
--- a/src/modules/course/my/views/View.vue
+++ b/src/modules/course/my/views/View.vue
 <script setup lang="ts">
 import ViewTop from '../components/ViewTop.vue'
+import { getViewCourseDetails } from '../api'
+const route = useRoute()
+// const router = useRouter()
+const id = route.query.id as string
+const courseDetails:any = ref({})
+onMounted(() => {
+  getViewCourseDetails({ id: id }).then((res:any) => {
+    courseDetails.value = res.data
+    console.log(res, 'getViewCourseDetails')
+  })
+})
 </script>
 <template>
 <AppCard title="查阅课程">
  <div class="course-view">
    <div class="course-left_info">
-      <ViewTop></ViewTop>
+      <ViewTop :data="courseDetails"></ViewTop>
    </div>
  </div>
 </AppCard>
@@ -15,8 +31,6 @@ import ViewTop from '../components/ViewTop.vue'
  display: flex;
  .course-left_info{
    width: 840px;
-    // height: 200px;
-    // background: red;
  }
 }
 </style>