Skip to content

Commit a8f321e

Browse files
x3zvawqx3zvawq
committed
fix(pet): 接入宠物搜索选项修正分类筛选
1 parent d889463 commit a8f321e

5 files changed

Lines changed: 147 additions & 101 deletions

File tree

‎src/components/pet/tabs.vue‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
</el-select>
1313
<el-select v-model="formData.Source" :class="{ 'is-active': formData.Source }" filterable class="u-select"
1414
clearable placeholder="全部">
15-
<el-option v-for="(item, index) in Source" :key="'laiyuan' + index" :label="item.name"
15+
<el-option v-for="(item, index) in sourceOptions" :key="'laiyuan' + index" :label="item.name"
1616
:value="item.source">
1717
</el-option>
1818
<template #prefix>来源</template>
@@ -29,7 +29,7 @@
2929
</el-select>
3030
<el-select v-model="formData.Source" :class="{ 'is-active': formData.Source }" filterable class="u-select"
3131
clearable placeholder="全部">
32-
<el-option v-for="(item, index) in Source" :key="'laiyuan' + index" :label="item.name"
32+
<el-option v-for="(item, index) in sourceOptions" :key="'laiyuan' + index" :label="item.name"
3333
:value="item.source">
3434
</el-option>
3535
<template #prefix>来源</template>
@@ -82,8 +82,14 @@ export default {
8282
},
8383
typeOptions() {
8484
return this.types.map(item => ({
85-
type: item.class,
86-
name: item.name
85+
type: item.class ?? item.ID,
86+
name: item.name || item.TypeName
87+
}));
88+
},
89+
sourceOptions() {
90+
return this.Source.map(item => ({
91+
source: item.source ?? item.ID,
92+
name: item.name || item.TypeName
8793
}));
8894
},
8995
searchItems() {

‎src/service/pet.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,10 @@ function getPets(params) {
1212
});
1313
}
1414

