船员公众号
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
gzh_chuanyuan/pages/user/withdrawal.vue

386 lines
8.1 KiB

2 months ago
<template>
<view class="release">
<view class="release-hd">
<view class="b">提现金额</view>
<view class="a">
<image class="money" :src="staticUrl('/static/money.png')"></image>
<input v-model="money" placeholder-style="font-size: 30rpx;" type="number" placeholder="请输入提现金额" />
</view>
<view class="c">当前可提现金额{{money1}}<text @click="toAll()">全部提现</text></view>
</view>
<view class="release-bd">
<view class="a">提现至</view>
<picker @change="bindPickerChange" :value="index" :range="array">
<view class="way" v-if="index < 0">请选择提现方式</view>
<view class="way1" v-else>{{array[index]}}</view>
</picker>
</view>
<view class="release-info" v-if="index >= 0">
<view class="items" v-if="index == 0 || index == 1">
<view class="a">收款码</view>
<view class="b">
<view class="pic" @click="uploadImg()">
<image v-if="qr_code1" class="img" :src="qr_code1"></image>
<image v-else class="img" :src="staticUrl('/static/release-upload.png')"></image>
</view>
</view>
</view>
<view class="item">
<view class="a">真实姓名</view>
<view class="b">
<input type="text" v-model="real_name" placeholder="请输入真实姓名" />
</view>
</view>
<view class="item" v-if="index == 2">
<view class="a">银行卡号</view>
<view class="b">
<input type="number" v-model="account" placeholder="请输入银行卡号" />
</view>
</view>
<view class="item" v-if="index == 2">
<view class="a">开户行</view>
<view class="b">
<input type="text" v-model="bank" placeholder="请输入开户行" />
</view>
</view>
</view>
<view class="release-fd">
<view class="btn" @click="toSubmit()">确认提现</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
account: "",
bank: "",
real_name: "",
qr_code: "",
qr_code1: "",
index: -1,
array: ['支付宝','微信','银行卡'],
userInfo: {},
money: "",
money1: 0
};
},
onReady() {
this.getUserInfo();
},
methods: {
//获取用户信息
async getUserInfo() {
const { code, data, msg } = await this.$api.loginInfo({})
if (code == 200) {
this.userInfo = data;
this.money1 = Number(this.userInfo.balance)
} else {
uni.showToast({
icon: "none",
title: msg
})
}
},
//申请提现
async toSubmit() {
if(this.money <= 0){
uni.showToast({
icon: "none",
title: "提现金额大于0.01以上"
})
return ;
}
if(this.money > this.money1){
this.money = this.money1
return ;
}
if(this.index < 0){
uni.showToast({
icon: "none",
title: "请选择提现方式"
})
return ;
}else if(this.index == 0 || this.index == 1){
if(!this.qr_code){
uni.showToast({
icon: "none",
title: "请上传收款码"
})
return
}
if(!this.real_name){
uni.showToast({
icon: "none",
title: "请输入真实姓名"
})
return
}
}else if(this.index == 2){
if(!this.real_name){
uni.showToast({
icon: "none",
title: "请输入真实姓名"
})
return
}
if(!this.account){
uni.showToast({
icon: "none",
title: "请输入银行卡号"
})
return
}
if(!this.bank){
uni.showToast({
icon: "none",
title: "请输入开户行"
})
return
}
}
const { code, msg } = await this.$api.applyWithdrawal({
type: Number(this.index)+1,
qr_code: this.qr_code?this.qr_code:"",
real_name: this.real_name?this.real_name:"",
bank: this.bank?this.bank:"",
account: this.account?this.account:"",
money: this.money?this.money:""
});
if(code == 200){
uni.showToast({
title: "提交成功"
})
this.bank = "";
this.account = "";
this.real_name = "";
this.qr_code = "";
this.money = "";
this.qr_code1 = ""
this.getUserInfo();
}
},
//上传图片
uploadImg() {
const that = this
uni.chooseImage({
count: 1,
sizeType: ["original"], //可以指定是原图还是压缩图,默认二者都有
sourceType: ["album", "camera"],
success: (res) => {
console.log(res.tempFilePaths[0])
uni.uploadFile({
name: 'file',
header: {
userToken: uni.getStorageSync('userToken')
},
url: this.$baseUrl+'api/upload',
filePath: res.tempFilePaths[0],
success: (upRes) => {
let end = JSON.parse(upRes.data)
that.qr_code = end.data.path
that.qr_code1 = end.data.url
},
fail: (err) => {
console.log("toUpload err",err)
console.log(err)
}
});
},
fail(err){
console.log("fail",err)
}
});
},
toAll() {
this.money = this.money1;
},
bindPickerChange(e) {
this.index = e.detail.value
},
tabItem(i){
this.selectIndex = i
}
}
}
</script>
<style lang="scss" scoped>
.release {
width: 100%;
padding: 25rpx 25rpx 200rpx;
overflow: hidden;
box-sizing: border-box;
&-hd{
padding: 30rpx 40rpx;
overflow: hidden;
background-color: #fff;
border-radius: 20rpx;
.b{
overflow: hidden;
font-size: 32rpx;
font-weight: 400;
color: #222222;
margin-bottom: 30rpx;
}
.a{
width: 100%;
display: flex;
align-items: baseline;
justify-content: flex-start;
padding: 30rpx 0;
border-bottom: 1px solid #CCCCCC;
.money{
width: 35rpx;
height: 42rpx;
margin-right: 10rpx;
}
input{
font-size: 60rpx;
font-weight: 400;
color: #222222;
height: 60rpx;
line-height: 60rpx;
margin-left: 20rpx;
&.box{
font-size: 30rpx;
}
}
}
.c{
padding: 20rpx 0 0;
font-size: 28rpx;
font-weight: 400;
color: #999999;
line-height: 50rpx;
text{
color: #2080F9;
}
}
}
&-bd{
height: 110rpx;
background: #FFFFFF;
border-radius: 20rpx;
margin-top: 20rpx;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 40rpx;
box-sizing: border-box;
.a{
font-size: 30rpx;
font-weight: 400;
color: #222222;
}
picker{
flex: 1;
text-align: right;
.way{
font-size: 30rpx;
font-weight: 400;
color: #999999;
padding-right: 40rpx;
position: relative;
&::after{
content: "";
width: 20rpx;
height: 20rpx;
border-left: 1px solid #999999;
border-top: 1px solid #999;
transform: rotate(-135deg);
position: absolute;
right: 0;
top: 5rpx;
z-index: 2;
}
}
.way1{
font-size: 30rpx;
font-weight: 400;
color: #212121;
padding-right: 40rpx;
position: relative;
&::after{
content: "";
width: 20rpx;
height: 20rpx;
border-left: 1px solid #999999;
border-top: 1px solid #999;
transform: rotate(-135deg);
position: absolute;
right: 0;
top: 5rpx;
z-index: 2;
}
}
}
}
&-fd{
width: 100%;
padding: 20rpx 30rpx;
box-sizing: border-box;
background-color: #f6f6f6;
position: fixed;
left: 0;
bottom: 0;
z-index: 10;
.btn{
width: 320rpx;
height: 98rpx;
line-height: 98rpx;
background: linear-gradient(-90deg, #3399EA, #38BCFF);
border-radius: 98rpx;
font-size: 30rpx;
font-weight: 400;
color: #FFFFFF;
text-align: center;
margin: 0 auto;
}
}
&-info{
background-color: #fff;
border-radius: 20rpx;
padding: 20rpx;
box-sizing: border-box;
margin-top: 20rpx;
.items{
padding: 20rpx 0;
overflow: hidden;
.a{
font-size: 28rpx;
color: #222222;
margin-bottom: 20rpx;
}
.b{
image{
width: 200rpx;
height: 200rpx;
}
}
}
.item{
display: flex;
align-items: center;
justify-content: space-between;
padding: 20rpx 0;
border-top: 1px solid #f6f6f6;
.a{
font-size: 28rpx;
color: #222222;
}
.b{
flex: 1;
margin-left: 20rpx;
input{
font-size: 28rpx;
color: #222222;
height: 50rpx;
line-height: 50rpx;
}
}
}
}
}
</style>