商学院优化

public/appnew/src/components/achieveMain/achieveFork.vue

@@ -51,7 +51,7 @@
 		},
 		data: () => ({
 			headerData: {
-				'title': '本周业绩',
+				'title': '本月业绩',
 				'noborder': true,
 				'isBack': false
 			},

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

+<template>
+	<div>
+		<header-pulic :data="headerData"></header-pulic>
+		<nav>
+			<div class="nav-main">
+				<ul class="oh" :style="'width: '+ulWid+'rem'">
+					<li v-for="(item, index) in mainData" :key="item.labelName" :data-id="item.id" class="pointer-click-item" :class="{active:index === initTabNumMain}" @click="tabMain(index)">{{item.labelName}}</li>
+				</ul>
+				<div class="nav-bg-right"></div>
+			</div>
+			<div class="nav-seat"></div>
+		</nav>
+		<main>
+			<section v-for="(item, index) in mainData" v-show="index === initTabNumMain">
+				<pagination-load :canload="!item.isStop" :distance="30" @load="getList">
+					<ul>
+						<li is="self-defined-li" v-for="(item2, index2) in item.dataList" :data="item2" :dataindex="index2"></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 '@/assets/js/layer041002.js';
+	import paginationLoad from '@/components/publicEg/paginationLoad';
+	import selfDefinedLi from '@/components/businessCollege/articleListLi';
+	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': true,
+					'isBack': false
+				},
+				token: _token,
+				ulWid: 6.9,
+				pageSize: 10,
+				initTabNumMain: 0,
+				isLoading: false,//是否正在加载
+				mainData: [{
+					'dataList': [],
+					'id': 0,
+					'page': 1,//页码
+					'isLoadOnce': false,//是否请求过一次数据
+					'isStop': false,//是否所有页的数据加载完毕
+					'noDataFlag': false,//是否是无数据
+					'labelName': '全部'
+				}]
+			}
+		},
+		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.getLabel(()=>{
+					_this.getList();
+				});
+			},
+			tabMain(index) {
+				let _this = this;
+				_this.initTabNumMain = index;
+				if(!_this.mainData[index].isLoadOnce) {
+					_this.getList();
+				};
+			},
+			getLabel(fn) {
+				let _this = this;
+				_this.axios({
+					method: 'get',
+					url: '/broker/getNewsLabel',
+					responseType: 'json',
+					data: {
+						'AuthToken': _this.token,
+					}
+				})
+				.then(function(response) {
+					if(response.data.code == 200) {
+						let _data = response.data.data;
+						let _len = _data.length;//标签个数
+						let _txtLen = 0;//记录总字数
+						for(let i = 0;i<_len;i++){
+							_this.mainData.push({
+								'isLoadOnce': false,
+								'dataList': [],
+								'id': _data[i].id,
+								'page': 1,//页码
+								'isLoadOnce': false,//是否请求过一次数据
+								'isStop': false,//是否所有页的数据加载完毕
+								'noDataFlag': false,//是否是无数据
+								'labelName': _data[i].label_name
+							});
+							_txtLen += _data[i].label_name.length;
+						};
+						let _sunLen = (_txtLen+2+_len+1)*0.29;//粗略计算长度，因为有一个全部，多两个字，以及一个标签
+						_this.ulWid = (_sunLen>_this.ulWid)?_sunLen:_this.ulWid;
+						fn && fn();
+					} else {
+						layer.tipsX(response.data.msg);
+					}
+				})
+				.catch(function(error) {
+					layer.tipsX(error);
+				});
+			},
+			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);
+					});
+				};
+			}
+		},
+		computed: {
+			
+		}
+	}
+</script>
+
+<style scoped>
+	nav{
+		width: 7.5rem;
+	}
+	nav>.nav-main {
+		background-color: white;
+		width: 6.9rem;
+		height: .9rem;
+		line-height: .9rem;
+		padding: 0 .3rem;
+		border-bottom: 1px solid #eee;
+		position: fixed;
+		left: 0;
+		top: .88rem;
+		overflow-x: scroll;
+	}
+	nav>.nav-main>ul{
+		/*width: 10rem;*/
+	}
+	nav>.nav-main>.nav-bg-right{
+		position: fixed;
+		right: 0;
+		top: .88rem;
+		width: .8rem;
+		height: .9rem;
+		background: url(images/img_more@2x.png) repeat-y center center/.8rem .27rem;
+	}
+	nav>.nav-seat {
+		height: .9rem;
+	}
+	nav>.nav-main>ul>li {
+		float: left;
+		font-size: .28rem;
+		text-align: center;
+		color: #4c4c4c;
+		padding: 0 .15rem;
+		/*width: 1.8rem;*/
+	}
+	
+	nav>.nav-main>ul>li.active {
+		color: rgb(255, 148, 25);
+		position: relative;
+	}
+	
+	nav>.nav-main>ul>li.active::after {
+		content: '';
+		position: absolute;
+		left: 50%;
+		bottom: 0;
+		width: .4rem;
+		margin-left: -.2rem;
+		height: .06rem;
+		border-radius: .03rem;
+		background-color: rgb(255, 161, 50);
+	}
+</style>
\ No newline at end of file