357 lines
9.3 KiB
JavaScript
357 lines
9.3 KiB
JavaScript
const request = require('../../utils/request');
|
||
Page({
|
||
data: {
|
||
carList: [],
|
||
type: 1,
|
||
selectedSort: '',
|
||
selectedBrand: '',
|
||
selectedPrice: '',
|
||
filterParams: {},
|
||
mainActiveIndex: 0,
|
||
selectedSeriesId: null,
|
||
selectedBrandLabel:"品牌",
|
||
brandTree: [],
|
||
sortOptions: [
|
||
{ text: '默认排序', value: '' },
|
||
{ text: '最新上架', value: 'created_at-desc' },
|
||
{ text: '价格降序', value: 'price-desc' },
|
||
{ text: '价格升序', value: 'price-asc' }
|
||
],
|
||
priceOptions: [
|
||
{ text: '全部价格', value: '' },
|
||
{ text: '3万以下', value: '0-3' },
|
||
{ text: '3-5万', value: '3-5'},
|
||
{ text: '5-10万', value: '5-10' },
|
||
{ text: '10-15万', value: '10-15' },
|
||
{ text: '15-20万', value: '15-20' },
|
||
{ text: '20-30万', value: '20-30' },
|
||
{ text: '30-50万', value: '30-50' },
|
||
{ text: '50万以上', value: ' 50-10000' },
|
||
],
|
||
extendFields: [], // 筛选配置
|
||
|
||
// 分页相关
|
||
page: 1,
|
||
pageSize: 10,
|
||
hasMore: true,
|
||
loading: false,
|
||
loadingMore: false,
|
||
|
||
// 数据状态
|
||
showNoData: false,
|
||
firstLoad: true
|
||
},
|
||
onBrandClick(e) {
|
||
const index = e.detail.index;
|
||
const brand = this.data.brandTree[index];
|
||
this.setData({
|
||
mainActiveIndex: e.detail.index
|
||
});
|
||
// ✅ 如果该品牌没有子系列（children）
|
||
if (!brand.children || brand.children.length === 0) {
|
||
this.setData({
|
||
selectedSeriesId: null, // 没有选中的 series
|
||
selectedBrandLabel: brand.text
|
||
});
|
||
|
||
this.reloadList(); // 触发列表加载
|
||
this.selectComponent('#dropdownItemBrand').toggle(false); // 关闭下拉菜单
|
||
}
|
||
},
|
||
// 下拉刷新事件
|
||
onPullDownRefresh() {
|
||
this.reloadList();
|
||
wx.stopPullDownRefresh();
|
||
},
|
||
|
||
// 滑动到底部加载更多
|
||
onReachBottom() {
|
||
if (this.data.hasMore && !this.data.loadingMore) {
|
||
this.loadMoreData();
|
||
}
|
||
},
|
||
|
||
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() {
|
||
// 重新加载列表，重置分页
|
||
this.setData({
|
||
page: 1,
|
||
hasMore: true,
|
||
loading: true,
|
||
showNoData: false
|
||
});
|
||
|
||
const data = {
|
||
sort: this.data.selectedSort,
|
||
brand: this.data.selectedSeriesId,
|
||
price: this.data.selectedPrice,
|
||
attr: this.data.filterParams,
|
||
type: this.data.type,
|
||
page: 1,
|
||
pageSize: this.data.pageSize
|
||
};
|
||
|
||
try {
|
||
const raw = await request({
|
||
url: '/admin/wechat/api/car',
|
||
method: 'POST',
|
||
data: data
|
||
});
|
||
|
||
const items = raw.items || [];
|
||
const total = raw.total || 0;
|
||
|
||
this.setData({
|
||
carList: items,
|
||
hasMore: items.length >= this.data.pageSize && items.length < total,
|
||
loading: false,
|
||
showNoData: items.length === 0 && !this.data.firstLoad,
|
||
firstLoad: false
|
||
});
|
||
} catch (err) {
|
||
console.error('加载列表失败', err);
|
||
this.setData({
|
||
loading: false,
|
||
showNoData: this.data.carList.length === 0
|
||
});
|
||
|
||
wx.showToast({
|
||
title: '加载失败',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
},
|
||
|
||
async loadMoreData() {
|
||
if (this.data.loadingMore || !this.data.hasMore) return;
|
||
|
||
const nextPage = this.data.page + 1;
|
||
this.setData({
|
||
loadingMore: true
|
||
});
|
||
|
||
const data = {
|
||
sort: this.data.selectedSort,
|
||
brand: this.data.selectedSeriesId,
|
||
price: this.data.selectedPrice,
|
||
attr: this.data.filterParams,
|
||
type: this.data.type,
|
||
page: nextPage,
|
||
pageSize: this.data.pageSize
|
||
};
|
||
|
||
try {
|
||
const raw = await request({
|
||
url: '/admin/wechat/api/car',
|
||
method: 'POST',
|
||
data: data
|
||
});
|
||
|
||
const items = raw.items || [];
|
||
const total = raw.total || 0;
|
||
const currentTotal = this.data.carList.length + items.length;
|
||
|
||
this.setData({
|
||
carList: [...this.data.carList, ...items],
|
||
page: nextPage,
|
||
hasMore: items.length >= this.data.pageSize && currentTotal < total,
|
||
loadingMore: false
|
||
});
|
||
|
||
} catch (err) {
|
||
console.error('加载更多失败', err);
|
||
this.setData({
|
||
loadingMore: false
|
||
});
|
||
|
||
wx.showToast({
|
||
title: '加载失败',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
},
|
||
|
||
onLoad(options){
|
||
if (options.type) {
|
||
this.setData({
|
||
type: options.type
|
||
});
|
||
const new_car_prices = [
|
||
{ text: '全部价格', value: '' },
|
||
{ text: '5万以下', value: '0-5' },
|
||
{ text: '5-10万', value: '5-10' },
|
||
{ text: '10-15万', value: '10-15' },
|
||
{ text: '15-20万', value: '15-20' },
|
||
{ text: '20-30万', value: '20-30' },
|
||
{ text: '30-50万', value: '30-50' },
|
||
{ text: '50-100万', value: '50-100' },
|
||
{ text: '100万以上', value: '100-10000' },
|
||
];
|
||
|
||
const old_car_prices = [
|
||
{ text: '全部价格', value: '' },
|
||
{ text: '3万以下', value: '0-3' },
|
||
{ text: '3-5万', value: '3-5'},
|
||
{ text: '5-10万', value: '5-10' },
|
||
{ text: '10-15万', value: '10-15' },
|
||
{ text: '15-20万', value: '15-20' },
|
||
{ text: '20-30万', value: '20-30' },
|
||
{ text: '30-50万', value: '30-50' },
|
||
{ text: '50万以上', value: ' 50-100000' },
|
||
];
|
||
|
||
const rent_car_prices = [
|
||
{ text: '全部价格', value: '' },
|
||
{ text: '100元以下', value: '0-100' },
|
||
{ text: '100-200元', value: '100-200' },
|
||
{ text: '200-300元', value: '200-300' },
|
||
{ text: '300-500元', value: '300-500' },
|
||
{ text: '500-800元', value: '500-800' },
|
||
{ text: '800-1500元', value: '800-1500' },
|
||
{ text: '1500元以上', value: '1500-100000' },
|
||
];
|
||
|
||
if(options.type == 1){
|
||
this.setData({
|
||
priceOptions: new_car_prices
|
||
});
|
||
}else if(options.type == 2){
|
||
this.setData({
|
||
priceOptions: old_car_prices
|
||
});
|
||
}else{
|
||
this.setData({
|
||
priceOptions: rent_car_prices
|
||
});
|
||
}
|
||
|
||
}
|
||
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 });
|
||
},
|
||
goToCarDetail(e) {
|
||
const id = e.currentTarget.dataset.id;
|
||
console.log(`/pages/info/info?id=${id}`)
|
||
wx.navigateTo({
|
||
url: `/pages/info/info?id=${id}`
|
||
});
|
||
},
|
||
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();
|
||
}
|
||
}) |