428 lines
11 KiB
Vue
428 lines
11 KiB
Vue
|
<!-- 分佣提现 -->
|
|||
|
|
<template>
|
|||
|
|
<s-layout title="申请提现" class="withdraw-wrap" navbar="inner">
|
|||
|
|
<view class="page-bg"></view>
|
|||
|
|
<view
|
|||
|
|
class="wallet-num-box ss-flex ss-col-center ss-row-between"
|
|||
|
|
:style="[
|
|||
|
|
{
|
|||
|
|
marginTop: '-' + Number(statusBarHeight + 88) + 'rpx',
|
|||
|
|
paddingTop: Number(statusBarHeight + 108) + 'rpx',
|
|||
|
|
},
|
|||
|
|
]"
|
|||
|
|
>
|
|||
|
|
<view class="">
|
|||
|
|
<view class="num-title">可提现金额（元）</view>
|
|||
|
|
<view class="wallet-num">{{ fen2yuan(state.brokerageInfo.brokeragePrice) }}</view>
|
|||
|
|
</view>
|
|||
|
|
<button class="ss-reset-button log-btn" @tap="sheep.$router.go('/pages/commission/wallet', { type: 2 })">
|
|||
|
|
提现记录
|
|||
|
|
</button>
|
|||
|
|
</view>
|
|||
|
|
<!-- 提现输入卡片-->
|
|||
|
|
<view class="draw-card">
|
|||
|
|
<view class="bank-box ss-flex ss-col-center ss-row-between ss-m-b-30">
|
|||
|
|
<view class="name">提现至</view>
|
|||
|
|
<view class="bank-list ss-flex ss-col-center" @tap="onAccountSelect(true)">
|
|||
|
|
<view v-if="!state.accountInfo.type" class="empty-text">请选择提现方式</view>
|
|||
|
|
<view v-if="state.accountInfo.type === '1'" class="empty-text">钱包余额</view>
|
|||
|
|
<view v-if="state.accountInfo.type === '2'" class="empty-text">微信零钱</view>
|
|||
|
|
<view v-if="state.accountInfo.type === '3'" class="empty-text">支付宝账户</view>
|
|||
|
|
<view v-if="state.accountInfo.type === '4'" class="empty-text">银行卡转账</view>
|
|||
|
|
<text class="cicon-forward" />
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 提现金额 -->
|
|||
|
|
<view class="card-title">提现金额</view>
|
|||
|
|
<view class="input-box ss-flex ss-col-center border-bottom">
|
|||
|
|
<view class="unit">￥</view>
|
|||
|
|
<uni-easyinput
|
|||
|
|
:inputBorder="false"
|
|||
|
|
class="ss-flex-1 ss-p-l-10"
|
|||
|
|
v-model="state.accountInfo.price"
|
|||
|
|
type="number"
|
|||
|
|
placeholder="请输入提现金额"
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
<!-- 提现账号 -->
|
|||
|
|
<view class="card-title" v-show="['2', '3', '4'].includes(state.accountInfo.type)">
|
|||
|
|
提现账号
|
|||
|
|
</view>
|
|||
|
|
<view
|
|||
|
|
class="input-box ss-flex ss-col-center border-bottom"
|
|||
|
|
v-show="['2', '3', '4'].includes(state.accountInfo.type)"
|
|||
|
|
>
|
|||
|
|
<view class="unit" />
|
|||
|
|
<uni-easyinput
|
|||
|
|
:inputBorder="false"
|
|||
|
|
class="ss-flex-1 ss-p-l-10"
|
|||
|
|
v-model="state.accountInfo.accountNo"
|
|||
|
|
placeholder="请输入提现账号"
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
<!-- 收款码 -->
|
|||
|
|
<view class="card-title" v-show="['2', '3'].includes(state.accountInfo.type)">收款码</view>
|
|||
|
|
<view
|
|||
|
|
class="input-box ss-flex ss-col-center"
|
|||
|
|
v-show="['2', '3'].includes(state.accountInfo.type)"
|
|||
|
|
>
|
|||
|
|
<view class="unit" />
|
|||
|
|
<view class="upload-img">
|
|||
|
|
<s-uploader
|
|||
|
|
v-model:url="state.accountInfo.accountQrCodeUrl"
|
|||
|
|
fileMediatype="image"
|
|||
|
|
limit="1"
|
|||
|
|
mode="grid"
|
|||
|
|
:imageStyles="{ width: '168rpx', height: '168rpx' }"
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 持卡人姓名 -->
|
|||
|
|
<view class="card-title" v-show="state.accountInfo.type === '4'">持卡人</view>
|
|||
|
|
<view
|
|||
|
|
class="input-box ss-flex ss-col-center border-bottom"
|
|||
|
|
v-show="state.accountInfo.type === '4'"
|
|||
|
|
>
|
|||
|
|
<view class="unit" />
|
|||
|
|
<uni-easyinput
|
|||
|
|
:inputBorder="false"
|
|||
|
|
class="ss-flex-1 ss-p-l-10"
|
|||
|
|
v-model="state.accountInfo.name"
|
|||
|
|
placeholder="请输入持卡人姓名"
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
<!-- 提现银行 -->
|
|||
|
|
<view class="card-title" v-show="state.accountInfo.type === '4'">提现银行</view>
|
|||
|
|
<view
|
|||
|
|
class="input-box ss-flex ss-col-center border-bottom"
|
|||
|
|
v-show="state.accountInfo.type === '4'"
|
|||
|
|
>
|
|||
|
|
<view class="unit" />
|
|||
|
|
<uni-easyinput
|
|||
|
|
:inputBorder="false"
|
|||
|
|
class="ss-flex-1 ss-p-l-10"
|
|||
|
|
v-model="state.accountInfo.bankName"
|
|||
|
|
placeholder="请输入提现银行"
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
<!-- 开户地址 -->
|
|||
|
|
<view class="card-title" v-show="state.accountInfo.type === '4'">开户地址</view>
|
|||
|
|
<view
|
|||
|
|
class="input-box ss-flex ss-col-center border-bottom"
|
|||
|
|
v-show="state.accountInfo.type === '4'"
|
|||
|
|
>
|
|||
|
|
<view class="unit" />
|
|||
|
|
<uni-easyinput
|
|||
|
|
:inputBorder="false"
|
|||
|
|
class="ss-flex-1 ss-p-l-10"
|
|||
|
|
v-model="state.accountInfo.bankAddress"
|
|||
|
|
placeholder="请输入开户地址"
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
<button class="ss-reset-button save-btn ui-BG-Main-Gradient ui-Shadow-Main" @tap="onConfirm">
|
|||
|
|
确认提现
|
|||
|
|
</button>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 提现说明 -->
|
|||
|
|
<view class="draw-notice">
|
|||
|
|
<view class="title ss-m-b-30">提现说明</view>
|
|||
|
|
<view class="draw-list"> 最低提现金额 {{ fen2yuan(state.minPrice) }} 元 </view>
|
|||
|
|
<view class="draw-list">
|
|||
|
|
冻结佣金：<text>￥{{ fen2yuan(state.brokerageInfo.frozenPrice) }}</text>
|
|||
|
|
（每笔佣金的冻结期为 {{ state.frozenDays }} 天，到期后可提现）
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 选择提现账户 -->
|
|||
|
|
<account-type-select
|
|||
|
|
:show="state.accountSelect"
|
|||
|
|
@close="onAccountSelect(false)"
|
|||
|
|
round="10"
|
|||
|
|
v-model="state.accountInfo"
|
|||
|
|
:methods="state.withdrawTypes"
|
|||
|
|
/>
|
|||
|
|
</s-layout>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import { computed, reactive, onBeforeMount } from 'vue';
|
|||
|
|
import sheep from '@/sheep';
|
|||
|
|
import accountTypeSelect from './components/account-type-select.vue';
|
|||
|
|
import { fen2yuan } from '@/sheep/hooks/useGoods';
|
|||
|
|
import TradeConfigApi from '@/sheep/api/trade/config';
|
|||
|
|
import BrokerageApi from '@/sheep/api/trade/brokerage';
|
|||
|
|
|
|||
|
|
const headerBg = sheep.$url.css('/static/img/shop/user/withdraw_bg.png');
|
|||
|
|
const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
|
|||
|
|
|
|||
|
|
const userStore = sheep.$store('user');
|
|||
|
|
const userInfo = computed(() => userStore.userInfo);
|
|||
|
|
const state = reactive({
|
|||
|
|
accountInfo: {
|
|||
|
|
// 提现表单
|
|||
|
|
type: undefined,
|
|||
|
|
accountNo: undefined,
|
|||
|
|
accountQrCodeUrl: undefined,
|
|||
|
|
name: undefined,
|
|||
|
|
bankName: undefined,
|
|||
|
|
bankAddress: undefined,
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
accountSelect: false,
|
|||
|
|
|
|||
|
|
brokerageInfo: {}, // 分销信息
|
|||
|
|
|
|||
|
|
frozenDays: 0, // 冻结天数
|
|||
|
|
minPrice: 0, // 最低提现金额
|
|||
|
|
withdrawTypes: [], // 提现方式
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 打开提现方式的弹窗
|
|||
|
|
const onAccountSelect = (e) => {
|
|||
|
|
state.accountSelect = e;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 提交提现
|
|||
|
|
const onConfirm = async () => {
|
|||
|
|
// 参数校验
|
|||
|
|
debugger;
|
|||
|
|
if (
|
|||
|
|
!state.accountInfo.price ||
|
|||
|
|
state.accountInfo.price > state.brokerageInfo.price ||
|
|||
|
|
state.accountInfo.price <= 0
|
|||
|
|
) {
|
|||
|
|
sheep.$helper.toast('请输入正确的提现金额');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (!state.accountInfo.type) {
|
|||
|
|
sheep.$helper.toast('请选择提现方式');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
// 提交请求
|
|||
|
|
let { code } = await BrokerageApi.createBrokerageWithdraw({
|
|||
|
|
...state.accountInfo,
|
|||
|
|
price: state.accountInfo.price * 100,
|
|||
|
|
});
|
|||
|
|
if (code !== 0) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
// 提示
|
|||
|
|
uni.showModal({
|
|||
|
|
title: '操作成功',
|
|||
|
|
content: '您的提现申请已成功提交',
|
|||
|
|
cancelText: '继续提现',
|
|||
|
|
confirmText: '查看记录',
|
|||
|
|
success: (res) => {
|
|||
|
|
if (res.confirm) {
|
|||
|
|
sheep.$router.go('/pages/commission/wallet', { type: 2 })
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
getBrokerageUser();
|
|||
|
|
state.accountInfo = {};
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 获得分销配置
|
|||
|
|
async function getWithdrawRules() {
|
|||
|
|
let { code, data } = await TradeConfigApi.getTradeConfig();
|
|||
|
|
if (code !== 0) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (data) {
|
|||
|
|
state.minPrice = data.brokerageWithdrawMinPrice || 0;
|
|||
|
|
state.frozenDays = data.brokerageFrozenDays || 0;
|
|||
|
|
state.withdrawTypes = data.brokerageWithdrawTypes;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 获得分销信息
|
|||
|
|
async function getBrokerageUser() {
|
|||
|
|
const { data, code } = await BrokerageApi.getBrokerageUser();
|
|||
|
|
if (code === 0) {
|
|||
|
|
state.brokerageInfo = data;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
onBeforeMount(() => {
|
|||
|
|
getWithdrawRules();
|
|||
|
|
getBrokerageUser()
|
|||
|
|
})
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
:deep() {
|
|||
|
|
.uni-input-input {
|
|||
|
|
font-family: OPPOSANS !important;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.wallet-num-box {
|
|||
|
|
padding: 0 40rpx 80rpx;
|
|||
|
|
background: var(--ui-BG-Main) v-bind(headerBg) center/750rpx 100% no-repeat;
|
|||
|
|
border-radius: 0 0 5% 5%;
|
|||
|
|
|
|||
|
|
.num-title {
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: $white;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.wallet-num {
|
|||
|
|
font-size: 60rpx;
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: $white;
|
|||
|
|
font-family: OPPOSANS;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.log-btn {
|
|||
|
|
width: 170rpx;
|
|||
|
|
height: 60rpx;
|
|||
|
|
line-height: 60rpx;
|
|||
|
|
border: 1rpx solid $white;
|
|||
|
|
border-radius: 30rpx;
|
|||
|
|
padding: 0;
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: $white;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 提现输入卡片
|
|||
|
|
.draw-card {
|
|||
|
|
background-color: $white;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
width: 690rpx;
|
|||
|
|
min-height: 560rpx;
|
|||
|
|
margin: -60rpx 30rpx 30rpx 30rpx;
|
|||
|
|
padding: 30rpx;
|
|||
|
|
position: relative;
|
|||
|
|
z-index: 3;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
|
|||
|
|
.card-title {
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
font-weight: 500;
|
|||
|
|
margin-bottom: 30rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bank-box {
|
|||
|
|
.name {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bank-list {
|
|||
|
|
.empty-text {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
font-weight: 400;
|
|||
|
|
color: $dark-9;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.cicon-forward {
|
|||
|
|
color: $dark-9;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.input-box {
|
|||
|
|
width: 624rpx;
|
|||
|
|
height: 100rpx;
|
|||
|
|
margin-bottom: 40rpx;
|
|||
|
|
|
|||
|
|
.unit {
|
|||
|
|
font-size: 48rpx;
|
|||
|
|
color: #333;
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.uni-easyinput__placeholder-class {
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
height: 36rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
:deep(.uni-easyinput__content-input) {
|
|||
|
|
font-size: 48rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.save-btn {
|
|||
|
|
width: 616rpx;
|
|||
|
|
height: 86rpx;
|
|||
|
|
line-height: 86rpx;
|
|||
|
|
border-radius: 40rpx;
|
|||
|
|
margin-top: 80rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bind-box {
|
|||
|
|
.placeholder-text {
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
color: $dark-9;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.add-btn {
|
|||
|
|
width: 100rpx;
|
|||
|
|
height: 50rpx;
|
|||
|
|
border-radius: 25rpx;
|
|||
|
|
line-height: 50rpx;
|
|||
|
|
font-size: 22rpx;
|
|||
|
|
color: var(--ui-BG-Main);
|
|||
|
|
background-color: var(--ui-BG-Main-light);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.input-box {
|
|||
|
|
width: 624rpx;
|
|||
|
|
height: 100rpx;
|
|||
|
|
margin-bottom: 40rpx;
|
|||
|
|
|
|||
|
|
.unit {
|
|||
|
|
font-size: 48rpx;
|
|||
|
|
color: #333;
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.uni-easyinput__placeholder-class {
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
:deep(.uni-easyinput__content-input) {
|
|||
|
|
font-size: 48rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.save-btn {
|
|||
|
|
width: 616rpx;
|
|||
|
|
height: 86rpx;
|
|||
|
|
line-height: 86rpx;
|
|||
|
|
border-radius: 40rpx;
|
|||
|
|
margin-top: 80rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 提现说明
|
|||
|
|
.draw-notice {
|
|||
|
|
width: 684rpx;
|
|||
|
|
background: #ffffff;
|
|||
|
|
border: 2rpx solid #fffaee;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
margin: 20rpx 32rpx 0 32rpx;
|
|||
|
|
padding: 30rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
|
|||
|
|
.title {
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: #333333;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.draw-list {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #999999;
|
|||
|
|
line-height: 46rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|