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

<template>
  <a-card class="rowGutter" id="jcgkkDom">
    <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="javascript:void(0)" @click="funGkk(item.jslj)">
          <div>
            <span style="position: absolute;top: 4rem;border-radius: 0 10px 10px 0;background: #1ab394;color: #FFF;padding: 3px 10px 3px 5px;z-index: 2;" v-if="item.dqztpx == 1">{{item.dqzt}}</span>
            <span style="position: absolute;top: 4rem;border-radius: 0 10px 10px 0;background: #1c84c6;color: #FFF;padding: 3px 10px 3px 5px;z-index: 2;" v-if="item.dqztpx == 2">{{item.dqzt}}</span>
            <span style="position: absolute;top: 4rem;border-radius: 0 10px 10px 0;background-color: rgba(0,0,0,0.46);color: #FFF;padding: 3px 10px 3px 5px;z-index: 2;" v-if="item.dqztpx == 3">{{item.dqzt}}</span>
            <div>
              <img style="border-radius: 10px 10px 0 0;margin-bottom: 8px;" :class="classFun(index)" @error="imgOnError($event)" :src="getFileAccessHttpUrl(item.tpmc)"  height="170px"/>
              <!-- <img style="border-radius: 10px 10px 0 0;margin-bottom: 8px;" :class="classFun(index)" v-if="!item.tpmc" src="/resource/img/kc/moren.png" height="170px"/> -->
              <!-- <AImage style="border-radius: 10px 10px 0 0;" :class="classFun(index)" :onerror="'/resource/img/kc/moren.png'" :src="getFileAccessHttpUrl(item.tpmc)" :preview="false" :width="'100%'" height="170px"/> -->
            </div>

          </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>
            <!-- -{{ item.kclj }}--{{ item.jslj }} -->
            <div><a-button type="primary" class="ggkButton" target="_blank" :href="item.kclj" @click.stop>进入课堂</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
/**
 * 公开课点击教师链接
 * @param jslj 教师链接
 */
function funGkk(jslj){
  if(jslj){
    window.open(jslj,"_blank")
  }
}

function imgOnError(event){
  console.log(`🚀 ~ file: index.vue:78 ~ imgOnError ~ event:`, event)
  let img = event.srcElement;  //已经弃用
  img.src = '/resource/img/kc/moren.png'; //data中的图片
  img.onerror = null; //防止闪图，写了但是还是会疯狂回调onerror的注册事件
}
function classFun(index){
  let stylecss = "redImgClass";
  if(index%3<1){
    stylecss = "redImgClass";
  }else if(index%3==1){
    stylecss = "blueImgClass";
  }else if(index%3>1){
    stylecss = "greenImgClass";
  }
  return stylecss;
}

/**
 * 公开课收起
 */
function funShouqi(){
  listData.value = []
  pageNo = 1
  loadData()
}
/**
 * 加载更多公开课
 */
function funMore(){
  console.log(`🚀 ~ file: index.vue:83 ~ funMore ~ current>pageNo:`, current,pageNo)
  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 => {
    console.log(`🚀 ~ file: index.vue:104 ~ list ~ res:`, res)
    listData.value.push(...res.records)
    current = res.pages
  })
}
/**
 * 事件格式化
 * @param rq 日期
 */
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>
<style>
.redImgClass{
  background:linear-gradient(45deg,#b23d59,#d3718a)
}
.blueImgClass{
  background:linear-gradient(45deg,#53637a,#8590a6)
}
.greenImgClass{
  background:linear-gradient(45deg,#7999fc,#79bdfc)
}

</style>