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

app.json

@@ -1,6 +1,7 @@
 {
   "plugins": {},
   "pages": [
+    "pages/task/task",
     "pages/index/index",
     "pages/schedule/schedule",
     "pages/piano/piano",

pages/task/piano.wxss

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

pages/task/task.js

@@ -0,0 +1,83 @@
+// pages/task/task.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    switchTitle:['待提交','已提交'],
+    curIndex: 0,
+    doName:"做作业"
+  },
+
+  getSwitch:function(e){
+    if(e.currentTarget.dataset.index == 0){
+      this.setData({
+        doName:"做作业"
+      })
+    } else {
+      this.setData({
+        doName:"查看详情"
+      })
+    }
+    this.setData({
+      curIndex: e.currentTarget.dataset.index
+    })
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})

pages/task/task.json

@@ -0,0 +1,6 @@
+{
+  "navigationBarTitleText": "提交作业",
+  "usingComponents": {
+    "selectDate":"/pages/Components/selectDate/selectDate"
+  }
+}

pages/task/task.wxml

@@ -0,0 +1,28 @@
+<view class="container">
+
+  <!-- 时间筛选 -->
+  <selectDate></selectDate>
+  <!-- end -->
+  
+  <!-- 顶部切换标题 -->
+  <view class="switch-view">
+    <view class="switch-title {{curIndex == index ? 'curTitle' : ''}}" wx:for="{{switchTitle}}" data-index="{{index}}" wx:key="index" bindtap="getSwitch">{{item}}</view>
+  </view>
+  <!-- end -->
+
+  <!-- 作业列表 -->
+  <view class="task-view">
+    <view class="task-list">
+      <view class="task-box" wx:for="{{3}}" wx:key="index">
+        <view class="task-title">2021-02-21 课后作业</view>
+        <view class="do-time" wx:if="{{curIndex == 1}}">2021-02-22</view>
+        <view class="task-class">小鹏钢琴课</view>
+        <view class="task-time">09:00 ~ 11:00</view>
+        <view class="task-desc">测试数据测试数据测试数据测试数据测试数据</view>
+        <view class="do-task">{{doName}}</view>
+      </view>
+    </view>
+  </view>
+  <!-- end -->
+
+</view>

pages/task/task.wxss

@@ -0,0 +1,61 @@
+.container{
+  padding: 0;
+  margin: 0;
+}
+
+page{
+  background: #f1f1f1;
+}
+
+/* 顶部切换标题 */
+.switch-view{
+  display: flex;
+  background: #FFF;
+}
+.switch-view view{
+  margin: 0 auto;
+  color: #999;
+  height: 80rpx;
+  line-height: 80rpx;
+  font-size: 36rpx;
+}
+
+.curTitle{
+  color: #cc6031 !important;
+  border-bottom: 2px solid #cc6031;
+  font-weight: 600;
+}
+/* end */
+
+/* 作业列表 */
+  .task-box{
+    padding: 25rpx;
+    display: flex;
+    flex-wrap: wrap;
+    border-bottom: 20rpx solid #f1f1f1;
+    background: #FFF;
+  }
+  .task-box view{
+    height: 60rpx;
+    line-height: 60rpx;
+    width: 700rpx;
+  }
+  .task-title,.task-desc{
+    width: 550rpx !important;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  .task-desc{
+    color: #999;
+  }
+  .do-task,.do-time{
+    width: 150rpx !important;
+    font-size: 24rpx;
+    text-align: right;
+  }
+  .do-task{
+    color: #cc6031;
+  }
+
+/* end */