zhihuixiaoyuan2-ui/mine/pages/files/detail.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.familyName||""}}</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.school||""}}</view>
				</view>
				<view class="list">
					<view class="ltit">学号：</view>
					<view class="ltxt">{{datainfo.studentNumber||""}}</view>
				</view>
			</view>
			<view class="det_list">
				<view class="tit">
					<view class="flex1">其他信息</view>
					<view class="txt" @click="getHistory" v-if="checkPermi(['live:old:list'])">历史记录</view>
				</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 class="list" style="align-items: center;">
					<view class="f15 co6 flex0">更新时间：</view>
					<view class="ltxt">{{datainfo.updateTime}}</view>
				</view>
			</view>
			<view class="det_list">
				<view class="tit">
					<view class="flex1">视力信息</view>
				</view>
				<view class="list">
					<view class="ltit">是否近视：</view>
					<view class="ltxt" v-if="datainfo.isNearsightedness">{{datainfo.isNearsightedness=='1'?'是':'否'}}</view>
					<view class="ltxt" v-else></view>
				</view>
				<view class="list">
					<view class="ltit">近视度数：</view>
					<view class="ltxt">{{datainfo.degreeMyopia||""}}</view>
				</view>
				<view class="list">
					<view class="ltit">是否远视：</view>
					<view class="ltxt" v-if="datainfo.isFarsightedness">{{datainfo.isFarsightedness=='1'?'是':'否'}}</view>
					<view class="ltxt" v-else></view>
				</view>
				<view class="list">
					<view class="ltit">远视度数：</view>
					<view class="ltxt">{{datainfo.farsightedness||""}}</view>
				</view>
				<view class="list" style="align-items: center;">
					<view class="f15 co6 flex0">更新时间：</view>
					<view class="ltxt">{{datainfo.updateTime||""}}</view>
				</view>
			</view>
			<view class="det_list">
				<view class="tit">
					<view class="flex1">健康信息</view>
					<view class="txt" @click="getMind" v-if="checkPermi(['mind:old:list'])">历史记录</view>
				</view>
				<view class="list">
					<view class="ltit">健康状态：</view>
					<view class="ltxt">{{datainfo.health||""}}</view>
				</view>
				<view class="list">
					<view class="ltit">有无过往病史：</view>
					<view class="ltxt" v-if="datainfo.isMedicalHistory">{{datainfo.isMedicalHistory=='1'?'是':'否'}}</view>
					<view class="ltxt" v-else></view>
				</view>
				<view class="list">
					<view class="ltit">病史描述：</view>
					<view class="ltxt">{{datainfo.medicalDescription||""}}</view>
				</view>
				<view class="list">
					<view class="ltit">心理健康状态：</view>
					<view class="ltxt">{{datainfo.mind||""}}</view>
				</view>
				<view class="list">
					<view class="ltit">心理健康描述：</view>
					<view class="ltxt">{{datainfo.psychologicalDescription||""}}</view>
				</view>
			</view>
			<view class="det_list">
				<view class="tit">家庭信息</view>
				<view class="list">
					<view class="ltit">是否贫困：</view>
					<view class="ltxt" v-if="datainfo.isPoverty">{{datainfo.isPoverty=='1'?'是':'否'}}</view>
					<view class="ltxt" v-else></view>
				</view>
				<view class="list">
					<view class="ltit">是否留守儿童：</view>
					<view class="ltxt" v-if="datainfo.isLset">{{datainfo.isLset=='1'?'是':'否'}}</view>
					<view class="ltxt" v-else></view>
				</view>
				<view class="list">
					<view class="ltit">居住地址：</view>
					<view class="ltxt">{{datainfo.address||""}}</view>
				</view>
				<view class="list">
					<view class="ltit">父亲/电话：</view>
					<view class="ltxt">{{datainfo.fatherName||""}}
						<block v-if="datainfo.fatherName">/</block>
						{{datainfo.fatherTelephone||""}}
					</view>
				</view>
				<!-- <view class="list">
					<view class="ltit">父亲联系方式：</view>
					<view class="ltxt">{{datainfo.fatherTelephone||""}}</view>
				</view> -->
				<view class="list">
					<view class="ltit">母亲/电话：</view>
					<view class="ltxt">{{datainfo.motherName||""}}
						<block v-if="datainfo.motherName">/</block>
						{{datainfo.motherTelephone||""}}
					</view>
				</view>
				<!-- <view class="list">
					<view class="ltit">母亲联系方式：</view>
					<view class="ltxt">{{datainfo.motherTelephone||""}}</view>
				</view> -->
				<view class="list">
					<view class="ltit">紧急联系人/电话：</view>
					<view class="ltxt">{{datainfo.emergencyContact||""}}
						<block v-if="datainfo.emergencyContact">/</block>
						{{datainfo.emergencyContactTelephone||""}}
					</view>
				</view>
				<!-- <view class="list">
					<view class="ltit">紧急联系方式：</view>
					<view class="ltxt">{{datainfo.emergencyContactTelephone||""}}</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>
		<view style="height: 170rpx;" v-if="checkPermi(['student:info:edit','student:info:remove'])"></view>
		<view class="fbtn" v-if="checkPermi(['student:info:edit','student:info:remove'])">
			<view class="rebtndel" @click="getDel" v-if="checkPermi(['student:info:remove'])">删除档案</view>
			<view class="w13 flex0"></view>
			<view class="rebtn" @click="getUpdate" v-if="checkPermi(['student:info:edit'])">修改档案</view>
		</view>
	</view>
</template>

<script>
	import {checkPermi,checkRole} from "@/utils/permission"; // 权限判断函数
	import {getstuDetFn,getstuDelFn} 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:[],
				scrollTop:''
			}
		},
		onUnload(){
			uni.$off('refreshdadetail')
		},
		onLoad: function(e) {
			uni.$on('refreshdadetail',(e) => {
				this.getDataFn();
			})
			this.id = e.id;
			this.baseUrl=baseUrl;
			this.getDataFn()
		},
		onShow:function(){
			var scrollTop=this.scrollTop;
			if (scrollTop > 0) {
				this.backgroundColor = '#c4defb'
			} else {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0
				})
				this.backgroundColor = 'transparent'
			}
		},
		onPageScroll(e) {
			var scrollTop = Number(e.scrollTop);
			this.scrollTop=scrollTop
			if (scrollTop > 0) {
				this.backgroundColor = '#ffffff'
			} else {
				this.backgroundColor = 'transparent'
			}
		},
		methods: {
			checkPermi,checkRole,
			getBack(){
				uni.navigateBack({
					delta:1
				})
			},
			getHistory(){
				this.$tab.navigateTo('/mine/pages/files/history?id='+this.datainfo.studentId);	
			},
			getMind(){
				this.$tab.navigateTo('/mine/pages/files/mindlist?type=da&id='+this.datainfo.studentId+'&name='+this.datainfo.name);
			},
			getDataFn() {
				getstuDetFn(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=[];
						}
					} else {
						this.$toast(res.msg)
					}
				})
			},
			getUpdate(){
				this.$tab.navigateTo('/mine/pages/files/addstudent?type=update&id='+this.id);	
			},
			getDel(){
				var that=this;
				this.$modal.confirm('确定删除该信息吗？').then(() => {
				  getstuDelFn(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;display: flex;align-items: center;
			.txt{font-size: 30rpx;font-weight: 500;
color: #4775EA;}
		&::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>