修复 私聊聊天 头像不正确的bug
This commit is contained in:
parent
0fa8e522b1
commit
0084fe8aa1
|
|
@ -1,10 +1,10 @@
|
|||
<script setup>
|
||||
/**
|
||||
/**
|
||||
* 聊天页面
|
||||
*/
|
||||
// 腾讯云聊天
|
||||
import TencentCloudChat from '@tencentcloud/chat';
|
||||
import {
|
||||
// 腾讯云聊天
|
||||
import TencentCloudChat from '@tencentcloud/chat';
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
nextTick,
|
||||
|
|
@ -13,37 +13,37 @@ import {
|
|||
computed,
|
||||
getCurrentInstance,
|
||||
watch,
|
||||
} from 'vue'
|
||||
// api
|
||||
import api from '@/api/index.js'
|
||||
// 工具库
|
||||
import util from '@/common/js/util.js'
|
||||
import {
|
||||
} from 'vue'
|
||||
// api
|
||||
import api from '@/api/index.js'
|
||||
// 工具库
|
||||
import util from '@/common/js/util.js'
|
||||
import {
|
||||
onLoad,
|
||||
onReady,
|
||||
onPageScroll,
|
||||
onUnload
|
||||
} from "@dcloudio/uni-app"
|
||||
} from "@dcloudio/uni-app"
|
||||
|
||||
// 单条消息
|
||||
import newsTemplate from './components/news-temp'
|
||||
// 表情
|
||||
import emoji from './emoji.vue'
|
||||
// 语音条
|
||||
import JyVoice from './jy-voice.vue'
|
||||
// 加号菜单
|
||||
import JyPlus from './jy-plus.vue'
|
||||
// 单条消息
|
||||
import newsTemplate from './components/news-temp'
|
||||
// 表情
|
||||
import emoji from './emoji.vue'
|
||||
// 语音条
|
||||
import JyVoice from './jy-voice.vue'
|
||||
// 加号菜单
|
||||
import JyPlus from './jy-plus.vue'
|
||||
|
||||
import {
|
||||
import {
|
||||
useStore
|
||||
} from 'vuex'
|
||||
const {
|
||||
} from 'vuex'
|
||||
const {
|
||||
proxy
|
||||
} = getCurrentInstance()
|
||||
const store = useStore()
|
||||
} = getCurrentInstance()
|
||||
const store = useStore()
|
||||
|
||||
// 聊天对象
|
||||
const msg = reactive({
|
||||
// 聊天对象
|
||||
const msg = reactive({
|
||||
// 聊天对象
|
||||
id: '',
|
||||
// 聊天类型 C2C单聊 GROUP群聊
|
||||
|
|
@ -52,41 +52,41 @@ const msg = reactive({
|
|||
num: '',
|
||||
// 是否客服聊天
|
||||
isCustomer: false,
|
||||
})
|
||||
// 输入的内容
|
||||
const content = ref('')
|
||||
// 加载
|
||||
const loading = ref(false)
|
||||
// 用户信息
|
||||
const userinfo = computed(() => {
|
||||
})
|
||||
// 输入的内容
|
||||
const content = ref('')
|
||||
// 加载
|
||||
const loading = ref(false)
|
||||
// 用户信息
|
||||
const userinfo = computed(() => {
|
||||
let result = store.state.userinfo
|
||||
return result
|
||||
})
|
||||
// 列表数据
|
||||
const list = reactive({
|
||||
})
|
||||
// 列表数据
|
||||
const list = reactive({
|
||||
// 列表条数
|
||||
limit: 20,
|
||||
//显示的数据
|
||||
data: [],
|
||||
//
|
||||
total: 0,
|
||||
})
|
||||
// 滚动条位置
|
||||
const top = ref(0)
|
||||
// 工具条的高度
|
||||
const toolHeight = ref(0)
|
||||
// 当前操作的元素
|
||||
const messageItem = ref({})
|
||||
// 工具栏状态 voice录音 input输入框 emoji表情 plus加号菜单
|
||||
const toolStatus = ref('input')
|
||||
// video路径
|
||||
const videoUrl = ref('')
|
||||
// 视频上下文
|
||||
const videoContext = ref(null)
|
||||
// 红包对象
|
||||
const redPacket = reactive({})
|
||||
})
|
||||
// 滚动条位置
|
||||
const top = ref(0)
|
||||
// 工具条的高度
|
||||
const toolHeight = ref(0)
|
||||
// 当前操作的元素
|
||||
const messageItem = ref({})
|
||||
// 工具栏状态 voice录音 input输入框 emoji表情 plus加号菜单
|
||||
const toolStatus = ref('input')
|
||||
// video路径
|
||||
const videoUrl = ref('')
|
||||
// 视频上下文
|
||||
const videoContext = ref(null)
|
||||
// 红包对象
|
||||
const redPacket = reactive({})
|
||||
|
||||
onLoad(option => {
|
||||
onLoad(option => {
|
||||
// 标题
|
||||
let title = ''
|
||||
// 聊天类型
|
||||
|
|
@ -121,30 +121,30 @@ onLoad(option => {
|
|||
})
|
||||
})
|
||||
// #endif
|
||||
})
|
||||
})
|
||||
|
||||
onReady(() => {
|
||||
onReady(() => {
|
||||
uni.createSelectorQuery().in(proxy).select('#tool').boundingClientRect((rect) => {
|
||||
toolHeight.value = rect.height
|
||||
}).exec();
|
||||
//
|
||||
videoContext.value = uni.createVideoContext('video')
|
||||
})
|
||||
})
|
||||
|
||||
onPageScroll((ev) => {
|
||||
onPageScroll((ev) => {
|
||||
onContentScroll(ev)
|
||||
})
|
||||
})
|
||||
|
||||
onUnload(() => {
|
||||
onUnload(() => {
|
||||
// #ifdef APP
|
||||
uni.offKeyboardHeightChange(() => { })
|
||||
uni.offKeyboardHeightChange(() => {})
|
||||
// #endif
|
||||
videoContext.value.stop()
|
||||
})
|
||||
})
|
||||
|
||||
// 开启监听消息
|
||||
function addListener() {
|
||||
let onMessageReceived = function (event) {
|
||||
// 开启监听消息
|
||||
function addListener() {
|
||||
let onMessageReceived = function(event) {
|
||||
console.log('TencentCloudChat.EVENT.MESSAGE_RECEIVED', event)
|
||||
setTimeout(() => {
|
||||
// 获取历史记录
|
||||
|
|
@ -156,32 +156,32 @@ function addListener() {
|
|||
}
|
||||
|
||||
uni.$chat.on(TencentCloudChat.EVENT.MESSAGE_RECEIVED, onMessageReceived);
|
||||
}
|
||||
}
|
||||
|
||||
// 移除监听消息
|
||||
function removeListener() {
|
||||
// 移除监听消息
|
||||
function removeListener() {
|
||||
uni.$chat.on(TencentCloudChat.EVENT.MESSAGE_RECEIVED);
|
||||
}
|
||||
}
|
||||
|
||||
// 获取更多消息记录
|
||||
function getMoreHistroy() {
|
||||
// 获取更多消息记录
|
||||
function getMoreHistroy() {
|
||||
// 获取第一条消息记录
|
||||
if (list.total <= list.data.length) return
|
||||
getHistory({
|
||||
msgId: list.data[0].id
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
/**
|
||||
* 获取历史记录
|
||||
* @param {Object} param
|
||||
*/
|
||||
function getHistory(param = {}) {
|
||||
function getHistory(param = {}) {
|
||||
// 验证sdk是否准备完毕
|
||||
let isReady = uni.$chat.isReady();
|
||||
//
|
||||
if (!isReady && userinfo.value.id) {
|
||||
setTimeout(function () {
|
||||
setTimeout(function() {
|
||||
getHistory(param)
|
||||
}, 200);
|
||||
return
|
||||
|
|
@ -207,6 +207,8 @@ function getHistory(param = {}) {
|
|||
if (res.code === 200) {
|
||||
// 结果
|
||||
const result = res.data
|
||||
// 头像路径
|
||||
list.faceUrl = result.faceUrl
|
||||
|
||||
// 如果是最新消息
|
||||
if (param.limit == 1) {
|
||||
|
|
@ -238,10 +240,10 @@ function getHistory(param = {}) {
|
|||
}).finally(() => {
|
||||
loading.value = false
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 滚动至底部
|
||||
function scrollToBottom() {
|
||||
// 滚动至底部
|
||||
function scrollToBottom() {
|
||||
uni.createSelectorQuery().in(proxy).select('#scroll-content').boundingClientRect((res) => {
|
||||
top.value = res.height
|
||||
|
||||
|
|
@ -251,29 +253,29 @@ function scrollToBottom() {
|
|||
})
|
||||
// console.log('top.value', top.value)
|
||||
}).exec();
|
||||
}
|
||||
}
|
||||
|
||||
// 防抖
|
||||
function debounce(func, wait = 500) {
|
||||
// 防抖
|
||||
function debounce(func, wait = 500) {
|
||||
let timeout = null;
|
||||
return function (...args) {
|
||||
return function(...args) {
|
||||
clearTimeout(timeout)
|
||||
timeout = setTimeout(() => {
|
||||
func.apply(this, args)
|
||||
}, wait);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 监听内容滚动
|
||||
function onContentScroll(ev) {
|
||||
// 监听内容滚动
|
||||
function onContentScroll(ev) {
|
||||
if (ev.scrollTop == 50) getMoreHistroy()
|
||||
debounce(() => {
|
||||
top.value = ev.detail.scrollTop
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 点击发送
|
||||
function handleSend() {
|
||||
// 点击发送
|
||||
function handleSend() {
|
||||
// 发送消息
|
||||
sendMsg({
|
||||
query: {
|
||||
|
|
@ -289,21 +291,21 @@ function handleSend() {
|
|||
content.value = ''
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
/**
|
||||
* 加号菜单发送
|
||||
* @param {Object} message 消息对象
|
||||
*/
|
||||
function handlePlusSend(message) {
|
||||
function handlePlusSend(message) {
|
||||
sendMsg(message)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
/**
|
||||
* 发送消息
|
||||
* @param {Object} param
|
||||
*/
|
||||
function sendMsg(param) {
|
||||
function sendMsg(param) {
|
||||
//
|
||||
let request = api.news.sendUserMsg
|
||||
//
|
||||
|
|
@ -326,13 +328,13 @@ function sendMsg(param) {
|
|||
}).catch((rs) => {
|
||||
console.log('sendMsg error:', rs);
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
/**
|
||||
* 打开红包详情
|
||||
* @param {Object} ev
|
||||
*/
|
||||
function handleRedPacket(ev) {
|
||||
function handleRedPacket(ev) {
|
||||
messageItem.value = ev
|
||||
api.news.getRedPacketInfo({
|
||||
query: {
|
||||
|
|
@ -350,10 +352,10 @@ function handleRedPacket(ev) {
|
|||
showCancel: false,
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 领取红包
|
||||
function handleOpenReadPacket() {
|
||||
// 领取红包
|
||||
function handleOpenReadPacket() {
|
||||
// 如果不能领取
|
||||
if (redPacket.redStatus == false) return
|
||||
// 红包过期
|
||||
|
|
@ -371,7 +373,7 @@ function handleOpenReadPacket() {
|
|||
sendType: {
|
||||
'C2C': '1',
|
||||
'GROUP': '2',
|
||||
}[msg.type],
|
||||
} [msg.type],
|
||||
}
|
||||
}).then(rs => {
|
||||
if (rs.code == 200) {
|
||||
|
|
@ -386,73 +388,73 @@ function handleOpenReadPacket() {
|
|||
showCancel: false,
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 选择的emoji
|
||||
function emojiTap(val) {
|
||||
// 选择的emoji
|
||||
function emojiTap(val) {
|
||||
content.value = content.value + val
|
||||
}
|
||||
}
|
||||
|
||||
// 点击工具栏
|
||||
function handleTool(val) {
|
||||
// 点击工具栏
|
||||
function handleTool(val) {
|
||||
if (toolStatus.value === val) {
|
||||
toolStatus.value = 'input'
|
||||
return
|
||||
}
|
||||
toolStatus.value = val
|
||||
}
|
||||
}
|
||||
|
||||
// 输入框聚焦
|
||||
function onFocus() {
|
||||
// 输入框聚焦
|
||||
function onFocus() {
|
||||
handleTool('input')
|
||||
}
|
||||
}
|
||||
|
||||
// 输入语音
|
||||
function voiceSend(message) {
|
||||
// 输入语音
|
||||
function voiceSend(message) {
|
||||
console.log('handlePlusSend', message)
|
||||
sendMsg({
|
||||
message,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 监听滚动
|
||||
const handleScroll = (e) => {
|
||||
// 监听滚动
|
||||
const handleScroll = (e) => {
|
||||
if (e.detail.scrollTop === 0) {
|
||||
getHistory()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 撑起键盘的高度 打开该元素
|
||||
const showGhost = ref(false)
|
||||
// 给元素加高度
|
||||
const ghostBox = ref({
|
||||
// 撑起键盘的高度 打开该元素
|
||||
const showGhost = ref(false)
|
||||
// 给元素加高度
|
||||
const ghostBox = ref({
|
||||
height: '0px',
|
||||
duration: '0.25s'
|
||||
})
|
||||
})
|
||||
|
||||
// 监听键盘高度变化
|
||||
function keyboardheightchange(res) {
|
||||
// 监听键盘高度变化
|
||||
function keyboardheightchange(res) {
|
||||
ghostBox.value = res.detail
|
||||
nextTick(() => {
|
||||
showGhost.value = res.detail.height > 0 ? true : false
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
/**
|
||||
* 看视频
|
||||
* @param {Object} item 聊天消息对象
|
||||
*/
|
||||
function handleViewVideo(item) {
|
||||
function handleViewVideo(item) {
|
||||
videoUrl.value = item.payload.videoUrl
|
||||
// 进入全屏
|
||||
videoContext.value.requestFullScreen()
|
||||
}
|
||||
}
|
||||
|
||||
// 监听视频是否全屏
|
||||
function onScreenChange(ev) {
|
||||
// 监听视频是否全屏
|
||||
function onScreenChange(ev) {
|
||||
console.log('onScreenChange', ev)
|
||||
if (!ev.fullScreen) videoContext.value.pause()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -464,13 +466,18 @@ function onScreenChange(ev) {
|
|||
<!-- 普通消息 -->
|
||||
<view class="message"
|
||||
:class="[(item.From_Account || item.fromId) == userinfo.id ? 'self' : 'friend']">
|
||||
<template v-if="msg.type == 'C2C'">
|
||||
<!-- 如果是我自己 -->
|
||||
<view v-if="msg.type == 'C2C'">
|
||||
<template v-if="(item.From_Account || item.fromId) == userinfo.id">
|
||||
<image :src="userinfo.avatar" class="avatar wh80" mode="aspectFill" />
|
||||
</template>
|
||||
<template v-else>
|
||||
<image :src="list.faceUrl" class="avatar wh80" mode="aspectFill" />
|
||||
</view>
|
||||
<view v-else>
|
||||
</template>
|
||||
</template>
|
||||
<template v-else>
|
||||
<image :src="item.fromFaceUrl" class="avatar wh80" mode="aspectFill" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<view class="df fdc mlr20">
|
||||
<!-- 昵称 -->
|
||||
|
|
@ -567,17 +574,17 @@ function onScreenChange(ev) {
|
|||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './index.scss';
|
||||
@import './index.scss';
|
||||
|
||||
//
|
||||
#video {
|
||||
//
|
||||
#video {
|
||||
position: fixed;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
.red-bag {
|
||||
//
|
||||
.red-bag {
|
||||
position: relative;
|
||||
width: 528rpx;
|
||||
height: 60vh;
|
||||
|
|
@ -709,5 +716,5 @@ function onScreenChange(ev) {
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue