|
|
@@ -1,5 +1,5 @@
|
|
|
<template>
|
|
|
- <div class="container" :style="{height: `calc(100% - ${keyboardHeight}px)` }">
|
|
|
+ <div class="container" :style="{height: `calc(100% - ${currentBottomHeight}px)`}">
|
|
|
<div class="chat-bg"></div>
|
|
|
<div class="header-chat">
|
|
|
<svg-icon class="page-icon" name="lf-arrow" @click="goBack" />
|
|
|
@@ -7,9 +7,9 @@
|
|
|
<svg-icon class="page-icon" name="more" @click="goDetail" />
|
|
|
</div>
|
|
|
<div class="chat-list">
|
|
|
- <div v-for="(item, index) in 2">
|
|
|
+ <div v-for="(item, index) in 1">
|
|
|
<div class="chat-time">23:{{ 20 + index }}</div>
|
|
|
- <div class="box" v-for="(text, i) in 10">
|
|
|
+ <div class="box" v-for="(text, i) in 3">
|
|
|
<div class="list-item" :class="i % 2 === 0 ? '' : 'flex-reverse'">
|
|
|
<van-image
|
|
|
class="list-img"
|
|
|
@@ -60,62 +60,91 @@
|
|
|
@focus="onFocus"
|
|
|
placeholder="输入文本"
|
|
|
/>
|
|
|
- <svg-icon class="page-icon mr12" name="emoji" />
|
|
|
- <svg-icon class="page-icon" name="add2" />
|
|
|
+ <svg-icon class="page-icon mr12" name="emoji" @click="toggleAppBox(1)"/>
|
|
|
+ <svg-icon class="page-icon" name="add2" @click="toggleAppBox(2)"/>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 表情面板 -->
|
|
|
+ <div class="app-box" v-show="showEmoji" :style="{height: `${appBoxHeight}px`}">
|
|
|
+ 😀 😃 😄 😁 😆 😅 😂 🤣 😊 😇 🙂 🙃 😉 😌 😍
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 工具栏面板 -->
|
|
|
+ <div class="app-box" v-show="showTools" :style="{height: `${appBoxHeight}px`}">
|
|
|
+ <!-- 工具栏内容：可放按钮、图标等 -->
|
|
|
+ <div class="tool-btn">照片</div>
|
|
|
+ <div class="tool-btn">视频</div>
|
|
|
+ <div class="tool-btn">语音通话</div>
|
|
|
+ <div class="tool-btn">名片</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
-<script setup>
|
|
|
+<script setup>
|
|
|
+import { ref, computed } from "vue";
|
|
|
import { useRouter } from "vue-router";
|
|
|
import { Keyboard } from '@capacitor/keyboard';
|
|
|
-import { getmessage } from "@/api/path/im.api";
|
|
|
-import { useWalletStore } from "@/stores/modules/walletStore";
|
|
|
-const walletStore = useWalletStore();
|
|
|
-const router = useRouter();
|
|
|
-const route = useRoute();
|
|
|
|
|
|
+const router = useRouter();
|
|
|
const text = ref("");
|
|
|
-const keyboardHeight = ref(10);
|
|
|
+
|
|
|
+// 状态管理
|
|
|
+const keyboardHeight = ref(0);
|
|
|
+const showEmoji = ref(false);
|
|
|
+const showTools = ref(false);
|
|
|
+const appBoxHeight = ref(260); // 面板高度，可根据需要调整
|
|
|
+
|
|
|
+// 计算当前底部总高度
|
|
|
+const currentBottomHeight = computed(() => {
|
|
|
+ // 优先级：键盘 > 表情面板 > 工具面板 > 默认高度
|
|
|
+ if (keyboardHeight.value > 0) {
|
|
|
+ return keyboardHeight.value; // 只计算键盘高度
|
|
|
+ }
|
|
|
+ if (showEmoji.value || showTools.value) {
|
|
|
+ return appBoxHeight.value; // 只计算面板高度
|
|
|
+ }
|
|
|
+ return 0; // 默认底部间距
|
|
|
+});
|
|
|
+
|
|
|
+// 切换面板显示
|
|
|
+const toggleAppBox = async (type) => {
|
|
|
+ // 先隐藏键盘（如果正在显示）
|
|
|
+ await Keyboard.hide();
|
|
|
+ keyboardHeight.value = 0; // 立即重置键盘高度
|
|
|
|
|
|
-const goBack = () => {
|
|
|
- router.push("im");
|
|
|
+ // 切换面板状态
|
|
|
+ if (type === 1) {
|
|
|
+ showEmoji.value = !showEmoji.value;
|
|
|
+ showTools.value = false;
|
|
|
+ } else {
|
|
|
+ showTools.value = !showTools.value;
|
|
|
+ showEmoji.value = false;
|
|
|
+ }
|
|
|
};
|
|
|
-const goDetail = () => {
|
|
|
- router.push("detail");
|
|
|
-};
|
|
|
|
|
|
-const onFocus = () => {
|
|
|
- // 初始化
|
|
|
+const onFocus = () => {
|
|
|
+ // 隐藏所有面板
|
|
|
+ showEmoji.value = false;
|
|
|
+ showTools.value = false;
|
|
|
setupKeyboardListeners();
|
|
|
-}
|
|
|
+};
|
|
|
|
|
|
-// 监听键盘事件
|
|
|
+// 键盘监听
|
|
|
const setupKeyboardListeners = async () => {
|
|
|
- // 获取键盘高度（仅在键盘显示时有效）
|
|
|
Keyboard.addListener('keyboardWillShow', (info) => {
|
|
|
- keyboardHeight.value = info.keyboardHeight
|
|
|
+ keyboardHeight.value = info.keyboardHeight;
|
|
|
});
|
|
|
+
|
|
|
Keyboard.addListener('keyboardWillHide', () => {
|
|
|
- console.log('键盘已隐藏');
|
|
|
- keyboardHeight.value = 10;
|
|
|
+ keyboardHeight.value = 0;
|
|
|
});
|
|
|
};
|
|
|
-// 获取消息数据
|
|
|
-const getmessageList = async () => {
|
|
|
- const res = await getmessage({messageType:1,uuid:walletStore.account,friendUsername:route.query.uuid});
|
|
|
- console.log(res)
|
|
|
-}
|
|
|
|
|
|
-onMounted(()=>{
|
|
|
- getmessageList();
|
|
|
-})
|
|
|
onUnmounted(() => {
|
|
|
Keyboard.removeAllListeners();
|
|
|
});
|
|
|
-
|
|
|
-
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
@@ -134,8 +163,6 @@ onUnmounted(() => {
|
|
|
flex-shrink: 0;
|
|
|
}
|
|
|
.container {
|
|
|
- // :style="{height: handleFocus }"
|
|
|
- // height: calc(100% - 10px);
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
.chat-bg {
|
|
|
@@ -293,4 +320,24 @@ onUnmounted(() => {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+.app-box {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 260px;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ height: 260px;
|
|
|
+ background: white;
|
|
|
+ transition: transform 0.3s ease;
|
|
|
+ transform: translateY(100%);
|
|
|
+ background-color: yellow;
|
|
|
+
|
|
|
+ &.visible {
|
|
|
+ transform: translateY(0);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.page-foot {
|
|
|
+ position: relative;
|
|
|
+ z-index: 10; /* 确保输入框在上层 */
|
|
|
+}
|
|
|
</style>
|
