LinHelp/miniapp/miniprogram/pages/products/index.wxml

<view class="page">
  <view class="page-heading">
    <view class="heading-eyebrow">社区便利店</view>
    <view class="heading-title">商品预定</view>
    <view class="heading-subtitle">挑好商品，社区内配送或自提</view>
  </view>

  <view class="search-row">
    <input class="input search-input" placeholder="搜索商品" value="{{keyword}}" bindinput="onKeywordInput" confirm-type="search" bindconfirm="search" />
    <button size="mini" class="primary search-button" bindtap="search">搜索</button>
  </view>

  <scroll-view scroll-x class="category-scroll">
    <view class="category-item {{!activeCategoryId ? 'active' : ''}}" bindtap="clearCategory">全部</view>
    <view
      wx:for="{{categories}}"
      wx:key="id"
      class="category-item {{activeCategoryId === item.id ? 'active' : ''}}"
      bindtap="chooseCategory"
      data-id="{{item.id}}"
    >
      {{item.name}}
    </view>
  </scroll-view>

  <view class="product-list">
    <view wx:for="{{products}}" wx:key="id" class="product-card" bindtap="goDetail" data-id="{{item.id}}">
      <image wx:if="{{item.coverUrl}}" class="product-thumb" src="{{item.coverUrl}}" mode="aspectFill" />
      <view wx:else class="product-thumb media-placeholder">货</view>
      <view class="product-info">
        <view class="row between">
          <view class="card-title">{{item.name}}</view>
          <view class="tag">{{item.status}}</view>
        </view>
        <view class="muted product-desc">{{item.description || '社区精选商品'}}</view>
        <view class="row between product-footer">
          <view wx:if="{{item.unitName}}" class="pill">{{item.unitName}}</view>
          <view wx:else class="pill">社区好物</view>
          <view wx:if="{{item.skus.length}}" class="price">¥{{item.skus[0].priceCent / 100}} 起</view>
        </view>
      </view>
    </view>
  </view>

  <view wx:if="{{!products.length && !loading}}" class="empty-state">暂无商品</view>
</view>