From bab41f4553d5c170900f561a9dba908e6d325227 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Fri, 15 Dec 2023 22:15:22 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20=E5=95=86=E5=93=81=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=EF=BC=9A=E7=AE=80=E5=8C=96=E9=83=A8=E5=88=86=E4=BB=A3?=
 =?UTF-8?q?=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/goods/list.vue | 147 ++++++++++++++++++++++---------------------
 1 file changed, 77 insertions(+), 70 deletions(-)

diff --git a/pages/goods/list.vue b/pages/goods/list.vue
index d625d2e6..8ebcfd0e 100644
--- a/pages/goods/list.vue
+++ b/pages/goods/list.vue
@@ -6,11 +6,11 @@
 			<view class="ss-flex">
 				<view class="ss-flex-1">
 					<su-tabs :list="state.tabList" :scrollable="false" @change="onTabsChange"
-						:current="state.currentTab"></su-tabs>
+                   :current="state.currentTab" />
 				</view>
 				<view class="list-icon" @tap="state.iconStatus = !state.iconStatus">
-					<text v-if="state.iconStatus" class="sicon-goods-list"></text>
-					<text v-else class="sicon-goods-card"></text>
+					<text v-if="state.iconStatus" class="sicon-goods-list" />
+					<text v-else class="sicon-goods-card" />
 				</view>
 			</view>
 		</su-sticky>
@@ -26,17 +26,31 @@
 				</view>
 			</view>
 		</su-popup>
+
+    <!-- 情况一：单列布局 -->
 		<view v-if="state.iconStatus && state.pagination.total > 0" class="goods-list ss-m-t-20">
-			<view class="ss-p-l-20 ss-p-r-20 ss-m-b-20" v-for="item in state.pagination.data" :key="item.id">
-				<s-goods-column class="" size="lg" :data="item" :topRadius="10" :bottomRadius="10"
-					@click="sheep.$router.go('/pages/goods/index', { id: item.id })"></s-goods-column>
+			<view class="ss-p-l-20 ss-p-r-20 ss-m-b-20" v-for="item in state.pagination.list" :key="item.id">
+				<s-goods-column
+          class=""
+          size="lg"
+          :data="item"
+          :topRadius="10"
+          :bottomRadius="10"
+					@click="sheep.$router.go('/pages/goods/index', { id: item.id })"
+        />
 			</view>
 		</view>
-		<view v-if="!state.iconStatus && state.pagination.total > 0"
+    <!-- 情况二：双列布局 -->
+    <view v-if="!state.iconStatus && state.pagination.total > 0"
 			class="ss-flex ss-flex-wrap ss-p-x-20 ss-m-t-20 ss-col-top">
 			<view class="goods-list-box">
 				<view class="left-list" v-for="item in state.leftGoodsList" :key="item.id">
-					<s-goods-column class="goods-md-box" size="md" :data="item" :topRadius="10" :bottomRadius="10"
+					<s-goods-column
+            class="goods-md-box"
+            size="md"
+            :data="item"
+            :topRadius="10"
+            :bottomRadius="10"
 						@click="sheep.$router.go('/pages/goods/index', { id: item.id })"
 						@getHeight="mountMasonry($event, 'left')">
 						<template v-slot:cart>
@@ -47,11 +61,16 @@
 			</view>
 			<view class="goods-list-box">
 				<view class="right-list" v-for="item in state.rightGoodsList" :key="item.id">
-					<s-goods-column class="goods-md-box" size="md" :topRadius="10" :bottomRadius="10" :data="item"
+					<s-goods-column
+            class="goods-md-box"
+            size="md"
+            :topRadius="10"
+            :bottomRadius="10"
+            :data="item"
 						@click="sheep.$router.go('/pages/goods/index', { id: item.id })"
 						@getHeight="mountMasonry($event, 'right')">
 						<template v-slot:cart>
-							<button class="ss-reset-button cart-btn"> </button>
+							<button class="ss-reset-button cart-btn" />
 						</template>
 					</s-goods-column>
 				</view>
@@ -59,46 +78,37 @@
 		</view>
 		<uni-load-more v-if="state.pagination.total > 0" :status="state.loadStatus" :content-text="{
         contentdown: '上拉加载更多',
-      }" @tap="loadmore" />
-		<s-empty v-if="state.pagination.total === 0" icon="/static/soldout-empty.png" text="暂无商品">
-		</s-empty>
+      }" @tap="loadMore" />
+		<s-empty v-if="state.pagination.total === 0" icon="/static/soldout-empty.png" text="暂无商品" />
 	</s-layout>
 </template>
 
 <script setup>
-	import {
-		reactive
-	} from 'vue';
+	import { reactive } from 'vue';
 	import {
 		onLoad,
 		onReachBottom
 	} from '@dcloudio/uni-app';
 	import sheep from '@/sheep';
 	import _ from 'lodash';
+  import { resetPagination } from '@/sheep/util';
 
 	const sys_navBar = sheep.$platform.navbar;
 	const emits = defineEmits(['close', 'change']);
 
