newyqg/pages/collection/bank.vue

<template>
	<view class="content">
		<view class="box">
			<view class="item ">
				<text>姓名</text>
				<input type="text" v-model="name" value="" placeholder="请输入真实姓名" />
			</view>
			<view class="item top">
				<text>银行卡号</text>
				<input type="text" v-model="id" value="" placeholder="请输入银行卡账号" />
			</view>
			<view class="item">
				<text>所属银行</text>
				<input type="text" v-model="idName" value="" placeholder="请输入银行" />
			</view>
			<view class="item">
				<text>所属支行</text>
				<input type="text" v-model="bankname" value="" placeholder="请输入所属支行" />
			</view>
			<view class="item">
				<text>手机号</text>
				<input type="text" v-model="phone" value="" placeholder="请输入手机号" />
			</view>
			<view class="item">
				<text>验证码</text>
				<view class="login_name flex">
					<input class="uni-input" v-model="code" focus placeholder="请输入验证码" />
					<view class="code" @click="verification">{{ countDown == 0 ? '验证码' : countDown }}</view>
				</view>
			</view>
		</view>
		<view class="button" @click="confirm()">确认</view>
	</view>
</template>

<script>
import { auction, pay_list } from '@/api/wallet.js';
import { orderData, getUserInfo } from '@/api/user.js';
import { mapState, mapMutations } from 'vuex';
import { verify } from '@/api/login.js';
export default {
	computed: {
		...mapState('user', ['userInfo', 'orderInfo', 'hasLogin'])
	},
	data() {
		return {
			name: '',
			id: '',
			idName: '',
			phone: '',
			bankname: '',
			countDown:0,//倒计时
			code:'',//验证码
			time:''
		};
	},
	watch: {
		// 监听倒计时
		countDown(i) {
			if (i == 0) {
				clearInterval(this.time);
			}
		}
	},
	onLoad() {
		pay_list().then(({ data }) => {
			if (data.bank != '') {
				this.name = data.bank.name;
				this.id = data.bank.payment;
				this.phone = data.bank.phone;
				this.idName = data.bank.bank;
				this.bankname = data.bank.bank_name;
			}
		});
	},
	methods: {
		...mapMutations('user', ['setUserInfo', 'setOrderInfo']),
		//发送验证码
		verification() {
			let obj = this;
			if (!this.userInfo.phone) {
				this.$api.msg('请绑定手机号');
				return;
			}
			// 判断是否在倒计时
			if (obj.countDown > 0) {
				return false;
			} else {
				obj.countDown = 60;
				obj.time = setInterval(() => {
					obj.countDown--;
				}, 1000);
				//调用验证码接口
				verify({
					phone: obj.userInfo.phone,
					type: ''
				})
					.then(({ data }) => {})
					.catch(err => {
						console.log(err);
					});
			}
		},
		confirm() {
			let obj = this;
			if (!obj.name) {
				return this.$api.msg('请输入提款人姓名');
			}
			if (!obj.idName) {
				return this.$api.msg('请输入所属银行');
			}
			if (!obj.id) {
				return this.$api.msg('请输入银行卡号');
			}
			if (!obj.phone) {
				return this.$api.msg('请输入手机号码');
			}
			if (!obj.bankname) {
				return this.$api.msg('请输入所属支行');
			}
			if (!obj.code) {
				return this.$api.msg('请输入验证码');
			}
			auction({
				type: 3,
				name: obj.name,
				bank: obj.idName,
				payment: obj.id,
				phone: obj.phone,
				bank_name: obj.bankname,
				captcha:obj.code
			}).then(e => {
				obj.$api.msg('修改成功');
			});
		}
	}
};
</script>

<style lang="scss">
page,
.content {
	height: 100%;
	padding: 0;
	margin: 0;
}
.top {
	border-top: 1rpx solid #f3f3f3;
	border-bottom: 1rpx solid #f3f3f3;
}
.box {
	background: #ffffff;
	margin: 20rpx 0 70rpx 0;
	.item {
		display: flex;
		align-items: center;
		text {
			margin: 0 40rpx 0 25rpx;
			width: 150rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #333333;
			line-height: 100rpx;
		}
		input {
			width: 500rpx;
			height: 100rpx;
			display: inline-block;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #999999;
			line-height: 100rpx;
		}
		.uni-input {
			text-align: left;
			width: 325rpx;
			font-size: 28rpx !important;
		}
		.login_name {
			color: #333333;
		}
		.code {
			color: #db292b;
			font-size: 23rpx;
			border-left: 1px solid #eeeeee;
			width: 150rpx;
			flex-shrink: 0;
			text-align: center;
		}
	}
}
.button {
	text-align: center;
	width: 560rpx;
	height: 80rpx;
	background: #fd3b39;
	border-radius: 40rpx;
	font-size: 30rpx;
	font-family: PingFangSC;
	font-weight: 500;
	color: #ffffff;
	line-height: 80rpx;
	margin: 0 auto;
}
</style>