15+
function getPetSearchOptions() {
16+
return $.get("/pet/search");
17+
}
18+
1519
function getPet(petid, params) {
1620
return $.get(`/pet/${petid}`, {
1721
params,
@@ -61,4 +65,4 @@ function getSliders(type, client, source_ids, per = 10) {
6165
function getMapList() {
6266
return axios.get(__imgPath + "map/data/map_index.json");
6367
}
64-
export { getPets, getPet, getPetSkill, getShopInfo, getPetLucky, getSkill, getSliders, getMapList };
68+
export { getPets, getPetSearchOptions, getPet, getPetSkill, getShopInfo, getPetLucky, getSkill, getSliders, getMapList };

‎src/views/pet/PetList.vue‎

Lines changed: 47 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -57,10 +57,7 @@ import petItem from "@/components/pet/item";
5757
import luckyItem from "@/components/pet/lucky";
5858
import { clone, debounce } from "lodash";
5959
import { isPhone } from "@/utils/index";
60-
import Type from "@/assets/data/pet_type.json";
61-
import Source from "@/assets/data/pet_source.json";
62-
import { __imgPath } from "@/utils/config";
63-
import { getPets, getPetLucky, getSliders, getMapList } from "@/service/pet";
60+
import { getPets, getPetSearchOptions, getPetLucky, getSliders, getMapList } from "@/service/pet";
6461
import dayjs from "@/plugins/day";
6562
6663
export default {
@@ -75,8 +72,8 @@ export default {
7572
return {
7673
tabsData: {}, // 标签筛选数据
7774
active: "", // 当前激活的分类ID
78-
Type, // 宠物类型配置
79-
Source, // 宠物来源配置
75+
Type: [], // 宠物类型配置
76+
Source: [], // 宠物来源配置
8077
list: [], // 单分类宠物列表
8178
page: 1, // 当前页码
8279
per_page: 50, // 每页显示数量
@@ -89,13 +86,9 @@ export default {
8986
showAllList: false, // 是否显示单分类全部列表
9087
mapList: [], // 地图列表
9188
count: 0, // 每行卡片数
89+
searchReady: false, // 筛选项是否已加载
9290
// 分类宠物列表（首页按分类展示）
93-
list_type: [
94-
{ class: 1, type: 1, name: "水族", list: [] },
95-
{ class: 2, type: 2, name: "禽鸟", list: [] },
96-
{ class: 3, type: 3, name: "走兽", list: [] },
97-
{ class: 4, type: 4, name: "机关", list: [] },
98-
],
91+
list_type: [],
9992
};
10093
},
10194
computed: {
@@ -142,9 +135,10 @@ export default {
142135
this.getPetLucky();
143136
this.getMapList();
144137
this.showCount(1);
145-
// 首次加载数据
146-
this.$nextTick(() => {
147-
this.getPetListInit();
138+
this.getPetSearchOptions().finally(() => {
139+
this.$nextTick(() => {
140+
this.getPetListInit();
141+
});
148142
});
149143
150144
this.handleResize = debounce(() => {
@@ -156,6 +150,43 @@ export default {
156150
window.removeEventListener("resize", this.handleResize);
157151
},
158152
methods: {
153+
/**
154+
* 获取宠物筛选项
155+
* 种类对应宠物 Class 字段，来源对应宠物 Source 字段
156+
*/
157+
getPetSearchOptions() {
158+
return getPetSearchOptions()
159+
.then((res) => {
160+
const data = Array.isArray(res.data) ? res.data : [];
161+
const typeOptions = data
162+
.filter((item) => item.Type === 1 && item.TypeName)
163+
.map((item) => ({
164+
class: item.ID,
165+
type: item.ID,
166+
name: item.TypeName,
167+
}));
168+
const sourceOptions = data
169+
.filter((item) => item.Type === 2 && item.TypeName)
170+
.map((item) => ({
171+
source: item.ID,
172+
name: item.TypeName,
173+
}));
174+
175+
this.Type = [{ class: "", type: 0, name: "所有种类" }, ...typeOptions];
176+
this.Source = [{ source: "", name: "所有途径" }, ...sourceOptions];
177+
this.list_type = typeOptions.map((item) => ({
178+
...item,
179+
list: [],
180+
}));
181+
})
182+
.catch((err) => {
183+
console.error("获取宠物筛选项失败", err);
184+
})
185+
.finally(() => {
186+
this.searchReady = true;
187+
});
188+
},
189+
159190
/**
160191
* 获取地图列表
161192
* 用于筛选组件中的地图下拉框
@@ -175,6 +206,7 @@ export default {
175206
* @returns {Boolean} 是否无结果
176207
*/
177208
isNoRes() {
209+
if (!this.searchReady || this.loading) return false;
178210
if (this.params.Class) {
179211
return this.list.length === 0;
180212
}
@@ -190,7 +222,6 @@ export default {
190222
this.page = 1;
191223
document.documentElement.scrollTop = 0;
192224
this.typeName = this.getTypeName();
193-
this.Type = [...Type];
194225
// 同步更新 tabsData 中的 Class
195226
this.tabsData = { ...this.tabsData, Class: val };
196227
},
@@ -331,7 +362,6 @@ export default {
331362
if (newClass !== this.active) {
332363
this.active = newClass;
333364
this.typeName = this.getTypeName();
334-
this.Type = [...Type];
335365
document.documentElement.scrollTop = 0;
336366
}
337367

‎src/views/pet/miniprogram/PetList.vue‎

Lines changed: 38 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ import { __cdn } from "@/utils/config";
8383
import { extractTextContent, iconLink, resolveImagePath } from "@jx3box/jx3box-common/js/utils";
8484
8585
import { clone } from "lodash";
86-
import { getPetLucky, getPets, getSliders } from "@/service/pet";
86+
import { getPetLucky, getPetSearchOptions, getPets, getSliders } from "@/service/pet";
8787
import dayjs from "@/plugins/day";
8888
import PvxSuspension from "@/components/PvxSuspension.vue";
8989
@@ -101,31 +101,8 @@ export default {
101101
pages: 1,
102102
total: 0,
103103
luckyList:[],
104-
list_type: [
105-
{
106-
class: 1,
107-
type: 1,
108-
name: "水族",
109-
list: [],
110-
},
111-
{
112-
class: 2,
113-
type: 2,
114-
name: "禽鸟",
115-
list: [],
116-
},
117-
{
118-
class: 3,
119-
type: 3,
120-
name: "走兽",
121-
list: [],
122-
},
123-
{
124-
class: 4,
125-
type: 4,
126-
name: "机关",
127-
list: [],
128-
},]
104+
searchReady: false,
105+
list_type: [],
129106
};
130107
},
131108
computed: {
@@ -148,12 +125,14 @@ export default {
148125
deep: true,
149126
immediate: true,
150127
handler(val) {
128+
if (!this.searchReady) return;
151129
this.getPetListInit();
152130
},
153131
},
154132
},
155133
created() {
156134
this.getPetLucky();
135+
this.getPetSearchOptions();
157136
},
158137
methods: {
159138
iconLink,
@@ -182,25 +161,48 @@ export default {
182161
return result;
183162
},
184163
toAll(){
185-
this.active=0;
164+
this.active = 0;
165+
this.list = [];
166+
this.finished = false;
167+
this.page = 1;
168+
this.total = 0;
169+
this.tabsData = {};
186170
},
187171
changePetType(item) {
188172
this.active = item.type;
189173
this.active?this.per_page=20:this.per_page=12;
190174
this.list = [];
191175
this.finished=false
192176
this.page=1;
193-
this.tabsData = {
194-
class: item.class,
195-
type: item.type,
196-
name: item.name
197-
};
177+
this.total = 0;
178+
this.tabsData = {};
198179
},
199180
setActive(val) {
200181
this.active = val;
201182
this.page = 1;
202183
document.documentElement.scrollTop = 0;
203184
},
185+
getPetSearchOptions() {
186+
getPetSearchOptions()
187+
.then((res) => {
188+
const data = Array.isArray(res.data) ? res.data : [];
189+
this.list_type = data
190+
.filter((item) => item.Type === 1 && item.TypeName)
191+
.map((item) => ({
192+
class: item.ID,
193+
type: item.ID,
194+
name: item.TypeName,
195+
list: [],
196+
}));
197+
})
198+
.catch((err) => {
199+
console.error("获取宠物筛选项失败", err);
200+
})
201+
.finally(() => {
202+
this.searchReady = true;
203+
this.getPetListInit();
204+
});
205+
},
204206
205207
getPetListInit() {
206208
if (!this.active) {
@@ -236,13 +238,10 @@ export default {
236238
this.list = this.list.concat(newList);
237239
if(this.list.length==this.total)this.finished=true;
238240
} else {
239-
const typesMap = {
240-
1: () => (this.list_type[0].list = newList || []),
241-
2: () => (this.list_type[1].list = newList || []),
242-
3: () => (this.list_type[2].list = newList || []),
243-
4: () => (this.list_type[3].list = newList || []),
244-
};
245-
typesMap[params.Class]();
241+
const typeIndex = this.list_type.findIndex((item) => item.class === params.Class);
242+
if (typeIndex !== -1) {
243+
this.list_type[typeIndex].list = newList || [];
244+
}
246245
}
247246
if (this.params.Class) {
248247
this.total = res.data.total;

0 commit comments

Comments
 (0)