企微聊天语音消息处理、企微聊天会话搜索

src/components/LemonUI/components/message/emotionDynamic.vue

@@ -16,7 +16,14 @@ export default {
 }
 </script>
 
-
-<style scoped>
-
+<style lang="stylus">
+@import '../../styles/utils/index'
++b(lemon-message-emotion-dynamic)
+  +b(lemon-message)
+    +e(content)
+      width 100px
+      height 100px
+      img
+        width 100%
+        height 100%
 </style>

src/components/LemonUI/components/message/voice.vue

@@ -5,11 +5,11 @@ export default {
   inject: ["IMUI"],
   data() {
     return {
-       
+
     };
   },
   created() {
-    
+
   },
   render() {
     return (
@@ -25,9 +25,18 @@ export default {
     );
   },
    methods: {
-      renderHtml(data){       
-        return <audio block="true" showDuration='false' duration={data.duration} controls src={data.content}  ></audio>;
-        // return <span>{props.content}&nbsp;🔈</span>;
+      renderHtml(data){
+        const {url, content} = JSON.parse(data.content)
+        return <div class="lemon-message-voice-context">
+            <audio block="true" showDuration='false' controls src={url}
+            controlslist='nodownload noplaybackrate'
+            oncontextmenu="return false"/>
+            <div class="lemon-message-voice-context-text">
+              <span>{content}</span>
+              <span class="el-icon-check lemon-message-voice-context-text-transfer">转换完成</span>
+            </div>
+          </div>
+          ;
       }
   }
 };
@@ -38,10 +47,29 @@ export default {
 .lemon-message.lemon-message-voice
   user-select none
   .lemon-message__content
+    background-color unset
     border 0px solid #000
     font-size 12px
     cursor pointer
     &::before
       display none
-
+    .lemon-message-voice-context
+      display flex
+      flex-direction: column
+      audio
+        width 250px
+        height 35px
+        border solid 1px #CCC
+        border-radius 15px
+      .lemon-message-voice-context-text
+        display flex
+        flex-direction: column
+        background-color #FFF
+        padding 5px 10px
+        margin-top 10px
+        border-radius 5px
+        .lemon-message-voice-context-text-transfer
+          margin 10px 0
+          font-size x-small
+          color #999
 </style>

src/views/qw/qwChat/qq.vue

@@ -30,27 +30,17 @@
                    @menu-avatar-click="handleMenuAvatarClick"
                    @pick-image="handleImageClick"
                    @send="handleSend">
-        <template #cover>
-          <div>
-          </div>
-        </template>
-        <template #message-title="contact">
-          <div>
-          </div>
-        </template>
-
-        <template #sidebar-contact-fixedtop="contact">
-          <div>
-          </div>
-        </template>
-
-        <template #sidebar-message-fixedtop="message">
-          <div>
-          </div>
-        </template>
-
-        <template #message-side="contact">
-          <div>
+        <template #sidebar-message-top>
+          <div style="padding: 8px;">
+            <el-input
+              v-model="searchKeyword"
+              prefix-icon="el-icon-search"
+              placeholder="搜索"
+              size="small"
+              clearable
+              @input="handleSearch"
+              style="width: 100%;"
+            />
           </div>
         </template>
       </lemon-imui>
@@ -157,7 +147,8 @@ export default {
         open: false
       },
       imSocket: null,
-      imUrl: process.env.VUE_APP_IM_WS_URL
+      imUrl: process.env.VUE_APP_IM_WS_URL,
+      searchKeyword: '',
     };
   },
   created(){
@@ -521,6 +512,24 @@ export default {
         this.$refs.userDetail.getDetail(sessionId);
       }, 1);
     },
+    // 搜索
+    handleSearch() {
+      const keyword = this.searchKeyword.trim().toLowerCase();
+      if (!keyword) {
+        // 为空时显示全部
+        this.$refs.IMUI.initConversations(this.conversationData);
+        return;
+      }
+      // 过滤会话列表
+      const filtered = this.conversationData.filter(item => {
+        // 搜索最后一条消息内容和联系人名
+        return (
+          (item.lastContent && item.lastContent.toLowerCase().includes(keyword)) ||
+          (item.displayName && item.displayName.toLowerCase().includes(keyword))
+        );
+      });
+      this.$refs.IMUI.initConversations(filtered);
+    },
   },
 };
 </script>