jp-zeroWorkerStation/pages/packages/mine/employmentService/receiveRegistration.vue

<template>
	<view>
		<u-navbar back-text="人员管理" back-icon-size="28" back-icon-color="#ffffff"
			:background="{backgroundColor: '#2795FD',}" :back-text-style="{color: '#ffffff'}"></u-navbar>
		<!-- 标签 -->
		<view class="tabs">
			<u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
		</view>
		<!-- 我的报名 -->
		<view class="receive-registration" v-for="(item,i) in list[current].list" 
		  v-if="item.jobInformationInfo"
		  :key="i">
		  
		  
			<view class="card">
				<view class="top">
					
				<!-- 头像 -->
				<view class="photo">
					<u-avatar :src="item.jobInformationInfo.photo"></u-avatar>
					<span>{{item.workPersonInfo?item.workPersonInfo.realName:''}}</span>
					
				</view>
				<!-- 信息 -->
				<view class="infos">
					<view class="positon-salary">
						<view class="positon">
							{{item.jobInformationInfo.intendedIndustriesN}}
						</view>
						
						<view class="btncheck" @click="ckInfo(item,0)">
							查看
						</view>
					</view>
					<view class="tags-date">
						
						<view class="salary">
							{{item.jobInformationInfo.hopeSalary}}{{getUnit(item.jobInformationInfo)}}
						</view>
						<view class="date">
							{{getTime(item)}}
						</view>
					</view>
					<view class="tags-date">
						<view class="tags">
							<view class="item" style="background-color: red;color:#fff" v-if="item.workPersonInfo&&item.workPersonInfo.intention==2" >
								已入职
							</view>
							<view class="item" v-if="item.workPersonInfo">
								{{item.workPersonInfo.gender==1?'男':'女'}}
							</view>
							<view class="item" v-if="item.workPersonInfo">
								{{item.workPersonInfo.age}}岁
							</view>
							<view class="item" v-if="item.jobInformationInfo.educationN" >
								{{item.jobInformationInfo.educationN}}
							</view>
							
						</view>
						
					</view>
				</view>
					
			
				</view>
				<u-line color="#E6E6E6"></u-line>
				<view class="buttons">
					<view class=" view">
						{{item.recruitInformationInfo.positionName}}-<span class="salary">{{item.recruitInformationInfo.salary}}{{getUnit(item.recruitInformationInfo)}}</span>
					</view>
					<span class="tag" v-if="current==0&&!item.isRead">未读</span>
					<view class="btn check" @click="ckInfo(item,1)">
						岗位查看
					</view>
					<!-- <view class="btn delete">
						删除
					</view> -->
				</view>
			</view>
		</view>
	 <u-divider  v-if="list[current].recordsTotal==list[current].list.length"
	 		 :isnone="list[current].recordsTotal==0" nonetext="没有找到相关内容" 
	 		border-color="#CFD2D5">已经到底了</u-divider>
	     
	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/packages.js'
	export default {
		data() {
			return {
				list: [{
					name: '收到的报名',
					pageIndex: 1,
					pageSize: 20,
					recordsTotal: 1,
					status: "0",
					list: []
				}, {
					name: '邀请记录',
					pageIndex: 1,
					pageSize: 20,
					recordsTotal: 1,
					status: "1",
					list: []
				}],
				current: 0
			}
		},
		onLoad(op) {
			if(op.c){
				this.current=op.c
			}
			this.getList();
		},
		methods: {
			ckInfo(item,current){
				
				var url=""
				if(current==0){
					url="/pages/packages/choreInformation/jobSearchDetails?id="+item.jobInformationInfo.id
				
					var isread=""
					if(!item.isRead){
						item.isRead=true
						url+="&isread=1&readid="+item.id
					}
				}
				if(current==1){
					url="/pages/packages/jobInformation/jobDetails?id="+item.recruitInformationInfo.id
				}
				uni.navigateTo({
					url:url
				})
			},
			getList() {
			
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				var list = this.list[this.current].list
				var obj = this.list[this.current]
				var listForm = {
					...obj
				}
				delete listForm.list
			
				API.myReceivedRegistration(listForm).then((res) => {
			
					if (listForm.pageIndex == 1) {
						list = res.data.data;
					} else {
						list = [
							...list,
							...res.data.data
						];
					}
			
					this.list[this.current].list = list
			
					this.list[this.current].recordsTotal = res.data.recordsTotal;
					uni.hideLoading();
				}).catch(error => {
					uni.showToast({icon: 'none',
						title: error,
						icon: "none"
					})
				})
			
			},
			myLoadmore() {
				this.list[this.current].pageIndex += 1;
				this.getList();
			},
			change(index) {
				this.current = index;
				var list = this.list[this.current].list
				if (list.length == 0) {
					this.getList();
				}
			}
		}
	}
