Signed-off-by: yukangzhe <382985154@qq.com>

app.json

@@ -1,9 +1,9 @@
 {
   "plugins": {},
   "pages": [
+    "pages/index/index",
     "pages/leaveRecord/leaveRecord",
     "pages/leave/leave",
-    "pages/index/index",
     "pages/doTask/doTask",
     "pages/task/task",
     "pages/taskDetail/taskDetail",
@@ -12,7 +12,9 @@
     "pages/login/login",
     "pages/makePiano/makePiano",
     "pages/myself/myself",
-    "pages/lessons/lessons"
+    "pages/lessons/lessons",
+    "pages/lessonsDetail/lessonsDetail",
+    "pages/targetList/targetList"
   ],
   "window": {
     "backgroundTextStyle": "dark",

pages/Components/classList/classList.js

@@ -7,6 +7,10 @@ Component({
     showLeaveNum:{
       type:Boolean,
       value: false
+    },
+    showFlag:{
+      type: Boolean,
+      value: true
     }
   },
 
@@ -25,6 +29,9 @@ Component({
       wx.navigateTo({
         url: '/pages/leaveRecord/leaveRecord',
       })
-    }
+    },
+    radioChange:function(e){
+      console.log(JSON.stringify(e.detail.value))
+    },
   }
 })

pages/Components/classList/classList.wxml

@@ -2,14 +2,21 @@
   <view class="class-view">
     <view class="class-date">2021-02-22 星期一</view>
     <view class="class-list">
+      <radio-group bindchange="radioChange">
       <view class="class-box" wx:for="{{3}}" wx:key="index">
+        
         <view class="class-name"><text class="class-type">1v1</text>小鹏钢琴课</view>
         <view class="class-time">09:00 ~ 11:00</view>
+        <view class="get-box" wx:if="{{!showFlag}}">
+          <radio value="{{index}}" checked="" color="#cc6031"/>
+        </view>
         <view class="class-room">钢琴教室01</view>
-        <view class="class-flag">已上课</view>
-        <view class="class-teacher">张老师</view>
+        <view class="class-flag" wx:if="{{showFlag}}">已上课</view>
+        <view class="class-teacher" style="{{!showFlag ? 'margin-left:54rpx' : ''}}">张老师</view>
         <view wx:if="{{showLeaveNum}}" class="last-leave-num" bindtap="getLeaveNumList">本课程请假余额 6 次</view>
+     
       </view>
+    </radio-group>
     </view>
     
   </view>

pages/Components/classList/classList.wxss

@@ -9,6 +9,7 @@
   padding: 25rpx;
   border-radius: 15rpx;
   margin: 0 auto 40rpx;
+  box-shadow: 0 15rpx 20rpx #eee;
 }
 .class-box view{
   height: 60rpx;
@@ -16,7 +17,6 @@
 }
 .class-name,.class-time{
   font-size: 36rpx;
-  font-weight: 600;
 }
 .class-time,.class-flag{
   text-align: right;

pages/Components/lessonsList/lessonsList.js

@@ -15,6 +15,14 @@ Component({
     list:{
       type: Array,
       value:[]
+    },
+    showBtn:{
+      type: Boolean,
+      value: true,
+    },
+    showDate:{
+      type: Boolean,
+      value: true,
     }
   },
 
@@ -29,6 +37,10 @@ Component({
    * 组件的方法列表
    */
   methods: {
-    
+    toPages:function(e){
+      wx.navigateTo({
+        url: e.currentTarget.dataset.url,
+      })
+    },
   }
 })

pages/Components/lessonsList/lessonsList.wxml

@@ -3,17 +3,17 @@
     <view class="lessons-box" wx:for="{{list}}" wx:key="index">
       <view class="lessons-type">1v1</view>
       <view class="lessons-title">小鹏钢琴课</view>
-      <view wx:if="{{(index +1) % 2 == 0 }}" class="{{(index +1) % 2 == 0 ? 'lessons-flag' : ''}}">未补课</view>
-      <view wx:if="{{(index +1) % 2 != 0 }}" class="{{(index +1) % 2 != 0 ? 'lessons-flag-ed' : ''}}">已补课</view>
+      <view wx:if="{{(index +1) % 2 == 0 && showBtn}}" class="{{(index +1) % 2 == 0 ? 'lessons-flag' : ''}}">未补课</view>
+      <view wx:if="{{(index +1) % 2 != 0 && showBtn}}" class="{{(index +1) % 2 != 0 ? 'lessons-flag-ed' : ''}}">已补课</view>
       <view class="lessons-room">钢琴教室01</view>
       <view class="lessons-teacher">授课老师：张老师</view>
       <view class="lessons-date-box">
         <view class="lessons-beginDate">上课时间：2021-02-25 09:00</view>
-        <view class="lessons-endDate">请假时间：2021-02-21 17:00</view>
+        <view class="lessons-endDate" wx:if="{{showDate}}">请假时间：2021-02-21 17:00</view>
       </view>
       <view class="lessons-btn-box">
-        <view class="apply-btn" wx:if="{{(index +1) % 2 ==0}}">申请补课</view>
-        <view class="more-btn" wx:else>查看详情</view>
+        <view class="apply-btn" wx:if="{{(index +1) % 2 == 0 && showBtn}}" bindtap="toPages" data-url="/pages/targetList/targetList">申请补课</view>
+        <view class="more-btn" wx:elif="{{(index +1) % 2 != 0 && showBtn}}" bindtap="toPages" data-url="/pages/lessonsDetail/lessonsDetail">查看详情</view>
       </view>
     </view>
   </view>

pages/Components/lessonsList/lessonsList.wxss

@@ -28,6 +28,7 @@
 .lessons-title{
   font-size: 32rpx;
   width: 500rpx;
+  margin-right: auto;
 }
 .lessons-flag{
   color: #cc6031;

pages/Components/switchTab/switchTab.js

@@ -0,0 +1,32 @@
+// pages/Components/switchTab/switchTab.js
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    arr:{
+      type: Array,
+      value: []
+    }
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    curIndex: 0,
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    getSwitch:function(e){
+      const val = e.target.dataset.index
+      this.triggerEvent("changeIndex",val)
+      this.setData({
+        curIndex: e.target.dataset.index
+      })
+    },
+  }
+})

