罗世杰：feat：商铺展示列表提供两种样式

components/SearchShopList/SearchShopList.vue

@@ -2,6 +2,7 @@
 	<view>
 		<SearchShopListItem
 			v-for="item in shopInfoList"
+			:key="searchid"
 			:shopInfo="item"
 		></SearchShopListItem>
 	</view>
@@ -24,6 +25,7 @@
 				default() {
 					return [
 						{
+							searchid: 1,
 							title: '寻找旺铺,200平米左右，寻找旺铺,200平米左右寻找旺铺,200平米左右寻找旺铺,200平米左右',
 							price: 5000,
 							date: '2023-11-02',
@@ -34,6 +36,7 @@
 							sqr: 500
 						},
 						{
+							searchid: 2,
 							title: '寻找旺铺,200平米左右，寻找旺铺,200平米左右寻找旺铺,200平米左右寻找旺铺,200平米左右',
 							price: 7000,
 							date: '2023-11-02',

components/SearchShopListItem/SearchShopListItem.vue

@@ -88,10 +88,10 @@
 		background-color: #fff;
 		border-radius: 7px;
 		box-shadow: 0 1px 2px 0 rgba(224, 224, 224, 0.50);
+		font-size: 12px;
 		.list-container {
 			display: flex;
 			height: 90px;
-			font-size: 12px;
 		}
 		.text-area {
 			display: flex;

components/ShowShopList/ShowShopList.vue

@@ -2,7 +2,10 @@
 	<view>
 		<ShowShopListItem 
 			v-for="item in shopInfoList"
+			:key="shopid"
 			:shopInfo="item"
+			:is-adshow="isADshow"
+			:show-style="showStyle"
 		></ShowShopListItem>
 	</view>
 </template>
@@ -10,6 +13,8 @@
 <script>
 	/**
 	 * @property {Array}    shopInfoList     对象数组，（带图片）需要展示的商铺列表
+	 * @property {Number}   showStyle        展示商铺的样式类型(0为首页默认)
+	 * @property {Boolean}  isADshow         是否显示推广广告
 	 */
 	export default {
 		name:"ShowShopList",
@@ -19,27 +24,51 @@
 			};
 		},
 		props: {
+			showStyle:{
+				type: Number,
+				default() {
+					return 0
+				}
+			},
+			isADshow: {
+				type: Boolean,
+				default() {
+					return true
+				}
+			},
 			shopInfoList: {
 				type: Array,
 				default() {
 					return [
 						{
+							shopid: 1,
 							imageUrl: 'https://alifei01.cfp.cn/creative/vcg/800/new/VCG41175510742.jpg',
 							title: '琴行铺面转让',
 							promotionNum: 23,
 							price: 6000,
 							date: '2023-11-02',
 							pos: '锦江区',
-							sqr: 100
+							exactPos: '锦江区-汇源南路366号',
+							sqr: 100,
+							zrfText: "转让费：20万",
+							category: '餐饮美食',
+							uname: "张先生",
+							phoneNum: 13348946108,
 						},
 						{
+							shopid: 2,
 							imageUrl: 'https://alifei01.cfp.cn/creative/vcg/800/new/VCG41175510742.jpg',
 							title: '琴行铺面转让',
 							promotionNum: 28,
 							price: 5000,
 							date: '2023-11-02',
 							pos: '锦江区',
-							sqr: 200
+							exactPos: '锦江区-汇源南路366号',
+							sqr: 200,
+							zrfText: "转让费：30万",
+							category: '餐饮美食',
+							uname: "王先生",
+							phoneNum: 13348946108,
 						}
 					]
 				}

components/ShowShopListItem/ShowShopListItem.vue

@@ -6,27 +6,62 @@
 			</view>
 			<view class="text-area">
 				<text style="font-weight: 500;">{{shopInfo.title}}</text>
-				<view class="pos-and-sqr">
+				<view v-if="showStyle == 0" class="pos-and-sqr" >
+					<view>
 						<view>
-							<view>
+							<u-image src="/static/shoplist/sy_icon_lbdw.png" width="12px" height="15px"></u-image>
-								<u-image src="/static/shoplist/sy_icon_lbdw.png" width="12px" height="15px"></u-image>
-							</view>
-							<text>{{shopInfo.pos}}</text>
-						</view>
-						<view>
-							<view>
-								<u-image src="/static/shoplist/sy_icon_lbpm.png" width="12px" height="15px"></u-image>
-							</view>
-							<text>{{shopInfo.sqr}}m2</text>
 						</view>
+						<text>{{shopInfo.pos}}</text>
 					</view>
+					<view>
+						<view>
+							<u-image src="/static/shoplist/sy_icon_lbpm.png" width="12px" height="15px"></u-image>
+						</view>
+						<text>{{shopInfo.sqr}}m2</text>
+					</view>
+				</view>
+				<view v-else class="pos-and-sqr pos-only" >
+					<view>
+						<view>
+							<u-image src="/static/shoplist/dp_icon_hhhdw.png" width="12px" height="15px"></u-image>
+						</view>
+						<text>{{shopInfo.exactPos}}</text>
+					</view>
+				</view>
 				<view class="rent-and-date">
 					<text>租金：{{shopInfo.price}}元/月</text>
-					<text>发布日期：{{shopInfo.date}}</text>
+					<text v-if="showStyle==0">发布日期：{{shopInfo.date}}</text>
+					<text v-else="showStyle==1 ">{{shopInfo.zrfText}}</text>
 				</view>
 			</view>
 		</view>
-		<view class="list-ads" style="font-size: 11px;">
+		<view class="cart-and-date" v-if="showStyle==1">
+			<view>
+				<view>
+					<u-image src="/static/shoplist/sy_icon_lbpm.png" width="12px" height="15px"></u-image>
+				</view>
+				<text>{{shopInfo.sqr}}m2</text>
+			</view>
+			<view>
+				<view>
+					<u-image src="/static/shoplist/sy_icon_lblhy.png" width="12px" height="15px"></u-image>
+				</view>
+				<text>{{shopInfo.category}}</text>
+			</view>
+			<view>
+				<view>
+					<u-image src="/static/shoplist/sy_icon_lbxm.png" width="12px" height="15px"></u-image>
+				</view>
+				<text>{{shopInfo.uname}}</text>
+			</view>
+			<view>
+				<view>
+					<u-image src="/static/shoplist/sy_icon_lblxr.png" width="12px" height="15px"></u-image>
+				</view>
+				<text>{{shopInfo.phoneNum}}</text>
+			</view>
+		</view>
+		<view v-if="isADShow" class="list-ads" style="font-size: 11px;">
 			<view>
 				<text>已将该店推给 </text> 
 				<text style="color:#ce3b3b;margin: 0 4px;"> {{shopInfo.promotionNum}} </text> 
@@ -47,17 +82,22 @@
 				type:Object,
 				default(){
 					return {
-						imageUrl: 'https://alifei01.cfp.cn/creative/vcg/800/new/VCG41175510742.jpg',
+						
-						title: '琴行铺面转让',
-						promotionNum: 23,
-						price: 5000,
-						date: '2023-11-02',
-						pos: '锦江区',
-						sqr: 200
 					}
 				}
 			},
-			
+			showStyle:{
+				type: Number,
+				default() {
+					return 1
+				}
+			},
+			isADShow: {
+				type: Boolean,
+				default() {
+					return true
+				}
+			}
 			
 		},
 		data() {
@@ -79,11 +119,11 @@
 		background-color: #fff;
 		border-radius: 7px;
 		box-shadow: 0 1px 2px 0 rgba(224, 224, 224, 0.50);
+		font-size: 12px;
 		.list-container {
 			display: flex;
 			height: 80px;
 			margin-bottom: 10px;			
-			font-size: 12px;
 		}
 		.text-area {
 			margin-left: 10px;
@@ -93,6 +133,7 @@
 			> text {
 				font-size: 14px;
 			}
+			
 			.pos-and-sqr {
 				display: flex;
 				text {
@@ -107,6 +148,11 @@
 					}
 				}
 			}
+			.pos-only {
+				text {
+					color: #A0A0A0;
+				}
+			}
 			.rent-and-date {
 				text {
 					font-weight: 500;
@@ -115,6 +161,25 @@
 				}
 			}
 		}
+		.cart-and-date {
+			display: flex;
+			border-top: 1px solid #f7f7f7;
+			padding-top: 5px;
+			margin-bottom: 6px;
+			justify-content: space-between;
+			font-weight: 500;
+			text {
+				color: #359867;
+				line-height: 12px;
+			}
+			>view {
+				flex:1;
+				display: flex;
+				>view {
+					margin-right: 4px;
+				}
+			}
+		}
 		.list-ads {
 			border-top: 1px solid #f7f7f7;
 			padding-top: 5px;