zhihuixiaoyuan2-ui/mine/pages/files/teacherdetail.vue

<template>
	<view class="det">
		<uni-nav-bar left-icon="left" title="档案详情" :background-color="backgroundColor" :border="navborder" statusBar='true' fixed="true" @clickLeft='getBack'>
		</uni-nav-bar>
		<view class="det_top"></view>
		<view class="detbox">
			<view class="det_list">
				<image :src="bgimg" class="bgimg"></image>
			 <view class="tit">基本信息</view>
				<view class="list">
				 <view class="ltit">姓名：</view>
					<view class="ltxt">{{datainfo.name||""}}</view>
				</view>
				<view class="list">
					<view class="ltit">身份证号：</view>
					<view class="ltxt">{{datainfo.idCard||""}}</view>
				</view>
				<view class="list">
					<view class="ltit">性别：</view>
					<view class="ltxt">{{datainfo.sex=='1'?'男':'女'||""}}</view>
				</view>
				<view class="list">
					<view class="ltit">年龄：</view>
					<view class="ltxt">{{datainfo.age||""}}</view>
				</view>
				<view class="list">
					<view class="ltit">政治面貌：</view>
					<view class="ltxt">{{datainfo.politicalStatus||""}}</view>
				</view>
				<view class="list">
					<view class="ltit">职称：</view>
					<view class="ltxt">{{datainfo.professional||""}}</view>
				</view>
				<view class="list">
					<view class="ltit">联系方式：</view>
					<view class="ltxt">{{datainfo.phone||""}}</view>
				</view>
				<view class="list">
					<view class="ltit">居住地址：</view>
					<view class="ltxt">{{datainfo.address||""}}</view>
				</view>
			</view>
			<view class="det_list">
				<view class="tit">职业信息</view>
				<!-- <view class="list">
					<view class="ltit">教龄：</view>
					<view class="ltxt">{{datainfo.height||""}}年</view>
				</view> -->
				<view class="list">
					<view class="ltit">入职时间：</view>
					<view class="ltxt">{{datainfo.onBoardTime||""}}</view>
				</view>
				<view class="list">
					<view class="ltit">参加工作时间：</view>
					<view class="ltxt">{{datainfo.jobTime||""}}</view>
				</view>
			</view>
			<view class="det_list">
				<view class="tit">照片信息</view>
				<view class="list flexcja mb15">
					<view class="ltit">证件照：</view>
					<view class="imgs">
						<image :src="baseUrl+item" class="phoimg" v-for="(item,index) in zjfile" :key='index' @click="getPreview(zjfile,index)"></image>
					</view>
					
				</view>
				<view class="list flexcja">
					<view class="ltit">门禁照：</view>
					<view class="imgs">
						<image :src="baseUrl+item" class="phoimg" v-for="(item,index) in mjfile" :key='index' @click="getPreview(mjfile,index)"></image>
					</view>
				</view>
			</view>
			<view class="det_list">
				<view class="tit">资质信息</view>
				<view class="list flexcja mb15">
					<view class="ltit">毕业证明照：</view>
					<view class="imgs">
						<image :src="baseUrl+item" class="phoimg" v-for="(item,index) in byzmfile" :key='index' @click="getPreview(byzmfile,index)"></image>
					</view>	
				</view>
				<view class="list flexcja">
					<view class="ltit">毕业证书照：</view>
					<view class="imgs">
						<image :src="baseUrl+item" class="phoimg" v-for="(item,index) in byzsfile" :key='index' @click="getPreview(byzsfile,index)"></image>
					</view>
				</view>
				<view class="list flexcja">
					<view class="ltit">教资证明照：</view>
					<view class="imgs">
						<image :src="baseUrl+item" class="phoimg" v-for="(item,index) in jzzmfile" :key='index' @click="getPreview(jzzmfile,index)"></image>
					</view>
				</view>
				<view class="list flexcja">
					<view class="ltit">职称证明照：</view>
					<view class="imgs">
						<image :src="baseUrl+item" class="phoimg" v-for="(item,index) in zczmfile" :key='index' @click="getPreview(zczmfile,index)"></image>
					</view>
				</view>
			</view>
			<view class="det_list">
				<view class="tit">其他信息</view>
				<view class="list">
					<view class="ltit">身高：</view>
					<view class="ltxt">{{datainfo.height||""}}cm</view>
				</view>
				<view class="list">
					<view class="ltit">体重：</view>
					<view class="ltxt">{{datainfo.weight||""}}kg</view>
				</view>
				<view class="list">
					<view class="ltit">血型：</view>
					<view class="ltxt">{{datainfo.bloodType||""}}</view>
				</view>
			</view>
			
		</view>
		<view style="height: 170rpx;" v-if="checkPermi(['teacher:info:edit','teacher:info:remove'])"></view>
		<view class="fbtn" v-if="checkPermi(['teacher:info:edit','teacher:info:remove'])">
			<view class="rebtndel" @click="getDel" v-if="checkPermi(['teacher:info:remove'])">删除档案</view>
			<view class="w13 flex0"></view>
			<view class="rebtn" @click="getUpdate" v-if="checkPermi(['teacher:info:edit'])">修改档案</view>
		</view>
	</view>
