From 9f42702d52f60cd58c03fc060a41ae187113664a Mon Sep 17 00:00:00 2001
From: wyx <51903@qq.com>
Date: Thu, 23 Mar 2023 22:34:11 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E5=A2=9E=E5=8A=A0=E9=9D=A2=E6=8E=88?=
 =?UTF-8?q?=E6=89=AB=E7=A0=81=E8=B7=B3=E8=BD=AC=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/faceteach/FaceTeachCourseList.vue | 433 ++++++++++++++++++++
 1 file changed, 433 insertions(+)
 create mode 100644 src/views/faceteach/FaceTeachCourseList.vue

diff --git a/src/views/faceteach/FaceTeachCourseList.vue b/src/views/faceteach/FaceTeachCourseList.vue
new file mode 100644
index 0000000..50ad647
--- /dev/null
+++ b/src/views/faceteach/FaceTeachCourseList.vue
@@ -0,0 +1,433 @@
+<template>
+    <div class="faceteachcourselise">
+      <ReturnHead text="课程详情" :gohome="true"></ReturnHead>
+      <div class="main">
+        <div class="title" style="height: 120px;">
+          <div class="faceteachimgname">
+            <img
+              style="width: 129.5px; height: 73px"
+              :src="data.offcourseDto?.picUrl"
+              alt=""
+            />
+            <div class="faceteachname">{{ data.planDto?.name }}</div>
+          </div>
+        </div>
+        <div class="teacher">
+          <div style="width: 90%">
+            <div class="teachertitle" style="width: 100px">
+              <img
+                style="width: 17px; height: 17px"
+                src="../../assets/image/faceteach/livelecturer.png"
+              />
+              <div class="talk">开课</div>
+              <div class="box" style="width: 80px; right: 0px"></div>
+            </div>
+            <div v-if="8>1" class="teachermain" style="display: flex;flex-direction:column;">
+                <div 
+                    v-for="item,key in [1,2]"
+                    style="width: 100%;display: flex;justify-content: space-between;align-items: center;margin-bottom: 12px;background: rgb(247, 251, 253);height: 40px;padding: 5px;border-radius: 5px;">
+                    <div style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;width: 200px;">{{ item }}</div>
+                    <div 
+                        style="width:60px;height:30px;text-align:center;line-height:30px;background:#0078fc;border-radius:5px;color:#fff;cursor: pointer;">去上课</div>
+                </div>
+            </div>
+            <div v-else class="teachermain" style="display: flex;flex-direction:column;">
+                <div style="font-size: 12px;font-weight:600;margin-top:12px;margin-bottom:12px;">暂无开课</div>
+            </div>
+          </div>
+        </div>
+  
+        <div class="course">
+          <div style="width: 100%">
+            <el-tabs v-model:activeName="activeName" @tab-click="handleClick">
+              <el-tab-pane label="课程简介" name="first">
+                <div class="notice" style="padding: 10px; font-size: 14px">
+                  {{ data.offcourseDto?.intro || "暂无课程介绍" }}
+                </div>
+              </el-tab-pane>
+              <el-tab-pane label="课程大纲" name="second">
+                <div class="work">
+                  <div style="display: flex; align-items: center">
+                    <div
+                      id="face_img_id"
+                      style="padding: 10px"
+                      class="content faceteachsignup_img_class"
+                      v-html="data.offcourseDto?.outline"
+                    ></div>
+                  </div>
+                </div>
+              </el-tab-pane>
+              <el-tab-pane label="课程评论" name="fourth">
+                <CommentReply :faceId="courseId" :type="3" />
+              </el-tab-pane>
+              <el-tab-pane label="材料下载" name="third">
+                <div
+                  v-if="!data.offcourseDto?.attach"
+                  style="
+                    font-size: 14px;
+                    font-weight: 400;
+                    line-height: 24px;
+                    cursor: pointer;
+                    margin-left: 20px;
+                    margin-top: 10px;
+                  "
+                >
+                  此课程无附件
+                </div>
+                <div v-else>
+                  <div
+                    v-for="(el, index) in formateArr(data.offcourseDto.attach)"
+                    :key="index"
+                    class="enclosure"
+                    :style="{ borderBottom: '1px solid rgba(56, 125, 247, 0.2)' }"
+                  >
+                    <div class="enclosureL">
+                      <FileTypeImg
+                        :v-model="
+                          el.slice(el.lastIndexOf('/') + 1, el.indexOf('-')) +
+                          el.slice(el.lastIndexOf('.'))
+                        "
+                        :style="{
+                          width: '22px',
+                          height: '26px',
+                          marginLeft: '10px',
+                        }"
+                      ></FileTypeImg>
+                      <div style="margin-left: 10px">
+                        {{
+                          el.slice(el.lastIndexOf("/") + 1, el.indexOf("-")) +
+                          el.slice(el.lastIndexOf("."))
+                        }}
+                      </div>
+                    </div>
+                    <div class="download">
+                      <img
+                        style="width: 16px; height: 15px"
+                        src="../../assets/image/download.png"
+                      />
+                      <div
+                        style="margin-left: 5px; color: rgba(36, 120, 255, 1)"
+                        @click="download(el)"
+                      >
+                        下载
+                      </div>
+                      <!-- <div style="margin-left: 5px;color:#999;" @click="download(el)">
+                        下载
+                      </div> -->
+                    </div>
+                  </div>
+                </div>
+              </el-tab-pane>
+            </el-tabs>
+          </div>
+        </div>
+      </div>
+    </div>
+  </template>
+  
+  <script setup>
+  import ReturnHead from "@/components/ReturnHead.vue";
+  import {computed, onBeforeMount, ref,} from "vue";
+  import FileTypeImg from "@/components/FileTypeImg.vue";
+  import {request, useRequest} from "@/api/request";
+  import {FACETEACH_SIGNUP, STU_OFFCOURSE_DETAIL} from "@/api/api";
+  import {useRoute, useRouter} from "vue-router";
+  import {useUserInfo} from "@/api/utils";
+  import {ElLoading, ElMessage} from "element-plus";
+  import CommentReply from "@/components/CommentReply.vue";
+  import dayjs from "dayjs";
+  import isBetween from "dayjs/plugin/isBetween";
+  
+  const router = useRouter();
+  const returnclick = () => {
+    router.back();
+  };
+  const {
+    query: { courseId },
+  } = useRoute();
+  onBeforeMount(() => dayjs.extend(isBetween));
+  const loading = ref(false); // loading
+  const openLoading = () => {
+    loading.value = ElLoading.service({
+      lock: true,
+      text: "Loading",
+      background: "rgba(0, 0, 0, 0.7)",
+    });
+  };
+  openLoading();
+  const closeLoading = () => {
+    loading.value.close();
+  };
+  const { data } = useRequest(STU_OFFCOURSE_DETAIL, { courseId }, () => closeLoading());
+  const isAllowSign = computed(() => dayjs().isBetween(dayjs(data.value.planDto?.beginTime).subtract(data.value.beforeStart || 0, "minute"), dayjs(data.value.afterStart ? data.value.planDto?.beginTime : data.value.planDto?.endTime).add(data.value.afterStart || 0, "minute")));
+  const teacherInfo = useUserInfo(computed(() => data.value?.planDto?.teacherId));
+  const activeName = ref("first");
+  
+  const handleClick = (tab, event) => {
+    console.log("附件", tab, event);
+  };
+  const download = (url) => window.open(import.meta.env.VITE_BOE_API_URL + import.meta.env.VITE_FILE_PATH + url, "_top");
+  // 报名
+  function onLineSignUp(isAgain) {
+    if (!isAllowSign.value) {
+      ElMessage.warning("未在允许报名时间范围内");
+      return;
+    }
+    if (data.value.isSignUp && !isAgain) {
+      return;
+    }
+    request(FACETEACH_SIGNUP, { courseId });
+    data.value.isSignUp = true;
+    data.value.isSignUpAgain = isAgain;
+    data.value.isRefused = false;
+    ElMessage.success(isAgain ? "重新报名成功" : "报名成功");
+  }
+  
+  function formateArr(strs) {
+    return strs?.split(",");
+  }
+  
+  </script>
+  
+  <style lang="scss">
+  .faceteachcourselise {
+    width: 100%;
+    padding-bottom: 20px;
+    .faceteachsignup_img_class img {
+      max-width: 100% !important;
+    }
+    .main {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      margin-top: 10px;
+  
+      .title {
+        width: 90%;
+        border-radius: 4px;
+        background-color: rgba(255, 255, 255, 1);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        .faceteachimgname {
+          display: flex;
+          align-items: center;
+          width: 90%;
+          margin-top: 17px;
+          margin-bottom: 20px;
+        }
+        .faceteachname {
+          margin-left: 15px;
+          font-size: 14px;
+          font-weight: normal;
+          color: #394145;
+        }
+        .titlemain {
+          width: 90%;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          .timeposition {
+            .time {
+              display: flex;
+              align-items: center;
+            }
+          }
+          .titlebtn {
+            width: 83px;
+            height: 33px;
+            background: #2478ff;
+            box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
+            border-radius: 2px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 14px;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 12px;
+            cursor: pointer;
+          }
+        }
+      }
+      .teachertitle {
+        width: 90px;
+        position: relative;
+        display: flex;
+        align-items: center;
+        margin-top: 21px;
+        .talk {
+          font-size: 14px;
+          font-weight: bold;
+          color: #333333;
+          line-height: 12px;
+          margin-left: 7.5px;
+        }
+        .box {
+          position: absolute;
+          width: 62.5px;
+          height: 10px;
+          right: 6px;
+          bottom: -4px;
+          background: rgba(36, 120, 255, 0.15);
+        }
+      }
+      .teacher {
+        width: 90%;
+        padding-bottom: 15px;
+        border-radius: 4px;
+        background-color: rgba(255, 255, 255, 1);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        margin-top: 10px;
+  
+        .teachermain {
+          margin-top: 24px;
+          display: flex;
+          justify-content: space-between;
+          .teacherAvatar {
+            width: 50px;
+            height: 50px;
+            border-radius: 25px;
+            margin-left: 4px;
+          }
+          .teacherName {
+            font-size: 14px;
+            font-weight: 600;
+            color: #394145;
+            line-height: 21px;
+          }
+          .teacherIntro {
+            font-size: 13px;
+            font-weight: 400;
+            color: #394145;
+            line-height: 21px;
+            margin-top: 12px;
+          }
+          .teacherFollow {
+            width: 73px;
+            height: 28px;
+            background: #2478ff;
+            border-radius: 2px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 13px;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 12px;
+            color: #fff;
+            margin-top: 13px;
+          }
+        }
+      }
+      .detail {
+        width: 90%;
+        padding-bottom: 25px;
+        background: #ffffff;
+        border-radius: 4px;
+        margin-top: 10px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        .detailMain {
+          margin-top: 22px;
+          font-size: 13px;
+          font-weight: 400;
+          color: #333330;
+          line-height: 24px;
+        }
+      }
+      .course {
+        width: 90%;
+        // padding-bottom: 15px;
+        border-radius: 4px;
+        background: #ffffff;
+        margin-top: 10px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        .el-tabs__nav {
+          width: 90%;
+          margin-left: 5%;
+          display: flex;
+          justify-content: space-between;
+        }
+        .el-tabs__item {
+          height: 50px;
+          padding: 0px;
+          font-size: 14px;
+          font-weight: 500;
+          line-height: 21px;
+          padding-top: 15px;
+        }
+        .el-tabs__nav-wrap::after {
+          background-color: rgba(56, 125, 247, 0.2);
+        }
+        .el-tabs__header {
+          margin: 0;
+        }
+        .enclosure {
+          width: 90%;
+          margin-left: 5%;
+          height: 50px;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          .enclosureL {
+            display: flex;
+            align-items: center;
+            font-size: 13px;
+            font-weight: 400;
+            color: #677d86;
+            line-height: 19px;
+          }
+          .download {
+            display: flex;
+            align-items: center;
+            font-size: 13px;
+            font-weight: 400;
+            color: #2478ff;
+            line-height: 19px;
+          }
+        }
+        .work {
+          // margin-left: 51px;
+          // margin-right: 40px;
+          padding-bottom: 20px;
+          width: 90%;
+          margin-left: 5%;
+          display: flex;
+          flex-direction: column;
+          justify-content: space-between;
+          margin-top: 17.5px;
+        }
+        .work .question {
+          font-size: 13px;
+          font-weight: 500;
+          color: #333330;
+          line-height: 21.5px;
+        }
+  
+        .work .submit {
+          width: 73px;
+          height: 28px;
+          margin-top: 16px;
+          background: #2478ff;
+          box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
+          border-radius: 2px;
+          font-size: 13px;
+          font-weight: 400;
+          color: #ffffff;
+          line-height: 12px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+      }
+    }
+  }
+  </style>
+  
\ No newline at end of file