163 lines
3.1 KiB
Vue
163 lines
3.1 KiB
Vue
<template>
|
|
<view class="bank-card-page">
|
|
<!-- 顶部导航栏 -->
|
|
<uni-nav-bar
|
|
left-icon="left"
|
|
title="常用银行卡"
|
|
@clickLeft="goBack()"
|
|
right-text="添加"
|
|
@clickRight="addBankCard"
|
|
fixed
|
|
color="#8B2316"
|
|
height="140rpx"
|
|
:border="false"
|
|
backgroundColor="#eeeeee"
|
|
>
|
|
</uni-nav-bar>
|
|
|
|
<!-- 银行卡列表 -->
|
|
<view class="card-list">
|
|
<view class="card-item" v-for="(card, index) in bankCards" :key="card.uuid">
|
|
<view class="card-logo">
|
|
<view class="logo-bg">
|
|
<text class="logo-text">{{ getBankLogo(card.open_bank) }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="card-info">
|
|
<view class="card-number">尾号{{ card.card_number }}储蓄卡</view>
|
|
<view class="bank-name">{{ card.open_bank }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<empty v-if="bankCards.length === 0"></empty>
|
|
|
|
<!-- 底部导航指示器 -->
|
|
<view class="bottom-indicator"></view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted } from 'vue';
|
|
import navTo from '@/utils/navTo';
|
|
import api from '@/api/api';
|
|
import empty from "@/components/empty/empty.vue"
|
|
const bankCards = ref([]);
|
|
|
|
// 银行卡数据
|
|
const getBankCardList = () => {
|
|
api.bankCardList({}).then(res => {
|
|
if (res.code === 200 && res.data.bankList) {
|
|
bankCards.value = res.data.bankList;
|
|
}
|
|
});
|
|
};
|
|
|
|
const goBack = () => {
|
|
uni.navigateBack();
|
|
};
|
|
|
|
const addBankCard = () => {
|
|
navTo({
|
|
url: '/pages_app/idcardAuth/idcardAuth'
|
|
});
|
|
};
|
|
|
|
// 获取银行logo文字
|
|
const getBankLogo = (bankName) => {
|
|
const bankLogos = {
|
|
'工商银行': '工',
|
|
'中国银行': '中',
|
|
'建设银行': '建',
|
|
'农业银行': '农',
|
|
'交通银行': '交',
|
|
'招商银行': '招',
|
|
'民生银行': '民',
|
|
'兴业银行': '兴',
|
|
'浦发银行': '浦',
|
|
'光大银行': '光',
|
|
'华夏银行': '华',
|
|
'中信银行': '信',
|
|
'平安银行': '平',
|
|
'广发银行': '广',
|
|
'邮储银行': '邮'
|
|
};
|
|
return bankLogos[bankName] || bankName.charAt(0);
|
|
};
|
|
|
|
onMounted(() => {
|
|
getBankCardList();
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.bank-card-page {
|
|
min-height: 100vh;
|
|
background: #F5F5F5;
|
|
position: relative;
|
|
}
|
|
|
|
/* 银行卡列表样式 */
|
|
.card-list {
|
|
padding: 30rpx;
|
|
|
|
.card-item {
|
|
background: #ffffff;
|
|
border-radius: 16rpx;
|
|
padding: 30rpx;
|
|
margin-bottom: 20rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
|
|
|
.card-logo {
|
|
margin-right: 30rpx;
|
|
|
|
.logo-bg {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
background: #E60012;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: 2rpx solid #E60012;
|
|
|
|
.logo-text {
|
|
color: #ffffff;
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
|
|
.card-info {
|
|
flex: 1;
|
|
|
|
.card-number {
|
|
font-size: 28rpx;
|
|
color: #000000;
|
|
margin-bottom: 8rpx;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.bank-name {
|
|
font-size: 24rpx;
|
|
color: #666666;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 底部指示器 */
|
|
.bottom-indicator {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 120rpx;
|
|
height: 6rpx;
|
|
background: #333333;
|
|
border-radius: 3rpx;
|
|
}
|
|
</style>
|