pages/Components/switchTab/switchTab.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

pages/Components/switchTab/switchTab.wxml

@@ -0,0 +1,3 @@
+<view class="switch-view">
+    <view class="switch-title {{curIndex == index ? 'curTitle' : ''}}" wx:for="{{arr}}" data-index="{{index}}" wx:key="index" bindtap="getSwitch">{{item}}</view>
+  </view>

pages/Components/switchTab/switchTab.wxss

@@ -0,0 +1,19 @@
+/* 顶部切换标题 */
+.switch-view{
+  display: flex;
+  background: #FFF;
+}
+.switch-view view{
+  margin: 0 auto;
+  color: #999;
+  height: 80rpx;
+  line-height: 80rpx;
+  font-size: 36rpx;
+}
+
+.curTitle{
+  color: #cc6031 !important;
+  border-bottom: 2px solid #cc6031;
+  font-weight: 600;
+}
+/* end */

pages/lessons/lessons.js

@@ -5,7 +5,46 @@ Page({
    * 页面的初始数据
    */
   data: {
+    switchTitle: ['待补课', '待上课'],
+    list: [{},
+      {},
+      {},
+      {},
+      {},
+    ],
+    loading: '上拉加载',
+    flag: 0,
+  },
+
+  changeIndex: function (e) {
+    console.log(e.detail)
+    if (e.detail == 0) {
+
+    } else {
+
+    }
+    this.setData({
+      list: [{},
+        {},
+        {},
+        {},
+        {},
+      ],
+      loading: '上拉加载',
+      flag: 0,
+    })
+  },
 
+  getTip:function(){
+    wx.showModal({
+        title: '补课说明',
+         content: '1。针对请假的课程进行补课',
+         showCancel: false,//是否显示取消按钮
+         cancelText:"否",//默认是“取消”
+         cancelColor:'#999999',//取消文字的颜色
+         confirmText:"我知道了",//默认是“确定”
+         confirmColor: 'skyblue',//确定文字的颜色
+    })
   },
 
   /**
@@ -54,7 +93,29 @@ Page({
    * 页面上拉触底事件的处理函数
    */
   onReachBottom: function () {
-
+    if (this.data.flag == 0) {
+      this.setData({
+        loading: '加载中',
+        flag: 1
+      })
+      setTimeout(() => {
+        this.setData({
+          list: [{},
+            {},
+            {},
+            {},
+            {},
+            {},
+            {},
+            {},
+            {},
+            {},
+          ],
+          loading: '没有更多数据',
+          flag: 2
+        })
+      }, 2000);
+    }
   },
 
   /**

pages/lessons/lessons.json

@@ -1,3 +1,7 @@
 {
-  "usingComponents": {}
+  "navigationBarTitleText": "补课",
+  "usingComponents": {
+    "switchTab":"/pages/Components/switchTab/switchTab",
+    "lessonsList":"/pages/Components/lessonsList/lessonsList"
+  }
 }

pages/lessons/lessons.wxml

@@ -1,2 +1,16 @@
-<!--pages/lessons/lessons.wxml-->
-<text>pages/lessons/lessons.wxml</text>
+<view class="container">
+
+  <!-- 说明 -->
+  <view class="tip-view" bindtap="getTip">说明</view>
+  <!-- end -->
+
+  <!-- 顶部切换菜单 -->
+  <switchTab arr="{{switchTitle}}" bind:changeIndex="changeIndex"></switchTab>
+  <!-- end -->
+
+  <!-- 补课、上课列表 -->
+  <lessonsList list="{{list}}"></lessonsList>
+  <!-- end -->
+
+  <view class="loading">{{loading}}</view>
+</view>

pages/lessons/lessons.wxss

@@ -1 +1,17 @@
-/* pages/lessons/lessons.wxss */
+.loading {
+  height: 200rpx;
+  line-height: 100rpx;
+  background: #f1f1f1;
+  color: #999;
+  text-align: center;
+}
+
+.tip-view{
+  height: 60rpx;
+  line-height: 60rpx;
+  width: 750rpx;
+  color: #FFF;
+  background: #cc6031;
+  text-align: center;
+  font-size: 36rpx;
+}

pages/lessonsDetail/lessonsDetail.js

@@ -0,0 +1,75 @@
+// pages/lessonsDetail/lessonsDetail.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    lessonsList:[
+      {},
+      {},
+    ],
+    stayList:[
+      {},
+      {},
+      {},
+      {},
+    ]
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})

