推荐商品分页

api/goods/index.js

@@ -8,7 +8,8 @@ const api = {
   basic: 'goods/basic',
   specData: 'goods/specData',
   skuInfo: 'goods/skuInfo',
-  recommended: 'goods/recommended',
+  recommended: 'goods/recommended',
+	recommendedNew: 'goods/recommendedNew',
   poster: 'goods/poster',
   serveList:'goods.service/list',
   presale:'goods/presale'
@@ -79,6 +80,11 @@ export const specData = (goodsId) => {
 // 获取推荐的商品列表
 export const recommended = () => {
   return request.get(api.recommended)
+}
+
+// 获取推荐的商品列表(新)
+export const recommendedNew = (params) => {
+  return request.get(api.recommendedNew, { ...params })
 }
 
 // 获取商品的指定SKU信息

pages/cart/index.vue

@@ -174,6 +174,7 @@
 					</view>
 				</template> -->
 			<!-- </u-waterfall> -->
+			<view v-if="goodsRecommend.length" class="finished">{{ recommendLoadTitle }}</view>
 			<u-empty text="暂无数据显示哦～" v-if="goodsRecommend.length==0" mode="list" style="width: 100%"></u-empty>
 		</view>
 
@@ -244,7 +245,10 @@
 				// 选中的商品ID记录
 				checkedIds: [],
 				// 选中的商品总金额
-				totalPrice: '0.00'
+				totalPrice: '0.00',
+				recommendPage: 1,
+				recommendFinish: false,
+				recommendLoadTitle: ''
 			}
 		},
 		computed: {
@@ -273,9 +277,6 @@
 				setCartTabBadge()
 			}
 		},
-		onReady() {
-			this.getSuggest();
-		},
 		/**
 		 * 生命周期函数--监听页面显示
 		 */
@@ -284,24 +285,40 @@
 			this.checkedIds = uni.getStorageSync(CartIdsIndex)
 			// 获取购物车商品列表
 			checkLogin() ? this.getCartList() : this.isLoading = false
+			
+			this.recommendPage = 1;
+			this.recommendFinish = false;
+			this.recommendLoadTitle = '';
+			this.goodsRecommend = [];
+			this.getSuggest()
+		},
+		onReachBottom() {
+		  if (!this.recommendFinish) {
+				this.getSuggest()
+			}
 		},
 
 		methods: {
 			getSuggest() {
 				// 获取推荐商品
-				Api.recommended().then(res => {
+				Api.recommendedNew({ page: this.recommendPage++ }).then(res => {
-					let arr = res.data.goodsList
+					console.log(res);
+					let arr = res.data.goodsList.data
 					if (arr && arr.length > 0) {
-						arr.map(a => {
+						for (let i = 0; i < arr.length; i++) {
-							a.goods_price_min = Number(a.goods_price_min)
+							arr[i].goods_price_min = Number(arr[i].goods_price_min);
-							a.goods_price_max = Number(a.goods_price_max)
+							arr[i].goods_price_max = Number(arr[i].goods_price_max)
-							a.line_price_min = Number(a.line_price_min)
+							arr[i].line_price_min = Number(arr[i].line_price_min);
-							a.line_price_max = Number(a.line_price_max)
+							arr[i].line_price_max = Number(arr[i].line_price_max)
-						})
+						}
+					}
+					if (arr.length < res.data.goodsList.per_page) {
+						this.recommendFinish = true;
 					}
-					this.goodsRecommend = arr
+						this.recommendLoadTitle = this.recommendFinish ? "已全部加载完" : "上拉加载更多";
+					this.goodsRecommend = [...this.goodsRecommend, ...arr]
 				})
-
+			
 			},
 			// 计算合计金额 (根据选中的商品)
 			onCalcTotalPrice() {
@@ -610,6 +627,13 @@
 				}
 			}
 		}
+		.finished {
+			font-size: 28rpx;
+			line-height: 100rpx;
+			text-align: center;
+			color: #bbb;
+			width: 100%;
+		}
 	}
 
 	// 页面顶部

pages/index/index.vue

@@ -253,7 +253,7 @@
 								</view>
 								<view class="goodsInfo">
 									<view class="title">
-										<text v-if="item.selling_point" class="ziying">{{item.selling_point}}</text>
+										<!-- <text v-if="item.selling_point" class="ziying">{{item.selling_point}}</text> -->
 										<text class="name">{{item.goods_name}}</text>
 									</view>
 								</view>
@@ -345,6 +345,7 @@
 							</view>
 						</template> -->
 					<!-- </u-waterfall> -->
+					<view v-if="goodsRecommend.length" class="finished">{{ recommendLoadTitle }}</view>
 					<u-empty text="暂无数据显示哦～" v-if="goodsRecommend.length==0" mode="list" style="width: 100%"></u-empty>
 				</view>
 			</view>
@@ -628,6 +629,9 @@
 				storagePageIndex: '',
 				tabActiveColor: '',
 				navBgColor: '',
+				recommendPage: 1,
+				recommendFinish: false,
+				recommendLoadTitle: ''
 			}
 		},
 		computed: {
@@ -646,6 +650,11 @@
 				},
 			},
 		},
