From ad33895b6dd772159c49b7b6712ef15b78e1256f Mon Sep 17 00:00:00 2001
From: 86156 <823267011@qq.com>
Date: Fri, 4 Jul 2025 22:34:07 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4=E5=8F=91=E9=80=81=E8=AF=AD?=
 =?UTF-8?q?=E9=9F=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .idea/vcs.xml                                 |   4 +-
 App.vue                                       |   1 -
 components/EmojiPicker/index.vue              |  55 +++
 .../components/ChatingFooter/index.vue        | 454 +++++++++++++++---
 .../chating/components/ChatingList.vue        |   8 +-
 .../MessageItem/TextMessageRender.vue         |   3 +-
 .../MessageItem/VoiceMessageRender.vue        |  97 ++++
 .../chating/components/MessageItem/index.vue  |  38 +-
 .../components/ConversationItem.vue           |   3 +
 util/imCommon.js                              |   2 +
 10 files changed, 571 insertions(+), 94 deletions(-)
 create mode 100644 components/EmojiPicker/index.vue
 create mode 100644 pages/conversation/chating/components/MessageItem/VoiceMessageRender.vue

diff --git a/.idea/vcs.xml b/.idea/vcs.xml
index d843f34..94a25f7 100644
--- a/.idea/vcs.xml
+++ b/.idea/vcs.xml
@@ -1,4 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
-  <component name="VcsDirectoryMappings" defaultProject="true" />
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
 </project>
\ No newline at end of file
diff --git a/App.vue b/App.vue
index 856abbd..424dcbb 100644
--- a/App.vue
+++ b/App.vue
@@ -365,7 +365,6 @@ export default {
             isLogStandardOutput: true,
             isExternalExtensions: false,
           });
-		  console.log(flag);
           if (!flag) {
             plus.navigator.closeSplashscreen();
             uni.$u.toast("初始化IMSDK失败！");
diff --git a/components/EmojiPicker/index.vue b/components/EmojiPicker/index.vue
new file mode 100644
index 0000000..13f936f
--- /dev/null
+++ b/components/EmojiPicker/index.vue
@@ -0,0 +1,55 @@
+<template>
+  <view class="emoji-picker">
+    <view class="emoji-list">
+      <text
+        v-for="(emoji, idx) in emojis"
+        :key="idx"
+        class="emoji-item"
+        @click="selectEmoji(emoji)"
+      >{{ emoji }}</text>
+    </view>
+  </view>
+</template>
+
+<script>
+import emojis from '@/common/emojis.js';
+export default {
+  name: 'EmojiPicker',
+  data() {
+    return {
+      emojis
+    };
+  },
+  methods: {
+    selectEmoji(emoji) {
+      this.$emit('select', emoji);
+    }
+  }
+};
+</script>
+
+<style scoped>
+.emoji-picker {
+  background: #fff;
+  border-radius: 12rpx;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+  padding: 16rpx;
+  width: 100%;
+}
+.emoji-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12rpx;
+}
+.emoji-item {
+  font-size: 48rpx;
+  padding: 12rpx;
+  cursor: pointer;
+  user-select: none;
+  transition: background 0.2s;
+  border-radius: 6rpx;
+}
+.emoji-item:active {
+  background: #f0f2f6;
+}
+</style> 
\ No newline at end of file
diff --git a/pages/conversation/chating/components/ChatingFooter/index.vue b/pages/conversation/chating/components/ChatingFooter/index.vue
index 1dffb8e..16806d7 100644
--- a/pages/conversation/chating/components/ChatingFooter/index.vue
+++ b/pages/conversation/chating/components/ChatingFooter/index.vue
@@ -4,59 +4,119 @@
       <view class="chat_footer">
 
         <view class="footer_action_area">
-
-        <view class="input_content">
-          <CustomEditor
-            class="custom_editor"
-            ref="customEditor"
-            @ready="editorReady"
-            @focus="editorFocus"
-            @blur="editorBlur"
-            @input="editorInput"
+          <image v-if="inputBox"
+              @click.prevent="updateInput"
+              src="@/static/images/chating_footer_recording.png"
+              alt=""
+              srcset=""
           />
