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

<template>
  <a-card class="rowGutter">
    <template #title>
      <div style="font-size: 24px;font-weight: bold;">精彩公开课</div>
      <div style="font-weight: 400; line-height: 1; color: #777;">荟萃多学科优秀教师，展现多样化精彩教学</div>
    </template>
    <a-row :gutter="[16,16]">
      <a-col v-for="(item,index) in listData" :key="index" :xs="{ span: 24 }" :sm="{ span: 8 }" :lg="{ span: 6 }">
        <!-- <div style="border-radius: 25px;background: #f3f3f3;margin-bottom: 0.5rem;text-align: center;margin: 0 auto .5rem;padding: 0.5rem;"> -->
        <div class="ggkTimeClass">
          {{funSj(item.rq)}} {{item.kssj}}-{{item.jssj}}
        </div>
        <div>
          <a :href="item.jslj?item.jslj:''" target="_blank">
          <div>
            <span style="position: absolute;top: 4rem;border-radius: 0 10px 10px 0;background: #1c84c6;color: #FFF;padding: 3px 10px 3px 5px;z-index: 9999;">公开课预告</span>
            <img style="border-radius: 10px 10px 0 0;margin-bottom: 8px;" v-if="!item.tpmc" src="/resource/img/kc/moren.jpg" height="170px"/>
            <AImage style="border-radius: 10px 10px 0 0;" v-else :src="getFileAccessHttpUrl(item.tpmc)" :width="'100%'" height="170px"/>
          </div>
          <div style="padding: 10px 1rem 1rem;background: #f3f3f3;">
            <div class="ggkTitle ggkCcxs" :title="item.hxr +`·`+item.hxrlb">{{item.hxr}} · {{item.hxrlb}}</div>
            <div class="ggkTwoTitle ggkCcxs" :title="item.zc +`·`+item.xy">{{item.zc}} {{item.xy}}</div>
            <div class="ggkThreeTitle ggkCcxs">{{item.ktzt}}</div>
            <div class="ggkFourTitle">0人听课</div>
            <div><a-button type="primary" class="ggkButton" target="_blank" :href="item.kclj" :disabled="index%2==0">进入课堂</a-button></div>
          </div>
        </a>
        </div>
      </a-col>
      <a-col :span="25" style="line-height: 50px;">
        <div v-show="1 == pageNo">
          <div style="text-align: center;"><a @click="funMore">更多...</a></div>
        </div>
        <div v-show="1 < pageNo && pageNo < current">
          <div style="text-align: center;"><a @click="funMore">更多...</a></div>
          <div style="text-align: right;margin-top: -51px;"><a @click="funShouqi">收起</a></div>
        </div>
        <div v-show="current == pageNo">
          <div style="text-align: center;"><a @click="funShouqi">收起</a></div>
        </div>
      </a-col>
    </a-row>
  </a-card>
</template>
<script setup lang="ts">

import { ref ,onMounted} from 'vue';
import { defHttp } from '/@/utils/http/axios';
import { dateFormat } from '/@/utils/common/compUtils';
import { Image as AImage } from 'ant-design-vue';
import { getFileAccessHttpUrl } from '/@/utils/common/compUtils';
import { useMessage } from '/@/hooks/web/useMessage';
let listData = ref<any>([]);
const list = (params) => defHttp.get({ url: '/kcGongkaike/kcGongkaike/getIndexList', params });

const { createMessage } = useMessage();
const queryParam = ref<any>({});
let pageNo = 1
let current = 0
function funShouqi(){
  listData.value = []
  pageNo = 1
  loadData()
}
function funMore(){
  if(current>pageNo){
    pageNo ++;
    loadData()
  }else{
    createMessage.error("没有更多数据了！");
  }
}
//进入就加载
onMounted(() => {
  loadData()
});
function loadData(){
  queryParam.value.sfxs = '1'
  queryParam.value.pageSize = '4'
  queryParam.value.pageNo = pageNo
  // queryParam.value.column = 'type'
  // queryParam.value.order = 'asc'
  list(queryParam.value).then(res=>{
    listData.value.push(...res.records) 
    current = res.size
  })
}
function funSj(rq){
  var sj = dateFormat(new Date(rq), 'MM月dd日')
  return sj;
}
</script>
<style lang="less" scoped>
.ggkTimeClass{
  display: inline-block;width: 90%;margin-bottom: 10px;margin-left:12px;padding: 0 15px;height: 40px;font-size: 16px;font-weight: 500;line-height: 39px;border-radius: 36px;background-color: #f3f3f3;text-align: center;
}
.ggkTitle{
  line-height: 2rem; font-size: 18px; font-weight: 600;color: black;
}
.ggkTwoTitle{
  color: black; font-size: 14px; line-height: 25px;
}
.ggkThreeTitle{
  font-size: 16px;
    color: #337ab7;
    font-weight: 700;
    line-height: 50px;
}
.ggkFourTitle{
  line-height: 40px;
    color: black;
}
.ggkButton{
  width: 100%;height:40px;background: #1c84c6;color:#FFF;font-weight: 600;font-size: 18px;border-radius: 5px;
  line-height: 37px;
}
.ggkCcxs{
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
</style>