將搜索組件獲取的值傳遞給父頁面(如 index 頁面)可以通過 自定義事件 或 頁面引用 實現
方法 1:自定義事件(推薦)
步驟 1:搜索組件內觸發事件
在搜索組件的 JS 中,當獲取到搜索值時,觸發自定義事件(如 search),并將值通過 detail 傳遞:
// components/search-component/search-component.js
Component({methods: {onSearchInput(e) {const value = e.detail.value; // 獲取輸入框的值this.triggerEvent('search', { value }); // 觸發事件}}
});
步驟 2:父頁面監聽事件
在父頁面(如 index)的 WXML 中綁定事件:
<!-- index.wxml -->
<search-component bind:search="onSearch"></search-component>
運行 HTML
在父頁面 JS 中定義事件處理函數:
// index.js
Page({onSearch(e) {const searchValue = e.detail.value; // 獲取子組件傳遞的值console.log('搜索值:', searchValue);// 這里可以調用接口或更新頁面數據this.setData({ searchKeyword: searchValue });}
});
Vant Card 卡片的price-top自定義價格上方區域
<van-card num="1" price="{{item.roomFee}}" title="{{item.roomName}}" thumb="{{ item.coverUrl }}" thumb-mode="aspectFill"
><!-- 使用 slot 而不是 # --><view slot="price-top"><text style="text-decoration: line-through; color: #999; font-size: 12px;">原價: {{item.originalPrice}}</text><van-tag type="danger" style="margin-left: 5px;">優惠</van-tag></view>
</van-card>
返回指定民宿在給定日期范圍內每天的預定狀態(可訂或不可訂)。
使用說明
參數說明:
#{roomId}: 要查詢的民宿ID
#{startDate}: 開始日期(格式:‘YYYY-MM-DD’)
#{endDate}: 結束日期(格式:‘YYYY-MM-DD’)
返回結果:
每行包含一個日期和狀態
status = 1: 該日期可訂
status = 0: 該日期已被預定
業務規則:
退房當天14:00前算占用(不可訂)
退房當天14:00后不算占用(可訂)
只考慮paid、checked_in、checked_out狀態的訂單
WITH date_series AS (-- 生成從startDate到endDate的日期序列SELECT DATE_ADD(#{startDate}, INTERVAL seq DAY) AS dateFROM (SELECT 0 AS seq UNION SELECT 1 UNION SELECT 2 UNION SELECT 3 UNIONSELECT 4 UNION SELECT 5 UNION SELECT 6 UNION SELECT 7 UNIONSELECT 8 UNION SELECT 9 UNION SELECT 10 UNION SELECT 11 UNIONSELECT 12 UNION SELECT 13 UNION SELECT 14 UNION SELECT 15 UNIONSELECT 16 UNION SELECT 17 UNION SELECT 18 UNION SELECT 19 UNIONSELECT 20 UNION SELECT 21 UNION SELECT 22 UNION SELECT 23 UNIONSELECT 24 UNION SELECT 25 UNION SELECT 26 UNION SELECT 27 UNIONSELECT 28 UNION SELECT 29 UNION SELECT 30 UNION SELECT 31 UNIONSELECT 32 UNION SELECT 33 UNION SELECT 34 UNION SELECT 35 UNIONSELECT 36 UNION SELECT 37 UNION SELECT 38 UNION SELECT 39 UNIONSELECT 40 UNION SELECT 41 UNION SELECT 42 UNION SELECT 43 UNIONSELECT 44 UNION SELECT 45 UNION SELECT 46 UNION SELECT 47 UNIONSELECT 48 UNION SELECT 49 UNION SELECT 50 UNION SELECT 51 UNIONSELECT 52 UNION SELECT 53 UNION SELECT 54 UNION SELECT 55 UNIONSELECT 56 UNION SELECT 57 UNION SELECT 58 UNION SELECT 59) AS seqWHERE DATE_ADD(#{startDate}, INTERVAL seq DAY) <= #{endDate}
),
occupied_dates AS (-- 查詢已被占用的日期SELECT DATE(check_in_date) AS start_date,DATE(check_out_date) AS end_date,TIME(check_out_time) AS checkout_timeFROM zyf_room_orderWHERE room_id = #{roomId}AND order_status IN ('paid', 'checked_in', 'checked_out')AND (-- 訂單影響查詢時間段的任何部分(DATE(check_out_date) >= #{startDate} AND DATE(check_in_date) <= #{endDate})OR-- 已入住未退房的長期訂單(check_out_time IS NULL AND DATE(check_in_date) <= #{endDate}))
)
SELECT ds.date,CASE -- 檢查該日期是否被占用WHEN EXISTS (SELECT 1 FROM occupied_dates od WHERE ds.date >= od.start_date AND ds.date <= od.end_dateAND (-- 如果是退房日,且退房時間>14:00,則不算占用NOT (ds.date = od.end_date AND TIME(od.checkout_time) > '14:00:00'))) THEN 0 -- 已預定ELSE 1 -- 可訂END AS status
FROM date_series ds
ORDER BY ds.date;