接口初始化 第一版

src/views/faceteach/FaceTeach.vue

@@ -14,7 +14,7 @@
         <div class="title">【其他活动】{{ data.offCourseInfo?.name }}</div>
         <div class="time" style="margin-top: 26px">
           <img width="15px" height="17px" src="../../assets/image/time.png"/>
-          <div style="margin-left: 8px">{{ data.offCoursePlanInfo.beginTime }}</div>
+          <div style="margin-left: 8px">{{ data.offCoursePlanInfo?.beginTime }}</div>
         </div>
         <div class="time" style="margin-top: 23px">
           <img
@@ -22,10 +22,10 @@
               height="18px"
               src="../../assets/image/position.png"
           />
-          <div style="margin-left: 8px">{{ data.offCoursePlanInfo.address }}</div>
+          <div style="margin-left: 8px">{{ data.offCoursePlanInfo?.address }}</div>
         </div>
       </div>
-      <div class="btn" v-if="data.offCoursePlanInfo.evalFlag && !data.evalFlag">评估</div>
+      <div class="btn" v-if="data.offCoursePlanInfo?.evalFlag && !data.evalFlag">评估</div>
     </div>
     <!-- 基本信息 -->
 
@@ -63,10 +63,8 @@
                 }"
               >
                 <div class="enclosureL">
-                  <img
-                      style="width: 22px; height: 26px; margin-left: 10px"
-                      :src="{pdf,word,ppt,zip,excel}[el.split('.').slice(-1)]"
-                  />
+                  <FileTypeImg v-model="data.offCoursePlanInfo.attach.split(',')[index]"
+                               :style="{width:'22px',height:'26px',marginLeft:'10px'}"></FileTypeImg>
                   <div style="margin-left: 20px">{{ el }}</div>
                 </div>
                 <div class="download">
@@ -81,27 +79,27 @@
             <el-tab-pane label="课程作业" name="second">
               <div class="work">
                 <div>
-                  <div class="question">{{data.workItem.name}}</div>
+                  <div class="question">{{ data.workItem?.name }}</div>
                   <div style="margin-top: 16px; display: flex">
                     <div class="tag1">必修</div>
                     <div class="tag3" style="margin-left: 11px">作业</div>
                   </div>
                 </div>
-                <div class="submit" @click="toWork" v-if="!data.workFlag">提交</div>
+                <div class="submit" @click="toWork(data.workItem)" v-if="!data.workFlag">提交</div>
               </div>
             </el-tab-pane>
             <el-tab-pane label="课程考试" name="third">
               <div class="work">
                 <div>
                   <div class="question">
-                    {{data.examItem.name}}
+                    {{ data.examItem?.name }}
                   </div>
                   <div style="margin-top: 16px; display: flex">
                     <div class="tag1">必修</div>
                     <div class="tag3" style="margin-left: 11px">考试</div>
                   </div>
                 </div>
-                <div class="submit" @click="toExamItem" v-if="!data.examFlag">去考试</div>
+                <div class="submit" @click="toExamItem(data.examItem)" v-if="!data.examFlag">去考试</div>
               </div>
             </el-tab-pane>
           </el-tabs>
@@ -116,7 +114,7 @@
           <div class="text">直播讲师</div>
           <div class="box"></div>
         </div>
-<!--        todo #面授课接口 讲师缺少img和介绍-->
+        <!--        todo #面授课接口 讲师缺少img和介绍-->
         <div
             v-for="(el, index) in teacher"
             :key="el.id"
@@ -143,109 +141,35 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import {reactive, toRefs, watch} from "vue";
-import word from '@/assets/image/file/word.png'
-import ppt from '@/assets/image/file/ppt.png'
-import pdf from '@/assets/image/file/pdf.png'
-import zip from '@/assets/image/file/zip.png'
-import md from '@/assets/image/file/md.png'
-import excel from '@/assets/image/file/excel.png'
-import medal1 from '@/assets/image/medal/medal1.png'
-import medal2 from '@/assets/image/medal/medal2.png'
-import medal3 from '@/assets/image/medal/medal3.png'
-import img from '@/assets/image/uploadimg.png'
+import FileTypeImg from "@/components/FileTypeImg.vue";
 import {request, useRequest} from "@/api/request";
 import {STU_OFFCOURSE_DETAIL} from "@/api/api";
+import {useRouter} from "vue-router";
 
-export default {
-  name: "FaceTeach",
-  setup() {
-    const {data} = useRequest(STU_OFFCOURSE_DETAIL, {})
-    const state = reactive({
-      activeName: "first",
-      enclosure: [
-        {
-          id: 1,
-          name: "项目参考文档.doc",
-          img: word,
-        },
-        {
-          id: 2,
-          name: "人工智能启蒙讲解讲义.pptx",
-          img: ppt,
-        },
-        {
-          id: 3,
-          name: "人工智能启蒙讲解讲义.xlsx",
-          img: excel,
-        },
-      ],
-      teacher: [
-        {
-          id: 1,
-          name: "王星天（显示事业）",
-          introduce: "教师是学生的镜子,学生是老师的影子。",
-          peopleimg: img,
-          medal: [
-            medal1,
-            medal2,
-            medal3,
-          ],
-        },
-        {
-          id: 2,
-          name: "王星天（显示事业）",
-          introduce: "教师是学生的镜子,学生是老师的影子。",
-          peopleimg: img,
-          medal: [
-            medal1,
-            medal2,
-          ],
-        },
-        {
-          id: 3,
-          name: "王星天（显示事业）",
-          introduce:
-              "教师是学生的镜子,学生是老师的影子。教师是学生的镜子,学生是老师的影子。教师是学生的镜子,学生是老师的影子。教师是学生的镜子,学生是老师的影子。",
-          peopleimg: img,
-          medal: [
-            medal1,
-            medal2,
-            medal3,
-          ],
-        },
-      ],
-      workers: [],
-      examinations: [],
-    })
-    const handleClick = (tab, event) => {
-      console.log(tab, event);
-    };
-    const download=(url)=>{
-      window.open(url)
-    }
-    function toWork(){
+const router = useRouter()
 
-    }
-    function toExamItem(){
-
-    }
-    return {
-      ...toRefs(state),
-      handleClick,
-      download,
-      toExamItem,
-      toWork,
-      data,
-      pdf,
-      word,
-      ppt,
-      zip,
-      excel,
-    };
-  },
+const {data} = useRequest(STU_OFFCOURSE_DETAIL, {})
+const state = reactive({
+  activeName: "first",
+  enclosure: ''
+})
+const {activeName, enclosure} = toRefs(state)
+const handleClick = (tab, event) => {
+  console.log(tab, event);
 };
+const download = (url) => {
+  window.open(url)
+}
+
+function toWork(obj) {
+  router.push({path: '/homeworkpage', query: {id: obj.courseId}})
+}
+
+function toExamItem(obj) {
+  router.push({path: '/starttest', query: {id: obj.courseId}})
+}
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->