|
|
@@ -20,7 +20,7 @@
|
|
|
:zIndex="10" @close="state.showFilter = false">
|
|
|
<view class="filter-list-box">
|
|
|
<view class="filter-item" v-for="(item, index) in state.tabList[state.currentTab].list"
|
|
|
- :key="item.value" :class="[{ 'filter-item-active': index == state.curFilter }]"
|
|
|
+ :key="item.value" :class="[{ 'filter-item-active': index === state.curFilter }]"
|
|
|
@tap="onFilterItem(index)">
|
|
|
{{ item.label }}
|
|
|
</view>
|
|
|
@@ -52,9 +52,10 @@
|
|
|
:topRadius="10"
|
|
|
:bottomRadius="10"
|
|
|
@click="sheep.$router.go('/pages/goods/index', { id: item.id })"
|
|
|
- @getHeight="mountMasonry($event, 'left')">
|
|
|
+ @getHeight="mountMasonry($event, 'left')"
|
|
|
+ >
|
|
|
<template v-slot:cart>
|
|
|
- <button class="ss-reset-button cart-btn"> </button>
|
|
|
+ <button class="ss-reset-button cart-btn" />
|
|
|
</template>
|
|
|
</s-goods-column>
|
|
|
</view>
|
|
|
@@ -68,7 +69,8 @@
|
|
|
:bottomRadius="10"
|
|
|
:data="item"
|
|
|
@click="sheep.$router.go('/pages/goods/index', { id: item.id })"
|
|
|
- @getHeight="mountMasonry($event, 'right')">
|
|
|
+ @getHeight="mountMasonry($event, 'right')"
|
|
|
+ >
|
|
|
<template v-slot:cart>
|
|
|
<button class="ss-reset-button cart-btn" />
|
|
|
</template>
|
|
|
@@ -103,20 +105,18 @@
|
|
|
pageNo: 1,
|
|
|
pageSize: 6,
|
|
|
},
|
|
|
- // currentSort: 'weigh',
|
|
|
- // currentOrder: 'desc',
|
|
|
- currentTab: 0,
|
|
|
- curFilter: 0,
|
|
|
+ currentSort: undefined,
|
|
|
+ currentOrder: undefined,
|
|
|
+ currentTab: 0, // 当前选中的 tab
|
|
|
+ curFilter: 0, // 当前选中的 list 筛选项
|
|
|
showFilter: false,
|
|
|
iconStatus: false, // true - 单列布局；false - 双列布局
|
|
|
- categoryId: 0,
|
|
|
+ keyword: '',
|
|
|
+ categoryId: 0,
|
|
|
tabList: [{
|
|
|
name: '综合推荐',
|
|
|
- // value: '',
|
|
|
list: [{
|
|
|
- label: '综合推荐',
|
|
|
- // sort: '',
|
|
|
- // order: true,
|
|
|
+ label: '综合推荐'
|
|
|
},
|
|
|
{
|
|
|
label: '价格升序',
|
|
|
@@ -133,16 +133,15 @@
|
|
|
{
|
|
|
name: '销量',
|
|
|
sort: 'salesCount',
|
|
|
- order: false,
|
|
|
- // value: 'salesCount',
|
|
|
+ order: false
|
|
|
},
|
|
|
{
|
|
|
name: '新品优先',
|
|
|
- // value: 'create_time',
|
|
|
+ value: 'createTime',
|
|
|
+ order: false
|
|
|
},
|
|
|
],
|
|
|
loadStatus: '',
|
|
|
- keyword: '',
|
|
|
leftGoodsList: [], // 双列布局 - 左侧商品
|
|
|
rightGoodsList: [], // 双列布局 - 右侧商品
|
|
|
});
|
|
|
@@ -152,6 +151,7 @@
|
|
|
let leftHeight = 0;
|
|
|
let rightHeight = 0;
|
|
|
|
|
|
+ // 处理双列布局 leftGoodsList + rightGoodsList
|
|
|
function mountMasonry(height = 0, where = 'left') {
|
|
|
if (!state.pagination.list[count]) {
|
|
|
return;
|
|
|
@@ -189,49 +189,54 @@
|
|
|
|
|
|
// 点击
|
|
|
function onTabsChange(e) {
|
|
|
+ // 如果点击的是【综合推荐】，则直接展开或者收起筛选项
|
|
|
if (state.tabList[e.index].list) {
|
|
|
state.currentTab = e.index;
|
|
|
state.showFilter = !state.showFilter;
|
|
|
return;
|
|
|
- } else {
|
|
|
- state.showFilter = false;
|
|
|
}
|
|
|
+ state.showFilter = false;
|
|
|
+
|
|
|
+ // 如果点击的是【销量】或者【新品优先】，则直接切换 tab
|
|
|
if (e.index === state.currentTab) {
|
|
|
return;
|
|
|
- } else {
|
|
|
- state.currentTab = e.index;
|
|
|
}
|
|
|
+
|
|
|
+ state.currentTab = e.index;
|
|
|
+ state.currentSort = e.sort;
|
|
|
+ state.currentOrder = e.order;
|
|
|
emptyList();
|
|
|
- console.log(e, '6666')
|
|
|
getList(e.sort, e.order);
|
|
|
}
|
|
|
|
|
|
- // 点击筛选项
|
|
|
+ // 点击 tab 的 list 筛选项
|
|
|
const onFilterItem = (val) => {
|
|
|
- console.log(val)
|
|
|
- if (
|
|
|
- state.currentSort === state.tabList[0].list[val].sort &&
|
|
|
- state.currentOrder === state.tabList[0].list[val].order
|
|
|
- ) {
|
|
|
+ // 如果点击的是当前的筛选项，则直接收起筛选项，不要加载数据
|
|
|
+ // 这里选择 tabList[0] 的原因，是目前只有它有 list
|
|
|
+ if (state.currentSort === state.tabList[0].list[val].sort
|
|
|
+ && state.currentOrder === state.tabList[0].list[val].order) {
|
|
|
state.showFilter = false;
|
|
|
return;
|
|
|
}
|
|
|
+ state.showFilter = false;
|
|
|
+
|
|
|
+ // 设置筛选条件
|
|
|
state.curFilter = val;
|
|
|
state.tabList[0].name = state.tabList[0].list[val].label;
|
|
|
state.currentSort = state.tabList[0].list[val].sort;
|
|
|
state.currentOrder = state.tabList[0].list[val].order;
|
|
|
- emptyList();
|
|
|
- getList(state.currentSort, state.currentOrder);
|
|
|
- state.showFilter = false;
|
|
|
- };
|
|
|
+ // 清空 + 加载数据
|
|
|
+ emptyList();
|
|
|
+ getList();
|
|
|
+ }
|
|
|
|
|
|
- async function getList(Sort, Order) {
|
|
|
+ async function getList() {
|
|
|
state.loadStatus = 'loading';
|
|
|
const { code, data } = await sheep.$api.goods.list({
|
|
|
pageNo: state.pagination.pageNo,
|
|
|
pageSize: state.pagination.pageSize,
|
|
|
- sortField: Sort,
|
|
|
- sortAsc: Order,
|
|
|
+ sortField: state.currentSort,
|
|
|
+ sortAsc: state.currentOrder,
|
|
|
categoryId: state.categoryId,
|
|
|
keyword: state.keyword,
|
|
|
});
|
YunaiV