jobslink-user-clent/pages/projectInfo/step/first.vue

<template>
	<view>
		<!--<view style="height: 70rpx;"></view>-->
		<view class="list border" style="padding-right: 32rpx;">
			<view class="name">
				姓名
			</view>
			<text v-if="auth.realNameState" style="color: #1B66FF;">{{auth.authInfo.realName}}</text>
			<input v-else type="text" :value="name" placeholder="请输入" @input="setName" placeholder-style="color:#cccccc;" />
		</view>
		<view class="border" style="padding-right: 32rpx;">
			<view class="list">
				<view class="name">
					身份证号
				</view>
				<text v-if="auth.realNameState" style="color: #1B66FF;">{{idNumberFilter(auth.authInfo.idNumber)}}</text>
				<input v-else type="idcard" :value="card" placeholder="请输入" @input="setCard" style="text-transform:uppercase"
				 placeholder-style="color:#cccccc;" />
			</view>
			<view v-if="error" class="error">身份证号格式不正确</view>
		</view>
		<view class="list border">
			<view class="listLeft">
				开户银行
			</view>
			<view v-if="auth.bankCardState" class="listRight" style="margin-right:32rpx;">
				{{auth.authInfo.bankName}}
			</view>
			<view v-else class="listRight" @click="goBankList">
				{{bankName}}
				<image src="@/static/img/right.svg" mode=""></image>
			</view>
		</view>
		<view class="list border">
			<view class="name">
				银行卡号
			</view>
			<text v-if="auth.bankCardState" style="color: #1B66FF;">{{auth.authInfo.cardNumber}}</text>
			<input v-else type="number" v-model="cardNumber" placeholder="请输入银行卡号" placeholder-style="color:#cccccc;" @input="blur" />
		</view>
		<picker @change="bindPickerChange" :value="index" :range="laborType" class="border">
			<view class="list">
				<view class="listLeft">
					<view class="listTitle">身份信息</view>
				</view>
				<view class="listRight">
					<view class="rightContent nochoose">
						<view v-if="auth.laborState" class="uni-input">{{ laborType[0] }}</view>
						<view v-else class="uni-input">请选择</view>
					</view>
					<image src="@/static/img/right.svg" mode=""></image>
				</view>
			</view>
		</picker>
		<picker @change="bindPickerChangeBao" :value="indexbao" :range="insureType" class="border">
			<view class="list">
				<view class="listLeft">
					<view class="listTitle">社保信息</view>
				</view>
				<view class="listRight">
					<view class="rightContent nochoose">
						<view v-if="auth.insureState" class="uni-input">{{ insureType[indexbao] }}</view>
						<view v-else class="uni-input">请选择</view>
					</view>
					<image src="@/static/img/right.svg" mode=""></image>
				</view>
			</view>
		</picker>
		<view class="btn">
			<view v-if="auth.realNameState && auth.bankCardState" @click="next" class="bottombtn">
				完成
			</view>
			<view v-if="!loading && !status  && !auth.bankCardState" class="bottombtn nocheck">
				完成
			</view>
			<view v-if="!loading && status  && !auth.bankCardState" @click="next" class="bottombtn">
				完成
			</view>
			<view v-if="loading" class="bottombtn nocheck">
				提交中
			</view>
		</view>

	</view>
</template>

