298 lines
7.4 KiB
Vue
298 lines
7.4 KiB
Vue
<!-- 提现 -->
|
|
|
|
<template>
|
|
<view class="user-withdraw">
|
|
<!-- Tabs -->
|
|
<view class="withdraw-tabs">
|
|
<u-tabs :list="tabsList" :is-scroll="true" :current="currentTab" :bold="true" height="100" font-size="30rpx"
|
|
active-color="#333333" inactive-color="#666666" :bar-style="styleTabsBarStyle" @change="changeTab" />
|
|
</view>
|
|
|
|
|
|
<!-- 支付宝 -->
|
|
<view v-if="currentValue == 4" class="withdraw-alipay m-t-20 bg-white">
|
|
<!-- Account -->
|
|
<u-field label-width="160" label="支付宝账号" v-model="form.account" placeholder="请输入支付宝账号" />
|
|
<!-- Name -->
|
|
<u-field label-width="160" label="真实姓名" v-model="form.real_name" placeholder="请输入真实姓名" />
|
|
<!-- Remark -->
|
|
<u-field label-width="160" label="备注" v-model="form.remark" placeholder="(选填)" />
|
|
|
|
<!-- 上传图片 -->
|
|
<view class="flex-col m-t-20">
|
|
<u-upload ref="uUpload" :header="{token: $store.getters.token}" :auto-upload="true"
|
|
:show-progress="false" max-count="1" width="142" height="142" :custom-btn="true" :action="action"
|
|
@on-success="onSuccess" @on-remove="onRemove">
|
|
<view slot="addBtn" class="flex-col col-center row-center">
|
|
<view class="upload-image flex-col col-center row-center">
|
|
<u-icon name="/bundle/static/icon_camera_line.png" width="54" />
|
|
</view>
|
|
|
|
<view class="xs m-t-10">支付宝收款码</view>
|
|
</view>
|
|
</u-upload>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 银行卡 -->
|
|
<view v-else-if="currentValue == 5" class="withdraw-alipay m-t-20 bg-white">
|
|
<!-- Account -->
|
|
<u-field label-width="160" label="银行卡账号" v-model="form.account" placeholder="请输入银行卡账号" />
|
|
<!-- Name -->
|
|
<u-field label-width="160" label="持卡人姓名" v-model="form.real_name" placeholder="请输入持卡人姓名" />
|
|
<!-- Name -->
|
|
<u-field label-width="160" label="提现银行" v-model="form.bank" placeholder="请输入银行名称" />
|
|
<!-- Remark -->
|
|
<u-field label-width="160" label="银行支行" v-model="form.subbank" placeholder="如：金湾支行" />
|
|
<!-- Remark -->
|
|
<u-field label-width="160" label="备注" v-model="form.remark" placeholder="(选填)" />
|
|
</view>
|
|
|
|
<!-- 提现金额 -->
|
|
<view class="withdraw-money-wrap m-t-20 bg-white">
|
|
<view class="flex withdraw-money p-b-20">
|
|
<view class="flex flex-1">
|
|
<text class="font-size-46 m-r-10 normal">¥</text>
|
|
<u-input @input="setMoney" v-model="form.money" placeholder="0.00" :custom-style="{
|
|
'font-size': '66rpx'
|
|
}" />
|
|
|
|
<!-- <u-input v-model="form.money" placeholder="0.00" :custom-style="{
|
|
'font-size': '66rpx'
|
|
}" /> -->
|
|
</view>
|
|
<view class="flex-col flex-1 text-right">
|
|
<text class="xs primary" @tap="form.money=widthDrawConfig.able_withdraw">全部提现</text>
|
|
<text class="xs muted m-t-10">可提现金额 ¥ {{widthDrawConfig.able_withdraw ? widthDrawConfig.able_withdraw : 0}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="muted xs m-t-30" v-if="widthDrawConfig.rule">
|
|
<u-parse :html="widthDrawConfig.rule"/>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 确认提交 -->
|
|
<button class="withdraw-submit m-t-30 white br60" @tap="onSubmit" size="lg">确认提交</button>
|
|
|
|
<!-- 提现记录 -->
|
|
<router-link to="/bundle/pages/subsidy_withdrawal_record/index">
|
|
<view class="withdraw-log m-t-40 text-center muted">提现记录</view>
|
|
</router-link>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
import {
|
|
applyWithdraw,
|
|
getBillionsWithdrawConfig,
|
|
applyBillionsWithdrawl,
|
|
rechargeBalance
|
|
} from "@/api/user";
|
|
import {
|
|
trottle
|
|
} from "@/utils/tools";
|
|
import {
|
|
baseURL
|
|
} from '@/config/app';
|
|
export default {
|
|
data() {
|
|
return {
|
|
action: baseURL + '/api/file/formimage',
|
|
currentTab: 0, // Tabs当前位置
|
|
// Tabs 列表
|
|
tabsList: [],
|
|
// Tabs滑块样式
|
|
styleTabsBarStyle: {
|
|
bottom: '12rpx',
|
|
width: '50rpx',
|
|
height: '6rpx',
|
|
background: 'green',
|
|
borderRadius: '50px',
|
|
backgroundImage: 'linear-gradient(to right, \#F79C0C, \#FF2C3C)'
|
|
},
|
|
// 表单数据
|
|
form: {
|
|
money: '', // 提现金额
|
|
account: '', // 账户名称
|
|
real_name: '', // 真实姓名
|
|
money_qr_code: '', // 收款二维码
|
|
bank: '', // 银行
|
|
subbank: '', // 支行
|
|
remark: '', // 备注
|
|
},
|
|
inputValue: '',
|
|
widthDrawConfig: {},
|
|
type: ''
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
if(options?.type) {
|
|
this.type = options.type
|
|
}
|
|
this.getBillionsWithdrawConfigFun();
|
|
this.onSubmit = trottle(this.onSubmit, 1000, this)
|
|
},
|
|
onUnload() {
|
|
uni.$emit('refreshSubsidyPage')
|
|
},
|
|
methods: {
|
|
setMoney(value) {
|
|
setTimeout(() => {
|
|
this.form.money = value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');
|
|
}, 0)
|
|
},
|
|
|
|
// 改变当前的Tabs位置
|
|
changeTab(index) {
|
|
this.currentTab = index;
|
|
this.form = {
|
|
price: '',
|
|
account: '',
|
|
real_name: '',
|
|
money_qr_code: '',
|
|
remark: '',
|
|
bank: '',
|
|
subbank: ''
|
|
};
|
|
},
|
|
|
|
async getBillionsWithdrawConfigFun() {
|
|
const {
|
|
code,
|
|
data
|
|
} = await getBillionsWithdrawConfig({type: this.type})
|
|
|
|
if (code == 1) {
|
|
console.log(data)
|
|
this.widthDrawConfig = data
|
|
this.tabsList = data.type
|
|
}
|
|
},
|
|
|
|
// 提交表单
|
|
onSubmit() {
|
|
const data = {
|
|
...this.form
|
|
}
|
|
data.type = this.currentValue
|
|
if (!data.money) {
|
|
this.$toast({
|
|
title: '请输入提现金额'
|
|
});
|
|
return;
|
|
}
|
|
|
|
if (!uni.$u.test.amount(data.money)) {
|
|
this.$toast({
|
|
title: '提现金额格式错误'
|
|
});
|
|
return;
|
|
}
|
|
|
|
if (data.money < this.widthDrawConfig.min_withdraw) {
|
|
this.$toast({
|
|
title: '最小提现金额为￥' + this.widthDrawConfig.min_withdraw
|
|
});
|
|
return;
|
|
}
|
|
|
|
uni.showLoading({
|
|
title: '加载中...',
|
|
mask: true
|
|
});
|
|
if (this.type == 'balance') {
|
|
rechargeBalance(data).then(res => {
|
|
uni.hideLoading()
|
|
if (res.code == 1) {
|
|
this.form.money = ''
|
|
this.$toast({
|
|
title: '操作成功'
|
|
}, {
|
|
tab: 2,
|
|
url: '/bundle_b/pages/subsidy_shop/subsidy_shop'
|
|
});
|
|
}
|
|
})
|
|
} else {
|
|
applyBillionsWithdrawl(data).then(res => {
|
|
uni.hideLoading()
|
|
if (res.code == 1) {
|
|
this.$toast({
|
|
title: '提现成功!'
|
|
});
|
|
this.form.money = ''
|
|
}
|
|
});
|
|
}
|
|
},
|
|
|
|
onSuccess(e) {
|
|
this.form.money_qr_code = e.data.base_uri
|
|
},
|
|
|
|
onRemove(index) {
|
|
this.form.money_qr_code = ""
|
|
},
|
|
},
|
|
computed: {
|
|
currentValue(val) {
|
|
const {
|
|
currentTab,
|
|
tabsList
|
|
} = this
|
|
return tabsList[currentTab] ? tabsList[currentTab].value : ''
|
|
}
|
|
},
|
|
watch: {
|
|
widthDrawConfig() {
|
|
if (this.widthDrawConfig.able_withdraw) {
|
|
this.widthDrawConfig.able_withdraw = (parseInt(this.widthDrawConfig.able_withdraw * 100) / 100).toFixed(2)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
.user-withdraw {
|
|
padding: 20rpx 30rpx;
|
|
|
|
.withdraw-tabs {
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.withdraw-money-wrap {
|
|
padding: 50rpx 66rpx;
|
|
border-radius: 10px;
|
|
|
|
.withdraw-money {
|
|
border-bottom: $-solid-border;
|
|
}
|
|
}
|
|
|
|
.withdraw-wechat,
|
|
.withdraw-alipay {
|
|
padding: 0 36rpx 20rpx;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.upload-image {
|
|
width: 142rpx;
|
|
height: 142rpx;
|
|
border: 2rpx dashed #CCCCCC;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.withdraw-submit {
|
|
background: linear-gradient(11deg, #F95F2F, #FF2C3C);
|
|
}
|
|
|
|
::v-deep .u-field {
|
|
padding: 26rpx 0;
|
|
}
|
|
}
|
|
</style> |