1

components/tab-bar/postList.vue

@@ -55,9 +55,36 @@
 			</view>
 		</view>
 		<view class="huodong">
-			<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/bc6b887514a5469a938cdd0001e841c2.png" alt="" style="margin-right: 5px;" />
-			<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/90a37f3f8a204d7eaa8ea2d3293e1086.png" alt="" style="margin-left: 5px;" />
+			<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/bc6b887514a5469a938cdd0001e841c2.png" alt=""
+				style="margin-right: 5px;" />
+			<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/90a37f3f8a204d7eaa8ea2d3293e1086.png" alt=""
+				style="margin-left: 5px;" />
 		</view>
+		<view style="display: flex;flex-wrap: wrap;">
+			<view class="c-1" @tap="goDetail(item)" v-for="(item,index) in goodsList" :key="index">
+				<view class="c-2">
+					<img :src="item.pic" alt="">
+				</view>
+				<view class="c-3">
+					{{item.text}}
+				</view>
+				<view class="c-4">
+					<view class="c-5">
+						￥{{item.price}}
+					</view>
+					<view class="c-6">
+						{{item.xiangyao}}人想要
+					</view>
+				</view>
+				<view class="c-7">
+					<img :src="item.icon" alt="" />
+					<view class="c-8">
+						AAA二手数码
+					</view>
+				</view>
+			</view>
+		</view>
+		<view style="width: 100%;height: 100px;"></view>
 	</view>
 </template>
 
@@ -65,6 +92,42 @@
 	export default {
 		data() {
 			return {
+				goodsList: [{
+					pic: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/9362dfb66c0f426789584cabb3977ccc.png',
+					text: 'LG27寸显示屏，带底座，屏幕显示正常',
+					price: 100,
+					xiangyao: 12,
+					icon: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/801c569079da4540990c1cc634186fdd.png',
+					shopName: 'AAA二手数码'
+				}, {
+					pic: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/9362dfb66c0f426789584cabb3977ccc.png',
+					text: 'LG27寸显示屏，带底座，屏幕显示正常',
+					price: 100,
+					xiangyao: 12,
+					icon: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/801c569079da4540990c1cc634186fdd.png',
+					shopName: 'AAA二手数码'
+				}, {
+					pic: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/9362dfb66c0f426789584cabb3977ccc.png',
+					text: 'LG27寸显示屏，带底座，屏幕显示正常',
+					price: 100,
+					xiangyao: 12,
+					icon: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/801c569079da4540990c1cc634186fdd.png',
+					shopName: 'AAA二手数码'
+				}, {
+					pic: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/9362dfb66c0f426789584cabb3977ccc.png',
+					text: 'LG27寸显示屏，带底座，屏幕显示正常',
+					price: 100,
+					xiangyao: 12,
+					icon: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/801c569079da4540990c1cc634186fdd.png',
+					shopName: 'AAA二手数码'
+				}, {
+					pic: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/9362dfb66c0f426789584cabb3977ccc.png',
+					text: 'LG27寸显示屏，带底座，屏幕显示正常',
+					price: 100,
+					xiangyao: 12,
+					icon: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/801c569079da4540990c1cc634186fdd.png',
+					shopName: 'AAA二手数码'
+				}],
 				shopList: [{
 					shopName: '高徒课堂',
 					img: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/6c4ab92a43c842d8bb22035bce1f65cc.png'
@@ -138,7 +201,7 @@
 				menuButtonInfo: {}
 			}
 		},
-		filters:{
+		filters: {
 			sliceMsg(val) {
 				return val.slice(0, 4);
 			}
@@ -162,6 +225,11 @@
 				this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
 				this.$forceUpdate()
 			},
+			goDetail(item){
+				uni.navigateTo({
+					url:'/package2/IdleTrad/detail'
+				})
+			},
 			checkTab(index) {
 				this.tabIndex = index
 			},
@@ -183,7 +251,6 @@
 
 	.page1 {
 		width: 100%;
-		height: 100%;
 		font-size: 24rpx;
 		position: relative;
 		display: flex;
@@ -300,12 +367,12 @@
 	}
 
 	.shop-list {
-		    display: flex;
-		    white-space: nowrap;
-		    width: 100%;
-			    padding: 0 12px;
-		    overflow: scroll;
-			    margin-top: 15px;
+		display: flex;
+		white-space: nowrap;
+		width: 100%;
+		padding: 0 12px;
+		overflow: scroll;
+		margin-top: 15px;
 	}
 
 	.shop1 {
@@ -313,6 +380,7 @@
 		width: 50px;
 		text-align: center;
 		margin-right: 18px;
+
 		img {
 			width: 50px;
 			height: 50px;
@@ -325,14 +393,83 @@
 		line-height: 20px;
 		font-weight: 600;
 	}
-	.huodong{
+
+	.huodong {
 		padding: 0 12px;
 		display: flex;
 		height: 85px;
 		margin-top: 12px;
-		img{
+
+		img {
 			height: 85px;
 			flex: 1;
 		}
 	}
+
+	.c-1 {
+		background: #fff;
+		width: 170px;
+		margin-left: 12px;
+		margin-top: 10px;
+		border-radius: 10px;
+		height: 290px;
+	}
+
+	.c-2 {
+		background: #fff;
+		width: 170px;
+		height: 170px;
+
+		img {
+			width: 100%;
+			height: 100%;
+			background-size: 100%;
+			border-radius: 10px;
+		}
+	}
+
+	.c-3 {
+		background: #fff;
+		font-size: 14px;
+		font-weight: 700;
+		padding: 5px;
+	}
+
+	.c-4 {
+		display: flex;
+		padding: 0 5px;
+		height: 20px;
+		line-height: 20px;
+		margin-top: 10px;
+	}
+
+	.c-5 {
+		flex: 1;
+		font-size: 18px;
+		color: red;
+		font-weight: 700;
+	}
+
+	.c-6 {
+		color: rgba(0, 35, 28, 0.6);
+	}
+
+	.c-7 {
+		height: 24px;
+		line-height: 24px;
+		display: flex;
+		margin-top: 10px;
+		padding:0 5px;
+		img {
+			width: 24px;
+			height: 24px;
+			background-size: 100%;
+			border-radius: 24px;
+		}
+	}
+
+	.c-8 {
+		padding-left: 10px;
+		color: rgba(0, 35, 28, 0.6)
+	}
 </style>