183 lines
3.3 KiB
Vue
183 lines
3.3 KiB
Vue
<template>
|
|
<view>
|
|
<view class="cardList" v-for="item in cards" :key="item.id" @click="editIc(item)">
|
|
<image src="@/static/img/exp/map.svg" class="cardBack" mode=""></image>
|
|
<view class="cardName">
|
|
{{item.bankName}}
|
|
</view>
|
|
<view class="cardType">
|
|
储蓄卡
|
|
</view>
|
|
<view class="cardNo">
|
|
{{bankCardFilter(item.cardNumber)}}
|
|
</view>
|
|
<view class="delect" @click.stop="delect(item.id)" v-if="cards.length > 1 && item.def != 1">
|
|
<image src="@/static/img/exp/link.svg" mode=""></image>
|
|
<view class="delectContent">
|
|
解绑银行卡
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="btn" @click="addIc">
|
|
<image src="@/static/img/add.svg" mode=""></image>
|
|
添加银行卡
|
|
</view>
|
|
<view class="tx">
|
|
目前仅支持储蓄卡
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
getUserCards,
|
|
remove
|
|
} from '@/api/bank.js'
|
|
import {
|
|
bankCardFilter
|
|
} from '@/untils/format.js'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
cards: []
|
|
}
|
|
},
|
|
onShow() {
|
|
this.getData()
|
|
},
|
|
methods: {
|
|
getData() {
|
|
getUserCards().then(res => {
|
|
this.cards = res.data.data
|
|
})
|
|
},
|
|
addIc: function() {
|
|
uni.navigateTo({
|
|
url: './add'
|
|
})
|
|
},
|
|
editIc(ic) {
|
|
uni.navigateTo({
|
|
url: `./add?id=${ic.id}&name=${ic.bankName}&card=${ic.cardNumber}&def=${ic.def}`
|
|
})
|
|
},
|
|
delect(id) {
|
|
uni.showModal({
|
|
title: '解绑银行卡',
|
|
content: '解绑银行卡后工资将不会发放到此银行卡中',
|
|
cancelText: '保持绑定',
|
|
cancelColor: '#1B66FF',
|
|
confirmText: '仍要解绑',
|
|
confirmColor: '#1B66FF',
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
remove(id).then(() => {
|
|
this.getData()
|
|
})
|
|
}
|
|
}
|
|
});
|
|
},
|
|
bankCardFilter
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.cardBack {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
/* z-index: -1; */
|
|
}
|
|
|
|
.tx {
|
|
font-family: PingFangSC-Regular;
|
|
font-size: 24rpx;
|
|
color: #999999;
|
|
text-align: center;
|
|
margin-top: 20rpx;
|
|
}
|
|
|
|
.btn image {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
}
|
|
|
|
.btn {
|
|
width: 690rpx;
|
|
margin: 30rpx;
|
|
background-color: #1B66FF;
|
|
color: #fff;
|
|
height: 90rpx;
|
|
line-height: 90rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 8rpx;
|
|
}
|
|
|
|
.delect image {
|
|
width: 20rpx;
|
|
height: 20rpx;
|
|
|
|
}
|
|
|
|
.delect {
|
|
position: absolute;
|
|
right: 40rpx;
|
|
top: 30rpx;
|
|
background-color: rgba(255, 255, 255, 0.3) !important;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-family: PingFangSC-Regular;
|
|
font-size: 24rpx;
|
|
color: #FFFFFF;
|
|
height: 36rpx;
|
|
width: 170rpx;
|
|
}
|
|
|
|
.cardNo {
|
|
font-family: PingFangSC-Regular;
|
|
font-size: 32rpx;
|
|
color: #FFFFFF;
|
|
position: absolute;
|
|
left: 40rpx;
|
|
bottom: 40rpx;
|
|
}
|
|
|
|
.cardType {
|
|
font-family: PingFangSC-Regular;
|
|
font-size: 26rpx;
|
|
color: #FFFFFF;
|
|
padding-left: 40rpx;
|
|
padding-top: 15rpx;
|
|
}
|
|
|
|
.cardName {
|
|
padding-left: 40rpx;
|
|
padding-top: 50rpx;
|
|
font-family: PingFangSC-Medium;
|
|
font-size: 36rpx;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.cardList {
|
|
position: relative;
|
|
width: 690rpx;
|
|
margin: 30rpx;
|
|
background-image: linear-gradient(-31deg, #3E8EED 0%, #6BA5FF 24%, #84BDFF 45%, #397AFF 100%);
|
|
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.30);
|
|
border-radius: 15rpx;
|
|
height: 280rpx;
|
|
}
|
|
|
|
page {
|
|
background-color: #f6f6f6;
|
|
}
|
|
</style>
|