family-education/education_uni/subpkg/teacher/authentication/teacher_authentication_detail.vue

<template>
	<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="profilePhotoByte" :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.profilePhoto"></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="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 class="modify" @click="modifyAuthorize">
		    <text class="modifyBtn">修改认证</text>
		</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: ''
				}],
				profilePhotoByte: [{
					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: {
			async 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'
				this.profilePhotoByte[0].url = this.item.profilePhoto
				this.profilePhotoByte[0].name = 'profilePhoto'
				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: 93%;
	padding: 20rpx;
	margin-left: 10rpx;
	border-radius: 20rpx;
	background-color: #FFF;
}
/* 顶部用户信息、性别和专业 */
.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;
}

/* 修改认证按钮 */
.modify{
    margin-top: 120rpx;
    margin-bottom: 60rpx;
    display: flex;
    justify-content: center;
}
.modifyBtn{
    font-size: 38rpx;
    padding: 10rpx 30rpx;
    border-radius: 40rpx;
    background-color: #35b882;
    color: white;
}
</style>