Merge pull request 'fix: bug修复' (#14) from yink into dev

Reviewed-on: https://gitea-inner.fontree.cn/scout666/chat-pc/pulls/14

src/components/talk/message/AudioMessage.vue

@@ -2,6 +2,13 @@
 import { ref, reactive } from 'vue'
 import { PlayOne, PauseOne } from '@icon-park/vue-next'
 import { ITalkRecordExtraAudio, ITalkRecord } from '@/types/chat'
+import { onClickOutside } from '@vueuse/core'
+import { useTemplateRef } from 'vue'
+import yuyin from "@/assets/image/yuyin.png"
+import yuyin1 from "@/assets/image/yuyin1.png"
+import bofang from "@/assets/image/bofang.png"
+import bofang1 from "@/assets/image/bofang1.png"
+
 
 const props = defineProps<{
   extra: ITalkRecordExtraAudio
@@ -22,16 +29,23 @@ const state = reactive({
   showText: false
 })
 
+const target = useTemplateRef<HTMLElement>('target')
 const onPlay = () => {
   if (state.isAudioPlay) {
     audioRef.value.pause()
+    state.isAudioPlay = false
   } else {
     audioRef.value.play()
+    state.isAudioPlay = true
+    onClickOutside(target, () => {
+      console.log('点击了外部区域')
+      audioRef.value.pause() // 关闭当前语音播放
+      state.isAudioPlay = false
+    })
   }
-
-  state.isAudioPlay = !state.isAudioPlay
 }
 
+
 const onPlayEnd = () => {
   state.isAudioPlay = false
   state.progress = 0
@@ -70,10 +84,18 @@ const formatTime = (value: number = 0) => {
 
   return `${Math.floor(value)}"`
 }
+const right = props.data.float === 'right'
 </script>
 <template>
-  <div class="pointer w-200px bg-#F3F4FD rounded-10px px-11px">
+  <div
-    <div class="im-message-audio h-44px">
+    class="pointer w-200px bg-#F3F4FD rounded-10px px-11px"
+    :class="{
+      '!bg-[var(--im-message-right-bg-color)] !text-[var(--im-message-right-text-color)]': right
+    }"
+    @click.stop="onPlay"
+    ref="target"
+  >
+    <div class="im-message-audio h-44px" :class="{ right }">
       <aTrumpet :isPlay="false" color="black" :size="30"></aTrumpet>
       <audio
         ref="audioRef"
@@ -87,15 +109,16 @@ const formatTime = (value: number = 0) => {
       />
 
       <div class="play">
-        <div class="btn pointer" @click.stop="onPlay">
+        <div class="btn pointer">
           <!-- <n-icon :size="18" :component="state.isAudioPlay ? PauseOne : PlayOne" /> -->
           <img
             v-if="!state.isAudioPlay"
-            src="@/assets/image/yuyin.png"
+            :src="right ? yuyin1 : yuyin"
             class="w-[16px] h-[16px]"
             alt=""
+            :style="{ transform: right && 'rotate(180deg)' }"
           />
-          <img v-else src="@/assets/image/bofang.png" class="w-[16px] h-[16px]" alt="" />
+          <img v-else  :src="right ? bofang1 : bofang" class="w-[16px] h-[16px]" alt="" />
         </div>
       </div>
       <!-- <div class="desc">
@@ -129,6 +152,9 @@ const formatTime = (value: number = 0) => {
   </div>
 </template>
 <style lang="less" scoped>
+.right {
+  flex-direction: row-reverse !important;
+}
 .im-message-audio {
   --audio-bg-color: #f5f5f5;
   --audio-btn-bg-color: #ffffff;

src/components/user/ContactModal.vue

@@ -170,7 +170,7 @@ if(newVal){
         <div class="w-260px h-517px rounded-4px border-1px border-solid border-#E5E5E5 px-12px">
           <div class="border-b-2px border-b-solid border-b-#FBFBFB h-35px flex items-center justify-end">
             <n-button text color="#46299D" class="text-14px" @click="changeSelectType">
-              {{ selectType === 1 ? '多选' : '单选' }}
+              {{ selectType === 1 ? '多选' : '取消多选' }}
             </n-button>
           </div>
           <div>
@@ -190,9 +190,10 @@ if(newVal){
               :customStyle="{width:'42px',height:'42px'}"></avatarModule>
                     <!-- <n-image class="w-42px h-42px rounded-full" :src="item.avatar" /> -->
                   </div>
-                  <div class="flex items-center">
+                  <div class="flex items-center overflow-hidden flex">
                     <span class="text-ellipsis">{{ item.name }}</span>
-                    <span v-if="item.type == 2" class="badge group ml-2">群</span>
+                    <!-- <span v-if="item.type == 2" class="badge group ml-2">群</span> -->
+                    <span v-if="item.talk_type === 2" class="flex-shrink-0">{{ `(${item.group_member_num})` }}</span>
                   </div>
                 </div>
               </template>
@@ -217,9 +218,10 @@ if(newVal){
               :groupType="item.group_type"
               :customStyle="{width:'42px',height:'42px'}"></avatarModule>
                     </div>
-                    <div class="flex items-center">
+                    <div class="flex items-center overflow-hidden flex">
                       <span class="text-ellipsis">{{ item.name }}</span>
-                      <span v-if="item.type == 2" class="badge group ml-2">群</span>
+                      <!-- <span v-if="item.type == 2" class="badge group ml-2">群</span> -->
+                      <span v-if="item.talk_type === 2" class="flex-shrink-0">{{ `(${item.group_member_num})` }}</span>
                     </div>
                     <n-button class="ml-auto" text color="#C7C7C9" @click="onRemoveContact(item)">
                       <n-icon :component="CloseCircle" size="18" />

src/event/talk.js

@@ -263,6 +263,12 @@ class Talk extends Base {
       ServeClearTalkUnreadNum({
         talk_type: this.talk_type,
         receiver_id: this.talk_type == 1 ? this.sender_id : this.receiver_id
+      }).then(() => {
+        useTalkStore().updateItem({
+          index_name: item.index_name,
+          unread_num: 0,
+          atsign_num: 0
+        })
       })
     }
   }

src/views/message/inner/panel/PanelContent.vue

@@ -847,7 +847,7 @@ const onCustomSkipBottomEvent = () => {
             <!-- 近一个月外的消息多选框禁用 {{ item }} -->
             <n-checkbox
               size="small"
-              :disabled="!isOneMonthBefore(item.created_at.split(' ')[0])"
+              :disabled="!isOneMonthBefore(item.created_at.split(' ')[0]) || [4, 13].includes(item.msg_type)"
               :checked="item.isCheck"
               @update:checked="item.isCheck = !item.isCheck"
             />

src/views/message/inner/panel/PanelFooter.vue

@@ -66,7 +66,7 @@ const onSendMessage = (data = {}, callBack: any) => {
       if (code == 200) {
         callBack(true)
       } else {
-        window['$message'].warning(message || msg)
+        // window['$message'].warning(message || msg)
       }
     })
     .catch(() => {