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

app.json

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

pages/Components/classList/classList.js

@@ -21,6 +21,10 @@ Component({
    * 组件的方法列表
    */
   methods: {
-
+    getLeaveNumList:function(){
+      wx.navigateTo({
+        url: '/pages/leaveRecord/leaveRecord',
+      })
+    }
   }
 })

pages/Components/classList/classList.wxml

@@ -8,7 +8,7 @@
         <view class="class-room">钢琴教室01</view>
         <view class="class-flag">已上课</view>
         <view class="class-teacher">张老师</view>
-        <view wx:if="{{showLeaveNum}}" class="last-leave-num">本课程请假余额 6 次</view>
+        <view wx:if="{{showLeaveNum}}" class="last-leave-num" bindtap="getLeaveNumList">本课程请假余额 6 次</view>
       </view>
     </view>
     

pages/Components/lessons/lessons.js

@@ -1,23 +0,0 @@
-// pages/Components/lessons/lessons.js
-Component({
-  /**
-   * 组件的属性列表
-   */
-  properties: {
-
-  },
-
-  /**
-   * 组件的初始数据
-   */
-  data: {
-
-  },
-
-  /**
-   * 组件的方法列表
-   */
-  methods: {
-
-  }
-})

pages/Components/lessons/lessons.wxml

@@ -1,2 +0,0 @@
-<!--pages/Components/lessons/lessons.wxml-->
-<text>pages/Components/lessons/lessons.wxml</text>

pages/Components/lessons/lessons.wxss

@@ -1 +0,0 @@
-/* pages/Components/lessons/lessons.wxss */

pages/Components/lessonsList/lessonsList.js

@@ -0,0 +1,34 @@
+// pages/Components/lessonsList/lessonsList.js
+Component({
+  lifetimes: {
+    attached: function() {
+      // 在组件实例进入页面节点树时执行
+    },
+    detached: function() {
+      // 在组件实例被从页面节点树移除时执行
+    },
+  },
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    list:{
+      type: Array,
+      value:[]
+    }
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    
+  }
+})

pages/Components/lessonsList/lessonsList.wxml

@@ -0,0 +1,20 @@
+<view class="lessons-container">
+  <view class="lessons-view">
+    <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 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>
+      <view class="lessons-btn-box">
+        <view class="apply-btn" wx:if="{{(index +1) % 2 ==0}}">申请补课</view>
+        <view class="more-btn" wx:else>查看详情</view>
+      </view>
+    </view>
+  </view>
+</view>

pages/Components/lessonsList/lessonsList.wxss

@@ -0,0 +1,60 @@
+.lessons-box{
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  width: 646rpx;
+  border-left: 4rpx solid #cc6031;
+  border-radius: 15rpx;
+  margin: 40rpx auto;
+  padding: 25rpx;
+  box-shadow: 0 15rpx 20rpx #eee;
+}
+.lessons-type{
+  color: #FFF;
+  background: #cc6031;
+  line-height: 30rpx;
+  height: 30rpx;
+  margin-top: 20rpx;
+  font-size: 24rpx;
+  margin-right: 10rpx;
+  padding: 0 5rpx;
+  border-radius: 10rpx;
+  font-weight: 400;
+}
+.lessons-title,.lessons-flag,.lessons-room,.lessons-teacher{
+  height: 55rpx;
+  line-height: 55rpx;
+}
+.lessons-title{
+  font-size: 32rpx;
+  width: 500rpx;
+}
+.lessons-flag{
+  color: #cc6031;
+}
+.lessons-flag-ed{
+  color: #999;
+}
+.lessons-room,.lessons-teacher{
+  width: 100%;
+}
+.lessons-teacher,.lessons-date-box{
+  color: #999;
+  font-size: 28rpx;
+}
+.apply-btn{
+  height: 60rpx;
+  line-height: 60rpx;
+  width: 180rpx;
+  margin-left: auto;
+  text-align: center;
+  border: 1px solid #cc6031;
+  border-radius: 100rpx;
+  color: #cc6031;
+  font-size: 28rpx;
+}
+.more-btn{
+  height: 60rpx;
+  line-height: 60rpx;
+  color: #999;
+}

pages/index/index.js

@@ -18,11 +18,11 @@ Page({
     ],
     appList: [
       { img: '/images/kb.png', title: '我的课表',url:"/pages/schedule/schedule" },
-      { img: '/images/zy.png', title: '提交作业' },
+      { img: '/images/zy.png', title: '提交作业',url:"/pages/task/task" },
       { img: '/images/dp.png', title: '课堂点评' },
       { img: '/images/zj.png', title: '成长足迹' },
       { img: '/images/qj.png', title: '请假',url:"/pages/leave/leave" },
-      { img: '/images/bk.png', title: '补课' },
+      { img: '/images/bk.png', title: '补课',url:"/pages/lessons/lessons" },
       { img: '/images/jk.png', title: '加课' },
       { img: '/images/dk.png', title: '调课' },
     ],

pages/leaveRecord/leaveRecord.js

@@ -0,0 +1,98 @@
+// pages/leaveRecord/leaveRecord.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    loading:'上拉加载',
+    flag:0,
+    list:[
+      {},
+      {},
+      {},
+      {},
+      {},
+      {},
+    ],
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+    if(this.data.flag == 0){
+      this.setData({
+        loading: '加载中',
+        flag: 1
+      })
+      setTimeout(() => {
+        this.setData({
+          list:[
+            {},
+            {},
+            {},
+            {},
+            {},
+            {},
+            {},
+            {},
+            {},
+            {},
+          ],
+          loading: '没有更多数据',
+          flag: 2
+        })
+      }, 2000);
+    }
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})

