wechatShopUni/pages/search/index.wxml

<!--pages/search/index.wxml-->
<view class="container">
  <!-- 搜索框 -->
  <view class="search-header">
    <view class="search-box">
      <icon type="search" size="16" color="#8C8C8C"/>
      <input 
        class="search-input" 
        placeholder="搜索商品" 
        value="{{keyword}}"
        focus="{{true}}"
        confirm-type="search"
        bindinput="onInput"
        bindconfirm="onSearch"
      />
      <icon 
        wx:if="{{keyword}}" 
        type="clear" 
        size="16" 
        color="#8C8C8C" 
        bindtap="clearKeyword"
      />
    </view>
    <text class="cancel-btn" bindtap="onCancel">取消</text>
  </view>

  <!-- 搜索内容区域 -->
  <scroll-view 
    class="search-content" 
    scroll-y="{{true}}"
    enable-flex
  >
    <!-- 热门搜索 -->
    <view class="search-section" wx:if="{{!keyword}}">
      <view class="section-header">
        <text class="section-title">热门搜索</text>
      </view>
      <view class="hot-search">
        <text 
          class="hot-item {{index < 3 ? 'hot' : ''}}" 
          wx:for="{{hotSearches}}" 
          wx:key="*this"
          bindtap="onTagClick"
          data-keyword="{{item}}"
        >{{item}}</text>
      </view>
    </view>

    <!-- 搜索历史 -->
    <view class="search-section" wx:if="{{!keyword && searchHistory.length > 0}}">
      <view class="section-header">
        <text class="section-title">搜索历史</text>
        <text class="clear-history" bindtap="clearHistory">
          <text class="iconfont icon-delete"></text>
          清空历史
        </text>
      </view>
      <view class="history-list">
        <view 
          class="history-item" 
          wx:for="{{searchHistory}}" 
          wx:key="*this"
          bindtap="onTagClick"
          data-keyword="{{item}}"
        >
          <text class="iconfont icon-time"></text>
          <text class="history-text">{{item}}</text>
        </view>
      </view>
    </view>

    <!-- 搜索建议 -->
    <view class="search-suggestions" wx:if="{{keyword && suggestions.length > 0}}">
      <view 
        class="suggestion-item"
        wx:for="{{suggestions}}"
        wx:key="*this"
        bindtap="onTagClick"
        data-keyword="{{item}}"
      >
        <text class="iconfont icon-search"></text>
        <text>{{item}}</text>
      </view>
    </view>
  </scroll-view>
</view>