P003-WX-HomeTeacher/education_uni/subpkg/teacher/authentication/teacher_authentication_detail.vue

<template>
	<view>
	<view class="container">
		<!-- 顶部信息 -->
		<view class="userInfo">
		    <view>
		        <text>用户ID</text>
		        <text class="userDetail">{{item.uid}}</text>
		    </view>
		    <view class="userName">
		        <text>贵姓</text>
		        <text class="userDetail">{{item.firstName}}</text>
		    </view>
		</view>
		<view class="userInfo">
		    <view>
		        <text>手机号</text>
		        <text class="userDetail">{{item.phone}}</text>
		    </view>
		    <view class="userName">
		        <text>英文名</text>
		        <text class="userDetail">{{item.englishName || ''}}</text>
		    </view>
		</view>
		<view class="userInfo">
		    <text>微信号</text>
		    <text class="userDetail">{{item.weixinId}}</text>
		</view>
		<view class="userInfo">
		    <text>身份证号</text>
		    <text class="userDetail">{{item.idCard}}</text>
		</view>
		<!-- 照片信息 -->
		<view class="userImg">
		    <view class="userImgDetail">
				<uni-file-picker class="userImage" :imageStyles="listStyle" fileMediatype="image" v-model="idCardFrontByte" :fileExtname="fileExtname" limit="1" delIcon="false" readonly="true"/>
		        <!-- <image class="userImage" :src="item.diplomaPhoto"></image> -->
		    </view>
		    <view class="userImgDetail">
				<uni-file-picker class="userImage" fileMediatype="image" :imageStyles="listStyle" v-model="idCardBackByte" :fileExtname="fileExtname" limit="1" delIcon="false" readonly="true"/>
		        <!-- <image class="userImage" :src="item.idCardBack"></image> -->
		    </view>
		    <view class="userImgDetail">
				<uni-file-picker class="userImage" fileMediatype="image" :imageStyles="listStyle" v-model="teacherPhotoByte" :fileExtname="fileExtname" limit="1" delIcon="false" readonly="true"/>
		        <!-- <image class="userImage" :src="item.idCardFront"></image> -->
		    </view>
		    <view class="userImgDetail">
				<uni-file-picker class="userImage" fileMediatype="image" :imageStyles="listStyle" v-model="diplomaPhotoByte" :fileExtname="fileExtname" limit="1" delIcon="false" readonly="true"/>
		        <!-- <image class="userImage" :src="item.teacherPhoto"></image> -->
		    </view>
		</view>
		<!-- 高校信息 -->
		<view class="school">
		    <text>高校全名</text>
		    <text class="schoolName">{{item.school}}</text>
		</view>
		<!-- 教员性别和专业 -->
		<view class="teacherSexMajor">
		    <view>
		        <text>教员性别</text>
		        <text class="userDetail">{{item.sex}}</text>
		    </view>
		    <view class="teacherMajor">
				<text>当前学历</text>
				<text class="userDetail">{{item.education}}</text>
		    </view>
		</view>
		<!-- 籍贯 -->
		<view class="userInfo">
		    <text>籍贯</text>
		    <text class="userDetail">{{item.nativePlace}}</text>
		</view>

		<view class="userInfo">
		    <text>专业</text>
		    <text class="userDetail">{{item.major}}</text>
		</view>
		<view class="userInfo">
		    <text>毕业时间</text>
		    <text class="userDetail">{{item.graduateMonth}}</text>
		</view>
		
		<!-- 审核状态 -->
		<view class="audit">
		    <text>审核状态</text>
		    <text class="auditDetail">{{item.verifyStatus}}</text>
		</view>
		<!-- 审核不通过原因 -->
		<view class="auditResult">
		    <text>审核结果</text>
		    <text class="auditDetail">{{item.verifyRefuseReason}}</text>
		</view>
		<!-- 申请日期 -->
		<view class="applyDate">
		    <text>申请日期</text>
		    <text class="userDetail">{{item.datetime}}</text>
		</view>

	</view>
	<!-- 修改认证按钮 -->
	<view class="submitBtnWrapper">
		<button class="submitBtn" type="primary" @click="modifyAuthorize" >修改认证</button>
	</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	
	export default {
		computed: {
			...mapState('m_user', ['authorizePhoto'])
		},
		data() {
			return {
				listStyle: {
					"height": 111,	// 边框高度
					"width": 174,	// 边框宽度
					"border":{ // 如果为 Boolean 值，可以控制边框显示与否
						"color":"#ccc",		// 边框颜色
						"width":"1px",		// 边框宽度
						"style":"solid", 	// 边框样式
					}
				},
				item: {},
				fileExtname: 'png,jpg',
				idCardFrontByte: [{
					url: '',
					extname: '',
					name: ''
				}],
				idCardBackByte: [{
					url: '',
					extname: '',
					name: ''
				}],
				teacherPhotoByte: [{
					url: '',
					extname: '',
					name: ''
				}],
				diplomaPhotoByte: [{
					url: '',
					extname: '',
					name: ''
				}],
			};
		},
		onLoad(option) {
			this.item = JSON.parse(decodeURIComponent(option.item))
			let arr = this.item.name.split('')
			if (arr.length <= 3) {
				this.item.firstName = this.item.name.substring(0,1) 
			} else {
				this.item.firstName = this.item.name.substring(0,2)
			}
			this.getPhotoes()
		},
		methods: {
			getPhotoes() {
				this.diplomaPhotoByte[0].url = this.item.diplomaPhoto
				this.diplomaPhotoByte[0].name = 'diplomaPhoto'
				this.idCardBackByte[0].url = this.item.idCardBack
				this.idCardBackByte[0].name = 'idCardBack'
				if(this.item.verifyStatus == "审核中"){
					this.teacherPhotoByte[0].url = this.item.teacherPhotoTemp
				}else{
					this.teacherPhotoByte[0].url = this.item.teacherPhoto
				}
				this.teacherPhotoByte[0].name = 'teacherPhoto'
				this.idCardFrontByte[0].url = this.item.idCardFront
				this.idCardFrontByte[0].name = 'idCardFront'
			},
			modifyAuthorize() {
				uni.navigateTo({
					url: '/subpkg/teacher/authentication/teacher_authentication_add?item=' + encodeURIComponent(JSON.stringify(this.item))
				})
			}
		}
	}
