开发挑战结果页

pages/pkResult/index.js

@@ -4,12 +4,16 @@ import {
 import {
   store
 } from '~/store/index'
+let innerAudioContext
 Page({
 
   /**
    * 页面的初始数据
    */
   data: {
+    vState: false,
+    dState: false,
+    currentType: '',
     victory: {},
     defeated: {},
   },
@@ -27,17 +31,20 @@ Page({
     })
     this.storeBindings.updateStoreBindings()
     this.compareScore()
+    this.innerAudioContext = wx.createInnerAudioContext()
+    this.setDuration();
   },
   compareScore() {
     let pkData = {
-      audioPath: "https://reader-wx.ai160.com/reader/resource/20221222/1671682237419428.mp3",
+      audioPath: "https://reader-wx.ai160.com/audio/reader/103138024.mp3",
       avatar: "wxfile://,tmp_ba795553cc21cd941badc3ce06597c245f08fd6a674fe165.jpg",
       nickName: "小舞",
       score: 96,
     }
+    // let pkData = this.data.pkData
     let score = pkData.score
     let myResult = {
-      audioPath: this.data.readDetail.tempFilePath,
+      audioPath: this.data.readDetail.tempFilePath || 'https://reader-wx.ai160.com/reader/resource/20221228/1672193630349721.mp3',
       nickName: this.data.userInfo.nickName || this.data.userInfo.uid,
       avatar: this.data.userInfo.avatar,
       score: this.data.readDetail.myOverall || 100
@@ -48,6 +55,57 @@ Page({
     })
 
   },
+  playAudio({
+    currentTarget
+  }) {
+    let type = currentTarget.dataset.type
+    // 重置音频对象
+    if (type != this.data.currentType) {
+      this.innerAudioContext.stop();
+    }
+    // 处理音频播放
+    if (type == 'victory' && !this.data.vState) {
+      if (this.data.currentType != 'victory') {
+        this.innerAudioContext.src = this.data.victory.audioPath
+      }
+      this.setData({
+        vState: true,
+        dState: false
+      })
+    } else if (type == 'victory' && this.data.vState) {
+      this.innerAudioContext.pause();
+      return this.setData({
+        vState: false
+      })
+    } else if (type == 'defeated' && !this.data.dState) {
+      if (this.data.currentType != 'defeated') {
+        this.innerAudioContext.src = this.data.defeated.audioPath;
+      }
+      this.setData({
+        dState: true,
+        vState: false
+      })
+    } else if (type == 'defeated' && this.data.dState) {
+      this.innerAudioContext.pause();
+      return this.setData({
+        dState: false
+      })
+    }
+    this.setData({
+      currentType: type
+    })
+    // this.innerAudioContext.onCanplay(() => {
+    this.innerAudioContext.play();
+    // })
+    this.innerAudioContext.onTimeUpdate(() => {
+      this.setDuration(this.innerAudioContext.currentTime)
+    })
+  },
+  // 设置时间文案
+  setDuration(value) {
+    console.log(value, this.data.currentType);
+
+  },
   result() {
 
   },
@@ -62,7 +120,7 @@ Page({
    * 生命周期函数--监听页面卸载
    */
   onUnload() {
-
+    this.innerAudioContext.destroy()
   },
 
   /**

pages/pkResult/index.less

@@ -25,6 +25,7 @@
     background-image: radial-gradient(50% 102%, #5171BD 1%, #21287A 100%);
     box-shadow: 0 4rpx 10rpx 0 rgba(0, 0, 0, 0.30), inset 0 -2rpx 3rpx 0 #052552, inset 0 2rpx 3rpx 0;
     border-radius: 20rpx;
+    text-align: center;
 
     .left {
       position: absolute;
@@ -34,6 +35,11 @@
       width: 328rpx;
       background: url('http://reader-wx.ai160.com/images/reader/v3/victory.png')no-repeat;
       background-size: 100% 100%;
+
+      .avatarL {
+        top: 64rpx;
+        left: 110rpx;
+      }
     }
 
     .right {
@@ -44,6 +50,11 @@
       width: 328rpx;
       background: url('http://reader-wx.ai160.com/images/reader/v3/defeated.png')no-repeat;
       background-size: 100% 100%;
+
+      .avatarR {
+        top: 57rpx;
+        left: 107rpx;
+      }
     }
 
     .avatar {
@@ -53,14 +64,39 @@
       border-radius: 50%;
     }
 
-    .avatarL {
-      top: 64rpx;
-      left: 110rpx;
+    .bodyTitle {
+      font-size: 28rpx;
+      padding: 0rpx 30rpx;
+      box-sizing: border-box;
+      margin-top: 190rpx;
+    }
+
+    .bodyScore {
+      margin-top: 10rpx;
+      font-size: 38rpx;
+      font-weight: bold;
+    }
+
+    .bodyPlay {
+      width: 70rpx;
+      height: 70rpx;
+      margin-top: 40rpx;
+    }
+
+    .progress {
+      width: 250rpx;
+      margin: 10rpx auto;
+      border-radius: 50rpx;
+      overflow: hidden;
     }
 
-    .avatarR {
-      top: 57rpx;
-      left: 107rpx;
+    .duration {
+      margin: 10rpx auto;
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-around;
+      font-size: 28rpx;
     }
   }
 
@@ -71,6 +107,7 @@
     width: 100%;
     padding: 20rpx 104rpx;
     box-sizing: border-box;
+    padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
     background-color: white;
     display: flex;
     align-items: center;

pages/pkResult/index.wxml

@@ -4,10 +4,27 @@
   <view class="body">
     <view class="left">
       <image src="{{victory.avatar}}" class="avatar avatarL" mode="" />
-      <view class="victory-title">{{victory.nickName}}</view>
+      <view class="bodyTitle textOver">{{victory.nickName}}</view>
+      <view class="bodyScore">{{victory.score}}分</view>
+      <image src="{{vState?'/static/work.png':'/static/play-big.png'}}" class="bodyPlay" bindtap="playAudio"
+        data-type="victory" />
+      <progress percent="60" stroke-width="4" class="progress" style="margin-right:48rpx;" />
+      <view class="duration">
+        <view class="start">0:00</view>
+        <view class="end">0:00</view>
+      </view>
     </view>
     <view class="right">
       <image src="{{defeated.avatar}}" class="avatar avatarR" mode="" />
+      <view class="bodyTitle textOver">{{defeated.nickName}}</view>
+      <view class="bodyScore">{{defeated.score}}分</view>
+      <image src="{{dState?'/static/work.png':'/static/play-big.png'}}" class="bodyPlay" bindtap="playAudio"
+        data-type="defeated" />
+      <progress percent="60" stroke-width="4" class="progress" />
+      <view class="duration">
+        <view class="start">0:00</view>
+        <view class="end">0:00</view>
+      </view>
     </view>
   </view>
   <view class="footer">

pages/pkResult/index.wxss

@@ -23,6 +23,7 @@
   background-image: radial-gradient(50% 102%, #5171BD 1%, #21287A 100%);
   box-shadow: 0 4rpx 10rpx 0 rgba(0, 0, 0, 0.3), inset 0 -2rpx 3rpx 0 #052552, inset 0 2rpx 3rpx 0;
   border-radius: 20rpx;
+  text-align: center;
 }
 .pkResult .body .left {
   position: absolute;
@@ -33,6 +34,10 @@
   background: url('http://reader-wx.ai160.com/images/reader/v3/victory.png') no-repeat;
   background-size: 100% 100%;
 }
+.pkResult .body .left .avatarL {
+  top: 64rpx;
+  left: 110rpx;
+}
 .pkResult .body .right {
   position: absolute;
   top: 70rpx;
@@ -42,19 +47,45 @@
   background: url('http://reader-wx.ai160.com/images/reader/v3/defeated.png') no-repeat;
   background-size: 100% 100%;
 }
+.pkResult .body .right .avatarR {
+  top: 57rpx;
+  left: 107rpx;
+}
 .pkResult .body .avatar {
   position: absolute;
   width: 110rpx;
   height: 110rpx;
   border-radius: 50%;
 }
-.pkResult .body .avatarL {
-  top: 64rpx;
-  left: 110rpx;
+.pkResult .body .bodyTitle {
+  font-size: 28rpx;
+  padding: 0rpx 30rpx;
+  box-sizing: border-box;
+  margin-top: 190rpx;
 }
-.pkResult .body .avatarR {
-  top: 57rpx;
-  left: 107rpx;
+.pkResult .body .bodyScore {
+  margin-top: 10rpx;
+  font-size: 38rpx;
+  font-weight: bold;
+}
+.pkResult .body .bodyPlay {
+  width: 70rpx;
+  height: 70rpx;
+  margin-top: 40rpx;
+}
+.pkResult .body .progress {
+  width: 250rpx;
+  margin: 10rpx auto;
+  border-radius: 50rpx;
+  overflow: hidden;
+}
+.pkResult .body .duration {
+  margin: 10rpx auto;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  font-size: 28rpx;
 }
 .pkResult .footer {
   position: fixed;
@@ -63,6 +94,7 @@
   width: 100%;
   padding: 20rpx 104rpx;
   box-sizing: border-box;
+  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
   background-color: white;
   display: flex;
   align-items: center;