罗世杰：faet：SearchShopList组件支持第二种样式

components/SearchShopList/SearchShopList.vue

@@ -4,6 +4,8 @@
 			v-for="item in shopInfoList"
 			:key="searchid"
 			:shopInfo="item"
+			:show-style="showStyle"
+			@delItem="handleDel"
 		></SearchShopListItem>
 	</view>
 </template>
@@ -20,6 +22,18 @@
 			};
 		},
 		props: {
+			showStyle:{
+				type: Number,
+				default() {
+					return 0
+				}
+			},
+			isEdit: {
+				type: Boolean,
+				default() {
+					return false
+				}
+			},
 			shopInfoList: {
 				type: Array,
 				default() {
@@ -33,7 +47,8 @@
 							pos: '锦江区',
 							category: '餐饮美食',
 							uname: 'A先生',
-							sqr: 500
+							sqr: 500,
+							yjtzText: "423万元"
 						},
 						{
 							searchid: 2,
@@ -44,11 +59,21 @@
 							pos: '锦江区',
 							category: '餐饮美食',
 							uname: '王先生',
-							sqr: 200
+							sqr: 200,
+							yjtzText: "423万元"
 						}
 					]
 				}
 			}
+		},
+		methods: {
+			handleDel(shopid){
+				console.log("删除了商铺", shopid);
+				// const delindex = this.shopInfoList.findIndex((item,index)=> item.shopid === shopid)
+				// TODO：不能直接修改
+				// if(delindex !== -1)  this.shopInfoList = this.shopInfoList.slice(delindex,1)
+				// console.log(this.shopInfoList);
+			}
 		}
 	}
 </script>

components/SearchShopListItem/SearchShopListItem.vue

@@ -3,6 +3,28 @@
 		<view class="list-container">
 			<view class="text-area">
 				<text>{{shopInfo.title}}</text>
+				
+				<view class="style2" v-if="showStyle === 1">
+					<view class="rent-and-cost">
+						<text>租金：{{shopInfo.price}}元/月</text>
+						<text v-if="showStyle==1">预计投资：{{shopInfo.yjtzText}}</text>
+					</view>
+					<view class="cart-and-pos">
+						<view>
+							<view>
+								<u-image src="/static/shoplist/sy_icon_lbhy.png" width="12px" height="15px"></u-image>
+							</view>
+							<text>{{shopInfo.category}}</text>
+						</view>
+						<view>
+							<view>
+								<u-image src="/static/shoplist/sy_icon_lbhdw.png" width="12px" height="15px"></u-image>
+							</view>
+							<text>{{shopInfo.pos}}</text>
+						</view>
+					</view>
+				</view>
+				
 				<view class="pos-and-sqr">
 					<view>
 						<view>
@@ -23,7 +45,8 @@
 						<text>{{shopInfo.phoneNum}}</text>
 					</view>
 				</view>
-				<view class="cart-and-date">
+				
+				<view class="cart-and-date" v-if="showStyle === 0">
 					<view>
 						<view>
 							<u-image src="/static/shoplist/sy_icon_lbhy.png" width="12px" height="15px"></u-image>
@@ -43,6 +66,18 @@
 						<text>发布日期：{{shopInfo.date}}</text>
 					</view>
 				</view>
+				
+				<view v-if="isEdit" class="del-and-edit bottom-common">
+					<view class="edit" @click="handleEdit(shopInfo.searchid)">
+						<u-image src="/static/shoplist/dp_icon_pj.png" width="12px" height="15px"></u-image>
+						<text>编辑</text>
+					</view>
+					<view class="del" @click="handleDel(shopInfo.searchid)">
+						<u-image src="/static/shoplist/dp_icon_sc.png" width="12px" height="15px"></u-image>
+						<text>删除</text>
+					</view>
+				</view>
+				
 			</view>
 		</view>
 	</view>
@@ -66,7 +101,18 @@
 					}
 				}
 			},
-			
+			showStyle: {
+				type:Number,
+				default() {
+					return 0
+				}
+			},
+			isEdit: {
+				type:Boolean,
+				default(){
+					return false
+				}
+			}
 			
 		},
 		data() {
@@ -77,6 +123,15 @@
 		},
 		computed: {
 			
+		},
+		methods: {
+			handleEdit(searchid) {
+				// TODO 完成页面跳转
+				console.log("点击了编辑ID为",searchid);
+			},
+			handleDel(searchid) {
+				this.$emit('delItem', searchid)
+			}
 		}
 	}
 </script>
@@ -91,7 +146,26 @@
 		font-size: 12px;
 		.list-container {
 			display: flex;
-			height: 90px;
+			height: auto;
+		}
+		.bottom-common {
+			border-top: 1px solid #f7f7f7;
+			padding-top: 5px;
+			display: flex;
+			> view {
+				display: flex;
+			}
+		}
+		.del-and-edit{
+			margin-top: 6px;
+			justify-content: flex-end;
+			>view{
+				margin-left: 38rpx;
+			}
+			text {
+				margin-left: 4px;
+				color: #666666;
+			}
 		}
 		.text-area {
 			display: flex;
@@ -103,13 +177,43 @@
 			>view {
 				display: flex;
 				>view {
-					flex:1;
 					display: flex;
 					>view {
 						margin-right: 4px;
 					}
 				}
 			}
+			
+			.style2 {
+				display: flex;
+				flex-direction: column;
+				color: #CC3333;
+				font-weight: 500;
+				.rent-and-cost {
+					text{
+						margin-right: 26rpx;
+					}
+					margin-top: 5px;
+					padding-top: 5px;
+					padding-bottom: 6px;
+				}
+				.cart-and-pos{
+					> view{
+						margin-right: 27px;
+						display: flex;
+					}
+					display: flex;
+					border-top: 1px solid #f7f7f7;
+					padding-top: 5px;
+					margin-bottom: 5px;
+					justify-content: start;
+					font-weight: 500;
+					text {
+						color: #CC3333;
+						line-height: 12px;
+					}
+				}
+			}
 			.pos-and-sqr {
 				justify-content: space-between;
 				margin-top: 5px;
@@ -119,6 +223,7 @@
 					line-height: 12px;
 				}
 				>view {
+					flex:1;
 					display: flex;
 					>view {
 						margin-right: 4px;
@@ -126,6 +231,7 @@
 				}
 			}
 			.cart-and-date {
+				display: flex;
 				border-top: 1px solid #f7f7f7;
 				padding-top: 5px;
 				justify-content: space-between;
@@ -133,6 +239,7 @@
 				text {
 					color: #CC3333;
 					line-height: 12px;
+					margin-right: 48rpx;
 				}
 			}
 		}

components/ShowShopList/ShowShopList.vue

@@ -38,6 +38,12 @@
 					return true
 				}
 			},
+			isEdit: {
+				type: Boolean,
+				default() {
+					return false
+				}
+			},
 			shopInfoList: {
 				type: Array,
 				default() {

components/ShowShopListItem/ShowShopListItem.vue

@@ -131,8 +131,7 @@
 		methods: {
 			handleEdit(shopid) {
 				// TODO 完成页面跳转
-				console.log("edit clicked");
-				console.log(shopid);
+				console.log("点击了编辑ID为",shopid);
 			},
 			handleDel(shopid) {
 				this.$emit('delItem', shopid)

pages/index/index.vue

@@ -32,7 +32,7 @@
 		data() {
 			return {
 				notice: '寒雨连江夜入吴 平明送客楚山孤 洛阳亲友如相问 一片冰心在玉壶',
-				chooseIndex: 0,
+				chooseIndex: 1,
 				statisticsNum: [231753, 1345]
 			}
 		},