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

app.json

@@ -1,8 +1,9 @@
 {
   "plugins": {},
   "pages": [
-    "pages/taskDetail/taskDetail",
+    "pages/doTask/doTask",
     "pages/task/task",
+    "pages/taskDetail/taskDetail",
     "pages/index/index",
     "pages/schedule/schedule",
     "pages/piano/piano",

pages/doTask/doTask.js

@@ -0,0 +1,95 @@
+// pages/doTask/doTask.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    talkFlag:false,
+    closeName: '开始录音'
+  },
+
+  getRecord:function(){
+    console.log(this.data.talkFlag)
+    if(this.data.talkFlag){
+      this.setData({
+        talkFlag: false,
+        closeName: '开始录音'
+      })
+    } else {
+      this.setData({
+        talkFlag: true,
+        closeName: '正在录音，再次点击结束录音'
+      })
+    }
+  },
+
+  uploadTap:function(){
+    wx.chooseImage({
+      count: 6,
+      sourceType: ['album', 'camera'],
+    })
+  },
+
+  upLoadVideo:function(){
+    wx.chooseVideo({
+      camera: ['album', 'camera'],
+    })
+  },  
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})

pages/doTask/doTask.json

@@ -0,0 +1,4 @@
+{
+  "navigationBarTitleText": "提交作业",
+  "usingComponents": {}
+}

pages/doTask/doTask.wxml

@@ -0,0 +1,72 @@
+<view class="container">
+  <!-- 作业内容 -->
+  <view class="task-view">
+    <view class="task-title">2021-02-21 课后作业</view>
+    <view class="task-time">2021-02-21 16:00</view>
+    <view class="task-class">小鹏钢琴课</view>
+  </view>
+  <!-- end -->
+
+  <!-- 作业完成内容 -->
+  <view class="my-task">
+    <view class="title">作业完成情况</view>
+    <view class="textarea">
+      <textarea placeholder="输入答题内容(200字以内)" maxlength="200"></textarea>
+      <view class="wordNum">0/200</view>
+    </view>
+
+    <view class="title">上传图片</view>
+    <view class="uploadImg-task-view">
+      <view class="my-img-view" wx:for="{{1}}" wx:key="index">
+        <view class="new-task-img">
+          <image src="/images/logo.png"></image>
+        </view>
+        <view class="del-btn">X</view>
+      </view>
+      <view class="upload-btn" bindtap="uploadTap">
+        <view style="margin-top:30rpx">
+          <image src="/images/addFile.png"></image>
+          <view>添加图片</view>
+        </view>
+      </view>
+    </view>
+
+    <view class="title">上传视频</view>
+    <view class="uploadImg-task-view">
+      <view class="my-img-view" wx:for="{{1}}" wx:key="index">
+        <view class="new-task-img">
+          <image src="/images/logo.png"></image>
+        </view>
+        <view class="del-btn">X</view>
+      </view>
+      <view class="upload-btn" bindtap="uploadTap">
+        <view style="margin-top:30rpx">
+          <image src="/images/addFile.png"></image>
+          <view>添加视频</view>
+        </view>
+      </view>
+    </view>
+
+    <audio id="audio-play" bindpause="bindpause" bindended="bindended" src="{{curAudio}}"></audio>
+    <view class="title">上传录音</view>
+    <view class="audio-list">
+      <view class="audio-box" wx:for="{{6}}" wx:key="index">
+        <image bindtap="audioShow" src="{{index == curAudioIndex ? '/images/cur-audio.png' : '/images/audio.png'}}"
+        class="{{index == curAudioIndex ? 'curAudioStyle' : ''}}" 
+        data-index="{{index}}" data-url="{{item}}"></image>
+        <view class="del-btn">X</view>
+      </view>
+    </view>
+   
+    <view class="record-view">
+      <view class="record-img {{talkFlag ? 'curTalkStyle' : ''}}" bindtap="getRecord">
+        <image src="{{talkFlag ? '/images/cur-talk.png' : '/images/talk.png'}}"></image>
+      </view>
+      <view class="{{talkFlag ? 'record-bg' : ''}}"></view>
+      <view class="close-talk" bindtap="getRecord">{{closeName}}</view>
+    </view>
+
+  </view>
+  <!-- end -->
+
+</view>

