bankInfo.vue

<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-09-24 21:29:35
 * @LastEditTime: 2019-09-27 10:15:09
 * @LastEditors: Please set LastEditors
 -->
<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" >
      </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"
              >
                <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,
    },
  },
  data () {
    return {
      backImg: null,
      showModalValue: true,
    }
  },
  methods: {
    sendFlag () {
      this.showModalValue = true
      this.$emit('getInfo', this.showModalValue)
    },
    changeBgImg (item) {
      if (item.bank_full_name === '中国农业银行') {
        return backImg1
      } else {
        return backImg2
      }
    },
    selectLast (item) {
      console.log('item', item)
      let num = item.bank_account_num
      return num.substring(num.length - 4)
    },
    deleteFun (e) {
      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': window.localStorage.user_id,
          'bank_account_num': e,
        },
      }
      vm.hlsPopup.showLoading('请稍候')
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          console.log(res)
        }
      })
    },
  },
}
</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: #00469c;
              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: 320px 190px;
            .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>