370 lines
8.9 KiB
Vue
370 lines
8.9 KiB
Vue
<template>
|
||
<view class="withdraw-page">
|
||
<view class="page-hero">
|
||
<AppNavbar title="提现" show-back/>
|
||
<view class="intro-card">
|
||
<view class="card-title">
|
||
<view class="title-bar"></view>
|
||
<text>提现</text>
|
||
</view>
|
||
<text class="intro-text">提交提现申请，到账时间以平台审核为准</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="card block">
|
||
<view class="section-title">提现信息</view>
|
||
<!-- <view class="info-row">-->
|
||
<!-- <view>可提现余额</view>-->
|
||
<!-- <view class="balance">¥ {{ withdrawable }}</view>-->
|
||
<!-- </view>-->
|
||
<view class="form-row">
|
||
<view class="label">提现金额</view>
|
||
<input v-model="form.money" class="input" type="digit" placeholder="请输入金额(0.5~200元)"/>
|
||
</view>
|
||
<view class="form-row">
|
||
<view class="label">提现方式</view>
|
||
<view class="pay-types">
|
||
<view :class="['pay-type', form.payType === 10 ? 'active' : '']" @tap="form.payType = 10">微信</view>
|
||
<!-- <view :class="['pay-type', form.payType === 20 ? 'active' : '']" @tap="form.payType = 20">支付宝</view>-->
|
||
<!-- <view :class="['pay-type', form.payType === 30 ? 'active' : '']" @tap="form.payType = 30">银行卡</view>-->
|
||
</view>
|
||
</view>
|
||
<view v-if="form.payType === 20" class="form-row">
|
||
<view class="label">支付宝姓名</view>
|
||
<input v-model="form.alipayName" class="input" placeholder="请输入支付宝姓名"/>
|
||
</view>
|
||
<view v-if="form.payType === 20" class="form-row">
|
||
<view class="label">支付宝账号</view>
|
||
<input v-model="form.alipayAccount" class="input" placeholder="请输入支付宝账号"/>
|
||
</view>
|
||
<view v-if="form.payType === 30" class="form-row">
|
||
<view class="label">开户行名称</view>
|
||
<input v-model="form.bankName" class="input" placeholder="请输入开户行名称"/>
|
||
</view>
|
||
<view v-if="form.payType === 30" class="form-row">
|
||
<view class="label">银行开户名</view>
|
||
<input v-model="form.bankAccount" class="input" placeholder="请输入银行开户名"/>
|
||
</view>
|
||
<view v-if="form.payType === 30" class="form-row">
|
||
<view class="label">银行卡号</view>
|
||
<input v-model="form.bankCard" class="input" placeholder="请输入银行卡号"/>
|
||
</view>
|
||
<view class="form-row">
|
||
<view class="label">备注</view>
|
||
<input v-model="form.remark" class="input" placeholder="选填"/>
|
||
</view>
|
||
<view class="primary-btn submit" @tap="submitWithdraw">提交申请</view>
|
||
</view>
|
||
|
||
<view class="info-row clickable" @tap="goWithdrawRecords">
|
||
<view>提现记录</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import AppNavbar from "@/components/AppNavbar.vue";
|
||
import {dealerWithdrawAddReq, userInfoReq, updateDealerWithdraw} from "@/api/user";
|
||
import dayjs from 'dayjs'
|
||
|
||
export default {
|
||
components: {AppNavbar},
|
||
data() {
|
||
return {
|
||
withdrawable: 0,
|
||
form: {
|
||
payType: 10,
|
||
money: '',
|
||
alipayName: '',
|
||
alipayAccount: '',
|
||
bankName: '',
|
||
bankAccount: '',
|
||
bankCard: '',
|
||
remark: ''
|
||
},
|
||
user: {
|
||
balance: 0
|
||
}
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.getUserData()
|
||
},
|
||
methods: {
|
||
async getUserData() {
|
||
const {data} = await userInfoReq()
|
||
this.user = data
|
||
this.withdrawable = this.user.balance
|
||
},
|
||
async submitWithdraw() {
|
||
const money = Number(this.form.money)
|
||
if (!money || money <= 0) {
|
||
uni.showToast({
|
||
title: '请输入正确金额',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
if (money < 0.5) {
|
||
uni.showToast({
|
||
title: '提现金额不能小于0.5元',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
if (money > 200) {
|
||
uni.showToast({
|
||
title: '提现金额不能大于200元',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
if (money > this.withdrawable) {
|
||
uni.showToast({
|
||
title: '超过可提现余额',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
if (this.form.payType === 20) {
|
||
if (!this.form.alipayName) {
|
||
uni.showToast({
|
||
title: '请输入支付宝姓名',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
if (!this.form.alipayAccount) {
|
||
uni.showToast({
|
||
title: '请输入支付宝账号',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
} else if (this.form.payType === 30) {
|
||
if (!this.form.bankName) {
|
||
uni.showToast({
|
||
title: '请输入开户行名称',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
if (!this.form.bankAccount) {
|
||
uni.showToast({
|
||
title: '请输入银行开户名',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
if (!this.form.bankCard) {
|
||
uni.showToast({
|
||
title: '请输入银行卡号',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
}
|
||
uni.showLoading({
|
||
title: '提交中...',
|
||
})
|
||
const _this = this
|
||
const res = await dealerWithdrawAddReq(this.form).catch(err => {
|
||
uni.hideLoading()
|
||
setTimeout(() => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon: 'none'
|
||
})
|
||
}, 200)
|
||
_this.getUserData()
|
||
})
|
||
if (res) {
|
||
console.log(res)
|
||
uni.hideLoading()
|
||
if (this.form.payType === 10) {
|
||
if (!wx.canIUse('requestMerchantTransfer')) {
|
||
wx.showModal({
|
||
content: '你的微信版本过低，请更新至最新版本。',
|
||
showCancel: false,
|
||
});
|
||
return
|
||
}
|
||
wx.requestMerchantTransfer({
|
||
mchId: '1738840566', // 商户号
|
||
appId: 'wx0c1587a63b0b9db5', // appId
|
||
package: res.data.package_info,
|
||
success: (res) => {
|
||
uni.navigateBack()
|
||
},
|
||
fail: async (err) => {
|
||
console.log('err', err)
|
||
uni.showToast({
|
||
title: '您取消了提现',
|
||
icon: 'none'
|
||
})
|
||
|
||
await updateDealerWithdraw({
|
||
id: res.data.id,
|
||
rejectReason: "用户取消",
|
||
applyStatus: 2,
|
||
auditTime: dayjs().unix()
|
||
})
|
||
await _this.getUserData()
|
||
},
|
||
})
|
||
} else {
|
||
uni.showToast({
|
||
title: '提现申请已提交',
|
||
icon: 'success'
|
||
})
|
||
setTimeout(() => {
|
||
uni.navigateBack()
|
||
}, 1500)
|
||
}
|
||
|
||
} else {
|
||
uni.hideLoading()
|
||
}
|
||
},
|
||
goWithdrawRecords() {
|
||
uni.navigateTo({
|
||
url: '/pages/bonus/withdraw-record'
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.withdraw-page {
|
||
min-height: 100vh;
|
||
//padding: 0 20rpx 40rpx;
|
||
background: #f5f5f5;
|
||
}
|
||
|
||
.page-hero {
|
||
//padding: 30rpx 6rpx 18rpx;
|
||
background: url('https://yaodongxiao.oss-cn-guangzhou.aliyuncs.com/20260126/462bfa04cf0eff8698884c38b9d17519.png') no-repeat top center / 100% auto;
|
||
}
|
||
|
||
.page-navbar {
|
||
padding: 0 6rpx;
|
||
}
|
||
|
||
.intro-card {
|
||
margin: 18rpx 20rpx 0;
|
||
padding: 20rpx 18rpx;
|
||
border-radius: 20rpx;
|
||
background: rgba(255, 255, 255, 0.9);
|
||
box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.08);
|
||
}
|
||
|
||
.card-title {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12rpx;
|
||
font-size: 28rpx;
|
||
font-weight: 700;
|
||
color: #1f2937;
|
||
}
|
||
|
||
.title-bar {
|
||
width: 6rpx;
|
||
height: 30rpx;
|
||
border-radius: 999rpx;
|
||
background: #2fc6a7;
|
||
}
|
||
|
||
.intro-text {
|
||
margin-top: 12rpx;
|
||
font-size: 26rpx;
|
||
color: #6b7280;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.block {
|
||
margin: 18rpx 20rpx 0;
|
||
}
|
||
|
||
.info-row {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding: 10rpx 0;
|
||
border-bottom: 1rpx solid #edf1f7;
|
||
color: var(--brand-primary);
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.info-row.clickable {
|
||
color: #1f2937;
|
||
}
|
||
|
||
.arrow {
|
||
color: #9ca3af;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.balance {
|
||
color: var(--brand-primary);
|
||
font-weight: 700;
|
||
}
|
||
|
||
.form-row {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 12rpx 0;
|
||
border-bottom: 1rpx solid #edf1f7;
|
||
}
|
||
|
||
.form-row:last-of-type {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.label {
|
||
color: var(--text-main);
|
||
font-size: 26rpx;
|
||
min-width: 140rpx;
|
||
}
|
||
|
||
.input {
|
||
flex: 1;
|
||
text-align: right;
|
||
font-size: 26rpx;
|
||
color: var(--text-main);
|
||
}
|
||
|
||
.pay-types {
|
||
display: flex;
|
||
gap: 12rpx;
|
||
justify-content: flex-end;
|
||
flex: 1;
|
||
}
|
||
|
||
.pay-type {
|
||
padding: 6rpx 16rpx;
|
||
border-radius: 999rpx;
|
||
border: 1rpx solid #c7d2fe;
|
||
color: #4f46e5;
|
||
font-size: 22rpx;
|
||
font-weight: 700;
|
||
background: #eef2ff;
|
||
}
|
||
|
||
.pay-type.active {
|
||
border-color: #2fc6a7;
|
||
color: #2fc6a7;
|
||
background: #e6fffa;
|
||
}
|
||
|
||
.submit {
|
||
margin-top: 18rpx;
|
||
padding: 14rpx;
|
||
height: 60rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
</style>
|