搜索组件优化 排序逻辑优化
This commit is contained in:
parent
dda0f4d7d6
commit
1184d73a75
|
|
@ -109,7 +109,7 @@ export default {
|
||||||
selectedSecondIds: [], // 抽屉里选中的分类ID
|
selectedSecondIds: [], // 抽屉里选中的分类ID
|
||||||
|
|
||||||
// 额外筛选参数
|
// 额外筛选参数
|
||||||
orderType: 1,
|
orderType: 0,
|
||||||
|
|
||||||
// 排序图标资源
|
// 排序图标资源
|
||||||
iconGreyUp: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/e00ab2ac-bccf-42d8-820c-65727327e279.png',
|
iconGreyUp: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/e00ab2ac-bccf-42d8-820c-65727327e279.png',
|
||||||
|
|
|
||||||
|
|
@ -91,7 +91,7 @@ export default {
|
||||||
navHeight: 0,
|
navHeight: 0,
|
||||||
|
|
||||||
// 排序与筛选参数
|
// 排序与筛选参数
|
||||||
orderType: 1, // 1:时间降序, 2:时间升序, 3:浏览量降序, 4:浏览量升序 (默认1)
|
orderType: 0, // 1:时间降序, 2:时间升序, 3:浏览量降序, 4:浏览量升序 (默认0)
|
||||||
linkType: '', // '':全部, 1:平台课程, 2:品牌课程
|
linkType: '', // '':全部, 1:平台课程, 2:品牌课程
|
||||||
|
|
||||||
filterVisible: false,
|
filterVisible: false,
|
||||||
|
|
|
||||||
|
|
@ -23,7 +23,7 @@
|
||||||
|
|
||||||
<view class="result-container">
|
<view class="result-container">
|
||||||
|
|
||||||
<view class="sort-bar" v-if="['brand', 'skill', 'collection_brand', 'collection_course'].includes(searchType)">
|
<view class="sort-bar" v-if="hasSearched && ['brand', 'skill', 'collection_brand', 'collection_course'].includes(searchType)">
|
||||||
<view class="sort-item" @tap="toggleSort('time')">
|
<view class="sort-item" @tap="toggleSort('time')">
|
||||||
<text class="sort-text" :class="{ active: orderType === 1 || orderType === 2 }">发布时间</text>
|
<text class="sort-text" :class="{ active: orderType === 1 || orderType === 2 }">发布时间</text>
|
||||||
<view class="arrows">
|
<view class="arrows">
|
||||||
|
|
@ -114,8 +114,8 @@ export default {
|
||||||
limit: 10,
|
limit: 10,
|
||||||
hasMore: true,
|
hasMore: true,
|
||||||
|
|
||||||
// 排序参数 1/2发布时间 3/4浏览量
|
// 排序参数:0代表无排序(全灰),1/2发布时间,3/4浏览量
|
||||||
orderType: 1,
|
orderType: 0,
|
||||||
|
|
||||||
// 排序图标资源
|
// 排序图标资源
|
||||||
iconGreyUp: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/e00ab2ac-bccf-42d8-820c-65727327e279.png',
|
iconGreyUp: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/e00ab2ac-bccf-42d8-820c-65727327e279.png',
|
||||||
|
|
@ -162,6 +162,7 @@ export default {
|
||||||
this.hasSearched = false;
|
this.hasSearched = false;
|
||||||
this.page = 1;
|
this.page = 1;
|
||||||
this.hasMore = true;
|
this.hasMore = true;
|
||||||
|
this.orderType = 0; // 清除搜索时重置排序
|
||||||
},
|
},
|
||||||
|
|
||||||
// 切换排序
|
// 切换排序
|
||||||
|
|
@ -172,7 +173,7 @@ export default {
|
||||||
this.orderType = this.orderType === 3 ? 4 : 3;
|
this.orderType = this.orderType === 3 ? 4 : 3;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 如果已经输入了关键词并搜索过,切换排序直接重新加载当前结果
|
// 切换排序直接重新加载当前结果
|
||||||
if (this.hasSearched) {
|
if (this.hasSearched) {
|
||||||
this.page = 1;
|
this.page = 1;
|
||||||
this.hasMore = true;
|
this.hasMore = true;
|
||||||
|
|
@ -184,6 +185,9 @@ export default {
|
||||||
if (!this.keyword.trim()) {
|
if (!this.keyword.trim()) {
|
||||||
return uni.showToast({ title: '请输入搜索内容', icon: 'none' });
|
return uni.showToast({ title: '请输入搜索内容', icon: 'none' });
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 每次发起新的关键字搜索时,重置为全灰无排序状态
|
||||||
|
this.orderType = 0;
|
||||||
this.hasSearched = true;
|
this.hasSearched = true;
|
||||||
this.page = 1;
|
this.page = 1;
|
||||||
this.hasMore = true;
|
this.hasMore = true;
|
||||||
|
|
@ -197,9 +201,11 @@ export default {
|
||||||
let apiUrl = '';
|
let apiUrl = '';
|
||||||
let params = { page: this.page, limit: this.limit };
|
let params = { page: this.page, limit: this.limit };
|
||||||
|
|
||||||
// 给支持排序的接口加上排序参数
|
// 仅在有排序选择时(orderType !== 0)才传入 order_type 参数
|
||||||
if (['brand', 'skill', 'collection_brand', 'collection_course'].includes(this.searchType)) {
|
if (['brand', 'skill', 'collection_brand', 'collection_course'].includes(this.searchType)) {
|
||||||
params.order_type = this.orderType;
|
if (this.orderType !== 0) {
|
||||||
|
params.order_type = this.orderType;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
switch (this.searchType) {
|
switch (this.searchType) {
|
||||||
|
|
@ -231,7 +237,6 @@ export default {
|
||||||
|
|
||||||
if (res.code === 200 && res.data) {
|
if (res.code === 200 && res.data) {
|
||||||
const list = res.data.list || [];
|
const list = res.data.list || [];
|
||||||
// 文档里总数叫 count,不是 total
|
|
||||||
const totalCount = res.data.count || 0;
|
const totalCount = res.data.count || 0;
|
||||||
|
|
||||||
let formattedList = list;
|
let formattedList = list;
|
||||||
|
|
@ -267,7 +272,6 @@ export default {
|
||||||
this.resultList = [...this.resultList, ...formattedList];
|
this.resultList = [...this.resultList, ...formattedList];
|
||||||
}
|
}
|
||||||
|
|
||||||
// 根据接口文档返回的 count 来判断是否还有更多
|
|
||||||
this.hasMore = this.resultList.length < totalCount;
|
this.hasMore = this.resultList.length < totalCount;
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
|
|
@ -300,7 +304,7 @@ export default {
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.search-page {
|
.search-page {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
background: #F5F5F5;
|
background: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-header {
|
.search-header {
|
||||||
|
|
@ -308,7 +312,7 @@ export default {
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
background-color: #Fff;
|
background-color: #fff;
|
||||||
z-index: 999;
|
z-index: 999;
|
||||||
|
|
||||||
.header-content {
|
.header-content {
|
||||||
|
|
@ -364,11 +368,10 @@ export default {
|
||||||
padding: 24rpx;
|
padding: 24rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ================= 排序栏新增样式 ================= */
|
|
||||||
.sort-bar {
|
.sort-bar {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 10rpx 0 24rpx; /* 根据结果页面适当微调顶部间距 */
|
padding: 10rpx 0 24rpx;
|
||||||
gap: 60rpx;
|
gap: 60rpx;
|
||||||
|
|
||||||
.sort-item {
|
.sort-item {
|
||||||
|
|
@ -402,7 +405,6 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
/* ============================================== */
|
|
||||||
|
|
||||||
.loading-tips {
|
.loading-tips {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue