From e15dea35c861dc40c24081b7d0348bbd36d8a9f4 Mon Sep 17 00:00:00 2001 From: zoujing Date: Wed, 30 Jul 2025 21:12:20 +0800 Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=20=E9=A2=84=E5=AE=9A=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E5=AF=B9=E6=8E=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- constant/constant.js | 2 + pages/booking/QuickBookingComponent.vue | 11 +- pages/booking/QuickBookingContentList.vue | 159 ++++++++++++++++++---- pages/chat/ChatMainList.vue | 12 +- pages/chat/ChatTopWelcome.vue | 2 +- 5 files changed, 153 insertions(+), 33 deletions(-) create mode 100644 constant/constant.js diff --git a/constant/constant.js b/constant/constant.js new file mode 100644 index 0000000..27a97f0 --- /dev/null +++ b/constant/constant.js @@ -0,0 +1,2 @@ + +export const SCROLL_TO_BOTTOM = 'SCROLL_TO_BOTTOM' \ No newline at end of file diff --git a/pages/booking/QuickBookingComponent.vue b/pages/booking/QuickBookingComponent.vue index f76a1a1..412c60d 100644 --- a/pages/booking/QuickBookingComponent.vue +++ b/pages/booking/QuickBookingComponent.vue @@ -4,7 +4,7 @@ - + @@ -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); } diff --git a/pages/booking/QuickBookingContentList.vue b/pages/booking/QuickBookingContentList.vue index 3ecaa14..52c030a 100644 --- a/pages/booking/QuickBookingContentList.vue +++ b/pages/booking/QuickBookingContentList.vue @@ -6,14 +6,27 @@ - - {{ item.commodityName }} - - ·往返观光车票 - ·营业时间：9:00—22:00 - - ￥120/人 - 下单 + 超值推荐 + + + + {{ item.commodityName }} + + 随时可退 + 民俗表演 + + + · 往返观光车票 + · 营业时间：9:00-22:00 + + + ￥ + {{ item.commodityPrice }} + /人 + + + 下单 + @@ -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; + } + } + } } \ No newline at end of file diff --git a/pages/chat/ChatMainList.vue b/pages/chat/ChatMainList.vue index 95c6541..dae8e38 100644 --- a/pages/chat/ChatMainList.vue +++ b/pages/chat/ChatMainList.vue @@ -28,7 +28,7 @@ @@ -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() diff --git a/pages/chat/ChatTopWelcome.vue b/pages/chat/ChatTopWelcome.vue index e09dd9a..63f2000 100644 --- a/pages/chat/ChatTopWelcome.vue +++ b/pages/chat/ChatTopWelcome.vue @@ -4,7 +4,7 @@ - {{ currentDate }} 多云 -3～6℃ ccc + {{ currentDate }} 多云 -3～6℃ ss