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

<template>
	<view>
		<view class="requires2">
			<uni-row >
				<uni-col offset="1">
					<text>通过认证，即可查看收费规则!</text>
				</uni-col>
			</uni-row>
		</view>
		<view v-show="isShow">
			<view class="requires" @click="requireDetail(item)">
				<uni-row >
					<uni-col offset="1":span="12">
						<text>ID</text>
						<text class="fontStyle">{{item.uid}}</text>
					</uni-col>
					<uni-col :span="10">
						<text>全名</text>
						<text class="fontStyle">{{item.name}}</text>
					</uni-col>
				</uni-row>
				<uni-row >
					<uni-col offset="1">
						<text>高校</text>
						<text class="fontStyle">{{item.school}}</text>
					</uni-col>
				</uni-row>
				<uni-row>
					<uni-col offset="1" :span="12">
						<text>学历</text>
						<text class="fontStyle">{{item.education}}</text>
					</uni-col>
					<uni-col :span="10">
						<text>手机</text>
						<text class="fontStyle">{{item.phone}}</text>
					</uni-col>
				</uni-row>
				<uni-row >
					<uni-col offset="1" :span="17">
						<text>微信</text>
						<text class="fontStyle">{{item.weixinId}}</text>
					</uni-col>
					<uni-col :span="5">
						<text class="fontStyle" style="color: red;">{{authentication}}</text>
					</uni-col>
				</uni-row>
			</view>

		</view>
					
			<view class="apply-btn-wrapper" v-if="isShowApplyBtn">
				<button class="apply-btn" @click="applyButton">教员认证</button>
			</view>

			<view class="feeRule-btn-wrapper" v-if="isShowFeeRuleBtn">
				<button class="feeRule-btn" @click="feeRuleButton">收费规则</button>
			</view>
	</view>

</template>

<script>
	import { mapState, mapMutations } from 'vuex';
	export default {
		computed: {
			...mapState('m_user', ['authentication'])
		},
		data() {
			return {
				item: {},
				isShow: false,
				isShowApplyBtn: false,
				isShowFeeRuleBtn: false
			};
		},
		onShow() {
			this.getPersonAuthorize()
		},
		methods: {
			...mapMutations('m_user', ['updateAuthentication']),
			// 获取认证信息
			async getPersonAuthorize() {
				const { data: result } = await uni.$http.get('/education/teacher-certifications/findInfosByUid')
				this.item = result.data.one
				if (this.item == null) {
					this.updateAuthentication('未申请认证')
					this.isShowApplyBtn = true
				} else {
					this.isShow = true
					//this.item.graduateMonth = '2022-02'//后端接口写好后，这里不用了
					if (this.item.verifyRefuseReason == null) {
						this.item.verifyRefuseReason = '无'
					}
					this.updateAuthentication(result.data.one.verifyStatus)
					if (result.data.one.verifyStatus == "已通过"){
						this.isShowFeeRuleBtn = true
					}
				}
			},
			applyButton() {
				    this.isShowApplyBtn = false
					uni.navigateTo({
						url:'/subpkg/teacher/authentication/teacher_authentication_add'
					})
			},
			feeRuleButton() {
					uni.navigateTo({
					  url:'/subpkg/my/fee/feeRule_teacher'
					})
			},
			requireDetail(item) {
				uni.navigateTo({
					url: '/subpkg/teacher/authentication/teacher_authentication_detail?item=' + encodeURIComponent(JSON.stringify(this.item))
				})
			}
		}
	}
</script>

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

<style lang="scss" scoped>
.requires {
	background-color: #FFF;
	margin: 20rpx 20rpx;
	border-radius: 30rpx;
	font-size: 30rpx;
	padding: 20rpx 20rpx;
	//font-weight: bold;
	
	.fontStyle {
		font-weight: bold;
		margin-left: 10rpx;
	}
	
	.authorize {
		color: red;
	}

}

.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;
	
}
	// 底部按钮
.feeRule-btn-wrapper,
.apply-btn-wrapper{
		margin-top: 60rpx;
		height: 140rpx;
		align-items: center;
	}	
	
.feeRule-btn,
.apply-btn{
		width: 300rpx;
		border-radius: 50rpx;
		// margin-bottom: 40rpx;
		background-color: #35b882;
		font-size: 35rpx;
		color:#fff;
	}
	
</style>