ZhiHuiJiaoWu_UniApp/pages/student/timetable/index.vue

<!--课程-列表-->
<template>
  <view class="main_box">
    <!--自定义导航栏-->
    <view class="navbar_section">
      <view class="title">课表</view>
    </view>

    <view class="main_section">
      <view class="section_1">
        <view class="ul">
          <view class="li" v-for="(v,k) in dateList" :key="k" @click="selectDate(v.date)">
            <text>{{v.name}}</text>

            <text :class="[filteredData.schedule_date == v.date ? 'today':'']">{{today == v.date ? '今':v.today}}</text>

            <text :class="[today == v.date ?'select_plan':'']"></text>
          </view>
        </view>
      </view>

      <view class="section_2">
        <view class="item_box">
          {{venuesInfo.name}}
        </view>
        <view class="item_box" style="text-align: right;color: #F59A23;" @click="more">
          更多
        </view>

      </view>

      <scroll-view
          class="section_3"
          scroll-y="true"
          :lower-threshold="lowerThreshold"
          @scrolltolower="loadMoreData"
          style="height: 100vh;"
      >
        <view class="ul">
          <view v-for="(v,k) in tableList" :key="k" class="li" @click="openViewCourseInfo({id:v.id})">
            <view class="top_box">
              <view class="center_box">
                <view>班级：少年班</view>
                <view>时间：2020-05-25 15:30 - 17:30</view>
                <view>课室：302室
                </view>
                <view>课程：篮球少儿课
                </view>
              </view>
              <view class="right_box">
                <view class="tag" style="background:#fad24e;">上课中</view>
                <!--            <view class="tag" style="background:#1cd188;">待上课</view>-->
              </view>
            </view>
            <view class="bottom_box">
              <view class="hint">
                已签到学生 (15/34)
              </view>
              <view class="list_box">
                <view class="list">
                  <view class="itme">
                    <image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
                  </view>
                  <view class="itme">
                    <image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
                  </view>
                  <view class="itme">
                    <image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
                  </view>
                  <view class="itme">
                    <image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
                  </view>
                </view>
                <view class="btn">
                  详情
                </view>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
      <!--      加载状态-->
<!--      <fui-loading :isFixed="true" srcCol="/static/icon-img/loading_white.png" text="正在加载..." v-if="loading"></fui-loading>-->

    </view>

<!--    底部导航-->
    <AQTabber/>
  </view>
</template>

<script>
import memberApi from '@/api/member.js';
import AQTabber from "@/components/AQ/AQTabber.vue"


export default {
  components: {
    AQTabber,
  },
  data() {
    return {
      loading:false,//加载状态
      lowerThreshold: 100,//距离底部多远触发
      isReachedBottom: false,//防止重复加载|true=不可加载|false=可加载

      //筛选条件
      filteredData:{
        page:1,//当前页码
        limit:10,//每页返回数据条数
        total:10,//数据总条数
        schedule_date:'',//日期
        venue_id:'',//场地id
      },
      tableList:[],//表格数据

      venuesInfo:{},//场地信息

      //今日日期
      today: '',
      dateList:[]//日期列表
    }
  },
  onLoad() {
  },
  onShow() {
    this.init()//初始化
  },
  //下拉刷新
  async onPullDownRefresh() {
    //重置为第一页
    let schedule_date = this.filteredData.schedule_date
    console.log('eee',schedule_date)
    await this.loadData()
    this.filteredData.schedule_date = schedule_date
    await this.getList()
  },

  methods: {
    //初始化
    async init(){
      await this.getDate()
      await this.getList()
      await this.getDateList(); // 获取日期列表
      console.log(1111,this.dateList)
    },

    //获取当前日期
    async getDate() {
      let date = new Date();
      let year = date.getFullYear();
      let month = String(date.getMonth() + 1).padStart(2, '0'); // 月份前补零
      let day = String(date.getDate()).padStart(2, '0'); // 日期前补零
      let hour = date.getHours();
      let minute = date.getMinutes();
      let second = date.getSeconds();

      let res = `${year}-${month}-${day}`; // 格式化日期
      this.today = res;
      this.filteredData.schedule_date = res;
    },
    // 获取日期列表
    async getDateList() {
      const days = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
      const dateList = [];
      const today = new Date(); // 获取当前日期

      // 获取前2天和后4天的日期
      for (let i = -2; i <= 4; i++) {
        const date = new Date(today);
        date.setDate(today.getDate() + i); // 计算日期
        let dayOfWeek = days[date.getDay()]; // 获取星期几
        let formattedDateArr = this.formatDate(date); // 格式化日期
        let formattedDate = `${formattedDateArr[0]}-${formattedDateArr[1]}-${formattedDateArr[2]}`; // 格式化日期

        dateList.push({
          name: dayOfWeek,
          date: formattedDate,
          today: formattedDateArr[2],//日
        });
      }

      this.dateList = dateList
    },
    // 格式化日期为 YYYY-MM-DD
    formatDate(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return [
          year, month, day
      ]
    },


    //加载更过(下一页)
    loadMoreData() {
      //判断是否加载
      if (!this.isReachedBottom) {
        this.isReachedBottom = true;//设置为不可请求状态
        this.getList();
      }
    },
    //重置为第一页
    async loadData() {
      this.isReachedBottom = false; // 重置状态，以便下次触发加载更多
      this.filteredData = {
        page:1,//当前页码
        limit:10,//每页返回数据条数
        total:10,//数据总条数
        schedule_date:'',//日期
        venue_id:'',//场地id
      }
    },
    //获取列表
    async getList(){
      this.loading = true

      let data = {...this.filteredData}

      //判断是否还有数据
      if(this.filteredData.page * this.filteredData.limit > this.filteredData.total || this.filteredData.limit > this.filteredData.total ){
        this.loading = false
        uni.showToast({
          title: '暂无更多',
          icon: 'none'
        })
        return
      }

      let res = await memberApi.courseList(data)
      this.loading = false
      this.isReachedBottom = false;
      if (res.code != 1){
        uni.showToast({
          title: res.msg,
          icon: 'none'
        })
        return
      }

      this.tableList = res.data.list.data
      //场地信息
      this.venuesInfo = res.data.venues_info

      this.total = res.data.list.total
      this.page++
    },

    //选择日期
    async selectDate(date){
      this.loadData()
      this.filteredData.schedule_date = date
      this.getList()
    },



    //打开课时详情页
    openViewCourseInfo(item){
      uni.navigateTo({
        url: '/pages/student/timetable/info'
      })
    },
	//体育馆列表
	more(){
		uni.navigateTo({
		  url: '/pages/student/timetable/list'
		})
	}
  }
}
</script>

