feat(coach): 添加班级列表页面并更新相关功能

- 新增班级列表页面，包含课程筛选、课室筛选功能
- 更新首页发布作业按钮，增加点击事件- 修改导航栏样式，统一为黑色主题
- 更新底部导航栏，将"我的"选项路径修改为班级列表页面

components/AQ/AQTabber.vue

@@ -57,7 +57,7 @@
               },
               {
                 text: "班级",
-                urlPath:'/pages/student/my/my',//自定义页面跳转路径
+                urlPath:'/pages/coach/class/list',//自定义页面跳转路径
                 iconPath: "/static/images/tabbar/my.png",
                 selectedIconPath: "/static/images/tabbar/my.png"
               },

pages.json

@@ -63,8 +63,8 @@
       "style": {
         "navigationBarTitleText": "发布作业",
         "navigationStyle": "default",
-        "navigationBarBackgroundColor": "#fff",
+        "navigationBarBackgroundColor": "#292929",
-        "navigationBarTextStyle": "black"
+        "navigationBarTextStyle": "white"
       }
     },
     {
@@ -72,8 +72,8 @@
       "style": {
         "navigationBarTitleText": "全部作业",
         "navigationStyle": "default",
-        "navigationBarBackgroundColor": "#fff",
+        "navigationBarBackgroundColor": "#292929",
-        "navigationBarTextStyle": "black"
+        "navigationBarTextStyle": "white"
       }
     },
     {
@@ -93,6 +93,15 @@
         "navigationBarBackgroundColor": "#292929",
         "navigationBarTextStyle": "white"
       }
+    },
+    {
+      "path": "pages/coach/class/list",
+      "style": {
+        "navigationBarTitleText": "班级",
+        "navigationStyle": "custom",
+        "navigationBarBackgroundColor": "#292929",
+        "navigationBarTextStyle": "white"
+      }
     }
 
   ],

pages/coach/class/list.vue

@@ -0,0 +1,421 @@
+<!--班级-列表-->
+<template>
+  <view class="main_box">
+    <!--自定义导航栏-->
+    <view class="navbar_section">
+      <view class="title">班级</view>
+    </view>
+
+    <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>
+        </view>
+      </view>
+
+      <view class="section_2">
+        <view class="item_box">
+          <fui-dropdown-menu :size="28" selectedColor="#465CFF" :options="options_course" @click="clickCourse" @close="show_course=false" ref="ref_course">
+            <view class="fui-filter__item" @tap="filterTapCourse">
+              <text>{{course_name}}</text>
+              <view class="fui-filter__icon" :class="{'fui-icon__ani':show_course}">
+                <fui-icon name="turningdown" :size="32" color="#FFF"></fui-icon>
+              </view>
+            </view>
+          </fui-dropdown-menu>
+        </view>
+        <view class="item_box">
+          <fui-dropdown-menu :size="28" selectedColor="#465CFF" :options="options_classroom" @click="clickClassroom" @close="show_classroom=false" ref="ref_classroom">
+            <view class="fui-filter__item" @tap="filterTapClassroom">
+              <text>{{classroom_name}}</text>
+              <view class="fui-filter__icon" :class="{'fui-icon__ani':show_classroom}">
+                <fui-icon name="turningdown" :size="32" color="#FFF"></fui-icon>
+              </view>
+            </view>
+          </fui-dropdown-menu>
+        </view>
+
+      </view>
+
+      <view class="section_3">
+        <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 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>
+      </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:{},
+
+      //课程下拉菜单相关
+      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){
+      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'
+      })
+    },
+  }
+}
+</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-top: 40rpx;
+  padding-bottom: 150rpx;
+  font-size: 24rpx;
+  color: #FFFFFF;
+
+  .section_1{
+    background: #333333 100%;
+    width: 100%;
+    padding: 30rpx 28rpx;
+    .ul{
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .li{
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        gap: 10rpx;
+        text{
+          font-size: 24rpx;
+          color: #FFFFFF;
+          text-align: center;
+        }
+        text:nth-child(2){
+          width: 44rpx;
+          height: 44rpx;
+        }
+        text:nth-child(3){
+          width: 8rpx;
+          height: 8rpx;
+        }
+        .today{
+          border-radius: 50%;
+          background: #29D3B4;
+          text-align: center;
+          line-height: 42rpx;
+        }
+        .select_plan{
+          background: #F59A23;
+          border-radius: 50%;
+        }
+      }
+    }
+  }
+
+  .section_2{
+    margin-top: 30rpx;
+    padding: 0 20rpx ;
+    color: #fff;
+    display: flex;
+    align-items: center;
+    gap: 20rpx;
+    .item_box {
+      width: 45%;
+      .fui-filter__item {
+        display: flex;
+      }
+    }
+  }
+
+  .section_3{
+    margin-top: 36rpx;
+    color: #fff;
+    font-size: 24rpx;
+    .ul{
+      padding:  0 26rpx;
+      display: flex;
+      flex-direction: column;
+      gap: 30rpx;
+      .li{
+        position: relative;
+        border-radius: 22rpx;
+        background: #434544 100%;
+        padding: 14rpx 0;
+        display: flex;
+        flex-direction: column;
+        .top_box{
+          padding: 20rpx 30rpx;
+          .center_box{
+            display: flex;
+            flex-direction: column;
+            gap: 10rpx;
+            view{}
+          }
+          .right_box{
+            .tag{
+              position:absolute;
+              top: 0rpx;
+              right: 0rpx;
+              padding: 10rpx;
+              width: 102rpx;
+              text-align: center;
+              font-size: 24rpx;
+              border-bottom-left-radius: 20rpx;
+              border-top-right-radius: 20rpx;
+            }
+          }
+        }
+        .bottom_box{
+          border-top: 1px dashed #F2F2F2;
+          padding: 26rpx 16rpx 0 26rpx;
+          .hint{
+            color:#D7D7D7;
+          }
+          .list_box{
+            margin-top: 22rpx;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            .list{
+              display: flex;
+              align-items: center;
+              gap: 14rpx;
+              .itme{
+                image{
+                  width: 48rpx;
+                  height: 48rpx;
+                  border-radius: 50%;
+                }
+              }
+            }
+            .btn{
+              border: 1px solid #FAD04D;
+              border-radius: 10rpx;
+              background: #434544;
+              color: #FAD04D;
+              width: 110rpx;
+              height: 60rpx;
+              line-height: 55rpx;
+              text-align: center;
+              font-size: 24rpx;
+            }
+          }
+        }
+      }
+
+    }
+  }
+
+}
+
+
+</style>

pages/coach/home/index.vue

@@ -20,8 +20,8 @@
               <text>28%</text>
             </view>
             <view>
-              <text class="title">发布作业</text>
+              <text class="title" @click="openObjAddView()">发布作业</text>
-              <text>28%</text>
+              <text></text>
             </view>
           </view>
         </view>
@@ -208,7 +208,7 @@ export default {
   methods: {
 
     //打开-发布作业页
-    openObjListView(){
+    openObjAddView(){
       uni.navigateTo({
         url: '/pages/coach/job/add'
       })