CBB3/pages/user/detail/brokerage_tx.vue

<template>
	<view>
		<uni-nav-bar :border="false" statusBar left-icon="left" @clickLeft="utils.navigateBack()"  @clickRight="tapOpenAdd" fixed title="兑换">
			<view style="color: #ef4034;" slot="right">
				兑换记录
			</view>
		</uni-nav-bar>
			<view class="exchange-top">
				<view class="exchange-bot">
					<view class="eb-win-pop" v-if="bank.length > 0">
						<view class="eb-top fx-r" @tap="tapChck(index)" v-for="(item,index) in bank">
							<view class="ebt-right fx-g1">
								<view>{{ item.bank_name }}({{bankVal(item.payment)}})</view>
							</view>
							<view class="select">
								<image v-if="navIndex == index " src="/static/img/radio_buttons_btn.png"></image>
								<image v-else src="/static/img/radio_buttons.png"></image>
							</view>
						</view>
					</view>
					<view v-else>
						<view class="bank-add" @tap="tapAddBank">请添加银行卡</view>
					</view>
				</view>
				
				<view class="topinfo fx-h fx-bc fx-ac" style="margin-top: 10px;">
					<view class="count">{{ money || 0 }}</view>
					<view class="text">当前可提(贷款)</view>
				</view>
				
				<view class="txinput">
					<view class="label">提现金额</view>
					<u--input
					    :placeholder="placeholder"
					    border="surround"
						type="number"
						v-model="num" 
					    clearable
					  ></u--input>
					  
					<view class="tx-iall">
						<view class="etb-right" v-if="isInteger" @click="num = ( parseInt(( ((money -freeze) < 0 ? 0 : (money -freeze))  / 100) * 100) )">
							<text>全部</text>
						</view>
						<view class="etb-right" v-else @click="num = (money - freeze)">
							<text>全部</text>
						</view> 
					</view> 
				</view>
				
				<view class="tip">
					
					
					<view class="input-item fx-r">
						<view class="label">当前兑换</view>
						<view class="fx-g1"></view>
						<view class="money">{{ ( isNaN(num) || num == '' ) ? '0.00' : utils.returnFloat(num) }}</view>
					</view>
					
					<view class="input-item fx-r">
						<view class="label">手续费</view>
						<view class="fx-g1"></view>
						<view class="money">{{ utils.removeTrailingZeros(tx) }}%</view>
					</view>
					
					<view class="input-item fx-r">
						<view class="label">预计扣除</view>
						<view class="fx-g1"></view>
						<view class="money">{{ dkMoney() }}</view>
					</view>
					
					
					<view class="input-item fx-r">
						<view class="label">到账金额</view>
						<view class="fx-g1"></view>
						<view class="money">{{ getMoney() }}</view>
					</view>
				</view>
				
				
			</view>
			
			<view class="exchange-btn select" v-if="isSure" @click="tapSubmit()">
				<text>立即兑换</text>
			</view>
		
			<view v-else class="exchange-btn2">{{ txCount > 0 ? ('已兑换' + txCount + '次' ) : '暂无兑换' }}</view>
			<PayDialog ref="payDialog" @getPassword="getPassword"></PayDialog>
			
			<view class="popwin fx-h fx-bc fx-ac" v-if="isPop">
				<view class="bg"></view>
				<view class="body fx-h fx-bc fx-ac">
					<view class="tips">
						<view class="title">温馨提醒</view>
						<view class="h1" v-if="max_money > 0">单笔兑换最高额度不能超过{{ utils.removeTrailingZeros(max_money) }}贷款。</view>
						<view class="h1" v-if="min_money > 0">单笔兑换最小额度不能低于{{ utils.removeTrailingZeros(min_money) }}贷款。</view>
						<view class="h1">兑换手续费{{ utils.removeTrailingZeros(tx) }}%</view>
						<view class="h1">每次只能发起兑换一次，兑换成功之后才能发起第二次。</view>
						<view class="h1"> {{ content }}</view>
					</view>
					<view class="btn" @tap="isPop = false">我已知晓</view>
				</view>
				
			</view>
			
	</view>
</template>

