开发点击他人挑战PK按钮-视频直接播放——在作品下方加【听示范】按钮-点击播放示范音，切换按钮变成ta的朗读

components/videoPreview/index.js

@@ -40,6 +40,7 @@ Component({
         }
         this.setData({
           videoInfoCopy: newVal,
+          videoPath: newVal.userRead.videoPath,
           isOfficial: newVal.userRead.type != 'APP_EXAMPLE'
         })
       }
@@ -64,6 +65,10 @@ Component({
   data: {
     selfUid: wx.getStorageSync('uid'),
     videoInfoCopy: {},
+    videoPath: '',
+    //userRead.videoPath 和 example.videoPath，
+    workType: 'videoPath',
+    // 是否官方作品
     isOfficial: false
   },
   lifetimes: {
@@ -85,6 +90,7 @@ Component({
       this.triggerEvent('playVideo', this.data.videoInfoCopy.userRead.id)
       this.submitPlayLog(this.data.videoInfoCopy.userRead.id)
     },
+    // 设置进度条
     slider({
       detail
     }) {
@@ -229,6 +235,16 @@ Component({
       })
       this.triggerEvent('setListFans', this.data.videoInfoCopy.user.uid)
     },
+    jumpUserInfo() {
+      wx.navigateTo({
+        url: `/pages/personal/index?uid=${this.data.videoInfoCopy.user.uid}&type=user`,
+      })
+    },
+    // 控制音频播放
+    audioPlay() {
+      this.triggerEvent('playAudio')
+      this.submitPlayLog(this.data.videoInfoCopy.userRead.id)
+    },
     toPkPage() {
       let videoInfo = this.data.videoInfoCopy
       if (this.properties.videoType == 'pk') {
@@ -265,15 +281,12 @@ Component({
         url
       })
     },
-    jumpUserInfo() {
-      wx.navigateTo({
-        url: `/pages/personal/index?uid=${this.data.videoInfoCopy.user.uid}&type=user`,
+    // pkPage页面控制播放按钮
+    changeRead() {
+      this.setData({
+        workType: this.data.workType == 'videoPath' ? 'example' : 'videoPath',
       })
-    },
-    // 控制音频播放
-    audioPlay() {
-      this.triggerEvent('playAudio')
-      this.submitPlayLog(this.data.videoInfoCopy.userRead.id)
+      console.log(this.data.workType);
     },
     // 统计作品播放次数
     async submitPlayLog(userReadId) {

components/videoPreview/index.less

@@ -3,7 +3,7 @@
   background-color: white;
   border-radius: 32rpx;
   box-shadow: rgba(99, 99, 99, 0.1) 0px 2px 8px 0px;
-  padding-bottom: 30rpx;
+  padding-bottom: 26rpx;
 
   .workHead {
     display: flex;
@@ -264,13 +264,12 @@
 
   .toReading {
     width: 166rpx;
-    margin: 14rpx auto 0rpx;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 12rpx 32rpx;
     border-radius: 50rpx;
-    background-image: linear-gradient(270deg, #33C3FF 0%, #81C7FF 100%, #14C962 100%);
+    background-color: #81C7FF;
     box-shadow: 0 4rpx 10rpx 0 rgba(50, 197, 255, 0.46);
 
     .reading {
@@ -283,5 +282,20 @@
       font-size: 30rpx;
       margin-left: 12rpx;
     }
+
+  }
+
+  .pkToReading {
+    width: 250rpx;
+  }
+
+  .pkPageBtns {
+    width: 100%;
+    margin-top: 16rpx;
+    padding: 0rpx 32rpx;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
 }

components/videoPreview/index.wxml

@@ -58,7 +58,8 @@
       bindtap="playVideo" wx:if="{{videoInfoCopy.userRead.status!='CHECK'}}" />
     <!-- 播放时渲染的video -->
     <video class="video" id="myVideo" wx:if="{{videoInfoCopy.userRead.id==currentId}}"
-      src="{{videoInfoCopy.userRead.videoPath}}" autoplay="true" object-fit="contain">
+      src="{{workType=='videoPath'? videoInfoCopy.userRead.videoPath:videoInfoCopy.example.videoPath}}" autoplay="true"
+      object-fit="contain">
     </video>
   </view>
   <!-- 音频 -->
@@ -106,9 +107,19 @@
       <view class="icon-name">{{filters.numFilter(videoInfoCopy.userRead.likeAmount)}}</view>
     </view>
   </view>
-  <view class="toReading" bindtap="toPkPage" wx:if="{{videoType!='my'}}">
-    <image src="/static/reading.png" class="reading" mode="" />
-    <view class="reading-text" wx:if="{{videoInfoCopy.userRead.type=='READ'}}">挑战PK</view>
-    <view class="reading-text" wx:if="{{!isOfficial}}">去朗读</view>
+
+  <view class="pkPageBtns" style="justify-content:{{videoType!='pk'?'center':'space-between'}}"
+    wx:if="{{videoType!='my'}}">
+    <view class="toReading" style="background-color: #00C657;" bindtap="changeRead"
+      wx:if="{{videoInfoCopy.userRead.type=='READ'&&videoType=='pk'}}">
+      <image src="/static/aPlay.png" class="reading" />
+      <view class="reading-text">{{workType=='videoPath'?'示范朗读':'TA的朗读'}}</view>
+    </view>
+    <view class="toReading {{videoType=='pk'?'pkToReading':''}}" bindtap="toPkPage">
+      <image src="/static/reading.png" class="reading" />
+      <view class="reading-text" wx:if="{{videoInfoCopy.userRead.type=='READ'}}">{{videoType!='pk'?'挑战PK':'开始挑战'}}
+      </view>
+      <view class="reading-text" wx:if="{{!isOfficial}}">去朗读</view>
+    </view>
   </view>
 </view>

components/videoPreview/index.wxss

@@ -3,7 +3,7 @@
   background-color: white;
   border-radius: 32rpx;
   box-shadow: rgba(99, 99, 99, 0.1) 0px 2px 8px 0px;
-  padding-bottom: 30rpx;
+  padding-bottom: 26rpx;
 }
 .work .workHead {
   display: flex;
@@ -225,13 +225,12 @@
 }
 .work .toReading {
   width: 166rpx;
-  margin: 14rpx auto 0rpx;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 12rpx 32rpx;
   border-radius: 50rpx;
-  background-image: linear-gradient(270deg, #33C3FF 0%, #81C7FF 100%, #14C962 100%);
+  background-color: #81C7FF;
   box-shadow: 0 4rpx 10rpx 0 rgba(50, 197, 255, 0.46);
 }
 .work .toReading .reading {
@@ -243,3 +242,15 @@
   font-size: 30rpx;
   margin-left: 12rpx;
 }
+.work .pkToReading {
+  width: 250rpx;
+}
+.work .pkPageBtns {
+  width: 100%;
+  margin-top: 16rpx;
+  padding: 0rpx 32rpx;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

pages/pkPage/index.js

@@ -33,7 +33,8 @@ Page({
       title: videoInfo.userRead.title
     })
     this.setData({
-      videoInfo
+      videoInfo,
+      currentId: videoId
     })
   },
   async getPkRecord() {

pages/pkPage/index.wxml

@@ -2,8 +2,8 @@
 <view class="pkBox">
   <videoPreview wx:if="{{videoInfo}}" videoInfo="{{videoInfo}}" currentId="{{currentId}}"
     data-id="{{videoInfo.userRead.id}}" currentTime="{{currentTime}}" sliderValue="{{sliderValue}}"
-    bind:playVideo="playVideo" bind:playAudio="playAudio" data-audio="{{videoInfo.userRead.audioPath}}"
-    bind:setSeek="setSeek" bind:openComment="openComment" videoType='pk' />
+    bind:playVideo="playVideo" bind:playAudio="playAudio" bind:setSeek="setSeek" bind:openComment="openComment"
+    videoType='pk' />
   <!-- 挑战记录列表 -->
   <view class="pkRecord">
     <view class="title">挑战记录</view>