filter

pages/index/index.js

@@ -1,3 +1,4 @@
+const request = require('../../utils/request');
 Page({
   data: {
     bannerList: [
@@ -28,9 +29,77 @@ Page({
         mileage: 5.2,
         emission: '国五'
       }
+    ],
+    selectedSort: 'default',
+    selectedBrand: '',
+    selectedPrice: '',
+    selectedParam: '',
+    mainActiveIndex: 0,
+    selectedSeriesId: null,
+    brandTree: [],
+
+    sortOptions: [
+      { text: '默认排序', value: 'default' },
+      { text: '价格升序', value: 'priceAsc' },
+      { text: '价格降序', value: 'priceDesc' }
+    ],
+    brandOptions: [
+      { text: '全部品牌', value: '' },
+      { text: '丰田', value: 'toyota' },
+      { text: '本田', value: 'honda' }
+    ],
+    priceOptions: [
+      { text: '全部价格', value: '' },
+      { text: '5万以下', value: '<5' },
+      { text: '5-10万', value: '5-10' },
+      { text: '10万以上', value: '>10' }
+    ],
+    paramOptions: [
+      { label: '自动挡', value: 'auto' },
+      { label: '手动挡', value: 'manual' },
+      { label: '新能源', value: 'ev' }
     ]
   },
+  onBrandClick(e) {
+    this.setData({
+      mainActiveIndex: e.detail.index
+    });
+  },
 
+  onSeriesSelect(e) {
+    const selectedId = e.detail.id;
+    const selectedText = e.detail.text;
+    this.setData({ selectedSeriesId: selectedId });
+
+    wx.showToast({
+      title: `已选择：${selectedText}`,
+      icon: 'none'
+    });
+
+    // TODO: 发起请求，用 selectedId 作为筛选条件
+  },
+  onSortChange(e) {
+    this.setData({ selectedSort: e.detail });
+    this.reloadList();
+  },
+  onBrandChange(e) {
+    this.setData({ selectedBrand: e.detail });
+    this.reloadList();
+  },
+  onPriceChange(e) {
+    this.setData({ selectedPrice: e.detail });
+    this.reloadList();
+  },
+  onParamChange(e) {
+    const value = e.detail.value;
+    this.setData({ selectedParam: value });
+    this.reloadList();
+  },
+
+  reloadList() {
+    // TODO: 根据筛选值重新加载列表
+    console.log('筛选值：', this.data.selectedSort, this.data.selectedBrand, this.data.selectedPrice, this.data.selectedParam);
+  },
   openMap() {
     const { latitude, longitude, address, name } = this.data.company
     wx.openLocation({
@@ -40,5 +109,27 @@ Page({
       name,
       address
     })
+  },
+  onLoad(){
+    this.loadBrandData();
+  },
+  async loadBrandData() {
+    try {
+      const raw = await request({
+        url: '/admin/wechat/api/select'
+      });
+
+      const brandTree = raw.map(brand => ({
+        text: brand.label,
+        children: (brand.children || []).map(series => ({
+          id: series.value,
+          text: series.label
+        }))
+      }));
+
+      this.setData({ brandTree });
+    } catch (err) {
+      console.error('加载品牌失败', err);
+    }
   }
 })

pages/index/index.json

@@ -2,6 +2,9 @@
   "usingComponents": {
     "van-icon": "@vant/weapp/icon/index",
     "van-button": "@vant/weapp/button/index",
-    "van-card": "@vant/weapp/card/index"
+    "van-card": "@vant/weapp/card/index",
+    "van-dropdown-menu": "@vant/weapp/dropdown-menu/index",
+    "van-dropdown-item": "@vant/weapp/dropdown-item/index",
+    "van-tree-select": "@vant/weapp/tree-select/index"
   }
 }

pages/index/index.wxml

@@ -21,6 +21,47 @@
 </view>
 
 <!-- 车辆列表 -->
+<!-- 筛选栏 -->
+<view class="sticky-filter">
+  <van-dropdown-menu >
+  <van-dropdown-item
+    value="{{selectedSort}}"
+    options="{{sortOptions}}"
+    bind:change="onSortChange"
+  />
+  <van-dropdown-item title="品牌" 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
+  >
+    <!-- 参数自定义筛选项 -->
+    <view class="param-options">
+      <label wx:for="{{paramOptions}}" wx:key="value">
+        <radio
+          value="{{item.value}}"
+          checked="{{item.value === selectedParam}}"
+          bindchange="onParamChange"
+        /> {{item.label}}
+      </label>
+    </view>
+  </van-dropdown-item>
+</van-dropdown-menu>
+</view>
+
 <!-- 汽车列表 -->
 <view class="car-list">
   <block wx:for="{{carList}}" wx:key="id">

pages/index/index.wxss

@@ -98,3 +98,16 @@
   font-size: 24rpx;
   color: #999999;
 }
+
+.param-options {
+  padding: 20rpx;
+  display: flex;
+  flex-direction: column;
+  gap: 20rpx;
+}
+.sticky-filter {
+  position: sticky;
+  top: 0;
+  z-index: 99;
+  background-color: #fff;
+}

project.config.json

@@ -1,6 +1,6 @@
 {
   "compileType": "miniprogram",
-  "libVersion": "trial",
+  "libVersion": "3.8.10",
   "packOptions": {
     "ignore": [],
     "include": []

project.private.config.json

@@ -3,7 +3,7 @@
   "projectname": "car_front",
   "setting": {
     "compileHotReLoad": true,
-    "urlCheck": true,
+    "urlCheck": false,
     "coverView": true,
     "lazyloadPlaceholderEnable": false,
     "skylineRenderEnable": false,
@@ -19,5 +19,6 @@
     "checkInvalidKey": true,
     "ignoreDevUnusedFiles": true
   },
-  "libVersion": "3.8.10"
+  "libVersion": "3.8.10",
+  "condition": {}
 }

utils/request.js

@@ -0,0 +1,33 @@
+const BASE_URL = 'http://192.168.89.112:8089/'; // 👈 换成你的后端地址
+
+function request({ url, method = 'GET', data = {}, header = {} }) {
+  const token = '';
+
+  return new Promise((resolve, reject) => {
+    wx.request({
+      url: BASE_URL + url,
+      method,
+      data,
+      header: {
+        'Content-Type': 'application/json',
+        'Authorization': token ? `Bearer ${token}` : '',
+        ...header
+      },
+      success(res) {
+        // FastAdmin 接口风格通常是 { code: 1, data: ..., msg: "success" }
+        if (res.data.code === 1) {
+          resolve(res.data.data);
+        } else {
+          wx.showToast({ title: res.data.msg || '请求失败', icon: 'none' });
+          reject(res.data);
+        }
+      },
+      fail(err) {
+        wx.showToast({ title: '网络错误', icon: 'none' });
+        reject(err);
+      }
+    });
+  });
+}
+
+module.exports = request;