✨ 商品列表：已完成

pages/goods/list.vue

@@ -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,
 		});