input 输入框样式调整11

This commit is contained in:
wangdongbo 2026-02-05 14:02:35 +08:00
parent f0def89961
commit 620a7b8f7e
3 changed files with 55 additions and 28 deletions

View File

@ -62,17 +62,29 @@
}}</view> }}</view>
</view> </view>
<view class="content">{{ i.taskContent || "暂无内容" }}</view> <view class="content">{{ i.taskContent || "暂无内容" }}</view>
<view v-if="i.sendContent || (i.fileList && i.fileList.length > 0)" class="send-content-wrapper"> <view
v-if="i.sendContent || (i.fileList && i.fileList.length > 0)"
class="send-content-wrapper"
>
<view class="send-content-section"> <view class="send-content-section">
<view class="send-content-label">发送内容:</view> <view class="send-content-label">发送内容:</view>
<view class="send-content-body"> <view class="send-content-body">
<view v-if="i.sendContent" class="send-text">{{ i.sendContent }}</view> <view v-if="i.sendContent" class="send-text">{{
<view v-if="i.fileList && i.fileList.length > 0" class="file-list"> i.sendContent
<view v-for="(file, idx) in i.fileList" :key="idx" class="file-item" :class="`file-type-${file.type}`"> }}</view>
<view v-if="file.type === 'image'" class="file-icon">🖼</view> <view
<view v-else-if="file.type === 'article'" class="file-icon">📄</view> v-if="i.fileList && i.fileList.length > 0"
<view v-else-if="file.type === 'questionnaire'" class="file-icon">📋</view> class="file-list"
<view class="file-name">{{ file.file?.name || file.name }}</view> >
<view
v-for="(file, idx) in i.fileList"
:key="idx"
class="file-item"
:class="`file-type-${file.type}`"
>
<view class="file-name">{{
file.file?.name || file.name
}}</view>
</view> </view>
</view> </view>
</view> </view>
@ -516,6 +528,7 @@ async function sendFollowUp(todo) {
} }
// 2. // 2.
debugger;
if (Array.isArray(todo.fileList)) { if (Array.isArray(todo.fileList)) {
for (const file of todo.fileList) { for (const file of todo.fileList) {
if (file.type === "image" && file.URL) { if (file.type === "image" && file.URL) {

View File

@ -10,7 +10,7 @@ $primary-color: #0877F1;
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
bottom: 20rpx; bottom: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-color: #f5f5f5; background-color: #f5f5f5;
@ -357,30 +357,35 @@ $primary-color: #0877F1;
background: #fff; background: #fff;
border-top: 1rpx solid #e0e0e0; border-top: 1rpx solid #e0e0e0;
position: relative; position: relative;
z-index: 200; // 确保输入区域在评价卡片之上但在弹窗之下 z-index: 200;
// padding: 32rpx 16rpx 28rpx 16rpx; padding-bottom: env(safe-area-inset-bottom);
} }
.input-toolbar { .input-toolbar {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 28rpx 0 28rpx 0; padding: 16rpx 20rpx;
gap: 12rpx;
} }
.voice-toggle-btn{
.voice-toggle-btn {
width: 56rpx;
height: 56rpx; height: 56rpx;
display: flex; display: flex;
align-items: center; align-items: center;
flex: none; justify-content: center;
padding-left: 20rpx; flex-shrink: 0;
padding: 0;
} }
.plus-btn { .plus-btn {
width: 56rpx; width: 56rpx;
height: 56rpx; height: 56rpx;
display: flex; display: flex;
align-items: center; align-items: center;
flex: none; justify-content: center;
padding-right: 20rpx; flex-shrink: 0;
padding: 0;
} }
.send-btn { .send-btn {
@ -390,16 +395,16 @@ $primary-color: #0877F1;
font-weight: 600; font-weight: 600;
border: none; border: none;
border-radius: 40rpx; border-radius: 40rpx;
height: 64rpx; height: 56rpx;
min-width: 112rpx; min-width: 112rpx;
padding: 0 32rpx; padding: 0 32rpx;
margin-left: 16rpx;
box-shadow: 0 2rpx 8rpx rgba(56, 118, 246, 0.08); box-shadow: 0 2rpx 8rpx rgba(56, 118, 246, 0.08);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
transition: background 0.2s; transition: background 0.2s;
flex: none; flex-shrink: 0;
white-space: nowrap;
} }
.send-btn:active { .send-btn:active {
@ -418,10 +423,9 @@ $primary-color: #0877F1;
.text-input, .text-input,
.voice-input-btn { .voice-input-btn {
flex: 1; flex: 1;
padding: 16rpx 46rpx; padding: 16rpx;
background-color: #f3f5fa; background-color: #f3f5fa;
border-radius: 20rpx; border-radius: 10rpx;
margin: 0 16rpx;
font-size: 28rpx; font-size: 28rpx;
min-height: 80rpx; min-height: 80rpx;
max-height: 200rpx; max-height: 200rpx;
@ -436,9 +440,10 @@ $primary-color: #0877F1;
} }
.text-input { .text-input {
padding: 16rpx 46rpx; padding: 20rpx;
display: block; display: block;
line-height: 1.5; line-height: 1.5;
height: 80rpx;
} }
.voice-input-btn { .voice-input-btn {

View File

@ -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" :auto-height="true" :show-confirm-bar="false" :adjust-position="true" :cursor-spacing="40"
/> />
<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>
@ -82,7 +82,12 @@ const props = defineProps({
}); });
// Emits // Emits
const emit = defineEmits(["messageSent", "scrollToBottom", "endConsult", "openConsult"]); const emit = defineEmits([
"messageSent",
"scrollToBottom",
"endConsult",
"openConsult",
]);
// //
const inputText = ref(""); const inputText = ref("");
@ -425,7 +430,11 @@ const handleOpenConsult = () => {
const morePanelButtons = computed(() => { const morePanelButtons = computed(() => {
const buttons = [ const buttons = [
{ text: "照片", icon: "/static/icon/zhaopian.png", action: showImagePicker }, {
text: "照片",
icon: "/static/icon/zhaopian.png",
action: showImagePicker,
},
{ {
text: "回访任务", text: "回访任务",
icon: "/static/icon/huifangrenwu.png", icon: "/static/icon/huifangrenwu.png",