From 303ca664d4e3b503a3c502d8251bc614ce298c5f Mon Sep 17 00:00:00 2001
From: liutong <836164388@qq.com>
Date: Tue, 8 Apr 2025 17:09:34 +0800
Subject: [PATCH] =?UTF-8?q?feat(coach/course/list=20&=20student/timetable)?=
 =?UTF-8?q?:=20=E6=96=B0=E5=A2=9E=E6=97=A5=E5=8E=86=E9=80=89=E6=8B=A9?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 为教练端课程列表和学生端课表页面添加日历选择功能
- 实现日期范围获取、日历打点设置和日期选择逻辑
-优化课程列表数据加载和分页功能
- 调整课程列表和课表的展示方式
---
 pages/coach/course/list.vue       | 286 +++++++++++++++++-------------
 pages/student/timetable/index.vue |  95 +++++++++-
 2 files changed, 256 insertions(+), 125 deletions(-)

diff --git a/pages/coach/course/list.vue b/pages/coach/course/list.vue
index 3e90bce..5e2fb18 100644
--- a/pages/coach/course/list.vue
+++ b/pages/coach/course/list.vue
@@ -9,40 +9,12 @@
     <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.week}}</text>
+
+            <text :class="[filteredData.schedule_date == v.date ? 'today':'']">{{today == v.date ? '今':v.today}}</text>
+
+            <text :class="[v.status == 2 ?'select_plan':'']"></text>
           </view>
         </view>
         <view class="btn" @click="show_calendar=true">
@@ -74,109 +46,46 @@
 
 <!--      </view>-->
 
-      <view class="section_3">
-        <view class="ul">
-          <view class="li" @click="openViewCourseInfoList({id:2})">
-            <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:#20caaf;">未开始</view>
-                <!--            <view class="tag" style="background:#1cd188;">待上课</view>-->
-              </view>
-            </view>
-            <view class="bottom_box">
 
-              <view class="list_box" style="margin-top: 0;">
-                <view class="hint">
-                  人数：30
-                </view>
-                <view class="btn">
-                  详情
-                </view>
-              </view>
-            </view>
-          </view>
 
-
-          <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})">
+      <scroll-view
+          class="section_3"
+          scroll-y="true"
+          :lower-threshold="lowerThreshold"
+          @scrolltolower="loadMoreData"
+          style="height: 100vh;"
+      >
+        <view class="ul">
+          <view
+              class="li"
+              v-for="(v,k) in tableList"
+              :key="k"
+              @click="openViewCourseInfoList(v)"
+          >
             <view class="top_box">
               <view class="center_box">
-                <view>班级：少年班</view>
-                <view>时间：2020-05-25 15:30 - 17:30</view>
-                <view>课室：302室
+                <view>班级：{{v.classes_name}}</view>
+                <view>时间：{{v.date}}</view>
+                <view>课室：{{v.address}}
                 </view>
-                <view>课程：篮球少儿课
+                <view>课程：{{v.courses_name}}
                 </view>
               </view>
               <view class="right_box">
-                <view class="tag" style="background:#e2e2e2;">已结束</view>
+                <!-- v.status|1=未开始,2=进行中,3=已结束-->
+                <view class="tag" :style="{background: v.status == 1 ? '#1cd188' : v.status == 2 ? '#fad24e' : '#ff4d4f'}">
+                  {{ v.status === 1 ? '未开始' : v.status === 2 ? '上课中' : '已结束' }}</view>
                 <!--            <view class="tag" style="background:#1cd188;">待上课</view>-->
               </view>
             </view>
             <view class="bottom_box">
               <view class="hint">
-                已签到学生 (15/34)
+                已签到学生 ({{v.sign_list.length }}/{{v.max_students.split(',').length }})
               </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 class="itme" v-for="(item,index) in v.sign_list || 0" :key="index">
+                    <image :src="$util.img(item.header)"></image>
                   </view>
                 </view>
                 <view class="btn">
@@ -186,7 +95,7 @@
             </view>
           </view>
         </view>
-      </view>
+      </scroll-view>
     </view>
 
 <!--    日历选择-->
@@ -211,6 +120,7 @@
 
 <script>
 // import user from '@/api/user.js';
+import memberApi from '@/api/member.js';
 import commonApi from '@/api/common.js';
 import AQTabber from "@/components/AQ/AQTabber.vue"
 
