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 (obj.num * 1 > obj.money * 1) {
				return this.$api.msg('可转账金额不足!');
			}
			if (obj.to_user_account == '') {
				return this.$api.msg('请输入收款人账户!');
			}
			if (obj.to_uid == '') {
				return this.$api.msg('请输入转账金额!');
			}
				trade({
					type: 'brokerage_price',
					num: obj.num,
					to_user_account: obj.to_user_account,
					to_uid: obj.to_uid
				}).then(res => {
					uni.showToast({
						title: '转账成功',
						duration: 2000
					});
				}).catch(err =>{
					console.log(err)
				});
		},
		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>