复制

public/appnew/src/assets/css/public.css

@@ -8,7 +8,9 @@ body {
 	font-size: .3rem;
 	background-color: #F8F9FB;
 }
-
+.bg-white {
+	background-color: white!important;
+}
 .oh {
 	overflow: hidden;
 }

public/appnew/src/components/publicEg/entrance.vue

@@ -66,6 +66,13 @@
 					'path': '/agreement',
 					'nameCustom': '邀请注册协议',
 					'query': {
+//						'id':'160',
+					}
+				},
+				{
+					'path': '/shopList',
+					'nameCustom': '商铺列表',
+					'query': {
 //						'id':'160',
 					}
 				}

public/appnew/src/components/publicEg/errorImg.vue

@@ -19,7 +19,7 @@
 		},
 		data() {
 			let _this = this;
-			let _bitmap = onErrorImgAvatar;
+			let _bitmap = onErrorImgDiv;
 			if(_this.imgtype === 'house'){
 				_bitmap = onErrorImgHouse;
 			}else if(_this.imgtype === 'div'){

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

+<template>
+	<div class="min-height-list">
+		<nav>
+			<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>
+		</nav>
+		<main class="main-content">
+			<section v-for="(item, index) in mainData" v-show="index === initTabNumMain">
+				<pagination-load :canload="!item.isStop" :distance="10" @load="getLoad">
+				    <ul>
+				    	<li class="main-sec-li" v-for="(item2, index2) in item.dataList">
+				    		<div class="shop-list-img shop-list">
+								<img :src="item2.api_path + item2.images[0].img_name" alt=""/>
+							</div>
+							<div class="shop-list-con shop-list">
+								<p class="shop-title">{{item2.title}}</p>
+								<p class="shop-rent">{{item2.rent_type}}</p>
+								<p>
+									<span class="shop-lable">{{item2.industry_type}}</span>
+								</p>
+							</div>
+				    	</li>
+					</ul>
+		        </pagination-load>
+		        <div class="no-data-block" v-show="item.noDataFlag">暂无数据</div>
+				<div class="no-more-block" v-show="!item.noDataFlag&&item.isStop">没有更多了...</div>
+				<div class="loading-gif-block" v-show="isLoading">正在加载...</div>
+			</section>
+		</main>
+	</div>
+</template>
+
+<script>
+	import paginationLoad from '@/components/publicEg/paginationLoad';
+	import '@/assets/js/layer041002.js';
+	export default {
+        components: {
+			'pagination-load': paginationLoad,
+		},
+		data: () => ({
+			list: [],
+			mainData: [
+				{
+					'title': '街铺',
+					'dataList': [],
+					'page': 1,//页码
+					'isLoadOnce': false,//是否请求过一次数据
+					'isStop': false,//是否所有页的数据加载完毕
+					'noDataFlag': false,//是否是无数据
+				},
+				{
+					'title': '商场',
+					'dataList': [],
+					'page': 1,//页码
+					'isLoadOnce': false,//是否请求过一次数据
+					'isStop': false,//是否所有页的数据加载完毕
+					'noDataFlag': false,//是否是无数据
+				}
+			],//请求返回的数据体集合
+			pageSize: 3,
+			initTabNumMain: 0,
+			isLoading: false,//是否正在加载
+		}),
+		created() {
+			let _this = this;
+				_this.common.duringRequest({
+					'urlStr': '/api/getShopList',
+					startAction() {
+						_this.isLoading = true;
+					},
+					endAction() {
+						_this.isLoading = false;
+					}
+			   });
+			
+		},
+		mounted() {
+			let _this = this;
+			_this.getLoad();
+		},
+		methods: {
+			getLoad() {
+				let _this = this;
+				let _index = _this.initTabNumMain;
+				if(!_this.isLoading && !_this.mainData[_index].isStop) {
+					_this.axios({
+						method: 'get',
+						url: '/api/getShopList',
+						responseType: 'json',
+						data: {
+							'pageNo' : _this.mainData[_index].page,
+							'site_area' : 2,//c端搜索
+							'shop_type' : _index=='0'?1:0,
+							'pageSize' : _this.pageSize,
+							'city' : '上海市'
+						}
+					})
+					.then(function(response) {
+						_this.mainData[_index].isLoadOnce = true;
+						if(response.data.code == 200) {
+							let _list = response.data.data;
+							if(Array.isArray(_list)){
+								if(_list.length === 0) {
+									_this.mainData[_index].page === 1 && (_this.mainData[_index].noDataFlag = true);
+									_this.mainData[_index].isStop = true;
+								} else {
+									_this.mainData[_index].dataList.push(..._list); //这里使用push要注意，先把数组展开
+									_list.length < _this.pageSize && (_this.mainData[_index].isStop = true);
+									_this.mainData[_index].page += 1;
+								};
+							};
+						} else {
+							layer.tipsX(response.data.msg);
+						}
+					})
+					.catch(function(error) {
+						layer.tipsX(error);
+					});
+				}
+			},
+			tabMain(index) {
+				let _this = this;
+				_this.initTabNumMain = index;
+				if(!_this.mainData[index].isLoadOnce) {
+					_this.getList();
+				};
+			},
+		}
+	}
+</script>
+<style scoped>
+	.min-height-list{
+		min-height: 100vh;
+		background: #fff;
+	}
+	nav>.nav-main {
+		display: flex;
+		box-sizing: border-box;
+		background-color: white;
+		width: 100%;
+		height: .9rem;
+		line-height: .9rem;
+		padding: 0 2.42rem;
+		position: fixed;
+		left: 0;
+		font-size: .46rem;
+		top: 0;
+	}
+	
+	nav>.nav-seat {
+		height: .9rem;
+	}
+	
+	nav>.nav-main>div {
+		flex: 1;
+		text-align: center;
+	}
+	
+	nav>.nav-main>div.active {
+		position: relative;
+	}
+	
+	nav>.nav-main>div.active::after {
+		content: '';
+		position: absolute;
+		left: 50%;
+		bottom: 0px;
+		width: .8rem;
+		margin-left: -.4rem;
+		height: .06rem;
+		border-radius: .03rem;
+		background-color: rgb(255, 161, 50);
+	}
+	
+	.main-content {
+		padding: 0 .3rem;
+		background: #fff;
+	}
+	
+	.main-sec-li {
+		background: #fff;
+		font-size: .3rem;
+		/*height: 2.4rem;*/
+		height: 7rem;
+		padding: .4rem 0;
+		box-sizing: border-box;
+		border-bottom:1px solid #F0F0F0;
+	}
+		
+	.main-sec-li-26 {
+		background: #fff;
+		line-height: .9rem;
+		font-size: .26rem;
+	}
+    .main-sec-li .shop-list{
+    	float: left;
+    }
+    .main-sec-li .shop-list{
+    	height: 1.6rem;
+    	width: 2.1rem;
+    }
+    .shop-list>img{
+    	height: 1.6rem;
+    	width: 2.1rem;
+    }
+	.main-sec-li .shop-list-con{
+		margin-left: .2rem;
+	}
+	.shop-list-con .shop-title{
+		font-size: .3rem;
+		width: 4.6rem;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		overflow: hidden;
+	}
+	.shop-list-con .shop-rent{
+		font-size: .26rem;
+	}
+	.shop-list-con .shop-lable{
+		font-size: .22rem;
+	}
+
+	
+	
+	
+</style>

public/appnew/src/router/index.js

@@ -16,6 +16,7 @@ import inviteRegister from '@/components/inviteRegister/inviteRegister'
 import agreement from '@/components/inviteRegister/agreement'
 import businessCollege from '@/components/businessCollege/articleList'
 import articleDetail from '@/components/businessCollege/articleDetail'
+import shopList from '@/components/shop/shopList'
 
 Vue.use(Router)
 
@@ -104,6 +105,11 @@ export default new Router({
 			path: '/articleDetail',
 			name: 'v-article-detail',
 			component: articleDetail
+		},
+		{
+			path: '/shopList',
+			name: 'v-shop-list',
+			component: shopList
 		}
 	]
 })
\ No newline at end of file