fe-student/src/views/faceteach/FaceTeachNoCommon.vue

<template>
  <div style=" background: #0078fc;height: 150px;width: 100%;position: absolute;top: 0;z-index:-9999;"></div>
  <div class="faceteachnocommon" 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="display:flex;">
        <img style="width:405px;height:230px;margin-left: 48px;border-radius: 8px;margin-top: 40px;"
             :src="data.offcourseDto.picUrl" alt="">
        <div style="margin-left: 40px;margin-top: 56px;">
          <div class="title">【面授课】{{ data.planDto?.name }}</div>
          <!-- <div class="time" style="margin-top: 30px">
            <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: 10px">
            <img style="width: 16px; height: 18px" src="../../assets/image/position.png"/>
            <div style="margin-left: 8px">{{ data.planDto?.address }}</div>
          </div> -->
         <!-- <div class="time" style="margin-top: 37px"> -->
         <botton class="btn" style="margin-right: 20px;width: 160px;height: 46px;margin-top: 37px;" v-if="data.planDto.applyFlag" @click="onLineSignUp" :style="{	background: data.isSignUp ? '#999' : 'rgb(57, 146, 249)'}">{{data.isSignUp?'已报名':'立即报名'}}</botton>
        </div>
      </div>
      <div style="display: flex">
      </div>
    </div>
    <!-- 基本信息 -->

    <!-- 详细信息 -->
    <div class="detailinfo">
      <div class="detail">
        <div class="detailB">
          <el-tabs v-model="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" :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;">
                此课程无附件
              </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>
        <!--        todo #面授课接口 讲师缺少img和介绍-->
        <div class="teacheritem" v-for="(item,index) in teacherItem">
          <img class="peopleimg" :src="item.avatar"/>
          <div class="nameSpan" style="align-items: flex-start;justify-content:flex-start;flex-direction: column;padding-left: 10px;">
            <div class="teacherName" style="padding: 5px 0;">
              {{ item.realName }}
            </div>
            <!-- <div class="introduce">{{ data.planDto?.bandDesc }}</div> -->
            <div class="introduce" style="margin: 0;">{{useOrgName(item.orgNamePath)}}</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 详细信息 -->
  </div>
</template>

<script setup>
import {computed, reactive, toRefs, watch, onUnmounted,ref} from "vue";
import FileTypeImg from "@/components/FileTypeImg.vue";
import {request, useRequest,boeRequest} from "@/api/request";
import {
  STU_OFFCOURSE_DETAIL,
  FACETEACH_SIGNUP
} from "@/api/api";
import {useRoute, useRouter} from "vue-router";
import {useUserInfo} from "@/api/utils";
import {ElMessage, messageConfig} from "element-plus";
import dayjs from "dayjs";
import { useOrgName } from "@/hooks/useOrgName.js";
import {BASE, GET_USER_LIST,GET_USER_INFO_OLDURL} from "@/api/ThirdApi";

const router = useRouter();
const returnclick = () => {
  router.back();
};
const {
  query: {courseId, type, id: taskId},
} = useRoute();

const {data} = useRequest(STU_OFFCOURSE_DETAIL, {courseId});
watch(data, (newVal) => {
  // newVal.planDto.offteachers.map(item => teacherInfos(item.teacherId));
  const teacherIdsArray = newVal.planDto.offteachers.map(item => item.teacherId);
  const teacherItemArr = []
  teacherIdsArray.forEach(id => {
    teacherItemArr.push(boeRequest(GET_USER_INFO_OLDURL, { userId: id }))
  })
      Promise.all(teacherItemArr).then(responses => {
        responses.map((arr)=>{
          const userInfo = arr.result;
          userInfo.avatar = userInfo?.avatar
            ? userInfo?.avatar.includes('upload')
              ? userInfo?.avatar
              : '/upload' + userInfo?.avatar
            : '/800e23f7-b58c-4192-820d-0c6a2b7544cc.png';
            teacherItem.value.push(userInfo)
        })
      }).catch(error => {
        console.log(error)
      })
});
const teacherItem = ref([])
// const teacherInfos = async (id) => {
//   const res = await boeRequest(GET_USER_INFO_OLDURL, { userId: id });
//   const userInfo = res.result;
//   userInfo.avatar = userInfo.avatar
//     ? userInfo.avatar.includes('upload')
//       ? userInfo.avatar
//       : '/upload' + userInfo.avatar
//     : '/800e23f7-b58c-4192-820d-0c6a2b7544cc.png';
//     teacherItem.value.push(userInfo)
// };
// const teacherInfo = useUserInfo(
//     computed(() => data.value?.planDto?.teacherId)
// );

const state = reactive({
  activeName: "first",
  enclosure: "",
  isAllowSign: false,
});
const {activeName, enclosure, isAllowSign} = toRefs(state);
const handleClick = (tab, event) => {
  console.log("附件", tab, event);
};
const download = (url) => {
  console.log('下载url',url)
};
const downloads = (url) => {
  ElMessage.warning("未在有效时间范围内，请耐心等待！");
};
let timer = null;

// 报名
function onLineSignUp() {
  if(data.value.isSignUp){
    return;
  }
  request(FACETEACH_SIGNUP, {courseId})
  data.value.isSignUp = true
  ElMessage.success("报名成功");
}

function formateArr(strs) {
  let arrs = strs.split(',')
  return arrs
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.faceteachnocommon {
  .crumb {
    color: #fff;
    display: flex;
    font-size: 14px;
    line-height: 24px;
  }

  .bascinfo {
    width: 100%;
    height: 310px;
    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>