guhongwei 2 年之前
父节点
当前提交
590c15e96b
共有 2 个文件被更改,包括 131 次插入37 次删除
  1. 1 1
      pages/home/index.vue
  2. 130 36
      pagesRest/recom/index.vue

+ 1 - 1
pages/home/index.vue

@@ -193,7 +193,7 @@
 			toIndexModel(data) {
 				if (data && data.status == '1') {
 					uni.showToast({
-						title: '模块禁用',
+						title: '升级中敬请期待!',
 						icon: 'none'
 					})
 				} else {

+ 130 - 36
pagesRest/recom/index.vue

@@ -2,22 +2,26 @@
 	<mobile-frame>
 		<view class="main">
 			<view class="one">
-				<image class="image" :src="topUrl" mode="aspectFit"></image>
-			</view>
-			<view class="two">
-				<view class="pubu">
-					<view class="list" v-for="(item,index) in list" :key="index" @tap="toBuy(item)">
-						<view class="list_1">
-							<image class="image" :src="item.file&&item.file.length>0?item.file[0].url:''" mode=""></image>
+				<scroll-view scroll-y="true" class="scroll-view" @scrolltolower="toPage" @scroll="toScroll">
+					<view class="list-scroll-view">
+						<view class="one_1">
+							<image class="image" :src="topUrl" mode="aspectFit"></image>
+						</view>
+						<view class="one_2">
+							<view class="list" v-for="(item,index) in list" :key="index" @tap="toBuy(item)">
+								<view class="list_1">
+									<image class="image" :src="item.file&&item.file.length>0?item.file[0].url:''" mode=""></image>
+								</view>
+								<view class="name textOver">
+									{{item.name}}
+								</view>
+							</view>
 						</view>
-						<view class="name textOver">
-							{{item.name}}
+						<view class="is_bottom" v-if="is_bottom">
+							<text>{{config.bottom_title}}</text>
 						</view>
 					</view>
-				</view>
-			</view>
-			<view class="is_bottom" v-if="is_bottom">
-				<text>{{config.bottom_title}}</text>
+				</scroll-view>
 			</view>
 		</view>
 	</mobile-frame>
@@ -34,9 +38,14 @@
 				tags: '',
 				act_tags: '',
 				topUrl: '',
-				// 数据列表
 				list: [],
-				is_bottom: false
+				total: 0,
+				page: 0,
+				skip: 0,
+				limit: 6,
+				// 数据是否触底
+				is_bottom: false,
+				scrollTop: 0,
 			};
 		},
 		onLoad(e) {
@@ -51,8 +60,6 @@
 			that.searchConfig();
 			that.searchOther();
 			that.search();
-			// 下拉刷新
-			
 		},
 		methods: {
 			// 查询基本设置
@@ -67,7 +74,10 @@
 			},
 			async search() {
 				const that = this;
-				let info = {};
+				let info = {
+					skip: that.skip,
+					limit: that.limit
+				};
 				if (that.type == '1') info.tags = that.tags;
 				else if (that.type == '2') info.act_tags = that.act_tags;
 				let res = await that.$api(`/goods`, 'GET', {
@@ -75,9 +85,36 @@
 					status: '1'
 				});
 				if (res.errcode == '0') {
-					that.$set(that, `list`, res.data)
+					let list = [...that.list, ...res.data];
+					that.$set(that, `list`, list)
+					that.$set(that, `total`, res.total)
 				}
 			},
+			toPage() {
+				const that = this;
+				let list = that.list;
+				let limit = that.limit;
+				if (that.total > list.length) {
+					uni.showLoading({
+						title: '加载中',
+						mask: true
+					})
+					let page = that.page + 1;
+					that.$set(that, `page`, page)
+					let skip = page * limit;
+					that.$set(that, `skip`, skip)
+					that.search();
+					uni.hideLoading();
+
+				} else that.$set(that, `is_bottom`, true)
+			},
+			toScroll(e) {
+				const that = this;
+				let up = that.scrollTop;
+				that.$set(that, `scrollTop`, e.detail.scrollTop);
+				let num = Math.sign(up - e.detail.scrollTop);
+				if (num == 1) that.$set(that, `is_bottom`, false);
+			},
 			// 查询其他信息
 			async searchOther() {
 				const that = this;
@@ -137,31 +174,26 @@
 		height: 100vh;
 
 		.one {
-			padding: 2vw;
-			background-color: #ffffff;
-
-			.image {
-				width: 100%;
-				height: 200px;
-				box-shadow: 0 0 5px #f1f1f1;
-				border-radius: 10px;
-			}
-		}
+			.one_1 {
+				padding: 2vw;
+				background-color: #ffffff;
 
-		.two {
-			padding: 0 2vw;
-			margin: 0 0 2vw 0;
+				.image {
+					width: 100%;
+					height: 200px;
+					box-shadow: 0 0 5px #f1f1f1;
+					border-radius: 10px;
+				}
+			}
 
-			.pubu {
-				// column-count: 2;
-				// column-gap: 3vw;
+			.one_2 {
 				display: flex;
 				justify-content: space-between;
 				flex-wrap: wrap;
+				padding: 0 2vw;
 
 				.list {
 					width: 43vw;
-					// break-inside: avoid;
 					margin: 0 0 2vw 0;
 					box-shadow: 0 0 5px #f1f1f1;
 					padding: 2vw;
@@ -184,6 +216,68 @@
 				}
 			}
 		}
+
+		// .one {
+		// 	padding: 2vw;
+		// 	background-color: #ffffff;
+
+		// 	.image {
+		// 		width: 100%;
+		// 		height: 200px;
+		// 		box-shadow: 0 0 5px #f1f1f1;
+		// 		border-radius: 10px;
+		// 	}
+		// }
+
+		// .two {
+		// 	position: relative;
+		// 	flex-grow: 1;
+
+		// 	// .pubu {
+		// 	// 	// column-count: 2;
+		// 	// 	// column-gap: 3vw;
+		// 	// 	display: flex;
+		// 	// 	justify-content: space-between;
+		// 	// 	flex-wrap: wrap;
+
+		// 	// 	.list {
+		// 	// 		width: 43vw;
+		// 	// 		// break-inside: avoid;
+		// 	// 		margin: 0 0 2vw 0;
+		// 	// 		box-shadow: 0 0 5px #f1f1f1;
+		// 	// 		padding: 2vw;
+		// 	// 		border-radius: 5px;
+
+		// 	// 		.list_1 {
+		// 	// 			margin: 0 0 1vw 0;
+
+		// 	// 			.image {
+		// 	// 				width: 100%;
+		// 	// 				height: 30vh;
+		// 	// 				border-radius: 10px;
+		// 	// 				box-shadow: 0 0 5px #f1f1f1;
+		// 	// 			}
+		// 	// 		}
+
+		// 	// 		.name {
+		// 	// 			font-size: 16px;
+		// 	// 		}
+		// 	// 	}
+		// 	// }
+		// }
+	}
+
+	.scroll-view {
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+
+		.list-scroll-view {
+			display: flex;
+			flex-direction: column;
+		}
 	}