银行卡页面
This commit is contained in:
小林
284
src/pages/more/bank.vue
Normal file
284
src/pages/more/bank.vue
Normal file
@@ -0,0 +1,284 @@
|
||||
<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>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
cards: [
|
||||
{
|
||||
id: '1',
|
||||
bankName: '中国工商银行',
|
||||
bankCode: 'ICBC',
|
||||
cardNumber: '6222021234567890123',
|
||||
cardType: '储蓄卡',
|
||||
cardHolder: '张三',
|
||||
phone: '138****1234',
|
||||
bindTime: '2023-01-01'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
bankName: '招商银行',
|
||||
bankCode: 'CMB',
|
||||
cardNumber: '6225881234567890',
|
||||
cardType: '信用卡',
|
||||
cardHolder: '张三',
|
||||
phone: '138****1234',
|
||||
bindTime: '2023-02-15'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
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(card) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/more/detail?id=${card.id}`
|
||||
})
|
||||
},
|
||||
|
||||
// 长按解绑
|
||||
onLongPress(card) {
|
||||
uni.showModal({
|
||||
title: '解绑银行卡',
|
||||
content: `确定要解绑${card.bankName}尾号${card.cardNumber.slice(-4)}的银行卡吗？`,
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
this.unbindCard(card.id)
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 解绑银行卡
|
||||
unbindCard(cardId) {
|
||||
uni.showLoading({ title: '处理中...' })
|
||||
|
||||
// 模拟API请求
|
||||
setTimeout(() => {
|
||||
this.cards = this.cards.filter(card => card.id !== cardId)
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: '解绑成功',
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user