piano/showList

app.json

@@ -1,6 +1,7 @@
 {
   "plugins": {},
   "pages": [
+    "pages/piano/piano",
     "pages/index/index",
     "pages/login/login",
     "pages/myself/myself"
@@ -37,7 +38,7 @@
       {
         "selectedIconPath": "images/cur-piano.png",
         "iconPath": "images/piano.png",
-        "pagePath": "pages/myself/myself",
+        "pagePath": "pages/piano/piano",
         "text": "预约"
       },
       {

pages/Components/showList/showList.js

@@ -0,0 +1,26 @@
+// pages/Component/showList/showList.js
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    list:{
+      type:Array,
+      value:[]
+    }
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+
+  }
+})

pages/Components/showList/showList.json

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

pages/Components/showList/showList.wxml

@@ -0,0 +1,21 @@
+<view class="show-view">
+  <view class="show-list">
+    <view class="show-box" wx:for="{{list}}" wx:key="index">
+      <view class="show-img">
+        <image mode="aspectFill" src="https://file.schoolwisdoms.com/image/26cf1980-5b25-4c2e-af7f-376677d76033.jpg"></image>
+      </view>
+      <view class="show-title-view">
+        <view class="show-title">这是一个测试数据</view>
+        <view class="zan-view">
+          <view class="zan-img">
+            <image src="/images/zan.png" ></image>
+          </view>
+          <view class="zan-num">0</view>
+        </view>
+      </view>
+      <view class="show-desc">
+        这是一条测试数据,这是一条测试数据,这是一条测试数据
+      </view>
+    </view>
+  </view>
+</view>

pages/Components/showList/showList.wxss

