pxl/tk-mini-program
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化

Browse Source
This commit is contained in:
pengxiaolong
2025-07-21 22:10:59 +08:00
parent 31527ba8a6
commit 7116e57fc3
157 changed files with 2793 additions and 405 deletions
Download Patch File Download Diff File Expand all files Collapse all files

315
pages/index/chat/chat.vue
View File

@@ -34,12 +34,8 @@
show-scrollbar="false"
scroll-y="true"
class="scroll"
refresher-enabled="true"
refresher-threshold="40"
@refresherrefresh="onRefresherRefresh"
lower-threshold="100"
@scrolltolower="onScrollToLower"
:refresher-triggered="triggered"
upper-threshold="100"
@scrolltoupper="onScrollToUpper"
:scroll-into-view="ElementPositioning"
@scroll="onScroll"
>
@@ -49,11 +45,50 @@
:key="item.id"
:id="item.id"
>
<view class="chat-time"v-if="checkInterval(item.timestamp)">{{
<view class="chat-time" v-if="item.timestampStatus">{{
TimeFormatting(item.timestamp)
}}</view>
<view class="chat-avatar">
<!-- <textmessage :messagetext="item.payload.text"></textmessage> -->
<!-- 对方消息 -->
<view class="oppositeChatNews" v-if="item.senderId == userId">
<image class="chat-avatarImg" :src="avatar" mode="scaleToFill" />
<view class="oppositesharpCorner">
<view class="oppositeSharpCornercion"></view>
</view>
<view class="oppositeChatNewsContent">
<!-- 消息类型 -->
<textmessage
v-if="item.type == 'text'"
:messagetext="item.payload.text"
></textmessage>
<customPKMessage
v-if="item.type == 'pk'"
:message="item.payload"
></customPKMessage>
</view>
</view>
<!-- 自己消息 -->
<view class="myChatNews" v-if="item.senderId == userinfo.id">
<image
class="chat-avatarImg"
:src="userinfo.headerIcon"
mode="scaleToFill"
/>
<view class="mysharpCorner">
<view class="mySharpCornercion"></view>
</view>
<view class="myChatNewsContent">
<!-- 消息类型 -->
<textmessage
v-if="item.type == 'text'"
:messagetext="item.payload.text"
></textmessage>
<customPKMessage
v-if="item.type == 'pk'"
:message="item.payload"
></customPKMessage>
</view>
</view>
</view>
</view>
</scroll-view>
@@ -64,10 +99,10 @@
id:inputComponent
:style="{
bottom:
MoreStatus || KeyboardHeight != 0
MoreStatus || KeyboardHeight > 300
? MoreStatus
? '650rpx'
: KeyboardHeight != 0
: KeyboardHeight > 300
? KeyboardHeight + 'rpx'
: '0'
: '0',
@@ -102,10 +137,10 @@
class="MoreComponent"
:style="{
bottom:
MoreStatus || KeyboardHeight != 0
MoreStatus || KeyboardHeight > 300
? MoreStatus
? '0'
: KeyboardHeight != 0
: KeyboardHeight > 300
? '0'
: KeyboardHeight + 'rpx'
: '-650rpx',
@@ -131,9 +166,14 @@
@click.stop
:style="{ bottom: MoreItemStatus == null ? '-1000rpx' : '0' }"
>
<!-- 更多相关消息组件 -->
<!-- 自定义消息组件 -->
<InvitationComponents
v-if="MoreItemStatus == 'Invitation'"
:oppositeId="userId"
:myId="userinfo.id"
:avatar="avatar"
:nickname="nickname"
@refreshMessage="refreshMessage"
></InvitationComponents>
</view>
</view>
@@ -142,13 +182,18 @@
<script>
import textmessage from "./messageComponent/textmessage";
import customPKMessage from "./messageComponent/customPKMessage";
import InvitationComponents from "./moreMessageComponents/InvitationComponents";
import { generateId } from "../../../components/ChatId.js";
import TimeFormatting from "../../../components/TimeFormatting.js";
import picturesVideosMessages from "../../../components/picturesVideosMessages.js";
import audioMessages from "../../../components/audioMessages.js";
import request from "../../../components/request.js";
import {
getConversationMessages,
sendMessage,
messageRead,
sendCustomMessage,
} from "../../../components/goEasyTool/tool.js";
import GoEasy from "goeasy";
export default {
@@ -156,7 +201,6 @@ export default {
return {
userId: "", // 对方用户id
nickname: "", // 对方用户昵称
triggered: false, // 下拉刷新状态
avatar: "", // 对方用户头像
chatList: [], // 聊天记录
userinfo: {}, // 自己用户信息
@@ -175,7 +219,18 @@ export default {
onPage: false, // 是否在页面
timer: null, // 定时器
lastTimestamp: null, // 上一次刷新时间戳
LastTime: null, // 最后聊天记录的时间戳
MoreMessageList: [],
Record: null, // 定位记录
myitem: null, //直接发送自定义消息的我的选中主播
youritem: null, //直接发送自定义消息的对方选中主播
type: null, //直接发送自定义消息的消息类型
popUpList: [
{
name: "相册",
icon: "https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Album.png",
type: "Album",
},
{
name: "邀请",
icon: "https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/chat_invite.png",
@@ -186,6 +241,9 @@ export default {
},
onShow() {
this.onPage = true;
uni.onKeyboardHeightChange((res) => {
this.KeyboardHeight = res.height * 2 - this.ioshide;
});
},
onHide() {
this.onPage = false;
@@ -194,21 +252,40 @@ export default {
uni.getStorage({
key: "userinfo",
success: (res) => {
this.userinfo = res;
this.userinfo = res.data;
},
});
this.userId = options.userId;
this.nickname = options.nickname;
this.avatar = options.avatar;
this.type = options.type;
try {
this.myitem = JSON.parse(options.myitem);
this.youritem = JSON.parse(options.youritem);
} catch (e) {}
if (this.type == "pk") {
setTimeout(() => {
this.sendCustomMessage();
}, 500);
}
// 获取和对方用户的聊天记录
getConversationMessages(this.$goeasy, this.userId, null).then((res) => {
this.chatList = res.map((item) => {
item.id = generateId();
item.timestampStatus = this.checkInterval(item.timestamp);
return item;
});
console.log("获取和对方用户的聊天记录", this.chatList);
setTimeout(() => {
this.ElementPositioning = this.chatList[this.chatList.length - 1].id;
if (this.chatList.length > 0) {
this.ElementPositioning = this.chatList[this.chatList.length - 1].id;
this.LastTime = this.chatList[0].timestamp;
} else {
uni.showToast({
title: "您和对方暂无聊天记录，快去聊天吧",
icon: "none",
duration: 2000,
});
}
}, 300);
const query = uni.createSelectorQuery().in(this);
query
@@ -230,6 +307,62 @@ export default {
this.getscrollviewheight();
},
methods: {
//直接发送自定义消息
sendCustomMessage() {
request({
url: "pk/createPkRecord",
method: "POST",
data: {
pkIdA: this.youritem.id,
pkIdB: this.myitem.id,
userIdA: this.userId,
userIdB: this.userinfo.id,
pkTime: this.youritem.pkTime,
pkNumber: this.youritem.pkNumber,
anchorIdA: this.youritem.anchorId,
anchorIdB: this.myitem.anchorId,
anchorIconA: this.youritem.anchorIcon,
anchorIconB: this.myitem.anchorIcon,
piIdA: this.youritem.id,
piIdB: this.myitem.id,
},
userInfo: true,
}).then((res) => {
if (res.code == 200) {
const customData = {
id: res.data.id,
pkIdA: this.youritem.id,
pkIdB: this.myitem.id,
};
let order = {
customData: customData,
link: "https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/pk.png",
text: "PK邀请消息",
};
sendCustomMessage(
this.$goeasy,
this.type,
this.userId,
order,
this.avatar,
this.nickname
).then((res) => {
this.ElementPositioning = res.id = generateId();
res.timestampStatus = this.checkInterval(res.timestamp);
this.chatList.push(res);
uni.showToast({
title: "发送成功",
icon: "none",
});
});
} else {
uni.showToast({
title: res.msg,
icon: "none",
});
}
});
},
//时间显示
checkInterval(timestamp) {
if (!this.lastTimestamp) {
@@ -243,7 +376,6 @@ export default {
this.lastTimestamp = timestamp;
return true;
}
return false;
},
@@ -270,17 +402,37 @@ export default {
this.Scrolling = false;
}
},
//获取更多聊天记录
onScrollToUpper() {
this.lastTimestamp = null;
getConversationMessages(this.$goeasy, this.userId, this.LastTime).then((res) => {
this.Record = this.chatList[0].id;
this.MoreMessageList = res.map((item) => {
item.id = generateId();
item.timestampStatus = this.checkInterval(item.timestamp);
return item;
});
});
setTimeout(() => {
this.chatList = [...this.MoreMessageList, ...this.chatList];
console.log("获取更多聊天记录", this.chatList);
this.LastTime = this.chatList[0].timestamp;
this.ElementPositioning = this.Record;
}, 300);
},
//监听已读消息
onMessageRead(message) {
console.log("已读消息", message);
console.log("1已读消息", message);
},
//监听接受消息
onPrivateMessageReceived(message) {
if (!this.Scrolling) {
this.ElementPositioning = message.id = generateId();
message.timestampStatus = this.checkInterval(message.timestamp);
this.judgescrollTop = false;
} else {
message.id = generateId();
message.timestampStatus = this.checkInterval(message.timestamp);
}
this.chatList.push(message);
if (this.onPage) {
@@ -301,6 +453,7 @@ export default {
).then((res) => {
console.log("发送成功", res);
this.ElementPositioning = res.id = generateId();
res.timestampStatus = this.checkInterval(res.timestamp);
this.chatList.push(res);
this.judgescrollTop = false;
});
@@ -308,7 +461,15 @@ export default {
this.ButtonStatus = false;
}
},
//自定义消息发送返回处理
refreshMessage(message) {
this.MoreItemStatus = null;
this.ElementPositioning = message.message.id = generateId();
message.timestampStatus = this.checkInterval(message.message.timestamp);
this.chatList.push(message.message);
this.judgescrollTop = false;
this.MoreStatus = false;
},
//ios兼容
getIOSDeviceType() {
const systemInfo = uni.getSystemInfoSync();
@@ -343,7 +504,36 @@ export default {
},
//更多消息类型弹窗点击事件
onMoreItem(type) {
this.MoreItemStatus = type;
if (type == "Album") {
this.onSendMedia(); //发送图片，视频消息
} else {
this.MoreItemStatus = type;
}
},
//发送图片，视频消息
onSendMedia() {
//picturesVideosMessages
uni.chooseMedia({
count: 9,
mediaType: ["image", "video"],
sourceType: ["album", "camera"],
maxDuration: 60,
camera: "front",
success(res) {
console.log(res.tempFiles);
if (res.tempFiles.fileType == "image") {
}else if (res.tempFiles.fileType == "video") {
}
},
});
},
//发送音频消息
onSendAudio() {
//audioMessages
},
// 获取键盘高度
onFocus(event) {
@@ -355,7 +545,6 @@ export default {
this.judgescrollTop = false;
}
this.getscrollviewheight();
this.KeyboardHeight = event.detail.height * 2 - this.ioshide;
const query = uni.createSelectorQuery().in(this);
query
.select(".inputComponent")
@@ -366,7 +555,6 @@ export default {
},
//键盘消失
onBlur(event) {
this.KeyboardHeight = 0;
const query = uni.createSelectorQuery().in(this);
query
.select(".inputComponent")
@@ -402,6 +590,7 @@ export default {
components: {
textmessage,
InvitationComponents,
customPKMessage,
},
};
</script>
@@ -451,6 +640,12 @@ export default {
height: 100%;
padding: 0% 2% 0% 2%;
}
.scroll ::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
display: none;
}
.inputComponent {
position: absolute;
left: 0;
@@ -460,14 +655,15 @@ export default {
padding: 15rpx 15rpx 37.5rpx 15rpx;
display: flex;
align-items: flex-end;
transition: bottom 0.1s ease;
transition: bottom 0.25s ease;
}
.chat-card {
width: 100%;
height: auto;
margin-bottom: 20rpx;
margin-top: 20rpx;
margin-bottom: 10rpx;
margin-top: 10rpx;
padding: 10rpx;
/* background-color: #ffffff; */
}
.chat-time {
width: 100%;
@@ -483,6 +679,66 @@ export default {
.chat-avatar {
width: 100%;
height: auto;
display: flex;
align-items: flex-start;
}
.oppositeChatNews {
width: 100%;
display: flex;
align-items: flex-start;
}
.oppositesharpCorner {
width: 20rpx;
height: 80rpx;
display: flex;
flex-direction: row-reverse;
align-items: center;
}
.oppositeSharpCornercion {
width: 0;
height: 0;
border-top: 13rpx solid transparent;
border-right: 13rpx solid #ffffff;
border-bottom: 13rpx solid transparent;
}
.oppositeChatNewsContent {
width: auto;
height: auto;
background-color: #ffffff;
border-radius: 10rpx;
max-width: 450rpx;
}
.myChatNews {
width: 100%;
display: flex;
flex-direction: row-reverse;
align-items: flex-start;
margin-right: 15rpx;
}
.mysharpCorner {
width: 20rpx;
height: 80rpx;
display: flex;
align-items: center;
}
.mySharpCornercion {
width: 0;
height: 0;
border-top: 13rpx solid transparent;
border-left: 13rpx solid #7bbd0093;
border-bottom: 13rpx solid transparent;
}
.myChatNewsContent {
width: auto;
height: auto;
background-color: #7bbd0093;
border-radius: 20rpx;
max-width: 450rpx;
}
.chat-avatarImg {
width: 80rpx;
height: 80rpx;
border-radius: 10rpx;
}
.textareacomponent {
width: 570rpx;
@@ -523,7 +779,7 @@ export default {
left: 0;
right: 0;
height: 650rpx;
transition: bottom 0.1s ease;
transition: bottom 0.25s ease;
background-color: #ffffff;
}
.Morecontent {
@@ -557,14 +813,15 @@ export default {
left: 0;
right: 0;
bottom: 0;
transition: top 0.1s ease;
transition: top 0.25s ease;
z-index: 1000;
}
.popUpInvitationContent {
position: absolute;
left: 0;
right: 0;
height: 1000rpx;
transition: bottom 0.1s ease;
transition: bottom 0.25s ease;
background-color: #ffffff;
border-top-left-radius: 40rpx;
border-top-right-radius: 40rpx;