新增加载下一页

pages/student/timetable/index.vue

@@ -9,47 +9,19 @@
     <view class="main_section">
       <view class="section_1">
         <view class="ul">
-          <view class="li">
-            <text>周日</text>
-            <text>14</text>
-            <text></text>
-          </view>
-          <view class="li">
-            <text>周一</text>
-            <text>14</text>
-            <text></text>
-          </view>
-          <view class="li">
-            <text>周二</text> 
-            <text>14</text>
-            <text></text>
-          </view>
-          <view class="li">
-            <text>周日</text>
-            <text class="today">今</text>
-            <text class=""></text>
-          </view>
-          <view class="li">
-            <text>周一</text>
-            <text>14</text>
-            <text class="select_plan"></text>
-          </view>
-          <view class="li">
-            <text>周二</text>
-            <text>14</text>
-            <text></text>
-          </view>
-          <view class="li">
-            <text>周二</text>
-            <text>14</text>
-            <text></text>
+          <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">
-          XXX体育场馆
+          {{venuesInfo.name}}
         </view>
         <view class="item_box" style="text-align: right;color: #F59A23;" @click="more">
           更多
@@ -57,49 +29,15 @@
 
       </view>
 
-      <view class="section_3">
+      <scroll-view
+          class="section_3"
+          scroll-y="true"
+          :lower-threshold="lowerThreshold"
+          @scrolltolower="loadMoreData"
+          style="height: 100vh;"
+      >
         <view class="ul">
-          <view class="li" @click="openViewCourseInfo({id:1})">
-            <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 class="li" @click="openViewCourseInfo({id:2})">
+          <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>
@@ -140,7 +78,10 @@
             </view>
           </view>
         </view>
-      </view>
+      </scroll-view>
+      <!--      加载状态-->
+<!--      <fui-loading :isFixed="true" srcCol="/static/icon-img/loading_white.png" text="正在加载..." v-if="loading"></fui-loading>-->
+
     </view>
 
 <!--    底部导航-->
@@ -149,7 +90,7 @@
 </template>
 
 <script>
-// import user from '@/api/user.js';
+import memberApi from '@/api/member.js';
 import AQTabber from "@/components/AQ/AQTabber.vue"
 
 
@@ -159,75 +100,161 @@ export default {
   },
   data() {
     return {
-      formData:{},
-
-      //课程下拉菜单相关
-      show_course:false,//是否显示下拉菜单
-      //课程下拉菜单
-      course_name:'课程',//选中的下拉菜单名称
-      options_course: [
-        {
-          text: '请选择课程',
-          value: '',
-          checked: true
-        }, {
-          text: '羽毛球课程1',
-          value: '1'
-        }, {
-          text: '篮球课程2',
-          value: '2'
-        }
-      ],
-
-      //课室下拉菜单相关
-      show_classroom:false,//是否显示下拉菜单
-      //课程下拉菜单
-      classroom_name:'课室',//选中的下拉菜单名称
-      options_classroom: [
-        {
-          text: '请选择课室',
-          value: '',
-          checked: true
-        }, {
-          text: '羽毛球201',
-          value: '1'
-        }, {
-          text: '篮球室101',
-          value: '2'
-        }
-      ],
+      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: {
-    //选中课程下拉菜单点击事件
-    clickCourse(e){
-      console.log(e)
-      this.course_name = e.text
-      this.show_course = true
+    //初始化
+    async init(){
+      await this.getDate()
+      await this.getList()
+      await this.getDateList(); // 获取日期列表
+      console.log(1111,this.dateList)
     },
-    //显示下拉菜单
-    filterTapCourse() {
-      //显示下拉框
-      this.$refs.ref_course.show()
-      this.show_course = true;
+
+    //获取当前日期
+    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
+      ]
+    },
 
 
-    //选中课室
-    clickClassroom(e){
-      console.log(e)
-      this.classroom_name = e.text
-      this.show_classroom = true
+    //加载更过(下一页)
+    loadMoreData() {
+      //判断是否加载
+      if (!this.isReachedBottom) {
+        this.isReachedBottom = true;//设置为不可请求状态
+        this.getList();
+      }
     },
-    //显示课室下拉菜单
-    filterTapClassroom() {
-      //显示下拉框
-      this.$refs.ref_classroom.show()
-      this.show_classroom = true;
+    //重置为第一页
+    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){