sx
/
jiuyiUniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修复 私聊聊天 头像不正确的bug

This commit is contained in:
sx 2025-02-18 15:02:33 +08:00
parent 0fa8e522b1
commit 0084fe8aa1
1 changed files with 557 additions and 550 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

287
jiuyi2/pages/news/chat/chat.vue
View File

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