CBB3/pages/user/detail/integral_gift.vue

<template>
	<view>
		
		<uni-nav-bar :border="false" statusBar left-icon="left" @clickLeft="utils.navigateBack()"  @clickRight="tapOpenLog" fixed title="趣豆转账">
			<view style="color: #ef4034;" slot="right">
				转账记录
			</view>
		</uni-nav-bar>
		
		<view style="height: 10px;"></view>
		
		<view class="topinfo fx-h fx-bc fx-ac">
			<view class="count">{{ user.integral || 0 }}</view>
			<view class="text">当前可用(趣豆)</view>
		</view>
		
		<view style="height: 10px;"></view>
	
		
		<view class="info-line">
			<view class="il-top">
				<text>转账类型</text> 
			</view>
			<view class="il-bot fx-r fx-bc fx-ac">
				<u-radio-group v-model="type">
					<u-radio activeColor="red" name="id" label="收款ID"></u-radio>
					<view style="width: 40px;"></view>
					<u-radio activeColor="red" name="phone" label="收款手机号"></u-radio>
				</u-radio-group>
			</view>
		</view>
		
		<view class="info-line" v-if="type == 'id'">
			<view class="il-top">
				<text>收款人id</text> 
			</view>
			<view class="il-bot">
				<input placeholder="收款人id" @input="tapGetId" type="number" v-model="uid" />
				<view class="name">{{ sendname }}</view>
			</view>
		</view>
		
		
		<view class="info-line" v-if="type == 'phone'">
			<view class="il-top">
				<text>手机号码</text> 
			</view>
			<view class="il-bot">
				<input placeholder="转账手机号码" @input="tapGetMobile" type="number" v-model="new_mobile" />
				<view class="name">{{ sendname }}</view>
			</view>
		</view>
		
		
		<view class="info-line">
			<view class="il-top">
				<text>转账金额</text>
			</view>
			<view class="il-code">
				<view class="etb-left">
					<input placeholder="请输入转账金额"  placeholder-class="placeholder-class" v-model="num" />
				</view>
				<!-- <view class="etb-right" @click="num = allMoney()">
					<text>全部</text>
				</view> -->
			</view>
		</view>
		
		<view class="info-line">
	
			
			<view class="update-btn"  @click="tapSubmit">
				<text>确认转账</text>
			</view>
			
			<view style="height: 10px;"></view>
		</view>
		
		
		
	<PayDialog ref="payDialog" @getPassword="getPassword"></PayDialog>
		
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import PayDialog from "@/components/ui-pay/payDialog.vue";
	export default {
		computed: mapState(['user','sysData']),
		components:{
			PayDialog
		},
		data() {
			return {
				num:'',
				type : "id",
				new_mobile : "",
				uid : "",
				sendname : "",
				data : {
					lv : 0
				}
			}
		},
		onLoad(options) {
			this.checkUserLogin({page:this,isLogion:false});
		},
		methods: {
			...mapMutations(['checkUserLogin']),
			
			tapGetId:function(ev){
				let id = ev.detail.value;
				if(id == "") {
					this.sendname = '';
					return;
				}
				this
					.request
					.post("userCkUserName",{uid : id,type : 2})
					.then(res => {
						if(res.code == 200) {
							this.sendname = res.data.name;
						} else {
							this.sendname = "";
						}
					});
			},
			
			
			tapGetMobile:function(ev){
				let mobile = ev.detail.value;
				if(!this.utils.isPoneAvailable(mobile)) {
					this.sendname = '';
					return;
				}
				this
					.request
					.post("userCkUserName",{mobile : mobile,type : 2})
					.then(res => {
						if(res.code == 200) {
							this.sendname = res.data.name;
						} else {
							//this.utils.Tip(res.msg);
						}
					});
				
			},
			
			tapOpenLog:function(){
				uni.navigateTo({ url:"integral_gift_log"});
			},
			
			
			/**
			 * 预计扣除
			 */
			getKc:function(){
				if(isNaN(this.num)) return "0.00";
				let val = this.utils.returnFloat(this.num * (this.data.lv / 100));
				return val;
			},
			/**
			 * 全部
			 */
			allMoney:function(){
				if(this.user.integral <= 0) return 0;
				let val = this.utils.returnFloat(this.user.integral * (this.data.lv / 100));
				return this.user.integral - parseFloat(val);
			},
			
			/**
			 * 提交数据
			 */
			tapSubmit:function(){
				
				if(this.new_mobile == '' && this.type == 'phone'){
					this.utils.Tip("请输入转账号码");
					return;
				}
				
				if(this.uid == '' && this.type == 'id'){
					this.utils.Tip("请输入转账id");
					return;
				}
				
				if(this.num <= 0 || this.num == ''){
					this.utils.Tip("请输入正确转账金额!");
					return;
				}
				if(parseFloat(this.num) > this.allMoney()){
					this.utils.Tip("转账金额超过剩余金额");
					return;
				}
				
				this.$refs['payDialog'].show();
			},
			
			getPassword : function(val){
				var password = val.password;
				this.utils.loadIng("提交中..");
				this
					.request
					.post("integralGive",
					{
							new_password	:	password,
							new_mobile		:	this.new_mobile,
							num				:	this.num,
							uid 			: 	this.uid,
							type			:	this.type
						})
					.then(res=>{
						uni.hideLoading();
						if(res.code == 200) {
							this.utils.Tip(res.msg);
							setTimeout(function(){ uni.navigateBack();},1000);
						}else{
							this.utils.Tip(res.msg);
							this.$refs['payDialog'].cleanNum();
						}
					}).catch(function(){
						uni.hideLoading();
						this.utils.Tip("网络错误，请稍后尝试");
					});
			}
			
		},

	}