@@ -221,6 +131,21 @@ export default {
   },
   data() {
     return {
+      loading: false,//加载状态
+      lowerThreshold: 100,//距离底部多远触发
+      isReachedBottom: false,//防止重复加载|true=不可加载|false=可加载
+
+      //筛选条件
+      filteredData: {
+        page: 1,//当前页码
+        limit: 10,//每页返回数据条数
+        total: 10,//数据总条数
+        schedule_date: '',//日期
+        venue_id: '',//场地id
+      },
+      tableList: [],//表格数据
+      venuesInfo: {},//场地信息
+
       formData:{},
 
       //课程下拉菜单相关
@@ -259,6 +184,10 @@ export default {
         }
       ],
 
+      //今日日期
+      today: '',
+      dateList: [],//日期列表
+
       //日历选择相关
       show_calendar:false,//是否展示日期
       startDate:'',//开始日期
@@ -272,9 +201,20 @@ export default {
   onShow(){
     this.init()//初始化
   },
+  //下拉刷新
+  async onPullDownRefresh() {
+    //重置为第一页
+    let schedule_date = this.filteredData.schedule_date
+    await this.loadData()
+    this.filteredData.schedule_date = schedule_date
+    await this.getList()
+  },
   methods: {
     //初始化
     async init(){
+      await this.getThisDate()
+      await this.getHeadDate()
+      await this.getList()
       this.getDateRange()
       this.setCalendarSelected()
     },
@@ -315,6 +255,108 @@ export default {
       })
     },
 
+    //获取课程头日期
+    async getHeadDate() {
+      let res = await commonApi.getDate()
+      if (res.code != 1) {
+        //提示
+        uni.showToast({
+          title: res.msg,
+          icon: 'none',
+        })
+        return
+      }
+
+      this.dateList = []
+      res.data.forEach((v, k) => {
+        let today = v.date.split("-")[2]; // "09"
+        this.dateList.push({
+          date: v.date,
+          status: v.status,//1是正常 2请假
+          week: v.week,
+          today: today,
+        })
+      })
+
+
+      console.log('xxx', res)
+
+    },
+
+    //获取当前日期
+    async getThisDate() {
+      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 selectDate(date) {
+      this.loadData()
+      this.filteredData.schedule_date = date
+      this.getList()
+    },
+
+    //加载更过(下一页)
+    loadMoreData() {
+      //判断是否加载
+      if (!this.isReachedBottom) {
+        this.isReachedBottom = true;//设置为不可请求状态
+        this.getList();
+      }
+    },
+    //重置为第一页
+    async loadData() {
+      this.isReachedBottom = false; // 重置状态，以便下次触发加载更多
+
+      this.filteredData.page = 1//当前页码
+      this.filteredData.limit = 10//每页返回数据条数
+      this.filteredData.total = 10//数据总条数
+    },
+    //获取列表
+    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.filteredData.total = res.data.list.total
+
+      this.filteredData.page++
+    },
+
     //日历选择相关
     // 获取日期范围
     getDateRange() {
diff --git a/pages/student/timetable/index.vue b/pages/student/timetable/index.vue
index 6d858aa..3c80194 100644
--- a/pages/student/timetable/index.vue
+++ b/pages/student/timetable/index.vue
@@ -17,6 +17,9 @@
             <text :class="[v.status == 2 ?'select_plan':'']"></text>
           </view>
         </view>
+        <view class="btn" @click="show_calendar=true">
+          查看更多 <fui-icon name="arrowdown" color="#A4ADB3" size="45"></fui-icon>
+        </view>
       </view>
 
       <view class="section_2">
@@ -63,7 +66,7 @@
                     <image :src="$util.img(item.header)"></image>
                   </view>
                 </view>
-                <view class="btn" @click="openViewTimetableInfo(v)">
+                <view class="btn">
                   详情
                 </view>
               </view>
@@ -76,6 +79,20 @@
 
     </view>
 
+    <!--    日历选择-->
+    <fui-bottom-popup :show="show_calendar" @close="show_calendar=false">
+      <view class="fui-custom__wrap">
+        <uni-calendar
+            :insert="true"
+            :lunar="false"
+            :selected="calendarSelected"
+            :startDate="startDate"
+            :endDate="endDate"
+            @change="changeCalendar"
+        />
+      </view>
+    </fui-bottom-popup>
+
 <!--    底部导航-->
     <AQTabber/>
   </view>
@@ -112,6 +129,12 @@ export default {
       //今日日期
       today: '',
       dateList: [],//日期列表
+
+      //日历选择相关
+      show_calendar:false,//是否展示日期
+      startDate:'',//开始日期
+      endDate:'',//结束日期
+      calendarSelected: [],//日历打点
     }
   },
   onLoad(options) {
@@ -229,8 +252,8 @@ export default {
       //场地信息
       this.venuesInfo = res.data.venues_info
 
-      this.total = res.data.list.total
-      this.page++
+      this.filteredData.total = res.data.list.total
+      this.filteredData.page++
     },
 
     //选择日期
@@ -240,6 +263,72 @@ export default {
       this.getList()
     },
 
+    //日历选择相关
+    // 获取日期范围
+    getDateRange() {
+      const today = new Date(); // 获取今天的日期
+      const startDate = new Date(today); // 复制今天的日期
+      const endDate = new Date(today); // 复制今天的日期
+
+      // 计算 startDate：往前推 1 个月
+      startDate.setMonth(today.getMonth() - 1);
+
+      // 计算 endDate：往后推 1 个月
+      endDate.setMonth(today.getMonth() + 2);
+
+      // 将日期格式化为 YYYY-MM-DD
+      const 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}`;
+      };
+
+      // 更新 data 中的 startDate 和 endDate
+      this.startDate = formatDate(startDate);
+      this.endDate = formatDate(endDate);
+      console.log([this.startDate,this.endDate])
+    },
+    //设置日期打点
+    async setCalendarSelected(){
+      //获取当前月份
+      let month = new Date().getMonth() + 1;
+
+      let res = await commonApi.getMonthDate({month:month})
+      if (res.code != 1){
+        //提示
+        uni.showToast({
+          title: res.msg,
+          icon: 'none',
+          duration: 2000
+        })
+        return
+      }
+      this.calendarSelected = []
+      res.data.forEach((v,k)=>{
+        this.calendarSelected.push({
+          date: v.date,
+        })
+      })
+
+      // this.calendarSelected = [
+      //   {
+      //     date: '2025-04-07',
+      //   },
+      //   {
+      //     date: '2025-04-08',
+      //   },
+      //   {
+      //     date: '2025-04-09',
+      //   }
+      // ]
+    },
+    //日历选择
+    changeCalendar(e){
+      console.log('日历',e)
+      this.show_calendar = false
+    },
+
 
     //打开课表详情页
     openViewCourseInfo(item) {