359 lines
9.3 KiB
Vue
359 lines
9.3 KiB
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>
|