'静态文件/货盘接口'
This commit is contained in:
@@ -242,10 +242,12 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.product-emoji {
|
||||
font-size: 80rpx;
|
||||
.product-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.product-badges {
|
||||
|
||||
+335
-443
@@ -72,8 +72,8 @@
|
||||
<!-- 产品网格 -->
|
||||
<view class="product-grid">
|
||||
<view class="product-card" @tap="goDetail" :data-id="item.id" v-for="(item, index) in products" :key="index">
|
||||
<view class="product-img" :style="'background: ' + item.bgColor + ';'">
|
||||
<text class="product-emoji">{{ item.emoji }}</text>
|
||||
<view class="product-img">
|
||||
<image class="product-image" :src="item.image" mode="aspectFill" v-if="item.image"></image>
|
||||
<view class="product-badges">
|
||||
<view class="product-badge" :style="'background: ' + tag.bg + '; color: ' + tag.color + ';'" v-for="(tag, index1) in item.tags" :key="index1">
|
||||
{{ tag.text }}
|
||||
@@ -129,33 +129,19 @@
|
||||
<text class="filter-drawer-close" @tap="closeFilter">✕</text>
|
||||
</view>
|
||||
<scroll-view class="filter-drawer-body" :scroll-y="true">
|
||||
<!-- 工艺 -->
|
||||
<view class="filter-group">
|
||||
<text class="filter-group-title">工艺</text>
|
||||
<!-- 动态标签筛选组（从 API 获取） -->
|
||||
<view class="filter-group" v-for="(group, gIdx) in filterGroups" :key="gIdx">
|
||||
<text class="filter-group-title">{{ group.title }}</text>
|
||||
<view class="filter-options">
|
||||
<view
|
||||
:class="'filter-option ' + (selectedCrafts.indexOf(item) > -1 ? 'selected' : '')"
|
||||
@tap="toggleCraft"
|
||||
:data-value="item"
|
||||
v-for="(item, index) in craftOptions"
|
||||
:key="index"
|
||||
:class="'filter-option ' + (group.selected.indexOf(tag.id) > -1 ? 'selected' : '')"
|
||||
@tap="toggleFilterTag"
|
||||
:data-group-idx="gIdx"
|
||||
:data-tag-id="tag.id"
|
||||
v-for="(tag, tIdx) in group.tags"
|
||||
:key="tIdx"
|
||||
>
|
||||
{{ item }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 材质 -->
|
||||
<view class="filter-group">
|
||||
<text class="filter-group-title">材质</text>
|
||||
<view class="filter-options">
|
||||
<view
|
||||
:class="'filter-option ' + (selectedMaterials.indexOf(item) > -1 ? 'selected' : '')"
|
||||
@tap="toggleMaterial"
|
||||
:data-value="item"
|
||||
v-for="(item, index) in materialOptions"
|
||||
:key="index"
|
||||
>
|
||||
{{ item }}
|
||||
{{ tag.name }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -178,84 +164,15 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getCountries, getCategories, getTagGroups, getGoods } from '@/api/public.js';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
searchKeyword: '',
|
||||
selectedCountry: 'us',
|
||||
selectedCountry: '',
|
||||
|
||||
countries: [
|
||||
{
|
||||
id: 'us',
|
||||
name: '美国',
|
||||
flag: '🇺🇸'
|
||||
},
|
||||
{
|
||||
id: 'uk',
|
||||
name: '英国',
|
||||
flag: '🇬🇧'
|
||||
},
|
||||
{
|
||||
id: 'jp',
|
||||
name: '日本',
|
||||
flag: '🇯🇵'
|
||||
},
|
||||
{
|
||||
id: 'mx',
|
||||
name: '墨西哥',
|
||||
flag: '🇲🇽'
|
||||
},
|
||||
{
|
||||
id: 'br',
|
||||
name: '巴西',
|
||||
flag: '🇧🇷'
|
||||
},
|
||||
{
|
||||
id: 'ae',
|
||||
name: '中东',
|
||||
flag: '🇦🇪'
|
||||
},
|
||||
{
|
||||
id: 'pl',
|
||||
name: '波兰',
|
||||
flag: '🇵🇱'
|
||||
},
|
||||
{
|
||||
id: 'es',
|
||||
name: '西班牙',
|
||||
flag: '🇪🇸'
|
||||
},
|
||||
{
|
||||
id: 'de',
|
||||
name: '德国',
|
||||
flag: '🇩🇪'
|
||||
},
|
||||
{
|
||||
id: 'it',
|
||||
name: '意大利',
|
||||
flag: '🇮🇹'
|
||||
},
|
||||
{
|
||||
id: 'fr',
|
||||
name: '法国',
|
||||
flag: '🇫🇷'
|
||||
},
|
||||
{
|
||||
id: 'ca',
|
||||
name: '加拿大',
|
||||
flag: '🇨🇦'
|
||||
},
|
||||
{
|
||||
id: 'au',
|
||||
name: '澳大利亚',
|
||||
flag: '🇦🇺'
|
||||
},
|
||||
{
|
||||
id: 'kr',
|
||||
name: '韩国',
|
||||
flag: '🇰🇷'
|
||||
}
|
||||
],
|
||||
countries: [],
|
||||
|
||||
activeCategory: 'all',
|
||||
|
||||
@@ -263,321 +180,228 @@ export default {
|
||||
{
|
||||
id: 'all',
|
||||
name: '全部商品'
|
||||
},
|
||||
{
|
||||
id: 'men',
|
||||
name: '男士服装'
|
||||
},
|
||||
{
|
||||
id: 'women',
|
||||
name: '女士服装'
|
||||
},
|
||||
{
|
||||
id: 'kids',
|
||||
name: '儿童服装'
|
||||
},
|
||||
{
|
||||
id: 'home',
|
||||
name: '家居配饰'
|
||||
},
|
||||
{
|
||||
id: 'bag',
|
||||
name: '包包配饰'
|
||||
}
|
||||
],
|
||||
|
||||
subCategories: [],
|
||||
activeSubCategory: '',
|
||||
|
||||
activeFilters: [
|
||||
{
|
||||
key: 'country',
|
||||
label: '美国'
|
||||
},
|
||||
{
|
||||
key: 'craft',
|
||||
label: '烫画'
|
||||
},
|
||||
{
|
||||
key: 'material',
|
||||
label: '棉麻'
|
||||
}
|
||||
],
|
||||
activeFilters: [],
|
||||
|
||||
showFilter: false,
|
||||
selectedCrafts: ['烫画'],
|
||||
selectedMaterials: ['棉麻'],
|
||||
craftOptions: ['烫画', '刺绣', '丝印', '数码直喷', '热转印'],
|
||||
materialOptions: ['棉麻', '纯棉', '涤纶', '混纺', '牛奶丝'],
|
||||
filterGroups: [],
|
||||
|
||||
pagination: {
|
||||
start: 1,
|
||||
end: 10,
|
||||
total: 96,
|
||||
total: 0,
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
totalPages: 10
|
||||
totalPages: 0
|
||||
},
|
||||
|
||||
pageNumbers: [1, 2, 3, 4, 5],
|
||||
pageNumbers: [],
|
||||
loadingMore: false,
|
||||
|
||||
products: [
|
||||
{
|
||||
id: 1,
|
||||
name: '180G牛奶丝T恤 DG120',
|
||||
price: '28.00',
|
||||
bgColor: '#F5F5F5',
|
||||
emoji: '👕',
|
||||
tags: [
|
||||
{
|
||||
text: '可定制',
|
||||
bg: '#FFF0E5',
|
||||
color: '#FF6800'
|
||||
},
|
||||
{
|
||||
text: '现货',
|
||||
bg: '#E5F5FF',
|
||||
color: '#1890FF'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '纯棉连帽卫衣 HD200',
|
||||
price: '59.00',
|
||||
bgColor: '#E8E8E8',
|
||||
emoji: '🧥',
|
||||
tags: [
|
||||
{
|
||||
text: '可定制',
|
||||
bg: '#FFF0E5',
|
||||
color: '#FF6800'
|
||||
},
|
||||
{
|
||||
text: '快返',
|
||||
bg: '#F0FFE5',
|
||||
color: '#52C41A'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '260G重装T恤 TS260',
|
||||
price: '35.00',
|
||||
bgColor: '#F0F0F0',
|
||||
emoji: '👕',
|
||||
tags: [
|
||||
{
|
||||
text: '可定制',
|
||||
bg: '#FFF0E5',
|
||||
color: '#FF6800'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: '精梳棉Polo衫 PL100',
|
||||
price: '45.00',
|
||||
bgColor: '#F8F8F8',
|
||||
emoji: '👔',
|
||||
tags: [
|
||||
{
|
||||
text: '可定制',
|
||||
bg: '#FFF0E5',
|
||||
color: '#FF6800'
|
||||
},
|
||||
{
|
||||
text: '现货',
|
||||
bg: '#E5F5FF',
|
||||
color: '#1890FF'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: '抓绒卫裤 PT150',
|
||||
price: '42.00',
|
||||
bgColor: '#F5F5F5',
|
||||
emoji: '👖',
|
||||
tags: [
|
||||
{
|
||||
text: '快返',
|
||||
bg: '#F0FFE5',
|
||||
color: '#52C41A'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: '运动速干T恤 ST200',
|
||||
price: '32.00',
|
||||
bgColor: '#E8E8E8',
|
||||
emoji: '👕',
|
||||
tags: [
|
||||
{
|
||||
text: '可定制',
|
||||
bg: '#FFF0E5',
|
||||
color: '#FF6800'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
name: '纯棉背包 BP300',
|
||||
price: '25.00',
|
||||
bgColor: '#F0F0F0',
|
||||
emoji: '🎒',
|
||||
tags: [
|
||||
{
|
||||
text: '可定制',
|
||||
bg: '#FFF0E5',
|
||||
color: '#FF6800'
|
||||
},
|
||||
{
|
||||
text: '现货',
|
||||
bg: '#E5F5FF',
|
||||
color: '#1890FF'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
name: '儿童纯棉T恤 KD100',
|
||||
price: '22.00',
|
||||
bgColor: '#F8F8F8',
|
||||
emoji: '👶',
|
||||
tags: [
|
||||
{
|
||||
text: '可定制',
|
||||
bg: '#FFF0E5',
|
||||
color: '#FF6800'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
name: '帆布托特包 BG150',
|
||||
price: '15.00',
|
||||
bgColor: '#F5F5F5',
|
||||
emoji: '👜',
|
||||
tags: [
|
||||
{
|
||||
text: '可定制',
|
||||
bg: '#FFF0E5',
|
||||
color: '#FF6800'
|
||||
},
|
||||
{
|
||||
text: '快返',
|
||||
bg: '#F0FFE5',
|
||||
color: '#52C41A'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
name: '针织开衫 CR180',
|
||||
price: '55.00',
|
||||
bgColor: '#E8E8E8',
|
||||
emoji: '🧶',
|
||||
tags: [
|
||||
{
|
||||
text: '可定制',
|
||||
bg: '#FFF0E5',
|
||||
color: '#FF6800'
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
|
||||
tag: {
|
||||
bg: '',
|
||||
color: '',
|
||||
text: ''
|
||||
}
|
||||
products: []
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
async onLoad() {
|
||||
await this.initData();
|
||||
this.loadSubCategories('all');
|
||||
await this.loadGoods(1);
|
||||
},
|
||||
methods: {
|
||||
async initData() {
|
||||
try {
|
||||
// 1. 国家列表（始终全量）
|
||||
const countriesRes = await getCountries();
|
||||
const countriesData = (countriesRes.data && countriesRes.data.data) || [];
|
||||
const countries = countriesData.map((c) => ({
|
||||
id: c.id,
|
||||
name: c.countryName,
|
||||
flag: this.codeToEmoji(c.countryIcon)
|
||||
}));
|
||||
|
||||
this.setData({
|
||||
countries
|
||||
});
|
||||
|
||||
// 2. 默认不选中任何国家，显示全部国家的数据
|
||||
await this.loadCategoryData('');
|
||||
|
||||
// 简单检测结构 — 打印到 console 验证
|
||||
console.log('=== [Products API Test] ===');
|
||||
console.log('[1] countries:', countries.length, '条');
|
||||
console.log('=== [Test End] ===');
|
||||
} catch (err) {
|
||||
console.error('[Products initData Error]', err);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 加载分类树和标签组（按国家过滤）
|
||||
* @param {string} countryId 国家 ID，传空字符串表示全部国家
|
||||
*/
|
||||
async loadCategoryData(countryId) {
|
||||
try {
|
||||
const params = countryId ? { countryId: countryId } : {};
|
||||
const [categoriesRes, tagGroupsRes] = await Promise.all([
|
||||
getCategories(params),
|
||||
getTagGroups(params)
|
||||
]);
|
||||
|
||||
// 分类树 → 映射到侧边栏
|
||||
const categoriesData = (categoriesRes.data && categoriesRes.data.data) || [];
|
||||
const categories = [{ id: 'all', name: '全部商品', children: [], productCount: 0 }];
|
||||
categoriesData.forEach((cat) => {
|
||||
categories.push({
|
||||
id: cat.id,
|
||||
name: cat.categoryName,
|
||||
children: cat.children || [],
|
||||
productCount: cat.productCount || 0
|
||||
});
|
||||
});
|
||||
|
||||
// 标签组 → 映射到筛选弹窗
|
||||
const tagGroupsData = (tagGroupsRes.data && tagGroupsRes.data.data) || [];
|
||||
const filterGroups = tagGroupsData.map((g) => ({
|
||||
id: g.id,
|
||||
title: g.groupName,
|
||||
tags: (g.tags || []).map((t) => ({
|
||||
id: t.id,
|
||||
name: t.tagName,
|
||||
color: t.tagColor,
|
||||
fontColor: t.tagFontColor,
|
||||
productCount: t.productCount || 0
|
||||
})),
|
||||
selected: []
|
||||
}));
|
||||
|
||||
this.setData({
|
||||
categories,
|
||||
filterGroups,
|
||||
activeCategory: 'all',
|
||||
subCategories: [],
|
||||
activeSubCategory: ''
|
||||
});
|
||||
|
||||
console.log('[loadCategoryData] countryId=' + (countryId || 'all') +
|
||||
', categories=' + categories.length +
|
||||
', filterGroups=' + filterGroups.length);
|
||||
} catch (err) {
|
||||
console.error('[loadCategoryData Error]', err);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 加载商品列表（分页 + 筛选）
|
||||
* @param {number} [page] 页码，默认 1
|
||||
*/
|
||||
async loadGoods(page) {
|
||||
try {
|
||||
const currentPage = page || this.pagination.current || 1;
|
||||
const pageSize = this.pagination.pageSize || 10;
|
||||
|
||||
var params = {
|
||||
page: currentPage,
|
||||
pageSize: pageSize
|
||||
};
|
||||
|
||||
// 国家筛选
|
||||
if (this.selectedCountry) {
|
||||
params.countryId = this.selectedCountry;
|
||||
}
|
||||
|
||||
// 分类筛选（排除 "all"）
|
||||
if (this.activeCategory && this.activeCategory !== 'all') {
|
||||
params.categoryId = this.activeCategory;
|
||||
}
|
||||
|
||||
// 关键词搜索
|
||||
if (this.searchKeyword && this.searchKeyword.trim()) {
|
||||
params.keyword = this.searchKeyword.trim();
|
||||
}
|
||||
|
||||
console.log('[loadGoods] params:', JSON.stringify(params));
|
||||
|
||||
const res = await getGoods(params);
|
||||
const data = (res.data && res.data.data) || { items: [], total: 0, page: 1, pageSize: 10 };
|
||||
const items = data.items || [];
|
||||
|
||||
// 映射：API 字段 → 模板字段
|
||||
const products = items.map((item) => ({
|
||||
id: item.goodId,
|
||||
name: item.goodName,
|
||||
price: item.price,
|
||||
image: item.image,
|
||||
bgColor: '#F5F5F5',
|
||||
emoji: '👕',
|
||||
tags: (item.tags || []).map(function (t) {
|
||||
return {
|
||||
text: t.tagName,
|
||||
bg: t.tagColor,
|
||||
color: t.tagFontColor
|
||||
};
|
||||
})
|
||||
}));
|
||||
|
||||
const total = data.total || 0;
|
||||
const totalPages = Math.ceil(total / pageSize) || 1;
|
||||
var pageNumbers = [];
|
||||
for (var i = Math.max(1, currentPage - 2); i <= Math.min(totalPages, currentPage + 2); i++) {
|
||||
pageNumbers.push(i);
|
||||
}
|
||||
|
||||
this.setData({
|
||||
products: products,
|
||||
pagination: {
|
||||
start: total === 0 ? 0 : (currentPage - 1) * pageSize + 1,
|
||||
end: Math.min(currentPage * pageSize, total),
|
||||
total: total,
|
||||
current: currentPage,
|
||||
pageSize: pageSize,
|
||||
totalPages: totalPages
|
||||
},
|
||||
pageNumbers: pageNumbers,
|
||||
loadingMore: false
|
||||
});
|
||||
|
||||
console.log('[loadGoods] total=' + total +
|
||||
', page=' + currentPage +
|
||||
', items=' + products.length);
|
||||
} catch (err) {
|
||||
console.error('[loadGoods Error]', err);
|
||||
this.setData({
|
||||
products: [],
|
||||
loadingMore: false
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
codeToEmoji(iconPath) {
|
||||
if (!iconPath) return '🌐';
|
||||
var match = iconPath.match(/\/([^/]+)\.\w+$/);
|
||||
if (!match) return '🌐';
|
||||
var code = match[1].toUpperCase();
|
||||
if (code.length !== 2) return '🌐';
|
||||
var A = 0x1f1e6;
|
||||
return String.fromCodePoint(A + code.charCodeAt(0) - 65) + String.fromCodePoint(A + code.charCodeAt(1) - 65);
|
||||
},
|
||||
|
||||
loadSubCategories(catId) {
|
||||
const subCatMap = {
|
||||
all: [],
|
||||
men: [
|
||||
{
|
||||
id: 'tops',
|
||||
name: '上装'
|
||||
},
|
||||
{
|
||||
id: 'hoodie',
|
||||
name: '卫衣'
|
||||
},
|
||||
{
|
||||
id: 'tshirt',
|
||||
name: 'T恤'
|
||||
},
|
||||
{
|
||||
id: 'shirt',
|
||||
name: '衬衫'
|
||||
},
|
||||
{
|
||||
id: 'pants',
|
||||
name: '裤装'
|
||||
},
|
||||
{
|
||||
id: 'underwear',
|
||||
name: '内衣'
|
||||
}
|
||||
],
|
||||
women: [
|
||||
{
|
||||
id: 'dress',
|
||||
name: '连衣裙'
|
||||
},
|
||||
{
|
||||
id: 'tops',
|
||||
name: '上装'
|
||||
},
|
||||
{
|
||||
id: 'bottoms',
|
||||
name: '下装'
|
||||
}
|
||||
],
|
||||
kids: [
|
||||
{
|
||||
id: 'baby',
|
||||
name: '婴儿装'
|
||||
},
|
||||
{
|
||||
id: 'kids',
|
||||
name: '儿童装'
|
||||
}
|
||||
],
|
||||
home: [
|
||||
{
|
||||
id: 'blanket',
|
||||
name: '毛毯'
|
||||
},
|
||||
{
|
||||
id: 'pillow',
|
||||
name: '抱枕'
|
||||
}
|
||||
],
|
||||
bag: [
|
||||
{
|
||||
id: 'tote',
|
||||
name: '托特包'
|
||||
},
|
||||
{
|
||||
id: 'backpack',
|
||||
name: '背包'
|
||||
}
|
||||
]
|
||||
};
|
||||
var subCats = [];
|
||||
if (catId !== 'all') {
|
||||
var cat = this.categories.find(function (c) { return c.id === catId; });
|
||||
if (cat && cat.children && cat.children.length > 0) {
|
||||
subCats = cat.children.map(function (child) {
|
||||
return { id: child.id, name: child.categoryName };
|
||||
});
|
||||
}
|
||||
}
|
||||
this.setData({
|
||||
subCategories: subCatMap[catId] || [],
|
||||
activeSubCategory: subCatMap[catId]?.[0]?.id || ''
|
||||
subCategories: subCats,
|
||||
activeSubCategory: subCats.length > 0 ? subCats[0].id : ''
|
||||
});
|
||||
},
|
||||
|
||||
@@ -585,28 +409,52 @@ export default {
|
||||
this.setData({
|
||||
searchKeyword: e.detail.value
|
||||
});
|
||||
// 防抖搜索
|
||||
if (this._searchTimer) clearTimeout(this._searchTimer);
|
||||
var self = this;
|
||||
this._searchTimer = setTimeout(function () {
|
||||
self.loadGoods(1);
|
||||
}, 300);
|
||||
},
|
||||
|
||||
selectCountry(e) {
|
||||
async selectCountry(e) {
|
||||
const id = e.currentTarget.dataset.id;
|
||||
|
||||
// 如果点击的是已选中的国家 → 取消选中，重置为全部国家数据
|
||||
if (this.selectedCountry === id) {
|
||||
this.setData({
|
||||
selectedCountry: '',
|
||||
activeFilters: this.activeFilters.filter((f) => f.key !== 'country')
|
||||
});
|
||||
await this.loadCategoryData('');
|
||||
await this.loadGoods(1);
|
||||
return;
|
||||
}
|
||||
|
||||
// 选中新国家 → 重新请求分类和标签组
|
||||
const country = this.countries.find((c) => c.id === id);
|
||||
const filters = this.activeFilters.filter((f) => f.key !== 'country');
|
||||
filters.push({
|
||||
key: 'country',
|
||||
label: country.name
|
||||
});
|
||||
if (country) {
|
||||
filters.push({
|
||||
key: 'country',
|
||||
label: country.name
|
||||
});
|
||||
}
|
||||
this.setData({
|
||||
selectedCountry: id,
|
||||
activeFilters: filters
|
||||
});
|
||||
await this.loadCategoryData(id);
|
||||
await this.loadGoods(1);
|
||||
},
|
||||
|
||||
selectCategory(e) {
|
||||
async selectCategory(e) {
|
||||
const id = e.currentTarget.dataset.id;
|
||||
this.setData({
|
||||
activeCategory: id
|
||||
});
|
||||
this.loadSubCategories(id);
|
||||
await this.loadGoods(1);
|
||||
},
|
||||
|
||||
selectSubCategory(e) {
|
||||
@@ -627,73 +475,117 @@ export default {
|
||||
});
|
||||
},
|
||||
|
||||
toggleCraft(e) {
|
||||
const value = e.currentTarget.dataset.value;
|
||||
let crafts = [...this.selectedCrafts];
|
||||
const idx = crafts.indexOf(value);
|
||||
toggleFilterTag(e) {
|
||||
const gIdx = e.currentTarget.dataset.groupIdx;
|
||||
const tagId = e.currentTarget.dataset.tagId;
|
||||
var groups = [...this.filterGroups];
|
||||
var group = groups[gIdx];
|
||||
if (!group) return;
|
||||
var selected = [...group.selected];
|
||||
var idx = selected.indexOf(tagId);
|
||||
if (idx > -1) {
|
||||
crafts.splice(idx, 1);
|
||||
selected.splice(idx, 1);
|
||||
} else {
|
||||
crafts.push(value);
|
||||
selected.push(tagId);
|
||||
}
|
||||
group.selected = selected;
|
||||
this.setData({
|
||||
selectedCrafts: crafts
|
||||
filterGroups: groups
|
||||
});
|
||||
},
|
||||
|
||||
toggleMaterial(e) {
|
||||
const value = e.currentTarget.dataset.value;
|
||||
let materials = [...this.selectedMaterials];
|
||||
const idx = materials.indexOf(value);
|
||||
if (idx > -1) {
|
||||
materials.splice(idx, 1);
|
||||
} else {
|
||||
materials.push(value);
|
||||
}
|
||||
this.setData({
|
||||
selectedMaterials: materials
|
||||
});
|
||||
},
|
||||
|
||||
removeFilter(e) {
|
||||
async removeFilter(e) {
|
||||
const key = e.currentTarget.dataset.key;
|
||||
const filters = this.activeFilters.filter((f) => f.key !== key);
|
||||
|
||||
// 如果清除的是国家筛选 → 重置分类和标签组为全部国家
|
||||
if (key === 'country') {
|
||||
this.setData({
|
||||
selectedCountry: '',
|
||||
activeFilters: filters
|
||||
});
|
||||
await this.loadCategoryData('');
|
||||
await this.loadGoods(1);
|
||||
return;
|
||||
}
|
||||
|
||||
// 清除标签筛选 → 同步更新 filterGroups.selected
|
||||
if (key.indexOf('tag_') === 0) {
|
||||
var groupId = key.replace('tag_', '');
|
||||
var groups = this.filterGroups.map(function (g) {
|
||||
if (String(g.id) === String(groupId)) {
|
||||
return Object.assign({}, g, { selected: [] });
|
||||
}
|
||||
return g;
|
||||
});
|
||||
this.setData({
|
||||
activeFilters: filters,
|
||||
filterGroups: groups
|
||||
});
|
||||
await this.loadGoods(1);
|
||||
return;
|
||||
}
|
||||
|
||||
this.setData({
|
||||
activeFilters: filters
|
||||
});
|
||||
},
|
||||
|
||||
clearAllFilters() {
|
||||
async clearAllFilters() {
|
||||
// 是否有国家筛选
|
||||
const hasCountry = this.activeFilters.some((f) => f.key === 'country');
|
||||
this.setData({
|
||||
activeFilters: []
|
||||
});
|
||||
if (hasCountry || this.selectedCountry) {
|
||||
this.setData({
|
||||
selectedCountry: ''
|
||||
});
|
||||
await this.loadCategoryData('');
|
||||
}
|
||||
// 清空标签选中
|
||||
var groups = this.filterGroups.map(function (g) {
|
||||
return Object.assign({}, g, { selected: [] });
|
||||
});
|
||||
this.setData({
|
||||
filterGroups: groups
|
||||
});
|
||||
await this.loadGoods(1);
|
||||
},
|
||||
|
||||
resetFilters() {
|
||||
var groups = this.filterGroups.map(function (g) {
|
||||
return Object.assign({}, g, { selected: [] });
|
||||
});
|
||||
this.setData({
|
||||
selectedCrafts: [],
|
||||
selectedMaterials: []
|
||||
filterGroups: groups
|
||||
});
|
||||
},
|
||||
|
||||
confirmFilters() {
|
||||
const filters = [];
|
||||
if (this.selectedCrafts.length > 0) {
|
||||
filters.push({
|
||||
key: 'craft',
|
||||
label: this.selectedCrafts.join(',')
|
||||
});
|
||||
}
|
||||
if (this.selectedMaterials.length > 0) {
|
||||
filters.push({
|
||||
key: 'material',
|
||||
label: this.selectedMaterials.join(',')
|
||||
});
|
||||
}
|
||||
async confirmFilters() {
|
||||
var filters = [];
|
||||
// 保留国家筛选
|
||||
var countryFilter = this.activeFilters.find(function (f) { return f.key === 'country'; });
|
||||
if (countryFilter) filters.push(countryFilter);
|
||||
|
||||
this.filterGroups.forEach(function (group) {
|
||||
if (group.selected.length > 0) {
|
||||
var labels = group.tags
|
||||
.filter(function (t) { return group.selected.indexOf(t.id) > -1; })
|
||||
.map(function (t) { return t.name; });
|
||||
if (labels.length > 0) {
|
||||
filters.push({
|
||||
key: 'tag_' + group.id,
|
||||
label: labels.join(',')
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
this.setData({
|
||||
activeFilters: filters,
|
||||
showFilter: false
|
||||
});
|
||||
await this.loadGoods(1);
|
||||
},
|
||||
|
||||
goDetail(e) {
|
||||
@@ -703,7 +595,7 @@ export default {
|
||||
});
|
||||
},
|
||||
|
||||
changePage(e) {
|
||||
async changePage(e) {
|
||||
const action = e.currentTarget.dataset.action;
|
||||
let current = this.pagination.current;
|
||||
if (action === 'prev' && current > 1) {
|
||||
@@ -712,11 +604,11 @@ export default {
|
||||
if (action === 'next' && current < this.pagination.totalPages) {
|
||||
current++;
|
||||
}
|
||||
this.updatePagination(current);
|
||||
await this.loadGoods(current);
|
||||
},
|
||||
|
||||
goToPage(e) {
|
||||
this.updatePagination(e.currentTarget.dataset.page);
|
||||
async goToPage(e) {
|
||||
await this.loadGoods(e.currentTarget.dataset.page);
|
||||
},
|
||||
|
||||
updatePagination(current) {
|
||||
@@ -743,14 +635,14 @@ export default {
|
||||
if (this.loadingMore) {
|
||||
return;
|
||||
}
|
||||
const nextPage = this.pagination.current + 1;
|
||||
if (nextPage > this.pagination.totalPages) {
|
||||
return;
|
||||
}
|
||||
this.setData({
|
||||
loadingMore: true
|
||||
});
|
||||
setTimeout(() => {
|
||||
this.setData({
|
||||
loadingMore: false
|
||||
});
|
||||
}, 1000);
|
||||
this.loadGoods(nextPage);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user