CBB3/pages/user/detail/integral_sc.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">
				<input placeholder="文票账号" type="text" v-model="number" />
			</view>
		</view>
		
		
		<view class="info-line">
			<view class="il-top">
				<text>文票兑换(比例)</text> 
			</view>
			<view class="fx-r">
				<view class="il-bot" v-if="data.price == -1">
						加载中..
				</view>
				<view class="il-bot" v-else>
						{{ data.price }}趣豆/张
				</view>
				<view class="fx-g1"></view>
				<view class="il-bot" v-if="data.price > 0" style="font-size: 14px;">(可兑换{{ getMaxCount() }}张)</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>
		</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 {
				number : "",
				
				
				num:'',
				type : "id",
				new_mobile : "",
				uid : "",
				sendname : "",
				data : {
					price : -1
				}
			}
		},
		onLoad(options) {
			this.checkUserLogin({page:this,isLogion:false,fn:this.initView});
		},
		methods: {
			...mapMutations(['checkUserLogin']),
		
			initView:function(){
				this
					.request
					.get("integralTicketInit")
					.then(res=>{
						if(res.code == 200) {
							this.data = res.data;
						} else {
							this.utils.Tip(res.msg);
						}
					});
			},
			
			
			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);
						}
					});
				
			},
			
			getMaxCount:function(){
				let value = parseInt(this.user.integral / this.data.price);
				return value;
			},
			
			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.data.price < 0) {
					this.utils.Tip("兑换比例未加载完毕，请稍等!");
					return;
				}
				let maxValue = parseInt(this.user.integral / this.data.price);
				if(this.number == '' ){
					this.utils.Tip("请输入文票账号");
					return;
				}
				
				if(this.num <= 0 || this.num == ''){
					this.utils.Tip("请输入兑换张数");
					return;
				}
				//判断兑换数量
			
				if(parseInt(this.num) > maxValue){
					this.utils.Tip("兑换张数已经超过了");
					return;
				}
				
				this.$refs['payDialog'].show();
			},
			
			getPassword : function(val){
				var password = val.password;
				this.utils.loadIng("提交中..");
				this
					.request
					.post("integralTicket",
					{
							new_password	:	password,
							number		:	this.number,
							num				:	this.num
						})
					.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>