classList

app.json

@@ -1,6 +1,7 @@
 {
   "plugins": {},
   "pages": [
+    "pages/targetList/targetList",
     "pages/login/login",
     "pages/playShow/playShow",
     "pages/demo/demo",
@@ -23,7 +24,6 @@
     "pages/makePiano/makePiano",
     "pages/lessons/lessons",
     "pages/lessonsDetail/lessonsDetail",
-    "pages/targetList/targetList",
     "pages/addClass/addClass",
     "pages/theClasses/theClasses",
     "pages/growUp/growUp",

pages/Components/classList/classList.js

@@ -1,5 +1,16 @@
 // pages/Components/classList/classList.js
 Component({
+  lifetimes:{
+    attached:function(){
+      wx.getSystemInfo({
+        success: (result) => {
+          this.setData({
+            height: result.windowHeight
+          })
+        },
+      })
+    }
+  },
   /**
    * 组件的属性列表
    */
@@ -37,7 +48,9 @@ Component({
    * 组件的初始数据
    */
   data: {
-
+    animation: null,
+    height:0,
+    overflow: 'auto',
   },
 
   /**
@@ -49,6 +62,36 @@ Component({
         url: e.currentTarget.dataset.url,
       })
     },
+
+    showChoose:function(){
+      this.animation = wx.createAnimation({
+        timingFunction: 'linear',
+      })
+      const bottom = 0
+      this.animation.translateY(bottom).step()
+      this.setData({
+        overflow: 'hidden',
+        animation:this.animation.export(),
+        bottom
+      })
+    },
+    hideChoose:function(){
+      this.animation = wx.createAnimation({
+        timingFunction: 'linear',
+      })
+      const bottom = 2000
+      this.animation.translateY(bottom).step()
+      this.setData({
+        overflow: 'auto',
+        animation:this.animation.export(),
+      })
+      setTimeout(() => {
+        this.setData({
+          bottom
+        })
+      }, 400);
+    },
+
     getLeaveNumList: function () {
       wx.navigateTo({
         url: '/pages/leaveRecord/leaveRecord',

pages/Components/classList/classList.wxml

@@ -1,4 +1,4 @@
-<view class="class-container">
+<view class="class-container" style="height: {{height}}px;overflow-y: {{overflow}}">
   <!-- <view class="class-view">
     <view class="class-date">2021-02-22 星期一</view>
     <view class="class-list">
@@ -58,4 +58,22 @@
       </radio-group>
     </view>
   </view>
+
+  <view class="choose-bg" wx:if="{{bottom == 0}}" bindtap="hideChoose"></view>
+  <view class="class-choose" animation="{{animation}}" style="bottom:{{bottom}}rpx">
+    <view class="title">待补课程</view>
+    <view class="choose-list">
+      <view class="choose-box" wx:for="{{2}}" wx:key="index">
+        <view class="choose-title">星期日，2021年01月01日</view>
+        <view class="choose-time">08:00 ~ 09:00</view>
+        <view class="choose-name">小鹏钢琴课</view>
+        <view class="choose-room">钢琴教室2</view>
+        <view class="choose-teacher">授课老师：张老师</view>
+      </view>
+    </view>
+    <view class="choose-btn-view">
+      <view class="choose-btn" bindtap="hideChoose">确认补课</view>
+    </view>
+  </view>
+
 </view>

pages/Components/classList/classList.wxss

@@ -1,4 +1,7 @@
 /* 课表列表 */
+.class-list{
+  padding-bottom: 150rpx
+}
 .class-box{
   display: flex;
   flex-wrap: wrap;
@@ -70,4 +73,84 @@
     margin-top: 30rpx;
 }
 
+/* end */
+
+/* 待补课程 */
+.choose-bg{
+  width: 750rpx;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background: #333;
+  opacity: 0.4;
+  z-index: 1;
+}
+  .class-choose{
+    position: fixed;
+    bottom: -1000rpx;
+    background: #FFF;
+    z-index: 2;
+    width: 700rpx;
+    padding: 25rpx;
+    height: 900rpx;
+    border-radius: 50rpx 50rpx 0 0;
+  }
+  .title{
+    font-size: 36rpx;
+    height: 60rpx;
+    line-height: 60rpx;
+  }
+  .choose-list{
+    height: 650rpx;
+    overflow-y: auto;
+  }
+  .choose-box{
+    width: 646rpx;
+    border-left: 4rpx solid #cc6031;
+    padding: 25rpx;
+    margin: 20rpx 0;
+    border-radius: 15rpx;
+    display: flex;
+    flex-wrap: wrap;
+    box-shadow: 0 10rpx 15rpx #ccc;
+  }
+  .choose-box view{
+    font-size: 32rpx;
+    height: 60rpx;
+    line-height: 60rpx;
+  }
+  .choose-title,.choose-time{
+    font-weight: 600;
+  }
+  .choose-title{
+    width: 400rpx;
+  }
+  .choose-time{
+    margin-left: auto;
+  }
+  .choose-name,.choose-room,.choose-teacher{
+    width: 700rpx;
+  }
+  .choose-room,.choose-teacher{
+    color: #999;
+  }
+  .choose-btn-view{
+    height: 180rpx;
+  }
+  .choose-btn{
+    height: 80rpx;
+    width: 400rpx;
+    position: relative;
+    left: 50%;
+    margin-left: -200rpx;
+    text-align: center;
+    background: #cc6031;
+    line-height: 80rpx;
+    color: #FFF;
+    border-radius: 50rpx;
+    font-size: 36rpx;
+    top: 50rpx;
+  }
+
 /* end */

pages/targetList/targetList.js

@@ -13,6 +13,10 @@ Page({
     ]
   },
 
+  showChoose:function(){
+    this.selectComponent("#classList").showChoose()
+  },
+
   /**
    * 生命周期函数--监听页面加载
    */

pages/targetList/targetList.wxml

@@ -1,7 +1,7 @@
 <view class="container">
   <view class="classList">
-    <classList showFlag="{{false}}" showRadio="{{true}}" list="{{list}}"></classList>
+    <classList id="classList" showFlag="{{false}}" showRadio="{{true}}" list="{{list}}"></classList>
   </view>
 
-  <view class="submit-btn">确定</view>
+  <view class="submit-btn" bindtap="showChoose">确定</view>
 </view>

pages/targetList/targetList.wxss

@@ -5,7 +5,7 @@
   line-height: 80rpx;
   color: #FFF;
   text-align: center;
-  position: absolute;
+  position: fixed;
   bottom: 40rpx;
   left: 50%;
   background: #cc6031;