ufutx_official_website/src/components/pc/exam/examHome.vue

<script setup>
import { onMounted, ref } from 'vue'
import ExamHeader from '@/components/pc/exam/examHeader.vue'
import request from '@/utils/request.js'
import { useRouter } from 'vue-router'
import { Swiper, SwiperSlide } from 'swiper/vue'
import { A11y, Autoplay, Lazy, Navigation, Pagination, Scrollbar } from 'swiper'
import 'swiper/css'
import 'swiper/css/navigation'
import 'swiper/css/pagination'
import 'swiper/css/scrollbar'
import 'swiper/css/lazy'
import 'swiper/css/autoplay'


const router = useRouter()

const modules = [Navigation, Pagination, Scrollbar, A11y, Lazy, Autoplay]
const onSwiper = (swiper) => {
};

const swiperList = ref( [

  ])
//类型
const typeIndex = ref(0)
const typeList = ref([
  {
    id:'all',
    name:'全部课程'
  },
])
const examList = ref([
])
// 展示联系二维码
const flag = ref(false)

const changeType =(item,index) => {
  typeIndex.value = index
  getList()
}
const goToBannerPath = (path,index) => {
  console.log(path,'ppp')
  if (path){
    location.href = path
  }
}
const goToPath = (path,row) => {
   localStorage.setItem('examType',typeIndex.value)
    router.push({
      name: path,
      query:{id:row.id}
    })
}
const getTypeList = () => {
  request.get(`/go/api/app/v2/exam/home`)
    .then(res => {
      let result = res.data
      // examList.value = res.data
      swiperList.value =result.carousel_list
      typeList.value = [...typeList.value,...result.paper_cate_list]
      if (localStorage.getItem('searchHome')){
        searchKeyword.value = localStorage.getItem('searchHome')
        console.log(searchKeyword.value,'searchKeyword')
        localStorage.removeItem('searchHome')
      }
      if (localStorage.getItem('examType')){
        typeIndex.value = localStorage.getItem('examType') * 1
        console.log(searchKeyword.value,'searchKeyword')
        localStorage.removeItem('examType')
      }else {
        typeIndex.value = 0
      }
      getList()

    })
}
const searchKeyword = ref('')
const changeSearch = (e) => {
  searchKeyword.value = e
  getList()
}
const getList = () => {
  request.get(`/go/api/app/v2/exam/paper/list?category_id=${typeIndex.value == 0 ? '' : typeList.value[typeIndex.value].id}&keyword=${searchKeyword.value}`)
    .then(res => {
      let result = res.data
      examList.value = res.data
      // swiperList.value =result.carousel_list
      // typeList.value = [...typeList.value,...result.paper_cate_list]
    })
}
// 新增时间格式化函数
// 优化后的时间格式化函数
const formatExamTime = (start, end) => {
  if (!start || !end) return null;

  const startDate = new Date(start);
  const endDate = new Date(end);

  // 日期格式化为两位数
  const format = n => n.toString().padStart(2, '0');

  // 分解日期组件
  const s = {
    y: startDate.getFullYear(),
    m: format(startDate.getMonth() + 1),
    d: format(startDate.getDate()),
    t: startDate.toTimeString().substr(0,5)
  };

  const e = {
    y: endDate.getFullYear(),
    m: format(endDate.getMonth() + 1),
    d: format(endDate.getDate()),
    t: endDate.toTimeString().substr(0,5)
  };

  // 构建日期部分
  let datePart = '';
  if (s.y !== e.y) {
    datePart = `${s.y}-${s.m}-${s.d} ${s.t} 至 ${e.y}-${e.m}-${e.d} ${e.t}`;
  } else if (s.m !== e.m) {
    datePart = `${s.y}-${s.m}-${s.d} ${s.t} 至 ${e.m}-${e.d} ${e.t}`;
  } else if (s.d !== e.d) {
    datePart = `${s.y}-${s.m}-${s.d} ${s.t} 至 ${e.m}-${e.d} ${e.t}`;
  } else {
    datePart = `${s.y}-${s.m}-${s.d}  ${s.t}-${e.t}`;
  }

  return `${datePart}`;
}
onMounted(() => {
  window.addEventListener("scroll", () => {
    // 获取滚动元素的滚动距离
    let scrollTop =
      window.pageYOffset || document.documentElement.scrollTop ||document.body.scrollTop;
    // 判断回到顶部按钮的显示条件,如果滚动距离大于1000就显示
    scrollTop > 300 ? (flag.value= true) : (flag.value = false);
  }, true);
  typeIndex.value = -1
  getTypeList()
})
</script>

<template>
<div class='exam-home'>
  <exam-header @search='changeSearch' :searchKeyword='searchKeyword'></exam-header>
  <div>
    <swiper
      id="swiper"
      :modules="modules"
      :slides-per-view="1"
      :space-between="0"
      lazy
      loop
      :autoplay="true"
      @swiper="onSwiper"
      :pagination="{
        clickable: true
      }"
    >
      <swiper-slide
        class="banner-swiper"
        v-for="(item, index) in swiperList"
        :key="index"
      >
        <img class="swiper-lazy" :src="item.pic"  alt="轮播图"  @click.stop='goToBannerPath(item.path,index)' />
      </swiper-slide>
    </swiper>
    <div class='exam-home-type-box'>
      <div class='exam-home-type-list'>
        <div class='exam-home-type-item' @click.stop='changeType(item,index)' :class='typeIndex == index ?"exam-home-type-item-active" : ""' v-for='(item,index) in typeList' :key='index'>{{item.name}}</div>
      </div>
    </div>
    <div class='exam-home-list-box'>
      <div v-if='examList && examList.length > 0' class='exam-home-list-style'>
        <div class='exam-home-list-item' v-for='(item,index) in examList' :key='index' @click='goToPath("examDetail",item)'>
          <img :src='item.pic' alt='' class='exam-home-list-item-pic'>
          <div class='exam-home-list-message-box'>
            <div class='exam-home-list-message'>
              <div class='exam-home-list-message-title'>{{item.title || ''}}</div>
              <div class='exam-home-list-message-exam-time'>考试时间：{{formatExamTime(item.start_time_str, item.end_time_str) || '--'}}</div>
              <div class='exam-home-list-message-exam-time'>补考时间：{{formatExamTime(item.resit_start_time_str, item.resit_end_time_str) || '--'}}</div>
            </div>
          </div>
        </div>
      </div>
      <div v-else class='exam-empty-box'>
        <img src='https://images.health.ufutx.com/202505/19/5c1dbfea480f286b0208395f90a2cac3.png' alt='' class='exam-empty-icon'>
        <div class='exam-empty-title'>敬请期待</div>
      </div>
    </div>
    <div class='exam-home-wechat-icon' >
      <img src='https://images.health.ufutx.com/202505/14/5b720a7d07e87354b96c2094d948bb9a.png' alt=''>
    </div>
  </div>
</div>
</template>

<style scoped>
.exam-home{
  background: #f5f5f5;
  height: 100vh;
  overflow-y: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
  &::-webkit-scrollbar {
    display: none; /* Chrome/Safari/Opera */
  }
}
/* 顶部轮播图 */
#swiper {
  padding-top: 100px;
  width: 100%;
  height: 708px;
}

#swiper .banner-swiper {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1200;
}

#swiper .banner-swiper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.exam-home-type-box{
    display: flex;
    padding: 20px 0 20px 360px ;
    align-items: center;
    background: #FFF;
    //backdrop-filter: blur(15px);
    flex-shrink: 0;  /* 防止容器收缩 */

}
.exam-home-type-list{
    padding-bottom: 10px;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    width: 100%;
    overflow-x: auto;

}
.exam-home-type-item{
    margin-right: 20px;
    display: flex;
    padding: 12px 20px;
    justify-content: center;
    align-items: center;
    border-radius: 100px;
    border: 1px solid  #DDD;
    color: #0E0E0E;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    cursor: pointer;
    flex-shrink: 0;  /* 防止单个项被压缩 */
}
.exam-home-type-item-active{
    background:  #409EFF;
    color: #FFF;
    border: 1px solid  #409EFF;
}
.exam-home-list-box{
    padding: 20px 360px 120px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    background: #F5F5F5;
}
.exam-home-list-style{
  display:flex;
  flex-wrap: wrap;
}
.exam-home-list-item{
    margin-right: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
    cursor: pointer;
}
.exam-home-list-item:nth-child(3n){
    margin-right: 0;
}
.exam-home-list-item-pic{
    width: 386px;
    height: 240px;
    border-radius: 10px 10px 0 0;
    object-fit: cover;
}
.exam-empty-box{
  margin: 60px auto;
  .exam-empty-icon{
    margin-bottom: 20px;
    width: 147px;
    height: 121px;
  }
  .exam-empty-title{
    color: #0E0E0E;
    text-align: center;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }
}
.exam-home-list-message-box{
    background: #ffffff;
    border-radius: 10px;
}
.exam-home-list-message{
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    margin-top: -20px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.30);
    backdrop-filter: blur(12.5px);
  overflow: hidden;
}
.exam-home-list-message-title{
    height: 18px;
    color: #0E0E0E;
    font-size: 18px;
    font-weight: 600;
    line-height: 18px;
  max-width: 340px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.exam-home-list-message-exam-time{
    margin-top: 10px;
    color:  #66676C;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
}
.exam-home-wechat-icon{
    position: fixed;
    right: 20px;
    bottom: 120px;
    width: 190px;
    height: 220px;
    z-index: 101;
    img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}
</style>