merge

components/im/imAUDIO.vue

@@ -2,7 +2,7 @@
     <view>
         <view class="im--audio" :class="guest ? 'right': 'left'" @click="onPlayMsg">
             <image v-if="!guest" class="audio-mp3" src="@/static/icon/audio_green.png" mode="widthFix"></image>
-            <text class="audio-text">"{{msg.time}}"</text>
+            <text class="audio-text">"{{msg.duration}}"</text>
             <image v-if="guest" class="audio-mp3" src="@/static/icon/audio_white.png" mode="widthFix"></image>
         </view>
     </view>
@@ -10,14 +10,16 @@
 
 <script>
     export default {
-        name:"im",
-        props:{
-            msg : {
-                type   : Object,
+        name: "im",
+        props: {
+            msg: {
+                type: Object,
                 default: () => {
                     return {
-                        src: "",
-                        time: "20"
+                        local: '',
+                        remote: '',
+                        objectName: '',
+                        duration: 0
                     }
                 }
             },
@@ -26,44 +28,29 @@
                 default: true
             }
         },
-		data(){
-			return {
-				audioContextPaused: true
-			}
-		},
-        methods:{
+        methods: {
             // 播放语音消息
             onPlayMsg() {
-				
-				console.log(this.msg.remote)
-				
-				uni.downloadFile({
-					url: this.msg.remote,
-					success: res=> {
-						console.log(res)
-					}
-				})
-				
-				
-                let innerAudioContext = uni.createInnerAudioContext()
-                innerAudioContext.src = ""
-                if (this.audioContextPaused) {
-                    innerAudioContext.play()
-                    this.audioContextPaused = false
-					
-					innerAudioContext.onPlay(res => {
-						console.log('开始播放')
-					})
-					
-					innerAudioContext.onError(err => {
-						console.log(err)
-					})
-					
-                    return
-                }
-                innerAudioContext.stop()
-                innerAudioContext.onStop(resStop => {
-                    this.audioContextPaused = true
+                uni.downloadFile({
+                    url: this.msg.remote,
+                    success: (res) => {
+                        if (res.statusCode === 200) {
+                            let innerAudioContext = uni.createInnerAudioContext()
+                            innerAudioContext.src = res.tempFilePath
+                            if (this.audioContextPaused) {
+                                innerAudioContext.play()
+                                this.audioContextPaused = false
+                                return
+                            }
+                            innerAudioContext.stop()
+                            innerAudioContext.onStop(resStop => {
+                                this.audioContextPaused = true
+                            })
+                            innerAudioContext.onError(err => {
+                                console.log(err);
+                            })
+                        }
+                    }
                 })
             }
         }
@@ -71,7 +58,7 @@
 </script>
 
 <style scoped>
-    .im--audio{
+    .im--audio {
         flex-direction: row;
         justify-content: space-between;
         align-items: center;
@@ -79,27 +66,33 @@
         width: 170rpx;
         padding: 0 20rpx;
         box-sizing: border-box;
-    },
-    .im--audio.left{
+    }
+
+    ,
+    .im--audio.left {
         border-radius: 0 20rpx 20rpx 20rpx;
         background: white;
     }
-    
-    .im--audio.right{
+
+    .im--audio.right {
         border-radius: 20rpx 0 20rpx 20rpx;
         background: #34CE98;
     }
-    .audio-mp3{
+
+    .audio-mp3 {
         width: 38rpx;
         height: 38rpx;
     }
-    .audio-text{
+
+    .audio-text {
         font-size: 30rpx;
     }
-    .im--audio.left .audio-text{
+
+    .im--audio.left .audio-text {
         color: #333;
     }
-    .im--audio.right .audio-text{
+
+    .im--audio.right .audio-text {
         color: white;
     }
 </style>