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

app.json

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

pages/Components/selectDate/selectDate.js

@@ -30,7 +30,7 @@ Component({
       var num = 0
       var opacity = 0
       if(this.data.yFlag == false){
-        num = 165
+        num = 195
         opacity = 0.4
         this.setData({
           yFlag: true

pages/Components/selectDate/selectDate.wxss

@@ -17,7 +17,7 @@
 .select-box {
   position: fixed;
   background: #FFF;
-  top: -240rpx;
+  top: -300rpx;
   width: 750rpx;
   height: 300rpx;
   font-size: 32rpx;

pages/task/task.json

@@ -1,4 +1,5 @@
 {
+  "enablePullDownRefresh": true,
   "navigationBarTitleText": "提交作业",
   "usingComponents": {
     "selectDate":"/pages/Components/selectDate/selectDate"

pages/taskDetail/taskDetail.js

@@ -0,0 +1,174 @@
+// pages/taskDetail/taskDetail.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    curVideo: '',
+    videoFlag: 0,
+    imgList:[
+      'https://file.schoolwisdoms.com/image/26cf1980-5b25-4c2e-af7f-376677d76033.jpg',
+      'https://file.schoolwisdoms.com/image/26cf1980-5b25-4c2e-af7f-376677d76033.jpg',
+      'https://file.schoolwisdoms.com/image/26cf1980-5b25-4c2e-af7f-376677d76033.jpg',
+      'https://file.schoolwisdoms.com/image/26cf1980-5b25-4c2e-af7f-376677d76033.jpg',
+      'https://file.schoolwisdoms.com/image/26cf1980-5b25-4c2e-af7f-376677d76033.jpg',
+      'https://file.schoolwisdoms.com/image/26cf1980-5b25-4c2e-af7f-376677d76033.jpg',
+      'https://file.schoolwisdoms.com/image/26cf1980-5b25-4c2e-af7f-376677d76033.jpg'
+    ],
+    videoContext: '',
+    videoList:[
+      {
+        img: 'https://file.schoolwisdoms.com/image/26cf1980-5b25-4c2e-af7f-376677d76033.jpg',
+        url: 'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400'
+      },
+      {
+        img: 'https://file.schoolwisdoms.com/image/26cf1980-5b25-4c2e-af7f-376677d76033.jpg',
+        url: 'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400'
+      },
+      {
+        img: 'https://file.schoolwisdoms.com/image/26cf1980-5b25-4c2e-af7f-376677d76033.jpg',
+        url: 'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400'
+      },
+      {
+        img: 'https://file.schoolwisdoms.com/image/26cf1980-5b25-4c2e-af7f-376677d76033.jpg',
+        url: 'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400'
+      }
+    ],
+    audioList:[
+      'https://gm-sycdn.kuwo.cn/2256fce37c86b5bc25065d780f769260/60347b85/resource/n2/73/81/1062648582.mp3',
+      'https://gm-sycdn.kuwo.cn/2256fce37c86b5bc25065d780f769260/60347b85/resource/n2/73/81/1062648582.mp3',
+    ],
+    curAudio: '',
+    curAudioIndex: -1,
+    audioPause: 0,
+  },
+
+  bindfullscreenchange:function(){
+    if(this.data.videoFlag == 0){
+      this.setData({
+        videoFlag : 1
+      })
+    } else {
+      this.setData({
+        videoFlag : 0,
+        curVideo : ""
+      })
+    }
+  },
+
+  videoShow:function(e){
+    this.setData({
+      curVideo: e.currentTarget.dataset.url
+    })
+    
+    this.videoContext.requestFullScreen({	// 设置全屏时视频的方向，不指定则根据宽高比自动判断。
+			direction: 90						// 屏幕逆时针90度
+		});
+  },
+
+  showImg:function(e){
+    // var list = e.currentTarget.dataset.url
+    wx.previewImage({
+      urls: this.data.imgList,
+    })
+  },
+
+  audioShow:function(e){
+    if(this.data.audioPause == 0 && this.data.curAudioIndex != e.currentTarget.dataset.index){//播放语音，切换
+      this.setData({
+        curAudio: ""
+      })
+      this.setData({
+        curAudioIndex: e.currentTarget.dataset.index,
+        curAudio: e.currentTarget.dataset.url,
+       
+      })
+      this.audioContext.play()
+      this.setData({
+        audioPause: 0
+      })
+    } else if(this.data.audioPause == 1 && this.data.curAudioIndex == e.currentTarget.dataset.index) {//暂停后恢复播放
+        this.audioContext.play()
+        this.setData({
+          audioPause: 0
+        })
+    } else if(this.data.audioPause == 0 && this.data.curAudioIndex == e.currentTarget.dataset.index){//暂停播放
+      this.audioContext.pause()
+      this.setData({
+        audioPause: 1
+      })
+    }
+  },
+
+  bindended:function(){
+    this.setData({
+      audioPause: 0,
+      curAudioIndex: -1,
+      curAudio: ''
+    })
+  },
+
+  bindpause:function(){
+    this.setData({
+      audioPause: 1
+    })
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+    this.audioContext = wx.createAudioContext('audio-play')
+    this.videoContext = wx.createVideoContext('play-video');// 	创建 video 上下文 VideoContext 对象。
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})

pages/taskDetail/taskDetail.json

@@ -0,0 +1,4 @@
+{
+  "usingComponents": {},
+  "navigationBarTitleText": "作业详情"
+}

pages/taskDetail/taskDetail.wxml

@@ -0,0 +1,52 @@
+<view class="container">
+
+  <!-- 作业内容 -->
+  <view class="task-head">
+    <view class="task-title">2021-02-21 课后作业</view>
+    <view class="task-time">2021-02-21 16:00</view>
+  </view>
+
+  <view class="task-teacher">
+    <view class="taskImg">
+      <image src="/images/head.png"></image>
+    </view>
+    <view class="teacher-name">张老师：</view>
+    <view class="contact-teacher">
+      联系老师
+    </view>
+  </view>
+
+  <view class="task-desc">
+  这是一条测试数据这是一条测试数据这是一条测试数据这是一条测试数据这是一条测试数据这是一条测试数据这是一条测试数据这是一条测试数据这是一条测试数据
+  </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>
+  <!-- end -->
+
+  <view class="toTask" bindtap="toTask">
+    做作业
+  </view>
+
+
+</view>

pages/taskDetail/taskDetail.wxss

@@ -0,0 +1,128 @@
+.container{
+  padding: 0;
+  margin: 0;
+  width: 700rpx;
+  margin: 0 auto;
+}
+
+.task-head{
+  display: flex;
+ 
+  height: 80rpx;
+  line-height: 80rpx;
+}
+.task-title{
+  font-size: 36rpx;
+  font-weight: 600;
+  width: 450rpx;
+  overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+.task-time{
+  width: 250rpx;
+  text-align: right;
+  color: #999;
+  font-size: 28rpx;
+}
+
+.task-teacher{
+  display: flex;
+  height: 60rpx;
+  line-height: 60rpx;
+  padding: 20rpx 0;
+}
+.taskImg{
+  height: 60rpx;
+  width: 60rpx;
+  margin-right: 20rpx;
+}
+.taskImg image{
+  height: 100%;
+  width: 100%;
+}
+.contact-teacher{
+  margin-left: auto;
+  color: #cc6031;
+}
+.task-desc{
+  color: #666;
+  margin-top: 20rpx;
+  line-height: 50rpx;
+  margin-bottom: 20rpx;
+}
+
+.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;
+}
+
+.audio-list{
+  display: grid;
+  justify-content: space-between;
+  grid-template-columns: repeat(auto-fill, 120rpx);
+  grid-gap: auto;
+}
+
+.img-list image,.video-list image{
+  width: 150rpx;
+  height: 150rpx;
+  border-radius: 20rpx;
+  margin-bottom: 20rpx;
+  margin: 10rpx auto;
+}
+
+.video-img-view{
+  position: relative;
+}
+.videoImg{
+  opacity: 0.9;
+}
+.playImg{
+  width: 48rpx !important;
+  height: 48rpx !important;
+  position: absolute;
+  z-index: 2;
+  left: 50%;
+  margin-left: -24rpx !important;
+  top: 50%;
+  margin-top: -24rpx !important;
+}
+
+.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;
+}
+
+.curAudioStyle{
+  box-shadow: 0 0 20rpx #cc6031 !important;
+  border: none;
+}
+
+.toTask{
+  width: 400rpx;
+  height: 80rpx;
+  text-align: center;
+  line-height: 80rpx;
+  color: #FFF;
+  background: #cc6031;
+  border-radius: 50rpx;
+  font-size: 36rpx;
+  position: fixed;
+  bottom: 40rpx;
+  left: 50%;
+  margin-left: -200rpx;
+}