183 lines
3.3 KiB
Vue
183 lines
3.3 KiB
Vue
<script setup>
|
|
// 我的银行卡
|
|
import {
|
|
ref,
|
|
computed,
|
|
reactive,
|
|
getCurrentInstance
|
|
} from 'vue'
|
|
import {
|
|
useStore
|
|
} from 'vuex'
|
|
import {
|
|
onLoad,
|
|
onUnload,
|
|
} from '@dcloudio/uni-app'
|
|
// 工具库
|
|
import util from '@/common/js/util.js'
|
|
// api
|
|
import api from '@/api/index.js'
|
|
const {
|
|
proxy
|
|
} = getCurrentInstance()
|
|
// 列表
|
|
const list = reactive([])
|
|
// 滑动菜单
|
|
const options = reactive([{
|
|
text: '解绑',
|
|
style: {
|
|
backgroundColor: '#007aff'
|
|
},
|
|
cb: (event) => removeBank(event)
|
|
}])
|
|
|
|
onLoad(() => {
|
|
// 获取列表
|
|
getList()
|
|
// 开启监听
|
|
addListener()
|
|
})
|
|
|
|
onUnload(() => {
|
|
// 关闭监听
|
|
removeListener()
|
|
})
|
|
|
|
// 开启监听
|
|
function addListener() {
|
|
uni.$on('updateBindingBank', () => {
|
|
// 获取列表
|
|
getList()
|
|
})
|
|
}
|
|
|
|
// 关闭监听
|
|
function removeListener() {
|
|
uni.$off('updateBindingBank')
|
|
}
|
|
|
|
// 获取列表
|
|
function getList() {
|
|
api.mine.getBankCards({}).then(rs => {
|
|
if (rs.code == 200) {
|
|
Object.assign(list, rs.data)
|
|
return
|
|
}
|
|
util.alert({
|
|
content: rs.msg,
|
|
showCancel: false,
|
|
})
|
|
})
|
|
}
|
|
|
|
// 跳转
|
|
function link(url) {
|
|
uni.navigateTo({
|
|
url,
|
|
})
|
|
}
|
|
|
|
/**
|
|
* 右滑菜单项点击
|
|
* @param {Object} event
|
|
*/
|
|
function handleItem(event, item) {
|
|
console.log('event', event, item)
|
|
event.content.cb(item)
|
|
proxy.$refs.swipeAction.closeAll()
|
|
}
|
|
|
|
/**
|
|
* 删除银行卡
|
|
* @param {Object} item 银行卡信息
|
|
*/
|
|
function removeBank(item) {
|
|
util.alert({
|
|
content: '删除后不可恢复，确认删除？',
|
|
}).then(rs => {
|
|
api.mine.deleteBankCard({
|
|
path: [item.cardId],
|
|
}).then(rs => {
|
|
if (rs.code == 200) {
|
|
// 获取列表
|
|
getList()
|
|
return
|
|
}
|
|
util.alert({
|
|
content: rs.msg,
|
|
showCancel: false,
|
|
})
|
|
})
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<view class="app">
|
|
<view class="list">
|
|
<uni-swipe-action ref="swipeAction">
|
|
<view class="card item" v-for="(item,index) in list" :key="index">
|
|
<uni-swipe-action-item :right-options="options" @click="handleItem($event,item)">
|
|
<view class="main ptb30 plr40">
|
|
<view class="name">{{item.bankName}}</view>
|
|
<view class="type">
|
|
<text v-if="item.cardType == 'DEBIT'">借记卡</text>
|
|
<text v-else-if="item.cardType == 'CREDIT'">信用卡</text>
|
|
<text v-else-if="item.cardType == 'PREPAID'">预付卡</text>
|
|
<text v-else-if="item.cardType == 'QUASI_CREDIT'">准贷记卡</text>
|
|
</view>
|
|
<view class="number">{{item.cardNumber}}</view>
|
|
</view>
|
|
</uni-swipe-action-item>
|
|
</view>
|
|
</uni-swipe-action>
|
|
|
|
<view class="item add rows ptb30 plr40" @click="link('/pages/mine/setting/bankCardAdd')">
|
|
<view>添加银行卡</view>
|
|
<uni-icons type="right" color="#999" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
// 列表
|
|
.list {
|
|
.item {
|
|
overflow: hidden;
|
|
margin: 20rpx;
|
|
border-radius: 25rpx;
|
|
}
|
|
|
|
// 卡片
|
|
.card {
|
|
background: linear-gradient(130deg, #ff8888 0%, #ff4142 35%, #f65253ff 60%, #ff9999 100%);
|
|
color: #fff;
|
|
|
|
// 名称
|
|
.name {
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
// 类型
|
|
.type {
|
|
color: #ffffffcc;
|
|
font-size: 26rpx;
|
|
}
|
|
|
|
// 卡号
|
|
.number {
|
|
letter-spacing: 1rpx;
|
|
margin: 30rpx 0;
|
|
font-size: 40rpx;
|
|
}
|
|
}
|
|
|
|
//
|
|
.add {
|
|
background: #fff;
|
|
// border: 2rpx solid #ff4142;
|
|
}
|
|
}
|
|
</style> |