提交发送语音

pages/conversation/chating/components/MessageItem/TextMessageRender.vue

@@ -20,7 +20,8 @@ export default {
   },
   computed: {
     getContent() {
-      return parseBr(this.message.textElem?.content);
+      console.log(this.message);
+      return parseBr(this.message.textElem.content);
     },
   },
   data() {

pages/conversation/chating/components/MessageItem/VoiceMessageRender.vue

@@ -0,0 +1,97 @@
+<template>
+  <view class="voice-message" @click="playVoice">
+    <image
+      :src="isPlaying ? audioIcon : recordIcon"
+      class="audio-icon flipped"
+      mode="aspectFit"
+    />
+    <text class="duration">{{ durationText }}</text>
+  </view>
+</template>
+
+<script>
+export default {
+  props: {
+    source: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    durationText() {
+      const d = this.source.soundElem && this.source.soundElem.duration;
+      return d ? `${d}''` : '';
+    }
+  },
+  data() {
+    return {
+      innerAudioContext: null,
+      isPlaying: false,
+      audioIcon: '/static/images/chating_footer_audio.png',
+      recordIcon: '/static/images/chating_footer_recording.png'
+    };
+  },
+  methods: {
+    getFixedSourceUrl(url) {
+      // 如果 url 以 http://47.117.71.33/api/object/ 开头，则替换为带端口的
+      if (typeof url === 'string' && url.startsWith('http://47.117.71.33/api/object/')) {
+        return url.replace('http://47.117.71.33/api/object/', 'http://47.117.71.33:15219/api/object/');
+      }
+      return url;
+    },
+    playVoice() {
+      if (this.innerAudioContext) {
+        this.innerAudioContext.stop();
+        this.innerAudioContext.destroy();
+        this.innerAudioContext = null;
+      }
+      this.innerAudioContext = uni.createInnerAudioContext();
+      const rawUrl = this.source.soundElem && this.source.soundElem.sourceUrl || '';
+      this.innerAudioContext.src = this.getFixedSourceUrl(rawUrl);
+      this.isPlaying = true;
+      this.innerAudioContext.play();
+      this.innerAudioContext.onEnded(() => {
+        this.innerAudioContext.destroy();
+        this.innerAudioContext = null;
+        this.isPlaying = false;
+      });
+      this.innerAudioContext.onStop(() => {
+        this.isPlaying = false;
+      });
+      this.innerAudioContext.onError(() => {
+        this.isPlaying = false;
+      });
+    }
+  },
+  beforeDestroy() {
+    if (this.innerAudioContext) {
+      this.innerAudioContext.destroy();
+      this.innerAudioContext = null;
+    }
+  }
+};
+</script>
+
+<style scoped>
+.voice-message {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  background: #f5f6fa;
+  border-radius: 18px;
+  padding: 8px 16px;
+  margin: 4px 0;
+}
+.audio-icon {
+  width: 28px;
+  height: 28px;
+}
+.flipped {
+  transform: rotate(180deg);
+}
+.duration {
+  margin-left: 8px;
+  color: #666;
+  font-size: 15px;
+}
+</style> 

pages/conversation/chating/components/MessageItem/index.vue

@@ -37,12 +37,36 @@
           </view>
         </view>
         <view class="message_content_wrap message_content_wrap_shadow">
-          <text-message-render
-            v-if="showTextRender"
-            :message="source"
-          />
-          <media-message-render v-else-if="showMediaRender" :message="source" />
-          <error-message-render v-else />
+          <template v-if="source.contentType === 101">
+            <TextMessageRender :message="source" />
+          </template>
+          <template v-else-if="source.contentType === 102">
+            <MediaMessageRender :source="source" />
+          </template>
+          <template v-else-if="source.contentType === 103">
+            <VoiceMessageRender :source="source" />
+          </template>
+          <template v-else-if="source.contentType === 104">
+            <view style="color:#999">[暂未实现] 视频消息</view>
+          </template>
+          <template v-else-if="source.contentType === 105">
+            <view style="color:#999">[暂未实现] 文件消息</view>
+          </template>
+          <template v-else-if="source.contentType === 106">
+            <view style="color:#999">[暂未实现] @消息</view>
+          </template>
+          <template v-else-if="source.contentType === 109">
+            <view style="color:#999">[暂未实现] 位置消息</view>
+          </template>
+          <template v-else-if="source.contentType === 110">
+            <view style="color:#999">[暂未实现] 自定义消息</view>
+          </template>
+          <template v-else-if="source.contentType === 1400">
+            <view style="color:#999">[暂未实现] 系统通知</view>
+          </template>
+          <template v-else>
+            <ErrorMessageRender :source="source" />
+          </template>
         </view>
       </view>
     </view>
@@ -68,6 +92,7 @@ import MyAvatar from "@/components/MyAvatar/index.vue";
 import TextMessageRender from "./TextMessageRender.vue";
 import MediaMessageRender from "./MediaMessageRender.vue";
 import ErrorMessageRender from "./ErrorMessageRender.vue";
+import VoiceMessageRender from './VoiceMessageRender.vue'
 import { noticeMessageTypes } from "@/constant";
 import { tipMessaggeFormat, formatMessageTime } from "@/util/imCommon";
 
@@ -81,6 +106,7 @@ export default {
     TextMessageRender,
     MediaMessageRender,
     ErrorMessageRender,
+    VoiceMessageRender
   },
   props: {
     source: Object,