qipai/miniapp/pages/goods/index.wxml

<scroll-view class="scrollarea" scroll-y type="list">
  <view class="page">
    <view class="hero">
      <view>
        <view class="eyebrow">M09 · 门店增值服务</view>
        <view class="title">商品与寄存</view>
      </view>
      <view class="hero-store">门店 #{{storeId || '-'}}</view>
    </view>

    <view class="tabs">
      <view class="tab {{activeTab === 'catalog' ? 'active' : ''}}" data-tab="catalog" bindtap="changeTab">选购</view>
      <view class="tab {{activeTab === 'orders' ? 'active' : ''}}" data-tab="orders" bindtap="changeTab">商品订单</view>
      <view class="tab {{activeTab === 'storages' ? 'active' : ''}}" data-tab="storages" bindtap="changeTab">我的寄存</view>
    </view>

    <view wx:if="{{errorMessage}}" class="error">{{errorMessage}}</view>
    <view wx:if="{{loading}}" class="notice">正在加载商品服务…</view>

    <view wx:if="{{oneTimeCredential}}" class="credential-card">
      <view class="credential-title">{{oneTimeCredentialTitle}}</view>
      <view class="credential-warning">领取码仅展示本次，不会写入本地缓存。请立即妥善保存。</view>
      <view class="credential-value">{{oneTimeCredential}}</view>
      <view class="row-actions">
        <button class="button primary compact" bindtap="copyCredential">复制领取码</button>
        <button class="button ghost compact" bindtap="clearCredential">我已保存并隐藏</button>
      </view>
    </view>

    <block wx:if="{{activeTab === 'catalog'}}">
      <view wx:if="{{!storeId}}" class="notice">请从门店详情进入商品页，以载入对应门店的商品目录。</view>
      <view wx:elif="{{!catalog.salesOpen}}" class="notice warning">当前不在商品售卖时段，可查看目录，暂不能提交订单。</view>
      <block wx:for="{{catalog.categories}}" wx:key="id" wx:for-item="category">
        <view class="section-title">{{category.name}}</view>
        <view wx:for="{{category.products}}" wx:key="id" wx:for-item="product" class="product-card">
          <image wx:if="{{product.coverUrl}}" class="product-cover" src="{{product.coverUrl}}" mode="aspectFill" />
          <view class="product-main">
            <view class="product-head">
              <view>
                <view class="product-name">{{product.name}}</view>
                <view class="meta">{{product.unitName}} · {{product.fulfillmentMode === 'DELIVERY' ? '可配送' : '门店自取'}}</view>
              </view>
              <view wx:if="{{product.storageEnabled}}" class="chip">支持寄存</view>
            </view>
            <view wx:if="{{product.description}}" class="description">{{product.description}}</view>
            <view wx:for="{{product.skus}}" wx:key="id" wx:for-item="sku" class="sku-row">
              <view>
                <view class="sku-name">{{sku.name}}</view>
                <view class="price">{{sku.priceText}}</view>
              </view>
              <view class="quantity-control">
                <button class="quantity-button" data-sku-id="{{sku.id}}" data-delta="-1" bindtap="changeQuantity">−</button>
                <text>{{sku.selectedQuantity}}</text>
                <button class="quantity-button plus" data-sku-id="{{sku.id}}" data-delta="1" bindtap="changeQuantity">＋</button>
              </view>
            </view>
          </view>
        </view>
      </block>
      <view wx:if="{{storeId && !loading && !catalog.categories.length}}" class="empty">当前门店暂无在售商品</view>
      <view wx:if="{{cartQuantity > 0}}" class="cart-bar">
        <view><view class="cart-count">已选 {{cartQuantity}} 件</view><view class="cart-total">{{cartTotalText}}</view></view>
        <button class="button primary cart-submit" loading="{{submitting}}" disabled="{{submitting || !catalog.salesOpen}}" bindtap="createOrder">提交订单</button>
      </view>
    </block>

    <block wx:if="{{activeTab === 'orders'}}">
      <view wx:for="{{orders}}" wx:key="id" wx:for-item="order" class="business-card">
        <view class="card-head">
          <view><view class="card-title">{{order.orderNo}}</view><view class="meta">{{order.createdText}}</view></view>
          <view class="status">{{order.statusText}}</view>
        </view>
        <view class="summary-row"><text>{{order.totalQuantity}} 件 · {{order.fulfillmentMode === 'DELIVERY' ? '配送' : '门店自取'}}</text><strong>{{order.amountText}}</strong></view>
        <view class="row-actions">
          <button wx:if="{{order.canCancel}}" class="button ghost compact" data-order-id="{{order.id}}" bindtap="cancelOrder">取消订单</button>
          <button wx:if="{{order.canStore}}" class="button primary compact" data-order-id="{{order.id}}" bindtap="storeOrder">整单寄存</button>
        </view>
      </view>
      <view wx:if="{{!loading && !orders.length}}" class="empty">暂无商品订单</view>
    </block>

    <block wx:if="{{activeTab === 'storages'}}">
      <view wx:if="{{!selectedStorage}}">
        <view wx:for="{{storages}}" wx:key="id" wx:for-item="storage" class="business-card tappable" data-storage-id="{{storage.id}}" bindtap="openStorage">
          <view class="card-head">
            <view><view class="card-title">{{storage.storageNo}}</view><view class="meta">到期 {{storage.expiresText}}</view></view>
            <view class="status">{{storage.statusText}}</view>
          </view>
          <view class="summary-row"><text>剩余 / 总数</text><strong>{{storage.remainingQuantity}} / {{storage.totalQuantity}}</strong></view>
          <view class="detail-link">查看寄存明细与取出记录 ›</view>
        </view>
        <view wx:if="{{!loading && !storages.length}}" class="empty">暂无商品寄存</view>
      </view>

      <view wx:if="{{selectedStorage}}" class="storage-detail">
        <view class="back" bindtap="closeStorage">‹ 返回寄存列表</view>
        <view class="card-head">
          <view><view class="card-title">{{selectedStorage.storageNo}}</view><view class="meta">到期 {{selectedStorage.expiresText}}</view></view>
          <view class="status">{{selectedStorage.statusText}}</view>
        </view>
        <view class="credential-warning">取出时需输入当前领取码；服务端仅保存不可逆摘要。</view>
        <view wx:for="{{selectedStorage.items}}" wx:key="id" wx:for-item="item" class="storage-item">
          <view><view class="sku-name">{{item.productName}} · {{item.skuName}}</view><view class="meta">剩余 {{item.remainingQuantity}} / {{item.totalQuantity}}</view></view>
          <button wx:if="{{selectedStorage.active && item.remainingQuantity > 0}}" class="button primary compact" data-item-id="{{item.id}}" bindtap="retrieveItem">取出</button>
        </view>
        <view wx:if="{{selectedStorage.active}}" class="row-actions detail-actions">
          <button class="button ghost compact" bindtap="rotateCredential">更换领取码</button>
          <button class="button danger compact" bindtap="cancelStorage">取消寄存</button>
        </view>
        <view class="section-title small">取出流水</view>
        <view wx:for="{{selectedStorage.movements}}" wx:key="id" wx:for-item="movement" class="movement-row">
          <text>{{movement.createdText}} · 明细 #{{movement.storageItemId}}</text><strong>取出 {{movement.quantity}}，剩余 {{movement.remainingAfter}}</strong>
        </view>
        <view wx:if="{{!selectedStorage.movements.length}}" class="empty inline">暂无取出记录</view>
      </view>
    </block>
  </view>
</scroll-view>