pages/lessonsDetail/lessonsDetail.json

@@ -0,0 +1,6 @@
+{
+  "navigationBarTitleText": "补课",
+  "usingComponents": {
+    "lessonsList":"/pages/Components/lessonsList/lessonsList"
+  }
+}

pages/lessonsDetail/lessonsDetail.wxml

@@ -0,0 +1,13 @@
+<view class="container">
+
+  <!-- 请假课程 -->
+  <view class="title">请假课程</view>
+  <lessonsList showBtn="{{false}}" list="{{lessonsList}}"></lessonsList>
+  <!-- end -->
+
+  <!-- 呆上课程 -->
+  <view class="title">待上课程</view>
+  <lessonsList showBtn="{{false}}" showDate="{{false}}" list="{{stayList}}"></lessonsList>
+  <!-- end -->
+
+</view>

pages/lessonsDetail/lessonsDetail.wxss

@@ -0,0 +1,10 @@
+.container{
+  width: 700rpx;
+  margin: 0 auto;
+}
+.title{
+  color: #999;
+  font-size: 32rpx;
+  height: 80rpx;
+    line-height: 120rpx;
+}

pages/targetList/targetList.js

@@ -0,0 +1,66 @@
+// pages/targetList/targetList.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})

pages/targetList/targetList.json

@@ -0,0 +1,6 @@
+{
+  "navigationBarTitleText": "选择目标课程",
+  "usingComponents": {
+    "classList":"/pages/Components/classList/classList"
+  }
+}

pages/targetList/targetList.wxml

@@ -0,0 +1,7 @@
+<view class="container">
+  <view class="classList">
+    <classList showFlag="{{false}}"></classList>
+  </view>
+
+  <view class="submit-btn">确定</view>
+</view>

pages/targetList/targetList.wxss

@@ -0,0 +1,14 @@
+.submit-btn{
+  width: 400rpx;
+  font-size: 32rpx;
+  height: 80rpx;
+  line-height: 80rpx;
+  color: #FFF;
+  text-align: center;
+  position: absolute;
+  bottom: 40rpx;
+  left: 50%;
+  background: #cc6031;
+  margin-left: -200rpx;
+  border-radius: 50rpx;
+}

pages/task/task.js

@@ -6,23 +6,19 @@ Page({
    */
   data: {
     switchTitle:['待提交','已提交'],
-    curIndex: 0,
     doName:"做作业"
   },
 
-  getSwitch:function(e){
-    if(e.currentTarget.dataset.index == 0){
-      this.setData({
-        doName:"做作业"
-      })
-    } else {
-      this.setData({
-        doName:"查看详情"
-      })
-    }
+  changeIndex:function(e){
+   if(e.detail == 0){
     this.setData({
-      curIndex: e.currentTarget.dataset.index
+      doName: '做作业'
     })
+   } else {
+    this.setData({
+      doName: '查看详情'
+    })
+   }
   },
 
   doTask:function(){

pages/task/task.json

@@ -2,6 +2,7 @@
   "enablePullDownRefresh": true,
   "navigationBarTitleText": "提交作业",
   "usingComponents": {
-    "selectDate":"/pages/Components/selectDate/selectDate"
+    "selectDate":"/pages/Components/selectDate/selectDate",
+    "switchTab":"/pages/Components/switchTab/switchTab"
   }
 }

pages/task/task.wxml

@@ -5,9 +5,7 @@
   <!-- end -->
   
   <!-- 顶部切换标题 -->
-  <view class="switch-view">
-    <view class="switch-title {{curIndex == index ? 'curTitle' : ''}}" wx:for="{{switchTitle}}" data-index="{{index}}" wx:key="index" bindtap="getSwitch">{{item}}</view>
-  </view>
+  <switchTab arr="{{switchTitle}}" bind:changeIndex="changeIndex"></switchTab>
   <!-- end -->
 
   <!-- 作业列表 -->

pages/task/task.wxss

@@ -7,25 +7,7 @@ page{
   background: #f1f1f1;
 }
 
-/* 顶部切换标题 */
-.switch-view{
-  display: flex;
-  background: #FFF;
-}
-.switch-view view{
-  margin: 0 auto;
-  color: #999;
-  height: 80rpx;
-  line-height: 80rpx;
-  font-size: 36rpx;
-}
 
-.curTitle{
-  color: #cc6031 !important;
-  border-bottom: 2px solid #cc6031;
-  font-weight: 600;
-}
-/* end */
 
 /* 作业列表 */
   .task-box{