zhengyi/pages/user/transfer.vue

<template>
	<view class="container">
		<view class="top-two">
			<view class="count">{{money || 0}}</view>
			<view class="text">可转账佣金</view>
		</view>
		<view class="top-three">
			<view class="text">收款人账户</view>
				<input class="input" type="text" placeholder="请输入收款人账户" v-model="to_user_account"/>
		</view>
		<view class="top-three">
			<view class="text">收款人UID</view>
				<input class="input" type="number" placeholder="请输入收款人UID" v-model="to_uid"/>
		</view>
		<view class="top-four">
			<view class="text">转账数量</view>
			<view class="row">
				<text class="tit">￥</text>
				<input class="input" type="number" placeholder="请输入转账数量" v-model="num"/>
			</view>
		</view>
			<view class="btn" @click="sub">提交申请</view>
	</view>
</template>

<script>
	import { trade, getSpreadCount } from '@/api/user.js'
export default {
	data () {
		return {
			num: '',//转账金额
			to_user_account: '',//收款人账户
			to_uid: '',//收款人UID
			money: 0,
		}
	},
	onLoad() {
		this.getNum()
	},
	methods: {
		nav (url) {
			uni.navigateTo({
				url
			})
		},
		sub() {
			let obj = this
			if(obj.num == '') {
				return this.$api.msg('请输入收款人账户!')
			}
			if(to_user_account == '') {
				return this.$api.msg('请输入收款人账户!')
			}
			if(obj.to_uid == '') {
				return this.$api.msg('请输入转账金额!')
			}
			if( +obj.num > +obj.money)
			trade({
				type: 'd',
				num: obj.num,
				to_user_account: obj.to_user_account,
				to_uid: obj.to_uid
			}).then( res => {
				
			})
		},
		getNum() {
			getSpreadCount({}, 3).then(({ data }) => {
				console.log(data);
				this.money = +data.count;
			});
		}
	}
}
</script>

<style lang="scss">
	.container {
		background-color: #F2F3F5;
		width: 750rpx;
		// height: 1334rpx;
		.top-two {
			padding-bottom: 20rpx;
			background-color: #fff;
			.count {
				text-align: center;
				height: 50rpx;
				font-size: 42rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
				line-height: 110rpx;
				margin: 0 auto;
			}
			.text {
				width: 140rpx;
				// height: 26rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;
				margin: 0 auto;
				margin-top: 50rpx;
			}
		}
		.top-three {
			margin-top: 20rpx;
			height: 160rpx;
			background-color: #fff;
			.text {
				width: 150rpx;
				height: 29rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 110rpx;
				margin-left: 25rpx;
			}
			.input {
				margin-top: 65rpx;
				margin-left: 25rpx;
			}
		}
		.top-four {
			margin-top: 20rpx;
			height: 160rpx;
			background-color: #fff;
			.text {
				width: 150rpx;
				height: 29rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 110rpx;
				margin-left: 25rpx;
			}
			.row {
				display: flex;
				// justify-content: center;
				margin-top: 65rpx;
				margin-left: 20rpx;
				.tit {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #333333;
					margin-right: 10rpx;
				}
			}
		}
		.btn {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 674rpx;
			height: 90rpx;
			background: linear-gradient(-35deg, #F8DD4F, #FBEB77);
			border-radius: 44rpx;
			margin-top: 138rpx;
			margin-left: 38rpx;
		}
	}
</style>