</script>
<style>
	page {
		background: #F0F0F2;
		padding-bottom: 150px;
	}
</style>
<style scoped lang="scss">
	.card{
		margin: 24rpx 32rpx;
		background-color: #fff;
		padding: 24rpx;
		border-radius: 12px;
		.top{
			display: flex;
		}
		// 头像
		.photo{
			width: 48px;
			height: 48px;
			border-radius: 50px;
			text-align: center;
			//overflow: hidden;
			margin-right: 16rpx;
			img{
				width: 100%;
				height: 100%;
			}
		}
		// 信息
		.infos{
			flex: 1;
		}
		.salary{
			color: rgba(255, 61, 0, 1);
			font-size: 32rpx;
			font-family: 'PingFangSC-medium';
		}
		.positon-salary{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.positon{
				width: 400rpx;
				
				color: rgba(16, 16, 16, 1);
				font-size: 36rpx;
				overflow: hidden;        /*内容会被修剪，并且其余内容是不可见的*/
				    text-overflow:ellipsis;  /*显示省略符号来代表被修剪的文本。*/
				    white-space: nowrap;     /*文本不换行*/
				font-family: 'PingFangSC-medium';
			}
			
			.btncheck{
				width: 120rpx;
				height: 56rpx;
				line-height: 56rpx;
				
				border-radius: 50px;
				background-color: rgba(255, 255, 255, 1);
				color: rgba(119, 119, 119, 1);
				text-align: center;
				font-family: Microsoft Yahei;
				border: 1px solid rgba(207, 210, 213, 1);
				margin-left: 24rpx;
			}
		}
		.tags-date{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 16rpx;
			margin-bottom: 24rpx;
			.tags{
				display: flex;
				.item{
					border-radius: 4px;
					background-color: rgba(241, 241, 247, 1);
					color: rgba(129, 127, 153, 1);
					font-size: 12px;
					text-align: center;
					line-height: 36rpx;
					height: 36rpx;
					padding: 0 12rpx;
					margin-right: 8rpx;
				}
			}
			.company{
				color: rgba(51, 51, 51, 1);
				font-size: 24rpx;
			}
			.date{
				color: rgba(153, 153, 153, 1);
				font-size: 24rpx;
			}
		}
		
		.buttons{
			display: flex;
			justify-content: space-between;
			margin-top: 24rpx;
			.view{
				color: rgba(16, 16, 16, 1);
				font-size: 36rpx;
			}
			// 查看
			.btn{
				width: 140rpx;
				height: 56rpx;
				line-height: 56rpx;
				
				border-radius: 50px;
				background-color: rgba(255, 255, 255, 1);
				color: rgba(119, 119, 119, 1);
				text-align: center;
				font-family: Microsoft Yahei;
				border: 1px solid rgba(207, 210, 213, 1);
				margin-left: 24rpx;
			}
			// 删除
			.delete{
				color: rgba(255, 61, 0, 1);
			}
		}
	}
	.tag {
	
		 top: -260rpx;
		left: -350rpx;
		position: relative;
		border-radius: 4px 4px 4px 0px;
		color: #fff;
		padding: 2px 6px;
		font-size: 20rpx;
		line-height: 20rpx;
		height: 30rpx;
		background: linear-gradient(to right bottom, rgba(255, 255, 255, 0.4), transparent) var(--bg, #EA3447);
		background-blend-mode: soft-light;
	}
	
	.tag::before {
		content: '';
		position: absolute;
		width: 3px;
		height: 3px;
		left: 0;
		bottom: -3px;
		background-color: inherit;
		filter: brightness(.7);
		clip-path: polygon(0 0, 100% 0, 100% 100%);
	}
   
</style>