dangfei-weapp/components/Auth.vue

<template>
	<view v-if="isShow" class="maskAuth">
		<view>
			<view class="contentBox" :class="isAuth ? 'contentBox_bg2':''">
				<view class="contentMain">
					<text class="fixedTitle" :class="isAuth ? 'fixedTitle_plus':''" >{{isAuth ?'绑定团队':'身份认证'}}</text>
					<view v-if="isAuth">
						<view v-if="(userinfo.team_id && userinfo.team_id!==0) || team.name">
							<text class="fixedTitle2">你好</text>
							<text class="teamTitle">这里是 {{team.name}}，请您 按照提示确认绑定。</text>
						</view>
						<view v-else>
							<text class="teamTitle">您现在还未加入任何团队</text>
						</view>
					</view>
					<view v-else>
						<input type="text" placeholder="输入您的名字" v-model="submit.name" class="authInput">
						<input type="idcard" placeholder="输入您的手机号或档案号" v-model="submit.cre_num" maxlength="11" class="authInput">
					</view>
					<text class="fixedTitle3">注释：请根据提示进行身份证 实名认证后，进行绑定团队</text>
				</view>
				<button v-if="!isAuth" type="primary" class="submitBtn" @click="submitAuth">去绑定团队</button>
				<button v-else type="primary" class="submitBtn" @click="submitSure">{{(userinfo.team_id && userinfo.team_id!==0) ? '确定团队' : '确定' }}</button>
			</view>
			<!-- <view>
				<image class="closeBtn" src="/static/auth_close.png" @click="handleClose"></image>
			</view> -->
		</view>
	</view>
</template>	

<script>
	
	import {toAuth,sureTeam} from '../api/index.js'
	
	import { mapState } from "vuex"  
	
	export default{
		name:"auth",
		data(){
			return {
				isShow:false,
				submit:{
					name:'',
					cre_num: ''
				},
				team:{
					name:"",
					id:""
				},
				isAuth:false
			}
		},
		computed:{
			...mapState(["userinfo"])
		},
		methods:{
			// 提交认证
			submitAuth(){
				const that = this
				let {name,cre_num} = this.submit
				name=name.trim()
				cre_num=cre_num.trim()
				if(!name){
					// 验证用户名,身份证不能为空且格式正确
					uni.showToast({
						title:"用户名不能为空",
						icon:"none",
						duration:2500
					})
					return false;
				}
				if(!cre_num){
					uni.showToast({
						title:"密码不能为空",
						icon:"none",
						duration:2500
					})
					return false;
				}
				const phonereg = /^1[3|4|5|7|8][0-9]\d{8}$/
				
				if(cre_num.length === 11){
					if(!phonereg.test(cre_num)){
						uni.showToast({
							title:"请输入正确的手机号",
							icon:"none",
							duration:2500
						})
						return false;
					}
				}else if(cre_num.length === 8){
					
				}else{
					if(!phonereg.test(cre_num)){
						uni.showToast({
							title:"请输入正确的手机号或档案号",
							icon:"none",
							duration:2500
						})
						return false;
					}
				}
				
				// 提交
				toAuth({
					name:name,
					cre_num:cre_num,
					openid:that.$store.state.openid
				}).then(res=>{
					const { error_code,msg } = res
					
					if(error_code===200){
						const { data,openid } = res
						const { token,teamname,teamid } = data
						
						that.$store.commit("change_token",token);
						
						uni.setStorage({
							key:"token",
							data:token
						})
						
						// 是否认证,是否确认团队
						uni.setStorage({
							key:"isSure",
							data:1
						})
						uni.setStorage({
							key:"sureTeam",
							data:teamname
						})
						
						
						that.$store.commit("change_openid",openid);
						this.isAuth=true
						that.team={
							name:teamname,
							id:teamid
						}
						
						
					}else{
						
						const len=this.submit.cre_num.length
						
						let {msg}=res
						
						if(len===11){
							msg="不存在该手机号,请换档案号试试"
						}else if(len===8){
							msg="不存在该档案号,请换手机号试试"
						}else{
							msg+=",手机号或档案号不正确"
						}
						
						uni.showToast({
							title:msg,
							icon:'none'
						})
					}
					
				})
			},
			handleOpen(){
				this.isShow=true
			},
			handleSure(){
				this.isAuth=true
			},
			handleTeam(){
				this.team.name=uni.getStorageSync("sureTeam")
			},
			handleClose(){
				if(uni.getStorageSync("isSure") ===0 || uni.getStorageSync("isSure")){
					uni.showToast({
						title:"请认证并确认团队",
						icon:"none"
					})
				}else{
					this.isShow=false
				}
			},
			// 确认团队
			submitSure(){
				const that = this
				sureTeam().then(res=>{
					const { error_code } = res;
					if(error_code===200){
						
						uni.removeStorage({
							key:"cert"
						})
						
						// 是否认证,是否确认团队
						uni.removeStorage({
							key:"isSure"
						})
						// 删除团队名
						uni.removeStorage({
							key:"sureTeam"
						})
						
						that.$store.dispatch("getUser");
						that.$parent.getMessageList();
						that.handleClose()
					}else{
						const {msg}=res
						uni.showToast({
							title:msg,
							icon:'none'
						})
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.contentBox{
		width: 627rpx;
		height: 762rpx;
		background: url(../static/auth_bg.jpg);
		background-size: 100% 100%;
		border-radius: 4px;
		position: relative;
	}
	.contentBox_bg2{
		background: url(../static/auth_bg2.jpg);
		background-size: 100% 100%;
	}
	.closeBtn{
		display: block;
		width: 51rpx;
		height: 51rpx;
		margin: 0 auto;
		margin-top: 39rpx;
	}
	.contentMain{
		width: 503rox;
		height: 362rpx;
		background: url(../static/auth_bg2.png);
		background-size: 100% 100%;
		position: absolute;
		top: 166rpx;
		left: 50%;
		margin-left: -301rpx;
		padding: 60rpx 90rpx;
		color: #404040;
		font-size: 24rpx;
	}
	.fixedTitle{
		display: block;
		font-size: 30rpx;
		color: #666666;
		text-align: center;
		margin-bottom: 30rpx;
	}
	.fixedTitle_plus{
		margin-bottom: 40rpx;
	}
	.teamTitle{
		display: block;
		margin-top: 24rpx;
		margin-bottom: 50rpx;
	}
	.fixedTitle3{
		color: #929292;
		font-size: 20rpx;
		display: block;
	}
	.authInput{
		width: calc(100% - 40rpx);
		height: 70rpx;
		line-height: 70rpx;
		padding: 0 20rpx;
		font-size: 24rpx;
		border-radius: 3px;
		box-shadow:0px 0px 4rpx 0px rgba(141,141,141,1);
		margin-bottom: 40rpx;
	}
	.submitBtn{
		font-size: 28rpx;
		background: $uni-btn-bg-color;
		width: 237rpx;
		height: 70rpx;
		line-height: 70rpx;
		border-top-left-radius: 70rpx;
		border-bottom-left-radius: 70rpx;
		border-top-right-radius: 70rpx;
		border-bottom-right-radius: 70rpx;
		position: absolute;
		bottom: 39rpx;
		left: 50%;
		margin-left: -118.5rpx;
	}
	.maskAuth{
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background: rgba(0,0,0,.4);
		z-index: 999;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>