fix: bug修复
This commit is contained in:
parent
03e84eab94
commit
429c30808b
BIN
src/assets/image/bofang1.png
Normal file
BIN
src/assets/image/bofang1.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 2.0 KiB |
BIN
src/assets/image/yuyin1.png
Normal file
BIN
src/assets/image/yuyin1.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 3.3 KiB |
@ -2,6 +2,13 @@
|
|||||||
import { ref, reactive } from 'vue'
|
import { ref, reactive } from 'vue'
|
||||||
import { PlayOne, PauseOne } from '@icon-park/vue-next'
|
import { PlayOne, PauseOne } from '@icon-park/vue-next'
|
||||||
import { ITalkRecordExtraAudio, ITalkRecord } from '@/types/chat'
|
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<{
|
const props = defineProps<{
|
||||||
extra: ITalkRecordExtraAudio
|
extra: ITalkRecordExtraAudio
|
||||||
@ -22,15 +29,22 @@ const state = reactive({
|
|||||||
showText: false
|
showText: false
|
||||||
})
|
})
|
||||||
|
|
||||||
|
const target = useTemplateRef<HTMLElement>('target')
|
||||||
const onPlay = () => {
|
const onPlay = () => {
|
||||||
if (state.isAudioPlay) {
|
if (state.isAudioPlay) {
|
||||||
audioRef.value.pause()
|
audioRef.value.pause()
|
||||||
|
state.isAudioPlay = false
|
||||||
} else {
|
} else {
|
||||||
audioRef.value.play()
|
audioRef.value.play()
|
||||||
|
state.isAudioPlay = true
|
||||||
|
onClickOutside(target, () => {
|
||||||
|
console.log('点击了外部区域')
|
||||||
|
audioRef.value.pause() // 关闭当前语音播放
|
||||||
|
state.isAudioPlay = false
|
||||||
|
})
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
state.isAudioPlay = !state.isAudioPlay
|
|
||||||
}
|
|
||||||
|
|
||||||
const onPlayEnd = () => {
|
const onPlayEnd = () => {
|
||||||
state.isAudioPlay = false
|
state.isAudioPlay = false
|
||||||
@ -70,10 +84,18 @@ const formatTime = (value: number = 0) => {
|
|||||||
|
|
||||||
return `${Math.floor(value)}"`
|
return `${Math.floor(value)}"`
|
||||||
}
|
}
|
||||||
|
const right = props.data.float === 'right'
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<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>
|
<aTrumpet :isPlay="false" color="black" :size="30"></aTrumpet>
|
||||||
<audio
|
<audio
|
||||||
ref="audioRef"
|
ref="audioRef"
|
||||||
@ -87,15 +109,16 @@ const formatTime = (value: number = 0) => {
|
|||||||
/>
|
/>
|
||||||
|
|
||||||
<div class="play">
|
<div class="play">
|
||||||
<div class="btn pointer" @click.stop="onPlay">
|
<div class="btn pointer">
|
||||||
<!-- <n-icon :size="18" :component="state.isAudioPlay ? PauseOne : PlayOne" /> -->
|
<!-- <n-icon :size="18" :component="state.isAudioPlay ? PauseOne : PlayOne" /> -->
|
||||||
<img
|
<img
|
||||||
v-if="!state.isAudioPlay"
|
v-if="!state.isAudioPlay"
|
||||||
src="@/assets/image/yuyin.png"
|
:src="right ? yuyin1 : yuyin"
|
||||||
class="w-[16px] h-[16px]"
|
class="w-[16px] h-[16px]"
|
||||||
alt=""
|
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>
|
</div>
|
||||||
<!-- <div class="desc">
|
<!-- <div class="desc">
|
||||||
@ -129,6 +152,9 @@ const formatTime = (value: number = 0) => {
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
|
.right {
|
||||||
|
flex-direction: row-reverse !important;
|
||||||
|
}
|
||||||
.im-message-audio {
|
.im-message-audio {
|
||||||
--audio-bg-color: #f5f5f5;
|
--audio-bg-color: #f5f5f5;
|
||||||
--audio-btn-bg-color: #ffffff;
|
--audio-btn-bg-color: #ffffff;
|
||||||
|
@ -170,7 +170,7 @@ if(newVal){
|
|||||||
<div class="w-260px h-517px rounded-4px border-1px border-solid border-#E5E5E5 px-12px">
|
<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">
|
<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">
|
<n-button text color="#46299D" class="text-14px" @click="changeSelectType">
|
||||||
{{ selectType === 1 ? '多选' : '单选' }}
|
{{ selectType === 1 ? '多选' : '取消多选' }}
|
||||||
</n-button>
|
</n-button>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
@ -190,9 +190,10 @@ if(newVal){
|
|||||||
:customStyle="{width:'42px',height:'42px'}"></avatarModule>
|
:customStyle="{width:'42px',height:'42px'}"></avatarModule>
|
||||||
<!-- <n-image class="w-42px h-42px rounded-full" :src="item.avatar" /> -->
|
<!-- <n-image class="w-42px h-42px rounded-full" :src="item.avatar" /> -->
|
||||||
</div>
|
</div>
|
||||||
<div class="flex items-center">
|
<div class="flex items-center overflow-hidden flex">
|
||||||
<span class="text-ellipsis">{{ item.name }}</span>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -217,9 +218,10 @@ if(newVal){
|
|||||||
:groupType="item.group_type"
|
:groupType="item.group_type"
|
||||||
:customStyle="{width:'42px',height:'42px'}"></avatarModule>
|
:customStyle="{width:'42px',height:'42px'}"></avatarModule>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex items-center">
|
<div class="flex items-center overflow-hidden flex">
|
||||||
<span class="text-ellipsis">{{ item.name }}</span>
|
<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>
|
||||||
<n-button class="ml-auto" text color="#C7C7C9" @click="onRemoveContact(item)">
|
<n-button class="ml-auto" text color="#C7C7C9" @click="onRemoveContact(item)">
|
||||||
<n-icon :component="CloseCircle" size="18" />
|
<n-icon :component="CloseCircle" size="18" />
|
||||||
|
@ -250,6 +250,12 @@ class Talk extends Base {
|
|||||||
ServeClearTalkUnreadNum({
|
ServeClearTalkUnreadNum({
|
||||||
talk_type: this.talk_type,
|
talk_type: this.talk_type,
|
||||||
receiver_id: this.talk_type == 1 ? this.sender_id : this.receiver_id
|
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
|
||||||
|
})
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -847,7 +847,7 @@ const onCustomSkipBottomEvent = () => {
|
|||||||
<!-- 近一个月外的消息多选框禁用 {{ item }} -->
|
<!-- 近一个月外的消息多选框禁用 {{ item }} -->
|
||||||
<n-checkbox
|
<n-checkbox
|
||||||
size="small"
|
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"
|
:checked="item.isCheck"
|
||||||
@update:checked="item.isCheck = !item.isCheck"
|
@update:checked="item.isCheck = !item.isCheck"
|
||||||
/>
|
/>
|
||||||
|
@ -65,7 +65,7 @@ const onSendMessage = (data = {}, callBack: any) => {
|
|||||||
if (code == 200) {
|
if (code == 200) {
|
||||||
callBack(true)
|
callBack(true)
|
||||||
} else {
|
} else {
|
||||||
window['$message'].warning(message || msg)
|
// window['$message'].warning(message || msg)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.catch(() => {
|
.catch(() => {
|
||||||
|
Loading…
Reference in New Issue
Block a user