开发音频样式

app.wxss

@@ -24,9 +24,9 @@ text {
 #share {
   width: 375px;
   height: 300px;
-  /* position: absolute; */
-  /* left: -999rpx; */
-  /* top: -9999rpx; */
+  position: absolute;
+  left: -999rpx;
+  top: -9999rpx;
 }
 
 .textOver {

components/videoPreview/index.js

@@ -213,6 +213,11 @@ Component({
       wx.navigateTo({
         url: `/pages/personal/index?uid=${this.data.videoInfoCopy.user.uid}`,
       })
+    },
+    // 控制音频播放
+    audioPlay() {
+      console.log(this.data.videoInfoCopy);
+      this.triggerEvent('playVideo', this.properties.videoInfo.userRead.id)
     }
   }
 })

components/videoPreview/index.less

@@ -1,192 +1,249 @@
 .work {
-    margin-bottom: 24rpx;
-    background-color: white;
-    border-radius: 32rpx;
-    box-shadow: rgba(99, 99, 99, 0.1) 0px 2px 8px 0px;
-    padding-bottom: 20rpx;
-
-    .workHead {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding: 20rpx;
-
-        .wH-left {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-
-            .avatar {
-                width: 80rpx;
-                height: 80rpx;
-                border-radius: 50%;
-                overflow: hidden;
-                background-color: rgb(228, 225, 225);
-            }
-
-            .wH-left-user {
-                margin-left: 18rpx;
-
-                .nickname {
-                    max-width: 320rpx;
-                    font-size: 30rpx;
-                    font-weight: bold;
-                    color: #000;
-                }
-
-                .time {
-                    margin-top: 4rpx;
-                    font-size: 26rpx;
-                    color: rgba(0, 0, 0, 0.6);
-                }
-            }
+  margin-bottom: 24rpx;
+  background-color: white;
+  border-radius: 32rpx;
+  box-shadow: rgba(99, 99, 99, 0.1) 0px 2px 8px 0px;
+  padding-bottom: 20rpx;
+
+  .workHead {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20rpx;
+
+    .wH-left {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .avatar {
+        width: 80rpx;
+        height: 80rpx;
+        border-radius: 50%;
+        overflow: hidden;
+        background-color: rgb(228, 225, 225);
+      }
+
+      .wH-left-user {
+        margin-left: 18rpx;
+
+        .nickname {
+          max-width: 320rpx;
+          font-size: 30rpx;
+          font-weight: bold;
+          color: #000;
         }
 
-        .wH-right {
-            display: flex;
-            align-items: center;
-
-            .wH-right-btn {
-                text-align: center;
-                margin-right: 30rpx;
-
-                .img {
-                    width: 27rpx;
-                    height: 32rpx;
-                }
-
-                .text {
-                    font-size: 26rpx;
-                    color: rgba(0, 0, 0, 0.74);
-                }
-            }
-
-            .follow {
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                width: 140rpx;
-                font-size: 24rpx;
-                padding: 6rpx 0rpx;
-                border-radius: 50rpx;
-                border: 1rpx solid #1BC665;
-                color: #1BC665;
-
-                .character {
-                    width: 22rpx;
-                    height: 22rpx;
-                    margin-right: 6rpx;
-                }
-            }
-
-            .isFans {
-                border: 1rpx solid #969696;
-                color: #969696;
-            }
-
-            .pkNum {
-                color: #30C866;
-                font-size: 44rpx;
-                margin-right: 20rpx;
-            }
+        .time {
+          margin-top: 4rpx;
+          font-size: 26rpx;
+          color: rgba(0, 0, 0, 0.6);
         }
+      }
     }
 
-    .workContent {
-        font-size: 0px;
-
-        .videoBox {
-            position: relative;
-            width: 100%;
-            height: 422rpx;
-
-            .maskBg {
-                position: absolute;
-                top: 0px;
-                left: 0px;
-                width: 100%;
-                height: 100%;
-                background-color: rgba(0, 0, 0, 0.5);
-            }
-
-            .maskImg {
-                z-index: 10;
-                width: 215rpx;
-                height: 215rpx;
-                position: absolute;
-                top: 0px;
-                right: 0px;
-                left: 0px;
-                bottom: 0px;
-                margin: auto;
-            }
-
-            .play {
-                position: absolute;
-                left: 50%;
-                top: 40%;
-                width: 90rpx;
-                height: 90rpx;
-                transform: translate(-50%);
-            }
-
-            .cover {
-                width: 100%;
-                height: 100%;
-            }
-        }
+    .wH-right {
+      display: flex;
+      align-items: center;
+
+      .wH-right-btn {
+        text-align: center;
+        margin-right: 30rpx;
 
-        .video {
-            width: 100%;
-            height: 422rpx;
+        .img {
+          width: 27rpx;
+          height: 32rpx;
         }
 
-    }
+        .text {
+          font-size: 26rpx;
+          color: rgba(0, 0, 0, 0.74);
+        }
+      }
 
-    .workFooter {
-        margin-top: 15rpx;
+      .follow {
         display: flex;
-        justify-content: space-between;
         align-items: center;
-        padding: 14rpx 20rpx 30rpx;
-
-        .mangeL-box {
-            display: flex;
-            align-items: center;
-            margin-right: 30rpx;
-
-            .icon {
-                width: 44rpx;
-                height: 44rpx;
-            }
-
-            .icon-name {
-                margin-left: 8rpx;
-                font-size: 28rpx;
-            }
+        justify-content: center;
+        width: 140rpx;
+        font-size: 24rpx;
+        padding: 6rpx 0rpx;
+        border-radius: 50rpx;
+        border: 1rpx solid #1BC665;
+        color: #1BC665;
+
+        .character {
+          width: 22rpx;
+          height: 22rpx;
+          margin-right: 6rpx;
         }
+      }
+
+      .isFans {
+        border: 1rpx solid #969696;
+        color: #969696;
+      }
+
+      .pkNum {
+        color: #30C866;
+        font-size: 44rpx;
+        margin-right: 20rpx;
+      }
+    }
+  }
+
+  .workContent {
+    font-size: 0px;
+
+    .videoBox {
+      position: relative;
+      width: 100%;
+      height: 422rpx;
+
+      .maskBg {
+        position: absolute;
+        top: 0px;
+        left: 0px;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0, 0, 0, 0.5);
+      }
+
+      .maskImg {
+        z-index: 10;
+        width: 215rpx;
+        height: 215rpx;
+        position: absolute;
+        top: 0px;
+        right: 0px;
+        left: 0px;
+        bottom: 0px;
+        margin: auto;
+      }
+
+      .play {
+        position: absolute;
+        left: 50%;
+        top: 40%;
+        width: 90rpx;
+        height: 90rpx;
+        transform: translate(-50%);
+      }
+
+      .cover {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    .video {
+      width: 100%;
+      height: 422rpx;
     }
 
-    .toReading {
-        width: 166rpx;
-        margin: 0 auto;
+    .audioBox {
+      position: relative;
+      width: 100%;
+      height: 208rpx;
+      overflow: hidden;
+
+      .audioBg {
+        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 {
+        position: absolute;
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        margin: auto;
+        width: 220rpx;
+        height: 174rpx;
+        border-radius: 20rpx;
+        background-color: rgba(0, 0, 0, 0.3);
         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%);
-        box-shadow: 0 4rpx 10rpx 0 rgba(50, 197, 255, 0.46);
 
-        .reading {
-            width: 24rpx;
-            height: 32rpx;
+        .audioPlayBg {
+          width: 150rpx;
+          height: 150rpx;
+        }
+
+        .audioPlayZhen {
+          position: absolute;
+          right: 30rpx;
+          top: 16rpx;
+          width: 32rpx;
+          height: 40rpx;
         }
 
-        .reading-text {
-            color: white;
-            font-size: 30rpx;
-            margin-left: 12rpx;
+        .cover {
+          position: absolute;
+          width: 130rpx;
+          height: 130rpx;
+          border-radius: 50%;
         }
+      }
+    }
+  }
+
+  .workFooter {
+    margin-top: 15rpx;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 14rpx 20rpx 30rpx;
+
+    .mangeL-box {
+      display: flex;
+      align-items: center;
+      margin-right: 30rpx;
+
+      .icon {
+        width: 44rpx;
+        height: 44rpx;
+      }
+
+      .icon-name {
+        margin-left: 8rpx;
+        font-size: 28rpx;
+      }
+    }
+  }
+
+  .toReading {
+    width: 166rpx;
+    margin: 0 auto;
+    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%);
+    box-shadow: 0 4rpx 10rpx 0 rgba(50, 197, 255, 0.46);
+
+    .reading {
+      width: 24rpx;
+      height: 32rpx;
+    }
+
+    .reading-text {
+      color: white;
+      font-size: 30rpx;
+      margin-left: 12rpx;
     }
+  }
 }

components/videoPreview/index.wxml

@@ -37,7 +37,8 @@
       </view>
     </view>
   </view>
-  <view class="workContent">
+  <!-- 视频 -->
+  <view class="workContent" wx:if="{{else}}">
     <!-- 审核中遮罩 -->
     <view class="videoBox" wx:if="{{videoInfoCopy.userRead.status=='CHECK'&&videoInfoCopy.userRead.id!=currentId}}">
       <view class="maskBg"></view>
@@ -55,6 +56,18 @@
       src="{{videoInfoCopy.userRead.videoPath}}" autoplay="true" object-fit="contain">
     </video>
   </view>
+  <!-- 音频 -->
+  <view class="workContent">
+    <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" />
+        <image src="/static/zhen.png" class="audioPlayZhen" />
+        <image src="{{videoInfoCopy.user.avatar}}" class="cover" mode="" />
+      </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" />

components/videoPreview/index.wxss

@@ -121,6 +121,57 @@
   width: 100%;
   height: 422rpx;
 }
+.work .workContent .audioBox {
+  position: relative;
+  width: 100%;
+  height: 208rpx;
+  overflow: hidden;
+}
+.work .workContent .audioBox .audioBg {
+  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: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  margin: auto;
+  width: 220rpx;
+  height: 174rpx;
+  border-radius: 20rpx;
+  background-color: rgba(0, 0, 0, 0.3);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.work .workContent .audioBox .audioPlay .audioPlayBg {
+  width: 150rpx;
+  height: 150rpx;
+}
+.work .workContent .audioBox .audioPlay .audioPlayZhen {
+  position: absolute;
+  right: 30rpx;
+  top: 16rpx;
+  width: 32rpx;
+  height: 40rpx;
+}
+.work .workContent .audioBox .audioPlay .cover {
+  position: absolute;
+  width: 130rpx;
+  height: 130rpx;
+  border-radius: 50%;
+}
 .work .workFooter {
   margin-top: 15rpx;
   display: flex;