feat: 首页欢迎语组件布局调整
This commit is contained in:
duanshuwen
@@ -1,145 +1,122 @@
|
||||
<template>
|
||||
<view class="chat-container" @touchend="handleTouchEnd">
|
||||
<!-- 顶部的背景 -->
|
||||
<ChatTopBgImg class="chat-container-bg"></ChatTopBgImg>
|
||||
<view class="flex flex-col h-screen" @touchend="handleTouchEnd">
|
||||
<!-- 顶部自定义导航栏 -->
|
||||
<view class="header" :style="{ paddingTop: statusBarHeight + 'px' }">
|
||||
<ChatTopNavBar @openDrawer="openDrawer" />
|
||||
</view>
|
||||
|
||||
<!-- 消息列表（可滚动区域） -->
|
||||
<scroll-view
|
||||
class="main flex-full"
|
||||
scroll-y
|
||||
:scroll-top="scrollTop"
|
||||
:scroll-with-animation="true"
|
||||
@scroll="handleScroll"
|
||||
@scrolltolower="handleScrollToLower"
|
||||
>
|
||||
<!-- welcome栏 -->
|
||||
<ChatTopWelcome :mainPageDataModel="mainPageDataModel" />
|
||||
|
||||
<view class="chat-content">
|
||||
<!-- 顶部自定义导航栏 -->
|
||||
<view
|
||||
class="nav-bar-container"
|
||||
:style="{
|
||||
paddingTop: statusBarHeight + 'px',
|
||||
}"
|
||||
class="area-msg-list-content"
|
||||
v-for="item in chatMsgList"
|
||||
:key="item.msgId"
|
||||
:id="item.msgId"
|
||||
>
|
||||
<ChatTopNavBar @openDrawer="openDrawer"></ChatTopNavBar>
|
||||
</view>
|
||||
<template v-if="item.msgType === MessageRole.AI">
|
||||
<ChatCardAI
|
||||
class="message-item-ai"
|
||||
:key="`ai-${item.msgId}-${item.msg ? item.msg.length : 0}`"
|
||||
:text="item.msg || ''"
|
||||
:isLoading="item.isLoading"
|
||||
>
|
||||
<template #content v-if="item.toolCall">
|
||||
<QuickBookingComponent
|
||||
v-if="item.toolCall.componentName === CompName.quickBookingCard"
|
||||
/>
|
||||
<DiscoveryCardComponent
|
||||
v-else-if="
|
||||
item.toolCall.componentName === CompName.discoveryCard
|
||||
"
|
||||
/>
|
||||
<CreateServiceOrder
|
||||
v-else-if="
|
||||
item.toolCall.componentName === CompName.createWorkOrderCard
|
||||
"
|
||||
/>
|
||||
<Feedback
|
||||
v-else-if="
|
||||
item.toolCall.componentName === CompName.feedbackCard
|
||||
"
|
||||
:toolCall="item.toolCall"
|
||||
/>
|
||||
<DetailCardCompontent
|
||||
v-else-if="
|
||||
item.toolCall.componentName ===
|
||||
CompName.pictureAndCommodityCard
|
||||
"
|
||||
:toolCall="item.toolCall"
|
||||
/>
|
||||
<AddCarCrad
|
||||
v-else-if="
|
||||
item.toolCall.componentName === CompName.enterLicensePlateCard
|
||||
"
|
||||
:toolCall="item.toolCall"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<!-- 消息列表（可滚动区域） -->
|
||||
<scroll-view
|
||||
:scroll-top="scrollTop"
|
||||
scroll-y
|
||||
:scroll-with-animation="true"
|
||||
class="area-msg-list"
|
||||
@scroll="handleScroll"
|
||||
@scrolltolower="handleScrollToLower"
|
||||
>
|
||||
<!-- welcome栏 -->
|
||||
<ChatTopWelcome
|
||||
class="chat-container-top-bannar"
|
||||
:initPageImages="mainPageDataModel.initPageImages"
|
||||
:welcomeContent="mainPageDataModel.welcomeContent"
|
||||
>
|
||||
</ChatTopWelcome>
|
||||
|
||||
<view
|
||||
class="area-msg-list-content"
|
||||
v-for="item in chatMsgList"
|
||||
:key="item.msgId"
|
||||
:id="item.msgId"
|
||||
>
|
||||
<template v-if="item.msgType === MessageRole.AI">
|
||||
<ChatCardAI
|
||||
class="message-item-ai"
|
||||
:key="`ai-${item.msgId}-${item.msg ? item.msg.length : 0}`"
|
||||
:text="item.msg || ''"
|
||||
:isLoading="item.isLoading"
|
||||
>
|
||||
<template #content v-if="item.toolCall">
|
||||
<QuickBookingComponent
|
||||
v-if="
|
||||
item.toolCall.componentName === CompName.quickBookingCard
|
||||
"
|
||||
/>
|
||||
<DiscoveryCardComponent
|
||||
v-else-if="
|
||||
item.toolCall.componentName === CompName.discoveryCard
|
||||
"
|
||||
/>
|
||||
<CreateServiceOrder
|
||||
v-else-if="
|
||||
item.toolCall.componentName === CompName.createWorkOrderCard
|
||||
"
|
||||
/>
|
||||
<Feedback
|
||||
v-else-if="
|
||||
item.toolCall.componentName === CompName.feedbackCard
|
||||
"
|
||||
:toolCall="item.toolCall"
|
||||
/>
|
||||
<DetailCardCompontent
|
||||
v-else-if="
|
||||
item.toolCall.componentName ===
|
||||
CompName.pictureAndCommodityCard
|
||||
"
|
||||
:toolCall="item.toolCall"
|
||||
/>
|
||||
<AddCarCrad
|
||||
v-else-if="
|
||||
item.toolCall.componentName ===
|
||||
CompName.enterLicensePlateCard
|
||||
"
|
||||
:toolCall="item.toolCall"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template #footer>
|
||||
<!-- 这个是底部 -->
|
||||
<AttachListComponent
|
||||
v-if="item.question"
|
||||
:question="item.question"
|
||||
@replySent="handleReply"
|
||||
/>
|
||||
</template>
|
||||
</ChatCardAI>
|
||||
</template>
|
||||
|
||||
<template v-else-if="item.msgType === MessageRole.ME">
|
||||
<ChatCardMine class="message-item-mine" :text="item.msg">
|
||||
</ChatCardMine>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<ChatCardOther class="message-item-other" :text="item.msg">
|
||||
<ChatMoreTips
|
||||
<template #footer>
|
||||
<!-- 这个是底部 -->
|
||||
<AttachListComponent
|
||||
v-if="item.question"
|
||||
:question="item.question"
|
||||
@replySent="handleReply"
|
||||
:itemList="mainPageDataModel.guideWords"
|
||||
/>
|
||||
</template>
|
||||
</ChatCardAI>
|
||||
</template>
|
||||
|
||||
<ActivityListComponent
|
||||
v-if="
|
||||
mainPageDataModel.activityList &&
|
||||
mainPageDataModel.activityList.length > 0
|
||||
"
|
||||
:activityList="mainPageDataModel.activityList"
|
||||
/>
|
||||
<template v-else-if="item.msgType === MessageRole.ME">
|
||||
<ChatCardMine class="message-item-mine" :text="item.msg">
|
||||
</ChatCardMine>
|
||||
</template>
|
||||
|
||||
<RecommendPostsComponent
|
||||
v-if="
|
||||
mainPageDataModel.recommendTheme &&
|
||||
mainPageDataModel.recommendTheme.length > 0
|
||||
"
|
||||
:recommendThemeList="mainPageDataModel.recommendTheme"
|
||||
/>
|
||||
</ChatCardOther>
|
||||
</template>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<template v-else>
|
||||
<ChatCardOther class="message-item-other" :text="item.msg">
|
||||
<ActivityListComponent
|
||||
v-if="
|
||||
mainPageDataModel.activityList &&
|
||||
mainPageDataModel.activityList.length > 0
|
||||
"
|
||||
:activityList="mainPageDataModel.activityList"
|
||||
/>
|
||||
|
||||
<!-- 输入框区域 -->
|
||||
<view class="footer-area">
|
||||
<ChatQuickAccess @replySent="handleReplyInstruct" />
|
||||
<ChatInputArea
|
||||
ref="inputAreaRef"
|
||||
v-model="inputMessage"
|
||||
:holdKeyboard="holdKeyboard"
|
||||
:is-session-active="isSessionActive"
|
||||
:stop-request="stopRequest"
|
||||
@send="sendMessageAction"
|
||||
@noHideKeyboard="handleNoHideKeyboard"
|
||||
@keyboardShow="handleKeyboardShow"
|
||||
@keyboardHide="handleKeyboardHide"
|
||||
/>
|
||||
<RecommendPostsComponent
|
||||
v-if="
|
||||
mainPageDataModel.recommendTheme &&
|
||||
mainPageDataModel.recommendTheme.length > 0
|
||||
"
|
||||
:recommendThemeList="mainPageDataModel.recommendTheme"
|
||||
/>
|
||||
</ChatCardOther>
|
||||
</template>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 输入框区域 -->
|
||||
<view class="footer">
|
||||
<ChatQuickAccess @replySent="handleReplyInstruct" />
|
||||
<ChatInputArea
|
||||
ref="inputAreaRef"
|
||||
v-model="inputMessage"
|
||||
:holdKeyboard="holdKeyboard"
|
||||
:is-session-active="isSessionActive"
|
||||
:stop-request="stopRequest"
|
||||
@send="sendMessageAction"
|
||||
@noHideKeyboard="handleNoHideKeyboard"
|
||||
@keyboardShow="handleKeyboardShow"
|
||||
@keyboardHide="handleKeyboardHide"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
@@ -157,13 +134,11 @@ import {
|
||||
import { WSS_URL } from "@/request/base/baseUrl";
|
||||
import { MessageRole, MessageType, CompName } from "@/model/ChatModel";
|
||||
import ChatTopWelcome from "../ChatTopWelcome/index.vue";
|
||||
import ChatTopBgImg from "../ChatTopBgImg/index.vue";
|
||||
import ChatTopNavBar from "../ChatTopNavBar/index.vue";
|
||||
import ChatCardAI from "../ChatCardAi/index.vue";
|
||||
import ChatCardMine from "../ChatCardMine/index.vue";
|
||||
import ChatCardOther from "../ChatCardOther/index.vue";
|
||||
import ChatQuickAccess from "../ChatQuickAccess/index.vue";
|
||||
import ChatMoreTips from "../ChatMoreTips/index.vue";
|
||||
import ChatInputArea from "../ChatInputArea/index.vue";
|
||||
import QuickBookingComponent from "../../module/QuickBookingComponent/index.vue";
|
||||
import DiscoveryCardComponent from "../../module/DiscoveryCardComponent/index.vue";
|
||||
|
||||
Reference in New Issue
Block a user