<script>
	import {mapState,mapMutations} from 'vuex';
	import PayDialog from "@/components/ui-pay/payDialog.vue";
	export default {
		computed: mapState(['user']),
		components:{
			PayDialog
		},
		data() {
			return {
				
				data : {},
				
				min_money : 0,//进行最小金额 (0 无限)
				max_money : 0,//提现最大金额  (0 无限)
				tx:"0",	//提现比例
				
				isPop:true,
				
				
				placeholder:"",
				title:"",
				
				content : "",
				money : 0,
				freeze:0,
				
				num:"",
				txCount : 0,
				navIndex:0,
				isSure:true,
				isInteger:false,
				unit:"scale",
				bank:[],
				form:{
					name	: "",
					account	: "",
					opening : ""
				}
			}
		},
		onLoad(options) {},
		onShow() {
			uni.showLoading({ title: '获取数据中..' });
			this
				.request
				.post("userBrokerageExchange",{type:this.type})
				.then(res=>{
					uni.hideLoading();
					if(res.code == 200) {
						this.content = res.data.text;//提现内容
						this.min_money = res.data.min_money;//提现最小金额
						this.max_money = res.data.max_money;//提现最大金额
						this.money = res.data.money;
						this.freeze = res.data.freeze;
						this.isSure = res.data.isTx;
						this.txCount = res.data.count;
						this.tx = res.data.tx;
						this.isInteger = res.data.is_integer == 1 ? true : false;
						this.placeholder = `还剩余${res.data.money}${this.title}`;
						this.unit = res.data.unit;
					}
				})
				.catch(err=>{
					uni.hideLoading();
					uni.showModal({title: '系统提示',content: '加载失败，返回在尝试',showCancel: false});
				});
				
				this
					.request
					.post("getBank")
					.then(res=>{
						if(res.code == 200) {
							this.bank = res.data
						} else {
							this.utils.Tip(res.msg);
						}
					})
					.catch(err=>{
						this.utils.Tip(res.msg);
					});
				
		},
		methods: {
			tapChck:function(index){
				this.navIndex = index;
			},
			
			dkMoney:function(){
				if(isNaN(this.num) || this.num == '') {
					return "0.00";
				}
				
				let v = this.utils.returnFloat(parseFloat(this.num) * (this.tx / 100));
				return v;
			},
			/**
			 * 获取金额
			 */
			getMoney:function(){
				if(isNaN(this.num) || this.num == '') {
					return "0.00";
				}
				let v = parseFloat(this.num) * (this.tx / 100);
				return this.utils.returnFloat(parseFloat(this.num) - v);
			},
			
			
			tapOpenAdd:function(){
				uni.navigateTo({url:"brokerage_tx_log?type=" + this.type});
			},
			/**
			 * 银行卡
			 */
			tapAddBank:function(){
				uni.navigateTo({
					url:"../bank/bank"
				});
			},
			/**
			 * 提交数据
			 */
			tapSubmit:function(){		
				if(this.num == '' || this.num == 0) {
					return this.utils.Tip("请输入兑换额度");
				}
				
				if( (this.min_money - 1) > this.num) {
					return this.utils.Tip("兑换额度不能少于:" + this.min_money);
				}
				
				if(parseFloat(this.num) > this.max_money ) {
					return this.utils.Tip("兑换额度不能大于:" + this.utils.removeTrailingZeros(this.max_money));
				}
				
				if( this.bank.length <= 0) {
					return this.utils.Tip("请添加银行卡在操作");
				}
				
				//this.getPassword({password:1234});
				this.$refs['payDialog'].show();
	
			},
			/**
			 * 密码
			 */
			getPassword:function(res){
				var password = res.password;
				
				var formData = {...this.form,
								num:this.num,
								bankId:this.bank[this.navIndex].id,
								type : this.type,
								password : password
							   };
				this.$refs['payDialog'].hideFun();			   
				this.utils.loadIng("提交中..");
				this
					.request
					.post("userSubBrokerage",formData)
					.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("网络错误，请稍后尝试");
					});
			},
			
			tapBZfb:function(id){
				uni.navigateTo({
					url:"/pages/user/bank/bank_edit?id=" + id
				})
			},
			
			bankVal:function(str){
				var reg = /^(\d{4})\d+(\d{4})$/;
				str = str.replace(reg, "$1 **** **** $2");
				return str;
			},
			bankZfbVal:function(str){
				console.log(str);
				var reg = /^(\d{4})\d+(\d{4})$/;
				str = str.replace(reg, "$1****$2");
				return str;
			}
		}
	}
</script>

<style lang="scss">
	page{background:#f5f5f5}
	.exchange-top{padding:10px;}
	.et-top{color:#2d2438;font-size:12px;margin-bottom: 20px;}

	/**银行卡**/
	.exchange-bot{width:100%;margin-top:10px;background-color:#fff;border-radius: 10px;}
	.etb-right{margin-left:auto;color:#2d2438;font-size:16px;color: #ef4034;}
	.eb-top{padding:10px 15px;height:50px;display:flex;align-items:center;border-bottom:1px #f5f5f5 solid}
	.eb-top .pvg image{width: 15px;height: 15px;}
	.eb-top .select image{width: 20px;height: 20px;}
	.bank-add{color:#ef4034;font-size: 14px;text-align: center;padding: 20px 0;}
	/**提现金额**/
	.txinput{margin-top:10px;background-color:#fff;border-radius: 10px;padding: 10px;}
	.txinput .label{font-size: 14px;margin-bottom: 10px;}
	.tx-iall{margin-top: 10px;}
	.tx-iall .etb-right{font-size:14px;}
	
	/**提示框**/
	.tip{margin-top:10px;background-color:#fff;border-radius: 10px;padding: 10px;}
	.tips{position: relative;background: #FDF6EC;padding: 8px 10px;border-radius: 6px;margin-bottom: 10px;}
	.tips .title{font-size: 14px;color: #f9ae3d;font-size: 14px;font-weight: bold;}
	.tips .h1{font-size: 12px;padding: 2px 0;color: #f9ae3d;}
	.input-item{padding: 2px 0;}
	.input-item .label{font-size: 14px;color: #000;}
	.input-item .money{color: #ef4034;font-size: 14px;}
	
	/**弹出框 **/
	.popwin{position:fixed;width: 100%;height: 100%;top: 0;left: 0;z-index: 88;}
	.popwin .bg{background: rgba(0, 0, 0, 0.5);height: 100%;width: 100%;position: absolute;left: 0;top: 0;}
	.popwin .body{padding: 20px;width: 80%;background: #fff;position: relative;border-radius: 8px;}
	.max-he{height: 60vh;}
	.popwin .btn{margin-top: 6px;border-radius: 4px;background: #ef4034;font-size:14px;color: #fff;width: 100px;text-align: center;padding: 6px 2px;}
	.popwin .btn.no{background: #f1f1f1;color: #ccc}
	
	
	.exchange-btn{width:90%;height:40px;text-align:center;line-height:40px;margin:30px auto;background:#ef4034;color:#fff;border-radius:100px;font-size:16px}
	.exchange-btn2{width:90%;height:40px;text-align:center;line-height:40px;margin:30px auto;background:#ccc;color:#fff;border-radius:100px;font-size:16px}
	
	
	.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;
			}
		
	}
	
</style>