225 lines
4.7 KiB
Vue
225 lines
4.7 KiB
Vue
<template>
|
||
<view style="margin-top: 70rpx;">
|
||
<view class="list">
|
||
<view class="listName">
|
||
开户银行
|
||
</view>
|
||
<view v-if="auth.bankCardState" class="listContent" style="margin-right:32rpx;">
|
||
{{auth.authInfo.bankName}}
|
||
</view>
|
||
<view v-else class="listContent" @click="goBankList">
|
||
{{bankName}}
|
||
<image src="@/static/img/right.svg" mode=""></image>
|
||
</view>
|
||
</view>
|
||
<view class="list">
|
||
<view class="listName">
|
||
银行卡号
|
||
</view>
|
||
<text v-if="auth.bankCardState" style="color: #999999;font-size: 14px;margin-right:32rpx;">{{auth.authInfo.cardNumber}}</text>
|
||
<input v-else type="number" v-model="cardNumber" placeholder="请输入银行卡号" placeholder-style="color:#cccccc;" @input="blur"/>
|
||
</view>
|
||
<view class="cardTips">
|
||
此银行卡信息仅作为发放工资使用；银行卡持卡人信息与基本信息一致。
|
||
</view>
|
||
<view v-if="stepLength === 2" class="btn">
|
||
<view v-if="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 v-if="stepLength === 3" class="btn">
|
||
<view v-if="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 {bank} from '@/api/auth.js'
|
||
import {mapGetters} from 'vuex'
|
||
import {getStore} from '@/untils/store.js'
|
||
export default{
|
||
data () {
|
||
return {
|
||
loading: false,
|
||
edit: false,
|
||
def: true,
|
||
bankId: '',
|
||
bankName: '选择银行',
|
||
cardNumber: '',
|
||
}
|
||
},
|
||
props:{
|
||
stepLength: {
|
||
type: Number,
|
||
default: 2
|
||
}
|
||
},
|
||
mounted(){
|
||
const bankCard = getStore({
|
||
name: 'bankCard'
|
||
})
|
||
if (bankCard && bankCard.bankName) {
|
||
this.bankName = bankCard.bankName
|
||
this.bankId = bankCard.bankId
|
||
this.cardNumber = bankCard.cardNumber
|
||
}
|
||
},
|
||
methods: {
|
||
next(){
|
||
var auth = this.auth
|
||
if (auth.bankCardState){
|
||
this.$emit('secondSubmit')
|
||
}else {
|
||
this.submit()
|
||
}
|
||
},
|
||
goBankList: function() {
|
||
uni.$once('icCardSetBank', (data) => {
|
||
this.bankId = data.id;
|
||
this.bankName = data.name;
|
||
this.setBankName()
|
||
})
|
||
uni.navigateTo({
|
||
url: '/pages/bankList/bankList'
|
||
})
|
||
},
|
||
submit() {
|
||
this.loading = true
|
||
bank(this.bankName, this.auth.authInfo.realName, this.cardNumber, this.def ? 1 : 0).then(resp => {
|
||
uni.showToast({
|
||
title: resp.data.msg,
|
||
icon: 'none'
|
||
});
|
||
this.loading = false
|
||
this.$store.commit('SET_AUTH_BANKCARD', true)
|
||
this.$emit('secondSubmit')
|
||
}).catch(err => {
|
||
this.loading = false
|
||
// this.$emit('secondSubmit',false)
|
||
})
|
||
},
|
||
blur(){
|
||
this.setBankName()
|
||
},
|
||
setBankName(){
|
||
const obj = {
|
||
bankName: this.bankName,
|
||
bankId: this.bankId,
|
||
cardNumber: this.cardNumber
|
||
}
|
||
this.$store.dispatch('setBankCard', obj)
|
||
}
|
||
},
|
||
computed: {
|
||
...mapGetters(['auth']),
|
||
status(){
|
||
if (!this.cardNumber || !this.bankName) {
|
||
return false
|
||
} else {
|
||
return true
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
|
||
.cardTips{
|
||
width: 590rpx;
|
||
height: 68rpx;
|
||
font-size: 24rpx;
|
||
font-weight: 400;
|
||
color: #999999;
|
||
line-height: 34rpx;
|
||
margin:71rpx 0 0 71rpx;
|
||
}
|
||
.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;
|
||
}
|
||
.list switch {
|
||
margin-left: auto;
|
||
}
|
||
|
||
.nocheck {
|
||
opacity: 0.3;
|
||
}
|
||
|
||
.listName {
|
||
font-family: PingFangSC-Regular;
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
width: 200rpx;
|
||
}
|
||
|
||
.listContent image {
|
||
width: 19rpx;
|
||
height: 32rpx;
|
||
margin-left: 15rpx;
|
||
}
|
||
|
||
.listContent {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-family: PingFangSC-Regular;
|
||
font-size: 28rpx;
|
||
color: #999999;
|
||
margin-left: auto;
|
||
}
|
||
|
||
.list input,
|
||
.list text {
|
||
margin-left: auto;
|
||
text-align: right;
|
||
}
|
||
.list input{
|
||
flex:1;
|
||
}
|
||
.list {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
padding: 30rpx 0;
|
||
padding-left: 0;
|
||
border-bottom: 1rpx solid #f2f2f2;
|
||
margin: 0 15px;
|
||
}
|
||
|
||
</style>
|