car_front/pages/car_new/car_new.wxml

<!--pages/car_new/car_new.wxml-->
<view class="sticky-filter">
  <van-dropdown-menu>
  <van-dropdown-item
    value="{{selectedSort}}"
    options="{{sortOptions}}"
    bind:change="onSortChange"
  />
  <van-dropdown-item id="dropdownItemBrand" title="{{selectedBrandLabel}}"  use-slot>
    <van-tree-select
      height="400"
      items="{{brandTree}}"
      main-active-index="{{mainActiveIndex}}"
      active-id="{{selectedSeriesId}}"
      bind:click-nav="onBrandClick"
      bind:click-item="onSeriesSelect"
    />
  </van-dropdown-item>
  <van-dropdown-item
    value="{{selectedPrice}}"
    options="{{priceOptions}}"
    bind:change="onPriceChange"
  />
  <van-dropdown-item title="参数" 
  use-slot  
  id="dropdownItemParam"
  >
    <view class="filter-extend">
      <view wx:for="{{extendFields}}" wx:key="id" class="filter-group">
        <view class="filter-label">{{item.label}}</view>

        <!-- 多选项字段 -->
        <view wx:if="{{item.type === 'checkbox'}}" class="filter-tags">
          <view
            wx:for="{{item.options}}"
            wx:for-item="opt"
            wx:key="index"
            class="filter-tag-item"
            data-name="{{item.name}}"
            data-value="{{opt.value}}"
            bind:tap="onTagToggle"
          >
            <van-tag
            size="medium"
              plain="{{!opt._checked}}"
            >
              {{opt.key}}
            </van-tag>
          </view>
        </view>



        <view wx:if="{{item.type === 'range'}}" class="filter-slider-group">
          <view class="slider-label">
            {{item.label}}：{{item._rangeStart || item.options.start}}{{item.options.unit}} - {{item._rangeEnd || item.options.end}}{{item.options.unit}}
          </view>

          <van-slider
            range
            value="{{[item._rangeStart ? item._rangeStart : item.options.start, item._rangeEnd ? item._rangeEnd : item.options.end]}}"
            min="{{item.options.start}}"
            max="{{item.options.end}}"
            data-name="{{item.name}}"
            bind:change="onSliderChange"
          />
        </view>
      </view>

      <van-button type="primary" block size="small" bind:tap="onExtendConfirm">确认</van-button>
    </view>
  </van-dropdown-item>
</van-dropdown-menu>
</view>

<!-- 汽车列表 -->
<view class="car-list">
  <view wx:for="{{carList}}" wx:key="id" class="car-item car-type-{{item.car_type}}" bindtap="goToCarDetail" data-id="{{item.id}}">
    <!-- 车辆类型标签 -->
    <view class="car-type-badge">
      <text wx:if="{{item.car_type == 1}}" class="badge-new">新车</text>
      <text wx:elif="{{item.car_type == 2}}" class="badge-rent">租车</text>
      <text wx:elif="{{item.car_type == 3}}" class="badge-used">二手车</text>
    </view>
    
    <image class="car-image" src="{{item.cover_image[0]}}" mode="aspectFill" />
    
    <view class="car-info">
      <view class="car-title">{{item.title}}</view>
      
      <!-- 新车价格显示 -->
      <view wx:if="{{item.car_type == 1}}" class="car-price">
        <text class="price-new">¥{{item.price}}万起</text>
        <text wx:if="{{item.re_price}}" class="price-old">指导价 ¥{{item.re_price}}万</text>
      </view>
      
      <!-- 租车价格显示 -->
      <view wx:elif="{{item.car_type == 2}}" class="car-price">
        <text class="price-rent">¥{{item.price}}/天</text>
        <text wx:if="{{item.re_price}}" class="price-monthly">月租 ¥{{item.re_price}}</text>
      </view>
      
      <!-- 二手车价格显示 -->
      <view wx:elif="{{item.car_type == 3}}" class="car-price">
        <text class="price-used">¥{{item.price}}万</text>
        <text wx:if="{{item.re_price}}" class="price-original">新车价 ¥{{item.re_price}}万</text>
      </view>
      
      <!-- 车辆特性标签 -->
      <view class="car-attrs">
        <!-- 新车特性 -->
        <block wx:if="{{item.car_type == 1}}">
          <van-tag wx:for="{{item.attr}}" wx:key="index" wx:for-item="opt" type="primary" size="mini">
            {{opt}}
          </van-tag>
          <van-tag wx:if="{{item.is_new_model}}" type="success" size="mini">全新上市</van-tag>
          <van-tag wx:if="{{item.has_discount}}" type="warning" size="mini">限时优惠</van-tag>
        </block>
        
        <!-- 租车特性 -->
        <block wx:elif="{{item.car_type == 2}}">
          <van-tag wx:for="{{item.attr}}" wx:key="index" wx:for-item="opt" type="success" size="mini">
            {{opt}}
          </van-tag>
          <van-tag wx:if="{{item.available_now}}" type="primary" size="mini">现车可租</van-tag>
          <van-tag wx:if="{{item.insurance_included}}" type="default" size="mini">含保险</van-tag>
        </block>
        
        <!-- 二手车特性 -->
        <block wx:elif="{{item.car_type == 3}}">
          <van-tag wx:for="{{item.attr}}" wx:key="index" wx:for-item="opt" type="warning" size="mini">
            {{opt}}
          </van-tag>
          <van-tag wx:if="{{item.mileage}}" type="default" size="mini">{{item.mileage}}万公里</van-tag>
          <van-tag wx:if="{{item.car_age}}" type="default" size="mini">{{item.car_age}}年车龄</van-tag>
          <van-tag wx:if="{{item.certified}}" type="success" size="mini">官方认证</van-tag>
        </block>
      </view>
      
      <!-- 额外信息 -->
      <view class="car-extra">
        <!-- 新车额外信息 -->
        <text wx:if="{{item.car_type == 1 && item.dealer_name}}" class="dealer-info">{{item.dealer_name}}</text>
        
        <!-- 租车额外信息 -->
        <text wx:elif="{{item.car_type == 2 && item.pickup_location}}" class="pickup-info">取车点：{{item.pickup_location}}</text>
        
        <!-- 二手车额外信息 -->
        <view wx:elif="{{item.car_type == 3}}" class="used-car-info">
          <text wx:if="{{item.first_license_date}}" class="license-date">首次上牌：{{item.first_license_date}}</text>
          <text wx:if="{{item.warranty_remain}}" class="warranty-info">质保剩余：{{item.warranty_remain}}</text>
        </view>
      </view>
    </view>
  </view>

   <!-- 加载状态 -->
   <view class="loading-container" wx:if="{{loading}}">
    <view class="loading-spinner">
      <text>加载中...</text>
    </view>
  </view>
  
  <!-- 无数据状态 -->
  <view class="no-data-container" wx:if="{{showNoData}}">
    <!-- <image class="no-data-icon" src="/images/no-data.png"></image> -->
    <text class="no-data-text">暂无数据</text>
    <text class="no-data-desc">换个条件试试吧</text>
  </view>
  
  <!-- 加载更多状态 -->
  <view class="load-more-container" wx:if="{{carList.length > 0}}">
    <view class="load-more-item" wx:if="{{loadingMore}}">
      <text>加载更多...</text>
    </view>
    <view class="load-more-item-no" wx:elif="{{!hasMore}}">
      <text>没有更多数据了</text>
    </view>
  </view>
</view>