wangzong/pages/users/user_money/zhuanzhang.vue

<template>
<view class="zhuanzhang">
	<view class="title">
		可转账金额（元）
	</view>
	<view class="num">
		{{now_money}}
	</view>
	<view class="form">
		<view class="title">
			提现金额
		</view>
		<view class="">
			<view class="money">
				<text>￥</text>
				<input type="digit" class="moneyInput" v-model="form.money" placeholder="请输入转账金额"/>
			</view>
			<view class="money">
				<input type="number" v-model="form.account" placeholder="请输入对方账号"/>
			</view>
			<view class="money">
				<input type="number" v-model="form.phone" placeholder="请输入手机号"/>
			</view>
			<view class="money codeContent">
				<input v-model="form.code" class="codeInput" placeholder="请输入验证码"/>
				<view class="codeBtn" @click="getCodeHandle" v-if="canClick">获取验证码</view>
				<view class="codeBtn"  v-if="!canClick">{{timeNum}}s后再次获取</view>
			</view>
		
		</view>
	</view>
	<view class="submitBtn" @click="submitHandle">
		确认转账
	</view>
</view>
</template>

<script>
import {
	setCode,zhuanzhangApi,getUserInfo
} from '@/api/user.js'
export default{
	data(){
		return{
			form:{
				money:null,
				account:null,
				phone:null,
				code:null,
			},
			timer:null,
			timeNum:60,
			canClick:true,
			now_money:0,
			currentUserPhone:null
		}
	},
	beforeDestroy() {
		clearInterval(this.timer);
	},
	onLoad() {
		this.getUserInfo()
	},
	methods:{
		getUserInfo() {
			let that = this;
			getUserInfo().then(res => {
				that.now_money = res.data.now_money;
				that.currentUserPhone = res.data.phone
			
			});
		},
		getCodeHandle(){
			if(!this.form.phone){
				uni.showToast({
					title: '请输入手机号码',
					icon: 'none'
				})
				return;
			}
			let reg = /^1[3-9]\d{9}$/
			if(!reg.test(this.form.phone)){
				uni.showToast({
					title: '请输入正确的手机号码',
					icon: 'none'
				})
				return;
			}
			setCode({phone:this.currentUserPhone}).then(res => {
				uni.showToast({
					title: res.message,
					icon: 'none'
				})
				this.timeNum = 60;
				this.canClick = false;
				this.timer = setInterval(()=>{
					if(this.timeNum==0){
						clearInterval(this.timer);
						this.canClick = true;
					}else{
						this.timeNum--;
					}
				},1000)
			})
			
		},
		submitHandle(){
			if(!this.form.money){
				uni.showToast({
					title: '请输入转账金额',
					icon: 'none'
				})
				return;
			}
			if(!this.form.account){
				uni.showToast({
					title: '请输入对方账号',
					icon: 'none'
				})
				return;
			}
			if(!this.form.phone){
				uni.showToast({
					title: '请输入手机号码',
					icon: 'none'
				})
				return;
			}
			let reg = /^1[3-9]\d{9}$/
			if(!reg.test(this.form.phone)){
				uni.showToast({
					title: '请输入正确的手机号码',
					icon: 'none'
				})
				return;
			}
			let params={
				phone:this.form.phone,
				from_account:this.form.account,
				sms_code:this.form.code,
				money:this.form.money
			}
			zhuanzhangApi(params).then(res=>{
				console.log(res,"00")
				this.getUserInfo()
				uni.showToast({
					title:res.message,
					icon: 'none'
				})
				
			}).catch((res)=>{
				console.log(res)
				uni.showToast({
					title: res.message,
					icon: 'none'
				})
			})
			
			
		},
	}
}
</script>

<style lang="scss" scoped>
.zhuanzhang{
	min-height: calc(100vh);
	background: #F5F5F7;
	padding:34rpx 31rpx;
	.title{
		font-weight: 400;
		font-size: 30rpx;
		color: #333333;
	}
	.num{
		margin-top:39rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		font-size: 60rpx;
		color: #222222;
	}
	.form{
		
		background: #FFFFFF;
		border-radius: 20rpx;
		padding:36rpx 30rpx;
		.title{
		
			font-family: Alibaba PuHuiTi;
			font-weight: 400;
			font-size: 30rpx;
			color: #09090B;
		}
		.money{
			padding:30rpx 0;
			border-bottom: 1px solid #EAEAEA;
			position: relative;
			input{
				font-size: 28rpx;
			}
			text{
				position: absolute;
				left:0;
				top:30rpx;
				font-weight: 400;
				font-size: 30rpx;
				color: #09090B;
			}
			.moneyInput{
				padding-left: 40rpx;
			}
		}
		.codeContent{
			display: flex;
			align-items: center;
			.codeInput{
				flex:1;
			}
			.codeBtn{
				
				font-weight: 400;
				font-size: 30rpx;
				color: #116636;
			}
		}
	}
	.submitBtn{
		margin:40rpx 54rpx;
		background: linear-gradient(-90deg, #89B929, #116636);
		border-radius: 50px;
		padding:36rpx 0;
		font-weight: 500;
		font-size: 30rpx;
		color: #FFFFFF;
		text-align: center;
	}
}
</style>