xihaigou/pages/user/yuezz.vue

<template>
 	<view class="content">
 		<view class="content-money">
 			<view class="flex">
 				<view class="buttom">
 					<view class="icon">{{ userInfo.now_money | getMoneyStyle }}</view>
 					<text class="text">可转金额</text>
 				</view>
 			</view>
 		</view>
 		<view class="name" v-if="name != ''">
 			用户昵称：{{name}}
 		</view>
		<view class="item-wrap" style="padding: 0 20rpx;background-color: #fff;">
			<u-form ref="uForm" class="item">
				<u-form-item label-width='150' label="用户编号"><u-input type="text" v-model="card" @blur="userName"/></u-form-item>
				<u-form-item label-width='150' label="支付密码"><u-input type="password" v-model="password" /></u-form-item>
			</u-form>
		</view>
 		
 		<view class="row-box">
 			<view class="title">转账金额</view>
 			<view class="row">
 				<text class="tit">￥</text>
 				<input class="input" type="number" v-model="withdrawal" placeholder='转入金额' placeholder-class="placeholder" />
 				<view class="buttom" @click="withdrawal = userInfo.now_money">全部转账</view>
 			</view>
 		</view>
 		
 		<button class="add-btn up" :class="{'action':loding}" @click="!loding?confirm():''">转入</button>
 	</view>
 </template>
 
 <script>
 import { getMoneyStyle } from '@/utils/rocessor.js';
 import { getUserInfo,transfer,nickname } from '@/api/user.js';
 import { mapMutations,mapState } from 'vuex';
 export default {
 	filters: {
 		getMoneyStyle
 	},
 	data() {
 		return {
 			money: '0.00', //可提现金额
 			withdrawal: '', //提现金额
 			password:'',//支付密码
 			card:'',//转账卡号
 			name:'',
 			// #ifdef H5
 			weichatBsrowser: false,
 			// #endif
 			loding:false,
 		};
 	},
 	onLoad(options) {
 		// #ifdef H5
 		this.weichatBsrowser = uni.getStorageSync('weichatBrowser');
 		// #endif
 		this.dataUp();
 	},
 	computed: {
 		...mapState('user', ['userInfo']) 
 	},
 	methods: {
 		...mapMutations('user', ['setUserInfo', 'login']),
 		// 更新数据
 		dataUp(){
 			let obj = this;
 			getUserInfo({}).then((e) => {
 				obj.login();
 				// 保存返回用户数据
 				obj.setUserInfo(e.data);
 			}).catch((e) => {
 				console.log(e);
 			})
 		},
 		// 切换选中对象
 		tabRadio(e) {
 			this.type = e.detail.value;
 		},
 		userName() {
 			if(this.card != ''){
 				nickname({uid:this.card}).then(data => {
 					this.name = data.msg
 				}).catch(err => {
					this.$api.msg('请确认用户编号是否正确')
				})
 			}
 			console.log(this.card)
 		},
 		// 提交
 		confirm() {
 			let obj = this;
 			obj.loding = true;
 			if(obj.withdrawal == 0){
 				obj.loding = false;
 				uni.showModal({
 					title:"提示",
 					content:"转账金额不要为0"
 				})
 				return;
 			}
 			if(obj.card == obj.userInfo.uid){
 				obj.loding = false;
 				uni.showModal({
 					title:"提示",
 					content:"不要输入自己的用户编号"
 				})
 			}else{
 				
 				let data = {
 					to_uid:obj.card, //编号
 					pass: obj.password, //交易密码
 					merber: obj.withdrawal //金额
 				}
 				transfer(data)
 					.then(e => {
 						// 允许按钮点击
 						obj.loding = false;
 						// 初始化提现金额
 						obj.withdrawal = ''
 						uni.showToast({
 							title: '提交成功',
 							duration: 2000,
 							position: 'top'
 						});
 						obj.dataUp();
 					})
 					.catch(e => {
 						obj.$api.msg(e.msg)
 						obj.loding = false;
 						console.log();
 					});
 			}
 			
 		}
 	}
 };
 </script>
 
 <style lang="scss">
 page {
 	height: 100%;
 }
 .content-money {
 	padding: 30rpx 0;
 	background: #ffffff;
 }
 
.item{
 	padding: 0 $page-row-spacing;
 	background-color: #FFFFFF;
	
 }
 .flex {
 	background-color: #ffffff;
 	text-align: center;
 	margin: 0 30rpx;
 	border-radius: $border-radius-sm;
 	justify-content: center;
 	.buttom {
 		font-size: $font-lg;
 		width: 50%;
 	}
 	.interval {
 		width: 2px;
 		height: 60rpx;
 		background-color: #eeeeee;
 	}
 	.icon {
 		background-size: 100%;
 		font-size: 42rpx;
 		color: $font-color-dark;
 		font-weight: bold;
 		background-repeat: no-repeat;
 		background-position: center;
 	}
 	.text {
 		color: $font-color-light;
 	}
 }
 
 .row-box {
 	margin-top: 30rpx;
 	padding: 20rpx 30rpx;
 	background: #fff;
 	.title {
 		font-size: $font-base + 2rpx;
 		color: $font-color-dark;
 	}
 	.row {
 		display: flex;
 		align-items: center;
 		position: relative;
 		height: 80rpx;
 		.tit {
 			flex-shrink: 0;
 			width: 40rpx;
 			font-size: 30rpx;
 			color: $font-color-dark;
 		}
 		.input {
 			flex: 1;
 			font-size: 30rpx;
 			color: $font-color-dark;
 		}
 		.iconlocation {
 			font-size: 36rpx;
 			color: $font-color-light;
 		}
 
 		.buttom {
 			color: $base-color;
 			font-size: $font-base;
 		}
 	}
 }
 .add-btn {
 	background: $base-color;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	width: 690rpx;
 	height: 80rpx;
 	margin: 0 auto;
 	margin-top: 30rpx;
 	font-size: $font-lg;
 	border-radius: 10rpx;
 	color: #fff;
 	// box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
 }
 .name {
 	background: #fff;
 	padding: 30rpx;
 }
 .list {
 	padding-left: 30rpx;
 	margin-top: 30rpx;
 	background-color: #ffffff;
 	.box {
 		display: flex;
 		align-items: center;
 		width: 100%;
 		height: 120rpx;
 		border-bottom: 1px solid $border-color-light;
 		.icon {
 			font-size: 48rpx;
 			padding-right: 20rpx;
 			.icon-img {
 				height: 50rpx;
 				width: 50rpx;
 			}
 		}
 		.iconweixin1 {
 			color: #18bf16;
 		}
 		.iconzhifubao {
 			color: #08aaec;
 		}
 		.title-box {
 			flex-grow: 1;
 			text-align: left;
 			.title {
 				font-size: $font-base + 2rpx;
 				color: $font-color-base;
 			}
 			.node {
 				font-size: $font-sm;
 				color: $font-color-light;
 			}
 		}
 	}
 }
 /deep/ .uni-radio-input {
 	width: 45rpx;
 	height: 45rpx;
 }
 </style>