310 lines
6.9 KiB
Vue
310 lines
6.9 KiB
Vue
<template>
|
|
<view class="bank-card-page">
|
|
<!-- 顶部导航栏 -->
|
|
<view class="navbox">
|
|
<view class="status_bar"></view>
|
|
<uni-nav-bar
|
|
left-icon="left"
|
|
title="常用银行卡"
|
|
@clickLeft="goBack"
|
|
right-text="添加"
|
|
@clickRight="addBankCard"
|
|
color="#8B2316"
|
|
|
|
:border="false"
|
|
backgroundColor="#eeeeee"
|
|
>
|
|
</uni-nav-bar>
|
|
|
|
</view>
|
|
<!-- 银行卡列表 -->
|
|
<view class="card-list">
|
|
<uni-swipe-action>
|
|
<uni-swipe-action-item
|
|
v-for="(card, index) in bankCards"
|
|
:key="card.uuid"
|
|
@change="onSwipeChange($event, card)"
|
|
>
|
|
<template v-slot:right>
|
|
<view class="swipe-right">
|
|
<view class="card-delete-btn" @click.stop="handleDeleteBankCard(card)">删除</view>
|
|
</view>
|
|
</template>
|
|
<view class="card-item" :class="{ 'is-swiping': openedSwipeUuid === card.uuid }">
|
|
<view class="card-logo">
|
|
<image
|
|
v-if="getBankLogoImg(card.open_bank)"
|
|
class="bank-logo-img"
|
|
:src="getBankLogoImg(card.open_bank)"
|
|
mode="aspectFit"
|
|
></image>
|
|
<view v-else 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>
|
|
</uni-swipe-action-item>
|
|
</uni-swipe-action>
|
|
</view>
|
|
<empty v-if="bankCards.length === 0" imgWidth="50%" empty-img="/static/empty_bank.png" empty-desc="使用常用卡，支付更快捷"></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 openedSwipeUuid = ref('');
|
|
import { onLoad,onBackPress } from '@dcloudio/uni-app';
|
|
const from = ref('');
|
|
const returnTo = ref('');
|
|
onLoad((options) => {
|
|
if(options.from){
|
|
from.value = options.from;
|
|
}
|
|
if (options.returnTo) {
|
|
returnTo.value = decodeURIComponent(options.returnTo);
|
|
}
|
|
});
|
|
onBackPress(() => {
|
|
if(!from.value){
|
|
uni.navigateBack();
|
|
return true;
|
|
}
|
|
});
|
|
// 银行卡数据
|
|
const getBankCardList = () => {
|
|
api.bankCardList({}).then(res => {
|
|
|
|
if (res.code === 200 && res.data) {
|
|
bankCards.value = res.data;
|
|
}
|
|
});
|
|
};
|
|
|
|
const goBack = () => {
|
|
if(!from.value){
|
|
plus.runtime.quit();
|
|
}else{
|
|
uni.navigateBack();
|
|
}
|
|
};
|
|
|
|
const addBankCard = () => {
|
|
const target = returnTo.value
|
|
? `/pages_app/idcardAuth/idcardAuth?returnTo=${encodeURIComponent(returnTo.value)}`
|
|
: '/pages_app/idcardAuth/idcardAuth';
|
|
navTo({
|
|
url: target
|
|
});
|
|
};
|
|
|
|
const bankLogoMap = {
|
|
'工商银行': '/static/icon_bankcard_gongshang.png',
|
|
'中国银行': '/static/icon_bankcard_zhongguo.png',
|
|
'建设银行': '/static/icon_bankcard_jianseyinhang.png',
|
|
'农业银行': '/static/icon_bankcard_nongyeyinhang.png',
|
|
'交通银行': '/static/icon_bankcard_jiatong.png',
|
|
'招商银行': '/static/icon_bankcard_zhaoshangyinhang.png',
|
|
'民生银行': '/static/icon_bankcard_minshneg.png',
|
|
'兴业银行': '/static/icon_bankcard_xingye.png',
|
|
'浦发银行': '/static/icon_bankcard_shanghaipudongfazhanyinhang.png',
|
|
'光大银行': '/static/icon_bankcard_guangda.png',
|
|
'华夏银行': '/static/icon_bankcard_huaxiayinhnag.png',
|
|
'中信银行': '/static/icon_bankcard_zhongxinshiye.png',
|
|
'平安银行': '/static/icon_bankcard_pingan.png',
|
|
'广发银行': '/static/icon_bankcard_guangfa.png',
|
|
'邮储银行': '/static/icon_bankcard_youzheng.png',
|
|
'上海银行': '/static/icon_bankcard_shanghai.png',
|
|
'北京银行': '/static/icon_bankcard_beijingyinhang.png'
|
|
};
|
|
|
|
const getBankLogoImg = (bankName) => {
|
|
return bankLogoMap[bankName] || '';
|
|
};
|
|
|
|
const handleDeleteBankCard = (card) => {
|
|
uni.showModal({
|
|
title: '确认删除',
|
|
content: `确定删除尾号${card.card_number}的银行卡吗？`,
|
|
success: async (modalRes) => {
|
|
if (!modalRes.confirm) return;
|
|
try {
|
|
const res = await api.deleteBankCard({
|
|
uuid: card.uuid
|
|
});
|
|
if (res.code === 200) {
|
|
uni.showToast({
|
|
title: '删除成功',
|
|
icon: 'none'
|
|
});
|
|
getBankCardList();
|
|
return;
|
|
}
|
|
uni.showToast({
|
|
title: res.msg || '删除失败',
|
|
icon: 'none'
|
|
});
|
|
} catch (error) {
|
|
uni.showToast({
|
|
title: '网络错误，请重试',
|
|
icon: 'none'
|
|
});
|
|
}
|
|
}
|
|
});
|
|
};
|
|
|
|
const onSwipeChange = (e, card) => {
|
|
const state = typeof e === 'string'
|
|
? e
|
|
: e?.position || e?.show || e?.detail?.position || e?.detail?.show || 'none';
|
|
openedSwipeUuid.value = state === 'right' ? card.uuid : '';
|
|
};
|
|
|
|
// 获取银行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;
|
|
|
|
:deep(.uni-nav-bar-right-text) {
|
|
font-size: 32rpx;
|
|
}
|
|
}
|
|
|
|
/* 银行卡列表样式 */
|
|
.card-list {
|
|
margin-top: calc(var(--status-bar-height) + 44px);
|
|
padding: 30rpx;
|
|
|
|
.swipe-right {
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: stretch;
|
|
padding-right: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.card-delete-btn {
|
|
min-width: 112rpx;
|
|
height: 100%;
|
|
padding: 0 24rpx;
|
|
border-radius: 0 16rpx 16rpx 0;
|
|
background: #E60012;
|
|
color: #ffffff;
|
|
font-size: 24rpx;
|
|
font-weight: 600;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.card-item {
|
|
background: #ffffff;
|
|
border-radius: 16rpx;
|
|
padding: 30rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
|
|
|
&.is-swiping {
|
|
border-top-right-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
|
|
.card-logo {
|
|
margin-right: 30rpx;
|
|
|
|
.bank-logo-img {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.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>
|