From e0e61720fadb5fc6e51b54309dbe32b725030d47 Mon Sep 17 00:00:00 2001
From: yuping <82253452@qq.com>
Date: Mon, 20 Mar 2023 14:55:55 +0800
Subject: [PATCH] =?UTF-8?q?--demand=20=E9=9D=A2=E6=8E=88=E8=AF=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/faceteach/FaceTeachNoCourse.vue |  13 -
 src/views/faceteach/FaceTeachStuSign.vue  | 513 ++++++++++++++++++++++
 2 files changed, 513 insertions(+), 13 deletions(-)
 create mode 100644 src/views/faceteach/FaceTeachStuSign.vue

diff --git a/src/views/faceteach/FaceTeachNoCourse.vue b/src/views/faceteach/FaceTeachNoCourse.vue
index 767cd6b..06d8aa2 100644
--- a/src/views/faceteach/FaceTeachNoCourse.vue
+++ b/src/views/faceteach/FaceTeachNoCourse.vue
@@ -63,9 +63,6 @@
                 <div style="padding:20px;" class="content" v-html="data.offcourseDto?.outline"></div>
               </div>
             </el-tab-pane>
-            <!-- <el-tab-pane label="课程评论" name="third" :disabed=dayjs().isBefore(dayjs(data.planDto.beginTime))>
-
-            </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: 40px; margin-top: 20px;">
@@ -82,15 +79,6 @@
 										}"></FileTypeImg>
                     <div style="margin-left: 20px">{{ 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:#999;">-->
-<!--                      下载-->
-<!--                    </div>-->
-                    <!-- <div style="margin-left: 5px;color:#999;" @click="download(el)">
-                      下载
-                    </div> -->
-<!--                  </div>-->
                 </div>
               </div>
             </el-tab-pane>
@@ -112,7 +100,6 @@
             </div>
             <div class="introduce">{{ data.planDto?.bandDesc }}</div>
           </div>
-          <!--          <div class="follow">+ 关注</div>-->
         </div>
       </div>
     </div>
diff --git a/src/views/faceteach/FaceTeachStuSign.vue b/src/views/faceteach/FaceTeachStuSign.vue
new file mode 100644
index 0000000..a9b8d90
--- /dev/null
+++ b/src/views/faceteach/FaceTeachStuSign.vue
@@ -0,0 +1,513 @@
+<template>
+  <div
+    style="
+      background: #0078fc;
+      height: 150px;
+      width: 100%;
+      position: absolute;
+      top: 0;
+      z-index: -9999;
+    "
+  ></div>
+  <div class="faceteach" style="padding: 30px">
+    <!-- 面包屑导航 -->
+    <div class="crumb">
+      <div>课程列表</div>
+      <div style="margin-left: 6px; margin-right: 6px">/</div>
+      <div style="font-weight: 700">课程详情</div>
+
+      <div v-if="pName != ''" class="return">
+        <div style="display: flex" @click="returnclick">
+          <el-button style="color: #0073fb">
+            <img
+              class="img2"
+              style="margin-right: 11px; cursor: pointer"
+              src="../../assets/image/return.png"
+            />返回
+          </el-button
+          >
+        </div>
+      </div>
+    </div>
+    <!-- 面包屑导航 -->
+
+    <!-- 基本信息 -->
+    <div class="bascinfo">
+      <div style="margin-left: 46px">
+        <div class="title">【面授课】{{ data.planDto?.name }}</div>
+        <div class="time" style="margin-top: 26px">
+          <img
+            style="width: 15px; height: 17px"
+            src="../../assets/image/time.png"
+          />
+          <div style="margin-left: 8px">
+            {{
+              dayjs(data.planDto?.beginTime).format("YYYY-MM-DD HH:mm") +
+              " 至 " +
+              dayjs(data.planDto?.endTime).format("YYYY-MM-DD HH:mm")
+            }}
+          </div>
+        </div>
+        <div v-if="data.planDto?.address" class="time" style="margin-top: 23px">
+          <img
+            style="width: 16px; height: 18px"
+            src="../../assets/image/position.png"
+          />
+          <div style="margin-left: 8px">{{ data.planDto?.address }}</div>
+        </div>
+      </div>
+      <div>
+        <div style="display: flex">
+          <botton
+            class="btn"
+            style="margin-right: 20px"
+            :style="{   background: isAllowSign && !data.signFlag ?'rgb(57, 146, 249)' : '#999' }"
+            @click="signClick"
+          >{{ data.signFlag ? "已签到" : "签到" }}
+          </botton>
+        </div>
+      </div>
+    </div>
+    <!-- 基本信息 -->
+
+    <!-- 详细信息 -->
+    <div class="detailinfo">
+      <div class="detail">
+        <div class="detailT">
+          <div class="" style="margin-left: 48px; margin-right: 48px">
+            <div class="title">
+              <img
+                style="width: 20px; height: 20px"
+                src="../../assets/image/course.png"
+              />
+              <div class="text">课程详情</div>
+              <div class="box"></div>
+            </div>
+            <div style="display: flex; align-items: center">
+              <div class="content" v-html="data.offcourseDto?.intro"></div>
+            </div>
+          </div>
+        </div>
+
+        <div class="detailB">
+          <el-tabs v-model:activeName="activeName" @tab-click="handleClick">
+            <el-tab-pane label="课程介绍" name="first">
+              <div class="notice" style="padding:20px;font-size:14px;">
+                {{ data.offcourseDto?.intro || "暂无课程介绍" }}
+              </div>
+            </el-tab-pane>
+            <el-tab-pane label="课程大纲" name="second">
+              <div style="display: flex; align-items: center">
+                <div style="padding:20px;" class="content" v-html="data.offcourseDto?.outline"></div>
+              </div>
+            </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: 40px; margin-top: 20px;">
+                此课程无附件
+              </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: 20px">{{ el.slice(el.lastIndexOf('/')+1,el.indexOf('-'))  + el.slice(el.lastIndexOf('.')) }}</div>
+                  </div>
+                </div>
+              </div>
+            </el-tab-pane>
+          </el-tabs>
+        </div>
+      </div>
+      <div class="teacher">
+        <div class="title">
+          <img
+            style="width: 21px; height: 23px"
+            src="../../assets/image/livelecturer.png"
+          />
+          <div class="text">面授课讲师</div>
+          <div class="box"></div>
+        </div>
+        <div class="teacheritem">
+          <img class="peopleimg" :src="teacherInfo.avatar"/>
+          <div class="nameSpan">
+            <div class="teacherName" style="margin-right: 5px">
+              {{ data.planDto?.teacher }}
+            </div>
+            <div class="introduce">{{ data.planDto?.bandDesc }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {computed, onBeforeMount, onUnmounted, ref} from "vue";
+import FileTypeImg from "@/components/FileTypeImg.vue";
+import {request, useRequest} from "@/api/request";
+import {STU_OFFCOURSE_DETAIL, TASK_OFFCOURSE_NOTASK_SIGN,} from "@/api/api";
+import {useRoute, useRouter} from "vue-router";
+import {useUserInfo} from "@/api/utils";
+import {ElMessage} from "element-plus";
+import dayjs from "dayjs";
+import isBetween from "dayjs/plugin/isBetween";
+
+const router = useRouter();
+
+onBeforeMount(() => dayjs.extend(isBetween));
+
+const returnclick = () => router.back();
+
+const { query: { courseId }} = useRoute();
+
+const { data } = useRequest(STU_OFFCOURSE_DETAIL, { courseId, usePermission: true, });
+const teacherInfo = useUserInfo(computed(() => data.value?.planDto?.teacherId));
+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 handleClick = (tab, event) => console.log("附件", tab, event);
+const activeName = ref("first");
+const fielPath = ref(import.meta.env.VITE_FILE_PATH);
+const download = (url) => window.open(fielPath.value + url);
+
+function formateArr(strs) {
+  let newArr;
+  try {
+    newArr = JSON.parse(strs);
+  } catch {
+    newArr = strs?.split(",");
+  }
+  return newArr;
+}
+
+//签到
+const signClick = () => {
+  if (data.value.signFlag) {
+    return;
+  }
+  if (!isAllowSign.value) {
+    ElMessage.warning("未在允许签到时间范围内");
+    return;
+  }
+  data.value.signFlag = 1;
+  ElMessage.warning("签到成功");
+  request(TASK_OFFCOURSE_NOTASK_SIGN, { courseId: courseId, taskId: courseId, type: 3 });
+};
+</script>
+
+<style lang="scss">
+.faceteach {
+  .crumb {
+    color: #fff;
+    display: flex;
+    font-size: 14px;
+    line-height: 24px;
+  }
+
+  .bascinfo {
+    width: 100%;
+    height: 180px;
+    border-radius: 8px;
+    background-color: rgba(255, 255, 255, 1);
+    margin-top: 37px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .btn {
+      width: 146px;
+      height: 46px;
+      background: #2478ff;
+      border-radius: 4px;
+      box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #fff;
+      font-size: 14px;
+      font-weight: 800;
+      line-height: 24px;
+      cursor: pointer;
+      margin-right: 96px;
+    }
+
+    .title {
+      font-size: 20px;
+      font-weight: 800;
+      color: #333333;
+      line-height: 24px;
+      margin-left: -9px;
+    }
+
+    .time {
+      font-size: 14px;
+      color: #6e7b84;
+      line-height: 24px;
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  .return {
+    position: absolute;
+    right: 10%;
+
+    .text {
+      text-align: center;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+    }
+  }
+
+  .detailinfo {
+    width: 100%;
+    margin-top: 20px;
+    display: flex;
+    align-items: flex-start;
+
+    .detail {
+      flex: 1;
+      margin-right: 20px;
+
+      .detailT {
+        min-height: 263px;
+        background: #ffffff;
+        border-radius: 8px;
+        color: rgba(51, 51, 51, 1);
+
+        .title {
+          display: flex;
+          align-items: center;
+          padding-top: 39px;
+          position: relative;
+        }
+
+        .title .text {
+          margin-left: 8px;
+          font-size: 16px;
+          color: rgba(51, 51, 51, 1);
+          font-weight: 800;
+        }
+
+        .title .box {
+          width: 75px;
+          height: 10px;
+          background-color: rgba(36, 120, 255, 0.15);
+          position: absolute;
+          left: 23px;
+          top: 53px;
+        }
+
+        .content {
+          margin-left: 8px;
+          font-size: 14px;
+          color: rgba(51, 51, 48, 1);
+          font-weight: 500;
+          line-height: 35px;
+          margin-top: 30px;
+          padding-bottom: 30px;
+        }
+      }
+
+      .detailB {
+        min-height: 363px;
+        background: #ffffff;
+        border-radius: 8px;
+        margin-top: 20px;
+
+        .wenxintishi {
+          display: flex;
+          justify-content: stretch;
+          padding: 72px;
+        }
+
+        .el-tabs__item {
+          height: 69px;
+          padding: 25px 7px 0px 52px;
+          font-size: 14px;
+          font-weight: 500;
+        }
+
+        .el-tabs__nav-wrap::after {
+          background-color: rgba(56, 125, 247, 0.2);
+        }
+
+        .enclosure {
+          height: 89px;
+          margin-left: 51px;
+          margin-right: 40px;
+          // border-bottom: 1px solid rgba(56, 125, 247, 0.2);
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+
+          .enclosureL {
+            display: flex;
+            align-items: center;
+            font-size: 14px;
+            font-weight: 400;
+            color: #677d86;
+            line-height: 24px;
+          }
+
+          .download {
+            display: flex;
+            align-items: center;
+            font-size: 16px;
+            font-weight: 400;
+            color: #2478ff;
+            line-height: 24px;
+            cursor: pointer;
+          }
+        }
+
+        .work {
+          margin-left: 51px;
+          margin-right: 40px;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-top: 37px;
+        }
+
+        .work .question {
+          font-size: 14px;
+          font-weight: 500;
+          color: #333330;
+          line-height: 18px;
+        }
+
+        .work .submit {
+          width: 126px;
+          height: 46px;
+          background: #2478ff;
+          box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
+          border-radius: 4px;
+          font-size: 16px;
+          font-weight: 800;
+          color: #ffffff;
+          line-height: 24px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          cursor: pointer;
+        }
+      }
+    }
+
+    .teacher {
+      width: 434px;
+      min-height: 500px;
+      // height: 10%;
+      background-color: rgba(255, 255, 255, 1);
+      border-radius: 8px;
+
+      .title {
+        display: flex;
+        align-items: center;
+        padding-top: 39px;
+        position: relative;
+        margin-left: 48px;
+      }
+
+      .title .text {
+        margin-left: 8px;
+        font-size: 16px;
+        color: rgba(51, 51, 51, 1);
+        font-weight: 800;
+      }
+
+      .title .box {
+        width: 75px;
+        height: 10px;
+        background-color: rgba(36, 120, 255, 0.15);
+        position: absolute;
+        left: 23px;
+        top: 53px;
+      }
+
+      .teacheritem {
+        margin-left: 48px;
+        margin-right: 48px;
+        // min-height: 115px;
+        margin-top: 20px;
+        padding: 25px 0px;
+        display: flex;
+        position: relative;
+
+        // align-items: center;
+      }
+
+      .teacheritem .peopleimg {
+        width: 60px;
+        height: 60px;
+        border-radius: 30px;
+      }
+
+      .teacheritem {
+        .nameSpan {
+          width: 190px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+
+          .teacherName {
+            font-size: 14px;
+            font-weight: bold;
+            color: #394145;
+            display: flex;
+            align-items: center;
+          }
+        }
+      }
+
+      .teacheritem {
+        .nameSpan {
+          width: 190px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+
+          .teacherName {
+            font-size: 14px;
+            font-weight: bold;
+            color: #394145;
+            display: flex;
+            align-items: center;
+          }
+        }
+      }
+
+      .teacheritem .introduce {
+        font-size: 14px;
+        font-weight: 500;
+        color: #394145;
+        margin-top: 14px;
+      }
+
+      .teacheritem .follow {
+        width: 80px;
+        height: 30px;
+        background: #387df7;
+        border-radius: 4px;
+        margin-top: 28px;
+        position: absolute;
+        right: -25px;
+        font-size: 14px;
+        font-weight: 500;
+        color: #ffffff;
+        line-height: 24px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+      }
+    }
+  }
+}
+</style>