feat(coach): 添加班级详情页面并优化班级列表

- 新增班级详情页面，包含班级信息、地点、课程、人数和时间等详情
- 在班级列表页面添加打开班级详情的功能
- 优化班级列表页面样式，调整列表项布局

pages/coach/class/info.vue

@@ -0,0 +1,206 @@
+<!--班级-详情-->
+<template>
+  <view class="main_box">
+    <!--自定义导航栏-->
+    <view class="navbar_section">
+      <view class="title">班级详情</view>
+    </view>
+
+    <view class="main_section">
+      <view class="section_1">
+        <view class="left">
+          <image class="pic" src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
+          <view class="name">包皮子</view>
+        </view>
+        <view class="right">
+          <view class="item">
+            班级：少年班
+          </view>
+
+          <view class="item">
+            地点：XXXX体育馆 302室
+          </view>
+
+          <view class="item">
+            课程：篮球少儿课
+          </view>
+
+          <view class="item">
+            人数：30人
+          </view>
+
+          <view class="item">
+            时间：2020.05:25 15:30 - 17:30
+          </view>
+        </view>
+      </view>
+    </view>
+
+<!--    底部导航-->
+<!--    <AQTabber/>-->
+  </view>
+</template>
+
+<script>
+import user from '@/api/user.js';
+import AQTabber from "@/components/AQ/AQTabber.vue"
+
+
+export default {
+  components: {
+    AQTabber,
+  },
+  data() {
+    return {
+      formData:{},
+      tabType:'1',//1=班级成员,2=作业任务
+    }
+  },
+  onLoad() {
+  },
+  methods: {
+    //切换tab
+    tabChange(tabType) {
+      this.tabType = tabType
+    },
+
+    //打开课程详情
+    openViewCourseInfo(item){
+      uni.navigateTo({
+        url: '/pages/coach/course/info'
+      })
+    },
+    //打开学员详情页
+    openViewStudentInfo(item){
+      uni.navigateTo({
+        url: '/pages/coach/student/info'
+      })
+    },
+  }
+}
+</script>
+
+<style lang="less" scoped>
+
+.main_box{
+  background: #292929 ;
+}
+
+//自定义导航栏
+.navbar_section{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: #292929;
+  .title{
+    padding: 20rpx 0;
+    font-size: 30rpx;
+    color: #fff;
+  }
+}
+
+.main_section{
+  min-height: 100vh;
+  background: #292929 100%;
+  padding: 0 24rpx;
+  padding-top: 40rpx;
+  padding-bottom: 150rpx;
+  font-size: 24rpx;
+  color: #FFFFFF;
+
+  .section_1 {
+    border-radius: 10rpx;
+    background-color: #525252;
+    ::v-deep .fui-input__wrap{
+      border-radius: 10rpx !important;
+      background-color: #525252 !important;
+    }
+    ::v-deep .fui-input__background{
+      background-color: #525252 !important;
+    }
+    .input_item {
+      height: 60rpx;
+      ::v-deep .uni-input-wrapper{
+        .uni-input-placeholder {
+          font-size: 28rpx !important;
+
+        }
+
+      }
+    }
+    ::v-deep .uni-input-input {
+      color: #fff;
+    }
+  }
+
+  .section_2{
+    margin-top: 34rpx;
+    .ul{
+      display: flex;
+      flex-direction: column;
+      gap: 24rpx;
+      .li{
+        background: #404045;
+        padding: 50rpx 36rpx 46rpx;
+        border-radius: 16rpx;
+        display: flex;
+        gap: 32rpx;
+        .left{
+          .pic{
+            border-radius: 50%;
+            width: 92rpx;
+            height: 92rpx;
+          }
+        }
+        .right{
+          display: flex;
+          flex-direction: column;
+          gap: 28rpx;
+          .box_1{
+            display: flex;
+            align-items: center;
+            gap: 36rpx;
+            .name{
+              font-size: 28rpx;
+            }
+            .btn_box{
+              view{
+                border: 1px solid #FAD04D;
+                border-radius: 10rpx;
+                width: 182rpx;
+                height: 48rpx;
+                line-height: 42rpx;
+                text-align: center;
+                font-size: 26rpx;
+                color: #FAD04D;
+              }
+            }
+          }
+          .box_2{
+            display: flex;
+            align-items: center;
+            gap: 44rpx;
+            .user_list{
+              display: flex;
+              align-items: center;
+              gap: 14rpx;
+              image{
+                border-radius: 50%;
+                width: 48rpx;
+                height: 48rpx;
+              }
+            }
+            .num{}
+          }
+
+        }
+      }
+    }
+  }
+
+
+
+}
+
+
+</style>