pages/doTask/doTask.wxss

@@ -0,0 +1,199 @@
+.container{
+  padding: 0;
+  margin: 0;
+}
+
+.task-view{
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  width: 700rpx;
+  margin: 0 auto;
+}
+.task-title{
+  font-size: 32rpx;
+  font-weight: 600;
+  width: 450rpx;
+  height: 60rpx;
+  line-height: 60rpx;
+  overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+.task-time{
+  width: 250rpx;
+  height: 60rpx;
+  line-height: 60rpx;
+  font-size: 28rpx;
+  text-align: right;
+}
+.task-class{
+  color: #999;
+  line-height: 60rpx;
+  height: 60rpx;
+}
+
+.my-task{
+  width: 700rpx;
+  margin: 25rpx;
+}
+.my-task .title{
+  height: 60rpx;
+  line-height: 60rpx;
+}
+.textarea textarea{
+  width: 650rpx;
+  padding: 20rpx 25rpx;
+  height: 260rpx;
+  box-shadow: 0 10rpx 10rpx #ccc;
+}
+.wordNum{
+  font-size: 24rpx;
+  color: #999;
+  text-align: right;
+  margin-right: 25rpx;
+  height: 60rpx;
+  line-height: 60rpx;
+}
+
+.uploadImg-task-view{
+  display: grid;
+  justify-content: space-between;
+  grid-template-columns: repeat(auto-fill, 140rpx);
+  grid-gap: auto;
+  width: 650rpx;
+  margin: 0 auto;
+  border-bottom: 1px dashed #ccc;
+    padding-bottom: 40rpx;
+    margin-bottom: 40rpx;
+}
+.new-task-img{
+  width: 139rpx;
+  height: 139rpx;
+  border: 1rpx dashed #ccc;
+}
+.my-img-view{
+  position: relative;
+  margin: 20rpx 0 20rpx;
+}
+.del-btn{
+  position: absolute;
+  width: 40rpx;
+  height: 40rpx;
+  line-height: 40rpx;
+  z-index: 2;
+  background: #cc6031;
+  color: #FFF;
+  text-align: center;
+  font-weight: 600;
+  border-radius: 50rpx;
+  top: -20rpx;
+  left: -20rpx;
+  border: 8rpx solid #FFF;
+}
+.new-task-img image{
+  width: 100%;
+  height: 100%;
+}
+
+.upload-btn image{
+  height: 40rpx;
+  width: 40rpx;
+}
+
+.upload-btn{
+  width: 139rpx;
+    height: 139rpx;
+    border: 1rpx dashed #ccc;
+    text-align: center;
+    background: #f8f8f8;
+    margin: 20rpx 0 0;
+    color: #999;
+    font-size: 22rpx;
+    line-height: 36rpx;
+}
+
+.audio-list {
+  display: grid;
+  justify-content: space-between;
+  grid-template-columns: repeat(auto-fill, 130rpx);
+  grid-gap: auto;
+  height: 180rpx;
+  width: 600rpx;
+  margin: 0 auto 20rpx;
+}
+.audio-box{
+  position: relative;
+}
+.audio-box .del-btn{
+  width: 30rpx ;
+  height: 30rpx ;
+  line-height: 30rpx ;
+  font-size: 24rpx;
+  top: -2rpx ;
+}
+
+.audio-list image {
+  height: 30rpx;
+  width: 50rpx;
+  border: 1px solid #eee;
+  box-shadow: 0 0 20rpx #ccc;
+  padding: 10rpx;
+  margin-top: 20rpx;
+  padding: 0 25rpx;
+  border-radius: 10rpx;
+  margin-bottom: 20rpx;
+}
+
+.record-img{
+  padding: 20rpx;
+    border: 1px solid #CCC;
+    height: 60rpx;
+    width: 60rpx;
+    border-radius: 50rpx;
+    position: relative;
+    left: 50%;
+    margin-left: -50rpx;
+    z-index: 2;
+}
+.record-view{
+  text-align: center;
+  position: relative;
+}
+.record-img image{
+  height: 100%;
+  width: 100%;
+}
+
+.close-talk{
+  height: 80rpx;
+  line-height: 80rpx;
+  margin-bottom: 40rpx;
+}
+
+.record-bg {
+  width: 100rpx;
+  height: 100rpx;
+  border-radius: 50%;
+  left: 50%;
+  position: absolute;
+  margin-left: -50rpx;
+  top: 1rpx;
+  animation: pulse 2s infinite;
+  z-index: 1;
+}
+@keyframes pulse {
+  0% {
+      box-shadow: 0 0 4px 3px #fff;
+  }
+  50% {
+      box-shadow: 0 0 4px 3px #cc6031;
+  }
+  100% {
+      box-shadow: 0 0 4px 3px #fff;
+  }
+}
+
+.curTalkStyle{
+  border-color: #cc6031;
+}

pages/task/task.js

@@ -25,6 +25,12 @@ Page({
     })
   },
 
