515 lines
11 KiB
Vue
515 lines
11 KiB
Vue
<template>
|
|
<view class="withdraw-page">
|
|
<!-- 顶部导航栏 -->
|
|
<custom-navbar
|
|
title="提现"
|
|
:show-back="true"
|
|
backgroundColor="#fff"
|
|
></custom-navbar>
|
|
|
|
<!-- 提现金额 -->
|
|
<view class="amount-section">
|
|
<view class="amount-header">
|
|
<text class="amount-title">提现金额</text>
|
|
<!-- <text class="account-bind" @click="goBindAccount">绑定提现账户</text> -->
|
|
</view>
|
|
<view class="input-box">
|
|
<text class="currency">¥</text>
|
|
<input
|
|
type="digit"
|
|
v-model="withdrawAmount"
|
|
:placeholder="'账户余额'+balance"
|
|
placeholder-class="input-placeholder"
|
|
@input="handleAmountInput"
|
|
class="money-inp"
|
|
/>
|
|
</view>
|
|
<view class="tips-box">
|
|
<text class="fee-tips">*当前最多每笔提现200元</text>
|
|
<!-- <image src="/static/images/question.png"
|
|
mode="aspectFit"
|
|
class="tips-icon"
|
|
@click="showTipsPopup"></image> -->
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 提现方式 -->
|
|
<view class="method-section">
|
|
<text class="method-title">请选择提现方式</text>
|
|
<view class="method-list">
|
|
<view
|
|
v-for="(item, index) in methodList"
|
|
:key="item.id"
|
|
@click="selectMethod(item)"
|
|
>
|
|
<view class="method-item">
|
|
<view class="method-info">
|
|
<image :src="item.icon" mode="aspectFit" class="method-icon"></image>
|
|
<text class="method-name">{{item.name}}</text>
|
|
</view>
|
|
<agree-radio :isAgree="item.selected"></agree-radio>
|
|
</view>
|
|
<view class="ali-info" v-if="item.selected">
|
|
<view class="info-item">
|
|
<text class="info-lable required">真实姓名</text>
|
|
<input
|
|
class="info-inp"
|
|
type="text"
|
|
placeholder="请输入真实姓名"
|
|
v-model="aliWallet.name"
|
|
placeholder-class="info-placeholder"/>
|
|
</view>
|
|
<view class="info-item">
|
|
<text class="info-lable required">身份证号</text>
|
|
<input
|
|
class="info-inp"
|
|
type="text"
|
|
placeholder="请输入身份证号"
|
|
v-model="aliWallet.id"
|
|
placeholder-class="info-placeholder"/>
|
|
</view>
|
|
<view class="info-item">
|
|
<text class="info-lable required">手机号/邮箱</text>
|
|
<input
|
|
class="info-inp"
|
|
type="text"
|
|
placeholder="请输入手机号/邮箱"
|
|
v-model="aliWallet.account"
|
|
placeholder-class="info-placeholder"/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
<!-- 提现按钮 -->
|
|
<view class="fixed-box">
|
|
<!-- 提现协议 -->
|
|
<view class="agreement">
|
|
<agree-radio :isAgree="isAgreeProtocol" @change-agree="changeAgree"></agree-radio>
|
|
<text class="agreement-text">提现即默认同意</text>
|
|
<text class="protocol-link" @click="viewProtocol(5)">《提现协议》</text>
|
|
</view>
|
|
<view
|
|
class="fixed-btn"
|
|
:class="{'submit-btn-disabled': !canSubmit}"
|
|
@click="handleWithdraw"
|
|
>
|
|
<text class="fixed-text">提交</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 提示弹框 -->
|
|
<tips-popup :show="showTipsFlag"
|
|
@close-popup="closePopup"></tips-popup>
|
|
</view>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import AgreeRadio from '@/components/agree-radio/agree-radio.vue'
|
|
import TipsPopup from '@/components/tips-popup/tips-popup.vue'
|
|
import { debounce } from '@/utils/debounce.js'
|
|
import request from '../../utils/request'
|
|
|
|
export default {
|
|
components: {
|
|
AgreeRadio,
|
|
TipsPopup
|
|
},
|
|
data() {
|
|
return {
|
|
id: '',
|
|
withdrawAmount: '',
|
|
artisanType: getApp().globalData.artisanType,
|
|
isAgreeProtocol: false,
|
|
balance: '',
|
|
showTipsFlag: false,
|
|
isSubmitting: false,
|
|
withdrawalWay: '',
|
|
aliWallet: {
|
|
name: '',
|
|
id: '',
|
|
account: ''
|
|
},
|
|
methodList: [
|
|
// {
|
|
// id: 1,
|
|
// name: '微信',
|
|
// icon: '/static/images/wechat.png',
|
|
// selected: true
|
|
// },
|
|
{
|
|
id: 2,
|
|
name: '支付宝',
|
|
icon: '/static/images/alipay.png',
|
|
selected: false
|
|
},
|
|
// {
|
|
// id: 3,
|
|
// name: '银行卡',
|
|
// icon: '/static/images/bankcard.png',
|
|
// selected: false
|
|
// }
|
|
]
|
|
}
|
|
},
|
|
computed: {
|
|
canSubmit() {
|
|
return this.withdrawAmount && this.isAgreeProtocol && !this.isSubmitting && this.aliWallet.name && this.aliWallet.id && this.aliWallet.account
|
|
}
|
|
},
|
|
onLoad() {
|
|
if(this.artisanType) {
|
|
// 创建防抖处理后的提交函数
|
|
this.debouncedSubmit = debounce(this.submit, 500);
|
|
this.getUserInfo();
|
|
}
|
|
|
|
},
|
|
methods: {
|
|
getUserInfo() {
|
|
const type = this.artisanType == 1 ? 2 : this.artisanType == 2 ? 3 : '';
|
|
request.post('/sj/user/getuser',{type}).then(result=>{
|
|
this.balance = result.data.money;
|
|
this.id = result.data.id;
|
|
})
|
|
},
|
|
// 显示提示弹框
|
|
showTipsPopup() {
|
|
this.showTipsFlag = true
|
|
},
|
|
// 关闭弹框
|
|
closePopup(value) {
|
|
this.showTipsFlag = false;
|
|
},
|
|
// 处理金额输入
|
|
handleAmountInput(e) {
|
|
const value = e.detail.value
|
|
if (value.indexOf('.') > -1) {
|
|
const decimal = value.split('.')[1]
|
|
if (decimal.length > 2) {
|
|
this.withdrawAmount = value.slice(0, value.indexOf('.') + 3)
|
|
}
|
|
}
|
|
},
|
|
// 去绑定提现状态
|
|
goBindAccount() {
|
|
uni.navigateTo({
|
|
url: '/pages/wallet/bindaccount'
|
|
})
|
|
},
|
|
// 选择提现方式
|
|
selectMethod(item) {
|
|
this.methodList.forEach(method => {
|
|
method.selected = method.id === item.id
|
|
})
|
|
this.withdrawalWay = item.id;
|
|
},
|
|
|
|
// 切换协议同意状态
|
|
changeAgree(value) {
|
|
this.isAgreeProtocol = value;
|
|
},
|
|
|
|
// 查看提现协议
|
|
viewProtocol(type) {
|
|
// TODO: 跳转到提现协议页面
|
|
uni.navigateTo({
|
|
url: '/pages/xieyi/xieyi?type='+type
|
|
})
|
|
},
|
|
|
|
// 处理提现提交
|
|
handleWithdraw() {
|
|
if (!this.canSubmit) return
|
|
this.debouncedSubmit()
|
|
},
|
|
|
|
// 实际的提交逻辑
|
|
async submit() {
|
|
if (this.isSubmitting) return
|
|
|
|
if (!this.withdrawAmount) {
|
|
uni.showToast({
|
|
title: '请输入提现金额',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
|
|
const amount = parseFloat(this.withdrawAmount)
|
|
if (amount <= 1) {
|
|
uni.showToast({
|
|
title: '提现金额必须大于1',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
|
|
if (amount > 200) {
|
|
uni.showToast({
|
|
title: '提现金额不能大于200元',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
|
|
if (amount > this.balance) {
|
|
uni.showToast({
|
|
title: '提现金额不能大于账号余额',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
|
|
if(this.withdrawalWay == 2) {
|
|
if(!this.aliWallet.name) {
|
|
uni.showToast({
|
|
title: '请输入真实姓名',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
if(!this.aliWallet.id) {
|
|
uni.showToast({
|
|
title: '请输入身份证号',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
if(!this.aliWallet.account) {
|
|
uni.showToast({
|
|
title: '请输入手机号',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
}
|
|
|
|
|
|
try {
|
|
this.isSubmitting = true
|
|
let data = {
|
|
cash_type: this.artisanType,
|
|
cash_money: this.withdrawAmount,
|
|
cash_user_id: this.id,
|
|
cash_name: this.aliWallet.name,
|
|
cash_identity: this.aliWallet.account,
|
|
cash_certno: this.aliWallet.id
|
|
}
|
|
// TODO: 调用提现接口
|
|
await request.post('/user/alitransfor',data).then(res=>{
|
|
console.log('提现结果',res)
|
|
if(res.state == 1) {
|
|
uni.showToast({
|
|
title: '提现申请已提交，请等待审核',
|
|
icon: 'none'
|
|
})
|
|
// 提交成功后返回上一页并传递选中的地址信息
|
|
const pages = getCurrentPages()
|
|
const prevPage = pages[pages.length - 2]
|
|
|
|
if (prevPage) {
|
|
prevPage.$vm.getUserInfo()
|
|
uni.navigateBack()
|
|
}
|
|
return;
|
|
}
|
|
if(res.state == 2) {
|
|
uni.showToast({
|
|
title: '您有提现申请中，暂无法提现',
|
|
icon: 'none'
|
|
})
|
|
return;
|
|
}
|
|
})
|
|
} catch (error) {
|
|
uni.showToast({
|
|
title: '提现失败，请重试',
|
|
icon: 'none'
|
|
})
|
|
} finally {
|
|
this.isSubmitting = false
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.withdraw-page {
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
}
|
|
|
|
.amount-section,
|
|
.method-section{
|
|
margin: 32rpx 24rpx;
|
|
padding: 32rpx;
|
|
border-radius: 12rpx;
|
|
background-color: #FFFFFF;
|
|
}
|
|
|
|
.amount-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 40rpx;
|
|
}
|
|
|
|
.amount-title,.method-title {
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
font-weight: 500;
|
|
}
|
|
.method-title {
|
|
display: block;
|
|
padding-bottom: 32rpx;
|
|
border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
|
|
}
|
|
.account-bind {
|
|
font-size: 24rpx;
|
|
font-weight: 400;
|
|
color: #666666;
|
|
}
|
|
|
|
.input-box {
|
|
display: flex;
|
|
align-items: center;
|
|
padding-bottom: 40rpx;
|
|
margin-bottom: 24rpx;
|
|
border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.currency {
|
|
font-size: 60rpx;
|
|
color: #333333;
|
|
font-weight: 500;
|
|
margin-right: 24rpx;
|
|
}
|
|
|
|
.money-inp {
|
|
flex: 1;
|
|
height: 60rpx;
|
|
font-size: 48rpx;
|
|
font-weight: 700;
|
|
color: #333;
|
|
}
|
|
|
|
.input-placeholder {
|
|
color: #858585;
|
|
font-size: 48rpx;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.tips-box {
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
|
|
}
|
|
.fee-tips {
|
|
font-size: 20rpx;
|
|
font-weight: 500;
|
|
color: #858585;
|
|
}
|
|
.tips-icon {
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
margin-left: 10rpx;
|
|
padding: 8rpx;
|
|
}
|
|
|
|
.method-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 32rpx 0;
|
|
border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.method-item:last-child {
|
|
border-bottom: none;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.method-info {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.method-icon {
|
|
width: 64rpx;
|
|
height: 64rpx;
|
|
margin-right: 16rpx;
|
|
}
|
|
|
|
.method-name {
|
|
font-size: 24rpx;
|
|
font-weight: 500;
|
|
color: #333;
|
|
}
|
|
|
|
.agreement {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-bottom: 26rpx;
|
|
}
|
|
|
|
.agreement-text {
|
|
font-size: 20rpx;
|
|
color: #858585;
|
|
font-weight: 500;
|
|
margin-left: 10rpx;
|
|
}
|
|
|
|
.protocol-link {
|
|
font-size: 20rpx;
|
|
color: #01A7F1;
|
|
}
|
|
|
|
.submit-section {
|
|
padding: 32rpx 24rpx;
|
|
background-color: #FFFFFF;
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
z-index: 9999;
|
|
}
|
|
.submit-btn-disabled {
|
|
opacity: 0.5;
|
|
}
|
|
.info-item {
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 24rpx 0;
|
|
border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
|
|
}
|
|
.info-lable {
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
font-weight: 500;
|
|
}
|
|
.info-inp {
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
width: 460rpx;
|
|
}
|
|
.info-placeholder {
|
|
font-size: 28rpx;
|
|
color: #858585;
|
|
}
|
|
.required::before {
|
|
content: '*';
|
|
color: #FF0000;
|
|
margin-right: 4rpx;
|
|
}
|
|
</style> |