jobslink-user-clent/pages/projectInfo/step/second.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>