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>
          </a>
          <div style="padding: 10px 1rem 1rem;background: #f3f3f3;">
          <a href="javascript:void(0)" @click="funGkk(item.jslj)">
            <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">{{item.logcount}}人听课</div>
          </a>
            <!-- -{{ item.kclj }}-{{item.sfxs}}-{{ item.jslj }} -->
            <div v-if="(item.dqztpx=='1'||item.dqztpx=='2')&&item.kclj!=null"><a-button type="primary" class="ggkButton" target="_blank" :href="item.kclj" @click="jrkt(item)">进入课堂</a-button></div>
            <div v-else><a-button type="primary" class="ggkButton" target="_blank" disabled :href="item.kclj" @click="false" style="background-color: rgb(197, 192, 192);">进入课堂</a-button></div>
          </div>
        </div>
      </a-col>
      <a-col :span="25" style="line-height: 50px;">
        <div v-show="current==0" style="text-align: center;">
          暂无数据
        </div>
        <div v-show="1 == pageNo&&current>4">
          <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';
import { useUserStore } from '/@/store/modules/user';
const userStore = useUserStore();
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

enum Api {
  list = '/kcGongkaikelog/kcGongkaikelog/list',
  save='/kcGongkaikelog/kcGongkaikelog/add',
  edit='/kcGongkaikelog/kcGongkaikelog/edit',
  deleteOne = '/kcGongkaikelog/kcGongkaikelog/delete',
  deleteBatch = '/kcGongkaikelog/kcGongkaikelog/deleteBatch',
  importExcel = '/kcGongkaikelog/kcGongkaikelog/importExcel',
  exportXls = '/kcGongkaikelog/kcGongkaikelog/exportXls',
}
/**
 * 公开课点击教师链接
 * @param jslj 教师链接
 */
function funGkk(jslj){
  if(jslj){
    window.open(jslj,"_blank")
  }
}

function imgOnError(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 jrkt(item){
  console.log(`🚀 ~ file: index.vue:109 ~ jrkt ~ item:`, item)
  const format = 'yyyy-MM-dd hh:mm:ss';
  let kssj = Date.parse(item.rq+" "+item.kssj+":00");
  let jssj = Date.parse(item.rq+" "+item.jssj+":00");
  let dqsj = Date.parse(dateFormat(new Date(), format));
  console.log(`🚀 ~ file: index.vue:114 ~ jrkt ~ dqsj:`, kssj,dqsj,jssj)
  if(kssj<=dqsj && jssj>= dqsj){
    var par = {usercode:userStore?.getUserInfo?.username,username:userStore?.getUserInfo?.realname,shijian: dateFormat(new Date(), format),gkkid:item.id}
    saveOrUpdate(par, false) .then((res) => { }) 
  }
}
const saveOrUpdate = (params, isUpdate) => {
  let url = isUpdate ? Api.edit : Api.save;
  return defHttp.post({ url: url, params }, { isTransformResponse: false });
}
/**
 * 公开课收起
 */
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'
  
  var width = window.screen.width * window.devicePixelRatio;
  console.log(`🚀 ~ file: index.vue:110 ~ newFunction ~ width:`, width)
  if(width<800){
    queryParam.value.pageSize = '1'
  }
  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)
    var list = res.records
    for(var i=0;i<list.length;i++){
      var kssj = new Date(list[i].rq+" "+list[i].kssj+":00");
      var jssj = new Date(list[i].rq+" "+list[i].jssj+":00");
      var dqsj = new Date();
      
      if(kssj<=dqsj&&jssj>=dqsj){
        console.log(`🚀 ~ file: index.vue:166 ~ list ~ dqsj:`, 11111111111)
        list[i].sfxs2 = 1
      }
    }
    console.log(`🚀 ~ file: index.vue:169 ~ list ~ list:`, list)
    listData.value.push(...list)
    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>