recruitment-wechat-uniapp-241012/pages_order/work/bossDetail.vue

<template>
	<view class="page">
		
		<image src="/static/image/home/banner.png" mode="aspectFill"
		class="bgImage"></image>
		
		<view class="close"
		@click="$utils.navigateBack">
			<uv-icon
			name="arrow-left"
			color="#fff"
			size="30rpx"
			></uv-icon>
		</view>
		
		<view class="box">
			<view class="boss-box">
				<image :src="hanHaiMember.headImage" 
				class="headImage"
				mode="aspectFill"></image>
				
				<view class="info">
					<view class="title">
						{{personInfo.name}}<text></text>
					</view>
					<view class="desc">
						{{companyInfo.companyName}}
						
						<view class="vip">
							vip
						</view>
					</view>
				</view>
			</view>
			
			<view class="firm">
				<view class="title">
					任职企业
				</view>
				<view class="firm-info">
					<image :src="companyInfo.logo"
					class="image"
					mode="aspectFill"></image>
					<view class="info">
						<view class="name">
							{{companyInfo.companyName}}
						</view>
						<view class="desc">
							{{companyInfo.financing}}*{{companyInfo.industry}}*{{companyInfo.number}}
						</view>
					</view>
				</view>
				
				<view class="album">
					<uv-album :urls="companyInfo.image
					&& companyInfo.image.split(',')"></uv-album>
				</view>
				
			</view>
			
			<view class="list-work">
				
				<view class="text">
					发布职位<text>19</text>
				</view>
				
				<view style="margin: 20rpx;"
				@click="$utils.navigateTo('/pages_order/work/userDetail?id=' + item.id)"
				:key="index"
				v-for="(item, index) in list">
					<workItem :item="item"/>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import userHead from '../components/user/userHead.vue'
	import mixinList from '@/mixins/list.js'
	import workItem from '@/components/list/workList/workItem.vue'
	export default {
		mixins : [mixinList],
		components : {
			userHead,
			workItem,
		},
		data() {
			return {
				id : 0,
				detail : {},
				personInfo:{},
				companyInfo:{},
				hanHaiMember:{},
				collectionFlag : false,
				mixinsListApi : 'employeeQueryJobList',
			}
		},
		onLoad({id}) {
			this.id = id
		},
		onShow() {
			this.getDetail()
		},
		onPullDownRefresh() {
			this.getDetail()
		},
		methods: {
			getDetail(){
				let data = {
					jobId : this.id
				}
				if(uni.getStorageSync('token')){
					data.token = uni.getStorageSync('token')
				}
				this.$api('employeeQueryJobById', data, res => {
					uni.stopPullDownRefresh()
					if(res.code == 200){
						this.detail = res.result.jobInfo
						this.collectionFlag = res.result.collectionFlag
						this.personInfo = res.result.personInfo
						this.companyInfo = res.result.companyInfo
						this.hanHaiMember  = res.result.hanHaiMember
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
.page{
	min-height: 100vh;
	.bgImage{
		width: 100%;
		height: 500rpx;
	}
	.close{
		position: absolute;
		left: 30rpx;
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		top: 100rpx;
		background-color: #00000033;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.box{
		margin-top: -100rpx;
		.boss-box{
			background-color: #fff;
			margin: 20rpx;
			border-radius: 20rpx;
			padding: 20rpx;
			position: relative;
			box-shadow: 0 0 10rpx 10rpx #00000009;
			padding-top: 140rpx;
			.headImage{
				border-radius: 50%;
				width: 150rpx;
				height: 150rpx;
				position: absolute;
				top: -50rpx;
				left: 30rpx;
			}
			.info{
				padding: 0 20rpx;
				line-height: 46rpx;
				.title{
					font-weight: 900;
					font-size: 32rpx;
				}
				.desc{
					display: flex;
					align-items: center;
					font-size: 24rpx;
					.vip{
						padding: 4rpx 20rpx;
						border-radius: 20rpx;
						border: 1rpx solid #EF7834;
						color: #EF7834;
						margin-left: 30rpx;
					}
				}
			}
		}
		
		.firm{
			background-color: #fff;
			margin: 20rpx;
			border-radius: 20rpx;
			padding: 20rpx;
			position: relative;
			box-shadow: 0 0 10rpx 10rpx #00000009;
			.title{
				font-size: 32rpx;
				font-weight: 900;
				padding: 20rpx;
			}
			.firm-info{
				display: flex;
				.image{
					width: 140rpx;
					height: 140rpx;
					border-radius: 20rpx;
				}
				.info{
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					margin-left: 30rpx;
					font-size: 26rpx;
					.name{
						font-weight: 900;
					}
					.desc{
					}
				}
			}
			.album{
				padding: 20rpx 0;
			}
		}
		
		.list-work{
			.text{
				background-color: #fff;
				padding: 26rpx;
				font-weight: 900;
				text{
					font-weight: 500;
					color: #666666;
					font-size: 26rpx;
					margin-left: 20rpx;
				}
			}
		}
	}
	
}
</style>