vue-insagent-pc/src/views/Letter/Wallet/BankCard.vue

<!-- 模板区域 -->
<template>
  <div id="body" class="flex f-wrap  a-c">
    <!-- 模板内容 -->
    <div class="bankClass " @click="bankAddVisible = true">
      <div class="add flex j-c a-c">
        <img src="../../../../static/bankadd.png" alt="">
        <span>添加银行卡提现</span>
      </div>
    </div>
    <div class="bankdata flex f-c j-s" :style="{ background: item.stylelist.background }"
      v-for="(item, index) in cardPackList" :key="index">
      <img class="Backgroundimage" src="../../../../static/bankLogo/img1.png" alt="">
      <div class="flex j-s a-start">
        <div class="flex">
          <div class="logo">
            <img :src="item.stylelist.logo" mode="">
          </div>
          <div class="banktitle flex f-c">
            <span>{{ item.bankAccount }}</span>
            <span>储蓄卡</span>
          </div>
        </div>
        <img src="../../../../static/bankdel.png" mode="" style="width: 24px;height: 24px;" @click="bankdel(item.id)"
          v-loading.fullscreen.lock="Loading">
      </div>
      <div class="bank flex j-s a-c">
        <div>****</div>
        <div>****</div>
        <div>****</div>
        <span>{{ item.bankNumber.slice(-4) }}</span>
      </div>
    </div>
    <el-dialog title="添加银行卡" :visible.sync="bankAddVisible" width="28%">
      <div class="dialogCentent">
        <el-form ref="form" :model="bankAddform" label-width="80px">
          <el-form-item label="选择银行">
            <el-select v-model="bankAddform.bankAccount" placeholder="点击选择银行卡">
              <el-option :label="item.label" :value="item.label" v-for="(item, index) in list " :key="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="银行卡">
            <el-input v-model="bankAddform.bankNumber" placeholder="请输入银行卡号"></el-input>
          </el-form-item>
          <el-form-item label="开户行">
            <el-input v-model="bankAddform.bankAddress" placeholder="请输入开户行"></el-input>
          </el-form-item>

        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="bankAddVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="bankAdd">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<!-- 行为区域 -->
