443 lines
14 KiB
Vue
443 lines
14 KiB
Vue
<template>
|
||
<view class="user-withdraw">
|
||
<view class="user-tab-container">
|
||
<tabs :active="active" :line-width="40" @change="onChange" :config="{itemWidth: 200}">
|
||
<tab :title="item.name" :name="item.value" v-for="(item, index) in widthDrawWay" :key="index">
|
||
<template v-if="item.value == 1 || item.value == 2">
|
||
<view class="bg-white withdraw-container mt20">
|
||
<view class="input row-center">
|
||
<view style="font-size: 23px;align-self: flex-end;margin-bottom: 5px">¥</view>
|
||
<input v-model="money" placeholder="0.00"></input>
|
||
<view class="column" style="flex: none;">
|
||
<view class="xs primary" style="text-align: right;" @tap="allWithdraw">全部提现</view>
|
||
<view class="xs" style="color: #BBBBBB">可提现余额￥{{widthDrawConfig.able_withdraw}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="tips mt20 muted row xs" v-if="item.value == 2">
|
||
提示：提现需扣除服务费{{widthDrawConfig.poundage_percent}}%，请自行缴纳税款
|
||
<!-- <view class="primary ml10">¥ {{widthDrawConfig.able_withdraw}}</view> -->
|
||
</view>
|
||
</view>
|
||
<view class="withdraw-btn bg-primary lg white row-center" @tap="applyWithdrawFun(item.value)">
|
||
确认提现</view>
|
||
<navigator url="/bundle/pages/user_withdraw_code/user_withdraw_code" hover-class="none"
|
||
class="mt20 nr lighter row-center">提现记录</navigator>
|
||
</template>
|
||
<template v-if="item.value == 3">
|
||
<view class="bg-white form-container">
|
||
<view class="input-item row md">
|
||
<view class="input-label ">微信账号</view>
|
||
<input v-model="account" placeholder="请输入微信账号"></input>
|
||
</view>
|
||
<view class="input-item row md">
|
||
<view class="input-label ">真实姓名</view>
|
||
<input v-model="realName" placeholder="请输入真实姓名"></input>
|
||
</view>
|
||
<view class="input-item row md">
|
||
<view class="input-label ">备注</view>
|
||
<input v-model="remark" placeholder="（选填）"></input>
|
||
</view>
|
||
<view class="uploader-container row mt20">
|
||
<uploader @after-read="afterRead" :file-list="fileList" :max-upload="1"
|
||
:deletable="true" useSlot @delete="handleDelete">
|
||
<view>
|
||
<view class="upload-area row-center">
|
||
<image src="/static/images/uploader_icon.png"></image>
|
||
</view>
|
||
<view class="mt10 normal nr" style="line-height: 36rpx;text-align: center;">
|
||
微信收款码</view>
|
||
</view>
|
||
</uploader>
|
||
</view>
|
||
</view>
|
||
<view class="bg-white withdraw-container mt10">
|
||
<view class="input row-center">
|
||
<view style="font-size: 23px;align-self: flex-end;margin-bottom: 5px">¥</view>
|
||
<input v-model="money" placeholder="0.00"></input>
|
||
<view class="column" style="flex: none;">
|
||
<view class="xs primary" style="text-align: right;" @tap="allWithdraw">全部提现</view>
|
||
<view class="xs" style="color: #BBBBBB">可提现余额￥{{widthDrawConfig.able_withdraw}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="tips mt10 muted row xs">
|
||
提示：提现需扣除服务费{{widthDrawConfig.poundage_percent}}%，请自行缴纳税款
|
||
<!-- <view class="primary ml5">¥ {{widthDrawConfig.able_withdraw}}</view> -->
|
||
</view>
|
||
</view>
|
||
<view class="withdraw-btn bg-primary lg white row-center" @tap="applyWithdrawFun(item.value)">
|
||
确认提现</view>
|
||
<navigator url="/bundle/pages/user_withdraw_code/user_withdraw_code" hover-class="none"
|
||
class="mt20 nr lighter row-center">提现记录</navigator>
|
||
</template>
|
||
<template v-if="item.value == 4">
|
||
<view class="bg-white form-container">
|
||
<view class="input-item row md">
|
||
<view class="input-label ">支付宝账号</view>
|
||
<input v-model="account" placeholder="请输入支付宝账号"></input>
|
||
</view>
|
||
<view class="input-item row md">
|
||
<view class="input-label ">真实姓名</view>
|
||
<input v-model="realName" placeholder="请输入真实姓名"></input>
|
||
</view>
|
||
<view class="input-item row md">
|
||
<view class="input-label ">备注</view>
|
||
<input v-model="remark" placeholder="（选填）"></input>
|
||
</view>
|
||
<view class="uploader-container row mt20">
|
||
<uploader @after-read="afterRead" :file-list="fileList" :max-upload="1"
|
||
:deletable="true" useSlot @delete="handleDelete">
|
||
<view class="column-center">
|
||
<view class="upload-area row-center">
|
||
<image src="/static/images/uploader_icon.png"></image>
|
||
</view>
|
||
<view class="mt10 normal nr" style="line-height: 36rpx;text-align: center;">
|
||
支付宝收款码</view>
|
||
</view>
|
||
</uploader>
|
||
</view>
|
||
</view>
|
||
<view class="bg-white withdraw-container mt10">
|
||
<view class="input row-center">
|
||
<view style="font-size: 23px;align-self: flex-end;margin-bottom: 5px">¥</view>
|
||
<input v-model="money" placeholder="0.00"></input>
|
||
<view class="column" style="flex: none;">
|
||
<view class="xs primary" style="text-align: right;" @tap="allWithdraw">全部提现</view>
|
||
<view class="xs" style="color: #BBBBBB">可提现余额￥{{widthDrawConfig.able_withdraw}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="tips mt10 muted row xs">
|
||
提示：提现需扣除服务费{{widthDrawConfig.poundage_percent}}%，请自行缴纳税款
|
||
<!-- <view class="primary ml5">¥ {{widthDrawConfig.able_withdraw}}</view> -->
|
||
</view>
|
||
</view>
|
||
<view class="withdraw-btn bg-primary lg white row-center" @tap="applyWithdrawFun(item.value)">
|
||
确认提现</view>
|
||
<navigator url="/bundle/pages/user_withdraw_code/user_withdraw_code" hover-class="none"
|
||
class="mt20 nr lighter row-center">
|
||
提现记录
|
||
</navigator>
|
||
</template>
|
||
<template v-if="item.value == 5">
|
||
<view class="bg-white form-container">
|
||
<view class="input-item row md">
|
||
<view class="input-label ">银行卡账号</view>
|
||
<input v-model="account" placeholder="请输入银行卡账号"></input>
|
||
</view>
|
||
<view class="input-item row md">
|
||
<view class="input-label ">真实姓名</view>
|
||
<input v-model="realName" placeholder="请输入真实姓名"></input>
|
||
</view>
|
||
<view class="input-item row md">
|
||
<view class="input-label ">提现银行</view>
|
||
<input v-model="bank" placeholder="请输入提现银行"></input>
|
||
</view>
|
||
<view class="input-item row md">
|
||
<view class="input-label ">银行支行</view>
|
||
<input v-model="subbank" placeholder="请输入银行支行"></input>
|
||
</view>
|
||
<view class="input-item row md">
|
||
<view class="input-label ">备注</view>
|
||
<input v-model="remark" placeholder="（选填）"></input>
|
||
</view>
|
||
</view>
|
||
<view class="bg-white withdraw-container mt10">
|
||
<view class="input row-center">
|
||
<view style="font-size: 23px;align-self: flex-end;margin-bottom: 5px">¥</view>
|
||
<input v-model="money" placeholder="0.00"></input>
|
||
<view class="column" style="flex: none;">
|
||
<view class="xs primary" style="text-align: right;" @tap="allWithdraw">全部提现</view>
|
||
<view class="xs" style="color: #BBBBBB">可提现余额￥{{widthDrawConfig.able_withdraw}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="tips mt10 muted row xs">
|
||
提示：提现需扣除服务费{{widthDrawConfig.poundage_percent}}%，请自行缴纳税款
|
||
<!-- <view class="primary ml5">¥ {{widthDrawConfig.able_withdraw}}</view> -->
|
||
</view>
|
||
</view>
|
||
<view class="withdraw-btn bg-primary lg white row-center" @tap="applyWithdrawFun(item.value)">
|
||
确认提现</view>
|
||
<navigator url="/bundle/pages/user_withdraw_code/user_withdraw_code" hover-class="none"
|
||
class="mt20 nr lighter row-center">
|
||
提现记录
|
||
</navigator>
|
||
</template>
|
||
</tab>
|
||
</tabs>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
// +----------------------------------------------------------------------
|
||
// | LikeShop100%开源免费商用电商系统
|
||
// +----------------------------------------------------------------------
|
||
// | 欢迎阅读学习系统程序代码，建议反馈是我们前进的动力
|
||
// | 开源版本可自由商用，保留版权即可
|
||
// | 商业版本务必购买商业授权，以免引起法律纠纷
|
||
// | 禁止对系统程序代码以任何目的，任何形式的再发布
|
||
// | Gitee下载：https://gitee.com/likeshop_gitee/likeshop
|
||
// | 访问官网：https://www.likemarket.net
|
||
// | 访问社区：https://home.likemarket.net
|
||
// | 访问手册：http://doc.likemarket.net
|
||
// | 微信公众号：好象科技
|
||
// | 好象科技开发团队 版权所有 拥有最终解释权
|
||
// +----------------------------------------------------------------------
|
||
// | Author: LikeShopTeam
|
||
// +----------------------------------------------------------------------
|
||
import {
|
||
applyWithdraw,
|
||
getWithdrawConfig
|
||
} from "@/api/user";
|
||
import {
|
||
uploadFile,
|
||
trottle
|
||
} from "@/utils/tools";
|
||
import {
|
||
baseURL
|
||
} from '@/config/app';
|
||
import {
|
||
withdrawType
|
||
} from "@/utils/type"
|
||
export default {
|
||
data() {
|
||
return {
|
||
active: 0,
|
||
money: '',
|
||
account: '',
|
||
realName: '',
|
||
bank: '',
|
||
subbank: '',
|
||
qrCode: '',
|
||
remark: '',
|
||
fileList: [],
|
||
widthDrawConfig: {},
|
||
widthDrawWay: []
|
||
};
|
||
},
|
||
|
||
components: {},
|
||
props: {},
|
||
|
||
/**
|
||
* 生命周期函数--监听页面加载
|
||
*/
|
||
onLoad: function(options) {
|
||
this.getWithdrawConfigFun();
|
||
this.applyWithdrawFun = trottle(this.applyWithdrawFun, 1000, this)
|
||
},
|
||
|
||
|
||
methods: {
|
||
allWithdraw(e) {
|
||
const {
|
||
widthDrawConfig
|
||
} = this;
|
||
console.log(widthDrawConfig, "widthDrawConfig")
|
||
this.money = widthDrawConfig.able_withdraw.toString()
|
||
},
|
||
|
||
onChange(e) {
|
||
this.active = e
|
||
this.account = "";
|
||
this.realName = "";
|
||
this.qrCode = "";
|
||
this.remark = ""
|
||
this.fileList = [];
|
||
},
|
||
|
||
getWithdrawConfigFun() {
|
||
getWithdrawConfig().then(res => {
|
||
if (res.code == 1) {
|
||
this.widthDrawConfig = res.data
|
||
this.widthDrawWay = res.data.type
|
||
}
|
||
});
|
||
},
|
||
|
||
afterRead(e) {
|
||
const file = e;
|
||
uni.showLoading({
|
||
title: '正在上传中...',
|
||
mask: true
|
||
});
|
||
file.forEach(item => {
|
||
uploadFile(item.path).then(res => {
|
||
uni.hideLoading();
|
||
this.fileList.push(res);
|
||
this.qrCode = res.url;
|
||
});
|
||
})
|
||
},
|
||
|
||
handleDelete(index) {
|
||
this.fileList.splice(index, 1)
|
||
},
|
||
|
||
// 申请提现
|
||
applyWithdrawFun(type) {
|
||
let {
|
||
active,
|
||
account,
|
||
realName,
|
||
qrCode,
|
||
remark,
|
||
money,
|
||
bank,
|
||
subbank,
|
||
widthDrawWay
|
||
} = this;
|
||
console.log(realName, "###", active, "###", money);
|
||
|
||
switch (parseInt(type)) {
|
||
case withdrawType.ACCOUNT:
|
||
break;
|
||
case withdrawType.WECHAT:
|
||
break
|
||
case withdrawType.PAY_WECHAT:
|
||
case withdrawType.PAY_ALIPAY:
|
||
if (!account) return this.$toast({
|
||
title: '请输入账户信息'
|
||
})
|
||
if (!realName) return this.$toast({
|
||
title: '请输入真实姓名'
|
||
})
|
||
if (!qrCode) return this.$toast({
|
||
title: '请上传收款码'
|
||
})
|
||
break;
|
||
case withdrawType.BANK:
|
||
if (!account) return this.$toast({
|
||
title: '请输入账户信息'
|
||
})
|
||
if (!realName) return this.$toast({
|
||
title: '请输入真实姓名'
|
||
})
|
||
if (!bank) return this.$toast({
|
||
title: '请输入提现银行'
|
||
})
|
||
if (!subbank) return this.$toast({
|
||
title: '请输入银行支行'
|
||
})
|
||
}
|
||
|
||
if (!money) {
|
||
this.$toast({
|
||
title: '请输入提现金额'
|
||
});
|
||
return;
|
||
}
|
||
|
||
const data = {
|
||
type: widthDrawWay[active].value,
|
||
money: money,
|
||
account: account,
|
||
real_name: realName,
|
||
money_qr_code: qrCode,
|
||
remark: remark,
|
||
bank,
|
||
subbank
|
||
};
|
||
applyWithdraw(data).then(res => {
|
||
if (res.code == 1) {
|
||
this.$toast({
|
||
title: '提交成功'
|
||
}, {
|
||
tab: 2,
|
||
url: '/bundle/pages/widthdraw_result/widthdraw_result?id=' + res.data.id
|
||
});
|
||
}
|
||
});
|
||
}
|
||
|
||
}
|
||
};
|
||
</script>
|
||
<style lang="scss">
|
||
.van-tabs .van-tabs__wrap {
|
||
border-radius: 10rpx;
|
||
}
|
||
|
||
.van-tabs__line {
|
||
background: linear-gradient(90deg, #F79C0C 0%, #FF2C3C 100%);
|
||
bottom: 8rpx !important;
|
||
/* width: 50rpx !important; */
|
||
height: 6rpx !important;
|
||
border-radius: 100rpx;
|
||
}
|
||
|
||
.user-withdraw {
|
||
.user-tab-container {
|
||
padding: 20rpx 30rpx;
|
||
|
||
::v-deep .scroll-view-h {
|
||
background-color: #FFFFFF;
|
||
}
|
||
|
||
.withdraw-container {
|
||
padding: 52rpx 72rpx;
|
||
border-radius: 20rpx;
|
||
|
||
.input {
|
||
border-bottom: $-solid-border;
|
||
|
||
input {
|
||
width: 100%;
|
||
height: 94rpx;
|
||
text-align: left;
|
||
font-size: 66rpx;
|
||
margin-left: 30rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.withdraw-btn {
|
||
background: linear-gradient(80deg, #F95F2F 0%, #FF2C3C 100%);
|
||
line-height: 44rpx;
|
||
height: 84rpx;
|
||
margin-top: 30rpx;
|
||
border-radius: 100rpx;
|
||
}
|
||
|
||
.form-container {
|
||
border-radius: 20rpx;
|
||
padding: 0 36rpx 26rpx;
|
||
line-height: 36rpx;
|
||
margin-top: 10rpx;
|
||
|
||
.input-item {
|
||
padding: 28rpx 0 30rpx;
|
||
border-bottom: $-solid-border;
|
||
}
|
||
|
||
.input-label {
|
||
width: 200rpx;
|
||
text-align: left;
|
||
line-height: 36rpx;
|
||
}
|
||
|
||
input {
|
||
flex: 1;
|
||
}
|
||
|
||
.uploader-container {
|
||
.upload-area {
|
||
width: 160rpx;
|
||
height: 160rpx;
|
||
border: 4rpx dashed #E5E5E5;
|
||
border-radius: 10rpx;
|
||
|
||
image {
|
||
width: 54rpx;
|
||
height: 44rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|