This commit is contained in:
JiXinHui 2025-12-16 14:15:19 +08:00
commit 217d0bd20f
9 changed files with 297 additions and 162 deletions

40
App.vue
View File

@ -10,7 +10,7 @@ export default {
// WebSocket
ws: null, // WebSocket
lockReconnect: false, //
timeout: 30000, //
// timeout: 30000, //
timeoutObj: null, //
serverTimeoutObj: null, //
timeoutnum: null, //
@ -84,8 +84,6 @@ export default {
},
// WebSocket
initWebSocket() {
console.log(this.buildWsUrl());
try {
this.ws = new WebSocket(this.buildWsUrl());
this.ws.onopen = () => this.handleWsOpen();
@ -114,32 +112,29 @@ export default {
//
start() {
this.timeoutObj = setTimeout(() => {
try {
//
if (
this.ws &&
this.ws.readyState === 1 &&
this.vuex_user &&
(this.vuex_user.id || this.vuex_user.Id)
(this.vuex_user.Id || this.vuex_user.id)
) {
//
this.ws.send("heartCheck");
} else {
this.lockReconnect = false;
this.reconnect();
}
} catch (err) {
//
this.lockReconnect = false;
this.reconnect();
}
//
this.serverTimeoutObj = setTimeout(() => {
try {
// console.log("[WebSocket] ");
this.ws && this.ws.close();
} catch (e) {}
this.lockReconnect = false;
this.reconnect();
}, this.timeout);
}, this.timeout);
}, 30000);
}, 30000);
},
//
handleWsOpen() {
@ -153,10 +148,12 @@ export default {
//
this.reset();
console.log("[WebSocket] 收到消息:", e);
//
if (typeof e.data === "string" && e.data.indexOf("heartCheck") >= 0) {
return;
}
// if (typeof e.data === "string" && e.data.indexOf("heartCheck") >= 0) {
// return;
// }
// JSON oa-web-phone { Type, Data }
let msgData = null;
@ -169,6 +166,10 @@ export default {
const type = msgData.Type;
console.log("收到消息类型:", type);
//
if (type === "pong") return;
// 退
if (type === "Exit") {
try {
@ -209,14 +210,13 @@ export default {
},
//
handleWsClose(e) {
console.log(`[WebSocket] 连接关闭: code=${e.code}, reason=${e.reason}`);
// console.log(`[WebSocket] : code=${e.code}, reason=${e.reason}`);
this.lockReconnect = false;
this.reconnect();
},
//
handleWsError(e) {
console.log("[WebSocket] 连接错误:", e);
// console.log("[WebSocket] :", e);
this.lockReconnect = false;
this.reconnect();
},
@ -237,7 +237,7 @@ export default {
},
mounted() {
// 使 oa-web-phone WebSocket
// this.startLink(); // 线
this.startLink(); // 线
},
};
</script>

View File

@ -218,9 +218,12 @@ const install = (Vue, vm) => {
// 获取教师列表(学生端-招办在线)
let GetTeacherListApi = (params = {}) =>
vm.$u.get("api/Dialogue/GetTeacherList", params);
// 获取会话列表
// 获取会话列表-教师
let GetDialogueListApi = (params = {}) =>
vm.$u.get("api/Dialogue/GetDialogueList", params);
// 获取会话列表-用户
let GetDialogueList_UserApi = (params = {}) =>
vm.$u.get("api/Dialogue/GetDialogueList_User", params);
// 创建会话
let AddDialogueApi = (params = {}) =>
vm.$u.post("api/Dialogue/AddDialogue", params);
@ -236,6 +239,9 @@ const install = (Vue, vm) => {
// 置顶一个会话
let OverheadOneDialogueApi = (params = {}) =>
vm.$u.post("api/Dialogue/OverheadOneDialogue", params);
// 删除会话
let DeleteDialogueApi = (params = {}) =>
vm.$u.post("api/Dialogue/DeleteDialogue", params);
// 将各个定义的接口名称统一放进对象挂载到vm.$u.api(因为vm就是this也即this.$u.api)下
vm.$u.api = {
@ -297,6 +303,7 @@ const install = (Vue, vm) => {
UpdateUserApi,
GetTeacherListApi,
GetDialogueListApi,
GetDialogueList_UserApi,
AddDialogueApi,
SendMessage_PrivateApi,
GetChatHistoryDataApi,

View File

@ -44,7 +44,7 @@
>
<!-- 使用新的数据结构渲染聊天历史 -->
<view
v-for="(group, groupIndex) in chatHistoryList3"
v-for="(group, groupIndex) in currentChatHistory"
:key="'group-' + group.id + groupIndex"
@click="closePopover"
>
@ -63,7 +63,7 @@
'chat-item-active': item.isActiveChat,
}"
@click.stop="
selectChatItem(groupIndex, index, item.id, item.conversationId)
selectChatItem(item.id, item.conversationId, item.receiverId)
"
>
<view class="chat-item-content">
@ -90,12 +90,7 @@
<view
class="popover-item"
@click.stop="
selectChatItem(
groupIndex,
index,
item.id,
item.conversationId
)
selectChatItem(item.id, item.conversationId, item.receiverId)
"
>
<u-icon
@ -155,7 +150,11 @@ export default {
type: Boolean,
default: false,
},
chatHistoryList3: {
chatHistoryAI: {
type: Array,
default: () => [],
},
chatHistoryTeacher: {
type: Array,
default: () => [],
},
@ -172,8 +171,6 @@ export default {
return {
baseUrl: "",
showPopup: false,
currentActiveGroup: -1,
currentActiveIndex: -1,
activeItemId: "", // ID
scrollToView: "", // scroll-into-view
tabList: [
@ -193,6 +190,12 @@ export default {
},
computed: {
currentChatHistory() {
return this.currentTab === 0
? this.chatHistoryAI
: this.chatHistoryTeacher;
},
headSculptureUrl() {
if (this.vuex_user.HeadSculptureUrl) {
return this.baseUrl + "/" + this.vuex_user.HeadSculptureUrl;
@ -224,7 +227,7 @@ export default {
}
},
//
chatHistoryList3: {
chatHistoryAI: {
handler() {
this.$nextTick(() => {
this.scrollToActiveItem();
@ -308,10 +311,10 @@ export default {
for (
let groupIndex = 0;
groupIndex < this.chatHistoryList3.length;
groupIndex < this.chatHistoryAI.length;
groupIndex++
) {
const group = this.chatHistoryList3[groupIndex];
const group = this.chatHistoryAI[groupIndex];
for (let index = 0; index < group.conversation.length; index++) {
const item = group.conversation[index];
if (item.isActiveChat) {
@ -326,16 +329,21 @@ export default {
}
},
selectChatItem(groupIndex, index, id, conversationId) {
// this.currentActiveGroup = groupIndex;
// this.currentActiveIndex = index;
console.log("selectChatItem", groupIndex, index, id, conversationId);
selectChatItem(id, conversationId = null, receiverId = null) {
if (this.currentTab === 0) {
// AI
//
this.$emit("select-conversation", {
id,
conversationId,
});
} else {
//
this.$store.dispatch("selectTeacherChatItem", {
id,
receiverId,
});
}
},
handleCreateConversation() {

View File

@ -2,7 +2,7 @@
<view class="chat-page">
<!-- 顶部导航 -->
<header-bar
:title="vuex_msgUser.receiverName"
:title="vuex_msgUser.name"
leftIcon="arrow-left"
@leftClick="handleLeftClick"
></header-bar>
@ -15,6 +15,30 @@
:scroll-into-view="scrollToView"
scroll-with-animation
>
<!-- 教师信息 -->
<div class="teacher-info-card">
<image class="teacher-avatar" :src="receiverHeadSculptureUrl"></image>
<div class="teacher-info">
<div class="teacher-name">{{ vuex_msgUser.name }}</div>
<div class="teacher-school">
<image
class="school-icon"
src="/static/common/images/icon_college.png"
></image>
<text class="school-text">{{ vuex_msgUser.collegeName }}</text>
</div>
<div class="teacher-college">
<image
class="college-icon"
src="/static/common/images/icon_major.png"
></image>
<text class="college-text">{{ vuex_msgUser.collegeName }}</text>
</div>
</div>
</div>
<view
v-for="(message, index) in vuex_msgList"
:key="message.id"
@ -28,7 +52,7 @@
<!-- 0 发送消息 -->
<view
class="message-right"
v-if="message.interactMode === 0"
v-if="message.senderId === vuex_user.Id"
:id="'msg-' + message.id"
>
<view class="message-content">
@ -44,12 +68,12 @@
<!-- 1 收到消息 -->
<view
class="message-left"
v-if="message.interactMode === 1"
v-if="message.senderId !== vuex_user.Id"
:id="'msg-' + message.id"
>
<image
class="ai-avatar"
src="/static/common/images/avatar_ai.png"
:src="receiverHeadSculptureUrl"
mode="scaleToFill"
/>
<view class="message-content">
@ -155,6 +179,7 @@ export default {
onLoad(options) {
console.log(this.vuex_msgList);
console.log(this.vuex_msgUser, "this.vuex_msgUser");
this.baseUrl = this.$u.http.config.baseUrl;
@ -168,6 +193,14 @@ export default {
},
computed: {
receiverHeadSculptureUrl() {
if (this.vuex_msgUser.headSculptureUrl) {
return this.baseUrl + "/" + this.vuex_msgUser.headSculptureUrl;
}
return "/static/common/images/avatar_default2.png";
},
headSculptureUrl() {
if (this.vuex_user.HeadSculptureUrl) {
return this.baseUrl + "/" + this.vuex_user.HeadSculptureUrl;
@ -231,7 +264,7 @@ export default {
message: this.messageValue,
messageType: 0,
filePath: "",
interactMode: 0,
// interactMode: 0,
};
this.$store.commit("push_Msg", msgUserData);
@ -274,17 +307,7 @@ export default {
})
.then((res) => {
const msgList = res.data.item1.reverse();
// interactMode mock
for (var i = 0; i < msgList.length; i++) {
msgList[i].interactMode = msgList[i].interactMode || 0;
// if (this.PageIndex != 1) {
// this.$store.commit("unshift_Msg", msgList[i]);
// } else {
// this.$store.commit("push_Msg", msgList[i]);
// }
}
this.$store.commit("push_MsgList", msgList);
});
},
@ -399,6 +422,62 @@ export default {
// padding: 10rpx 0;
// }
.teacher-info-card {
background-color: #ffffff;
padding: 30rpx;
border-radius: 16rpx;
margin: 30rpx 0;
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
margin-bottom: 36rpx;
.teacher-avatar {
width: 120rpx;
height: 120rpx;
border-radius: 10rpx;
margin-right: 30rpx;
object-fit: cover;
}
.teacher-info {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 8rpx;
flex: 1;
.teacher-name {
font-family: PingFang SC;
font-weight: bold;
font-size: 32rpx;
color: #333333;
}
.teacher-school,
.teacher-college {
display: flex;
align-items: center;
.school-icon,
.college-icon {
margin-right: 16rpx;
width: 24rpx;
height: 24rpx;
display: inline-block;
text-align: center;
}
.school-text,
.college-text {
font-size: 24rpx;
color: #666666;
}
}
}
}
.message-time {
text-align: center;
font-size: 24rpx;

View File

@ -18,6 +18,7 @@
<view class="teacher-list">
<!-- 教师列表 -->
<view v-if="teacherList.length > 0">
<view
class="teacher-item"
v-for="(teacher, index) in teacherList"
@ -36,7 +37,9 @@
<text>在线</text>
</view>
</view>
<view class="teacher-department">{{ teacher.collegeName }}</view>
<view class="teacher-department">{{
teacher.collegeName
}}</view>
</view>
<view class="ask-button" @click="handleAskQuestion(teacher)">
立即提问
@ -44,6 +47,11 @@
</view>
</view>
</view>
<view v-else style="margin-top: 200rpx">
<u-empty text="今日暂无值班客服教师" mode="list"></u-empty>
</view>
</view>
</view>
<!-- 留言弹出层 -->
@ -74,20 +82,20 @@ export default {
{ id: 1, name: "迎新在线" },
],
teacherList: [
{
id: 1,
name: "孙老师",
department: "招就处",
avatar: "/static/common/images/avatar.png",
online: true,
},
{
id: 2,
name: "杨老师",
department: "电子信息学院",
avatar: "/static/common/images/student.png",
online: false,
},
// {
// id: 1,
// name: "",
// department: "",
// avatar: "/static/common/images/avatar.png",
// online: true,
// },
// {
// id: 2,
// name: "",
// department: "",
// avatar: "/static/common/images/student.png",
// online: false,
// },
],
};
},
@ -106,14 +114,8 @@ export default {
handleAskQuestion(teacher) {
console.log("点击咨询:", teacher);
var msgUserData = {
avatar: teacher.headSculptureUrl,
friendId: teacher.id,
friendName: teacher.name,
};
//
this.$store.dispatch("openOrCreateDialogue", msgUserData);
//
this.$store.dispatch("createDialogue", teacher);
return;

View File

@ -259,7 +259,8 @@
<!-- 对话弹出层 -->
<chat-history
:show.sync="popupShow"
:chat-history-list3="chatHistoryList3"
:chatHistoryAI="chatHistoryAI"
:chatHistoryTeacher="chatHistoryTeacher"
:user-name="vuex_user ? vuex_user.Name : ''"
@select-conversation="handleSelectConversation"
@create-conversation="handleCreateConversation"
@ -353,7 +354,7 @@ export default {
},
],
popupShow: false,
chatHistoryList3: [
chatHistoryAI: [
// {
// "id": "",
// "conversation": [
@ -385,6 +386,7 @@ export default {
// ]
// }
],
chatHistoryTeacher: [],
activeIndex: 0,
commonQuestions: [
"新生报到流程",
@ -467,6 +469,7 @@ export default {
methods: {
async handleLeftClick() {
await this.getChatHistoryList();
await this.GetDialogueList_User();
this.handlePopupShow();
},
@ -493,11 +496,12 @@ export default {
}
},
async getChatHistoryList() {
this.$u.api.GetConversationPage().then((res) => {
this.chatHistoryList3 = res.data;
if (this.chatHistoryList3.length > 0) {
this.chatHistoryList3 = res.data.map((group) => {
//
async GetDialogueList_User() {
this.$u.api.GetDialogueList_UserApi().then((res) => {
this.chatHistoryTeacher = res.data;
if (this.chatHistoryTeacher.length > 0) {
this.chatHistoryTeacher = res.data.map((group) => {
// conversation
return {
...group,
@ -511,7 +515,29 @@ export default {
};
});
}
console.log("this.chatHistoryList3", this.chatHistoryList3);
});
},
// ai
async getChatHistoryList() {
this.$u.api.GetConversationPage().then((res) => {
this.chatHistoryAI = res.data;
if (this.chatHistoryAI.length > 0) {
this.chatHistoryAI = res.data.map((group) => {
// conversation
return {
...group,
conversation: group.conversation.sort((a, b) => {
//
return (
new Date(b.startTime).getTime() -
new Date(a.startTime).getTime()
);
}),
};
});
}
console.log("this.chatHistoryAI", this.chatHistoryAI);
});
},

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.4 KiB

View File

@ -94,8 +94,6 @@ const store = new Vuex.Store({
// text: "我的"
// }
],
vuex_education: [],
vuex_schoolName: "",
},
mutations: {
$uStore(state, payload) {
@ -237,7 +235,7 @@ const store = new Vuex.Store({
// 获取聊天记录(私聊)
async fetchChatRecord(
{ commit, state },
{ userId, friendId, chatType = 0, PageIndex = 1, PageSize = 20 }
{ userId, friendId, PageIndex = 1, PageSize = 20 }
) {
const params = { userId, friendId, PageIndex, PageSize };
@ -262,58 +260,73 @@ const store = new Vuex.Store({
}
},
// 统一入口:打开或创建会话
// 使用位置:所有需要进入聊天的入口调用该方法,避免各页面重复逻辑
// 1) 获取最新会话列表
// 2) 查找是否存在 friendId 对应的会话
// 3) 有则设置当前会话并(可选)跳转;无则创建,成功后递归重试
async openOrCreateDialogue({ commit, state, dispatch }, user) {
const { friendId, friendName, avatar, chatType = 0 } = user || {};
const attempt =
user && typeof user.attempt === "number" ? user.attempt : 1;
if (!friendId) return Promise.reject(new Error("缺少 friendId"));
// 点击聊天记录,切换到该会话
selectTeacherChatItem({ commit, dispatch }, { id, receiverId }) {
// 清空消息列表,避免旧消息干扰
commit("push_MsgList", []);
Vue.prototype.$u.api
.GetReceiverUserInfoApi({ Id: receiverId })
.then((res) => {
if (res.succeed && res.data) {
commit("set_MsgUser", { ...res.data, dialogueManagementId: id });
uni.navigateTo({
url: `/pages/chat/index`,
});
return;
}
});
},
// 点击立即提问进入会话
// 1) 创建新会话
// 2) 获取接收者信息
// 3) 进入会话
async createDialogue({ commit, state, dispatch }, user) {
const { id, dialogueManagementId } = user || {};
if (!id) return Promise.reject(new Error("缺少 id"));
// 清空消息列表,避免旧消息干扰
commit("push_MsgList", []);
// 第一步:获取列表(复用现有 action保证 state 同步更新)
const list = await dispatch("getUserlist");
// 第二步:查找是否存在该会话(兼容后端字段 friendId/receiverId
const target = (list || []).find(
(i) => i && (i.receiverId === friendId || i.friendId === friendId)
);
if (target) {
commit("set_MsgUser", target);
// 跳转到对话页,参数按需调整
if (
dialogueManagementId &&
dialogueManagementId !== "00000000-0000-0000-0000-000000000000"
) {
// 有会话ID直接进入会话
commit("set_MsgUser", { ...user });
uni.navigateTo({
url: `/pages/chat/index`,
});
return target;
return;
}
// 第二次调用时,无论成功与否均在第三步(创建)之前结束
if (attempt >= 2) {
return false;
}
// 第三步:不存在则创建,成功后重试本流程
const res = await Vue.prototype.$u.api.AddDialogueApi({
receiverId: friendId,
onlineConsultationType: 0, // 0招生在线1迎新在线可按业务传入
// 没有会话id创建新会话
const res1 = await Vue.prototype.$u.api.AddDialogueApi({
receiverId: id,
onlineConsultationType: 1, // 创建在线咨询固定传1
});
if (res && res.succeed === true) {
// 创建成功后,重新执行流程(再次获取列表并进入会话)
return dispatch("openOrCreateDialogue", {
friendId,
friendName,
avatar,
chatType,
attempt: attempt + 1,
const resId = res1.data?.dialogueManagementId || "";
if (res1 && res1.succeed) {
// 获取接收者信息,这里没啥用(先注释)
// Vue.prototype.$u.api.GetReceiverUserInfoApi({ Id: id }).then((res) => {
// if (res.succeed && res.data) {
// commit("set_MsgUser", { ...res.data, dialogueManagementId });
// uni.navigateTo({
// url: `/pages/chat/index`,
// });
// return;
// }
// });
commit("set_MsgUser", { ...user, dialogueManagementId: resId });
uni.navigateTo({
url: `/pages/chat/index`,
});
return;
}
return Promise.reject(new Error(res?.error || "创建会话失败"));
},
},

2
types/global.d.ts vendored
View File

@ -13,7 +13,7 @@ declare global {
type __VLS_IsAny<T> = 0 extends 1 & T ? true : false;
type __VLS_PickNotAny<A, B> = __VLS_IsAny<A> extends true ? B : A;
type __VLS_SpreadMerge<A, B> = Omit<A, keyof B> & B;
type __VLS_WithComponent<N0 extends string, LocalComponents, Self, N1 extends string, N2 extends string, N3 extends string> =
type __VLS_WithComponent<N0 extends string, LocalComponents, Self, N1 extends string, N2 extends string = N1, N3 extends string = N1> =
N1 extends keyof LocalComponents ? { [K in N0]: LocalComponents[N1] } :
N2 extends keyof LocalComponents ? { [K in N0]: LocalComponents[N2] } :
N3 extends keyof LocalComponents ? { [K in N0]: LocalComponents[N3] } :