dbsd_kczx/src/views/site/yuYueKeCheng/index.vue

<template>
  <a-card class="rowGutter">
    <template #title>
      <span class="titleName">预约课程</span>
      <span class="titleDownload"><a href="javascript:void(0);">线上课堂评价表</a></span>
      <span class="titleDownload"><a href="javascript:void(0);">听课记录</a></span>
      <span class="titleDownload"><a href="javascript:void(0);">同行评价表</a></span>
    </template>
    <template #extra><a href="javascript:void(0);">查看更多</a></template>
    <a-row class="rowGutter" :gutter="[16,16]">
      <a-col :xs="{ span: 24 }" :sm="{ span: 8 }" :lg="{ span: 6 }" v-for="(item,index) in list" :key="index" class="itemBigBox">
        <div class="itemDate">
          {{ item.skrq }} {{ formatTime(item.hhks) }}-{{ formatTime(item.hhjs) }}
        </div>
        <div class="itemBox">
          <div>
            <div class="itemTitle"></div>
            <div class="itemTtleName">{{ item.kcmc }}</div>
          </div>
          <a-divider class="itemDivider"/>
          <div class="itemInteriorBox">
            <a-row>
              <a-col :span="16">
                <div class="itemSkSj">{{ item.skjs }}</div>
                <div class="itemKkDw">{{ item.kkdw }}</div>
              </a-col>
              <a-col :span="8" class="itemInteriorRow">
                <div class="itemXkrsNum">{{ item.xkrs }}</div>
                <div class="itemXkrs">选课人数</div>
              </a-col>
              <a-col :span="24">
                <div>
                  {{ item.skdd }}
                </div>
              </a-col>
              <a-col :span="24">
                <a-button type="primary" class="itemYyButton">预约</a-button>
                <a-button type="primary" class="itemBaoCuoButton">报错</a-button>
              </a-col>
            </a-row>
          </div>
        </div>
      </a-col>
    </a-row>
  </a-card>
</template>
<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue';
import { TeamOutlined } from '@ant-design/icons-vue';
// import { dateUtil, formatToDate } from '/@/utils/dateUtil';
import { getUserId } from '/@/views/site/utils/index';

import { defHttp } from '/@/utils/http/axios';
enum Api {
  list = '/kcYuyue/kcYuyue/findTingkeZuJiByPage',
}

/**
 * 列表接口
 * @param params
 */
const listApi = (params) => defHttp.get({ url: Api.list, params });

const list = ref<any>([]);
onMounted(() => {
  listApi({ pageSize: 4, isdeleted:0, userid: getUserId(), isOrderByNow: true }).then(res => {
    list.value = (res?.records) ?? [];
  });
});

/**
 * 转换时间由【0012】转成【00:12】
 * @param time 四个字符，时分，无分隔
 */
function formatTime(time: string) {
  if(!time) return '';
  let t_i_m_e = time.split('');
  return [t_i_m_e[0],t_i_m_e[1],':',t_i_m_e[2],t_i_m_e[3]].join('');
}

</script>
<style lang="less" scoped>
.titleName {
  font-size: 24px;
  font-weight: bold;
}
.titleDownload {
  padding: 15px;
}
.itemBigBox {
  margin-bottom: 40px;
}
.itemDate {
  border-radius: 25px;
  background: #cccccc8c;
  width: 70%;
  margin-bottom: 0.5rem;
  text-align: center;
  margin: 0 auto .5rem;
  padding: 0.5rem;
}
.itemBox {
  border: 2px #eef1f2 solid;
}
.itemTitle {
  width: 100%;
  height: 20px;
  background-color: #1c84c6;
}
.itemTtleName {
  width:100%;
  white-space:normal;
  word-break:break-all;
  overflow:hidden;
  padding: 10px;
  height: 70px;
  font-weight: 600;
  font-size: 16px;
}
.itemDivider {
  margin: 0px;
  color: #eef1f2;
}
.itemInteriorBox {
  padding: 20px;
  font-weight: 600;
}
.itemSkSj {
  height: 30px;
  font-size: 16px;
}
.itemKkDw {
  height: 30px;
  font-size: 14px;
}
.itemInteriorRow {
  text-align: center;
  height: 70px;
}
.itemXkrsNum {
  color: #1c84c6;
  font-size: 24px;
  font-weight: 600;
}
.itemXkrs {
  font-size: 14px;
}
.itemSkdd {
  height: 60px;
}
.itemYyButton {
  background-color: #1c84c6;
  float: left;
  font-weight: 600;
}
.itemBaoCuoButton {
  background-color: #1c84c6;
  float: right;
  font-weight: 600;
}



</style>