P003-WX-HomeTeacher/education_uni/subpkg/manager/checkqualification/qualification_detail.vue

<template>
	<view>
	<view class="container" v-if="isShow">
		<!-- 顶部信息 -->
		<view class="userInfo">
		    <view>
		        <text>用户ID</text>
		        <text class="userDetail">{{item.uid}}</text>
		    </view>
		    <view class="userName">
		        <text>贵姓</text>
		        <text class="userDetail">{{item.name}}</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" fileMediatype="image" :imageStyles="listStyle"  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="requires2">
		<uni-row >
				<text>待审条数：{{current}}</text>
		</uni-row>
	</view>
		<!-- 取消和提交按钮 -->
		<view class="suggestBtn" v-if="isShow">
		    <button class="cancelBtn" @click="toRefuse">拒绝</button> 
				<modal v-if="areaShow" title="拒绝原因必填" confirm-text="提交" cancel-text="取消" @cancel="cancelAdd" @confirm="confirmAdd">
				  <input type="text" v-model="areaTxt" placeholder="至少5个字" maxlength="50" />
				</modal>
		    <button class="confirmBtn" :disabled="disableButton" @click="toConfirm">同意</button>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	
	export default {
		computed: {
			...mapState('m_user', ['token', 'userinfo'])
		},
		data() {
			return {
				                 areaShow: false,
				                 areaTxt:'',
					  
				isShow: false,
				listStyle: {
					"height": 111,	// 边框高度
					"width": 174,	// 边框宽度
					"border":{ // 如果为 Boolean 值，可以控制边框显示与否
						"color":"#ccc",		// 边框颜色
						"width":"1px",		// 边框宽度
						"style":"solid", 	// 边框样式
					}
				},
				index: 0,
				current:0,
				item: {},
				datas:{},
				fileExtname: 'png,jpg',
				idCardFrontByte: [{
					url: '',
					extname: '',
					name: ''
				}],
				idCardBackByte: [{
					url: '',
					extname: '',
					name: ''
				}],
				teacherPhotoByte: [{
					url: '',
					extname: '',
					name: ''
				}],
				diplomaPhotoByte: [{
					url: '',
					extname: '',
					name: ''
				}],
			};
		},
		onLoad(option) {
			this.getAllCheckingTeacherInfo()

		},
		methods: {
			checkIsHaveNext(){
				 this.current = this.current - 1
				 this.index = this.index + 1
				if(this.current == 0){
					this.isShow = false
				}else{
					this.item = this.datas.list[this.index]
					this.getPhotoes()
				}
			},
			toConfirm(){
				// 开始向后端提交数据
				this.submitToBack(this.item.uid,"已通过",this.userinfo.uid + "已通过")
				this.checkIsHaveNext()
			},
			toRefuse(){
			   this.areaShow = true	
			},
		cancelAdd(){
			this.areaShow = false
		},
		confirmAdd(){
			this.areaShow = false
			var strRefuse = this.areaTxt.replace(/\ +/g,"")
			strRefuse = strRefuse.replace(/[\r\n]/g,"")
			if(strRefuse.length < 5){
				uni.$showMsg("有效字数少于5个，请增加！")
			}else{
				strRefuse = this.userinfo.uid + strRefuse
				// 开始向后端提交数据
				this.submitToBack(this.item.uid,"未通过",strRefuse)
				this.checkIsHaveNext()
			}
		},
			async submitToBack(uid,checkstatus,checktext) {
				// 准备参数对象
				const query = {
					uid: uid,
					checkstatus: checkstatus,
					checktext: checktext
				}
				const {
					data: result
				} = await uni.$http.get('/education/teacher-certifications/updateTeacherQualificationInfo',query)
				//console.log(result)
				uni.$showMsg(result.message , 2000)
			},

			async getAllCheckingTeacherInfo() {
				const { data: result } = await uni.$http.get('/education/teacher-certifications/getAllCheckingTeacherInfo')
              //  console.log(result)
				this.current = result.data.list.length
					if(this.current > 0){
						this.datas = result.data
						this.item = this.datas.list[this.index ]
						this.getPhotoes()
						this.isShow = true
					}
								//console.log(this.item)
				},
				
			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.teacherPhotoByte[0].url = this.item.teacherPhotoTemp
				this.teacherPhotoByte[0].name = 'teacherPhoto'
				this.idCardFrontByte[0].url = this.item.idCardFront
				this.idCardFrontByte[0].name = 'idCardFront'
			}

		}
	}
</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;
}
	
	.requires2 {
		background-color: #FFF;
		margin: 20rpx 20rpx;
		border-radius: 50rpx;
		font-size: 30rpx;
		padding: 20rpx 20rpx;
		//font-weight: bold;
		color: gray;
		display: flex;
		align-items: center;
		justify-content: center;
		
	}
	
	/* 下方按钮 */
	.suggestBtn{
	    display: flex;
	    padding: 60rpx;
	    justify-content: space-around;
	}
	
	.confirmBtn,
	.cancelBtn{
	    font-size: 30rpx;
	    height: 85rpx;
	    width: 200rpx;
	    line-height: 85rpx;
	    border-radius: 50rpx;
	    text-align: center;
	    color: white;
		margin-top: 5rpx;
	}
	
	.confirmBtn{
		background-color: #35b882;
	}
	.cancelBtn{
		background-color: #3ed598;
	}

</style>