newyqg/pages/collection/zfb.vue

<template>
	<view class="content">
		<view class="box">
			<view class="item top">
				<text>真实姓名</text>
				<input type="text" v-model="name" value="" placeholder="请输入真实姓名" />
			</view>
			<view class="item">
				<text>支付宝账号</text>
				<input type="text" v-model="id" 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 { orderData, getUserInfo } from '@/api/user.js';
import { mapState, mapMutations } from 'vuex';
import { auction,pay_list } from '@/api/wallet.js';
import { verify } from '@/api/login.js';
export default {
	computed: {
		...mapState('user', ['userInfo', 'orderInfo', 'hasLogin'])
	},
	data() {
		return {
			name: '',
			id: '',
			phone:'',
			countDown:0,//倒计时
			code:'',//验证码
			time:''
		};
	},
	watch: {
		// 监听倒计时
		countDown(i) {
			if (i == 0) {
				clearInterval(this.time);
			}
		}
	},
	onLoad() {
		pay_list().then(({data}) =>{
			if(data.zfb != ''){
				this.name = data.zfb.name
				this.id = data.zfb.payment
				this.phone = data.zfb.phone
			}
		})
	},
	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.id) {
				return this.$api.msg('请输入支付宝账号');
			}
			if (!obj.phone) {
				return this.$api.msg('请输入手机号码');
			}
			if (!obj.code) {
				return this.$api.msg('请输入验证码');
			}
			auction({
				type:2,
				name: obj.name,
				payment: obj.id,
				phone: obj.phone,
				captcha:obj.code
			})
				.then(e => {
					obj.$api.msg('修改成功');
				})
				.catch(e => {
					console.log(e);
				});
		},
	}
};
</script>

<style lang="scss">
page,
.content {
	height: 100%;
	padding: 0;
	margin: 0;
}
.top {
	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 {
			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>