Suzhou-SafetyToolsWarning-WX/pages/device/list/list.wxml

<!--pages/device/list/list.wxml-->
<view class="container">
  <!-- 搜索栏 -->
  <view class="search-bar">
    <t-search 
      model:value="{{searchValue}}" 
      placeholder="搜索设备名称/编号/型号"
      bind:change="onSearchChange"
      bind:submit="onSearch"
      bind:clear="onSearchClear"
    />
  </view>

  <!-- 筛选标签 -->
  <view class="filter-section">
    <scroll-view scroll-x class="filter-scroll">
      <view class="filter-tags">
        <view 
          class="filter-tag {{activeFilter === 'all' ? 'active' : ''}}"
          bindtap="onFilterChange"
          data-filter="all"
        >
          全部({{statistics.total}})
        </view>
        <view 
          class="filter-tag {{activeFilter === 'normal' ? 'active' : ''}}"
          bindtap="onFilterChange"
          data-filter="normal"
        >
          正常({{statistics.normal}})
        </view>
        <view 
          class="filter-tag warning {{activeFilter === 'warning' ? 'active' : ''}}"
          bindtap="onFilterChange"
          data-filter="warning"
        >
          预警({{statistics.warning}})
        </view>
        <view 
          class="filter-tag danger {{activeFilter === 'expired' ? 'active' : ''}}"
          bindtap="onFilterChange"
          data-filter="expired"
        >
          已到期({{statistics.expired}})
        </view>
      </view>
    </scroll-view>
    
    <view class="filter-more" bindtap="showFilterDialog">
      <t-icon name="filter" size="40rpx" />
    </view>
  </view>

  <!-- 设备列表 -->
  <view class="device-list">
    <view 
      class="device-item" 
      wx:for="{{deviceList}}" 
      wx:key="id"
      bindtap="goToDetail"
      data-id="{{item.id}}"
    >
      <view class="device-header">
        <view class="device-name">{{item.deviceName}}</view>
        <t-tag 
          theme="{{item.statusTheme}}" 
          size="small"
        >
          {{item.statusText}}
        </t-tag>
      </view>
      
      <view class="device-info">
        <view class="info-row">
          <text class="info-label">设备编号：</text>
          <text class="info-value">{{item.deviceCode}}</text>
        </view>
        <view class="info-row">
          <text class="info-label">规格型号：</text>
          <text class="info-value">{{item.specification}}</text>
        </view>
        <view class="info-row">
          <text class="info-label">使用单位：</text>
          <text class="info-value">{{item.useUnit}}</text>
        </view>
        <view class="info-row">
          <text class="info-label">下次检验：</text>
          <text class="info-value {{item.isWarning ? 'warning-text' : ''}}">
            {{item.nextInspectionDate}}
            <text wx:if="{{item.daysLeft !== null}}" class="days-left">
              ({{item.daysLeft > 0 ? '还有' + item.daysLeft + '天' : '已到期' + Math.abs(item.daysLeft) + '天'}})
            </text>
          </text>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <t-empty 
      wx:if="{{deviceList.length === 0 && !loading}}" 
      icon="search" 
      description="{{searchValue ? '未找到相关设备' : '暂无设备数据'}}"
    />

    <!-- 加载状态 -->
    <view wx:if="{{loading}}" class="loading-container">
      <t-loading theme="circular" size="48rpx" text="加载中..." />
    </view>
  </view>

  <!-- 添加按钮 -->
  <view class="fab-button" bindtap="goToAdd">
    <t-icon name="add" size="48rpx" color="#fff" />
  </view>
</view>

<!-- 筛选弹窗 -->
<t-dialog
  visible="{{showFilter}}"
  title="筛选条件"
  confirm-btn="确定"
  cancel-btn="重置"
  bind:confirm="onFilterConfirm"
  bind:cancel="onFilterReset"
  bind:close="onFilterClose"
>
  <view class="filter-dialog">
    <view class="filter-group">
      <view class="filter-group-title">设备类型</view>
      <view class="filter-options">
        <view 
          class="filter-option {{selectedType === item ? 'selected' : ''}}"
          wx:for="{{deviceTypes}}"
          wx:key="index"
          bindtap="selectType"
          data-type="{{item}}"
        >
          {{item}}
        </view>
      </view>
    </view>
    
    <view class="filter-group">
      <view class="filter-group-title">使用单位</view>
      <view class="filter-options">
        <view 
          class="filter-option {{selectedUnit === item ? 'selected' : ''}}"
          wx:for="{{useUnits}}"
          wx:key="index"
          bindtap="selectUnit"
          data-unit="{{item}}"
        >
          {{item}}
        </view>
      </view>
    </view>
  </view>
</t-dialog>