refactor(coach): 重构教练端到课统计页面

-优化课程列表渲染逻辑，使用 v-for 指令
- 添加课程列表数据请求和分页加载功能
- 修复到课率计算公式
- 优化页面样式，调整布局和字体颜色
- 修复导航栏标题文字错误

pages.json

@@ -307,7 +307,7 @@
     {
       "path": "pages/coach/my/arrival_statistics",
       "style": {
-        "navigationBarTitleText": "到客统计",
+        "navigationBarTitleText": "到课统计",
         "navigationStyle": "default",
         "navigationBarBackgroundColor": "#292929",
         "navigationBarTextStyle": "white"

pages/coach/class/info.vue

@@ -119,7 +119,7 @@
           <view
               class="li"
               v-for="(v,k) in courseList"
-              :key="l"
+              :key="k"
               @click="openViewCourseInfo(v)"
           >
             <view class="top_box">

pages/coach/my/arrival_statistics.vue

@@ -3,64 +3,51 @@
   <view class="main_box">
 
     <view class="main_section">
-      <view class="section_3">
+
+      <scroll-view
+          class="section_3"
+          scroll-y="true"
+          :lower-threshold="lowerThreshold"
+          @scrolltolower="loadMoreData"
+          style="height: 90vh;"
+      >
         <view class="ul">
-          <view class="li">
+          <view class="li"
+                v-for="(v,k) in courseList"
+                :key="k"
+                @click="openViewCourseInfo(v)"
+          >
             <view class="left_box">
               <view class="date_box">
-                <text>12</text>
+                <text>{{v.has_sign_count}}</text>
                 <text>/</text>
-                <text>24</text>
+                <text>{{v.students_count}}</text>
               </view>
               <view class="ratio">
-                到课率：80%
+                到课率：{{v.attendance_rate}}%
               </view>
             </view>
             <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_time}} {{v.time_slot ? v.time_slot.replace(",", " - ") : ""}}</view>
+              <view>课室：{{v.address}}
               </view>
-              <view>课程：篮球少儿课
+              <view>课程：{{v.courses_name}}
               </view>
             </view>
             <view class="right_box">
-              <view class="tag" style="background:#fad24e;">上课中</view>
-              <!--            <view class="tag" style="background:#1cd188;">待上课</view>-->
-            </view>
-          </view>
-          <view class="li">
-            <view class="left_box">
-              <view class="date_box">
-                <text>12</text>
-                <text>/</text>
-                <text>24</text>
-              </view>
-              <view class="ratio">
-                到课率：80%
-              </view>
-            </view>
-            <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 v-if="v.status == 1" class="tag" style="background:#fad24e;">上课中</view>
+              <view v-else class="tag" style="background:#e2e2e2;">已结束</view>
             </view>
           </view>
         </view>
-      </view>
+      </scroll-view>
     </view>
   </view>
 </template>
 
 <script>
-// import user from '@/api/user.js';
+import memberApi from '@/api/member.js';
 import AQTabber from "@/components/AQ/AQTabber.vue"
 
 
@@ -70,80 +57,105 @@ export default {
   },
   data() {
     return {
-      formData:{},
+      loading: false,//加载状态
+      lowerThreshold: 100,//距离底部多远触发
+      isReachedBottom: false,//防止重复加载|true=不可加载|false=可加载
 
-      //课程下拉菜单相关
-      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'
-        }
-      ],
+      //筛选条件
+      filteredData: {
+        page: 1,//当前页码
+        limit: 10,//每页返回数据条数
+        total: 10,//数据总条数
+        class_id: '',//班级id
+      },
+      courseList:[],//课程列表
     }
   },
   onLoad() {
   },
+  onShow(){
+    this.init()
+  },
   methods: {
-    //选中课程下拉菜单点击事件
-    clickCourse(e){
-      console.log(e)
-      this.course_name = e.text
-      this.show_course = true
+    //初始化
+    async init(){
+      this.getCourseList()
     },
-    //显示下拉菜单
-    filterTapCourse() {
-      //显示下拉框
-      this.$refs.ref_course.show()
-      this.show_course = true;
+
+    //课程列表 .courseList
+    //加载更过(下一页)
+    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 = {...this.filteredData}
+      data.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,
+          icon: 'none'
+        })
+        return
+      }
+
+      let arr = []
+      res.data.list.data.forEach((v,k)=>{
+        let item = v
+        item.attendance_rate = (v.students_count && !isNaN(v.students_count) && v.students_count > 0) ?
+            parseFloat(((v.has_sign_count / v.students_count) * 100).toFixed(1)) : 0;
+        arr.push(item)
+      })
+
+
+
+      this.courseList = this.courseList.concat(res.data.list.data)// 使用 concat 方法 将新数据追加到数组中
+
+      this.filteredData.total = res.data.list.total
+      console.log('获取课程列表',this.courseList)
+      this.filteredData.page++
 
-    //选中课室
-    clickClassroom(e){
-      console.log(e)
-      this.classroom_name = e.text
-      this.show_classroom = true
-    },
-    //显示课室下拉菜单
-    filterTapClassroom() {
-      //显示下拉框
-      this.$refs.ref_classroom.show()
-      this.show_classroom = true;
     },
 
-    //打开课时详情页
+
+    //打开课程详情
     openViewCourseInfo(item){
+      let id= item.id
       uni.navigateTo({
-        url: '/pages/coach/course/info'
+        url: `/pages/coach/course/info_list?id=${id}`
       })
     },
   }
@@ -210,7 +222,7 @@ export default {
         align-items: center;
         .left_box{
           margin-left: 28rpx;
-          width: 146rpx;
+          width: 175rpx;
           display: flex;
           flex-direction: column;
           gap: 10rpx;
@@ -226,7 +238,7 @@ export default {
           }
         }
         .center_box{
-          margin-left: 52rpx;
+          margin-left: 22rpx;
           display: flex;
           flex-direction: column;
           gap: 10rpx;