couponCenter_mpapp/src/pages-B/payment/withdrawal.vue

<script setup lang="ts">
import { ref } from 'vue'
import { getBankcardList, netWithdraw } from '@/api/pay'
import type { bankcardListResponse, netWithdrawResponse } from '@/api/types/pay'
import { getImageUrl } from '@/utils/imageUtil'
import BankCardSelector from './bankCard-select.vue';

// 当前选择的银行卡
const bankCard = ref<bankcardListResponse>({ id: '', bankName: '', bankCardNumber: '', bankImage: '' })
// 当前可提现余额
const availableBalance = ref('0')
// 提现金额输入框的值
const withdrawalAmount = ref('')
// 银行卡数据
const bankCards = ref<bankcardListResponse[]>([])
// 银行卡数量
const bankCardNumber = ref(0)
// 默认选中的卡ID
const selectedCardId = ref('')
// 输入框焦点
const focus = ref(false)
// 域名
const domain = ref('')

// 页面加载时
onLoad((query?: Record<string, string>) => {
    if (query?.m?.length) availableBalance.value = query.m
    if (query?.bankNumber?.length) bankCardNumber.value = parseInt(query.bankNumber)
    fetchBankCards()
    
    // #ifdef H5
    domain.value = extractDomain(window.location.href)
    // #endif
    // #ifndef H5
    domain.value = extractDomain(import.meta.env.VITE_SERVER_BASEURL)
    // #endif
})

onReady(() => {
    focus.value = true
})

// 获取银行卡列表
function fetchBankCards() {
    getBankcardList().then((res: any) => {  
        if (res.data.code === 200) {
            bankCards.value = res.data.result.map((item: bankcardListResponse) => ({
                ...item,
                logo: item.bankImage,
                last4: item.bankCardNumber?.slice(-4) || ''
            }))

            // 默认选中第一张卡
            if (res.data.result && res.data.result.length > 0) {
                bankCard.value = res.data.result[0]
            }
        }
    }).catch((error: any) => {
        console.error('获取银行卡列表失败:', error)
    })
}

// 选择/修改银行卡
const bcSelector = ref()
function selectBankCard() {
    if (bankCardNumber.value === 0) {
        uni.navigateTo({ url: '/pages-B/payment/bankCard-edit' })
    } else {
        bcSelector.value?.open()
    }
}

// 选择事件回调
function handleCardSelect(card: bankcardListResponse) {
    console.log('您选择了:', card)
    bankCard.value = card
    uni.showToast({
        title: `已选择: ${card.bankName}`,
        icon: 'none'
    })
}

// 全部提现操作
function allWithdraw() {
    withdrawalAmount.value = availableBalance.value
    console.log('已设置全部提现:', withdrawalAmount.value)
}

// 申请提现
async function applyWithdrawal() {
    const amount = parseFloat(withdrawalAmount.value)
    const balance = parseFloat(availableBalance.value)
    
    if (amount > balance) {
        uni.showToast({
            title: '提现金额不能超过可提现余额',
            icon: 'none'
        })
        return
    }
    
    if (!bankCard.value.id) {
        uni.showToast({
            title: '请先添加银行卡',
            icon: 'none'
        })
        return
    }
    
    const params: netWithdrawResponse = {
        applyAmount: withdrawalAmount.value,
        bankCardId: bankCard.value.id,
        // callBackUrl: `${domain.value}/pages-B/payment/withdrawal?m=${availableBalance.value}`
    }
    console.log('提交提现申请:', params)

    // 提现
    uni.showLoading({ title: '提交中' })
	netWithdraw(params).then((res: any) => {
        if (res.data.code === 200) {
			uni.showToast({ title: '提交成功', icon: 'success' });
			setTimeout(() => {
				uni.hideLoading();
				uni.switchTab({
                    url: '/pages/income/income'
                });
			}, 1500);
		} else {
		  uni.$u.toast(res.data.message);
        }
        // else if (res.data.code === 99 && res.data.message) {
		// 	// 白名单接口请求失败-跳转三方链接
		// 	toThirdPartyLink(res.data.message);
		// }
	}).finally(() => {
		uni.hideLoading();
	});
}

// 跳转三方链接
function toThirdPartyLink(url: string) {
    // #ifdef H5
    window.location.href = url
    // #endif
    // #ifndef H5
    uni.navigateTo({
        url: `/pages-B/payment/web-view?webUrl=${encodeURIComponent(url)}`,
    })
    // #endif
}

// 取主域名
function extractDomain(url: string): string {
    const regex = /^(https?:\/\/[^\/]+)/
    const match = url.match(regex)
    return match ? match[1] : ''
}
</script>