</template>

<script>
	import {checkPermi,checkRole} from "@/utils/permission"; // 权限判断函数
	import {getteaDetFn,getteaDelFn} from "@/api/mine/files.js"
	import config from '@/config'
	const baseUrl = config.baseUrl
	export default {
		data() {
			return {
				bgimg: require("@/mine/static/score/bg.png"),
				backgroundColor: "transparent",
				navborder: false,
				id: '',
				datainfo: '',
				baseUrl:'',
				zjfile:[],
				mjfile:[],
				byzmfile:[],
				byzsfile:[],
				jzzmfile:[],
				zczmfile:[],
			}
		},
		onUnload(){
			uni.$off('refreshdadetail')
		},
		onLoad: function(e) {
			uni.$on('refreshdadetail',(e) => {
				this.getDataFn();
			})
			this.id = e.id;
			this.baseUrl=baseUrl;
			this.getDataFn()
		},
		onPageScroll(e) {
			var scrollTop = Number(e.scrollTop);
			if (scrollTop > 0) {
				this.backgroundColor = '#ffffff'
			} else {
				this.backgroundColor = 'transparent'
			}
		},
		methods: {
			checkPermi,checkRole,
			getBack(){
				uni.navigateBack({
					delta:1
				})
			},
			getDataFn() {
				getteaDetFn(this.id).then(res => {
					if (res.code == 200) {
						this.datainfo = res.data;
						if(res.data.identificationPhoto){
							this.zjfile=res.data.identificationPhoto.split(',')
						}else{
							this.zjfile=[];
						}
						if(res.data.entrancePermit){
							this.mjfile=res.data.entrancePermit.split(',')
						}else{
							this.mjfile=[];
						}
						if(res.data.graduationPhoto){
							this.byzmfile=res.data.graduationPhoto.split(',')
						}else{
							this.byzmfile=[];
						}
						if(res.data.degreePhoto){
							this.byzsfile=res.data.degreePhoto.split(',')
						}else{
							this.byzsfile=[];
						}
						if(res.data.teachingPhoto){
							this.jzzmfile=res.data.teachingPhoto.split(',')
						}else{
							this.jzzmfile=[];
						}
						if(res.data.professionalPhoto){
							this.zczmfile=res.data.professionalPhoto.split(',')
						}else{
							this.zczmfile=[];
						}
					} else {
						this.$toast(res.msg)
					}
				})
			},
			getUpdate(){
				this.$tab.navigateTo('/mine/pages/files/addteacher?type=update&id='+this.id);	
			},
			getDel(){
				var that=this;
				this.$modal.confirm('确定删除该信息吗？').then(() => {
				  getteaDelFn(that.id).then(res=>{
					 if (res.code == 200) {
					 	that.$toast('删除成功')
						setTimeout(function(){
							uni.$emit('refreshdalist');
							uni.navigateBack({
								delta:1
							})
						},1500)
					 } else {
					 	that.$toast(res.msg)
					 } 
				  })
				})
			},
			// 查看照片
			getPreview(iurl,idx) {
				var newArr=[];
				iurl.forEach(ite=>{
					var ds=this.baseUrl+ite
					newArr.push(ds)
				})
				uni.previewImage({
					urls: newArr,
					current:idx,
					success: function(data) {
						
					},
					fail: function(err) {
						console.log(err.errMsg);
					}
				});
			},
		},

	}
</script>

<style lang="scss" scoped>

.det_top{width: 100%;height: 334rpx;background: linear-gradient(180deg, rgba(222,230,255,0.72) 28.000000000000004%, rgba(232,236,198,0) 100%);}
.detbox{padding: 0 36rpx;margin-top: -180rpx;padding-bottom: 20rpx;
	.det_list{background-color: #fff;border-radius: 10rpx;width: 100%;padding: 36rpx 48rpx;position: relative;margin-bottom: 24rpx;
		.tit{font-size: 32rpx;font-weight: bold;color: #161616;position: relative;margin-bottom: 20rpx;
		&::before{width: 6rpx;height: 36rpx;background: #1f57e6;border-radius: 4rpx;content: '';position: absolute;left: -24rpx;top: 50%;margin-top: -18rpx;}
		}
		.list{
			display: flex;align-items: flex-start;padding: 10rpx 0;
			.ltit{flex: 0 0 auto;font-size: 30rpx;color: #161616;font-weight: bold;margin-right:4rpx;}
			.ltxt{flex: 1;font-size: 30rpx;color: #666666;font-weight: 500;line-height: 40rpx;}
			.imgs{display: flex;align-items: center;flex-wrap: wrap;justify-content: flex-end;}
			.phoimg{width: 140rpx;height: 140rpx;margin: 0 0rpx 14rpx 14rpx;}
		}
		.bgimg{width: 188rpx;height: 160rpx;position: absolute;right: 46rpx;bottom: 54rpx;}
	}
}
.fbtn{display: flex;align-items: center;position: fixed;left: 0;right: 0;bottom: 0;background-color: #f1f1f1;padding: 36rpx;
		
	}
.det /deep/ .uni-navbar__placeholder{height: 0 !important;}
</style>