</script>

<!-- 设置页面背景 -->
<style lang="scss">
	page{
		// height: 100%;
		// background-color: #FFF;
	}
</style>

<style lang="scss" scoped>
.container {
	width: 90%;
	padding: 20rpx;
	margin-left: 20rpx;
	border-radius: 20rpx;
	background-color: #FFF;
	font-size: 30rpx;
}
/* 顶部用户信息、性别和专业 */
.userInfo,
.teacherSexMajor{
    display: flex;
    margin-top: 16rpx;    
}
/* 姓、英文名、专业 */
.userName,
.teacherMajor{
    position: absolute;
    left: 60%;
}
.school{
    margin-top: 30rpx;
}
/* 用户详情、高校名称、审核状态即原因 */
.userDetail,
.schoolName,
.auditDetail{
    margin-left: 20rpx;
    font-weight: bold;
}
/* 照片信息 */
.userImg{
    margin-top: 30rpx;
    display: flex;
    flex-wrap: wrap;
}
/* 设置边框 */
.userImgDetail{
    width: 45%;
    padding: 10rpx;
    height: 200rpx;
    display: flex;
    // border-left: 1rpx solid gray;
    // border-top: 1rpx solid gray;
}
/* 偶数照片添加右边框 */
.userImg :nth-child(even){
    // border-right: 1rpx solid gray;
}
/* 第三张照片添加下边框 */
.userImg :nth-child(3){
    // border-bottom: 1rpx solid gray;
}
/* 第四张照片添加下边框 */
.userImg :nth-child(4){
    // border-bottom: 1rpx solid gray;
}
/* 设置照片 */
.userImage{
    width: 100%;
    height: 100%;
}
/* 审核状态 */
.audit{
    margin-top: 40rpx;
}
/* 审核不通过原因、申请日期 */
.auditResult,
.applyDate{
    margin-top: 20rpx;
}

	// 提交按钮样式
	.submitBtnWrapper{
		margin-top: 60rpx;
		height: 140rpx;
		align-items: center;
	}
	.submitBtn{
		width: 300rpx;
		border-radius: 50rpx;
		// margin-bottom: 40rpx;
		background-color: #35b882;
		font-size: 30rpx;
	}

</style>