feat: 新增瞬间支持音频

pages/tabbar/moments/moments.vue

@@ -37,13 +37,6 @@
                          :content="moment.spec.newHtml" :markdown="true" :showLineNumber="true"
                          :showLanguageName="true" :copyByLongPress="true"/>
               </view>
-                            <view class="mb-12 mt--12" v-if="moment.videos.length!==0"
-                                  style="display: flex; flex-direction: column; gap: 12rpx 0;padding: 0 24rpx; ">
-                                <video
-                                    style="width:100%;height: 400rpx;border-radius: 12rpx;"
-                                    v-for="(video,index) in moment.videos"
-                                    :key="index" :src="video.url"></video>
-                            </view>
               <view v-if="moment.images.length!==0" class="images"
                     :class="['images-'+moment.images.length]">
                 <view class="image-item"
@@ -54,7 +47,26 @@
                          @click="handlePreview(mediumIndex,moment.images)"/>
                 </view>
               </view>
-                            <view v-if="moment.spec.tags && moment.spec.tags.length!==0" class="px-20 pb-24 flex flex-wrap">
+              <view v-if="moment.audios.length!==0" class="mb-12 mt--12"
+                    style="display: flex; flex-direction: column; gap: 12rpx 0;padding: 0 24rpx;padding-right:28rpx;">
+                <audio
+                    v-for="(audio,index) in moment.audios"
+                    :controls="true"
+                    :key="index"
+                    :id="audio.url"
+                    :poster="bloggerInfo.avatar"
+                    :name="'来自' + (startConfig.title||bloggerInfo.nickname) + '的声音'"
+                    :author="bloggerInfo.nickname"
+                    :src="audio.url"></audio>
+              </view>
+              <view v-if="moment.videos.length!==0" class="mb-12 mt--12"
+                    style="display: flex; flex-direction: column; gap: 12rpx 0;padding: 0 24rpx; ">
+                <video
+                    style="width:100%;height: 400rpx;border-radius: 12rpx;"
+                    v-for="(video,index) in moment.videos"
+                    :key="index" :src="video.url"></video>
+              </view>
+              <view v-if="moment.spec.tags && moment.spec.tags.length!==0" class="mt-12 px-16 pb-24 flex flex-wrap">
                 <tm-tags
                     v-for="(tag,tagIndex) in moment.spec.tags" :key="tagIndex"
                     :color="randomTagColor()" size="m" model="text">
@@ -124,7 +136,10 @@ export default {
     },
     calcUseTagRandomColor() {
       return this.haloConfigs.pageConfig.momentConfig.useTagRandomColor
-        }
+    },
+    startConfig() {
+      return this.haloConfigs.appConfig.startConfig;
+    },
   },
 
   onLoad() {
@@ -220,6 +235,9 @@ export default {
 
               item['videos'] = item.spec.content.medium
                   .filter(x => x.type === 'VIDEO')
+
+              item['audios'] = item.spec.content.medium
+                  .filter(x => x.type === 'AUDIO')
               return item;
             })
 
@@ -322,4 +340,10 @@ export default {
     }
   }
 }
+
+::v-deep .uni-audio-default {
+  width: 100%;
+  border-radius: 12rpx;
+}
+
 </style>