<template>
<view>
<u-navbar title="收款账户" :border-bottom="false" :background="bgc" title-color='#fff' back-icon-color="#fff" title-size='36'
height='50'></u-navbar>
<view class="cont">
<view class="top_box">
<view class="tip">账户余额(元)</view>
<view class="txt">
{{userinfo.balance}}
</view>
<view class="tip">累计提现：{{userinfo.withDrawlAmount}}</view>
</view>
<view class="tit">
<view class="tit_line">
</view>
余额提现
</view>
<view class="input_box">
<view class="yuan">
￥
</view>
<view class="ipt">
<u-input v-model="money" placeholder='输入自定义金额' placeholder-style='font-size: 24rpx;'/>
</view>
<view class="altx" @click="all()">
全部提现
</view>
</view>
<view class="tit">
<view class="tit_line">
</view>
提现方式
</view>
<view class="pay_type">
<view class="type_box" @click="pay(0,'1')">
<view class="box_left">
<image src="https://api.ccttiot.com/smartmeter/img/static/unexnRfQ1HxdA3GuVgfX" mode=""></image>
<view class="text">
微信提现
</view>
</view>
<view class="box_right" :class="currentindex==0?'act1':''">
<span v-if="currentindex==0" style="color: #fff;"> <u-icon style="margin-top: 22rpx;" name="checkbox-mark" color="#fff" size="28"></u-icon> </span>
</view>
</view>
<!-- <view class="type_box" @click="pay(1,'2')">
<view class="box_left">
<image src="https://api.ccttiot.com/smartmeter/img/static/uRsKrUoCa4XXCKyIMTwb" mode=""></image>
<view class="text">
支付宝提现
</view>
</view>
<view class="box_right" :class="currentindex==1?'act1':''">
<span v-if="currentindex==1"> √</span>
</view>
</view> -->
<view class="type_box" v-for="(item,index) in infoList.BANK_CARD" :key="index" @click="pay(index+2,'3',item.accountNo)">
<view class="box_left">
<image :src="'http://bkaear.market.alicloudapi.com/banklogo/' + item.cardInfo.Icon" mode=""></image>
<view class="text">
{{item.cardInfo.bankName}}
</view>
</view>
<view class="box_right" :class="currentindex==index+2?'act1':''">
<span v-if="currentindex==index+2"> √</span>
</view>
</view>
</view>
<view class="btn" @click="sub()">
确认提现
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
bgc: {
backgroundColor: "#8883f0",
},
name:'',
idnum:'',
money:'',
infoList:{},
currentindex:0,
payType:1,
accountNo:'',
userinfo:{}
}
},
onShow() {
this.getinfo()
this.getuserinfo()
},
methods: {
getinfo(){
this.$u.get('/app/account' ).then((res) => {
if (res.code == 200) {
console.log(res)
this.infoList=res.data
}
})
},
pay(index,type,id){
this.currentindex=index
this.payType=type
if(type==3){
this.accountNo=id
}else{
this.accountNo=''
}
},
all(){
this.money=this.userinfo.balance
},
sub(){
if(this.money<20){
uni.showToast({
title: '提现金额不能低于20元',
icon: 'none',
duration: 2000
});
}else if (this.money>this.userinfo.balance){
uni.showToast({
title: '提现金额不能大于余额',
icon: 'none',
duration: 2000
});
}else{
let data ={
// payPassword:'123456',
money:this.money,
arrivalAmount:this.money,
serviceCharge:0,
channelId:this.payType,
accountNo:this.accountNo
}
this.$u.post('/app/bill/withdraw',data).then((res) => {
if (res.code == 200) {
this.getuserinfo()
uni.showToast({
title: '提现成功',
icon: 'none',
duration: 2000
});
}
})
}
},
getuserinfo() {
this.$u.get("/app/user/userInfo").then((res) => {
// this.$forceUpdate()
if (res.code == 200) {
this.userinfo=res.data
this.money = ''
// console.log(this.userinfo);
}
});
},
}
}
</script>
<style lang="scss" >
/deep/ .u-title{
padding-bottom: 22rpx;
}
/deep/ .u-icon__icon{
padding-bottom: 22rpx;
}
page{
background: #F7FAFE;
}
.cont{
display: flex;
// justify-content: center;
flex-wrap: wrap;
margin: 0 auto;
width: 634rpx;
.top_box{
padding: 28rpx 32rpx;
margin-top: 38rpx;
width: 634rpx;
height: 246rpx;
background: #8883F0;
border-radius: 28rpx 28rpx 28rpx 28rpx;
border-radius: 20rpx;
.tip{
font-weight: 400;
font-size: 28rpx;
color: #FFFFFF;
line-height: 38rpx;
}
.txt{
margin-top: 28rpx;
margin-bottom: 28rpx;
font-weight: 500;
font-size: 40rpx;
color: #FFFFFF;
line-height: 54rpx;
}
}
.tit{
margin-top: 38rpx;
display: flex;
flex-wrap: nowrap;
align-items: center;
font-weight: 500;
font-size: 28rpx;
color: #3D3D3D;
line-height: 38rpx;
.tit_line{
margin-right: 12rpx;
width: 4rpx;
height: 32rpx;
background: #8883F0;
border-radius: 0rpx 0rpx 0rpx 0rpx;
}
}
.input_box{
display: flex;
flex-wrap: nowrap;
align-items: center;
margin-top: 36rpx;
width: 634rpx;
height: 86rpx;
background: #FFFFFF;
box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42,130,228,0.1);
border-radius: 20rpx;
.yuan{
margin-left: 36rpx;
font-weight: 500;
font-size: 52rpx;
color: #8883F0;
line-height: 72rpx;
}
.ipt{
width: 60%;
.u-input::placeholder {
font-size: 20px;
color: red;
}
}
.altx{
display: flex;
align-items: center;
justify-content: center;
width: 158rpx;
height: 56rpx;
background: #FFFFFF;
box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.2);
border-radius: 12rpx 12rpx 12rpx 12rpx;
font-weight: 400;
font-size: 28rpx;
color: #8883F0;
line-height: 38rpx;
}
}
.pay_type{
.type_box{
width: 100%;
margin-top: 26rpx;
display: flex;
align-items: center;
flex-wrap: nowrap;
width: 634rpx;
height: 86rpx;
background: #FFFFFF;
box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42,130,228,0.1);
border-radius: 20rpx;
.box_left{
display: flex;
align-items: center;
flex-wrap: nowrap;
margin-left:22rpx ;
image{
width: 50rpx;
height: 50rpx;
}
.text{
margin-left: 30rpx;
font-weight: 400;
font-size: 32rpx;
color: #3D3D3D;
line-height: 44rpx;
}
}
.box_right{
display: flex;
align-items: center;
justify-content: center;
margin-left: auto;
margin-right: 34rpx;
width: 44rpx;
height: 44rpx;
border: 2rpx solid #444444 ;
border-radius: 50%;
}
.act1{
color: #FFFFFF;
background-color: #8883F0;
}
}
}
.btn{
margin-left: 20rpx;
display: flex;
align-items: center;
justify-content: center;
margin-top: 218rpx;
width: 590rpx;
height: 84rpx;
background: #8883f0;
border-radius: 40rpx;
font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
font-weight: 400;
font-size: 36rpx;
color: #FFFFFF;
}
}
</style>