1

pagesMy/collection/market.vue

@@ -6,18 +6,13 @@
 					<view class="list-scroll-view">
 						<view class="list" v-for="(item, index) in list" :key="index" @click="toView(item)">
 							<image class="image" :src="item.file" mode=""></image>
-							<view class="name">
-								{{item.name}}
-							</view>
-							<view class="money">
-								<text>¥</text>
-								<text>{{item.money}}</text>
-							</view>
+							<view class="name">{{item.name||'暂无'}}</view>
 							<view class="other">
 								<view class="other_1">
-									{{item.num}}人评价
+									<text>￥{{item.sell_money||0}}</text>
 								</view>
-								<view class="other_2">
+								<view class="other_1">
+									<view>{{item.person||0}}人评价</view>
 									<text @click="toDel(item)" class="iconfont icon-del"></text>
 								</view>
 							</view>
@@ -25,7 +20,10 @@
 					</view>
 				</scroll-view>
 			</view>
-
+			<view class="two" v-if="!list">
+				<text class="heng"></text>
+				<view class="title"><text>没有更多收藏了</text></view>
+			</view>
 		</view>
 	</mobile-frame>
 </template>
@@ -37,20 +35,17 @@
 				list: [{
 						file: require('@/static/test.png'),
 						name: '摩奇桃汁250ml*24盒',
-						money: 59.90,
-						num: 0
+						sell_money: 59.90,
 					},
 					{
 						file: require('@/static/test.png'),
 						name: '摩奇桃汁250ml*24盒',
-						money: 59.90,
-						num: 0
+						sell_money: 59.90,
 					},
 					{
 						file: require('@/static/test.png'),
 						name: '摩奇桃汁250ml*24盒',
-						money: 59.90,
-						num: 0
+						sell_money: 59.90,
 					}
 				]
 			};
