1.联调音频格式作品 2.联调作品朗读文案

components/videoPreview/index.less

@@ -67,7 +67,7 @@
         justify-content: center;
         width: 140rpx;
         font-size: 24rpx;
-        padding: 6rpx 0rpx;
+        padding: 8rpx 0rpx;
         border-radius: 50rpx;
         border: 1rpx solid #1BC665;
         color: #1BC665;
@@ -145,7 +145,6 @@
       position: relative;
       height: 208rpx;
       overflow: hidden;
-      background-color: rebeccapurple;
       display: flex;
       align-items: center;
 
@@ -153,16 +152,6 @@
         position: absolute;
         width: 100%;
         height: 100%;
-        filter: blur(12px);
-      }
-
-      .mask {
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        left: 0px;
-        top: 0px;
-        background-color: rgba(0, 0, 0, 0.2);
       }
 
       .audioPlay {

components/videoPreview/index.wxml

@@ -39,7 +39,7 @@
     </view>
   </view>
   <!-- 视频 -->
-  <view class="workContent" wx:if="{{!videoInfoCopy.userReadExtend}}">
+  <view class="workContent" wx:if="{{!videoInfoCopy.userReadExtend||videoInfoCopy.userReadExtend.resourcesType==0}}">
     <!-- 审核中遮罩 -->
     <view class="videoBox" wx:if="{{videoInfoCopy.userRead.status=='CHECK'&&videoInfoCopy.userRead.id!=currentId}}">
       <view class="maskBg"></view>
@@ -60,46 +60,44 @@
   <!-- 音频 -->
   <view class="workContent" wx:else>
     <view class="audioBox">
-      <image src="{{videoInfoCopy.userRead.coverImg}}" class="audioBg" mode="" />
-      <view class="mask"></view>
-      <view class="audioPlay" bindtap="audioPlay">
-        <image src="/static/audioBg.png" class="audioPlayBg {{videoInfoCopy.userRead.id==currentId?'circle':''}}" />
-        <image src="/static/zhen.png" class="audioPlayZhen" />
-        <image src="{{videoInfoCopy.user.avatar}}" class="cover {{videoInfoCopy.userRead.id==currentId?'circle':''}}"
-          mode="" />
-      </view>
-      <view class="titleBox">
-        <view class="textOver">
-          在组件在视图层
-        </view>
+      <image src=" {{videoInfoCopy.userReadExtend.backgroundVirtualImg}}" class="audioBg" mode="aspectFill" />
+    <view class="audioPlay" bindtap="audioPlay">
+      <image src="/static/audioBg.png" class="audioPlayBg {{videoInfoCopy.userRead.id==currentId?'circle':''}}" />
+      <image src="/static/zhen.png" class="audioPlayZhen" />
+      <image src="{{videoInfoCopy.userRead.coverImg}}" class="cover {{videoInfoCopy.userRead.id==currentId?'circle':''}}"
+        mode="" />
+    </view>
+    <view class="titleBox">
+      <view class="textOver">
+        {{videoInfoCopy.userRead.title}}
       </view>
     </view>
   </view>
-  <view class="workFooter" wx:if="{{videoInfo.userRead.status!='CHECK'}}">
-    <button class="resetBtn mangeL-box" open-type="share" data-info='{{videoInfo}}'>
-      <image src="/static/share.png" mode="" class="icon" />
-      <view class="icon-name">分享</view>
-    </button>
-    <view class="mangeL-box" bindtap="collect">
-      <image src="{{videoInfoCopy.isFavorites ? '/static/star_colored.png' : '/static/star.png'}}" mode=""
-        class="icon" />
-      <view class="icon-name">{{videoInfoCopy.isFavorites?'已收藏':'收藏'}}</view>
-    </view>
-    <view class="mangeL-box" bindtap="openComment">
-      <image src="/static/comment.png" mode="" class="icon" />
-      <view class="icon-name">{{filters.numFilter(videoInfoCopy.userRead.commentAmount)}}</view>
-    </view>
-    <view class="mangeL-box" bindtap="likeVideo">
-      <image src="{{videoInfoCopy.isLike ? '/static/heart_colored.png' : '/static/heart.png'}}" mode="" class="icon" />
-      <view class="icon-name">{{filters.numFilter(videoInfoCopy.userRead.likeAmount)}}</view>
-    </view>
+</view>
+<view class="workFooter" wx:if="{{videoInfo.userRead.status!='CHECK'}}">
+  <button class="resetBtn mangeL-box" open-type="share" data-info='{{videoInfo}}'>
+    <image src="/static/share.png" mode="" class="icon" />
+    <view class="icon-name">分享</view>
+  </button>
+  <view class="mangeL-box" bindtap="collect">
+    <image src="{{videoInfoCopy.isFavorites ? '/static/star_colored.png' : '/static/star.png'}}" mode="" class="icon" />
+    <view class="icon-name">{{videoInfoCopy.isFavorites?'已收藏':'收藏'}}</view>
   </view>
-  <view class="toReading" bindtap="toPkPage" wx:if="{{videoType=='pk'||videoType=='excellent'}}">
-    <image src="/static/reading.png" class="reading" mode="" />
-    <view class="reading-text">挑战PK</view>
+  <view class="mangeL-box" bindtap="openComment">
+    <image src="/static/comment.png" mode="" class="icon" />
+    <view class="icon-name">{{filters.numFilter(videoInfoCopy.userRead.commentAmount)}}</view>
   </view>
-  <view class="toReading" bindtap="toPkPage" wx:if="{{videoType=='public'}}">
-    <image src="/static/reading.png" class="reading" mode="" />
-    <view class="reading-text">去朗读</view>
+  <view class="mangeL-box" bindtap="likeVideo">
+    <image src="{{videoInfoCopy.isLike ? '/static/heart_colored.png' : '/static/heart.png'}}" mode="" class="icon" />
+    <view class="icon-name">{{filters.numFilter(videoInfoCopy.userRead.likeAmount)}}</view>
   </view>
+</view>
+<view class="toReading" bindtap="toPkPage" wx:if="{{videoType=='pk'||videoType=='excellent'}}">
+  <image src="/static/reading.png" class="reading" mode="" />
+  <view class="reading-text">挑战PK</view>
+</view>
+<view class="toReading" bindtap="toPkPage" wx:if="{{videoType=='public'}}">
+  <image src="/static/reading.png" class="reading" mode="" />
+  <view class="reading-text">去朗读</view>
+</view>
 </view>

components/videoPreview/index.wxss

@@ -59,7 +59,7 @@
   justify-content: center;
   width: 140rpx;
   font-size: 24rpx;
-  padding: 6rpx 0rpx;
+  padding: 8rpx 0rpx;
   border-radius: 50rpx;
   border: 1rpx solid #1BC665;
   color: #1BC665;
@@ -125,7 +125,6 @@
   position: relative;
   height: 208rpx;
   overflow: hidden;
-  background-color: rebeccapurple;
   display: flex;
   align-items: center;
 }
