忽略 unpackage 目录

pages/chat/ChatInputArea.vue

@@ -0,0 +1,107 @@
+<template>
+  <view class="area-input">
+    <!-- 发送语音 -->
+    <view class="input-container-voice">
+      <image src='/static/input_voice_icon.png'></image>
+    </view>
+    <!-- 输入框 -->
+    <textarea
+      class="textarea"
+      type="text"
+      placeholder="快速订票，呼叫服务"
+      cursor-spacing="65"
+      confirm-type='done'
+      v-model="inputMessage"
+      @confirm="sendMessage"
+      @touchend="handleNoHideKeyboard"
+      :confirm-hold="true"
+      auto-height
+      :show-confirm-bar='false'
+      :hold-keyboard="holdKeyboard"
+      maxlength="300"
+    />
+    <view class="input-container-send" @click="sendMessage">
+      <image src='/static/input_send_icon.png'></image>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+
+const props = defineProps({
+  inputMessage: String,
+  holdKeyboard: Boolean
+})
+const emit = defineEmits(['update:inputMessage', 'send', 'noHideKeyboard'])
+
+const inputMessage = ref(props.inputMessage || '')
+
+// 保持和父组件同步
+watch(() => props.inputMessage, (val) => {
+  inputMessage.value = val
+})
+
+const sendMessage = () => {
+  if (!inputMessage.value.trim()) return;
+  emit('send', inputMessage.value)
+  inputMessage.value = ''
+  emit('update:inputMessage', inputMessage.value)
+}
+
+const handleNoHideKeyboard = () => {
+  emit('noHideKeyboard')
+}
+
+</script>
+
+<style scoped lang="scss">
+	.area-input {
+		display: flex;
+		align-items: center;
+		border-radius: 22px;
+		background-color: #FFFFFF;
+		box-shadow: 0px 0px 20px 0px rgba(52,25,204,0.05);
+		margin: 0 12px;
+				
+		.input-container-voice {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			width: 44px;
+			height: 44px;
+			flex-shrink: 0;
+			align-self: flex-end;
+			
+			image {
+				width: 22px;
+				height: 22px;
+			}
+		}
+		
+		.input-container-send {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			width: 44px;
+			height: 44px;
+			flex-shrink: 0;
+			align-self: flex-end;
+			
+			image {
+				width: 28px;
+				height: 28px;
+			}
+		}
+		
+		.textarea {
+			flex: 1;
+			max-height: 92px;
+			min-height: 22px;
+			font-size: 16px;
+			line-height: 22px;
+			margin-bottom: 2px;
+			align-items: center;
+		}
+	}
+</style>