@@ -81,132 +76,75 @@
 		height: 100vh;
 
 		.one {
-			padding: 2vw 0 0 0;
+			display: flex;
+			flex-wrap: wrap;
+			width: 100vw;
+			text-align: center;
 
 			.list {
-				width: 42vw;
-				border: 1px solid var(--f1Color);
-				margin: 2vw 2vw 0 2vw;
-				padding: 2vw;
-				border-radius: 5px;
+				width: 45vw;
+				margin: 2vw;
+				padding: 1vw 0;
+				border: 0.1vw solid var(--fcColor);
+			}
 
-				.image {
-					width: 100%;
-					height: 40vw;
-				}
+			.image {
+				width: 45vw;
+				height: 45vw;
+			}
 
-				.name {
-					font-size: var(--font16Size);
-					margin: 0 0 1vw 0;
-				}
+			.name {
+				margin: 2vw 0 5vw 0;
+				font-size: var(--font14Size);
+			}
 
-				.money {
-					color: var(--fFB1Color);
-					font-size: var(--font14Size);
-					margin: 0 0 1vw 0;
+			.other {
+				display: flex;
+				flex-direction: column;
+
+				.other_1:first-child {
+					color: var(--ff0Color);
+					font-size: var(--font16Size);
 				}
 
-				.other {
+				.other_1 {
 					display: flex;
 					flex-direction: row;
 					justify-content: space-between;
+					padding: 0 4vw;
+					font-size: var(--font14Size);
+					color: var(--fcColor);
 
-					.other_1 {
-						font-size: var(--font14Size);
-						color: var(--f85Color);
+					.iconfont {
+						font-size: 20px;
 					}
 				}
 			}
-
-			.list:nth-child(2n) {
-				margin: 2vw 0 0 0;
-			}
 		}
-	}
-
-	// 	.one {
-	// 		display: flex;
-	// 		flex-wrap: wrap;
-	// 		width: 100vw;
-	// 		text-align: center;
-
-	// 		.list {
-	// 			width: 45vw;
-	// 			margin: 2vw;
-	// 			padding: 1vw 0;
-	// 			border: 0.1vw solid var(--fcColor);
-	// 		}
-
-	// 		.image {
-	// 			width: 45vw;
-	// 			height: 45vw;
-	// 		}
-
-	// 		.name {
-	// 			margin: 2vw 0 5vw 0;
-	// 			font-size: var(--font14Size);
-	// 		}
-
-	// 		.other {
-	// 			display: flex;
-	// 			flex-direction: column;
-
-	// 			.other_1:first-child {
-	// 				color: var(--ff0Color);
-	// 				font-size: var(--font16Size);
-	// 			}
 
-	// 			.other_1 {
-	// 				display: flex;
-	// 				flex-direction: row;
-	// 				justify-content: space-between;
-	// 				padding: 0 4vw;
-	// 				font-size: var(--font14Size);
-	// 				color: var(--fcColor);
+		.two {
+			padding: 3vw 0;
+			margin: 0 0 3vw 0;
+			text-align: center;
 
-	// 				.iconfont {
-	// 					font-size: 20px;
-	// 				}
-	// 			}
-	// 		}
-	// 	}
-
-	// 	.two {
-	// 		padding: 3vw 0;
-	// 		margin: 0 0 3vw 0;
-	// 		text-align: center;
-
-	// 		.heng {
-	// 			display: inline-block;
-	// 			width: 95vw;
-	// 			height: 0.1vw;
-	// 			background-color: var(--fcColor);
-	// 		}
-
-	// 		.title {
-	// 			margin: -5vw 0 0 0;
+			.heng {
+				display: inline-block;
+				width: 95vw;
+				height: 0.1vw;
+				background-color: var(--fcColor);
+			}
 
-	// 			text {
-	// 				display: inline-block;
-	// 				padding: 0 3vw;
-	// 				background-color: var(--mainColor);
-	// 				color: var(--fcColor);
-	// 				font-size: var(--font12Size);
-	// 			}
-	// 		}
-	// 	}
-	// }
-	.scroll-view {
-		position: absolute;
-		top: 0;
-		left: 0;
-		right: 0;
-		bottom: 0;
+			.title {
+				margin: -5vw 0 0 0;
 
-		.list-scroll-view {
-			display: flex;
-			flex-direction: row;
-			flex-wrap: wrap;
+				text {
+					display: inline-block;
+					padding: 0 3vw;
+					background-color: var(--mainColor);
+					color: var(--fcColor);
+					font-size: var(--font12Size);
+				}
+			}
 		}
 	}
 </style>

pagesMy/collection/shop.vue

@@ -1,23 +1,149 @@
 <template>
 	<mobile-frame>
-		店铺
+		<view class="main">
+			<view class="one">
+				<view class="list" v-for="(item, index) in list" :key="index" @click="toView(item)">
+					<image class="image" :src="item.file" mode=""></image>
+					<view class="name">{{item.name||'暂无'}}</view>
+					<view class="other">
+						<view class="other_1">
+							<text>￥{{item.sell_money||0}}</text>
+						</view>
+						<view class="other_1">
+							<view>{{item.person||0}}人评价</view>
+							<text @click="toDel(item)" class="iconfont icon-del"></text>
+						</view>
+					</view>
+				</view>
+			</view>
+			<view class="two" v-if="!list">
+				<text class="heng"></text>
+				<view class="title"><text>没有更多收藏了</text></view>
+			</view>
+		</view>
 	</mobile-frame>
 </template>
 
 <script>
 	export default {
 		data() {
-			return {};
+			return {
+				list: [{
+						file: require('@/static/test.png'),
+						name: '官方自营店',
+						num: 2,
+						time: '2022-09-27'
+					},
+					{
+						file: require('@/static/test.png'),
+						name: '官方自营店',
+						num: 2,
+						time: '2022-09-27'
+					},
+					{
+						file: require('@/static/test.png'),
+						name: '官方自营店',
+						num: 2,
+						time: '2022-09-27'
+					}
+				]
+			};
 		},
 		onShow: function() {
 
 		},
 		methods: {
-
+			// 详细信息
+			toView(e) {
+				const that = this;
+				console.log(e);
+			},
+			// 删除
+			toDel(e) {
+				const that = this;
+				console.log(e);
+			},
 		}
 	}
 </script>
 
 <style lang="scss">
+	.main {
+		display: flex;
+		flex-direction: column;
+		width: 100vw;
+		height: 100vh;
+
+		.one {
+			display: flex;
+			flex-wrap: wrap;
+			width: 100vw;
+			text-align: center;
+
+			.list {
+				width: 45vw;
+				margin: 2vw;
+				padding: 1vw 0;
+				border: 0.1vw solid var(--fcColor);
+			}
+
+			.image {
+				width: 45vw;
+				height: 45vw;
+			}
+
+			.name {
+				margin: 2vw 0 5vw 0;
+				font-size: var(--font14Size);
+			}
+
+			.other {
+				display: flex;
+				flex-direction: column;
+
+				.other_1:first-child {
+					color: var(--ff0Color);
+					font-size: var(--font16Size);
+				}
+
+				.other_1 {
+					display: flex;
+					flex-direction: row;
+					justify-content: space-between;
+					padding: 0 4vw;
+					font-size: var(--font14Size);
+					color: var(--fcColor);
 
+					.iconfont {
+						font-size: 20px;
+					}
+				}
+			}
+		}
+
+		.two {
+			padding: 3vw 0;
+			margin: 0 0 3vw 0;
+			text-align: center;
+
+			.heng {
+				display: inline-block;
+				width: 95vw;
+				height: 0.1vw;
+				background-color: var(--fcColor);
+			}
+
+			.title {
+				margin: -5vw 0 0 0;
+
+				text {
+					display: inline-block;
+					padding: 0 3vw;
+					background-color: var(--mainColor);
+					color: var(--fcColor);
+					font-size: var(--font12Size);
+				}
+			}
+		}
+	}
 </style>