+  doTask:function(){
+    wx.navigateTo({
+      url: '/pages/taskDetail/taskDetail?type='+this.data.curIndex,
+    })
+  },
+
   /**
    * 生命周期函数--监听页面加载
    */

pages/task/task.wxml

@@ -19,7 +19,7 @@
         <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 class="do-task" bindtap="doTask">{{doName}}</view>
       </view>
     </view>
   </view>

pages/taskDetail/taskDetail.js

@@ -42,6 +42,7 @@ Page({
     curAudio: '',
     curAudioIndex: -1,
     audioPause: 0,
+    doTaskFlag: false
   },
 
   bindfullscreenchange:function(){
@@ -121,6 +122,12 @@ Page({
   onLoad: function (options) {
     this.audioContext = wx.createAudioContext('audio-play')
     this.videoContext = wx.createVideoContext('play-video');// 	创建 video 上下文 VideoContext 对象。
+    const type = options.type
+    if(type == 0){
+      this.setData({
+        doTaskFlag: true
+      })
+    }
   },
 
   /**

pages/taskDetail/taskDetail.wxml

@@ -44,7 +44,35 @@
   </view>
   <!-- end -->
 
-  <view class="toTask" bindtap="toTask">
+  <!-- 作业完成情况 -->
+ <view class="done-view" wx:if="{{!doTaskFlag}}">
+  <view class="done-title">作业完成情况</view>
+  <view class="task-content">
+    <view class="title">图片</view>
+    <view class="img-list">
+      <image src="{{item}}" mode="aspectFill" wx:for="{{imgList}}" wx:key="index" bindtap="showImg" data-url="{{item}}" ></image>
+    </view>
+
+    <view class="title">视频</view>
+    <view class="video-list">
+      <view wx:for="{{videoList}}" wx:key="index" class="video-img-view" data-url="{{item.url}}" bindtap="videoShow">
+        <image class="videoImg" src="{{item.img}}" mode="aspectFill"  ></image>
+        <image class="playImg" src="/images/play.png"></image>
+      </view>
+    </view>
+    <video id="play-video" bindfullscreenchange="bindfullscreenchange" wx:if="{{curVideo != ''}}" autoplay="true" src="{{curVideo}}" controls="true" downloadlist></video>
+
+    <view class="title">语音</view>
+    <view class="audio-list">
+      <image bindtap="audioShow" src="{{index == curAudioIndex ? '/images/cur-audio.png' : '/images/audio.png'}}" class="{{index == curAudioIndex ? 'curAudioStyle' : ''}}" wx:for="{{audioList}}"  wx:key="index" data-index="{{index}}" data-url="{{item}}"></image>
+    </view>
+    <audio id="audio-play" bindpause="bindpause" bindended="bindended" src="{{curAudio}}"></audio>
+
+  </view>
+ </view>
+  <!-- end -->
+
+  <view class="toTask" bindtap="toTask" wx:if="{{doTaskFlag}}">
     做作业
   </view>
 

pages/taskDetail/taskDetail.wxss

@@ -1,77 +1,87 @@
-.container{
+.container {
   padding: 0;
   margin: 0;
   width: 700rpx;
   margin: 0 auto;
 }
 
-.task-head{
+.task-head {
   display: flex;
- 
+
   height: 80rpx;
   line-height: 80rpx;
 }
-.task-title{
+
+.task-title {
   font-size: 36rpx;
   font-weight: 600;
   width: 450rpx;
   overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
-.task-time{
+
+.task-time {
   width: 250rpx;
   text-align: right;
   color: #999;
   font-size: 28rpx;
 }
 
-.task-teacher{
+.task-teacher {
   display: flex;
   height: 60rpx;
   line-height: 60rpx;
   padding: 20rpx 0;
 }
-.taskImg{
+
+.taskImg {
   height: 60rpx;
   width: 60rpx;
   margin-right: 20rpx;
 }
-.taskImg image{
+
+.taskImg image {
   height: 100%;
   width: 100%;
 }
-.contact-teacher{
+
+.contact-teacher {
   margin-left: auto;
   color: #cc6031;
 }
-.task-desc{
+
+.task-desc {
   color: #666;
   margin-top: 20rpx;
   line-height: 50rpx;
   margin-bottom: 20rpx;
 }
 
-.title{
+.title {
   color: #999;
   font-size: 28rpx;
   margin-top: 20rpx;
 }
-.img-list,.video-list,.audio-list{
-    display: grid;
-    justify-content: space-between;
-    grid-template-columns: repeat(auto-fill, 150rpx);
-    grid-gap: auto;
+
+.img-list,
+.video-list,
+.audio-list {
+  display: grid;
+  justify-content: space-between;
+  grid-template-columns: repeat(auto-fill, 150rpx);
+  grid-gap: auto;
 }
 
-.audio-list{
+.audio-list {
   display: grid;
   justify-content: space-between;
   grid-template-columns: repeat(auto-fill, 120rpx);
   grid-gap: auto;
 }
 
-.img-list image,.video-list image{
+.img-list image,
+.video-list image {
   width: 150rpx;
   height: 150rpx;
   border-radius: 20rpx;
@@ -79,13 +89,15 @@
   margin: 10rpx auto;
 }
 
-.video-img-view{
+.video-img-view {
   position: relative;
 }
-.videoImg{
+
+.videoImg {
   opacity: 0.9;
 }
-.playImg{
+
+.playImg {
   width: 48rpx !important;
   height: 48rpx !important;
   position: absolute;
@@ -96,7 +108,7 @@
   margin-top: -24rpx !important;
 }
 
-.audio-list image{
+.audio-list image {
   height: 30rpx;
   width: 50rpx;
   border: 1px solid #eee;
@@ -107,12 +119,12 @@
   border-radius: 10rpx;
 }
 
-.curAudioStyle{
+.curAudioStyle {
   box-shadow: 0 0 20rpx #cc6031 !important;
   border: none;
 }
 
-.toTask{
+.toTask {
   width: 400rpx;
   height: 80rpx;
   text-align: center;
@@ -125,4 +137,9 @@
   bottom: 40rpx;
   left: 50%;
   margin-left: -200rpx;
+}
+
+.done-title {
+  font-size: 36rpx;
+  margin-top: 60rpx;
 }