<script>
export default {
  // 数据存放区域
  data() {
    return {
      bankAddform: {
        "bankNumber": "",
        "bankAccount": "",
        "bankAddress": "",
        "isDefault": 0,
      },
      bankAddVisible: false,
      Loading: false,
      cardPackList: [],
      list: [{
        value: '1',
        label: '中国工商银行'
      },
      {
        value: '2',
        label: '中国农业银行'
      },
      {
        value: '3',
        label: '中国银行'
      },
      {
        value: '4',
        label: '中国建设银行'
      },
      {
        value: '5',
        label: '交通银行'
      },
      {
        value: '6',
        label: '中国邮政储蓄银行'
      },
      {
        value: '7',
        label: '招商银行'
      },
      {
        value: '8',
        label: '中信银行'
      },
      {
        value: '9',
        label: '中国光大银行'
      },
      {
        value: '10',
        label: '华夏银行'
      },
      {
        value: '11',
        label: '中国民生银行'
      },
      {
        value: '12',
        label: '广发银行'
      },
      {
        value: '13',
        label: '平安银行'
      },
      {
        value: '14',
        label: '上海浦东发展银行'
      },
      {
        value: '15',
        label: '兴业银行'
      },
      {
        value: '16',
        label: '浙商银行'
      },
      {
        value: '17',
        label: '渤海银行'
      },
      {
        value: '18',
        label: '恒丰银行'
      },
      {
        value: '19',
        label: '北京银行'
      },
      {
        value: '20',
        label: '上海银行'
      },
      ],
      bankList: [{
        bankName: "中国邮政储蓄银行",
        logo: "../../../../static/bankLogo/youzheng.png",
        background: "linear-gradient(90deg, rgba(79, 136, 69, 0.7) 0%, #4f8845 100%)"
      },
      {
        bankName: "中国工商银行",
        logo: "../../../../static/bankLogo/gongshang.png",
        background: "linear-gradient(90deg, rgba(177, 0, 13, 0.7) 0%, #b1000d 100%)"
      },
      {
        bankName: "中国农业银行",
        logo: "../../../../static/bankLogo/nongye.png",
        background: "linear-gradient(90deg, rgba(86,152, 130, 0.7) 0%, #569882 100%)"
      },
      {
        bankName: "中国银行",
        logo: "../../../../static/bankLogo/zhongguo.png",
        background: "linear-gradient(90deg, rgba(157, 32, 40, 0.7) 0%, #9d2028 100%)"
      },
      {
        bankName: "中国建设银行",
        logo: "../../../../static/bankLogo/jianshe.png",
        background: "linear-gradient(90deg, rgba(6, 89, 159, 0.7) 0%, #06569F 100%)"
      },
      {
        bankName: "招商银行",
        logo: "../../../../static/bankLogo/zhaoshang.png",
        background: "linear-gradient(90deg, rgba(197, 0, 25, 0.7) 0%, #c50019 100%)"
      },
      {
        bankName: "中国民生银行",
        logo: "../../../../static/bankLogo/minsheng.png",
        background: "linear-gradient(90deg, rgba(84,149, 92, 0.7) 0%, #54955c 100%)"
      },
      {
        bankName: "中国光大银行",
        logo: "../../../../static/bankLogo/guangda.png",
        background: "linear-gradient(90deg, rgba(93, 30, 131, 0.7) 0%, #5d1e83 100%)"
      },
      {
        bankName: "中信银行",
        logo: "../../../../static/bankLogo/zhongxin.png",
        background: "linear-gradient(90deg, rgba(184, 0,22, 0.7) 0%, #b80016 100%)"
      },
      {
        bankName: "华夏银行",
        logo: "../../../../static/bankLogo/huaxia.png",
        background: "linear-gradient(90deg, rgba(216, 12, 24, 0.7) 0%, #d80c18 100%)"
      },
      {
        bankName: "中国交通银行",
        logo: "../../../../static/bankLogo/jiaotong.png",
        background: "linear-gradient(90deg, rgba(33, 58, 120, 0.7) 0%, #213a78 100%)"
      },
      {
        bankName: "晋商银行",
        logo: "../../../../static/bankLogo/jinshang.png",
        background: "linear-gradient(90deg, rgba(224, 150, 165, 0.7) 0%, #e096a5 100%)"
      },
      ],
    }
  },
  // 生命周期函数
  created() {
    this.banklist();
  },
  // 方法函数
  methods: {
    bankAdd() {
      this.$api.letter.insertByBankNumber(this.bankAddform).then((res) => {
        if (res.code == '200') {
          this.bankAddVisible = false;
          this.banklist();
          this.$message({
            type: 'success',
            message: "添加成功",
          });
        } else {
          this.$message({
            type: 'error',
            message: res.msg,
          });
        }
      });
    },
    bankdel(id) {
      this.$confirm('是否删除银行卡?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true;
        this.$api.letter.Bankdelete(id).then((res) => {
          if (res.code == '200') {
            this.banklist();
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.loading = false;
          } else {
            this.$message({
              type: 'error',
              message: res.msg,
            });
          }
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },
    banklist() {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      this.$api.letter.getUserBankList().then((res) => {
        if (res.code == '200') {
          res.data.map(val => {
            let name = this.bankList.find(ele => ele.bankName === val.bankAccount)
            if (name) {
              val.stylelist = {
                ...name
              };
            } else {
              val.stylelist = {
                logo: "/static/image/bindBank/img1.png",
                background: 'linear-gradient(90deg, rgba(229, 166,0,0.7) 0%, #e5a600 100%)',
              }
            }
          })
          this.cardPackList = res.data;
          loading.close();
        } else {
          this.$message({
            type: 'error',
            message: res.msg,
          });
        }
      });
    },
  },
  // 计算属性
  computed: {
  }
}
</script>
<!-- 样式区域 -->
<style lang='scss' scoped>
/deep/ {
  .el-dialog__body {
    background: #F2F2F2;
  }

  .el-dialog__footer {
    padding: 10px;
  }
}

.dialogCentent {
  background: #FFFFFF;
  border-radius: 4px 4px 4px 4px;
  padding: 10px;
}

#body {
  padding: 24px;
}

.bankClass,
.bankdata {
  width: 322px;
  height: 178px;
  background: linear-gradient(90deg, rgba(45, 77, 137, 0.7) 0%, #2D4D89 100%);
  border-radius: 12px 12px 12px 12px;
  font-size: 16px;
  color: #fff;
  padding: 14px;
  margin: 10px 40px;
  box-sizing: border-box;
  position: relative;
  cursor: pointer;

  .Backgroundimage {
    width: 117px;
    height: 107px;
    position: absolute;
    right: 0;
    bottom: 0;
  }

  .banktitle {
    margin-left: 12px;

    span:first-child {
      color: #fff;
      font-weight: 600;
      font-size: 16px;
    }

    span:last-child {
      color: #fff;
      font-size: 12px;
    }
  }

  .bank {
    font-size: 20px;
    color: #fff;
    margin-bottom: 30px;

    span {
      font-size: 20px;
    }
  }

  .add {
    width: 100%;
    height: 100%;
    border-radius: 8px 8px 8px 8px;
    border: 1px dashed #fff;
    background: transparent;

    img {
      width: 28px;
      height: 28px;
      margin-right: 16px;
    }
  }

  .logo {
    width: 40px;
    height: 40px;
    background: #FFFFFF;
    border-radius: 8px 8px 8px 8px;

    >img {
      width: 100%;
      height: 100%;
    }
  }



}

.bankClass:hover {
  background: linear-gradient(90deg, rgba(88, 113, 161, 0.7) 0%, #5871A1 100%);
}
</style>