实名认证+修改密码
This commit is contained in:
小林
@@ -3,7 +3,7 @@
|
||||
<!-- 头部导航 -->
|
||||
<view class="nav-bar">
|
||||
<view class="back-btn" @click="navigateBack">
|
||||
<image src="/src/static/pic/mark/more-left.png" mode="aspectFit"></image>
|
||||
<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>
|
||||
@@ -46,6 +46,52 @@
|
||||
<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>
|
||||
|
||||
@@ -61,7 +107,7 @@ export default {
|
||||
cardNumber: '6222021234567890123',
|
||||
cardType: '储蓄卡',
|
||||
cardHolder: '张三',
|
||||
phone: '138****1234',
|
||||
phone: '13812341234',
|
||||
bindTime: '2023-01-01'
|
||||
},
|
||||
{
|
||||
@@ -74,7 +120,8 @@ export default {
|
||||
phone: '138****1234',
|
||||
bindTime: '2023-02-15'
|
||||
}
|
||||
]
|
||||
],
|
||||
currentCard: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@@ -107,17 +154,28 @@ export default {
|
||||
},
|
||||
|
||||
// 查看银行卡详情
|
||||
viewCardDetail(card) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/more/detail?id=${card.id}`
|
||||
})
|
||||
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: '解绑银行卡',
|
||||
content: `确定要解绑${card.bankName}尾号${card.cardNumber.slice(-4)}的银行卡吗？`,
|
||||
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)
|
||||
@@ -128,14 +186,14 @@ export default {
|
||||
|
||||
// 解绑银行卡
|
||||
unbindCard(cardId) {
|
||||
uni.showLoading({ title: '处理中...' })
|
||||
uni.showLoading({ title: this.$t('bank.unbinding') })
|
||||
|
||||
// 模拟API请求
|
||||
setTimeout(() => {
|
||||
this.cards = this.cards.filter(card => card.id !== cardId)
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: '解绑成功',
|
||||
title: this.$t('bank.unbindSuccess'),
|
||||
icon: 'success'
|
||||
})
|
||||
}, 1000)
|
||||
@@ -169,6 +227,7 @@ export default {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
filter: invert(1);
|
||||
margin-right: 40rpx;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -178,6 +237,7 @@ export default {
|
||||
color: #333;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.right-placeholder {
|
||||
@@ -281,4 +341,68 @@ export default {
|
||||
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>
|
||||
Reference in New Issue
Block a user