pages/leaveRecord/leaveRecord.json

@@ -0,0 +1,7 @@
+{
+  "enablePullDownRefresh": true,
+  "navigationBarTitleText": "请假记录",
+  "usingComponents": {
+    "lessonsList":"/pages/Components/lessonsList/lessonsList"
+  }
+}

pages/leaveRecord/leaveRecord.wxml

@@ -0,0 +1,6 @@
+<view class="container">
+  <!-- 补课记录列表 -->
+  <lessonsList id="lessonsList" list="{{list}}"></lessonsList>
+  <!-- end -->
+  <view class="loading">{{loading}}</view>
+</view>

pages/leaveRecord/leaveRecord.wxss

@@ -0,0 +1,9 @@
+/* loading */
+.loading {
+  height: 200rpx;
+  line-height: 100rpx;
+  background: #f1f1f1;
+  color: #999;
+  text-align: center;
+}
+/* end */

pages/lessons/lessons.js

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

pages/lessons/lessons.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

pages/lessons/lessons.wxml

@@ -0,0 +1,2 @@
+<!--pages/lessons/lessons.wxml-->
+<text>pages/lessons/lessons.wxml</text>

pages/lessons/lessons.wxss

@@ -0,0 +1 @@
+/* pages/lessons/lessons.wxss */

pages/task/piano.wxss

@@ -1,137 +0,0 @@
-.piano-list {
-  width: 750;
-}
-
-.piano-box {
-  padding: 20rpx 0;
-  display: flex;
-  justify-content: space-between;
-  border-bottom: 20rpx solid #f1f1f1;
-}
-
-.piano-detail view {
-  height: 60rpx;
-  line-height: 60rpx;
-  width: 470rpx;
-  margin-left: 25rpx;
-}
-
-.piano-time {
-  font-weight: 600;
-}
-
-.piano-date {
-  height: 60rpx;
-  line-height: 60rpx;
-  font-size: 28rpx;
-  color: #666;
-  margin-right: 25rpx;
-}
-
-.loading {
-  height: 200rpx;
-  line-height: 100rpx;
-  background: #f1f1f1;
-  color: #999;
-  text-align: center;
-}
-
-.select-view {
-  height: 60rpx;
-  line-height: 60rpx;
-  background: #cc6031;
-  color: #FFF;
-  text-align: center;
-  font-size: 36rpx;
-  position: fixed;
-  width: 750rpx;
-  z-index: 3;
-}
-
-.height-view {
-  height: 60rpx;
-}
-
-.select-box {
-  position: fixed;
-  background: #FFF;
-  top: -240rpx;
-  width: 750rpx;
-  height: 300rpx;
-  font-size: 32rpx;
-  z-index: 2;
-  
-}
-.change-time{
-  display: flex;
-  margin-top: 40rpx;
-}
-.section{
-  display: flex;
-  padding-top: 40rpx;
-}
-.section view{
-  line-height: 60rpx;
-}
-.picker{
-  margin: 0 10rpx;
-  border: 1px solid #ccc;
-  padding: 0 20rpx;
-  height: 60rpx;
-  line-height: 60rpx;
-  border-radius: 5rpx;
-}
-.select-title{
-  height: 140rpx;
-  line-height: 140rpx;
-  margin-left: 25rpx;
-}
-.search-btn-view{
-  display: flex;
-    width: 400rpx;
-    margin: 20rpx auto;
-}
-.search-btn-view view{
-  margin: 0 auto;
-}
-.search-btn{
-  height: 60rpx;
-  line-height: 60rpx;
-  width: 150rpx;
-  border-radius: 10rpx;
-  background: #cc6031;
-  text-align: center;
-  color: #FFF;
-}
-.reset-btn{
-  height: 60rpx;
-  line-height: 60rpx;
-  width: 150rpx;
-  border-radius: 10rpx;
-  background: #f1f1f1;
-  text-align: center;
-  color: #666;
-}
-.select-box-bg{
-  background: #333;
-  opacity: 0;
-  z-index: 1;
-  height: 100%;
-  width: 100%;
-  top: 60rpx;
-  position: fixed;
-}
-.getPiano{
-  height: 48rpx;
-  line-height: 48rpx;
-  background: #cc6031;
-  color: #FFF;
-  text-align: center;
-  padding: 15rpx;
-  position: fixed;
-  bottom: 20rpx;
-  width: 300rpx;
-  left: 50%;
-  margin-left: -150rpx;
-  border-radius: 100rpx;
-}