当前位置：首页 > web >正文

微信小程序中，将搜索组件获取的值传递给父页面（如 index 页面）可以通过自定义事件或页面引用实现

web 2025/7/20 4:55:27

将搜索组件获取的值传递给父页面（如 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;