<template>
	<view class="page" style="overflow-y: scroll;">
		<view class="box" style="margin-top: 0;">
			<view class="title">到账用户手机</view>
			<view class="searchbox">
				<input type="number" placeholder="请输入到账用户手机号" class="fillTel" @input="enterphone" />
				<view class="searchbtn" @click='search'>
					<image src="../../static/tel.png" mode="widthFix" class="icon" />查找
				</view>
			</view>
		</view>
		<view class="box" v-if="userinfo!=''">
			<view class="title">到账用户信息</view>
			<view class="userbox">
				<image :src="userinfo.avatar" mode="widthFix" class="avator" />
				<text>{{userinfo.nickname}}</text>
			</view>
		</view>
		<view class="box" v-else>
			<view class="title">到账用户信息</view>
			<view class="userbox">
				<image src="../../static/zhuanzhang.png" mode="widthFix" class="avator" />
				<text>未找到该用户</text>
			</view>
		</view>
		
		<view class="box">
			<view class="title">转账金额</view>
			<view class="fillArea">
				<text>¥</text>
				<input class="fillmoney" @input="emtermoney" type="digit">
			</view>
			<view class="tipsmoney">当前账户余额{{userinfok.money}}元</view>
		</view>
		<!-- 手机号验证码 -->
		<!-- <view class="loginboxitem flex">
			<view class="boxitemleftkk">
				手机号
			</view>
			<view class="boxitemright">
				<input type="number" value="" placeholder="请输入手机号" placeholder-class="enter" @input="enterphoneuser" />
			</view>
		</view> -->
		<view class="loginboxitem flextwo">
			<view class="flex">
				<view class="boxitemleftkk">
					验证码
				</view>
				<view class="boxitemright yanzhengk">
					<input type="text" value="" placeholder="请输入验证码" placeholder-class="enter" @input="enteryan" />
				</view>
			</view>
			<picyan @picname="getpic"></picyan>
			
		</view>
		
		<view class="boxkk">
			<view class="title">转账说明：</view>
			<textarea name="" id="" cols="30" rows="10" class="wordArea" placeholder="转账说明"></textarea>
		</view>
		<view class="submit" @click="zhuanzhang">转账</view>
	</view>
</template>

<script>
	import app from "../../App.vue";
	import picyan from "../../components/picyan/picyan.vue";
	export default {
		data() {
			return {
				phone: '',
				userinfo:'',
				money:'',
				userinfok:'',
				userphone:'',
				code:'',
				rangenum:''
				
			}
		},
		onLoad(){
			this.getuserinfo()
		},
		methods: {
			getpic(e) {
				console.log('我是子组件的值', e);
				this.rangenum = e
			
			},
			enterphone(e) {
				this.phone = e.detail.value
			},
			// 获取用户信息
			getuserinfo() {
				let that = this;
				var url = 'member/index';
				var params = {
			
				}
				console.log('7766554', params)
				app.post(url, params).then((res) => {
					console.log(res);
					that.userinfok = res.data.data;
					
			
			
				}).catch((err) => {
			
				})
			},
			emtermoney(e) {
				var money;
				if (/^(\d?)+(\.\d{0,2})?$/.test(e.detail.value)) { //正则验证，提现金额小数点后不能大于两位数字
					money = e.detail.value;
				} else {
					money = e.detail.value.substring(0, e.detail.value.length - 1);
				}
				this.money = money
			},
			search() {
				let that=this;
				if (!(/^1[3456789]\d{9}$/.test(that.phone))) {
					wx.showToast({
						title: '请输入正确手机号',
						icon: 'none'
					})
					return false;
				}
				var url = 'member/get_user';
				var params = {
					mobile:that.phone
				}
				console.log('7766554', params)
				app.post(url, params).then((res) => {
					console.log(res);
					that.userinfo=res.data.data;
				}).catch((err) => {
					console.log(err)
					uni.showToast({
						title:err.msg,
						icon:'none'
					})
				
				})
			},
			
			// 输入验证码
			enteryan(e) {
				this.code = e.detail.value
			},
			zhuanzhang(){
				let that = this;
				if(that.phone==''){
					uni.showToast({
						title:'请输入手机号查找用户信息',
						icon:'none'
					})
					return false
				}
				
				
				if(that.money==''){
					uni.showToast({
						title:'请输入转账金额',
						icon:'none'
					})
					return false
				}
				if(that.code==''){
					uni.showToast({
						title:"请输入验证码",
						icon:'none'
					})
					return false
				}
				
				if(that.code!=that.rangenum){
					uni.showToast({
						title:'请输入正确的验证码',
						icon:'none'
					})
					return false;
				}
				var url = 'member/transfer';
				var params = {
					user_id:that.userinfo.id,
					money:that.money
				}
				console.log('7766554', params)
				app.post(url, params).then((res) => {
					console.log(res);
					uni.showToast({
						title:'转账成功',
						icon:"none"
					})
					setTimeout(function(){
					// uni.navigateBack({
					// 	checked:true
					// })
					let userinfo=JSON.stringify(that.userinfo)
					uni.navigateTo({
						url:'/pages/usercenter/transferDetails?userinfo='+userinfo+'&money='+that.money
					})
					},1500)		
							
				}).catch((err) => {
					console.log(err)
					uni.showToast({
						title:"err.msg",
						icon:"none"
					})		
				})
			},

		}
	}
