zoujing/YGChatCS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat： 预定组件对接

Browse Source
This commit is contained in:
zoujing
2025-07-30 21:12:20 +08:00
parent 2ecacb127b
commit e15dea35c8
5 changed files with 153 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
constant/constant.js Normal file
View File

@@ -0,0 +1,2 @@
export const SCROLL_TO_BOTTOM = 'SCROLL_TO_BOTTOM'

11
pages/booking/QuickBookingComponent.vue
View File

@@ -4,7 +4,7 @@
<view v-for="item in commodityGroupDTOList" :key="item.title">
<QuickBookingContentList :commodityGroupDTO="item" />
<QuickBookingContentList :commodityDTO="item" />
</view>
</view>
@@ -15,15 +15,16 @@
import { defineProps, ref } from 'vue'
import { onMounted } from 'vue'
import { quickBookingComponent } from '../../request/api/QuickBookingComponent'
import { SCROLL_TO_BOTTOM } from '../../constant/constant'
const commodityGroupDTOList = ref([])
const loadQuickBookingComponent = async () => {
const res = await quickBookingComponent('2025-07-29')
if(res.code === 0 && res.data) {
commodityGroupDTOList.value = res.data.commodityGroupDTOList
commodityGroupDTOList.value.push(...res.data.commodityGroupDTOList)
uni.$emit(SCROLL_TO_BOTTOM, true)
}
console.log(res)
}
onMounted(() => {
@@ -37,10 +38,12 @@
.container {
width: 100%;
flex: 1;
margin-bottom: 12px;
.calendar {
width: 100%;
height: 58px;
margin: 12px 0 6px;
background-color: rgba(140,236,255,0.24);
}

159
pages/booking/QuickBookingContentList.vue
View File

@@ -6,14 +6,27 @@
</view>
<view class="container-scroll">
<view class="mk-card-item" v-for="(item, index) in commodityDTO.commodityList" :key="item.commodityName">
<image :src="item.commodityIcon" mode="widthFix"></image>
<text>{{ item.commodityName }}</text>
<view></view>
<text>·往返观光车票</text>
<text>·营业时间：9:00—22:00</text>
<view>
<text>￥120/人</text>
<text> 下单</text>
<view class="card-badge">超值推荐</view>
<image class="card-img" :src="item.commodityIcon" mode="widthFix" />
<view class="card-content">
<view class="card-title-column">
<text class="card-title">{{ item.commodityName }}</text>
<view class="card-tags">
<text class="card-tag">随时可退</text>
<text class="card-tag">民俗表演</text>
</view>
</view>
<view class="card-desc">· 往返观光车票</view>
<view class="card-desc">· 营业时间：9:00-22:00</view>
<view class="card-bottom-row">
<view class="card-price-row">
<text class="card-price-fu">￥</text>
<text class="card-price">{{ item.commodityPrice }}</text>
<text class="card-unit">/人</text>
</view>
<text class="card-btn">下单</text>
</view>
</view>
</view>
</view>
@@ -57,7 +70,8 @@
display: flex;
flex-direction: row;
overflow-x: auto;
margin-top: 4px;
overflow-y: hidden;
margin: 4px 0;
/* 隐藏滚动条 */
scrollbar-width: none;
@@ -66,27 +80,118 @@
}
.mk-card-item {
display: flex;
flex-direction: column;
position: relative;
display: flex;
flex-direction: column;
align-items: start;
width: 188px;
height: 244px;
background-color: #ffffff;
border-radius: 10px;
margin-right: 8px;
padding-bottom: 12px;
.card-badge {
position: absolute;
top: 8px;
left: 8px;
background: #ffe7b2;
color: #b97a00;
font-size: 12px;
padding: 2px 8px;
border-radius: 4px;
z-index: 2;
}
.card-img {
width: 188px;
height: 114px;
border-radius: 10px;
}
.card-content {
box-sizing: border-box;
padding: 10px 12px 0 12px;
display: flex;
flex-direction: column;
align-items: start;
width: 188px;
height: 244px;
background-color: #ffffff;
border-radius: 10px;
margin-right: 8px;
image {
width: 188px;
height: 112px;
width: 100%;
}
.card-title-column {
display: flex;
align-items: start;
flex-direction: column;
}
.card-title {
font-size: 16px;
font-weight: bold;
color: #222;
}
.card-tags {
display: flex;
flex-direction: row;
align-items: start;
padding: 6px 0;
}
.card-tag {
background: #f5f5f5;
color: #ff6600;
font-size: 12px;
border-radius: 4px;
padding: 0 6px;
margin-left: 2px;
}
.card-desc {
font-size: 13px;
color: #888;
margin-top: 2px;
}
.card-bottom-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 8px;
width: 100%;
}
.card-price-row {
.card-price-fu {
color: #ff6600;
font-size: 11px;
font-weight: normal;
}
text {
padding: 12px;
text-align: center;
font-weight: 500;
font-size: 12px;
color: #333333;
.card-price {
color: #ff6600;
font-size: 16px;
font-weight: bold;
}
}
.card-unit {
font-size: 11px;
color: #888;
font-weight: normal;
margin-left: 2px;
}
}
.card-btn {
background: #ff6600;
color: #fff;
font-size: 15px;
border-radius: 20px;
padding: 0 18px;
height: 32px;
line-height: 32px;
}
}
}
}
</style>

12
pages/chat/ChatMainList.vue
View File

@@ -28,7 +28,7 @@
<template v-if="item.msgType === MessageRole.AI">
<ChatCardAI class="message-item-ai" :text="item.msg">
<template v-if="item.toolCall">
<QuickBookingComponent v-if="item.toolCall.componentName === 'createWorkOrderCard'" />
<QuickBookingComponent v-if="item.toolCall.componentName === 'quickBookingCard'" />
</template>
</ChatCardAI>
</template>
@@ -91,6 +91,7 @@
import { mainPageData } from '../../request/api/MainPageData';
import { conversationMsgList } from '../../request/api/ConversationMsgList';
import { recentConversation } from '../../request/api/RecentConversation';
import { SCROLL_TO_BOTTOM } from '../../constant/constant'
/// 导航栏相关
const statusBarHeight = ref(20);
@@ -207,8 +208,17 @@
getMainPageData()
await loadRecentConversation()
loadConversationMsgList()
addNoticeListener()
})
const addNoticeListener = () => {
uni.$on(SCROLL_TO_BOTTOM, (value) => {
setTimeout(() => {
scrollToBottom()
}, 200)
})
}
/// 获取最近一次的会话id
const loadRecentConversation = async() => {
const res = await recentConversation()

2
pages/chat/ChatTopWelcome.vue
View File

@@ -4,7 +4,7 @@
<!-- :style="backgroundStyle" -->
<view class="top-item1-left">
<image :src="initPageImages.welcomeImageUrl"></image>
<text>{{ currentDate }} 多云 -3～6℃ ccc </text>
<text>{{ currentDate }} 多云 -3～6℃ ss </text>
</view>
<view class="top-item1-right">
<image :src="initPageImages.logoImageUrl"></image>