feat(coach/class): 教练端班级详情页面添加课程计划列表

- 实现课程计划列表的展示和分页加载
- 添加下拉刷新功能
- 优化课程列表的数据显示和样式
- 实现课程状态的动态显示

pages/coach/class/info.vue

@@ -107,30 +107,42 @@
       </view>
 
       <!--课程计划-->
-      <view class="section_5" v-if="tabType=='2'">
+      <scroll-view
+          v-if="tabType=='2'"
+          class="section_5"
+          scroll-y="true"
+          :lower-threshold="lowerThreshold"
+          @scrolltolower="loadMoreData"
+          style="height: 65vh;"
+      >
         <view class="ul">
-          <view class="li" @click="openViewCourseInfo({id:1})">
+          <view
+              class="li"
+              v-for="(v,k) in courseList"
+              :key="l"
+              @click="openViewCourseInfo(v)"
+          >
             <view class="top_box">
               <view class="title">
-                课程：篮球少儿课
+                课程：{{v.courses_name}}
               </view>
               <view class="title">
-                时间：2024-05-25 15：20 - 17：30
+                时间：{{v.date}}
               </view>
               <view class="title">
-                地点：xxx体育馆 302室
+                地点：{{v.address}}
               </view>
             </view>
             <view class="bottom_box">
               <view class="item">
-                <view class="left">应到学员（34）</view>
+                <view class="left">应到学员（{{v.max_students}}）</view>
                 <view class="right">
                   查看
                   <fui-icon size="35" color="#fff" name="arrowright"></fui-icon>
                 </view>
               </view>
               <view class="item">
-                <view class="left">已签到学生（15/34）</view>
+                <view class="left">已签到学生（{{v.has_sign_count}}/{{v.max_students}}）</view>
                 <view class="right">
                   查看
                   <fui-icon size="35" color="#fff" name="arrowright"></fui-icon>
@@ -144,117 +156,20 @@
                 </view>
               </view>
             </view>
-            <view class="tag" style="background-color:#20CAAF;">
-              未开始
-            </view>
-
-<!--            <view class="tag" style="background-color:#fad24e;">-->
-<!--              上课中-->
-<!--            </view>-->
-
-<!--            <view class="tag" style="background-color:#e2e2e2;">-->
-<!--              已结束-->
-<!--            </view>-->
-
-          </view>
 
-          <view class="li" @click="openViewCourseInfo({id:1})">
+            <view class="tag" v-if="!(['1','2'].includes(String(v.status)))" style="background-color:#20CAAF;">
-            <view class="top_box">
+              未开始
-              <view class="title">
-                课程：篮球少儿课
-              </view>
-              <view class="title">
-                时间：2024-05-25 15：20 - 17：30
-              </view>
-              <view class="title">
-                地点：xxx体育馆 302室
-              </view>
-            </view>
-            <view class="bottom_box">
-              <view class="item">
-                <view class="left">应到学员（34）</view>
-                <view class="right">
-                  查看
-                  <fui-icon size="35" color="#fff" name="arrowright"></fui-icon>
-                </view>
-              </view>
-              <view class="item">
-                <view class="left">已签到学生（15/34）</view>
-                <view class="right">
-                  查看
-                  <fui-icon size="35" color="#fff" name="arrowright"></fui-icon>
-                </view>
-              </view>
-              <view class="item">
-                <view class="left">作业完成率（80%）</view>
-                <view class="right">
-                  查看
-                  <fui-icon size="35" color="#fff" name="arrowright"></fui-icon>
-                </view>
-              </view>
             </view>
-
+            <view class="tag" v-if="v.status == 1" style="background-color:#fad24e;">
-
-                        <view class="tag" style="background-color:#fad24e;">
               上课中
             </view>
 