-	const pagination = {
-		data: [],
-		current_page: 1,
-		total: 1,
-		last_page: 1,
-	};
 	const state = reactive({
 		pagination: {
-			data: [],
-			current_page: 1,
-			total: 1,
-			last_page: 1,
+			list: [],
+      total: 0,
+      pageNo: 1,
+			pageSize: 6,
 		},
 		// currentSort: 'weigh',
 		// currentOrder: 'desc',
 		currentTab: 0,
-		filterParams: {},
 		curFilter: 0,
 		showFilter: false,
-		iconStatus: false,
+		iconStatus: false, // true - 单列布局；false - 双列布局
 		categoryId: 0,
 		tabList: [{
 				name: '综合推荐',
@@ -133,8 +143,8 @@
 		],
 		loadStatus: '',
 		keyword: '',
-		leftGoodsList: [],
-		rightGoodsList: [],
+		leftGoodsList: [], // 双列布局 - 左侧商品
+		rightGoodsList: [], // 双列布局 - 右侧商品
 	});
 
 	// 加载瀑布流
@@ -143,7 +153,9 @@
 	let rightHeight = 0;
 
 	function mountMasonry(height = 0, where = 'left') {
-		if (!state.pagination.data[count]) return;
+		if (!state.pagination.list[count]) {
+      return;
+    }
 
 		if (where === 'left') {
 			leftHeight += height;
@@ -151,26 +163,28 @@
 			rightHeight += height;
 		}
 		if (leftHeight <= rightHeight) {
-			state.leftGoodsList.push(state.pagination.data[count]);
+			state.leftGoodsList.push(state.pagination.list[count]);
 		} else {
-			state.rightGoodsList.push(state.pagination.data[count]);
+			state.rightGoodsList.push(state.pagination.list[count]);
 		}
 		count++;
 	}
 
+  // 清空列表
 	function emptyList() {
-		state.pagination = pagination
-		state.leftGoodsList = [];
+    resetPagination(state.pagination);
+    state.leftGoodsList = [];
 		state.rightGoodsList = [];
 		count = 0;
 		leftHeight = 0;
 		rightHeight = 0;
 	}
-	//搜索
+
+	// 搜索
 	function onSearch(e) {
 		state.keyword = e;
 		emptyList();
-		getList(state.currentSort, state.currentOrder, state.categoryId, e);
+		getList(state.currentSort, state.currentOrder);
 	}
 
 	// 点击
@@ -189,7 +203,7 @@
 		}
 		emptyList();
 		console.log(e, '6666')
-		getList(e.sort, e.order, state.categoryId, state.keyword);
+		getList(e.sort, e.order);
 	}
 
 	// 点击筛选项
@@ -207,54 +221,47 @@
 		state.currentSort = state.tabList[0].list[val].sort;
 		state.currentOrder = state.tabList[0].list[val].order;
 		emptyList();
-		getList(state.currentSort, state.currentOrder, state.categoryId, state.keyword);
+		getList(state.currentSort, state.currentOrder);
 		state.showFilter = false;
 	};
 
-	async function getList(Sort, Order, categoryId, keyword, page = 1, list_rows = 6) {
+	async function getList(Sort, Order) {
 		state.loadStatus = 'loading';
-		const res = await sheep.$api.goods.list({
+		const { code, data } = await sheep.$api.goods.list({
+      pageNo: state.pagination.pageNo,
+      pageSize: state.pagination.pageSize,
 			sortField: Sort,
 			sortAsc: Order,
-			category_id: !keyword ? categoryId : '',
-			pageSize: list_rows,
-			keyword: keyword,
-			pageNo: page,
+			categoryId: state.categoryId,
+			keyword: state.keyword,
 		});
-		if (res.code === 0) {
-			let couponList = _.concat(state.pagination.data, res.data.list);
-			state.pagination = {
-				...res.data,
-				data: couponList,
-			};
-			mountMasonry();
-			if (state.pagination.current_page < state.pagination.last_page) {
-				state.loadStatus = 'more';
-			} else {
-				state.loadStatus = 'noMore';
-			}
-		}
+    if (code !== 0) {
+      return;
+    }
+    state.pagination.list = _.concat(state.pagination.list, data.list)
+    state.pagination.total = data.total;
+    state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
+    mountMasonry();
 	}
+
 	// 加载更多
-	function loadmore() {
-		if (state.loadStatus !== 'noMore') {
-			getList(
-				state.currentSort,
-				state.currentOrder,
-				state.categoryId,
-				state.keyword,
-				state.pagination.current_page + 1,
-			);
-		}
+	function loadMore() {
+    if (state.loadStatus === 'noMore') {
+      return;
+    }
+    state.pagination.pageNo++;
+    getList(state.currentSort, state.currentOrder);
 	}
+
 	onLoad((options) => {
 		state.categoryId = options.categoryId;
 		state.keyword = options.keyword;
-		getList(state.currentSort, state.currentOrder, state.categoryId, state.keyword);
+		getList(state.currentSort, state.currentOrder);
 	});
+
 	// 上拉加载更多
 	onReachBottom(() => {
-		loadmore();
+		loadMore();
 	});
 </script>