+		onReachBottom() {
+		  if (!this.recommendFinish) {
+				this.getSuggest()
+			}
+		},
 		methods: {
 			/**
 			 * 获取小程序配置
@@ -926,8 +935,9 @@
 			},
 			getSuggest() {
 				// 获取推荐商品
-				Api.recommended().then(res => {
+				Api.recommendedNew({ page: this.recommendPage++ }).then(res => {
-					let arr = res.data.goodsList
+					console.log(res);
+					let arr = res.data.goodsList.data
 					if (arr && arr.length > 0) {
 						for (let i = 0; i < arr.length; i++) {
 							arr[i].goods_price_min = Number(arr[i].goods_price_min);
@@ -936,7 +946,11 @@
 							arr[i].line_price_max = Number(arr[i].line_price_max)
 						}
 					}
-					this.goodsRecommend = arr
+					if (arr.length < res.data.goodsList.per_page) {
+						this.recommendFinish = true;
+					}
+						this.recommendLoadTitle = this.recommendFinish ? "已全部加载完" : "上拉加载更多";
+					this.goodsRecommend = [...this.goodsRecommend, ...arr]
 				})
 
 			},
@@ -1168,7 +1182,6 @@
 		onLoad() {
 			this.getTypeList()
 			this.getSeckill()
-			this.getSuggest() //根据数据格式需要分页
 			this.getCityInfo()
 			this.getCoupons();
 			this.getServeList();
@@ -1182,6 +1195,11 @@
 			}
 			this.getWxAppStyle();
 			this.isLogin = uni.getStorageSync("AccessToken") ? true : false
+			this.recommendPage = 1;
+			this.recommendFinish = false;
+			this.recommendLoadTitle = '';
+			this.goodsRecommend = [];
+			this.getSuggest()
 		},
 		onPageScroll(e) {
 			if (e.scrollTop <= 200) { // 当滚动到顶部且向下滑动时为true
@@ -2066,6 +2084,13 @@
 						}
 					}
 				}
+				.finished {
+					font-size: 28rpx;
+					line-height: 100rpx;
+					text-align: center;
+					color: #bbb;
+					width: 100%;
+				}
 			}
 		}
 

pages/user/index.vue

@@ -523,9 +523,9 @@
 					:src="$picUrl+'/static/user/right.png'"></image>
 			</view>
 			<view class="goodsRecommend" v-if="isLogin == false || userInfo.user_type != 40">
-				<!-- <u-waterfall v-model="suggestGoodsList" ref="uWaterfall1"> -->
+				<!-- <u-waterfall v-model="goodsRecommend" ref="uWaterfall1"> -->
 					<!-- <template v-slot:left="{leftList}"> -->
-						<view class="goodsItem" v-for="(item,index) in suggestGoodsList" @click="goodsDetail(item)"
+						<view class="goodsItem" v-for="(item,index) in goodsRecommend" @click="goodsDetail(item)"
 							:key="index">
 							<view class="pic">
 								<image :src="item.goods_image" mode="aspectFill"></image>
@@ -616,6 +616,7 @@
 						</view>
 					</template> -->
 				<!-- </u-waterfall> -->
+				<view v-if="goodsRecommend.length" class="finished">{{ recommendLoadTitle }}</view>
 			</view>
 		</view>
 
@@ -688,7 +689,10 @@
 				memberCode: false,
 				isLogin: false,
 				userInfo: {},
-				suggestGoodsList: [],
+				goodsRecommend: [],
+				recommendPage: 1,
+				recommendFinish: false,
+				recommendLoadTitle: ''
 			}
 		},
 		onShow(options) {
@@ -706,7 +710,16 @@
 					recovery_order: {}
 				}
 			}
-			this.getSuggest();
+			this.recommendPage = 1;
+			this.recommendFinish = false;
+			this.recommendLoadTitle = '';
+			this.goodsRecommend = [];
+			this.getSuggest()
+		},
+		onReachBottom() {
+		  if (!this.recommendFinish) {
+				this.getSuggest()
+			}
 		},
 		onPageScroll(e) {
 			if (e.scrollTop <= 200) { // 当滚动到顶部且向下滑动时为true
@@ -854,20 +867,24 @@
 			},
 			getSuggest() {
 				// 获取推荐商品
-				const that = this
+				Api.recommendedNew({ page: this.recommendPage++ }).then(res => {
-				Api.recommended()
+					console.log(res);
-					.then(res => {
+					let arr = res.data.goodsList.data
-						let arr = res.data.goodsList
+					if (arr && arr.length > 0) {
-						if (arr && arr.length > 0) {
+						for (let i = 0; i < arr.length; i++) {
-							arr.map(a => {
+							arr[i].goods_price_min = Number(arr[i].goods_price_min);
-								a.goods_price_min = Number(a.goods_price_min)
+							arr[i].goods_price_max = Number(arr[i].goods_price_max)
-								a.goods_price_max = Number(a.goods_price_max)
+							arr[i].line_price_min = Number(arr[i].line_price_min);
-								a.line_price_min = Number(a.line_price_min)
+							arr[i].line_price_max = Number(arr[i].line_price_max)
-								a.line_price_max = Number(a.line_price_max)
-							})
 						}
-						that.suggestGoodsList = arr
+					}
-					})
+					if (arr.length < res.data.goodsList.per_page) {
+						this.recommendFinish = true;
+					}
+						this.recommendLoadTitle = this.recommendFinish ? "已全部加载完" : "上拉加载更多";
+					this.goodsRecommend = [...this.goodsRecommend, ...arr]
+				})
+			
 			},
 			// 刷新页面
 			onRefreshPage() {
@@ -1388,6 +1405,15 @@
 				}
 			}
 		}
+	
+		
+		.finished {
+			font-size: 28rpx;
+			line-height: 100rpx;
+			text-align: center;
+			color: #bbb;
+			width: 100%;
+		}
 	}
 
 	.section_1 {