</script>

<style>
	/* @import url('../../base/login'); */
	
	page {
		overflow-y: hidden;
	}
	.yanzhengk{
		width:170rpx;
	}
	
	.boxitemleftkk {
		color: #3D454C;
		font-size: 28rpx;
		width: 130rpx;
	}
	
	.next {
		width: 686rpx;
		height: 88rpx;
		background: #C29445;
		color: #fff;
		font-size: 32rpx;
		text-align: center;
		line-height: 88rpx;
		position: fixed;
		bottom: 14rpx;
		left: 32rpx;
	}
	page {
		background: #FEFEFE;
		padding: 32rpx 32rpx 0;
		box-sizing: border-box;
	}

	.title {
		font-size: 32rpx;
		font-family: PingFangHK-Regular, PingFangHK;
		font-weight: 600;
		color: rgba(8, 18, 31, 1);
	}

	.searchbox {
		height: 104rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid #EAEAEA;
		box-sizing: border-box;
	}

	.fillTel {
		width: 360rpx;
		font-size: 36rpx;
		font-family: PingFangHK-Regular, PingFangHK;
		font-weight: 400;
		color: rgba(189, 196, 206, 1);
		margin-right: ;
	}

	.searchbtn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 160rpx;
		height: 64rpx;
		border-radius: 8rpx;
		border: 1px solid rgba(255, 148, 23, 1);
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(255, 148, 23, 1);
	}

	.searchbtn .icon {
		width: 32rpx;
		margin-right: 16rpx;
	}

	.box {
		margin-top: 60rpx;
	}

	.userbox {
		width: 686rpx;
		height: 120rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 8rpx 24rpx 0px rgba(0, 0, 0, 0.06);
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		font-size: 32rpx;
		font-family: PingFangHK-Regular, PingFangHK;
		font-weight: 400;
		color: rgba(8, 18, 31, 1);
		margin-top: 32rpx;
		padding: 0 24rpx;
		box-sizing: border-box;
	}

	.avator {
		width: 72rpx;
		margin-right: 16rpx;
		border-radius: 50%;
	}

	.fillArea {
		height: 132rpx;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #EAEAEA;
	}

	.fillArea text {
		font-size: 72rpx;
		font-family: PingFangHK-Regular, PingFangHK;
		font-weight: 400;
		color: rgba(8, 18, 31, 1);
		margin-right: 16rpx;
	}

	.fillmoney {
		width: 400rpx;
		display: flex;
		align-items: center;
		font-size: 32rpx;
		font-family: PingFangHK-Regular, PingFangHK;
		font-weight: 400;
		color: rgba(8, 18, 31, 1);
	}

	.tipsmoney {
		font-size: 24rpx;
		font-family: PingFangHK-Regular, PingFangHK;
		font-weight: 400;
		color: rgba(189, 196, 206, 1);
		margin-top: 14rpx;
	}

	.wordArea {
		width: 100%;
		margin-top: 16rpx;
		height: 160rpx;
		font-size: 28rpx;
		font-family: PingFangHK-Regular, PingFangHK;
		font-weight: 400;
		color: rgba(61, 69, 76, 1);
	}

	.submit {
		width: 686rpx;
		height: 84rpx;
		background: rgba(194, 148, 69, 1);
		border-radius: 8rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 100rpx auto;
	}
</style>