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

pages/piano/piano.js

@@ -8,26 +8,55 @@ Page({
    * 页面的初始数据
    */
   data: {
+    nickName: '***',
+    height: 400,
+    firstLoad: wx.getStorageSync('firstLoad'),
+    listHeight: 0,
+    btnTop: 0,
+    toTop: 0,
+    animationBtn: {},
+    animationChange: {},
+    childTitle: '预约练琴',
     beginDate: null,
     endDate: null,
-    list: [
-    ],
+    list: [],
     loading: '加载中...',
     flag: 0,
     pageNum: 0,
     hasNextPage: true,
     type: '',
     ruleShow: false,
+    bgShow: false,
+    curStuId: '',
+    orgIndex: 0,
+    beginDate: '2020-01-01',
+    endDate: '2021-02-02',
+    initDate: '2020-01-01',
+    lastDate: '',
+    yFlag: false,
+    animationBox: {},
+    animationBg: {},
+    typeArr: ['全部', '已预约', '排队中'],
+    typeIndex: 0,
+    str: {},
+    selectHeight: 1000,
   },
 
-  ruleShow:function(){
-    if(this.data.ruleShow){
+  getCurStu: function (e) {
+    let curStuId = e.currentTarget.dataset.id
+    this.setData({
+      curStuId
+    })
+  },
+
+  ruleShow: function () {
+    if (this.data.ruleShow) {
       this.setData({
-        ruleShow: false
+        ruleShow: false,
       })
-    }else{
+    } else {
       this.setData({
-        ruleShow:true
+        ruleShow: true,
       })
     }
   },
@@ -38,31 +67,104 @@ Page({
     })
   },
 
+  autoLogin: function () {
+    var openId = wx.getStorageSync('openId')
+    util.doPost(
+      'autoLogin', {
+        openId,
+      }
+    ).then(rs => {
+      if (rs.success > 0) {
+        wx.setStorageSync('sso-token', rs.data.token);
+        this.loadIndexData()
+        // this.queryList();
+      } else {
+        wx.showToast({
+          title: rs.errMsg,
+          icon: 'none',
+          duration: 3000
+        })
+      }
+    })
+  },
+
   /**
    * 生命周期函数--监听页面加载
    */
   onLoad: function (options) {
+    var query = wx.createSelectorQuery();
+    query.select('#change-view').boundingClientRect()
+    query.exec(res => {
+      this.setData({
+        selectHeight: res[0].height,
+      })
+    })
+
+
+    // 显示近7天的预约记录
+    let now = new Date();
+    let bd = util.formatTime(now).substring(0, 10).replace(/\//g, '-')
+    let edd = new Date(now.setDate(now.getDate() + 7));
+    let ed = util.formatTime(edd).substring(0, 10).replace(/\//g, '-')
+    this.setData({
+      beginDate: bd,
+      endDate: ed,
+      list: []
+    });
+    // end
+    this.initDate()
+
+  },
 
+  initDate: function () {
+    var date = new Date()
+    const year = date.getFullYear()
+    const month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
+    const day = date.getDate() + 1 < 10 ? '0' + date.getDate() : date.getDate()
 
+    let now = new Date();
+    let edd = new Date(now.setDate(now.getDate() + 7));
+    let ed = util.formatTime(edd).substring(0, 10).replace(/\//g, '-')
+    this.setData({
+      endDate: year + '-' + month + '-' + day,
+      lastDate: year + '-' + month + '-' + day,
+      initChangeDate: ed
+    })
+
+    const token = wx.getStorageSync('sso-token')
+    if (!token) {
+      this.autoLogin()
+    } else {
+      this.loadIndexData()
+    }
+
+    if (this.data.firstLoad) {
+      this.showChange()
+      this.setData({
+        bgShow: true
+      })
+    }
   },
 
   /**
    * 生命周期函数--监听页面初次渲染完成
    */
-  onReady: function () {
-  },
+  onReady: function () {},
 
   /**
    * 生命周期函数--监听页面显示
    */
   onShow: function () {
-    let now = new Date();
-    // 显示近7天的预约记录
-    let bd = util.formatTime(now).substring(0, 10).replace(/\//g, '-')
-    let edd = new Date(now.setDate(now.getDate() + 7));
-    let ed = util.formatTime(edd).substring(0, 10).replace(/\//g, '-')
-    this.setData({ beginDate: bd, endDate: ed, list: [] });
-    this.queryList();
+    this.setData({
+      firstLoad: wx.getStorageSync('firstLoad')
+    })
+
+    if (!this.data.firstLoad) {
+      this.setData({
+        list: []
+      })
+      this.queryList()
+    }
   },
 
   /**
@@ -76,7 +178,7 @@ Page({
    * 生命周期函数--监听页面卸载
    */
   onUnload: function () {
-
+    wx.setStorageSync('firstLoad', true)
   },
 
   /**
@@ -86,13 +188,111 @@ Page({
 
   },
 
+  // onPageScroll:function(e){
+  //   const that = this
+  //   that.hideBtn()
+  //   that.setData({
+  //     scrollTop:e.scrollTop,
+  //     scrollIng:true
+  //   })
+  //  let timer= setTimeout(()=>{
+  //     if(that.data.scrollTop===e.scrollTop){
+  //       that.setData({
+  //         scrollTop:e.scrollTop,
+  //         scrollIng:false
+  //       })
+  //       console.log('滚动结束')
+  //       that.showBtn()
+  //       clearTimeout(timer)
+  //     }
+  //   },1000)
+  // },
+
+
+  getChange: function () {
+    if (!this.data.bgShow) {
+      this.setData({
+        yFlag: true
+      })
+      this.showSelect()
+      this.showChange()
+    } else {
+      this.hideChange()
+    }
+    this.setData({
+      bgShow: !this.data.bgShow
+    })
+  },
+
+  showChange: function () {
+    var animationChange = wx.createAnimation({
+      timingFunction: 'linear',
+      duration: 600
+    })
+    this.animationChange = animationChange
+    let right = this.data.height
+    animationChange.translateY(right).step()
+    this.setData({
+      animationChange: animationChange.export(),
+    })
+  },
+
+  hideChange: function () {
+    var animationChange = wx.createAnimation({
+      timingFunction: 'linear',
+      duration: 800
+    })
+    this.animationChange = animationChange
+    let right = -this.data.height
+    animationChange.translateY(right).step()
+    this.setData({
+      animationChange: animationChange.export(),
+    })
+  },
+
+  changeStuBtn: function () {
+    this.setData({
+      bgShow: false
+    })
+    this.hideChange()
+  },
+
+  hideBtn: function () { //淡化切换学生按钮
+    var animationBtn = wx.createAnimation({
+      timingFunction: 'linear',
+      duration: 10000
+    })
+    this.animationBtn = animationBtn
+    let opacity = 0.3
+    animationBtn.opacity(opacity).step()
+    this.setData({
+      animationBtn: animationBtn.export()
+    })
+  },
+
+  showBtn: function () { //正常显示学生切换按钮
+    var animationBtn = wx.createAnimation({
+      timingFunction: 'linear',
+      duration: 800
+    })
+    this.animationBtn = animationBtn
+    let opacity = 1
+    animationBtn.opacity(opacity).step()
+    this.setData({
+      animationBtn: animationBtn.export()
+    })
+  },
+
   /**
    * 页面上拉触底事件的处理函数
    */
   onReachBottom: function () {
     if (this.data.hasNextPage) {
       let pn = this.data.pageNum
-      this.setData({ loading: '加载中', 'pageNum': ++pn })
+      this.setData({
+        loading: '加载中',
+        'pageNum': ++pn
+      })
       this.queryList()
     }
   },
@@ -104,13 +304,12 @@ Page({
 
   },
   getDates: function (e) {
-   
     this.setData({
       list: [],
       pageNum: 0,
-      beginDate: e.detail.dateArr[0],
-      endDate: e.detail.dateArr[1],
-      type: e.detail.typeIndex == 0 ? '' : e.detail.typeIndex,
+      beginDate: e[0],
+      endDate: e[1],
+      type: this.data.typeIndex == 0 ? '' : this.data.typeIndex,
       loading: '加载中'
     })
     this.queryList()
@@ -119,7 +318,12 @@ Page({
     const urls = urlDef.urls;
     let stu = wx.getStorageSync('student');
     if (stu) {
-      let params = { 'q.beginDate': this.data.beginDate, 'q.endDate': this.data.endDate, 'q.studentId': stu.studentId,'q.type': this.data.type }
+      let params = {
+        'q.beginDate': this.data.beginDate,
+        'q.endDate': this.data.endDate,
+        'q.studentId': stu.studentId,
+        'q.type': this.data.type
+      }
       params.pageNum = this.data.pageNum
       util.apiPost(urls.query_appointment_list, params).then(rs => {
         let list = rs.list
@@ -132,26 +336,162 @@ Page({
           'loading': rs.hasNextPage ? '上拉加载' : '没有更多数据',
           'list': this.data.list.concat(list)
         })
-        this.getCount()
+        if (this.data.firstLoad) {
+          this.getCount()
+        }
       })
     }
   },
 
-  getCount:function(){
+  getCount: function () {
     const urls = urlDef.urls;
     let stu = wx.getStorageSync('student');
-    util.apiPost(urls.query_appointment_count, {'q.studentId': stu.studentId}).then(rs => {
-     if(rs[0] <= 0){
-       this.setData({
-        ruleShow:true
-       })
-     }
+    util.apiPost(urls.query_appointment_count, {
+      'q.studentId': stu.studentId
+    }).then(rs => {
+      if (rs[0] <= 0) {
+        this.setData({
+          ruleShow: true
+        })
+      }
+    })
+  },
+
+  loadIndexData: function () {
+    this.setData({
+      'stuShowList': [],
+      'teaShowList': [],
     })
+    const urls = urlDef.urls;
+    //获取登录用户数据, 并加载首页数据
+    util.apiPost(urls.get_cur_user, {}).then(rs => {
+      // console.log(JSON.stringify(rs));
+      let userItems = rs.attr.others
+      let orgItems = []
+      let student = {}
+      userItems.forEach(u => {
+        let exists = false;
+        orgItems.some(o => {
+          if (o.orgId === u.orgId) {
+            exists = true;
+            return true;
+          }
+        })
+        if (!exists) {
+          orgItems.push({
+            orgId: u.orgId,
+            orgName: u.orgName
+          })
+        }
+        if (u.studentId === rs.attr.personId) { // 当前用户
+          const headImg = u.imageUrl ? urls.oss_file + 'image/' + u.imageUrl : '/images/head.png';
+          student = {
+            studentId: u.studentId,
+            orgId: u.orgId,
+            orgName: u.orgName,
+            name: u.studentName,
+            sex: u.sex,
+            headImg: headImg
+          }
+          this.setData({
+            'curStu': student,
+          })
+          // 放入 strong中
+          wx.setStorageSync('student', student);
+        }
+      })
+
+      for (var i in userItems) {
+        userItems[i].headName = userItems[i].studentName.substring(userItems[i].studentName.length - 1, userItems[i].studentName.length)
+        userItems[i].nickName = userItems[i].studentName.substring(0, 1) + "*" + userItems[i].studentName.substring(userItems[i].studentName.length - 1, userItems[i].studentName.length)
+      }
+
+      for (var j in orgItems) {
+        if (this.data.curStu.orgId == orgItems[j].orgId) {
+          const tempName = this.data.curStu.name.substring(0, 1) + "*" + this.data.curStu.name.substring( this.data.curStu.name.length - 1,  this.data.curStu.name.length)
+          this.setData({
+            orgIndex: j,
+            curStuId: this.data.curStu.studentId,
+            nickName:  tempName
+          })
+          break
+        }
+      }
+      this.setData({
+        'userItems': userItems,
+        'orgItems': orgItems
+      })
+      this.queryList()
+    });
   },
 
+  //切换校区
+  bindPickerChangeSchool: function (e) {
+    let i = e.detail.value;
+    if (i == this.data.orgIndex) {
+      console.log('无须切换...');
+      return;
+    }
+
+    // 取该校区 第1位学生 作为默认登录用户
+    let targetId = this.data.orgItems[i].orgId;
+    this.data.userItems.some(u => {
+      if (u.orgId === targetId) {
+        this.doChangeUser(u.studentId);
+        this.setData({
+          orgIndex: i,
+          sid: u.studentId,
+          list: [],
+          loading: '加载中...',
+          firstLoad: true
+        });
+        return true;
+      }
+    });
+  },
+
+  //切换身份
+  changeStu: function (e) {
+    let sid = e.currentTarget.dataset.id;
+    this.doChangeUser(sid);
+  },
+  doChangeUser: function (sid) {
+    if (this.data.curStu.studentId == sid) {
+      console.log('无须切换')
+      return;
+    }
+    wx.showLoading({
+      title: '正在切换用户',
+      mask: true
+    })
+    const urls = urlDef.urls;
+    util.apiPost(urls.change_user, {
+      targetId: sid
+    }).then(rs => {
+      wx.hideLoading();
+      if (rs === 1) {
+        console.log('切换成功');
+        this.setData({
+          curStuId: sid,
+          list: [],
+          loading: '加载中...',
+          firstLoad: true
+        })
+        this.loadIndexData();
+      } else {
+        wx.showToast({
+          title: '切换失败，请稍后重试',
+          icon: 'none'
+        })
+      }
+    });
+  },
+
+
+
   canCancel(item) { // 判断是否能取消, 未到预约时间前都能取消，至少提前1个小时
     let t = item.visitDate + ' ' + item.beginTime + ':00';
-    let vdt = new Date(t.replace(/-/g,'/'));
+    let vdt = new Date(t.replace(/-/g, '/'));
     let tdt = new Date().getTime();
     if (vdt < tdt) {
       return false;
@@ -160,7 +500,7 @@ Page({
     const dayTime = 3600000;
     return item.attend == 0 && (vdt - tdt) >= dayTime
   },
-  doCancelQueue: function(e) {
+  doCancelQueue: function (e) {
     let id = e.currentTarget.dataset.id
     let that = this
     wx.showModal({
@@ -170,19 +510,26 @@ Page({
       cancelText: "否",
       confirmText: "是",
       success: function (res) {
-        if (res.cancel) {
-        } else {
+        if (res.cancel) {} else {
           wx.showLoading({
             title: '正在取消',
             mask: true
           })
           const urls = urlDef.urls;
-          util.apiPost(urls.delete_queue, {'ids[]': [id]}).then(rs => {
+          util.apiPost(urls.delete_queue, {
+            'ids[]': [id]
+          }).then(rs => {
             if (rs.message) {
-              wx.showToast({ title: rs.message, icon: 'none' })
+              wx.showToast({
+                title: rs.message,
+                icon: 'none'
+              })
               return
             }
-            wx.showToast({ title: '取消成功', icon: 'success' })
+            wx.showToast({
+              title: '取消成功',
+              icon: 'success'
+            })
             that.setData({
               list: [],
               pageNum: 0,
@@ -204,8 +551,7 @@ Page({
       cancelText: "否",
       confirmText: "是",
       success: function (res) {
-        if (res.cancel) {
-        } else {
+        if (res.cancel) {} else {
           wx.showLoading({
             title: '正在取消',
             mask: true
@@ -219,10 +565,16 @@ Page({
     const urls = urlDef.urls;
     util.apiPost(urls.cancel_appointment + '?id=' + id).then(rs => {
       if (rs.message) {
-        wx.showToast({ title: rs.message, icon: 'none' })
+        wx.showToast({
+          title: rs.message,
+          icon: 'none'
+        })
         return
       }
-      wx.showToast({ title: '取消成功', icon: 'success' })
+      wx.showToast({
+        title: '取消成功',
+        icon: 'success'
+      })
       this.setData({
         list: [],
         pageNum: 0,
@@ -230,5 +582,105 @@ Page({
       })
       this.queryList()
     })
-  }
-})
+  },
+
+  bindBeginDateChange: function (e) {
+    if (e.detail.value > this.data.endDate) {
+      this.setData({
+        beginDate: this.data.endDate
+      })
+    } else {
+      this.setData({
+        beginDate: e.detail.value
+      })
+    }
+  },
+
+  bindEndDateChange: function (e) {
+    if (e.detail.value > this.data.initChangeDate) {
+      this.setData({
+        endDate: this.data.initChangeDate
+      })
+    } else {
+      this.setData({
+        endDate: e.detail.value
+      })
+    }
+  },
+
+  resetDate: function () {
+    this.setData({
+      beginDate: this.data.initDate,
+      endDate: this.data.initChangeDate,
+      typeIndex: 0
+    })
+    const date = new Date()
+    const dateArr = [date.getFullYear() + "-01" + "-01", this.data.initChangeDate];
+    const typeIndex = this.data.typeIndex
+    this.getDates(dateArr)
+    // this.triggerEvent("getDates", {dateArr,typeIndex});
+    this.showSelect()
+  },
+
+  submitDate: function () {
+    const dateArr = [this.data.beginDate, this.data.endDate];
+    // const typeIndex = this.data.typeIndex
+    // this.triggerEvent("getDates", {dateArr,typeIndex});
+    this.getDates(dateArr)
+    this.showSelect()
+  },
+
+  showSelect: function () {
+    var animation = wx.createAnimation({
+      timingFunction: 'linear',
+      duration: 600
+    })
+    this.animation = animation
+    var num = 0
+    var opacity = 0
+    if (this.data.yFlag == false) {
+      num = Math.abs(this.data.toTop) / 2 + this.data.selectHeight - 20
+      opacity = 0.4
+      this.setData({
+        yFlag: true,
+        bgShow: false
+      })
+      this.hideChange()
+    } else {
+      num = this.data.toTop
+      opacity = 0
+      this.setData({
+        yFlag: false,
+
+      })
+    }
+    animation.translateY(num).step()
+    this.setData({
+      animationBox: animation.export()
+    })
+
+    var animation2 = wx.createAnimation({
+      timingFunction: 'linear',
+      duration: 200
+    })
+    this.animation2 = animation2
+
+    animation2.opacity(opacity).step()
+    this.setData({
+      animationBg: animation2.export()
+    })
+
+  },
+
+  bindPickerChange: function (e) {
+    const typeIndex = e.detail.value
+    this.setData({
+      typeIndex
+    })
+    // this.triggerEvent("changeType",str)
+  },
+})
+
+// 历史课程
+
+// end

pages/piano/piano.wxml

@@ -1,9 +1,44 @@
-<view class="container">
-
+<my-logo id="myLogo"  footerNumber='150'>
+  <navTop id="navTop" title="{{childTitle}}"  btnShow="{{false}}"></navTop>
   <!-- 时间筛选 -->
-  <view>
-    <selectDate bind:getDates="getDates" title="{{'历史课程'}}" beginDate="{{beginDate}}" endDate="{{endDate}}"
-      typeFlag="{{true}}" toTop="{{-440}}" bind:changeType="changeType"> </selectDate>
+   <!-- <selectDate id="selectDate" bind:getDates="getDates" title="{{'历史课程'}}" beginDate="{{beginDate}}"
+      endDate="{{endDate}}" typeFlag="{{true}}" toTop="{{-440}}" bind:changeType="changeType"> </selectDate> -->
+  <view class="top-view">
+    <view class="top-name" bindtap="getChange"><image src="/images/qiehuan.png" class="toDownImg"></image>{{nickName}}</view>
+    <view class="top-school" bindtap="getChange">{{orgItems[orgIndex].orgName}}</view>
+    <view class="top-date" bindtap="showSelect">历史课程<image src="/images/toDown2.png" class="toDownImg"></image></view>
+  </view>
+  <!-- end -->
+
+  <!-- 用户切换 -->
+  <!-- <view class="change-btn" >切换学员</view> -->
+  <view class="change-bg" bindtap="getChange" wx:if="{{bgShow}}"></view>
+  <view class="change-view" id="change-view" animation="{{animationChange}}" style="margin-top:-{{height}}px">
+    <view class="change-box">
+      <view class="section">
+        <picker class="picker-box" bindchange="bindPickerChangeSchool" value="{{orgIndex}}" range="{{orgItems}}" range-key="orgName">
+          <view class="picker school-picker">
+            {{orgItems[orgIndex].orgName}}
+            <view class="toDown">
+              <image src="/images/toDown2.png"></image>
+            </view>
+          </view>
+        </picker>
+      </view>
+      <view class="change-stu">
+        <view class="stu-box" wx:for="{{userItems}}" wx:key="index" data-id="{{item.studentId}}" bindtap="changeStu" wx:if="{{curStu.orgId == item.orgId}}">
+          <view bindtap="getCurStu"  data-id="{{item.studentId}}" data-index="{{index}}" class="stu-head {{item.studentId == curStuId ? 'curStu' : ''}}">{{item.headName}}</view>
+          <view class="stu-name">
+            {{item.nickName}}
+          </view>
+        </view>
+      </view>
+
+     <view class="change-btn-view">
+      <view bindtap="changeStuBtn" class="changeStuBtn">确定</view>
+      <!-- <view bindtap="getChange" class="changeStuBtn removeStuBtn">取消</view> -->
+     </view>
+    </view>
   </view>
   <!-- end -->
 
@@ -30,11 +65,11 @@
       </view>
     </view>
   </view>
-  <view class="getPiano" bindtap="getPiano">去预约</view>
+  <view class="getPiano" id='getPiano' bindtap="getPiano">去预约</view>
   <view class="loading">{{loading}}</view>
 
   <view class="rule-view" bindtap="ruleShow">规则</view>
-  <view class="rule-bg"  bindtap="ruleShow" wx:if="{{ruleShow}}"></view>
+  <view class="rule-bg" bindtap="ruleShow" wx:if="{{ruleShow}}"></view>
   <view class="rule-box" wx:if="{{ruleShow}}">
     <view class="rule-title">练琴规则</view>
     <view>
@@ -47,7 +82,8 @@
       3. 必须消课后，该次数自动释放，（例如：某学生，约5号. 6号各一次，当5号练完后，立刻释放一次约课机会，学生又可以约下一次）
     </view>
     <view>
-      4. 惩罚机制：如旷课，未出席，所约课程结束时间起计算，惩罚72小时内无法约课，该惩罚时间可由学校自行设置。（例如：例如：某学生，约5号17:00-17:30. 6号各一次，5号缺席，6号已约课程可正常出席，但无法再约课，且惩罚发的时间段为：5号的17:30起的72小时后）<br />
+      4. 惩罚机制：如旷课，未出席，所约课程结束时间起计算，惩罚72小时内无法约课，该惩罚时间可由学校自行设置。（例如：例如：某学生，约5号17:00-17:30.
+      6号各一次，5号缺席，6号已约课程可正常出席，但无法再约课，且惩罚发的时间段为：5号的17:30起的72小时后）<br />
     </view>
     <view>
       5. 消息提醒推送：提前90分钟，主动推送给家长已约好的时间段提醒，给2个选择框：准时出席，请假
@@ -69,5 +105,50 @@
     </view>
     <view class="close-rule" bindtap="ruleShow" wx:if="{{ruleShow}}">X</view>
   </view>
-  
-</view>
+
+  <!-- 历史课程 -->
+  <view class="select-box" animation="{{animationBox}}" style="top:-300rpx">
+  <view class="change-time">
+    <view class="select-title">选择时间段:</view>
+    <view class="select-date-view">
+      <view class="section">
+        <picker mode="date" value="{{beginDate}}" start="2000-01-01" end="{{initChangeDate}}"
+          bindchange="bindBeginDateChange">
+          <view class="picker">
+            {{beginDate}}
+          </view>
+        </picker>
+        <view> 至 </view>
+        <picker mode="date" value="{{endDate}}" start="{{beginDate}}" end="{{initChangeDate}}"
+          bindchange="bindEndDateChange">
+          <view class="picker">
+            {{endDate}}
+          </view>
+        </picker>
+      </view>
+    </view>
+  </view>
+
+  <view class="type-view" wx:if="{{typeFlag}}">
+    <view class="select-title">预约状态:</view>
+    <view class="change-type">
+      <picker bindchange="bindPickerChange" value="{{typeIndex}}" range="{{typeArr}}">
+        <view class="picker change-view">
+          {{typeArr[typeIndex]}}
+          <view class="toDown">
+            <image src="/images/toDown.png"></image>
+          </view>
+        </view>
+      </picker>
+    </view>
+  </view>
+
+  <view class="search-btn-view">
+    <view class="search-btn" bindtap="submitDate">确定</view>
+    <view class="reset-btn" bindtap="resetDate">重置</view>
+  </view>
+</view>
+<view class="select-box-bg" bindtap="showSelect" animation="{{animationBg}}" wx:if="{{yFlag}}"></view>
+  <!-- end -->
+	<tabbar curIndex="1" curHtml="预约练琴"></tabbar>
+</my-logo>

pages/piano/piano.wxss

@@ -1,5 +1,5 @@
 .piano-list {
-  width: 750;
+  width: 750rpx;
 }
 page{
   background: #f1f1f1;
@@ -90,6 +90,12 @@ page{
   line-height: 60rpx;
   border-radius: 5rpx;
 }
+.school-picker{
+  border: none;
+  background: #005033;
+  color: #FFF;
+  border-radius: 100rpx;
+}
 .select-title{
   height: 140rpx;
   line-height: 140rpx;
@@ -138,11 +144,10 @@ page{
   text-align: center;
   padding: 15rpx;
   position: fixed;
-  bottom: 20rpx;
   width: 300rpx;
-  left: 50%;
-  margin-left: -150rpx;
+  margin-left: 210rpx;
   border-radius: 100rpx;
+  bottom: 20rpx;
 }
 
 .class-btn{
@@ -185,7 +190,7 @@ page{
     font-size: 24rpx;
     text-indent: 24rpx;
 }
-.rule-bg{
+.rule-bg,.change-bg{
   position: fixed;
   top: 0;
   width: 100%;
@@ -194,18 +199,22 @@ page{
   opacity: 0.3;
   z-index: 4;
 }
+.rule-bg{
+  z-index: 99;
+}
 .rule-box{
   position: fixed;
-  top: 5%;
+  top: 50%;
+  margin-top: -465rpx;
   width: 650rpx;
-  max-height: 85%;
+  height: auto;
   left: 25rpx;
   background: #FFF;
   z-index: 100;
   overflow: auto;
   line-height: 1.8;
   color: #666;
-  font-size: 24rpx;
+  font-size: 20rpx;
   border: 25rpx solid #FFF;
   border-radius: 20rpx;
 }
@@ -213,7 +222,7 @@ page{
 .rule-title{
   font-size: 36rpx;
   text-align: center;
-  margin: 20rpx;
+  margin: 40rpx 20rpx 20rpx 20rpx;
   color: #333;
 }
 .close-rule{
@@ -223,9 +232,269 @@ page{
     color: #333;
     text-align: center;
     border-radius: 60rpx;
-    top: 8%;
+    top: 50%;
     z-index: 5;
+    margin-top: -425rpx;
     right: 70rpx;
     border: 1rpx solid #333;
     background: #FFF;
-}
+}
+.close-change{
+  position: absolute;
+  width: 60rpx;
+  line-height: 60rpx;
+  color: #333;
+  text-align: center;
+  border-radius: 60rpx;
+  z-index: 5;
+  right: 25rpx;
+  border: 1rpx solid #333;
+  background: #FFF;
+}
+
+.change-btn{
+    position: fixed;
+    background: #005033;
+    color: #FFF;
+    font-size: 30rpx;
+    width: 60rpx;
+    padding: 20rpx 20rpx 20rpx 40rpx;
+    bottom: 200rpx;
+    right: 0;
+    border-radius: 60rpx 0 0 60rpx;
+    z-index: 98;
+}
+
+.change-view{
+  position: absolute;
+    background: #f8f8f8;
+    width: 700rpx;
+    padding: 26rpx;
+    z-index: 5;
+    height: 500rpx;
+}
+.changeStuBtn{
+  width: 300rpx;
+    margin: 80rpx auto 0;
+    text-align: center;
+    background: #005033;
+    color: #FFF;
+    line-height: 80rpx;
+    font-size: 32rpx;
+    border-radius: 100rpx;
+}
+.toDown{
+  width: 32rpx;
+  height: 32rpx;
+  margin: 8rpx 0 0 20rpx;
+}
+.toDown image{
+  width: 100%;
+  height: 100%;
+}
+.section .picker{
+  display: flex;
+}
+.stu-head{
+  font-size: 48rpx;
+  height: 99rpx;
+  width: 99rpx;
+  line-height: 99rpx;
+  border-radius: 100rpx;
+  border: 1rpx solid #ccc;
+  text-align: center;
+  margin: 40rpx 0 20rpx;
+}
+.stu-name{
+  width: 100rpx;
+  text-align: center;
+  line-height: 50rpx;
+}
+.stu-box,.picker-box{
+  /* margin-right: 40rpx; */
+  margin: 0 auto;
+}
+.change-box{
+  width: 700rpx;
+}
+
+.change-stu{
+  display: flex;
+  width: 500rpx;
+  margin: 0 auto;
+  overflow-x: auto;
+}
+.curStu{
+  background: #005033;
+  color: #FFF;
+  border-color: #005033;
+}
+
+.top-view{
+  display: flex;
+  width: 700rpx;
+  padding: 0 26rpx;
+  line-height: 60rpx;
+  background: #005033;
+  color: #FFF;
+  font-size: 32rpx;
+  text-align: center;
+  position: relative;
+  z-index: 6;
+}
+.top-school{
+  width: 300rpx;
+}
+.top-name,.top-date{
+  width: 200rpx;
+  position: relative;
+}
+.toDownImg{
+  width: 32rpx;
+    height: 32rpx;
+    position: absolute;
+    top: 17rpx;
+    margin-left: 20rpx;
+}
+.top-name image{
+  position: absolute;
+  left: 0;
+  margin-left: 0;
+}
+.top-name{
+  text-align: left;
+  text-indent: 50rpx;
+}
+.change-btn-view{
+  display: flex;
+  width: 100%;
+}
+.removeStuBtn{
+  background: #999;
+}
+
+/* 历史课程 */
+.select-view {
+  height: 60rpx;
+  line-height: 60rpx;
+  background: #005033;
+  color: #FFF;
+  text-align: center;
+  font-size: 32rpx;
+  position: fixed;
+  width: 750rpx;
+  z-index: 3;
+}
+
+.height-view {
+  height: 60rpx;
+}
+
+.select-box {
+  position: fixed;
+  background: #FFF;
+  /* top: -300rpx; */
+  width: 750rpx;
+  min-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;
+}
+
+.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: #005033;
+  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;
+}
+.type-view{
+  display: flex;
+}
+.change-type{
+  display: flex;
+  line-height: 140rpx;
+  margin-left: 20rpx;
+}
+/* .change-type view{
+    height: 70rpx;
+    margin-top: 35rpx;
+    line-height: 70rpx;
+    padding: 0 20rpx;
+    margin-left: 20rpx;
+} */
+
+.curType{
+  color: #FFF;
+  background: #005033;
+  border-color: #005033;
+}
+
+.toDown{
+  width: 32rpx;
+  height: 32rpx;
+  margin-left: 30rpx;
+  margin-top: 4rpx;
+}
+.toDown image{
+  width: 100%;
+  height: 100%;
+}
+.change-view{
+  display: flex;
+  border: none;
+  line-height: 140rpx;
+  font-size: 34rpx;
+}
+.toDownImg{
+  width: 32rpx;
+    height: 32rpx;
+    position: absolute;
+    top: 17rpx;
+    margin-left: 20rpx;
+}
+/* end */