Merge pull request '罗世杰：feat：商铺列表和搜索列表组件完善 转让和选择页面初始化' (#27) from lj into master

Reviewed-on: http://git.feashow.cn/odjbin/city-store-transfer/pulls/27

components/DropDown/DropDown.vue

@@ -0,0 +1,50 @@
+<template>
+	<view class="container">
+		<view 
+			class="title-view"
+			v-for="item in title"
+		>
+			<text>{{item}}</text>
+			<view class="arrow">
+				<u-image src="/static/dropdown/dp_icon_lxia.png" width="14rpx" height="11rpx"/>
+			</view>
+		</view>
+		
+	</view>
+</template>
+
+<script>
+	export default {
+		name:"DropDown",
+		data() {
+			return {
+				title: ['行业','区域','面积','筛选']
+			};
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+.container{
+	height: 100rpx;
+	background-color: #fff;
+	display: flex;
+	justify-content: space-around;
+	.title-view {
+		display: flex;
+		>text {
+			font-size: 14px;
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+		}
+	}
+	.arrow {
+		margin-left: 8rpx;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+	}
+}
+	
+</style>

components/DropDown/DropDownItem.vue

@@ -0,0 +1,8 @@
+<template>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>

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

@@ -29,7 +29,7 @@
 			showStyle:{
 				type: Number,
 				default() {
-					return 1
+					return 0
 				}
 			},
 			isADshow: {
@@ -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("点击了编辑ID为",shopid);
-				console.log(shopid);
 			},
 			handleDel(shopid) {
 				this.$emit('delItem', shopid)

pages/index/index.vue

@@ -20,9 +20,9 @@
 </template>
 
 <script>
-	import HomeNoticeBar from "./HomeNoticeBar.vue"
+	import HomeNoticeBar from "./HomeMainContent/HomeNoticeBar.vue"
-	import HomeNavCard from "./HomeNavCard.vue"
+	import HomeNavCard from "./HomeMainContent/HomeNavCard.vue"
-	import Statistics from "./Statistics.vue"
+	import Statistics from "./HomeMainContent/Statistics.vue"
 	export default {
 		components: {
 			HomeNavCard,

pages/shopAddress/shopAddress.vue

@@ -1,6 +1,12 @@
 <template>
-	<view>
+	<view class="root">
-		找店地址
+		<InputAndSwiper></InputAndSwiper>
+		
+		<view style="margin-top: 10px;">
+			<DropDown></DropDown>
+		</view>
+		
+		<SearchShopList :showStyle="1"></SearchShopList>
 		<TabBar :current-page="3"></TabBar>
 	</view>
 </template>
@@ -18,6 +24,11 @@
 	}
 </script>
 
-<style>
+<style lang="scss">
-
+	page {
+		background-color: $uni-bg-color-grey;
+	}
+	.root{
+		margin: 0 10px;
+	}
 </style>

pages/shopTransfer/shopTransfer.vue

@@ -1,6 +1,12 @@
 <template>
-	<view>
+	<view class="root">
-		店铺转让
+		<InputAndSwiper></InputAndSwiper>
+		
+		<view style="margin-top: 10px;">
+			<DropDown></DropDown>
+		</view>
+		
+		<ShowShopList :showStyle="1"></ShowShopList>
 		<TabBar :current-page="1"></TabBar>
 	</view>
 </template>
@@ -9,7 +15,30 @@
 	export default {
 		data() {
 			return {
-				
+				value1: 1,
+								value2: 2,
+								options1: [{
+										label: '默认排序',
+										value: 1,
+									},
+									{
+										label: '距离优先',
+										value: 2,
+									},
+									{
+										label: '价格优先',
+										value: 3,
+									}
+								],
+								options2: [{
+										label: '去冰',
+										value: 1,
+									},
+									{
+										label: '加冰',
+										value: 2,
+									},
+								],
 			}
 		},
 		methods: {
@@ -18,6 +47,12 @@
 	}
 </script>
 
-<style>
+<style lang="scss">
-
+	page {
+		background-color: $uni-bg-color-grey;
+	}
+	.root {
+		margin: 0 10px;
+	}
+	
 </style>