<script>
	import textdata from '@/common/textdata.js'
	import {
		mapGetters
	} from 'vuex'
	import {
		idNumberFilter
	} from '@/untils/format.js'
	import {
		check18IdCardNo,
		validatenull
	} from '@/untils/validate.js'
	import {
		getStore
	} from '@/untils/store.js'
	import {
		newCertification,findAuth
	} from '@/api/auth.js'
	export default {
		data() {
			return {
				laborType: textdata.laborType,
				insureType: textdata.insureType,
				name: '',
				card: '',
				error: false,
				loading: false,
				index: 0,
				bankName: "选择银行",
				cardNumber: "",
				bankId: "",
				clickable: false,
				def: true, //银行卡是否为默认
				defCount: 5, //默认每日允许认证次数
				realCount:0,//已经认证的次数
			}
		},
		mounted() {
			const realName = getStore({
				name: 'realName'
			})
			const bankCard = getStore({
				name: 'bankCard'
			})
			if (bankCard && bankCard.bankName) {
				this.bankName = bankCard.bankName
				this.bankId = bankCard.bankId
				this.cardNumber = bankCard.cardNumber
			}
			if (realName && realName.name) {
				this.name = realName.name
				this.card = realName.card
			}

		},
		methods: {
			idNumberFilter,
			next() {
				var auth = this.auth
				console.log(auth.realNameState,auth.laborState , auth.insureState)
				if (auth.realNameState && auth.laborState && auth.insureState && auth.bankCardState) {
					this.$emit('firstSubmit')
				} else {
					this.submit()
				}
			},
			setName: function(e) {
				this.name = e.detail.value;
				this.setFirstObj()
			},
			setCard: function(e) {
				this.card = e.detail.value.toUpperCase();
				this.error = !check18IdCardNo(this.card)
				this.setFirstObj()
				return e.detail.value.toUpperCase()
			},
			bindPickerChange: function(e) {
				uni.showLoading()
				this.$store.dispatch('authLabor').then(resp => {
					this.index = e.target.value;
					uni.hideLoading()
				}).catch(() => {
					uni.hideLoading()
				})
			},
			bindPickerChangeBao: function(e) {
				uni.showLoading()
				this.$store.dispatch('authInsure', e.target.value * 1 + 1).then(resp => {
					uni.hideLoading()
				}).catch(() => {
					uni.hideLoading()
				})
			},
			setFirstObj() {
				var obj = {
					name: this.name,
					card: this.card
				}
				this.$store.dispatch('setRealName', obj)
			},
			submit() {
				findAuth().then(res=>{
					let count = res.data.data.authCount; //每次点“提交”都先查询已经认证了几次
					let diffCount = this.defCount - count; //剩余认证机会
					this.loading = true;
					if (count <= this.defCount) {
						let name=this.auth.realNameState?this.auth.authInfo.realName:this.name;
						let card=this.auth.realNameState?this.auth.authInfo.idNumber:this.card;
						newCertification(this.indexbao + 1, name, card, this.cardNumber, this.bankId, this.def ? 1 : 0, this.bankName)
							.then( //认证成功则跳转到首页面
								res => {
									uni.showToast({
										title: res.data.msg,
										icon: 'none'
									})
									this.$store.commit('SET_AUTH_REALNAME', true)
									this.$store.dispatch('setRealName', {})
									this.$store.commit('SET_AUTH_BANKCARD', true)
									this.loading = false
									uni.switchTab({
										url: '/pages/index/index'
									})
								}).catch((err) => { //认证失败会提示还有几次认证机会
								if (count > 1 && count <= 5) {
									//uni.hideToast();
									setTimeout(() => {
										uni.showToast({
											title: `今日已认证${count}次，还有${diffCount}次认证机会`,
											icon: 'none',
											duration: 3000
										})
									}, 1000)
									
								}
								this.loading = false;
					
							})
					} else {
						if (count >= this.defCount) {
							uni.showToast({
								title: `今日已认证${this.defCount}次，请明日再来认证`,
								icon: 'none',
								duration: 3000
							})
							this.loading = false;
						}
					}
				})
				
			},
			goBankList: function() {
				uni.$once('icCardSetBank', (data) => {
					this.bankId = data.id;
					this.bankName = data.name;
					this.setBankName()
				})
				uni.navigateTo({
					url: '/pages/bankList/bankList'
				})
			},
			setBankName() {
				const obj = {
					bankName: this.bankName,
					bankId: this.bankId,
					cardNumber: this.cardNumber
				}
				this.$store.dispatch('setBankCard', obj)
			},
			blur() {
				this.setBankName();
			}
		},
		computed: {
			...mapGetters(['auth', 'authInfo']),
			indexbao() {
				if (this.auth.insureState) {
					return this.authInfo.bakValue - 1
				} else {
					return 0
				}
			},
			status() {
				if (this.auth.authInfo.realName && this.auth.authInfo.idNumber) {
					if (!this.cardNumber || !this.bankId || !this.auth.laborState || !this.auth.insureState) {
						return false
					} else {
						return true
					}
				} else {
					if (!this.name || !this.card || !this.cardNumber || !this.bankId || !this.auth.laborState || !this.auth.insureState) {
						return false
					} else {
						return true
					}
				}

			}
		}
	}
</script>

<style scoped>
	.nocheck {
		opacity: 0.3;
	}

	.bottombtn {
		background-color: #1B66FF;
		color: #fff;
		text-align: center;
		border-radius: 10rpx;
		font-family: PingFangSC-Medium;
		font-size: 32rpx;
		height: 90rpx;
		line-height: 90rpx;
	}

	.btn {
		background-color: #fefefe;
		padding: 70rpx 80rpx;
	}

	.error {
		font-family: PingFangSC-Regular;
		font-size: 24rpx;
		color: red;
		position: absolute;
		right: 15px;
		top: 14px;
		height: 1px;
	}

	input {
		text-align: right;
	}

	.border {
		border-bottom: 1px solid #DDDDDD;
		height: 88rpx;
		line-height: 88rpx;
		position: relative;
		margin: 0 30rpx;
	}

	.listRight {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-family: PingFangSC-Regular;
		font-size: 28rpx;
		color: #999999;
	}

	.listRight image {
		width: 19rpx;
		height: 32rpx;
		margin-left: 15rpx;
	}

	.list .name {
		width: 200rpx;
	}

	.list {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-family: PingFangSC-Regular;
		font-size: 32rpx;
		color: #333333;
	}
</style>