@@ -133,15 +132,6 @@
   position: absolute;
   width: 100%;
   height: 100%;
-  filter: blur(12px);
-}
-.work .workContent .audioBox .mask {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  left: 0px;
-  top: 0px;
-  background-color: rgba(0, 0, 0, 0.2);
 }
 .work .workContent .audioBox .audioPlay {
   position: relative;

components/worksList/index.js

@@ -19,9 +19,17 @@ Component({
             .observe('.videoPreview', (res) => {
               let intersectionRatio = res.intersectionRatio
               if (intersectionRatio > 0) {
-                this.setData({
-                  currentId: res.dataset.id
-                })
+                if (res.dataset.type == 0) {
+                  this.setData({
+                    currentId: res.dataset.id
+                  })
+                } else {
+                  this.playAudio({
+                    currentTarget: {
+                      dataset: res.dataset
+                    }
+                  })
+                }
               }
             })
         }

components/worksList/index.wxml

@@ -2,8 +2,9 @@
   <view class="playLine" />
   <videoPreview class="videoPreview" wx:for="{{worksListCopy}}" wx:key="index" videoType="{{videoType}}"
     videoInfo="{{item}}" index='{{index}}' currentId="{{currentId}}" data-id="{{item.userRead.id}}"
-    data-audio="{{item.userRead.audioPath}}" bind:playVideo="playVideo" bind:openComment="openComment"
-    bind:setListFans="setListFans" bind:playAudio="playAudio">
+    data-audio="{{item.userRead.audioPath}}"
+    data-type="{{!item.userReadExtend||item.userReadExtend.resourcesType==0?0:1}}" bind:playVideo="playVideo"
+    bind:openComment="openComment" bind:setListFans="setListFans" bind:playAudio="playAudio">
   </videoPreview>
   <Comment id="comment" tabBarPadding="{{tabBarPadding}}" bind:addCommentNum="addCommentNum" />
   <canvas id='share' type=" 2d"> </canvas>

pages/index/index.wxml

@@ -29,7 +29,6 @@
   </view>
   <!-- 当一级分类固定定位时占位用的元素 -->
   <view class="{{isFixed?'brace':''}}" />
-
   <!-- 优秀作品展播及官方推荐列表组件 -->
   <worksList id="worksList" wx:if="{{currentType!='3'}}" worksList="{{list}}"
     videoType="{{currentType=='1'?'excellent':'public'}}" tabBarPadding='true' />

pages/reading/index.js

@@ -44,47 +44,13 @@ Page({
     readingType: 'public',
     percent: 0,
     uploadState: false,
-    article: [{
-      id: 1,
-      text: '传说在很久很久以前，',
-      time: '0'
-    }, {
-      id: 2,
-      text: '天和地还没有分开，',
-      time: '4010'
-    }, {
-      id: 3,
-      text: '整个宇宙混沌一团，',
-      time: '7080'
-    }, {
-      id: 4,
-      text: '像个大鸡蛋。',
-      time: '10150'
-    }, {
-      id: 5,
-      text: '有个叫盘古的大神，',
-      time: '13150'
-    }, {
-      id: 6,
-      text: '昏睡了一万八千年。',
-      time: '16190'
-    }, {
-      id: 7,
-      text: '一天，大神醒来，睁眼一看，',
-      time: '20030'
-    }]
+    article: []
   },
   onLoad(options) {
     let videoId = options.videoId
-    this.getreadInfo(videoId)
-    let data = this.data.article
-    data = data.map((item, index) => {
-      item.readTime = data[index + 1] ? data[index + 1].time - item.time : ''
-      return item
-    })
+    this.getreadInfo(videoId, options.reset)
     console.log(options, 'options');
     this.setData({
-      article: data,
       readingReset: options.reset || false,
       readingType: options.readingType || 'public'
     })
@@ -100,9 +66,7 @@ Page({
         setReadDetail: 'setReadDetail'
       }
     })
-    if (!options.reset) {
-      this.getHeight()
-    }
+
     // 录音授权
     wx.getSetting({
       success(res) {
@@ -126,15 +90,27 @@ Page({
     });
   },
   // 获取阅读内容
-  async getreadInfo(videoId) {
+  async getreadInfo(videoId, reset = false) {
     let videoInfo = await getreadInfo(videoId)
+    console.log(videoInfo);
     wx.setNavigationBarTitle({
       title: videoInfo.userRead.title
     })
+    let data = JSON.parse(videoInfo.userReadExtend.lessonText)
+    data = data.map((item, index) => {
+      item.time = Number(item.time)
+      item.readTime = data[index + 1] ? data[index + 1].time - item.time : ''
+      return item
+    })
+    console.log(data);
     this.setData({
+      article: data,
       videoInfo
     })
-    if (!this.data.videoInfo.userReadExtend) {
+    if (!reset) {
+      this.getHeight()
+    }
+    if (!this.data.videoInfo.userReadExtend || this.data.videoInfo.userReadExtend.resourcesType == 0) {
       this.videoContext = wx.createVideoContext('myVideo')
     } else {
       this.innerAudioContext = wx.createInnerAudioContext();
@@ -300,7 +276,7 @@ Page({
       tempFilePath: this.data.tempFilePath,
       title: this.data.videoInfo.userRead.title,
       id: this.data.videoInfo.userRead.exampleId,
-      coverImg:this.data.videoInfo.userRead.coverImg,
+      coverImg: this.data.videoInfo.userRead.coverImg,
       originVideo: this.data.videoInfo.userRead.originVideo
     }
     this.setReadDetail(detail)

pages/reading/index.less

@@ -48,6 +48,7 @@
       bottom: 0;
       margin: auto;
       border-radius: 20rpx;
+      background-size: cover;
       background-color: rgba(0, 0, 0, 0.3);
       display: flex;
       align-items: center;

pages/reading/index.wxml

@@ -7,10 +7,10 @@
   <view class="audio" wx:else>
     <image src="{{videoInfo.userRead.coverImg}}" class="audioBg" mode="" />
     <view class="mask"></view>
-    <view class="audioPlay">
+    <view class="audioPlay" style="background-image: url({{videoInfo.userReadExtend.backgroundVirtualImg}});">
       <image src="/static/audioBg.png" class="audioPlayBg {{state?'circle':''}}" />
       <image src="/static/zhen.png" class="audioPlayZhen" />
-      <image src="{{videoInfo.user.avatar}}" bindtap='videoPlay' class="cover {{state?'circle':''}}" mode="" />
+      <image src="{{videoInfo.userRead.iconImg}}" bindtap='videoPlay' class="cover {{state?'circle':''}}" mode="" />
     </view>
   </view>
   <view class="contentBox" wx:if="{{!readingReset}}">

pages/reading/index.wxss

@@ -44,6 +44,7 @@
   bottom: 0;
   margin: auto;
   border-radius: 20rpx;
+  background-size: cover;
   background-color: rgba(0, 0, 0, 0.3);
   display: flex;
   align-items: center;