232 lines
8.7 KiB
Vue
232 lines
8.7 KiB
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&¤t>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> |