-            <!--            <view class="tag" style="background-color:#e2e2e2;">-->
+            <view class="tag" v-if="v.status == 2" style="background-color:#e2e2e2;">
-            <!--              已结束-->
-            <!--            </view>-->
-
-          </view>
-
-          <view class="li" @click="openViewCourseInfo({id:1})">
-            <view class="top_box">
-              <view class="title">
-                课程：篮球少儿课
-              </view>
-              <view class="title">
-                时间：2024-05-25 15：20 - 17：30
-              </view>
-              <view class="title">
-                地点：xxx体育馆 302室
-              </view>
-            </view>
-            <view class="bottom_box">
-              <view class="item">
-                <view class="left">应到学员（34）</view>
-                <view class="right">
-                  查看
-                  <fui-icon size="35" color="#fff" name="arrowright"></fui-icon>
-                </view>
-              </view>
-              <view class="item">
-                <view class="left">已签到学生（15/34）</view>
-                <view class="right">
-                  查看
-                  <fui-icon size="35" color="#fff" name="arrowright"></fui-icon>
-                </view>
-              </view>
-              <view class="item">
-                <view class="left">作业完成率（80%）</view>
-                <view class="right">
-                  查看
-                  <fui-icon size="35" color="#fff" name="arrowright"></fui-icon>
-                </view>
-              </view>
-            </view>
-<!--            <view class="tag" style="background-color:#20CAAF;">-->
-<!--              未开始-->
-<!--            </view>-->
-
-            <!--            <view class="tag" style="background-color:#fad24e;">-->
-            <!--              上课中-->
-            <!--            </view>-->
-
-                        <view class="tag" style="background-color:#e2e2e2;">
               已结束
             </view>
-
-          </view>
           </view>
         </view>
+      </scroll-view>
     </view>
 
 <!--    底部导航-->
@@ -274,11 +189,24 @@ export default {
   data() {
     return {
       class_id:'',//班级id
-      courseInfoList:{},//课程计划数据
       classInfo:{},//班级数据
       classMemberList:{},//班级成员
 
       tabType:'1',//1=班级成员,2=课程计划
+
+
+      loading: false,//加载状态
+      lowerThreshold: 100,//距离底部多远触发
+      isReachedBottom: false,//防止重复加载|true=不可加载|false=可加载
+
+      //筛选条件
+      filteredData: {
+        page: 1,//当前页码
+        limit: 10,//每页返回数据条数
+        total: 10,//数据总条数
+        class_id: '',//班级id
+      },
+      courseList:[],//课程计划数据
     }
   },
   onLoad(options) {
@@ -287,13 +215,19 @@ export default {
   onShow() {
     this.init()
   },
+  //下拉刷新
+  async onPullDownRefresh() {
+    //重置为第一页
+    await this.loadData()
+    await this.getCourseList()
+  },
   methods: {
 
     async init(){
       // member/course_list//课程列表
       // member/class_info//班级详情+成员详情
       this.getClassInfo()//获取班级详情
-      // this.getCourseList()//获取课程列表
+      await this.getCourseList()//获取课程列表
 
     },
 
@@ -312,14 +246,48 @@ export default {
       this.classMemberList = res.data.students_list
     },
 
+
+    //加载更过(下一页)
+    loadMoreData() {
+      //判断是否加载
+      if (!this.isReachedBottom) {
+        this.isReachedBottom = true;//设置为不可请求状态
+        this.getCourseList();
+      }
+    },
+    //重置为第一页
+    async loadData() {
+      this.isReachedBottom = false; // 重置状态，以便下次触发加载更多
+
+      this.filteredData.page = 1//当前页码
+      this.filteredData.limit = 10//每页返回数据条数
+      this.filteredData.total = 10//数据总条数
+    },
     //教练端-获取课程列表
     async getCourseList(){
-      let data = {
+
-        page:0,
+      let data = {...this.filteredData}
-        limit:12,
+      data.class_id = this.class_id
-        class_id:this.class_id,
+
+      console.log(12123,this.courseList)
+
+      if(data.page == 1){
+        this.courseList = []
       }
+
+      //判断是否还有数据
+      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,
@@ -327,8 +295,14 @@ export default {
         })
         return
       }
-      this.courseInfo = res.data
+
-      console.log('获取课程列表',this.courseInfo)
+
+      this.courseList = this.courseList.concat(res.data.list.data)// 使用 concat 方法 将新数据追加到数组中
+
+      this.filteredData.total = res.data.list.total
+      console.log('获取课程列表',this.courseList)
+      this.filteredData.page++
+
     },