408 lines
9.4 KiB
Vue
408 lines
9.4 KiB
Vue
<template>
|
|
<view class="container">
|
|
<!-- 头部导航 -->
|
|
<view class="nav-bar">
|
|
<view class="back-btn" @click="navigateBack">
|
|
<image src="/src/static/pic/mark/more-left.png" mode="aspectFit"></image>
|
|
</view>
|
|
<text class="title">{{ $t('bank.myBank') }}</text>
|
|
<view class="right-placeholder"></view>
|
|
</view>
|
|
|
|
<view class="header">
|
|
<text class="subtitle">{{$t('bank.bind')}} {{cards.length}} {{ $t('bank.bankcard') }}</text>
|
|
</view>
|
|
|
|
<!-- 银行卡列表 -->
|
|
<scroll-view class="card-list" scroll-y>
|
|
<!-- 添加新卡 -->
|
|
<view class="card-item add-card" @click="navigateToBind">
|
|
<view class="add-icon">+</view>
|
|
<text class="add-text">{{ $t('bank.addcard') }}</text>
|
|
</view>
|
|
|
|
<!-- 已绑定银行卡 -->
|
|
<view
|
|
class="card-item"
|
|
v-for="(card, index) in cards"
|
|
:key="index"
|
|
:style="{background: getCardBg(card.bankCode)}"
|
|
@click="viewCardDetail(card)"
|
|
@longpress="onLongPress(card)"
|
|
>
|
|
<view class="card-top">
|
|
<text class="bank-name">{{card.bankName}}</text>
|
|
</view>
|
|
<view class="card-middle">
|
|
<text class="card-type">{{card.cardType}}</text>
|
|
</view>
|
|
<view class="card-bottom">
|
|
<text class="card-number">**** **** **** {{card.cardNumber.slice(-4)}}</text>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
|
|
<!-- 操作提示 -->
|
|
<view class="tips">
|
|
<text>{{$t('bank.longpressTip')}}</text>
|
|
</view>
|
|
|
|
<!-- 银行卡详情弹窗 -->
|
|
<uni-popup ref="cardPopup" type="center" :mask-click="false">
|
|
<view class="popup-content" v-if="currentCard">
|
|
<view class="popup-header">
|
|
<text class="popup-title">{{ $t('bank.bankdetail') }}</text>
|
|
<view class="close-btn" @click="closePopup">
|
|
<image src="/static/close.png" mode="aspectFit"></image>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="card-info">
|
|
<view class="info-item">
|
|
<text class="info-label">{{$t('bank.bankname')}}</text>
|
|
<text class="info-value">{{currentCard.bankName}}</text>
|
|
</view>
|
|
|
|
<view class="info-item">
|
|
<text class="info-label">{{$t('bank.banknum')}}</text>
|
|
<text class="info-value">{{formatCardNumber(currentCard.cardNumber)}}</text>
|
|
</view>
|
|
|
|
<view class="info-item">
|
|
<text class="info-label">{{$t('bank.cardtype')}}</text>
|
|
<text class="info-value">{{currentCard.cardType}}</text>
|
|
</view>
|
|
|
|
<view class="info-item">
|
|
<text class="info-label">{{$t('bank.cardholder')}}</text>
|
|
<text class="info-value">{{currentCard.cardHolder}}</text>
|
|
</view>
|
|
|
|
<view class="info-item">
|
|
<text class="info-label">{{$t('bank.bindphone')}}</text>
|
|
<text class="info-value">{{currentCard.phone}}</text>
|
|
</view>
|
|
|
|
<view class="info-item">
|
|
<text class="info-label">{{ $t('bank.bindtime') }}</text>
|
|
<text class="info-value">{{currentCard.bindTime}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<button class="confirm-btn" @click="closePopup">{{$t('bank.certain')}}</button>
|
|
</view>
|
|
</uni-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
cards: [
|
|
{
|
|
id: '1',
|
|
bankName: '中国工商银行',
|
|
bankCode: 'ICBC',
|
|
cardNumber: '6222021234567890123',
|
|
cardType: '储蓄卡',
|
|
cardHolder: '张三',
|
|
phone: '13812341234',
|
|
bindTime: '2023-01-01'
|
|
},
|
|
{
|
|
id: '2',
|
|
bankName: '招商银行',
|
|
bankCode: 'CMB',
|
|
cardNumber: '6225881234567890',
|
|
cardType: '信用卡',
|
|
cardHolder: '张三',
|
|
phone: '138****1234',
|
|
bindTime: '2023-02-15'
|
|
}
|
|
],
|
|
currentCard: null
|
|
}
|
|
},
|
|
methods: {
|
|
// 返回上一页
|
|
navigateBack() {
|
|
uni.navigateBack({
|
|
delta: 1
|
|
})
|
|
},
|
|
|
|
// 获取银行卡背景色
|
|
getCardBg(bankCode) {
|
|
const colorMap = {
|
|
'ICBC': 'linear-gradient(135deg, #c33a3a, #e05a5a)',
|
|
'CCB': 'linear-gradient(135deg, #1a6fc9, #3a8de0)',
|
|
'BOC': 'linear-gradient(135deg, #c32136, #e04154)',
|
|
'ABC': 'linear-gradient(135deg, #019858, #03a65a)',
|
|
'CMB': 'linear-gradient(135deg, #c60a1e, #e62a3d)',
|
|
'BOCOM': 'linear-gradient(135deg, #003366, #004080)',
|
|
'default': 'linear-gradient(135deg, #666666, #888888)'
|
|
}
|
|
return colorMap[bankCode] || colorMap['default']
|
|
},
|
|
|
|
// 跳转到绑定页面
|
|
navigateToBind() {
|
|
uni.navigateTo({
|
|
url: '/pages/more/addbankCard'
|
|
})
|
|
},
|
|
|
|
// 查看银行卡详情
|
|
viewCardDetail(cards) {
|
|
this.currentCard = cards
|
|
this.$refs.cardPopup.open()
|
|
},
|
|
|
|
// 关闭弹窗
|
|
closePopup() {
|
|
this.$refs.cardPopup.close()
|
|
},
|
|
|
|
// 格式化卡号显示
|
|
formatCardNumber(number) {
|
|
if (!number) return ''
|
|
// 每4位加一个空格
|
|
return number.replace(/(\d{4})(?=\d)/g, '$1 ')
|
|
},
|
|
|
|
// 长按解绑
|
|
onLongPress(card) {
|
|
uni.showModal({
|
|
title: this.$t('bank.unbindtips'),
|
|
content: this.$t('bank.certainunbind')+`${card.bankName}`+this.$t('bank.endfour')+`${card.cardNumber.slice(-4)}`+this.$t('bank.card'),
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
this.unbindCard(card.id)
|
|
}
|
|
}
|
|
})
|
|
},
|
|
|
|
// 解绑银行卡
|
|
unbindCard(cardId) {
|
|
uni.showLoading({ title: this.$t('bank.unbinding') })
|
|
|
|
// 模拟API请求
|
|
setTimeout(() => {
|
|
this.cards = this.cards.filter(card => card.id !== cardId)
|
|
uni.hideLoading()
|
|
uni.showToast({
|
|
title: this.$t('bank.unbindSuccess'),
|
|
icon: 'success'
|
|
})
|
|
}, 1000)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.container {
|
|
padding: 20rpx 30rpx;
|
|
background-color: #f5f5f5;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
/* 导航栏样式 */
|
|
.nav-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 20rpx;
|
|
padding-top: var(--status-bar-height);
|
|
|
|
.back-btn {
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
image {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
filter: invert(1);
|
|
margin-right: 40rpx;
|
|
}
|
|
}
|
|
|
|
.title {
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
flex: 1;
|
|
text-align: center;
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.right-placeholder {
|
|
width: 60rpx;
|
|
}
|
|
}
|
|
|
|
.header {
|
|
margin-bottom: 40rpx;
|
|
|
|
.subtitle {
|
|
font-size: 28rpx;
|
|
color: #999;
|
|
}
|
|
}
|
|
|
|
.card-list {
|
|
height: calc(100vh - 260rpx);
|
|
|
|
.card-item {
|
|
height: 240rpx;
|
|
border-radius: 20rpx;
|
|
padding: 30rpx;
|
|
margin-bottom: 30rpx;
|
|
color: #fff;
|
|
position: relative;
|
|
overflow: hidden;
|
|
box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.1);
|
|
|
|
&.add-card {
|
|
background-color: #fff;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border: 2rpx dashed #ccc;
|
|
|
|
.add-icon {
|
|
font-size: 60rpx;
|
|
color: #2979FF;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.add-text {
|
|
font-size: 32rpx;
|
|
color: #2979FF;
|
|
}
|
|
}
|
|
|
|
.bank-logo {
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.card-top {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 30rpx;
|
|
|
|
.bank-name {
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.card-middle {
|
|
margin-bottom: 40rpx;
|
|
|
|
.card-type {
|
|
font-size: 28rpx;
|
|
background: rgba(255, 255, 255, 0.2);
|
|
padding: 6rpx 16rpx;
|
|
border-radius: 20rpx;
|
|
}
|
|
}
|
|
|
|
.card-bottom {
|
|
.card-number {
|
|
font-size: 36rpx;
|
|
letter-spacing: 2rpx;
|
|
}
|
|
}
|
|
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: -50rpx;
|
|
right: -50rpx;
|
|
width: 200rpx;
|
|
height: 200rpx;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.tips {
|
|
text-align: center;
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
margin-top: 30rpx;
|
|
}
|
|
|
|
/* 弹窗样式 */
|
|
.popup-content {
|
|
width: 600rpx;
|
|
background-color: #fff;
|
|
border-radius: 20rpx;
|
|
padding: 40rpx;
|
|
box-sizing: border-box;
|
|
|
|
.popup-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 40rpx;
|
|
|
|
.popup-title {
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
|
|
.close-btn {
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
image {
|
|
width: 30rpx;
|
|
height: 30rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.card-info {
|
|
.info-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 30rpx;
|
|
|
|
.info-label {
|
|
font-size: 28rpx;
|
|
color: #999;
|
|
}
|
|
|
|
.info-value {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
}
|
|
|
|
.confirm-btn {
|
|
margin-top: 50rpx;
|
|
background-color: #2979FF;
|
|
color: #fff;
|
|
border-radius: 50rpx;
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
font-size: 32rpx;
|
|
}
|
|
}
|
|
</style> |