<template> <div id="bank-card"> <div class="info"> <div class="info-icon"> <img src="@/assets/userBind/info.png" > <span>温馨提示</span> </div> <p>推荐使用农行卡,农行卡支付免收手续费!</p> </div> <div class="my-card"> <div class="top"> <div class="left"> <img src="@/assets/userBind/bankIcon.png" class="icon" > <span class="top-word"> 我的卡 <span class="sum">(共{{ getBankList.length }}张)</span> </span> </div> <img src="@/assets/userBind/add.png" class="icon-right" @click="sendFlag(true)" > </div> <div class="clear" /> <div class="card-content"> <ul> <li v-for="(item,index) in getBankList" :key="index" > <item-option class="slider"> <div :style="'background-image: url('+ changeBgImg (item) +')'" class="my-bank-card" @click="sendList(item)" > <div class="card-info"> <span class="name">{{ item.bank_full_name }}</span> <span class="card-type">{{ item.bank_card_type }}</span> <span class="number">卡号</span> <span class="card-number">**** **** **** {{ selectLast (item) }}</span> </div> </div> <div slot="buttons" class="button"> <option-button text @click.native="deleteFun(item.bank_account_num)" /> </div> </item-option> </li> </ul> </div> </div> </div> </template> <script> import backImg1 from '@/assets/userBind/nong.png' import backImg2 from '@/assets/userBind/unNong.png' export default { props: { 'getBankList': { default: [], type: Array, }, 'from': { default: null, type: Boolean, }, }, data () { return { backImg: null, showModalValue: true, } }, methods: { sendFlag (isClear) { this.showModalValue = true this.$emit('getInfo', this.showModalValue, isClear) }, sendList (a) { this.$emit('getList', a) this.sendFlag(false) }, changeBgImg (item) { if (item.bank_full_name.indexOf('农业银行') !== -1) { return backImg1 } else { return backImg2 } }, selectLast (item) { let num = item.bank_account_num return num.substring(num.length - 4) }, deleteFun (e) { this.hlsPopup.showConfirm({ title: '提示', content: '您确认删除吗?', onConfirm: data => { if (data === 1) { let index = this.getBankList.findIndex(item => { if (item.bank_account_num === e) { return true } }) this.getBankList.splice(index, 1) let vm = this let url = process.env.basePath + 'bp_bank_delete' let param = { 'master': { 'bp_id': this.from ? this.$route.params.bp_id : window.localStorage.getItem('user_id'), 'bank_account_num': e, }, } vm.hlsPopup.showLoading('请稍候') vm.hlsHttp.post(url, param).then(function (res) { vm.hlsPopup.hideLoading() if (res.result === 'S') { vm.hlsPopup.showSuccess('删除成功') } else { vm.hlsPopup.showLongCenter(res.message) } }) } }, }) }, }, } </script> <style lang="less" scoped> #bank-card { .info { height: 70px; background-color: rgba(142, 195, 30, 0.1); .info-icon { height: 20px; padding-top: 20px; display: flex; align-items: center; img { width: 15.8px; height: 15.8px; margin-left: 17.1px; } span { font-family: PingFangSC-Semibold; font-size: 14px; color: #8ec31e; margin-left: 9px; letter-spacing: 0.5px; line-height: 20px; } } p { font-family: PingFangSC-Regular; font-size: 13px; color: #656464; width: 310px; margin-left: 42px; letter-spacing: 0.4px; line-height: 18px; margin-top: 8px; } } .my-card { .top { width: 320px; margin: 0 auto; margin-top: 13px; .left { height: 32px; display: flex; align-items: center; float: left; .icon { width: 18px; height: 20px; margin-right: 4px; } .top-word { font-family: PingFangSC-Semibold; font-size: 15px; color: @headerColor; letter-spacing: 0.46px; .sum { font-family: PingFangSC-Semibold; font-size: 15px; color: #4d5d6c; letter-spacing: 0.46px; } } } .icon-right { width: 34px; height: 34px; float: right; } } .clear { clear: both; } .card-content { width: 350px; padding-left: 28px; overflow: hidden; margin-top: 16px; li { margin-bottom: 10px; .slider { height: 100%; margin-left: -14px; } } .my-bank-card { width: 320px; height: 190px; box-shadow: 0 5px 20px 0 rgba(101, 101, 101, 0.25); border-radius: 6px; background-size: 370px 240px; background-position: -20px; .card-info { font-family: PingFangSC-Medium; color: #ffffff; margin-left: 18px; padding-top: 15px; .name, .card-type { font-size: 16px; letter-spacing: 5.5px; line-height: 24px; } .card-type { display: block; margin-top: 9px; } .number { font-size: 12px; letter-spacing: 0; line-height: 16px; margin-top: 33px; display: block; margin-top: 33px; } .card-number { display: block; font-family: Avenir-Heavy; font-size: 16px; color: #ffffff; letter-spacing: 6px; line-height: 24px; } } } } } .swipeout-list .item .function { left: 330px; border-radius: 6px; width: 54px; height: 190px; background: url("../../../assets/userBind/delete.png") 16px 84.9px #fde5e8 no-repeat; background-size: 20px 20px; } } </style>