@@ -0,0 +1,78 @@
+.show-view{
+  margin: 40rpx 0;
+}
+.show-list {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
+.show-box {
+  width: 340rpx;
+  margin-bottom: 20rpx;
+}
+
+.show-img {
+  width: 340rpx;
+  height: 255rpx;
+}
+
+.show-img image {
+  width: 100%;
+  height: 100%;
+  border-radius: 10rpx;
+}
+
+.show-title-view {
+  display: flex;
+  width: 340rpx;
+
+}
+
+.show-title {
+  width: 200rpx;
+  font-size: 28rpx;
+  height: 48rpx;
+  line-height: 48rpx;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.zan-view {
+  display: flex;
+  justify-content: right;
+  margin-left: auto;
+}
+
+.zan-img {
+  height: 48rpx;
+  width: 48rpx;
+}
+
+.zan-img image {
+  height: 100%;
+  width: 100%;
+}
+
+.zan-num {
+  font-size: 28rpx;
+  height: 48rpx;
+  line-height: 48rpx;
+  letter-spacing: -3rpx;
+}
+
+.zan-nums {
+  color: #cc6031;
+}
+
+.show-desc {
+  width: 340rpx;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  color: #999;
+  font-size: 28rpx;
+  height: 48rpx;
+  line-height: 48rpx;
+}

pages/index/index.js

@@ -47,6 +47,17 @@ Page({
       {img: '/images/bk.png',title: '补课'},
       {img: '/images/jk.png',title: '加课'},
       {img: '/images/dk.png',title: '调课'},
+    ],
+    stuShowList:[
+      {},
+      {},
+      {},
+      {},
+    ],
+    teaShowList:[
+      {},
+      {},
+      {},
     ]
   },
 

pages/index/index.json

@@ -1,3 +1,7 @@
 {
-  "usingComponents": {}
+  "enablePullDownRefresh": true,
+  "usingComponents": {
+    "showView":"/pages/Components/showList/showList"
+  },
+  "navigationBarTitleText": "首页"
 }

pages/index/index.wxml

@@ -3,8 +3,10 @@
   <view class="head-view">
     <view class="head-left">
       <view class="head-img-view" wx:for="{{stuList}}" wx:key="index" data-id="{{item.id}}" bindtap="changeStu">
-        <image class="{{curStu == item.id ? 'curStu' : 'stuHead'}}" wx:if="{{index == 0}}" src="/images/head.png"></image>
-        <image class="{{curStu == item.id ? 'curStu' : 'stuHead'}}" wx:if="{{index != 0}}" src="/images/head2.png"></image>
+        <image class="{{curStu == item.id ? 'curStu' : 'stuHead'}}" wx:if="{{index == 0}}" src="/images/head.png">
+        </image>
+        <image class="{{curStu == item.id ? 'curStu' : 'stuHead'}}" wx:if="{{index != 0}}" src="/images/head2.png">
+        </image>
       </view>
     </view>
     <view class="head-right">
@@ -21,45 +23,68 @@
 
   <!-- 轮播图 -->
   <view class="swiper">
-			<swiper class="banner" autoplay circular interval="3000">
-				<block wx:for="{{1}}" wx:key="index">
-					<swiper-item class="banner-box" >
-						<image lazy-load mode="aspectFill" class="bb-image" src="https://file.schoolwisdoms.com/image/f398463b-3357-4dae-a6d0-4384a9c9d173.jpg"></image>
-					</swiper-item>
-				</block>
-			</swiper>
-		</view>
+    <swiper class="banner" autoplay circular interval="3000">
+      <block wx:for="{{1}}" wx:key="index">
+        <swiper-item class="banner-box">
+          <image lazy-load mode="aspectFill" class="bb-image"
+            src="https://file.schoolwisdoms.com/image/f398463b-3357-4dae-a6d0-4384a9c9d173.jpg"></image>
+        </swiper-item>
+      </block>
+    </swiper>
+  </view>
   <!-- end -->
 
-    <!-- 课程数据 -->
-    <view class="class-view">
-      <view class="title">课程数据</view>
-      <view class="class-list">
-        <view class="class-box" wx:for="{{classList}}" wx:key="index">
-          <view class="class-img">
-            <image src="{{item.img}}"></image>
-          </view>
-          <view class="class-detail">
-            <view class="class-num">{{item.num}}</view>
-            <view class="class-title">{{item.title}}</view>
-          </view>
+  <!-- 课程数据 -->
+  <view class="class-view">
+    <view class="title">课程数据</view>
+    <view class="class-list">
+      <view class="class-box" wx:for="{{classList}}" wx:key="index">
+        <view class="class-img">
+          <image src="{{item.img}}"></image>
+        </view>
+        <view class="class-detail">
+          <view class="class-num">{{item.num}}</view>
+          <view class="class-title">{{item.title}}</view>
         </view>
       </view>
     </view>
-    <!-- end -->
+  </view>
+  <!-- end -->
 
-    <!-- 我的应用 -->
-    <view class="app-view">
-      <view class="title">我的应用</view>
-      <view class="app-list">
-        <view class="app-box" wx:for="{{appList}}" wx:key="index">
-          <view class="app-img">
-            <image src="{{item.img}}"></image>
-          </view>
-          <view class="app-title">{{item.title}}</view>
+  <!-- 我的应用 -->
+  <view class="app-view">
+    <view class="title">我的应用</view>
+    <view class="app-list">
+      <view class="app-box" wx:for="{{appList}}" wx:key="index">
+        <view class="app-img">
+          <image src="{{item.img}}"></image>
         </view>
+        <view class="app-title">{{item.title}}</view>
       </view>
     </view>
-    <!-- end -->
+  </view>
+  <!-- end -->
+
+  <!-- 学生秀 -->
+  <view class="show-view">
+    <view class="title-view">
+      <view class="title">学生秀</view>
+      <view class="more">更多</view>
+    </view>
+    <showView list="{{stuShowList}}"></showView>
+    <view class="reset-btn">换一批</view>
+  </view>
+  <!-- end -->
+
+   <!-- 老师秀 -->
+   <view class="show-view">
+    <view class="title-view">
+      <view class="title">老师秀</view>
+      <view class="more">更多</view>
+    </view>
+    <showView list="{{teaShowList}}"></showView>
+    <view class="reset-btn">换一批</view>
+  </view>
+  <!-- end -->
 
 </view>

pages/index/index.wxss

@@ -1,40 +1,47 @@
-.container{
+.container {
   padding: 0;
   margin: 0;
   color: #333;
 }
 
 /* 顶部学生信息 */
-  .head-view{
-    display: flex;
-    width: 700rpx;
-    margin: 25rpx;
-  }
-  .head-left{
-    display: flex;
-    width: 350rpx;
-  }
-  .head-img-view{
-    width: 60rpx;
-    margin-right: 10rpx;
-  }
-  .head-img-view image{
-    height: 60rpx;
-    width: 60rpx;
-    border-radius: 60rpx;
-  }
-  .section{
-    height: 60rpx;
-    line-height: 60rpx;
-    text-align: center;
-    width: 350rpx;
-  }
-  .stuHead{
-    opacity: 0.2;
-  }
-  .curStu{
-    opacity: 1 !important;
-  }
+.head-view {
+  display: flex;
+  width: 700rpx;
+  margin: 25rpx;
+}
+
+.head-left {
+  display: flex;
+  width: 350rpx;
+}
+
+.head-img-view {
+  width: 60rpx;
+  margin-right: 10rpx;
+}
+
+.head-img-view image {
+  height: 60rpx;
+  width: 60rpx;
+  border-radius: 60rpx;
+}
+
+.section {
+  height: 60rpx;
+  line-height: 60rpx;
+  text-align: center;
+  width: 350rpx;
+}
+
+.stuHead {
+  opacity: 0.2;
+}
+
+.curStu {
+  opacity: 1 !important;
+}
+
 /* end */
 
 /* 轮播图 */
@@ -54,86 +61,126 @@
 .swiper {
   position: relative;
 }
+
 /* end */
 
 /* 课程数据 */
-  .class-view{
-    width: 700rpx;
-    margin:  40rpx  25rpx;
-  }
-  .class-list{
-    display: flex;
-  }
-  .class-box{
-    width: 220rpx;
-    height: 110rpx;
-    display: flex;
-    box-shadow: 0 20rpx 20rpx #ddd;
-    margin: 20rpx auto;
-  }
-  .class-img{
-    width: 60rpx;
-    height: 60rpx;
-    margin-top: 20rpx;
-    margin-left: 10rpx;
-  }
-  .class-img image{
-    height: 100%;
-    width: 100%;
-  }
-  .class-detail{
-    text-align: center;
-    width: 160rpx;
-    margin-left: auto;
-  }
- 
-  .class-title{
-    color: #999;
-    font-size: 24rpx;
-    height: 40rpx;
-    line-height: 40rpx;
-  }
-  .class-num{
-    color: #cc6031;
-    height: 60rpx;
-    line-height: 60rpx;
-  }
+.class-view {
+  width: 700rpx;
+  margin: 40rpx 25rpx;
+}
+
+.class-list {
+  display: flex;
+}
+
+.class-box {
+  width: 220rpx;
+  height: 110rpx;
+  display: flex;
+  box-shadow: 0 20rpx 20rpx #ddd;
+  margin: 20rpx auto;
+}
+
+.class-img {
+  width: 60rpx;
+  height: 60rpx;
+  margin-top: 20rpx;
+  margin-left: 10rpx;
+}
+
+.class-img image {
+  height: 100%;
+  width: 100%;
+}
+
+.class-detail {
+  text-align: center;
+  width: 160rpx;
+  margin-left: auto;
+}
+
+.class-title {
+  color: #999;
+  font-size: 24rpx;
+  height: 40rpx;
+  line-height: 40rpx;
+}
+
+.class-num {
+  color: #cc6031;
+  height: 60rpx;
+  line-height: 60rpx;
+}
+
 /* end */
 
 /* 标题 */
-  .title{
-    font-size: 36rpx;
-    font-weight: 600;
-  }
+.title {
+  font-size: 36rpx;
+  font-weight: 600;
+}
+
 /* end */
 
 /* 我的应用 */
-  .app-view{
+.app-view {
+  width: 700rpx;
+  margin: 40rpx 25rpx;
+}
+
+.app-list {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.app-box {
+  flex: 0 0 25%;
+  width: 150rpx;
+  text-align: center;
+  margin: 20rpx 0;
+}
+
+.app-img {
+  height: 80rpx;
+  width: 80rpx;
+  margin: 0 auto;
+}
+
+.app-img image {
+  width: 100%;
+  height: 100%;
+}
+
+.app-title {
+  font-size: 28rpx;
+  height: 60rpx;
+  line-height: 60rpx;
+}
+
+/* end */
+
+ /* 学生秀.老师秀 */
+  .show-view{
     width: 700rpx;
     margin: 40rpx 25rpx;
   }
-  .app-list{
+  .title-view{
     display: flex;
-    flex-wrap: wrap;
-  }
-  .app-box{
-    flex: 0 0 25%;
-    width: 150rpx;
-    text-align: center;
-    margin: 20rpx 0;
   }
-  .app-img{
-    height: 80rpx;
-    width: 80rpx;
-    margin: 0 auto;
-  }
-  .app-img image{
-    width: 100%;
-    height: 100%;
+  .more{
+    margin-left: auto;
+    color: #999;
   }
-  .app-title{
-    font-size: 28rpx;
-    height: 60rpx;
-    line-height: 60rpx;
+  .reset-btn{
+    width: 120rpx;
+    padding: 10rpx;
+    height: 40rpx;
+    line-height: 40rpx;
+    color: #999;
+    text-align: center;
+    margin: 20rpx auto;
+    border: 1px solid #999;
+    border-radius: 40rpx;
   }
-/* end */
+ /* end */

pages/piano/piano.js

@@ -0,0 +1,140 @@
+// pages/piano/piano.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    animationBox: {},
+    animationBg: {},
+    list:[
+      {},
+      {},
+      {},
+      {},
+      {},
+      {},
+    ],
+    loading:'上拉加载',
+    flag:0,
+    beginDate: '2021-01-01',
+    endDate: '2021-02-02',
+    yFlag: false,
+  },
+
+  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()
+    })
+
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  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/piano/piano.json

@@ -0,0 +1,4 @@
+{
+  "usingComponents": {},
+  "navigationBarTitleText": "预约练琴"
+}

pages/piano/piano.wxml

@@ -0,0 +1,40 @@
+<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 mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
+          <view class="picker">
+            {{beginDate}}
+          </view>
+        </picker>
+        <view> 至 </view>
+        <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
+          <view class="picker">
+            {{endDate}}
+          </view>
+        </picker>
+      </view>
+    </view>
+    </view>
+    <view class="search-btn">确定</view>
+  </view>
+  <!-- <view class="select-box-bg" bindtap="showSelect" animation="{{animationBg}}"></view> -->
+  <view class="height-view"></view>
+  <view class="piano-list">
+    <view class="piano-box" wx:for="{{list}}" wx:key="index">
+      <view class="piano-detail">
+        <view class="piano-title">钢琴编号1</view>
+        <view class="addr">智慧汉阳校区</view>
+        <view class="piano-time">2021-02-20 14:00 ~ 14:45</view>
+      </view>
+      <view class="piano-date">
+        2021-02-02 10:18
+      </view>
+    </view>
+  </view>
+  <view class="getPiano">去预约</view>
+  <view class="loading">{{loading}}</view>
+</view>

pages/piano/piano.wxss

@@ -0,0 +1,124 @@
+.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{
+  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;
+}
+.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;
+}