商铺列表 修改

public/appnew/src/components/shop/shopList.vue

@@ -4,10 +4,10 @@
 			<div class="nav-main">
 				<div v-for="(item, index) in mainData" :key="item.title" :class="{active:index === initTabNumMain}" @click="tabMain(index)">{{item.title}}</div>
 			</div>
-			<div class="nav-seat"></div>
 			<div class="nav-main-choose">
 				<div v-for="(item, index) in mainDataChoose" :key="item.title" :class="{active:index === initTabNumMainChoose}" @click="tabMainChoose(index)">{{item.title}}</div>
 			</div>
+			<div class="nav-seat"></div>
 		</nav>
 		<main class="main-content">
 			<section v-for="(item, index) in mainData" v-show="index === initTabNumMain">
@@ -32,6 +32,38 @@
 				<div class="loading-gif-block" v-show="isLoading">正在加载...</div>
 			</section>
 		</main>
+		<div class="mark-shop-choose" v-for="(item, index) in mainDataChoose" :key="item.title" v-show="(initTabNumMainChoose == index) && item.isShow">
+			<div v-show="index == 0">
+				<ul class="mark-shop-choose-ul">
+					<li>区域</li>
+				</ul>
+			</div>
+			<div v-show="index == 1">
+				<ul class="mark-shop-choose-ul">
+					<li v-for="(item1, index1) in mainDataChooseLi.yetai" class="li-choose li-choose-yetai" :class="{active:index1 === initTabNumYeTai}" @click="tabYeTai(index1)">{{item1}}</li>
+				</ul>
+			</div>
+			<div v-show="index == 2">
+				<ul class="mark-shop-choose-ul">
+					<li v-for="(item2, index2) in mainDataChooseLi.acreage" class="li-choose li-choose-area" :class="{active:index2 === initTabNumArea}" @click="tabArea(index2)">{{item2.value}}</li>
+				</ul>
+			</div>
+			<div v-show="index == 3">
+				<div class="mark-shop-choose-ul mark-shop-choose-ul-padding">
+					<p class="rent-choose">租金（单选）</p>
+					<span v-for="(item6, index6) in mainDataChooseLi.money" class="li-choose-span li-choose-span-rent" :class="{active:index6 === initTabNumRent}" @click="tabRent(index6)">{{item6.value}}</span>
+					<p class="lable-choose">特色标签（多选）</p>
+					<span v-for="(item3, index3) in mainDataChooseLi.more" class="li-choose-span">{{item3}}</span>
+					<div class="more-button">
+						<span class="clear-btn">清空</span>
+						<span class="save-btn">保存</span>
+					</div>
+				</div>
+				
+			</div>
+		</div>
+		<div class="mark-shop-choose-gray" v-for="(item, index) in mainDataChoose"  v-show="(initTabNumMainChoose == index) && item.isShow" @click="tabMainChoose(index)">
+		</div>
 	</div>
 </template>
 
