JianjianStreet-H5/pages/news/index.vue

<template>
	<view class="home-pages">
		
		<view class="home-content">
			<u-tabs
			:list="tabList"
			lineWidth="70"
			lineHeight="3"
			lineColor= "#00CCCC"
			:activeStyle="{
				color: '#000000',
				fontWeight: 'bold',
				transform: 'scale(1.35)'
			}"
			:inactiveStyle="{
				color: '#000000',
				transform: 'scale(1)'
			}"
			itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"
			@click="tabClick"
			>
			</u-tabs>
			<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="lower">
				<template v-if="current == 0">
					<active-card v-for="(item,i) in studyList" :item="item" :key="i" :i="i"  @seeDetail="seeDetail"></active-card>
				</template>
				<template  v-if="current == 1">
					<new-card v-for="(item,i) in informationList" :key="i" :item="item" @seeDetail="newDetail"></new-card>
				</template>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import activeCard from '@/components/active-card/index.vue'
	import newCard from '@/components/new-card/index.vue'
	export default{
		components:{
			activeCard,
			newCard
		},
		data(){
			return{
				current:0,
				studyList:[],
				activiteList:[],
				informationList:[],
				tabList: [
					{
						name: '家教街'
					},
					{
						name: '校园墙'
					}
				],
				params:{
					pageNo:1,
					pageSize:10,
					total: null,
					isLock: true
				},
			}
		},
		onLoad() {
			if(this.current == 0){
				this.getActivity();
			}else{
				this.getinformation()
			}
		},
		onPullDownRefresh() {
			this.activiteList = [];
			this.params.pageNo = 1;
			this.params.total = null;
			this.params.isLock = true;
			this.getActivity();
		},
		onReachBottom() {
			if(this.params.isLock){
				this.params.isLock = false;
				if(this.params.total !== null && this.params.pageNo * this.params.pageSize >= this.params.total){
					this.$Toast('没有更多数据！');
					setTimeout(()=>{
						this.params.isLock = true;
					},3000)
					return
				}
				this.params.pageNo+=1;
				this.$Toast('数据加载成功！');
				this.getActivity();
			}
		},
		onPullDownRefresh() {
			this.params.pageNo = 1;
			if(this.current == 0){
				this.getActivity();
			}else{
				this.getinformation()
			}
		},
		// 隐藏微信h5的标题栏
		onReady() {
			this.$com.displayNav()
		},
		methods:{
			tabClick(e){
				this.current = e.index;
				this.params.pageNo = 1;
				if(this.current == 0){
					this.getActivity(2);
				}else{
					this.getinformation(2)
				}
			},
			getActivity(type){
				uni.showLoading()
				this.$api('JobList',this.params)
				.then(res=>{
					uni.hideLoading()
					if(res.code == 200){
							if(this.params.total== null) {
								this.params.total = res.result.total
							}
							if(this.params.pageNo>1){
								uni.hideLoading();
							}
							this.studyList = this.studyList.concat(res.result.records);
							this.params.isLock = true;
					}else {
							if(this.params.pageNo>1){
								uni.hideLoading();
							}
							this.params.isLock = true;
						}	
				})
			},
			getinformation(type){
				uni.showLoading()
				this.$api('information',this.params)
				.then(res=>{
					uni.hideLoading()
					if(res.code == 200){
						this.pages = res.result.pages;
						if(type == 2){
							this.informationList = [...this.informationList,...res.result.records];
						}else{
							this.informationList = res.result.records;
							uni.stopPullDownRefresh();
						}
					}
				})
			},
			seeDetail(item){//查看详情
				uni.navigateTo({
					url:`/pages/home/course-detial?id=${item.id}`
				})
			},
			newDetail(item){//知识查看详情
				uni.navigateTo({
					url:`/pages/home/new-detail?id=${item.id}`
				})
			},
			lower(){
				if(this.params.pageNo >= this.pages) return;
				this.params.pageNo ++;
				if(this.current == 0){
					this.getActivity(2);
				}else{
					this.getinformation(2)
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.home-pages {
		padding: 18rpx 29rpx 0;
		background-color: #F7F7F7;
		
		.scroll-Y {
			height: calc(100vh - 210rpx);
			padding-top: 20rpx;
			
		}
	}
</style>