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 { 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 class="im-message-audio h-44px">
|
||||
<div
|
||||
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;
|
||||
|
@ -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" />
|
||||
|
@ -250,6 +250,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
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
@ -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"
|
||||
/>
|
||||
|
@ -65,7 +65,7 @@ const onSendMessage = (data = {}, callBack: any) => {
|
||||
if (code == 200) {
|
||||
callBack(true)
|
||||
} else {
|
||||
window['$message'].warning(message || msg)
|
||||
// window['$message'].warning(message || msg)
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
|
Loading…
Reference in New Issue
Block a user