pages/coach/class/list.vue

@@ -13,7 +13,7 @@
 
       <view class="section_2">
           <view class="ul">
-            <view class="li">
+            <view class="li" @click="openViewClassInfo({id:1})">
               <view class="left">
                 <image class="pic" src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
               </view>
@@ -40,7 +40,7 @@
                 </view>
               </view>
             </view>
-            <view class="li">
+            <view class="li" @click="openViewClassInfo({id:2})">
               <view class="left">
                 <image class="pic" src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
               </view>
@@ -67,7 +67,7 @@
                 </view>
               </view>
             </view>
-            <view class="li">
+            <view class="li" @click="openViewClassInfo({id:3})">
               <view class="left">
                 <image class="pic" src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
               </view>
@@ -111,79 +111,15 @@ 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'
-        }
-      ],
     }
   },
   onLoad() {
   },
   methods: {
-    //选中课程下拉菜单点击事件
+    //打开班级详情页
-    clickCourse(e){
+    openViewClassInfo(item){
-      console.log(e)
-      this.course_name = e.text
-      this.show_course = true
-    },
-    //显示下拉菜单
-    filterTapCourse() {
-      //显示下拉框
-      this.$refs.ref_course.show()
-      this.show_course = true;
-    },
-
-
-
-    //选中课室
-    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){
       uni.navigateTo({
-        url: '/pages/coach/course/info'
+        url: '/pages/coach/class/info'
       })
     },
   }
@@ -219,97 +155,18 @@ export default {
   color: #FFFFFF;
 
   .section_1 {
-    border-radius: 10rpx;
+    .left{
-    background-color: #525252;
-    ::v-deep .fui-input__wrap{
-      border-radius: 10rpx !important;
-      background-color: #525252 !important;
-    }
-    ::v-deep .fui-input__background{
-      background-color: #525252 !important;
-    }
-    .input_item {
-      height: 60rpx;
-      ::v-deep .uni-input-wrapper{
-        .uni-input-placeholder {
-          font-size: 28rpx !important;
-
-        }
-
-      }
-    }
-    ::v-deep .uni-input-input {
-      color: #fff;
-    }
-  }
-
-  .section_2{
-    margin-top: 34rpx;
-    .ul{
       display: flex;
       flex-direction: column;
-      gap: 24rpx;
+      justify-content: center;
-      .li{
+      gap: 12rpx;
-        background: #404045;
+      .pic{
-        padding: 50rpx 36rpx 46rpx;
+        width: 100rpx;
-        border-radius: 16rpx;
-        display: flex;
-        gap: 32rpx;
-        .left{
-          .pic{
-            border-radius: 50%;
-            width: 92rpx;
-            height: 92rpx;
-          }
-        }
-        .right{
-          display: flex;
-          flex-direction: column;
-          gap: 28rpx;
-          .box_1{
-            display: flex;
-            align-items: center;
-            gap: 36rpx;
-            .name{
-              font-size: 28rpx;
-            }
-            .btn_box{
-              view{
-                border: 1px solid #FAD04D;
-                border-radius: 10rpx;
-                width: 182rpx;
-                height: 48rpx;
-                line-height: 42rpx;
-                text-align: center;
-                font-size: 26rpx;
-                color: #FAD04D;
-              }
-            }
-          }
-          .box_2{
-            display: flex;
-            align-items: center;
-            gap: 44rpx;
-            .user_list{
-              display: flex;
-              align-items: center;
-              gap: 14rpx;
-              image{
-                border-radius: 50%;
-                width: 48rpx;
-                height: 48rpx;
-              }
-            }
-            .num{}
-          }
-
-        }
       }
+      .name{}
     }
+    .right{}
   }
-
-
-
 }