<template>
	<view class="page-container new-content">
		<up-navbar title="提现" :auto-back="true" bgColor="#ffffff" :placeholder="true" :title-style="{ fontWeight: 'bold' }"></up-navbar>

		<view class="form-card">
			<view class="section-item" @click="selectBankCard">
				<view class="label">提现至</view>
				<view class="content">
					<view class="bank-info">
						<image 
							class="bank-icon" 
							:src="getImageUrl('@local/mine/icon-bankadd.png')"
							mode="heightFix"
						/>
						<text class="bank-name">{{ bankCard.bankName || bankCardNumber === 0 ? '添加银行卡' : '更换银行卡' }} <text v-if="bankCard.bankCardNumber">({{ bankCard.bankCardNumber.slice(-4) }})</text></text>
					</view>
                    <u-icon name="arrow-right" color="#C7C6CA" size="32rpx"></u-icon>
				</view>
			</view>

			<view class="section-input">
				<view class="label">提现金额</view>
				<view class="input-row">
					<text class="currency-symbol">¥</text>
					<u--input 
						type="digit" 
						border="none"
						fontSize="52rpx"
						placeholder="请输入提现金额" 
						:focus="focus"
						:customStyle="{ 
							padding: '0 10rpx'
						}"
						v-model="withdrawalAmount" 
					></u--input>
				</view>
				
				<view class="balance-info">
					<text>当前可提现余额{{ availableBalance }}元，</text>
					<text class="all-withdraw-btn" @click="allWithdraw">全部提现</text>
				</view>
				<template v-if="withdrawalAmount && parseFloat(withdrawalAmount) > 0">
					<view class="tips-info">
						<text class="l">到账金额</text>
						<text class="r">{{ (parseFloat(withdrawalAmount) - 1).toFixed(2) }}</text>
					</view>
					<view class="tips-info">
						<text class="l">手续费</text>
						<text class="r">1元</text>
					</view>
				</template>
			</view>
		</view>

		<view class="footer-bar">
            <u-button 
                :customStyle="{
                    color: '#fff',
                    background: 'linear-gradient( 90deg, #FF8F83 0%, #FF3F51 100%)',
                    borderRadius: '8rpx',
                }"
				:disabled="!withdrawalAmount || parseFloat(withdrawalAmount) <= 1" 
				@click="applyWithdrawal"
			>申请提现</u-button>
		</view>
        <!-- 选择器组件 -->
		<BankCardSelector 
			ref="bcSelector" 
			subtitle="请留意各银行到账时间"
			:dataList="bankCards"
			v-model="selectedCardId"
			@select="handleCardSelect"
		/>
	</view>
</template>

<style lang="scss" scoped>
.page-container {
	min-height: 100vh;
	background-color: #f8f8fa;
	display: flex;
	flex-direction: column;

	.form-card {
		flex: 1;
		display: flex;
		flex-direction: column;
	}
}

// 提现至：银行卡选择区域
.section-item {
	padding: 20rpx 32rpx;
	// margin-bottom: 20rpx;
	
	.label {
		font-weight: 500;
		font-size: 32rpx;
		color: #333333;
	}
	
	.content {
		padding-top: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.bank-info {
		display: flex;
		align-items: center;
		margin-right: 15rpx;
		
		.bank-icon {
			width: 48rpx;
			height: 48rpx;
			margin-right: 10rpx;
			display: block;
		}
		
		.bank-name {
			font-size: 30rpx;
			line-height: 30rpx;
		}
	}
}

// 提现金额输入区域
.section-input {
	flex: 1;
	padding: 24rpx 32rpx;
	background: #FFFFFF;
	box-shadow: 0 4rpx 10rpx 0 #DAE3F4;
	border-radius: 12rpx 12rpx 0 0;
	
	.label {
		font-weight: 400;
		font-size: 30rpx;
		color: #333333;
		margin-bottom: 20rpx;
	}
	
	.input-row {
		display: flex;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #E1E1E1;

		.currency-symbol {
			font-size: 52rpx; 
			font-weight: bold;
			color: #333;
			padding-right: 10rpx;
		}

        ::v-deep .u-input__content__field-wrapper__field {
			height: 60rpx;
		}
		// .withdrawal-input {
		// 	font-size: 52rpx;
		// 	padding: 0 10rpx;
		// 	flex: 1;
		// }
	}

	.balance-info {
		font-weight: 400;
		font-size: 28rpx;
		color: rgba(51,51,51,0.6);
		margin: 20rpx 0;
		
		.all-withdraw-btn {
			color: #0879FF;
			margin-left: 10rpx;
			
			&:active {
				opacity: 0.8;
			}
		}
	}

	.tips-info {
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.l {
			font-weight: 400;
			font-size: 28rpx;
			color: #666666;
		}

		.r {
			font-weight: 500;
			font-size: 28rpx;
			color: #262F48;
		}
	}
}

// 底部按钮
.footer-bar {
	::v-deep .u-button {
		width: 100%;
		height: 76rpx;
	}
}
</style>