car_front/pages/index/index.js

const request = require('../../utils/request');
Page({
  data: {
    
    bannerList: [
      'http://192.168.1.11:8089/uploads/20250630/054c53776891b766c6f1bd65059a5b27.jpg',
      'http://192.168.1.11:8089/uploads/20250630/c7f45ec56c19eac42a23c5e987cacc93.jpg'
    ],
    company: {
      name: '某某汽车服务有限公司',
      address: '上海市浦东新区世纪大道100号',
      latitude: 31.2304, // 地图坐标
      longitude: 121.4737,
      phone: '021-88888888'
    },
    carList: [],
    selectedSort: 'default',
    selectedBrand: '',
    selectedPrice: '',
    filterParams: {},
    mainActiveIndex: 0,
    selectedSeriesId: null,
    selectedBrandLabel:"品牌",
    brandTree: [],
    sortOptions: [
      { text: '默认排序', value: 'default' },
      { text: '价格升序', value: 'priceAsc' },
      { text: '价格降序', value: 'priceDesc' }
    ],
    priceOptions: [
      { text: '全部价格', value: '' },
      { text: '5万以下', value: '<5' },
      { text: '5-10万', value: '5-10' },
      { text: '10万以上', value: '>10' }
    ],
    extendFields: [] // 筛选配置
  },
  onBrandClick(e) {
    this.setData({
      mainActiveIndex: e.detail.index
    });
  },  

  onSeriesSelect(e) {
    const selectedId = e.detail.id;
    const selectedText = e.detail.text;
  
    this.setData({
      selectedSeriesId: selectedId,
      selectedBrandLabel: selectedText // ✅ 更新 dropdown 显示的值
    });
  
    this.reloadList();
    this.selectComponent('#dropdownItemBrand').toggle(false); // 关闭
    // TODO: 发起请求，用 selectedId 作为筛选条件
  },
  onSortChange(e) {
    this.setData({ selectedSort: 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();
  },

  async reloadList() {
    // TODO: 根据筛选值重新加载列表
    const data = {
      sort:this.data.selectedSort,
      brand:this.data.selectedSeriesId,
      price:this.data.selectedPrice,
      attr:this.data.filterParams,
    }
    try {
      const raw = await request({
        url: '/admin/wechat/api/car',
        method: 'POST',
        data: data
      });
      this.setData({carList:raw.items})
    } catch (err) {
      console.error('加载品牌失败', err);
    }
  },
  openMap() {
    const { latitude, longitude, address, name } = this.data.company
    wx.openLocation({
      latitude,
      longitude,
      scale: 18,
      name,
      address
    })
  },
  onLoad(){
    this.loadBrandData();
  },
  async loadBrandData() {
    try {
      const raw = await request({
        url: '/admin/wechat/api/select'
      });

      const brandTree = raw.brands.map(brand => ({
        text: brand.label,
        children: (brand.children || []).map(series => ({
          id: series.value,
          text: series.label
        }))
      }));

      const fields = raw.extend.map(f => {
        // 为 range 类型添加 start/end 临时字段
        if (f.type === 'range') {
          f._rangeStart = '';
          f._rangeEnd = '';
        } else if (f.type === 'checkbox') {
          f.value = []; // 默认空数组
        }
        return f;
      });
      this.setData({ extendFields:fields });
      this.setData({ brandTree });
      this.reloadList();
    } catch (err) {
      console.error('加载品牌失败', err);
    }
  },

  onTagToggle(e) {
    const name = e.currentTarget.dataset.name;
    const value = String(e.currentTarget.dataset.value);
  
    const fields = this.data.extendFields.map(field => {
      if (field.name === name) {
        let list = (field.value || []).map(String);
        const index = list.indexOf(value);
        if (index > -1) {
          list.splice(index, 1);
        } else {
          list.push(value);
        }
        field.value = list;
  
        // ✅ 同步 checked 状态
        field.options.forEach(opt => {
          opt._checked = list.includes(String(opt.value));
        });
      }
      return field;
    });
  
    this.setData({ extendFields: fields });
  },
  onSliderChange(e) {
    const name = e.currentTarget.dataset.name;
    const [start, end] = e.detail;
  
    const fields = this.data.extendFields.map(field => {
      if (field.name === name) {
        field._rangeStart = start;
        field._rangeEnd = end;
      }
      return field;
    });
  
    this.setData({ extendFields: fields });
  },

  onExtendConfirm() {
    const filterParams = {};

    this.data.extendFields.forEach(field => {
      if (field.type === 'checkbox') {
        if (field.value?.length > 0) {
          filterParams[field.name] = field.value;
        }
      } else if (field.type === 'range') {
        if (field._rangeStart || field._rangeEnd) {
          filterParams[field.name] = {
            start: field._rangeStart,
            end: field._rangeEnd
          };
        }
      }
    });
    this.selectComponent('#dropdownItemParam').toggle(false); // 关闭
    this.setData({filterParams:filterParams});
    this.reloadList();
  }
})