罗世杰：feat：商铺列表项组件

components/ShowShopListItem/ShowShopListItem.vue

@@ -2,24 +2,28 @@
 	<view class="list-border">
 		<view class="list-container">
 			<view class="shop-list-img">
-				<u-image width="80px" height="80px" :src="imageUrl" radius="8px"></u-image>
+				<u-image width="80px" height="80px" :src="shopInfo.imageUrl" radius="8px"></u-image>
 			</view>
 			<view class="text-area">
-				<text>{{title}}</text>
+				<text>{{shopInfo.title}}</text>
 				<view class="pos-and-sqr">
-					<text>锦江区</text>
-					<text>200m2</text>
+						<view>
+							<text>锦江区</text>
+						</view>
+						<view>
+							<text>200m2</text>
+						</view>
 					</view>
 				<view class="rent-and-date">
-					<text>租金{{price}}</text>
-					<text>发布日期{{date}}</text>
+					<text>租金：{{shopInfo.price}}元/月</text>
+					<text>发布日期：{{shopInfo.date}}</text>
 				</view>
 			</view>
 		</view>
-		<view class="list-ads" style="font-size: 14px;">
+		<view class="list-ads" style="font-size: 11px;">
 			<view>
 				<text>已将该店推给 </text> 
-				<text style="color:#ce3b3b;margin: 0 4px;"> {{promotionNum}} </text> 
+				<text style="color:#ce3b3b;margin: 0 4px;"> {{shopInfo.promotionNum}} </text> 
 				<text> 位潜在客户</text>
 			</view>
 			<text style="color:#ce3b3b">我也要推广>></text>
@@ -30,24 +34,19 @@
 <script>
 	export default {
 		props: {
-			imageUrl: {
-				type: String,
+			shopInfo: {
+				type:Object,
 				default(){
-					return 'https://alifei01.cfp.cn/creative/vcg/800/new/VCG41175510742.jpg'
+					return {
+						imageUrl: 'https://alifei01.cfp.cn/creative/vcg/800/new/VCG41175510742.jpg',
+						title: '琴行铺面转让',
+						promotionNum: 23,
+						price: 5000,
+						date: '2023-11-02'
+					}
 				}
 			},
-			promotionNum:{
-				type:Number,
-				default(){
-					return 23
-				}
-			},
-			title:{
-				type:String,
-				default(){
-					return "琴行铺面转让"
-				}
-			}
+			
 			
 		},
 		data() {
@@ -72,16 +71,30 @@
 			display: flex;
 			height: 80px;
 			// background-color: #000;
-			margin-bottom: 5px;
-			.shop-list-img {
-				// border-radius: 8px;
-			}
+			margin-bottom: 5px;			
+			font-size: 12px;
 		}
 		.text-area {
 			margin-left: 10px;
 			display: flex;
 			flex-direction: column;
-			flex-wrap: wrap;
+			justify-content: space-between;
+			> text {
+				font-size: 14px;
+			}
+			.pos-and-sqr {
+				display: flex;
+				text {
+					margin-right: 6px;
+					color: #359867;
+				}
+			}
+			.rent-and-date {
+				text {
+					margin-right: 6px;
+					color: #CC3333;
+				}
+			}
 		}
 		.list-ads {
 			border-top: 1px solid #f7f7f7;