dbsd_kczx/src/views/site/renKeJiaoCheng/index copy.vue

<template>
  <a-card class="rowGutter" id="rkjcDom">
    <template #title>
      <span style="font-size: 24px;font-weight: bold;">任教课程</span>
      <span style="margin-left: 10px;"><a href="javascript:void(0);" @click="openChangeKcPage">修改课程提醒</a></span>
    </template>
    <!-- <template #extra></template> -->
    <div class="cardBody">

      <a-row>
        <a-col :xs="{ span: 24 }" :sm="{ span: 8 }" :lg="{ span: 8 }" :key="index" v-for="(item, index) in allList" :hidden="currentPageSize * 3 <= index" class="">

          <div class="ketangCard ketangCardcol"  >
            <div class="rjkcTopDiv">
              <span class="nDayDiv" v-if="item.cardType != '近6日课程'">{{ item.cardType }}</span>
              <span class="nDayDiv" v-else>{{ item.nth }}天后</span>
              <div style="text-align: left;"><span>{{ item.skrq }}&nbsp;{{ toWeek(item.WEEK) }}&nbsp;第{{ item.hh }}节</span></div>
            </div>
            <div class="rjkcBodyDiv">
              <div class="kcmcDiv">{{ item.kcmc }}</div>
              <div><a-rate v-model:value="item.stars" disabled/></div>
              <div class="skddDiv">{{ item.skdd }}</div>
              <div class="xkrsDiv">{{ item.xkrs }}人选课&nbsp;&nbsp;&nbsp;<a-button @click="toLivePage(item)" :disabled="!item.jsbh" class="buttonClass">进入课堂</a-button></div>
            </div>
          </div>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24" style="text-align: center;padding: 0.5rem;">
          <a @click="loadNext" v-if="currentPageSize != 1">加载更多</a>
          <a v-if="currentPageSize != 1" style="float: right;" @click="closePage">收起</a>
        </a-col>
      </a-row>
      <a hidden @click="initData">刷新</a>
    </div>
  </a-card>
  <baseModal ref="registerForm"/>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import baseModal from './baseModal.vue';
import { defHttp } from '/@/utils/http/axios';
import { addTingKeLog, getUserId } from '/@/views/site/utils';
import { onMounted } from 'vue';
import { useRouter } from 'vue-router'

onMounted(() => {
  initData();
})

const registerForm = ref();
const route = useRouter();

/**
 * 打开修改课程提醒的表单
 */
function openChangeKcPage(){
  registerForm.value.add();
}

function toLivePage(item){
  // route.push({ path:'/site/liveRoom',query:{ id: item.jsbh } })
  addTingKeLog(getUserId(),item.id);
  let routeData = route.resolve({ path:'/site/liveRoom',query:{ id: item.jsbh, ktId: item.id } });
  window.open(routeData.href, '_blank');
};

function loadNext(){
  currentPageSize.value++;
}

function closePage(){
  currentPageSize.value = 1;
}


const weebMap = {
  '1': '星期一',
  '2': '星期二',
  '3': '星期三',
  '4': '星期四',
  '5': '星期五',
  '6': '星期六',
  '7': '星期日',
}
function toWeek(week){
  return weebMap[week];
}

const teacherzzskList = ref<any>([]);
const teacherjjskList = ref<any>([]);
const teacherdskcList = ref<any>([]);
const teacheryskcList = ref<any>([]);
const teacherjlrkcbList = ref<any>([]);
const allList = ref<any>([]);
const currentPageSize = ref<number>(1);

async function initData() {
  currentPageSize.value = 1;
  let l1 = await getTeacherzzsk();
  let l2 = await getTeacherjjsk();
  let l3 = await getTeacherdskc();
  let l4 = await getTeacheryskc();
  let l5 = await getTeacherjlrkcb();

  allList.value = [...l1,...l2,...l3,...l4,...l5];
}

async function getTeacherzzsk() {
  let params = {
    userid: getUserId(),
  };
  let list = await defHttp.get({ url: '/ktgl/kcKetangbiao/getTeacherzzsk', params });
  list.forEach(x => x.cardType = '正在上课');
  teacherzzskList.value = list;
  return list;
}

async function getTeacherjjsk() {
  let params = {
    userid: getUserId(),
  };
  let list = await defHttp.get({ url: '/ktgl/kcKetangbiao/getTeacherjjsk', params });
  list.forEach(x => x.cardType = '即将上课');
  teacherjjskList.value = list;
  return list;
}

async function getTeacherdskc() {
  let params = {
    userid: getUserId(),
  };
  let list = await defHttp.get({ url: '/ktgl/kcKetangbiao/getTeacherdskc', params });
  list.forEach(x => x.cardType = '待上课程');
  teacherdskcList.value = list;
  return list;
}

async function getTeacheryskc() {
  let params = {
    userid: getUserId(),
  };
  let list = await defHttp.get({ url: '/ktgl/kcKetangbiao/getTeacheryskc', params });
  list.forEach(x => x.cardType = '已上课程');
  teacheryskcList.value = list;
  return list;
}

async function getTeacherjlrkcb() {
  let params = {
    userid: getUserId(),
  };
  let list = await defHttp.get({ url: '/ktgl/kcKetangbiao/getTeacherjlrkcb', params });
  list.forEach(x => x.cardType = '近6日课程');
  teacherjlrkcbList.value = list;
  return list;
}

</script>
<style lang="less" scoped>
.cardBody {
  // background: #f3f3f4;
}
.ketangCard {
  margin: .5rem;
}
.rjkcTopDiv {
  background: #fff;
  padding: .9rem;
  color: #1ab394;
  font-size: 18px;
  font-weight: bold;
  text-align:right;
}
.nDayDiv {
  top: -14px;
  right: -14px;
  position: relative;
  background: #1ab394;
  color: #fff;
  font-weight: 200;
  padding: 2px 6px 2px 6px;
  border-radius: 0 0 0 5px;
  text-align:left;
}
.rjkcBodyDiv {
  margin-top: 1px;
  background: #fff;
  padding: 1rem 2rem 2rem 2rem;
}
.skddDiv {
  color: #1c84c6;
  font-size: 18px;
  font-weight: bold;
}
.xkrsDiv {
  padding-top: 2.5rem;
  font-size: 18px;
  font-weight: bold;
  text-align: right;
}

.kcmcDiv {
  font-size: 24px;
  font-weight: bold;
}
.buttonClass {
  background: #1c84c6;
  font-weight: 600;
  color: #fff;
  border-radius: 5px;
  line-height: 23px;

  &[disabled] {
    background: #6cafda;
  }
}
.ketangCardcol{
  background-color: #f3f3f3;
  padding: 1px;
}
</style>