调整聊天窗口

components/im/imAUDIO.vue

@@ -1,8 +1,10 @@
 <template>
-    <view class="im--audio" :class="guest ? 'right': 'left'">
-        <image v-if="!guest" class="audio-mp3" src="@/static/icon/audio_green.png" mode="widthFix"></image>
-        <text class="audio-text">"60"</text>
-        <image v-if="guest" class="audio-mp3" src="@/static/icon/audio_white.png" mode="widthFix"></image>
+    <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>
+            <image v-if="guest" class="audio-mp3" src="@/static/icon/audio_white.png" mode="widthFix"></image>
+        </view>
     </view>
 </template>
 
@@ -11,8 +13,13 @@
         name:"im",
         props:{
             msg : {
-                type   : String,
-                default: 'https://images.pexels.com/photos/10266655/pexels-photo-10266655.jpeg'
+                type   : Object,
+                default: () => {
+                    return {
+                        src: "",
+                        time: "20"
+                    }
+                }
             },
             guest: {
                 type: Boolean,
@@ -20,10 +27,18 @@
             }
         },
         methods:{
-            openImg(){
-                uni.previewImage({
-                    urls    : [this.msg],
-                    current : 1
+            // 播放语音消息
+            onPlayMsg() {
+                let innerAudioContext = uni.createInnerAudioContext()
+                innerAudioContext.src = this.audioSrc
+                if (this.audioContextPaused) {
+                    innerAudioContext.play()
+                    this.audioContextPaused = false
+                    return
+                }
+                innerAudioContext.stop()
+                innerAudioContext.onStop(resStop => {
+                    this.audioContextPaused = true
                 })
             }
         }