343 lines
7.7 KiB
Vue
343 lines
7.7 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-icon="plusempty"
|
||
right-icon-color="#8B2316"
|
||
@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"
|
||
style="margin-bottom: 20rpx;"
|
||
@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>
|
||
<view class="empty-container" v-if="bankCards.length === 0">
|
||
<image :src="emptyBankImg" class="empty-image"></image>
|
||
<text class="empty-text">使用常用卡，支付更快捷</text>
|
||
</view>
|
||
<!-- <empty v-if="bankCards.length === 0" :imgWidth="'218rpx'" :imgHeight="'164rpx'" :emptyImage="emptyBankImg" emptyDesc="使用常用卡，支付更快捷"></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"
|
||
import emptyBankImg from "@/static/empty_bank.png"
|
||
const bankCards = ref([]);
|
||
const openedSwipeUuid = ref('');
|
||
import { onLoad,onBackPress,onShow } 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);
|
||
}
|
||
});
|
||
onShow(() => {
|
||
getBankCardList();
|
||
});
|
||
onBackPress(() => {
|
||
if(!from.value){
|
||
plus.runtime.quit();
|
||
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);
|
||
};
|
||
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.empty-container {
|
||
height:800rpx;
|
||
min-width:600rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
.empty-image {
|
||
width: 218rpx;
|
||
height: 164rpx;
|
||
}
|
||
.empty-text {
|
||
margin-top: 20rpx;
|
||
font-size: 30rpx;
|
||
color: #999;
|
||
}
|
||
}
|
||
.bank-card-page {
|
||
min-height: 100vh;
|
||
background: #F5F5F5;
|
||
position: relative;
|
||
|
||
:deep(.uni-nav-bar-right-text) {
|
||
font-size: 32rpx;
|
||
}
|
||
}
|
||
|
||
/* 银行卡列表样式 */
|
||
.card-list {
|
||
top: calc(var(--status-bar-height) + 44px);
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0rpx;
|
||
overflow-y: scroll;
|
||
z-index: 1;
|
||
padding: 30rpx;
|
||
box-sizing: border-box;
|
||
|
||
.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>
|