qidian/pages/realname/realname.vue

<template>
	<view v-if="state==0" class="smrz">
		<view class="shurukuan">
			<view>
				<view>名字</view>
				<input placeholder="请输入真实姓名" v-model="user.name" />
			</view>
			<view>
				<view>身份证号</view>
				<input placeholder="请输入身份证号" v-model="user.idNumber" />
			</view>
		</view>
		<view @click="queren" class="queren">
			完成
		</view>
	</view>
	<view v-if="state==1" class="smrzwc">
		<view class="smrzwc_top">
			<image src="../../static/ysm.png"></image>
			<view>已实名认证</view>
		</view>
		<view class="smrzwc_xx">
			<view>
				<view>姓名</view>
				<view>{{user.name}}</view>
			</view>
			<view>
				<view>身份证号</view>
				<view>{{user.idNumber}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {criticismnotAutonym} from '@/api/user.js'
	import {ref,reactive} from 'vue'
	export default {
		props:['issm'],
		setup(props) {
			let state=ref(0)
			let user=reactive({
				name:'',
				idNumber:''
			})
			if(props.issm=='true'){
				state.value=1
				user.name=uni.getStorageSync('users').realName
				user.idNumber=uni.getStorageSync('users').idNumber
			}else if(props.issm=='false'){
				state.value=0
			}
			function queren(){
				if(user.name==''){
					uni.showToast({
						title:'姓名不能为空',
						icon:'none'
					})
				}
				let test=/^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
				if(!test.test(user.idNumber)){
					uni.showToast({
						title:'身份证有误',
						icon:'none'
					})
					return
				}
				
				criticismnotAutonym({
					name:user.name,
					card:user.idNumber
				}).then(res=>{
					console.log(res);
					if(res.code==200){
						uni.showToast({
							title:'实名认证成功',
							icon:'success'
						})
						uni.setStorageSync('users',res.data)
						state.value=1
					}else{
						uni.showToast({
							title:res.msg,
							duration:2000,
							icon:'none'
						})
					}
				})
			}
			return {
				state,
				user,
				queren
			}
		}
	}
</script>

<style lang="scss">
	.smrz{
		display: flex;
		flex-direction: column;
		align-items: center;
		.shurukuan{
			width: 686upx;
			// height: 326upx;
			background: #23262F;
			border-radius: 12upx;
			display: flex;
			flex-direction: column;
			padding: 32upx;
			box-sizing: border-box;
			margin-bottom:120upx ;
			>view{
				color: #ffffff;
				display: flex;
				font-size: 28upx;
				font-weight: 400;
				justify-content: space-between;
				border-bottom: 1upx solid #373737;
				&:nth-of-type(1){
					padding-top: 20upx;
					padding-bottom: 40upx;
				}
				&:nth-last-child(1){
					border-bottom:none;
					padding-top: 40upx;
					padding-bottom: 0upx !important;
				}
				>input{
					width: 350upx;
					text-align: right;
				}
			}
		}
		.queren{
			width: 668upx;
			height: 84upx;
			background: linear-gradient(351deg, #9735DC 0%, #570CDC 100%);
			border-radius: 48upx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28upx;
			font-weight: 500;
			color: #FFFFFF;
		}
	}
	.smrzwc{
		display: flex;
		flex-direction:  column;
		align-items: center;
		padding-top: 90upx;
		color: #ffffff;
		.smrzwc_top{
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: 30upx;
			font-weight: 500;
			color: #FFFFFF;
			>image{
				width: 124upx;
				height: 124upx;
				margin-bottom: 40upx;
			}
		}
		.smrzwc_xx{
			width: 686upx;
			// height: 326upx;
			background: #23262F;
			border-radius: 12upx;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 32upx;
			box-sizing: border-box;
			margin-top: 50upx;
			>view{
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-weight: 400;
				color: #FFFFFF;
				border-bottom: 1upx solid #373737;
				padding-bottom: 44upx;
				&:nth-last-child(1){
					border-bottom:none;
					padding-top: 44upx;
					padding-bottom: 20upx;
				}
				>view:nth-of-type(1){
					font-size: 28upx;
				}
				>view:nth-of-type(1){
					font-size: 24upx;
				}
			}
		}
	}
	page{
		padding-top: 34upx;
	}
</style>