crowd-test-service-frontend/src/pages/UserCenter/BankCard.vue

<template>
  <div>
    <el-row :gutter="15">
      <el-col :span="8" v-for="item in bankCardVOList" :key="item.id">
        <div class="bank-card">
          <div class="bank-card-title" style="padding: 10px;height:43px">
            <img src="../../assets/img/bankimg.png">
            <span class="" style="font-size: 16px;font-weight: bold;line-height: 43px">{{item.name}}</span>
            <el-button type="primary" plain class="pull-right" size="mini" @click="requestUntieBankCard(item)">解绑
            </el-button>
          </div>
          <div class="bank-card-detail-wrapper">
            <div class="bank-card-detail">
              <div class="bank-card-detail-info">{{item.user}}</div>
              <div class="bank-card-detail-info">{{item.number}}</div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-dialog
      title="提示"
      :visible.sync="untieBankCard"
      width="30%"
    >
      <span>确定解绑{{nowCard.name}},卡号为：{{nowCard.number}}的银行卡吗？</span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="untieBankCard = false">取 消</el-button>
    <el-button type="primary" @click="handleUntieBankCard">确 定</el-button>
  </span>
    </el-dialog>

  </div>

</template>

<script>
  import {storageGet} from '@/js/index'
  import Http from '@/js/http.js'
  import BankCard from './BankCard'

  export default {
    name: "BankCard",
    props: ['bankCardVOList'],
    data() {
      return {
        untieBankCard: false,
        nowCard: {},
        user: {}
      }
    },
    methods: {
      setUserInfo() {
        this.user = storageGet('user') && storageGet('user').userVO;
      },
      requestUntieBankCard(item) {
        this.untieBankCard = true;
        this.nowCard = item;
      },
      handleUntieBankCard() {
        Http.delete(`/api/personal/deletebankcard/${this.nowCard.id}/${this.user.id}`,{}).then((res) => {
          //调用父组件的loadData方法
          this.$emit('loadData');
          this.untieBankCard = false
        })
      },
    },
    mounted() {
      this.setUserInfo();
    }
  }
</script>

<style scoped lang="less">
  .bank-card {
    /*width:285px;*/
    height: 160px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 1px 6px 0px rgba(8, 6, 6, 0.13);
    margin-bottom: 10px;

    .bank-card-detail-wrapper {
      padding: 10px;

      .bank-card-detail {
        margin-bottom: 5px;

        .bank-card-detail-title {
          font-size: 14px;
        }

        .bank-card-detail-info {
          margin-left: 43px;
        }
      }
    }
  }
</style>