</script>


<style>
	page {
		background: #F5F5F5;
	}

	#box {
		padding-top: 90px;
		z-index: -1;
	}
	
	.topinfo{
		    background: #fff;
			padding: 40rpx 0;
			.count{
				background-size: 100%;
				font-size: 24px;
				color: #303133;
				font-weight: 700;
				background-repeat: no-repeat;
				background-position: 50%;
			}
			.text{
				color: #909399;
				font-size: 18px;
			}
		
	}

	.info-line {
		min-height: 80px;
		padding: 0 15px;
		background-color: #fff;
		border-top: 1px #f5f5f5 solid;
	}

	.il-top {
		color: #ef4034;
		font-size: 14px;
		margin-top: 10px;
	}

	.il-bot {
		margin-top: 10px;
		position: relative;
	}

	.il-bot input {
		width: 100%;
		height: 100%;
	}
	.il-bot .name{position: absolute;right: 10px;top: 0px;}

	.update-btn {
		width: 90%;
		height: 40px;
		text-align: center;
		line-height: 40px;
		margin: 30px auto;
		background: #ef4034;
		color: #fff;
		border-radius: 100px;
		font-size: 16px;
	}

	.il-code {
		display: flex;
		align-items: center;
		margin-top: 10px;
	}

	.il-code input {
		width: 50%;
		height: 100%;
		font-size: 13px;
	}

	.ilc-btn {
		width: 90px;
		height: 30px;
		text-align: center;
		line-height: 30px;
		margin-left: auto;
		font-size: 12px;
		background: #ef4034;
		color: #fff;
		border-radius: 100px;
	}

	.ilc-no-show {
		width: 90px;
		height: 30px;
		text-align: center;
		line-height: 30px;
		margin-left: auto;
		font-size: 12px;
		background: #eee;
		color: #999;
		border-radius: 100px;
	}
	
	.etb-left{width:80%;height:100%}
	.placeholder-class{color:#7e7e7e;font-size:13px;font-weight:400}
	.etb-left input{width:100%;height:100%;color:#484747;font-size:22px;font-weight:600}
	.etb-right{margin-left:auto;color:#2d2438;font-size:13px}
	
	.tip{font-size: 14px;padding: 10px 0;color: #ef4034;}
	.tip-info{padding: 5px 0;}
	.tip-info .label{color: #000;font-weight: bold;}
	.tip-info .money{color: orangered;}
</style>