qingyuan/pages/subPages2/hirePlatform/deliverList/deliverList.vue

<template>
	<view class="deliverList">
		<view class="dis-flex flex-x-around" style="margin-bottom: 20upx;">
			<view class="page_tab" :class="detail_page==1?'active':''" @click="changePage(1)">我投递的</view>
			<view class="page_tab" :class="detail_page==2?'active':''" @click="changePage(2)">我收藏的</view>
		</view>
		<view class="detail_page" v-if="detail_page==1">
			<loadlogo v-if="!loadlogo" />
			<view  v-if="loadlogo && inviteList.length > 0">
				<work-List :flag="false" :inviteList="inviteList"></work-List>
				<load-more :isMore="isMore1"  :bgc="'#ffffff'"></load-more>
				<TabBars :tabBarAct="0" pageType="15"></TabBars>
			</view>
			<nonemores v-else-if="inviteList.length == 0"></nonemores>
		</view>
		<view class="detail_page" v-if="detail_page==2">
			<loadlogo v-if="!loadlogo" />
			<view  v-if="loadlogo && collectList.length > 0">
				<work-List :flag="false" :inviteList="collectList"></work-List>
				<load-more :isMore="isMore2"  :bgc="'#ffffff'"></load-more>
				<!-- <TabBars :tabBarAct="0" pageType="15"></TabBars> -->
			</view>
			<nonemores v-else-if="collectList.length == 0"></nonemores>
		</view>
		
		<far-bottom></far-bottom>
	</view>
</template>

<script>
	import App from '@/common/js/app.js';
	import loadMore from '@/components/template/loadmore.vue';
	import Loadlogo from '@/components/template/loadlogo.vue';
	import workList from '@/components/template/workList.vue';
	import TabBars from '@/components/template/tabBar.vue';
	import nonemores from '@/components/template/nonemores.vue'
	export default{
		data(){
			return{
				loadlogo:true,
				isMore1:true,
				isMore2:true,
				inviteList:[],
				collectList: [],
				page:1,
				page_index:10,
				total:1,
				detail_page: 1
			}
		},
		components:{
			loadMore,
			Loadlogo,
			workList,
			TabBars,
			nonemores
		},
		onShow() {
			this.page = 1;
			this.getList()
			this.getCollectList();
		},
		onReachBottom() {
			if(this.detail_page==1 && this.total < this.page) return
			this.isMore1 = false;
			this.isMore2 = false;
			this.page++;
			this.getList(true);
			this.getCollectList(true);
		},
		methods:{
			changePage(page){
				if(this.detail_page==page) return;
				this.detail_page = page;
			},
			getList(flag){
				let data = {
					is_total:1,
					page:this.page,
					page_index:this.page_index
				}
				App._post_form(
					`&p=recruit&do=getMyJobSearch`,
					data,
					res => {
						if(flag){
							this.inviteList = this.inviteList.concat(res.data.list);
						}else{
							this.inviteList = res.data.list;
						}
						console.log(this.inviteList,res.data.list);
						this.total = res.data.total;
						this.isMore1 = true;
						this.loadlogo = true;
					},
					false,
					() => {
						this.loadlogo = true;
					}
				);
			},
			getCollectList(flag){
				let data = {
					// is_total:1,
					page:this.page,
					page_index:this.page_index
				}
				App._post_form(
					`&p=recruit&do=getRecruitCollect`,
					data,
					res => {
						if(flag){
							this.collectList = this.collectList.concat(res.data.list);
						}else{
							this.collectList = res.data.list;
						}
						console.log(this.collectList,res.data.list);
						// this.total = res.data.total;
						this.isMore2 = true;
						this.loadlogo = true;
					},
					false,
					() => {
						this.loadlogo = true;
					}
				);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.deliverList{
		background-color: #FFFFFF;
		padding-bottom: 100upx;
	}
	.page_tab{
		padding: 10upx 30upx;
		line-height: 30px;
		color: #666;
		font-size: 15px;
		&.active{
			color: #f00;
			position: relative;
		}
		&.active::after{
			content: '';
			position: absolute;
			width: 16px;
			height: 4px;
			background-color: #f00;
			border-radius: 3px;
			bottom: 0px;
			left: 50%;
			transform: translateX(-50%);
		}
	}
</style>