<!--
|
* @Author: 小明丶
|
* @Date: 2019-10-24 15:13:33
|
* @LastEditors: 小明丶
|
* @LastEditTime: 2019-11-08 15:43:18
|
* @Description:
|
-->
|
<template>
|
<div class="withdrawals-box">
|
<v-navbar title="提现"></v-navbar>
|
<div class="zfb-box">
|
<div class="left">
|
<p>提现到</p>
|
</div>
|
<div class="middle">
|
<i class="iconfont iconzhifubao"></i>
|
</div>
|
<div class="right">
|
<p v-if="sta == 1" style="color:#333333;font-size:14px;margin-bottom:5px;">支付宝账号</p>
|
<p
|
v-if="sta == 1"
|
style="color:#999999;font-size:14px;"
|
>{{this.userNumber}}</p>
|
<p
|
v-if="sta == 2"
|
style="color:#999999;font-size:14px;margin-top:10px"
|
@click="showPopup"
|
>请绑定支付宝账号</p>
|
</div>
|
</div>
|
<van-popup
|
v-model="show"
|
@close="aferClose"
|
class="clearfix"
|
style="width:280px;height:280px;"
|
>
|
<div class="payCode" style="width: 280px;height: 170px;position: relative;">
|
<van-icon name="cross" size="20px" style="position: absolute;right:10px;top:10px;color:#cccccc" @click="close" color="#CCCCCC"/>
|
<img src="../../../../static/img/back.png" style="width:280px;height:170px">
|
<img class="myimg" :src="qrCode" style="width: 110px;height: 110px; position: absolute;
|
top: 45px;
|
left: 85px;
|
z-index: 1000;"/>
|
</div>
|
<div class="prod" style="width: 280px;height: 110px;text-align: center;background-color: white;z-index: 1000;">
|
<p>0.01元</p>
|
<p>请使用支付宝扫描并进行支付</p>
|
<p>红包金额将提现至该支付宝账户</p>
|
</div>
|
</van-popup>
|
<van-popup
|
v-model="showTwo"
|
@close="aferClose"
|
style="width:200px;height:200px;"
|
>
|
<van-icon name="cross" size="20px" style="position: absolute;right:10px;top:10px;color:#cccccc" @click="closeTwo" color="#CCCCCC"/>
|
<p style="text-align:center;margin-top:55px;"><van-icon name="checked" size="56px" color="#896edb"/></p>
|
<p style="font-size:18px;font-weight:550;margin-top:10px;text-align:center">提现成功</p>
|
</van-popup>
|
<div class="money-box">
|
<div class="tit">
|
<p>提现金额</p>
|
</div>
|
<div class="input-box">
|
<span>￥</span>
|
<van-field
|
v-model="value"
|
placeholder="请输入提现金额"
|
style="width:70%;display:inline-block;margin-left:30px;font-size:16px;"
|
:border="false"
|
maxlength="10"
|
/>
|
<span @click="allWithd">全部提现</span>
|
</div>
|
<div class="yue">
|
<p>
|
<span>账户余额</span>
|
<span>￥{{this.balanceAmount}}</span>
|
<span>(余额不足10元无法提现)</span>
|
</p>
|
</div>
|
</div>
|
<van-button
|
v-if="balanceAmount>10"
|
round
|
type="info"
|
color="#896EDB"
|
style="width:86%;margin-top:60px;margin-left:7%;background:#896EDB;color:#fff;border: .02rem solid rgb(137, 110, 219);"
|
@click="getWidthrawals"
|
>立即提现</van-button>
|
<van-button
|
v-else
|
disabled
|
round
|
type="info"
|
color="#896EDB"
|
style="width:86%;margin-top:60px;margin-left:7%;background:#896EDB;color:#fff;border: .02rem solid rgb(137, 110, 219);"
|
@click="getWidthrawals"
|
>立即提现</van-button>
|
<p class="notes">注：提现单笔限额为1000元，每日最多可提现3次。</p>
|
</div>
|
</template>
|
<script>
|
import Vue from 'vue';
|
import QRCode from "qrcode";
|
//import { setInterval } from 'timer';
|
import { Notify } from 'vant';
|
import { Icon } from 'vant';
|
|
Vue.use(Icon);
|
Vue.use(Notify);
|
export default {
|
data() {
|
return {
|
qrCode: "",
|
params: {}, //路由接收的参数
|
show: false, //弹出层控制
|
showTwo:false,
|
payQrCodeUrl: "",
|
value: "",
|
aliAccount:'',
|
timerTwo:'',//轮训定时器
|
balanceAmount:'',
|
sta:0,
|
userNumber:'',
|
};
|
},
|
created() {
|
this.$api.redPacketInit().then((res)=>{
|
console.log(res)
|
this.balanceAmount = res.body.balanceAmount
|
this.userNumber = res.body.aliAccount
|
if(res.body.aliAccount){
|
this.sta = 1
|
}else{
|
this.sta = 2
|
}
|
})
|
// this.$api.redPacketBindAliInfo().then(res => {
|
// console.log(1);
|
// this.payQrCodeUrl = res.body.payQrCodeUrl;
|
// let url = res.body.payQrCodeUrl;
|
// console.log(url);
|
// QRCode.toDataURL(
|
// url,
|
// {
|
// margin: 1,
|
// width: 100
|
// },
|
// (err, url) => {
|
// //if (err) console.error(err);
|
// this.qrCode = url;
|
// console.log(this.qrCode);
|
|
// }
|
// );
|
// });
|
},
|
mounted() {
|
//console.log(this.$route.params)
|
this.params = this.$route.params;
|
},
|
updated(){
|
window.onresize
|
},
|
beforeDestroy() {
|
clearInterval(this.timerTwo);
|
this.timerTwo = null;
|
},
|
methods: {
|
close(){
|
clearInterval(this.timerTwo)
|
this.timerTwo = ''
|
this.show = false;
|
},//绑定支付宝弹出层关闭按钮
|
closeTwo(){
|
this.showTwo = false
|
},//提现成功关闭按钮
|
aferClose(){
|
clearInterval(this.timerTwo)
|
this.timerTwo = ''
|
this.show = false;
|
},//支付宝绑定弹出层关闭后执行的事件
|
getWidthrawals() {
|
if (this.value <= 10) {
|
Notify({ type: "primary", message: "提现金额需大于10元" });
|
} else if(this.value >= 1000){
|
Notify({ type: "primary", message: "提现金额需小于1000元" });
|
}else {
|
this.$api
|
.redPacketExpend({
|
amount: this.value
|
})
|
.then(res => {
|
console.log(res);
|
if(res.errMsg=='操作成功'){
|
this.showTwo = true
|
this.$api.redPacketInit().then((res)=>{
|
this.balanceAmount = res.body.balanceAmount
|
})
|
}
|
});
|
}
|
}, //提现
|
allWithd() {
|
this.value = this.balanceAmount;
|
}, //全部提现
|
onClickLeft() {
|
this.$router.go(-1);
|
}, //返回按钮
|
showPopup() {
|
this.$api.redPacketBindAliInfo().then(res => {
|
console.log(1);
|
this.payQrCodeUrl = res.body.payQrCodeUrl;
|
let url = res.body.payQrCodeUrl;
|
console.log(url);
|
QRCode.toDataURL(
|
url,
|
{
|
margin: 1,
|
width: 100
|
},
|
(err, url) => {
|
//if (err) console.error(err);
|
this.qrCode = url;
|
console.log(this.qrCode);
|
|
}
|
);
|
});
|
this.show = true;
|
this.timerFun();
|
}, //弹出层控制
|
timerFun(){
|
var _this = this
|
this.timerTwo = setInterval(()=>{
|
_this.$api.redPacketInit().then((res)=>{
|
if(res.body.aliAccount){
|
clearInterval(_this.timerTwo);
|
_this.timerTwo = ''
|
_this.show = false
|
Notify({ type: "primary", message: "绑定成功" });
|
_this.userNumber = res.body.aliAccount
|
_this.sta = 1
|
return
|
}else{
|
console.log('未清除')
|
//clearInterval(this.timerTwo);
|
//this.show = false
|
//Notify({ type: "primary", message: "绑定失败，请稍后再试" });
|
//window.location.reload()
|
}
|
},
|
err=>{
|
err,clearInterval(_this.timerTwo);
|
})
|
},10000)
|
},
|
}
|
};
|
</script>
|
<style lang="less" scoped>
|
.withdrawals-box {
|
& {
|
|
background-color: #f0f1f3;
|
height: 100vh;
|
}
|
.clearfix{
|
*zoom: 1;
|
}
|
.clearfix:after {
|
clear: both;
|
display: block;
|
visibility: hidden;
|
height: 0;
|
content: ".";
|
}
|
.zfb-box {
|
height: 60px;
|
width: 94%;
|
background-color: white;
|
border-radius: 3px;
|
margin-left: 3%;
|
margin-top: 20px;
|
display: flex;
|
.left {
|
width: 30%;
|
box-sizing: border-box;
|
padding: 21px 0 23px 13px;
|
|
p {
|
color: #333333;
|
font-size: 18px;
|
font-weight: Bold;
|
text-align: left;
|
}
|
}
|
.middle {
|
width: 10%;
|
box-sizing: border-box;
|
padding: 12px 0 12px 0;
|
i {
|
font-size: 36px;
|
color: #00a9f2;
|
}
|
}
|
.right {
|
width: 60%;
|
box-sizing: border-box;
|
padding: 15px 0 0 10px;
|
}
|
}
|
.money-box {
|
width: 94%;
|
background-color: white;
|
margin-left: 3%;
|
height: 145px;
|
margin-top: 20px;
|
border-radius: 3px;
|
.tit {
|
height: 50px;
|
box-sizing: border-box;
|
padding: 18px 0 17px 13px;
|
p {
|
color: #333333;
|
font-weight: bold;
|
font-size: 16px;
|
}
|
}
|
.input-box {
|
border-bottom: 1px solid #eeeeee;
|
box-sizing: border-box;
|
padding-left: 13px;
|
padding-right: 12px;
|
vertical-align: middle;
|
position: relative;
|
span:nth-of-type(1) {
|
font-size: 18px;
|
display: inline-block;
|
position: absolute;
|
bottom: 15px;
|
z-index: 1000;
|
}
|
span:nth-of-type(2) {
|
font-size: 14px;
|
color: #896edb;
|
text-decoration: underline;
|
position: absolute;
|
bottom: 15px;
|
z-index: 1000;
|
}
|
}
|
.yue {
|
box-sizing: border-box;
|
padding-left: 13px;
|
padding-top: 16px;
|
p {
|
span:nth-of-type(1),
|
span:nth-of-type(3) {
|
font-size: 12px;
|
color: #999999;
|
}
|
span:nth-of-type(2) {
|
font-size: 12px;
|
}
|
}
|
}
|
}
|
.notes {
|
font-size: 12px;
|
color: #999999;
|
text-align: center;
|
margin-top: 12px;
|
}
|
.payCode {
|
|
|
|
.myimg {
|
position: absolute;
|
top: 45px;
|
left: 85px;
|
z-index: 1000;
|
}
|
}
|
.prod {
|
|
|
p:nth-of-type(1) {
|
font-size: 18px;
|
color: #333333;
|
margin-bottom: 20px;
|
margin-top: 25px;
|
}
|
p:nth-of-type(2),
|
p:nth-of-type(3) {
|
font-size: 12px;
|
color: #999999;
|
margin-bottom: 5px;
|
}
|
}
|
}
|
</style>
|