@@ -44,6 +76,7 @@
 		},
 		data: () => ({
 			list: [],
+			mainDataChooseLi: [],
 			mainData: [
 				{
 					'title': '街铺',
@@ -65,18 +98,28 @@
 			pageSize: 15,
 			initTabNumMain: 0,
 			isLoading: false,//是否正在加载
+			initTabNumMainChoose: '',
+			initTabNumYeTai:'',
+			initTabNumArea:'',
+			initTabNumRent:'',
 			mainDataChoose:[{
 				'title': '区域',
+				'isShow': false,
 			}, {
 				'title': '业态',
+				'isShow': false,
 			}, {
 				'title': '面积',
+				'isShow': false,
 			}, {
 				'title': '更多',
+				'isShow': false,
 			}],
 		}),
 		created() {
+			
 			let _this = this;
+			    _this.getChooseList();
 				_this.common.duringRequest({
 					'urlStr': '/api/getShopList',
 					startAction() {
@@ -132,6 +175,27 @@
 					});
 				}
 			},
+			getChooseList() {
+				let _this = this;
+					_this.axios({
+						method: 'get',
+						url: '/api/filtrateConditionV2',
+						responseType: 'json',
+						data: {
+							'city' : '上海市'
+						}
+					})
+					.then(function(response) {
+						if(response.data.code == 200) {
+							_this.mainDataChooseLi = response.data.data;
+						} else {
+							layer.tipsX(response.data.msg);
+						}
+					})
+					.catch(function(error) {
+						layer.tipsX(error);
+					});
+			},
 			tabMain(index) {
 				let _this = this;
 				_this.initTabNumMain = index;
@@ -139,6 +203,35 @@
 					_this.getList();
 				};
 			},
+			tabMainChoose(index){
+				let _this = this;
+				_this.initTabNumMainChoose = index;
+				_this.mainDataChoose[index].isShow = !_this.mainDataChoose[index].isShow;
+				_this.mainDataChoose.forEach((item, i) => {
+					if(i != index){
+						_this.mainDataChoose[i].isShow = false;
+					}
+				});
+				
+			},
+			tabYeTai(index){
+				let _this = this;
+				_this.initTabNumYeTai = index;
+				_this.mainDataChoose[_this.initTabNumMainChoose].isShow = false;
+			},
+			tabArea(index){
+				let _this = this;
+				_this.initTabNumArea = index;
+				_this.mainDataChoose[_this.initTabNumMainChoose].isShow = false;
+			},
+			tabRent(index){
+				let _this = this;
+				_this.initTabNumRent = index;
+			},
+			tabLable(index){
+				let _this = this;
+				_this.initTabNumRent = index;
+			},
 			selesctImg(item){
 				var _img = '';
 				if(item.images.length == 0){
@@ -184,10 +277,12 @@
 		left: 0;
 		font-size: .46rem;
 		top: 0;
+		z-index:666 ;
+		
 	}
 	
 	nav>.nav-seat {
-		height: .9rem;
+		height: 1.86rem;
 	}
 	
 	nav>.nav-main>div {
@@ -209,6 +304,7 @@
 		height: .06rem;
 		border-radius: .03rem;
 		background-color: rgb(255, 161, 50);
+		z-index:666 ;
 	}
 	
 	.main-content {
@@ -241,15 +337,15 @@
     	width: 2.1rem;
     }
 	.main-sec-li .shop-list-con{
-		margin-left: .24rem;
+		margin-left: .3rem;
 	}
 	.shop-list-con{
-		width: 4.2rem;
+		width: 4.5rem;
 		overflow: hidden;
 	}
 	.shop-list-con .shop-title{
 		font-size: .3rem;
-		width: 4.2rem;
+		width:4.5rem;
 		text-overflow: ellipsis;
 		white-space: nowrap;
 		overflow: hidden;
@@ -268,5 +364,114 @@
     .shop-list-top{
     	margin-top: .12rem;
     }
-	
+	/*选择项样式*/
+	nav>.nav-main-choose {
+		display: flex;
+		box-sizing: border-box;
+		background-color: #FFF;
+		width: 100%;
+		height: .96rem;
+		line-height: .96rem;
+		position: fixed;
+		font-size: .28rem;
+		color: #1A1A1A;
+		position: fixed;
+		top: .9rem;
+		z-index:666 ;
+	}
+	nav>.nav-main-choose>div {
+		flex: 1;
+		text-align: center;
+		
+	}
+	nav>.nav-main-choose>div.active {
+		color: #FFA029;
+	}
+	.mark-shop-choose{
+		position: fixed;
+		top: 1.86rem;
+		z-index: 666;
+		width: 100%;
+	}
+	.li-choose{
+		height: 1rem;
+		width: 100%;
+		text-align: center;
+		line-height: 1rem;
+	}
+	.mark-shop-choose-ul{
+		background-color:#fff ;
+		height: 6.8rem;
+		overflow-y: scroll;
+	}
+	.mark-shop-choose-gray{
+		background-color: rgba(0,0,0,.5);
+		position: fixed;
+		z-index:555 ;
+		height: 100%;
+		width: 100%;
+		top: 0;
+		left: 0;
+	}
+	.mark-shop-choose-ul-padding{
+		box-sizing: border-box;
+		padding: .23rem .42rem;
+	}
+	.rent-choose,.lable-choose{
+		font-size: .3rem;
+		color: #1A1A1A;
+		margin-bottom: .38rem;
+	}
+	.lable-choose{
+		margin-top: .21rem;
+	}
+	.li-choose-span{
+		color: #1A1A1A ;
+		font-size: .26rem;
+		padding: .1rem 0;
+		display: inline-block;
+		width: 1.465rem;
+		background-color: #F5F5F5;
+		text-align: center;
+		margin-right: .2rem;
+		margin-bottom: .2rem;
+	}
+	.clear-btn{
+		width: 3.2rem;
+		height: .72rem;
+		color: #FFA029;
+		background-color: #fff;
+		font-size: .3rem;
+		text-align: center;
+		line-height: .72rem;
+		margin-right: .3rem;
+		display: inline-block;
+		border: 1px solid #FFA029;
+		box-sizing: border-box;
+		border-radius: .02rem;
+		letter-spacing: .03rem;
+	}
+	.save-btn{
+		width: 3rem;
+		height: .72rem;
+		color: #fff;
+		background-color: #FFA029;
+		font-size: .3rem;
+		text-align: center;
+		line-height: .72rem;
+		display: inline-block;
+		border-radius: .02rem;
+		letter-spacing: .03rem;
+		
+	}
+	.more-button{
+		margin-top: .12rem;
+	}
+	.li-choose-yetai.active,.li-choose-area.active{
+		color: #FFA900;
+	}
+	.li-choose-span-rent.active{
+		background-color:#FFA029 ;
+		color: #fff;
+	}
 </style>