<template>
<view>
<uni-nav-bar :border="false" statusBar left-icon="left" @clickLeft="utils.navigateBack()" @clickRight="tapOpenLog" fixed title="趣豆转出">
</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>商城接收人uid</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("outTradeIntegral",
{
payment : password,
num : this.num,
uid : this.uid,
})
.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>