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

发布于:2025-04-19 ⋅ 阅读:(13) ⋅ 点赞:(0)

将搜索组件获取的值传递给父页面(如 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 date
    FROM 
        (SELECT 0 AS seq UNION SELECT 1 UNION SELECT 2 UNION SELECT 3 UNION
         SELECT 4 UNION SELECT 5 UNION SELECT 6 UNION SELECT 7 UNION
         SELECT 8 UNION SELECT 9 UNION SELECT 10 UNION SELECT 11 UNION
         SELECT 12 UNION SELECT 13 UNION SELECT 14 UNION SELECT 15 UNION
         SELECT 16 UNION SELECT 17 UNION SELECT 18 UNION SELECT 19 UNION
         SELECT 20 UNION SELECT 21 UNION SELECT 22 UNION SELECT 23 UNION
         SELECT 24 UNION SELECT 25 UNION SELECT 26 UNION SELECT 27 UNION
         SELECT 28 UNION SELECT 29 UNION SELECT 30 UNION SELECT 31 UNION
         SELECT 32 UNION SELECT 33 UNION SELECT 34 UNION SELECT 35 UNION
         SELECT 36 UNION SELECT 37 UNION SELECT 38 UNION SELECT 39 UNION
         SELECT 40 UNION SELECT 41 UNION SELECT 42 UNION SELECT 43 UNION
         SELECT 44 UNION SELECT 45 UNION SELECT 46 UNION SELECT 47 UNION
         SELECT 48 UNION SELECT 49 UNION SELECT 50 UNION SELECT 51 UNION
         SELECT 52 UNION SELECT 53 UNION SELECT 54 UNION SELECT 55 UNION
         SELECT 56 UNION SELECT 57 UNION SELECT 58 UNION SELECT 59) AS seq
    WHERE 
        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_time
    FROM 
        zyf_room_order
    WHERE 
        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_date
            AND (
                -- 如果是退房日,且退房时间>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;

网站公告

今日签到

点亮在社区的每一天
去签到