+
+		  <image v-if="!inputBox"
+              @click.prevent="updateInput"
+              src="@/static/images/chating_footer_audio_recording.png"
+              alt=""
+              srcset=""
+          />
+        </view>
+
+        <view class="input_content" v-if="inputBox">
+          <CustomEditor class="custom_editor" ref="customEditor" @ready="editorReady" @focus="editorFocus"
+                        @blur="editorBlur" @input="editorInput"/>
+        </view>
+
+        <view class="input_content"
+              v-if="!inputBox"
+              style="position:relative;"
+        >
+          <!-- 录音提示区域 -->
+          <view v-if="isRecording"
+                style="position:absolute;left:50%;top:-120rpx;transform:translateX(-50%);z-index:10;display:flex;flex-direction:column;align-items:center;">
+            <view :style="{
+              background: willCancel ? 'rgba(255,80,80,0.95)' : 'rgba(0,0,0,0.85)',
+              color: '#fff',
+              borderRadius: '12rpx',
+              padding: '18rpx 32rpx',
+              fontSize: '28rpx',
+              minWidth: '260rpx',
+              textAlign: 'center',
+              marginBottom: '10rpx',
+            }">
+              <text v-if="willCancel">松开手指，取消发送</text>
+              <text v-else>正在讲话，已录制 {{recordingTime}} 秒，松开发送</text>
+            </view>
+          </view>
+          <!-- 蒙版 -->
+          <view v-if="isRecording" style="position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,0.08);z-index:5;border-radius:16rpx;"></view>
+          <button
+            class="record_btn"
+            @touchstart="startRecord"
+            @touchend="stopRecord"
+            @touchcancel="cancelRecord"
+            @touchmove="moveRecord"
+            style="width:100%;height:100%;background:transparent;border:none;outline:none;display:flex;align-items:center;justify-content:center;z-index:20;position:relative;"
+          >
+            <text v-if="!isRecording">按住说话</text>
+            <text v-else :style="willCancel ? 'color:#ff5050;' : 'color:#4a9cfc;'">{{ willCancel ? '松开手指，取消发送' : '正在说话，松开发送' }}</text>
+          </button>
         </view>
 
         <view class="footer_action_area">
-<!--          <image-->
-<!--            v-show="!hasContent"-->
-<!--            @click.prevent="updateActionBar"-->
-<!--            src="@/static/images/chating_footer_add.png"-->
-<!--            alt=""-->
-<!--            srcset=""-->
-<!--          />-->
           <image
-            v-show="hasContent"
-            @touchend.prevent="sendTextMessage"
-            src="@/static/images/send_btn.png"
+            class="emoji_action"
+            v-if="inputBox && !showEmojiPicker"
+            @click.prevent="toggleEmojiPicker"
+            src="@/static/images/chating_footer_emoji.png"
             alt=""
             srcset=""
           />
+          <image
+            class="emoji_action"
+            v-if="inputBox && showEmojiPicker"
+            @click.prevent="closeEmojiAndFocusInput"
+            src="@/static/images/chating_footer_audio_recording.png"
+            alt=""
+            srcset=""
+          />
+          <image
+              v-show="!hasContent"
+              @click.prevent="updateActionBar"
+              src="@/static/images/chating_footer_add.png"
+              alt=""
+              srcset=""
+          />
+          <image v-show="hasContent" @touchend.prevent="sendTextMessage" src="@/static/images/send_btn.png"
+                 alt="" srcset=""/>
         </view>
       </view>
-      <chating-action-bar
-        @sendMessage="sendMessage"
-        @prepareMediaMessage="prepareMediaMessage"
-        v-show="actionBarVisible"
-      />
-      <u-action-sheet
-        :safeAreaInsetBottom="true"
-        round="12"
-        :actions="actionSheetMenu"
-        @select="selectClick"
-        :closeOnClickOverlay="true"
-        :closeOnClickAction="true"
-        :show="showActionSheet"
-        @close="showActionSheet = false"
-      >
+      <chating-action-bar @sendMessage="sendMessage" @prepareMediaMessage="prepareMediaMessage"
+                          v-show="actionBarVisible"/>
+      <u-action-sheet :safeAreaInsetBottom="true" round="12" :actions="actionSheetMenu" @select="selectClick"
+                      :closeOnClickOverlay="true" :closeOnClickAction="true" :show="showActionSheet"
+                      @close="showActionSheet = false">
       </u-action-sheet>