<style lang="less" scoped>

.main_box{
  background: #292929 ;
}

//自定义导航栏
.navbar_section{
  display: flex;
  justify-content: center;
  align-items: center;
  background: #292929;
  .title{
    padding: 110rpx 0 20rpx;
    font-size: 30rpx;
    color: #fff;
  }
}

.main_section{
  min-height: 100vh;
  background: #292929 100%;
  padding-top: 40rpx;
  padding-bottom: 150rpx;
  font-size: 24rpx;
  color: #FFFFFF;

  .section_1{
    background: #333333 100%;
    width: 100%;
    padding: 30rpx 28rpx;
    .ul{
      display: flex;
      justify-content: space-between;
      align-items: center;
      .li{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 10rpx;
        text{
          font-size: 24rpx;
          color: #FFFFFF;
          text-align: center;
        }
        text:nth-child(2){
          width: 44rpx;
          height: 44rpx;
        }
        text:nth-child(3){
          width: 8rpx;
          height: 8rpx;
        }
        .today{
          border-radius: 50%;
          background: #29D3B4;
          text-align: center;
          line-height: 42rpx;
        }
        .select_plan{
          background: #F59A23;
          border-radius: 50%;
        }
      }
    }
  }

  .section_2{
    margin-top: 30rpx;
    padding: 0 20rpx ;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 20rpx;
    .item_box {
      width: 45%;
      .fui-filter__item {
        display: flex;
      }
    }
  }

  .section_3{
    margin-top: 36rpx;
    color: #fff;
    font-size: 24rpx;
    .ul{
      padding:  0 26rpx;
      display: flex;
      flex-direction: column;
      gap: 30rpx;
      .li{
        position: relative;
        border-radius: 22rpx;
        background: #434544 100%;
        padding: 14rpx 0;
        display: flex;
        flex-direction: column;
        .top_box{
          padding: 20rpx 30rpx;
          .center_box{
            display: flex;
            flex-direction: column;
            gap: 10rpx;
            view{}
          }
          .right_box{
            .tag{
              position:absolute;
              top: 0rpx;
              right: 0rpx;
              padding: 10rpx;
              width: 102rpx;
              text-align: center;
              font-size: 24rpx;
              border-bottom-left-radius: 20rpx;
              border-top-right-radius: 20rpx;
            }
          }
        }
        .bottom_box{
          border-top: 1px dashed #F2F2F2;
          padding: 26rpx 16rpx 0 26rpx;
          .hint{
            color:#D7D7D7;
          }
          .list_box{
            margin-top: 22rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .list{
              display: flex;
              align-items: center;
              gap: 14rpx;
              .itme{
                image{
                  width: 48rpx;
                  height: 48rpx;
                  border-radius: 50%;
                }
              }
            }
            .btn{
              border: 1px solid #FAD04D;
              border-radius: 10rpx;
              background: #434544;
              color: #FAD04D;
              width: 110rpx;
              height: 60rpx;
              line-height: 55rpx;
              text-align: center;
              font-size: 24rpx;
            }
          }
        }
      }

    }
  }

}


</style>