商品列表

pages.json

@@ -4,7 +4,7 @@
             "path" : "pages/home/home",
             "style" :                                                                                    
             {
-                "navigationBarTitleText": "",
+                "navigationBarTitleText": "懒人企业福利社",
                 "enablePullDownRefresh": false
             }
             

pages/home/home.vue

 <template>
 	<view class="layout">
-		<view class="title">懒人企业福利社</view>
 		<view class="header">
 			<view class="header-top">
 				<text v-if="isLogin" class="header-name">你好，{{ name }}</text>
@@ -14,10 +13,12 @@
 		</view>
 		<view class="list">
 			<view class="item" v-for="(item, index) in brandList" :key="index">
-				<image class="icon"></image>
+				<view class="item-layout">
+					<image class="icon" mode="aspectFill" :src="item.imgPath"></image>
 					<view class="item-right">
-					<text class="item-title">叮咚买菜</text>
-					<text class="item-desc">最高70%返现</text>
+						<text class="item-title">{{item.name}}</text>
+						<text class="item-desc">{{item.des}}</text>
+					</view>
 				</view>
 			</view>
 		</view>
@@ -68,10 +69,12 @@ export default {
 			this.$net
 				.get('/goods/brand', { page: this.page, pageSize: this.pageSize })
 				.then(res => {
-					if (res.list.length > 0) {
-						this.brandList.concat(res.list);
+					
+					if (res.data.list.length > 0) {
+						this.brandList = this.brandList.concat(res.data.list).concat(res.data.list).concat(res.data.list).concat(res.data.list).concat(res.data.list).concat(res.data.list).concat(res.data.list).concat(res.data.list).concat(res.data.list).concat(res.data.list).concat(res.data.list).concat(res.data.list).concat(res.data.list);
 					}
-					this.loadingType = res.list.length < this.pageSize ? 'more' : 'noMore';
+					this.loadingType = res.data.list.length < this.pageSize ? 'noMore' : 'more';
+					console.log(this.loadingType)
 				})
 				.catch(err => {
 					console.log(err);
@@ -87,17 +90,10 @@ export default {
 	height: 100%;
 	display: flex;
 	flex-direction: column;
-	.title {
-		background: #ffffff;
-		width: 100%;
-		color: #333333;
-		text-align: center;
-		height: 88rpx;
-		line-height: 88rpx;
-	}
 	.header {
 		height: 350rpx;
-		position: relative;
+		width: 100%;
+		position: sticky;
 		display: flex;
 		flex-direction: column;
 		background-image: url(../../static/home-header-bg.png);
@@ -125,6 +121,7 @@ export default {
 				color: #ffffff;
 				line-height: 58rpx;
 				text-align: center;
+				background-size: 100% 100%;
 			}
 		}
 		.header-center {
@@ -142,34 +139,60 @@ export default {
 				color: #ffffff;
 			}
 		}
+	}
 	.list {
 		display: flex;
 		flex-direction: row;
 		background: #ffeeee;
 		border-radius: 30rpx 30rpx 0rpx 0rpx;
 		padding-top: 25rpx;
+		margin-top: -50rpx;
+		z-index: 99;
+		padding: 15rpx 15rpx;
+		flex-wrap: wrap;
 		.item {
 			width: 50%;
 			height: 144rpx;
+			margin-top: 15rpx;
+			margin-bottom: 15rpx;
+			.item-layout {
 				display: flex;
 				flex-direction: row;
 				align-items: center;
 				justify-content: center;
+				height: 144rpx;
+				margin: 0 15rpx;
+				background: #ffffff;
+				border-radius: 20rpx;
+				padding-left: 15rpx;
+				padding-right: 15rpx;
+				overflow: hidden;
 				.icon {
 					width: 90rpx;
 					height: 90rpx;
+					border-radius: 90rpx;
 				}
 				.item-right {
 					display: flex;
+					flex: 1;
 					flex-direction: column;
+					margin-left: 20rpx;
+					overflow: hidden;
 					.item-title {
 						font-size: 30rpx;
 						font-weight: bolder;
 						color: #333333;
+						text-overflow: ellipsis;
+						white-space: nowrap;
+						overflow: hidden;
 					}
 					.item-desc {
 						font-size: 24rpx;
 						color: #999999;
+						text-overflow: ellipsis;
+						white-space: nowrap;
+						margin-top: 15rpx;
+						overflow: hidden;
 					}
 				}
 			}