+      <!-- Emoji 选择面板 -->
+      <view v-if="showEmojiPicker">
+        <view class="emoji-mask" @touchstart="showEmojiPicker = false" style="position:fixed;left:0;top:0;width:100vw;height:100vh;z-index:998;"></view>
+        <view class="emoji-picker" style="position:relative;z-index:999;">
+          <EmojiPicker @select="onEmojiSelect" />
+        </view>
+      </view>
     </view>
   </view>
 </template>
 
 <script>
-import { mapGetters, mapActions } from "vuex";
-import { getPurePath, html2Text } from "@/util/common";
-import { offlinePushInfo } from "@/util/imCommon";
+import {
+  mapGetters,
+  mapActions
+} from "vuex";
+import {
+  getPurePath,
+  html2Text
+} from "@/util/common";
+import {
+  offlinePushInfo
+} from "@/util/imCommon";
 import {
   ChatingFooterActionTypes,
   UpdateMessageTypes,
@@ -69,15 +129,15 @@ import IMSDK, {
 import UParse from "@/components/gaoyia-parse/parse.vue";
 import CustomEditor from "./CustomEditor.vue";
 import ChatingActionBar from "./ChatingActionBar.vue";
+import EmojiPicker from '@/components/EmojiPicker/index.vue';
 
 const needClearTypes = [MessageType.TextMessage];
 
-const albumChoose = [
-  {
-    name: "图片",
-    type: ChatingFooterActionTypes.Album,
-    idx: 0,
-  },
+const albumChoose = [{
+  name: "图片",
+  type: ChatingFooterActionTypes.Album,
+  idx: 0,
+},
   {
     name: "拍照",
     type: ChatingFooterActionTypes.Camera,
@@ -90,18 +150,28 @@ export default {
     CustomEditor,
     ChatingActionBar,
     UParse,
+    EmojiPicker,
   },
   props: {
     footerOutsideFlag: Number,
   },
   data() {
     return {
+      inputBox: true,
       customEditorCtx: null,
       inputHtml: "",
       actionBarVisible: false,
       isInputFocus: false,
       actionSheetMenu: [],
       showActionSheet: false,
+      isRecording: false,
+      willCancel: false,
+      recordingTime: 0,
+      recordingTimer: null,
+      showEmojiPicker: false,
+      recorderManager: null,
+      recordFilePath: '',
+      recordFileDuration: 0,
     };
   },
   computed: {
@@ -121,21 +191,77 @@ export default {
   },
   mounted() {
     this.setKeyboardListener();
+    document.addEventListener('plusready', function() {
+      // plus 相关代码
+    });
   },
   beforeDestroy() {
     this.disposeKeyboardListener();
   },
   methods: {
+    updateInput() {
+      this.inputBox = !this.inputBox;
+      this.showEmojiPicker = false;
+    },
+    startRecord(e) {
+      this.isRecording = true;
+      this.willCancel = false;
+      this.recordingTime = 0;
+      if (this.recordingTimer) clearInterval(this.recordingTimer);
+      this.recordingTimer = setInterval(() => {
+        this.recordingTime++;
+      }, 1000);
+      // 录音开始
+      if (!this.recorderManager) {
+        this.recorderManager = uni.getRecorderManager();
+        this.recorderManager.onStop(this.onRecordStop);
+      }
+      this.recordFilePath = '';
+      this.recordFileDuration = 0;
+      this.recorderManager.start({ format: 'mp3' });
+    },
+    stopRecord(e) {
+      if (this.recordingTimer) clearInterval(this.recordingTimer);
+      this.recordingTimer = null;
+      this.isRecording = false;
+      if (this.recorderManager) {
+        this.recorderManager.stop();
+      }
+      this._startY = null;
+    },
+    cancelRecord(e) {
+      if (this.recordingTimer) clearInterval(this.recordingTimer);
+      this.recordingTimer = null;
+      this.isRecording = false;
+      this.willCancel = false;
+      this.recordingTime = 0;
+      if (this.recorderManager) {
+        this.recorderManager.stop();
+      }
+      this._startY = null;
+    },
+    moveRecord(e) {
+      // 判断手指是否上滑，通常通过e.touches[0].clientY与起始Y比较
+      if (!this.isRecording) return;
+      const touch = e.touches[0];
+      if (!this._startY && touch) {
+        this._startY = touch.clientY;
+      }
+      if (touch && this._startY) {
+        // 上滑距离大于40px则判定为取消
+        this.willCancel = (this._startY - touch.clientY) > 40;
+      }
+    },
+
     ...mapActions("message", ["pushNewMessage", "updateOneMessage"]),
     async createTextMessage() {
       let message = "";
       const text = html2Text(this.inputHtml);
       message = await IMSDK.asyncApi(
-            IMMethods.CreateTextMessage,
-            IMSDK.uuid(),
-            text
-          );
-          console.log(message);
+          IMMethods.CreateTextMessage,
+          IMSDK.uuid(),
+          text
+      );
       return message;
     },
     async sendTextMessage() {
@@ -155,28 +281,33 @@ export default {
         message,
         offlinePushInfo,
       })
-        .then(({ data }) => {
-          this.updateOneMessage({
-            message: data,
-            isSuccess: true,
-          });
-        })
-        .catch(({ data, errCode, errMsg }) => {
-          this.updateOneMessage({
-            message: data,
-            type: UpdateMessageTypes.KeyWords,
-            keyWords: [
-              {
+          .then(({
+                   data
+                 }) => {
+            this.updateOneMessage({
+              message: data,
+              isSuccess: true,
+            });
+          })
+          .catch(({
+                    data,
+                    errCode,
+                    errMsg
+                  }) => {
+            this.updateOneMessage({
+              message: data,
+              type: UpdateMessageTypes.KeyWords,
+              keyWords: [{
                 key: "status",
                 value: MessageStatus.Failed,
               },
-              {
-                key: "errCode",
-                value: errCode,
-              },
-            ],
+                {
+                  key: "errCode",
+                  value: errCode,
+                },
+              ],
+            });
           });
-        });
     },
 
     // action
@@ -187,6 +318,7 @@ export default {
     },
     updateActionBar() {
       this.actionBarVisible = !this.actionBarVisible;
+      this.showEmojiPicker = false;
     },
     editorReady(e) {
       this.customEditorCtx = e.context;
@@ -194,6 +326,7 @@ export default {
     },
     editorFocus() {
       this.isInputFocus = true;
+      this.showEmojiPicker = false;
       this.$emit("scrollToBottom");
     },
     editorBlur() {
@@ -205,29 +338,67 @@ export default {
     prepareMediaMessage(type) {
       if (type === ChatingFooterActionTypes.Album) {
         this.actionSheetMenu = [...albumChoose];
+        this.showActionSheet = true;
+      } else if (type === ChatingFooterActionTypes.File) {
+        this.chooseFileAndSend();
       }
-      this.showActionSheet = true;
+    },
+    async chooseFileAndSend() {
+      if (!uni.chooseMessageFile) {
+        return;
+      }
+      uni.chooseMessageFile({
+        count: 1,
+        type: 'file',
+        success: async (res) => {
+          const file = res.tempFiles[0];
+          try {
+            const nameIdx = file.name.lastIndexOf("/") + 1;
+            const fileName = file.name.slice(nameIdx);
+            const typeIdx = file.name.lastIndexOf(".") + 1;
+            const fileType = file.name.slice(typeIdx);
+            const { data: { url } } = await IMSDK.asyncApi(IMMethods.UploadFile, IMSDK.uuid(), {
+              filepath: file.path,
+              name: fileName,
+              contentType: fileType,
+              uuid: IMSDK.uuid(),
+            });
+            // 创建文件消息
+            const message = await IMSDK.asyncApi(IMMethods.CreateFileMessage, IMSDK.uuid(), {
+              fileName: fileName,
+              fileSize: file.size,
+              sourceUrl: url,
+            });
+            this.sendMessage(message);
+          } catch (e) {
+          }
+        },
+        fail: function (err) {
+        },
+      });
     },
 
     // from comp
     batchCreateImageMesage(paths) {
       paths.forEach(async (path) => {
         const message = await IMSDK.asyncApi(
-          IMMethods.CreateImageMessageFromFullPath,
-          IMSDK.uuid(),
-          getPurePath(path)
+            IMMethods.CreateImageMessageFromFullPath,
+            IMSDK.uuid(),
+            getPurePath(path)
         );
         this.sendMessage(message);
       });
     },
-    selectClick({ idx }) {
+    selectClick({
+                  idx
+                }) {
       if (idx === 0) {
         this.chooseOrShotImage(["album"]).then((paths) =>
-          this.batchCreateImageMesage(paths)
+            this.batchCreateImageMesage(paths)
         );
       } else {
         this.chooseOrShotImage(["camera"]).then((paths) =>
-          this.batchCreateImageMesage(paths)
+            this.batchCreateImageMesage(paths)
         );
       }
     },
@@ -237,11 +408,12 @@ export default {
           count: 9,
           sizeType: ["compressed"],
           sourceType,
-          success: function ({ tempFilePaths }) {
+          success: function ({
+                               tempFilePaths
+                             }) {
             resolve(tempFilePaths);
           },
           fail: function (err) {
-            console.log(err);
             reject(err);
           },
         });
@@ -249,7 +421,9 @@ export default {
     },
 
     // keyboard
-    keyboardChangeHander({ height }) {
+    keyboardChangeHander({
+                           height
+                         }) {
       if (height > 0) {
         if (this.actionBarVisible) {
           this.actionBarVisible = false;
@@ -262,6 +436,116 @@ export default {
     disposeKeyboardListener() {
       uni.offKeyboardHeightChange(this.keyboardChangeHander);
     },
+    toggleEmojiPicker() {
+      this.showEmojiPicker = !this.showEmojiPicker;
+      if (!this.showEmojiPicker && this.$refs.customEditor && this.$refs.customEditor.editorCtx) {
+        // 关闭emoji面板时再focus
+        this.$refs.customEditor.editorCtx.focus();
+      }
+    },
+    closeEmojiAndFocusInput() {
+      this.showEmojiPicker = false;
+      // 只在这里主动focus
+      if (this.$refs.customEditor && this.$refs.customEditor.editorCtx) {
+        this.$refs.customEditor.editorCtx.focus();
+      }
+    },
+    onEmojiSelect(emoji) {
+      this.inputHtml += emoji;
+      if (this.$refs.customEditor && this.$refs.customEditor.editorCtx) {
+        this.$refs.customEditor.editorCtx.setContents({
+          html: this.inputHtml
+        });
+      }
+      // 不做任何focus/blur
+    },
+    async onRecordStop(res) {
+      let tempFilePath = res.tempFilePath;
+      let fileName = tempFilePath.split('/').pop();
+      let fileType = fileName.split('.').pop();
+      let uuid = IMSDK.uuid();
+      let duration = this.recordingTime;
+      if (!duration || isNaN(duration) || duration < 1) {
+        this.recordingTime = 0;
+        return;
+      }
+      // 先保存到本地
+      uni.saveFile({
+        tempFilePath,
+        success: (saveRes) => {
+          let savedFilePath = saveRes.savedFilePath;
+          // 用 plus.io 转换为原生绝对路径
+          if (typeof plus !== 'undefined') {
+            plus.io.resolveLocalFileSystemURL(savedFilePath, (entry) => {
+              IMSDK.asyncApi('uploadFile', uuid, {
+                name: fileName,
+                contentType: fileType,
+                uuid: uuid,
+                filepath: entry.fullPath
+              })
+              .then(({ data }) => {
+                let sourceUrl = data.url;
+                IMSDK.asyncApi('createSoundMessageByURL', IMSDK.uuid(), {
+                  uuid: uuid,
+                  soundPath: entry.fullPath,
+                  sourceUrl: sourceUrl,
+                  dataSize: res.fileSize || 0,
+                  duration: duration,
+                  soundType: fileType
+                })
+                .then((message) => {
+                  IMSDK.asyncApi('sendMessageNotOss', IMSDK.uuid(), {
+                    recvID: this.storeCurrentConversation.userID,
+                    groupID: this.storeCurrentConversation.groupID,
+                    message: message,
+                    offlinePushInfo: {
+                      title: '你有新消息',
+                      desc: '新消息',
+                      ex: '',
+                      iOSPushSound: '+1',
+                      iOSBadgeCount: true,
+                    }
+                  })
+                  .then(({ data }) => {
+                    // 1. 本地新增消息
+                    this.pushNewMessage(message);
+                    // 2. 更新消息状态
+                    this.updateOneMessage({
+                      message: data,
+                      isSuccess: true,
+                    });
+                    this.$emit("scrollToBottom");
+                  })
+                  .catch(({ errCode, errMsg }) => {
+                    // 发送失败时也要更新消息状态为失败
+                    this.updateOneMessage({
+                      message: message,
+                      type: UpdateMessageTypes.KeyWords,
+                      keyWords: [
+                        { key: "status", value: MessageStatus.Failed },
+                        { key: "errCode", value: errCode },
+                      ],
+                    });
+                  });
+                })
+                .catch(() => {
+                  // 忽略错误提示
+                });
+              })
+              .catch(() => {
+                // 忽略错误提示
+              });
+            }, () => {
+              // 忽略路径转换失败
+            });
+          }
+        },
+        fail: () => {
+          // 忽略保存失败
+        }
+      });
+      this.recordingTime = 0;
+    },
   },
 };
 </script>
@@ -298,7 +582,7 @@ export default {
     min-height: 30px;
     max-height: 120px;
     margin: 0 24rpx;
-    border-radius: 8rpx;
+    border-radius: 16rpx;
     position: relative;
 
     .record_btn {
@@ -350,4 +634,18 @@ export default {
     color: #fff;
   }
 }
-</style>
+
+.emoji-mask {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100vw;
+  height: 100vh;
+  background: transparent;
+  z-index: 998;
+}
+.emoji-picker {
+  position: relative;
+  z-index: 999;
+}
+</style>
\ No newline at end of file
diff --git a/pages/conversation/chating/components/ChatingList.vue b/pages/conversation/chating/components/ChatingList.vue
index bc773a9..cb8a73e 100644
--- a/pages/conversation/chating/components/ChatingList.vue
+++ b/pages/conversation/chating/components/ChatingList.vue
@@ -140,10 +140,7 @@ export default {
         return;
       }
 
-      if (!isInit) {
-        this.withAnimation = true;
-        setTimeout(() => (this.withAnimation = false), 100);
-      }
+      this.withAnimation = true;
 
       this.$nextTick(() => {
         uni
@@ -151,14 +148,11 @@ export default {
           .in(this)
           .select("#scroll_wrap")
           .boundingClientRect((res) => {
-            // let top = res.height - this.scrollViewHeight;
-            // if (top > 0) {
             this.scrollTop = this.old.scrollTop
             this.$nextTick(() => this.scrollTop = res.height);
             if (isInit) {
               this.$emit("initSuccess");
             }
-            // }
           })
           .exec();
       });
diff --git a/pages/conversation/chating/components/MessageItem/TextMessageRender.vue b/pages/conversation/chating/components/MessageItem/TextMessageRender.vue
index 5161350..8ecaeda 100644
--- a/pages/conversation/chating/components/MessageItem/TextMessageRender.vue
+++ b/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() {
diff --git a/pages/conversation/chating/components/MessageItem/VoiceMessageRender.vue b/pages/conversation/chating/components/MessageItem/VoiceMessageRender.vue
new file mode 100644
index 0000000..e6be4a1
--- /dev/null
+++ b/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> 
\ No newline at end of file
diff --git a/pages/conversation/chating/components/MessageItem/index.vue b/pages/conversation/chating/components/MessageItem/index.vue
index 92934a0..19aaabb 100644
--- a/pages/conversation/chating/components/MessageItem/index.vue
+++ b/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,
diff --git a/pages/conversation/conversationList/components/ConversationItem.vue b/pages/conversation/conversationList/components/ConversationItem.vue
index b5af32e..79e7caa 100644
--- a/pages/conversation/conversationList/components/ConversationItem.vue
+++ b/pages/conversation/conversationList/components/ConversationItem.vue
@@ -48,10 +48,13 @@ export default {
   },
   computed: {
     latestMessage() {
+      
       if (this.source.latestMsg === "") return "";
       let parsedMessage;
       try {
         parsedMessage = JSON.parse(this.source.latestMsg);
+        console.log(parsedMessage);
+        
       } catch (e) {}
       if (!parsedMessage) return "";
       return getConversationContent(parsedMessage);
diff --git a/util/imCommon.js b/util/imCommon.js
index 245bd21..c56e3c8 100644
--- a/util/imCommon.js
+++ b/util/imCommon.js
@@ -128,6 +128,8 @@ export const parseMessageByType = (pmsg) => {
       return pmsg.textElem.content;
     case MessageType.PictureMessage:
       return `[图片]`;
+    case MessageType.VoiceMessage:
+      return `[语音]`;
     case MessageType.FriendAdded:
       return "你们已经是好友了，开始聊天吧~";
     case MessageType.MemberEnter: