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

pages/makePiano/makePiano.js

@@ -7,8 +7,64 @@ Page({
    * 页面的初始数据
    */
   data: {
+    animationBox: {},
+    animationBg: {},
     weekList:[],
-    curIndex:0
+    curIndex:0,
+    array: [
+      '全部时间',
+      '08:00 ~ 10:00', 
+      '10:00 ~ 12:00', 
+      '12:00 ~ 14:00', 
+      '14:00 ~ 16:00', 
+      '16:00 ~ 18:00', 
+      '18:00 ~ 20:00', 
+      '20:00 ~ 22:00', 
+    ],
+    objectArray: [
+      {
+        id: 0,
+        name: '全部时间'
+      },
+      {
+        id: 1,
+        name: '08:00 ~ 10:00'
+      },
+      {
+        id: 2,
+        name: '10:00 ~ 12:00'
+      },
+      {
+        id: 3,
+        name: '12:00 ~ 14:00'
+      },
+      {
+        id: 4,
+        name: '14:00 ~ 16:00'
+      },
+      {
+        id: 5,
+        name: '16:00 ~ 18:00'
+      },
+      {
+        id: 6,
+        name: '18:00 ~ 20:00'
+      },
+      {
+        id: 7,
+        name: '20:00 ~ 22:00'
+      }
+    ],
+    index: 0,
+    schoolList:[
+      {},
+      {},
+      {},
+      {},
+      {},
+    ],
+    loading:'上拉加载',
+    flag:0,
   },
 
   getWeek:function(e){
@@ -16,6 +72,70 @@ Page({
       curIndex : e.currentTarget.dataset.index
     })
   },
+
+  bindPickerChange: function (e) {
+    this.setData({
+      index: e.detail.value
+    })
+  },
+
+  localtionMethod: function () {
+    var that = this
+    wx.getLocation({
+      type: 'wgs84',
+      success(res) {
+        console.log(res)
+        wx.setStorageSync('latlng', res)
+      },
+      fail(res){
+        wx.hideLoading({
+          success: (res) => {
+            wx.showModal({
+              title: '提示',
+              content: "定位失败,请检查手机'位置服务'或GPS功能已开启并授权小程序位置信息",
+            })
+          },
+        })
+      }
+    })
+  },
+
+  showSelect:function(){
+    var animation = wx.createAnimation({
+      timingFunction: 'linear',
+    })
+    this.animation = animation
+    var num = 0
+    var opacity = 0
+    if(this.data.yFlag == false){
+      num = 165
+      opacity = 0.4
+      this.setData({
+        yFlag: true
+      })
+    } else {
+      num = -360
+      opacity = 0
+      this.setData({
+        yFlag: false
+      })
+    }
+    animation.translateY(num).step()
+    this.setData({
+      animationBox:animation.export()
+    })
+
+    var animation2 = wx.createAnimation({
+      timingFunction: 'linear',
+    })
+    this.animation2 = animation2
+
+    animation2.opacity(opacity).step()
+    this.setData({
+      animationBg:animation2.export()
+    })
+
+  },
   
 
   /**
@@ -35,6 +155,7 @@ Page({
     this.setData({
       weekList: list
     })
+    this.localtionMethod()
   },
 
   /**
@@ -76,7 +197,30 @@ Page({
    * 页面上拉触底事件的处理函数
    */
   onReachBottom: function () {
-
+    if(this.data.flag == 0){
+      this.setData({
+        loading: '加载中',
+        flag: 1
+      })
+      setTimeout(() => {
+        this.setData({
+          schoolList:[
+            {},
+            {},
+            {},
+            {},
+            {},
+            {},
+            {},
+            {},
+            {},
+            {},
+          ],
+          loading: '没有更多数据',
+          flag: 2
+        })
+      }, 2000);
+    }
   },
 
   /**

pages/makePiano/makePiano.wxml

@@ -1,10 +1,88 @@
 <view class="container">
+  <!-- 筛选按钮 -->
+  <view class="select-view" bindtap="showSelect">筛选</view>
+  <view class="select-box" animation="{{animationBox}}">
+    <view class="change-time">
+      <view class="select-title">选择时间段:</view>
+      <view class="select-date-view">
+        <view class="section">
+          <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
+            <view class="picker">
+              {{array[index]}}
+            </view>
+          </picker>
+        </view>
+      </view>
+    </view>
+    <view class="search-btn-view">
+      <view class="search-btn">确定</view>
+      <view class="reset-btn">重置</view>
+    </view>
+  </view>
+  <view class="select-box-bg" bindtap="showSelect" animation="{{animationBg}}" wx:if="{{yFlag == true}}"></view>
+  <view class="height-view"></view>
+  <!-- end -->
+
+  <!-- 日期选择 -->
   <view class="week-view">
     <view class="week-list">
-      <view class="week-box {{curIndex == index ? 'cur-week' : ''}}" wx:for="{{weekList}}" wx:key="index" data-index="{{index}}" bindtap="getWeek">
+      <view class="week-box {{curIndex == index ? 'cur-week' : ''}}" wx:for="{{weekList}}" wx:key="index"
+        data-index="{{index}}" bindtap="getWeek">
         <view class="weekDay">{{item.week}}</view>
         <view class="weekDate">{{item.date}}</view>
       </view>
     </view>
   </view>
+  <!-- end -->
+
+  <!-- 校区列表 -->
+  <view class="school-view">
+    <view class="school-list">
+      <view class="school-box" wx:for="{{schoolList}}" wx:key="index">
+        <view class="school-title">
+          <view class="school-name">智慧汉阳校区</view>
+          <view class="school-dis">
+            <view class="disImg">
+              <image src="/images/local.png"></image>
+            </view>
+            <view class="disNum">10.00km</view>
+          </view>
+        </view>
+        <view class="school-addr">
+          <view class="address">武汉市汉阳区龙阳大道特6号</view>
+          <view class="showMore {{index == 0 ? 'curSchool' : ''}}">
+            <image class="" src="/images/showMore.png"></image>
+          </view>
+        </view>
+        <view class="school-tel">
+          <view class="telNum">13222222222</view>
+          <view class="getTel">
+            <image src="/images/getTel.png"></image>
+          </view>
+        </view>
+        <view class="school-class-list">
+          <view class="class-none" style="display:none">该时间段未排课</view>
+          <view class="class-list" wx:if="{{index == 0}}" wx:for="{{3}}" wx:key="cIndex" wx:for-index="cItem">
+            <view class="class-box">
+              <view class="class-time">
+                13:20 ~ 14:05
+              </view>
+              <view class="class-get-view">
+                <view class="class-stu-num">
+                  1/3
+                </view>
+                <view class="class-get-btn">
+                  预约
+                </view>
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+  <!-- end -->
+
+  <view class="loading">{{loading}}</view>
+
 </view>

pages/makePiano/makePiano.wxss

@@ -2,6 +2,99 @@
   padding: 0;
   margin: 0;
 }
+
+/* 筛选按钮 */
+.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;
+  padding: 0 20rpx;
+  height: 60rpx;
+  line-height: 60rpx;
+  border-radius: 5rpx;
+  font-weight: 600;
+}
+.select-title{
+  height: 140rpx;
+  line-height: 140rpx;
+  margin-left: 25rpx;
+  width: 240rpx;
+  text-align: center;
+}
+
+.select-box-bg{
+  background: #333;
+  opacity: 0;
+  z-index: 1;
+  height: 100%;
+  width: 100%;
+  top: 60rpx;
+  position: fixed;
+}
+.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;
+}
+/* end */
+
+/* 日期选择 */
 .week-view{
    width: 700rpx;
    margin: 25rpx;
@@ -24,4 +117,109 @@
 .cur-week{
   background: #cc6031;
   color:#FFF;
-}
+}
+/* end */
+
+/* 校区列表 */
+  .school-box{
+    padding: 25rpx;
+    border-bottom: 20rpx solid #eee;
+  }
+  .school-title,.school-dis,.school-addr,.school-tel,.class-box,.class-get-view{
+    display: flex;
+  }
+  .school-title{
+    height: 60rpx;
+  }
+  .disImg{
+    width: 40rpx;
+    height: 40rpx;
+    margin-right: 10rpx;
+  }
+  .disImg image{
+    height: 100%;
+    width: 100%;
+  }
+  .school-name{
+    width: 500rpx;
+    font-size: 36rpx;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  .school-dis{
+    margin-left: auto;
+    font-size: 32rpx;
+    height: 40rpx;
+    line-height: 40rpx;
+  }
+  .school-addr,.school-tel{
+    height: 60rpx;
+    line-height: 60rpx;
+    color: #999;
+  }
+  .address,.telNum{
+    width: 600rpx;
+  }
+  .showMore{
+    width: 32rpx;
+    height: 32rpx;
+    margin-left: auto;
+    padding-top: 7rpx;
+  }
+  .showMore image,.getTel image{
+    height: 100%;
+    width: 100%;
+  }
+  .getTel{
+    width: 40rpx;
+    height: 40rpx;
+    margin-left: auto;
+    padding-top: 10rpx;
+  }
+  .class-get-view{
+    margin-left: auto;
+  }
+  .class-time{
+    width: 350rpx;
+  }
+  .class-get-view{
+    max-width: 350rpx;
+  }
+  .class-get-btn{
+    color: #FFF;
+    background: #cc6031;
+    border-radius: 10rpx;
+    width: 90rpx;
+    text-align: center;
+  }
+  .class-box{
+    height: 60rpx;
+    line-height: 60rpx;
+    font-size: 28rpx;
+    color: #999;
+    margin: 20rpx 0;
+  }
+  .class-none{
+    height: 60rpx;
+    line-height: 60rpx;
+    font-size: 28rpx;
+    color: #999;
+  }
+  .class-stu-num{
+    margin-right: 10rpx;
+  }
+  .curSchool image{
+    transform: rotate(90deg);
+  }
+/* end */
+
+/* loading */
+.loading {
+  height: 200rpx;
+  line-height: 100rpx;
+  background: #f1f1f1;
+  color: #999;
+  text-align: center;
+}
+/* end */

pages/piano/piano.wxml

@@ -19,7 +19,10 @@
       </view>
     </view>
     </view>
-    <view class="search-btn">确定</view>
+    <view class="search-btn-view">
+      <view class="search-btn">确定</view>
+      <view class="reset-btn">重置</view>
+    </view>
   </view>
   <view class="select-box-bg" bindtap="showSelect" animation="{{animationBg}}" wx:if="{{yFlag == true}}"></view>
   <view class="height-view"></view>

pages/piano/piano.wxss

@@ -86,19 +86,32 @@
   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;
-  position: absolute;
-  bottom: 20rpx;
-  left: 50%;
-  margin-left: -75rpx;
   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;