<template>
|
<view class="page">
|
<view class="nav" :style="'height:' + navBarHeight + 'px'">
|
<view class="nav-back" :style="'top:' + navTop + 'px;height:' + navHeight + 'px'" @tap="goBack"><image class="back-icon" src="/static/icons/lucide/back-left.svg" mode="aspectFit"></image></view>
|
<text class="nav-title" :style="'top:' + navTop + 'px;height:' + navHeight + 'px'">选择银行卡</text>
|
</view>
|
<view class="add" @tap="addCard">添加银行卡</view>
|
<scroll-view class="scroll" scroll-y="true"><view v-if="loading" class="state">正在加载银行卡</view><view v-else-if="cards.length == 0" class="state">暂无银行卡</view><view v-for="card in cards" :key="card.id" class="card" @tap="selectCard(card)"><view class="row"><text class="name">{{card.bankName}}</text><text :class="'status ' + card.status">{{statusText(card.status)}}</text></view><text class="number">{{card.cardMasked}}</text><text class="branch">{{card.branchName}}</text><text v-if="card.reason.length > 0" class="reason">{{card.reason}}</text></view></scroll-view>
|
</view>
|
</template>
|
<script setup lang="uts">
|
import { loadBankCards, SettlementBankCard } from '../../services/settlement.uts'
|
const storageKey = 'merchant-withdrawal-selected-bank-id'
|
const cards = ref<Array<SettlementBankCard>>([]); const loading = ref(true)
|
const navTop = ref(28); const navHeight = ref(32); const navBarHeight = ref(76)
|
const goBack = () => uni.navigateBack()
|
const addCard = () => uni.navigateTo({ url: '/pages/bank-card-add/bank-card-add' })
|
const statusText = (value: string): string => value == 'approved' ? '已通过' : value == 'rejected' ? '未通过' : '审核中'
|
const selectCard = (card: SettlementBankCard) => { if (card.status != 'approved') { uni.showToast({ title: card.reason.length > 0 ? card.reason : '该银行卡尚未审核通过', icon: 'none' }); return }; uni.setStorageSync(storageKey, card.id); uni.navigateBack() }
|
const load = () => { loading.value = true; loadBankCards((data) => { cards.value = data; loading.value = false }, (error: any) => { loading.value = false; uni.showToast({ title: error.message || '银行卡加载失败', icon: 'none' }) }) }
|
onLoad(() => {
|
// Align every custom navigation element to the native capsule's center line.
|
// #ifdef MP-WEIXIN
|
const capsule = uni.getMenuButtonBoundingClientRect()
|
navTop.value = capsule.top
|
navHeight.value = capsule.height
|
navBarHeight.value = capsule.top + capsule.height + 16
|
// #endif
|
})
|
onShow(() => load())
|
</script>
|
<style>.page{height:100vh;background:#f4f6f9}.nav{height:174rpx;padding:68rpx 38rpx 0;display:flex;position:relative;justify-content:center;align-items:center;box-sizing:border-box;color:#202b3e}.nav-back{display:flex;width:64rpx;height:64rpx;position:absolute;left:38rpx;top:89rpx;align-items:center;justify-content:center;z-index:2}.back-icon{width:38rpx;height:38rpx}.nav-title{width:100%;font-size:34rpx;line-height:48rpx;text-align:center;font-weight:700}.nav-right-placeholder{width:64rpx;height:64rpx;position:absolute;right:38rpx;top:89rpx}.add{height:88rpx;margin:0 34rpx 28rpx;border-radius:44rpx;background:#ff7625;color:#fff;text-align:center;line-height:88rpx;font-weight:700}.scroll{height:calc(100vh - 290rpx);padding:0 34rpx;box-sizing:border-box}.card{padding:28rpx;margin-bottom:22rpx;background:#fff;border-radius:28rpx}.row{display:flex;justify-content:space-between}.name{font-size:30rpx;font-weight:700;color:#2c3748}.number{display:block;margin-top:20rpx;font-size:28rpx;color:#3a4556}.branch,.reason{display:block;margin-top:10rpx;color:#8993a1;font-size:23rpx}.reason{color:#e95b5b}.status{font-size:23rpx}.approved{color:#249765}.pending{color:#e58b28}.rejected{color:#e95b5b}.state{padding:150rpx 0;text-align:center;color:#8993a1}</style>
|
<style>
|
/* Match the shared merchant navigation: one-line title centered on the capsule. */
|
.nav-title {
|
position: absolute;
|
left: 112rpx;
|
right: 112rpx;
|
width: auto;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
line-height: 1;
|
white-space: nowrap;
|
}
|
.nav-back {
|
left: 16px;
|
width: 48px;
|
justify-content: flex-start;
|
}
|
.back-icon { width: 44rpx; height: 44rpx; transform: translateY(5px); }
|
.nav-right-placeholder { display: none; }
|
</style>
|
