no message
This commit is contained in:
parent
dcd5071847
commit
b508460679
@ -6,13 +6,16 @@ $text-color-sub: #999;
|
|||||||
$primary-color: #0877F1;
|
$primary-color: #0877F1;
|
||||||
|
|
||||||
.chat-page {
|
.chat-page {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
height: 100vh;
|
|
||||||
background-color: #f5f5f5;
|
background-color: #f5f5f5;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
position: relative;
|
transition: padding-bottom 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||||
width: 100%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 患者信息栏样式 - 固定在顶部 */
|
/* 患者信息栏样式 - 固定在顶部 */
|
||||||
@ -24,10 +27,8 @@ $primary-color: #0877F1;
|
|||||||
background: #fff;
|
background: #fff;
|
||||||
border-bottom: 1rpx solid #f0f0f0;
|
border-bottom: 1rpx solid #f0f0f0;
|
||||||
padding: 20rpx 32rpx;
|
padding: 20rpx 32rpx;
|
||||||
z-index: 100;
|
z-index: 10;
|
||||||
flex-shrink: 0; /* 防止被压缩 */
|
flex-shrink: 0;
|
||||||
width: 100%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.patient-info-content {
|
.patient-info-content {
|
||||||
@ -91,15 +92,15 @@ $primary-color: #0877F1;
|
|||||||
}
|
}
|
||||||
|
|
||||||
.chat-content {
|
.chat-content {
|
||||||
flex: 1;
|
position: fixed;
|
||||||
|
top: 100rpx; /* 患者信息栏高度,根据实际调整 */
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 120rpx; /* 输入框高度,根据实际调整 */
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
min-height: 0;
|
transition: bottom 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||||
margin-top: 120rpx;
|
|
||||||
margin-bottom: 0;
|
|
||||||
position: relative;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.chat-content-compressed {
|
.chat-content-compressed {
|
||||||
@ -364,18 +365,24 @@ $primary-color: #0877F1;
|
|||||||
}
|
}
|
||||||
|
|
||||||
.input-section {
|
.input-section {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
border-top: 1rpx solid #e0e0e0;
|
border-top: 1rpx solid #e0e0e0;
|
||||||
position: relative;
|
|
||||||
z-index: 200;
|
z-index: 200;
|
||||||
padding-bottom: env(safe-area-inset-bottom);
|
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
|
transform: translateZ(0); /* 开启硬件加速,提升性能 */
|
||||||
|
transition: bottom 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||||
|
will-change: bottom;
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-toolbar {
|
.input-toolbar {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 16rpx 20rpx;
|
padding: 12rpx 20rpx;
|
||||||
|
padding-bottom: env(safe-area-inset-bottom);
|
||||||
gap: 12rpx;
|
gap: 12rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -499,7 +506,8 @@ $primary-color: #0877F1;
|
|||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
border-top: 1rpx solid #eee;
|
border-top: 1rpx solid #eee;
|
||||||
padding: 20rpx 0 40rpx 60rpx;
|
padding: 20rpx 0 20rpx 60rpx;
|
||||||
|
padding-bottom: env(safe-area-inset-bottom);
|
||||||
gap: 40rpx 50rpx;
|
gap: 40rpx 50rpx;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
background-color: #f5f5f5;
|
background-color: #f5f5f5;
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="input-section">
|
<view class="input-section" :style="{ bottom: props.keyboardHeight + 'px' }">
|
||||||
<view class="input-toolbar">
|
<view class="input-toolbar">
|
||||||
<view @click="toggleVoiceInput" class="voice-toggle-btn">
|
<view @click="toggleVoiceInput" class="voice-toggle-btn">
|
||||||
<image v-if="showVoiceInput" src="/static/jianpan.png" class="voice-toggle-icon" mode="aspectFit"></image>
|
<image v-if="showVoiceInput" src="/static/jianpan.png" class="voice-toggle-icon" mode="aspectFit"></image>
|
||||||
@ -8,7 +8,7 @@
|
|||||||
<view class="input-area">
|
<view class="input-area">
|
||||||
<textarea v-if="!showVoiceInput" class="text-input" v-model="inputText" placeholder="我来说两句..."
|
<textarea v-if="!showVoiceInput" class="text-input" v-model="inputText" placeholder="我来说两句..."
|
||||||
@confirm="sendTextMessage" @focus="handleInputFocus" @input="handleInput"
|
@confirm="sendTextMessage" @focus="handleInputFocus" @input="handleInput"
|
||||||
:auto-height="true" :show-confirm-bar="false" :adjust-position="true" :cursor-spacing="30"
|
:auto-height="true" :show-confirm-bar="false" :adjust-position="false"
|
||||||
/>
|
/>
|
||||||
<input v-else class="voice-input-btn" :class="{ recording: isRecording }" @touchstart="startRecord"
|
<input v-else class="voice-input-btn" :class="{ recording: isRecording }" @touchstart="startRecord"
|
||||||
@touchmove="onRecordTouchMove" @touchend="stopRecord" @touchcancel="cancelRecord" :placeholder="isRecording ? '松开发送' : '按住说话'" disabled>
|
@touchmove="onRecordTouchMove" @touchend="stopRecord" @touchcancel="cancelRecord" :placeholder="isRecording ? '松开发送' : '按住说话'" disabled>
|
||||||
@ -84,6 +84,7 @@ const props = defineProps({
|
|||||||
corpId: { type: String, default: "" },
|
corpId: { type: String, default: "" },
|
||||||
orderStatus: { type: String, default: "" },
|
orderStatus: { type: String, default: "" },
|
||||||
isGenerating: { type: Boolean, default: false },
|
isGenerating: { type: Boolean, default: false },
|
||||||
|
keyboardHeight: { type: Number, default: 0 },
|
||||||
});
|
});
|
||||||
|
|
||||||
// Emits
|
// Emits
|
||||||
|
|||||||
@ -1,5 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="chat-page">
|
<page-meta :page-style="'overflow:' + (keyboardHeight > 0 ? 'hidden' : 'visible')"></page-meta>
|
||||||
|
<view class="chat-page" :style="{ paddingBottom: keyboardHeight + 'px' }">
|
||||||
<!-- 患者信息栏 -->
|
<!-- 患者信息栏 -->
|
||||||
<view class="patient-info-bar" v-if="patientInfo.name">
|
<view class="patient-info-bar" v-if="patientInfo.name">
|
||||||
<view class="patient-info-content">
|
<view class="patient-info-content">
|
||||||
@ -18,6 +19,7 @@
|
|||||||
<!-- 聊天消息区域 -->
|
<!-- 聊天消息区域 -->
|
||||||
<scroll-view
|
<scroll-view
|
||||||
class="chat-content"
|
class="chat-content"
|
||||||
|
:style="{ bottom: (keyboardHeight > 0 ? keyboardHeight + 60 : 60) + 'px' }"
|
||||||
scroll-y="true"
|
scroll-y="true"
|
||||||
enhanced="true"
|
enhanced="true"
|
||||||
bounces="false"
|
bounces="false"
|
||||||
@ -168,6 +170,7 @@
|
|||||||
:patientInfo="patientInfo"
|
:patientInfo="patientInfo"
|
||||||
:orderStatus="orderStatus"
|
:orderStatus="orderStatus"
|
||||||
:isGenerating="isGenerating"
|
:isGenerating="isGenerating"
|
||||||
|
:keyboardHeight="keyboardHeight"
|
||||||
@scrollToBottom="() => scrollToBottom(true)"
|
@scrollToBottom="() => scrollToBottom(true)"
|
||||||
@messageSent="() => scrollToBottom(true)"
|
@messageSent="() => scrollToBottom(true)"
|
||||||
@endConsult="handleEndConsult"
|
@endConsult="handleEndConsult"
|
||||||
@ -302,6 +305,10 @@ const chatInfo = ref({
|
|||||||
userID: "",
|
userID: "",
|
||||||
avatar: "/static/home/avatar.svg",
|
avatar: "/static/home/avatar.svg",
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 键盘高度
|
||||||
|
const keyboardHeight = ref(0);
|
||||||
|
|
||||||
// 评价弹窗状态
|
// 评价弹窗状态
|
||||||
const isEvaluationPopupOpen = ref(false);
|
const isEvaluationPopupOpen = ref(false);
|
||||||
|
|
||||||
@ -458,6 +465,22 @@ onLoad((options) => {
|
|||||||
chatInfo.value.userID = decodeQueryValue(options.userID);
|
chatInfo.value.userID = decodeQueryValue(options.userID);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 监听键盘高度变化
|
||||||
|
uni.onKeyboardHeightChange((res) => {
|
||||||
|
console.log("键盘高度变化:", res.height);
|
||||||
|
const oldHeight = keyboardHeight.value;
|
||||||
|
keyboardHeight.value = res.height;
|
||||||
|
|
||||||
|
// 键盘弹出时(从0变为非0),自动滚动到底部
|
||||||
|
if (oldHeight === 0 && res.height > 0) {
|
||||||
|
nextTick(() => {
|
||||||
|
setTimeout(() => {
|
||||||
|
scrollToBottom(true);
|
||||||
|
}, 100);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
checkLoginAndInitTIM();
|
checkLoginAndInitTIM();
|
||||||
updateNavigationTitle();
|
updateNavigationTitle();
|
||||||
});
|
});
|
||||||
@ -888,16 +911,6 @@ onShow(() => {
|
|||||||
|
|
||||||
// 监听回访任务发送事件
|
// 监听回访任务发送事件
|
||||||
uni.$on("send-followup-message", handleSendFollowUpMessage);
|
uni.$on("send-followup-message", handleSendFollowUpMessage);
|
||||||
|
|
||||||
// 监听键盘高度变化,自动滚动到底部
|
|
||||||
uni.onKeyboardHeightChange((res) => {
|
|
||||||
if (res.height > 0) {
|
|
||||||
// 键盘弹出,延迟滚动到底部
|
|
||||||
setTimeout(() => {
|
|
||||||
scrollToBottom(true);
|
|
||||||
}, 100);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
|
||||||
// 处理发送回访任务消息
|
// 处理发送回访任务消息
|
||||||
@ -1146,6 +1159,9 @@ const handleOpenConsult = async () => {
|
|||||||
onUnmounted(() => {
|
onUnmounted(() => {
|
||||||
clearMessageCache();
|
clearMessageCache();
|
||||||
|
|
||||||
|
// 移除键盘监听
|
||||||
|
uni.offKeyboardHeightChange();
|
||||||
|
|
||||||
timChatManager.setCallback("onSDKReady", null);
|
timChatManager.setCallback("onSDKReady", null);
|
||||||
timChatManager.setCallback("onSDKNotReady", null);
|
timChatManager.setCallback("onSDKNotReady", null);
|
||||||
timChatManager.setCallback("onMessageReceived", null);
|
timChatManager.setCallback("onMessageReceived", null);
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user