商学院 搜索

public/appnew/src/components/businessCollege/articleList.vue

 <template>
 	<div>
 		<header-pulic :data="headerData"></header-pulic>
+		<div class="icon-search" @click="toShopSearchList()"><img :src="icon_search" alt="" /></div>
 		<nav>
 			<div class="nav-main" v-if="show" ref="ele">
 				<ul class="oh">
@@ -31,6 +32,8 @@
 	import '@/assets/js/layer041002.js';
 	import paginationLoad from '@/components/publicEg/paginationLoad';
 	import selfDefinedLi from '@/components/businessCollege/articleListLi';
+	import icon_search from '@/components/businessCollege/images/icon_search2@2x.png';
+	
 	export default {
 		name: '',
 		props: {
@@ -63,6 +66,7 @@
 					'noborder': false,
 					'isBack': false
 				},
+				icon_search,
 				token: _token,
 				seatH: 1.58*4,//占位高度
 				pageSize: 10,
@@ -221,7 +225,16 @@
 						layer.tipsX(error);
 					});
 				};
-			}
+			},
+			toShopSearchList(){
+				let _this = this;
+				_this.$router.push({
+					path: '/searchArticleList',
+					query: {
+						'token': _this.token
+					}
+				});
+			},
 		},
 		computed: {
 			
@@ -273,6 +286,13 @@
 	nav>.nav-main>ul>li.active {
         background: rgba(252, 194, 50,.1);
 	}
+	.icon-search img{
+		position: fixed;
+		top: .2rem;
+		right: .4rem;
+		width: .5rem;
+		z-index: 666;
+	}
 </style>
 
 

public/appnew/src/components/businessCollege/searchArticleList.vue

+<template>
+	<div>
+		<div class="top-news-choose">
+			<div class="input-search">
+				<img :src="icon_search"/>
+				<input type="search" value="" placeholder="请输入题目关键词" @keypress="searchShopList"/>
+				
+			</div>
+			<span class="cancel-seach" @click="toUpPage">
+				取消
+			</span>
+		</div>
+		<div style="height: 1.3rem;"></div>
+		<main>
+			<pagination-load :canload="!mainData[initTabNumMain].isStop" :distance="30" @load="getList">
+				<section v-for="(item, index) in mainData" v-show="index === initTabNumMain">
+					<ul>
+						<li is="self-defined-li" v-for="(item2, index2) in item.dataList" :data="item2" :dataindex="index2"></li>
+					</ul>
+					<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>
+			</pagination-load>
+		</main>
+	</div>
+</template>
+
+<script>
+	import '@/assets/js/layer041002.js';
+	import paginationLoad from '@/components/publicEg/paginationLoad';
+	import selfDefinedLi from '@/components/businessCollege/articleListLi';
+	import icon_search from '@/components/businessCollege/images/icon_search2@2x.png';
+	
+	export default {
+		name: '',
+		props: {
+			data: {
+				
+				type: Object,
+				default: () => ({
+					message: 'hello'
+				})
+			},
+			dataindex: {
+				type: [Number, String],
+				default: 0
+			}
+		},
+		components: {
+			'pagination-load': paginationLoad,
+			'self-defined-li': selfDefinedLi
+		},
+		data() {
+			let _this = this;
+			let _token = _this.$route.query.token;
+			if(!_token) {
+				layer.tipsX('token获取出错');
+				return false;
+			};
+			return {
+				headerData: {
+					'title': '同联商学院',
+					'noborder': false,
+					'isBack': false
+				},
+				icon_search,
+				token: _token,
+				pageSize: 10,
+				initTabNumMain: 0,
+				isLoading: false,//是否正在加载
+				show : true ,
+				heightBefor : 0 ,
+				mainData: [{
+					'dataList': [],
+					'page': 1,//页码
+					'isLoadOnce': false,//是否请求过一次数据
+					'isStop': false,//是否所有页的数据加载完毕
+					'noDataFlag': false,//是否是无数据
+					'label': {
+						'icon': 'icon_all@2x.png',
+						'id': 0,
+						'label_name': '全部'
+					}
+					
+				}]
+			}
+		},
+		created() {
+			let _this = this;
+			_this.common.duringRequest({
+				'urlStr': '/broker/business_school',
+				startAction() {
+					_this.isLoading = true;
+				},
+				endAction() {
+					_this.isLoading = false;
+				}
+			});
+			
+			_this.common.h5PageC(_this.token, () => {
+				_this.loadMain();
+			});
+		},
+		methods: {
+			loadMain() {
+				let _this = this;
+				_this.token = localStorage.getItem('token');
+//				_this.getList();
+			},
+			getList() {
+				let _this = this;
+				let _index = _this.initTabNumMain;
+				if(!_this.isLoading && !_this.mainData[_index].isStop) {
+					_this.axios({
+						method: 'get',
+						url: '/broker/business_school',
+						responseType: 'json',
+						data: {
+							'AuthToken': _this.token,
+							'pageNo': _this.mainData[_index].page,
+							'pageSize': _this.pageSize,
+							'label_id': _index
+						}
+					})
+					.then(function(response) {
+						_this.mainData[_index].isLoadOnce = true;
+						if(response.data.code == 200) {
+							let _list = response.data.data.list;
+							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);
+					});
+				};
+			},
+			toUpPage(){
+				window.history.back();
+			},
+			searchShopList(c){
+				let _this = this;
+				_this.ajax_input_value = c.target.value;
+				var keycode = c.keyCode;
+				if(keycode=='13') {
+					c.preventDefault();
+					if(_this.ajax_input_value == ''){
+						layer.tipsX('请输入有效关键字');
+						return;
+					}
+					_this.getList();
+			   }
+			},
+		},
+		computed: {
+			
+		}
+	}
+</script>
+
+<style scoped>
+/*商学院筛选*/
+.top-news-choose{
+	position: fixed;
+	width: 100%;
+	height: 1rem;
+	background: #fff;
+	box-sizing: border-box;
+	padding: .1rem .3rem .1rem .3rem;
+	overflow: hidden;
+}
+.input-search{
+	width:6.12rem;
+	height:.72rem;
+	background:rgba(247,247,251,1);
+	border-radius:.32rem;
+	line-height: .62rem;
+	float: left;
+	box-sizing: border-box;
+    padding: 0 .3rem;	
+}
+.input-search img{
+	width: .4rem;
+	position: relative;
+	top: .13rem;
+	
+}
+.input-search input{
+	font-size:.28rem;
+	color:rgba(153,153,153,1);
+	height: .6rem;
+	position: relative;
+	width: 4.6rem;
+}
+.top-news-choose span{
+	float: right;
+	font-size:.28rem;
+	color:rgba(255,128,24,1);
+	margin-top: .1rem;
+}
+</style>
+
+

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

@@ -116,6 +116,13 @@
 					'nameCustom': '邀请规则',
 					'query': {
 					}
+				},
+				{
+					'path': '/searchArticleList',
+					'nameCustom': '商学院搜索列表',
+					'query': {
+						'token': _token2
+					}
 				}
 				
 				]