web-base-h5/pages/mine/bindBank/index.vue

<template>
  <view class="content">
    <view class="tablebox" v-if="tableData.length > 0">
      <view
        class="card"
        v-for="(item, index) in tableData"
        :style="{ backgroundImage: 'url(' + item.backgroundImg + ')' }"
        :key="index"
      >
        <view class="cardtopflex">
          <view class="cardtopflex2">
            <view class="imgbox"><img :src="item.logo" alt="" /></view>
            <view class="titlebox">
              <view class="cardtitle">{{ item.bankName }}</view>
              <view class="cardtitle2">{{ '储蓄卡' }}</view>
            </view>
          </view>
          <view class="flexs_1" v-if="item.defaultCard == 1">
            <view class="qiu"></view>
            <view v-if="userInfo.pkCountry == 1">{{ '默认' }}</view>
            <view
              v-else
              style="color: #000; font-weight: bold"
              class="cardfooter"
              >{{ '默认' }}</view
            >
          </view>
          <view class="flexs_1" v-else>
            <view
              style="color: #fff; font-weight: bold; cursor: pointer"
              @click="setDefault(item.pkId)"
              class="cardfooter"
              >{{ '设为默认' }}</view
            >
          </view>
        </view>
        <view class="cardNumber">{{ item.cardNumber }}</view>
        <view
          v-if="userInfo.pkCountry == 1"
          class="cardfooter"
          @click="removeBind(item)"
        >
          [{{ '解绑' }}]</view
        >
        <view
          v-else
          style="color: #000; font-weight: bold"
          class="cardfooter"
          @click="removeBind(item)"
        >
          [{{ '解绑' }}]</view
        >
      </view>
    </view>
    <u-modal
      :showCancelButton="true"
      @cancel="modalShow = false"
      :content="'是否确认解绑银行卡'"
      :show="modalShow"
      @confirm="confirmRemove"
      ref="uModal"
      :asyncClose="true"
    ></u-modal>
    <view class="footerbtn" @click="goAdd"> +{{ '添加银行卡' }} </view>

    <u-modal
      :showCancelButton="true"
      @cancel="modalShow2 = false"
      content="当前解绑为默银行卡，请设置为另一张卡为默认银行卡"
      :show="modalShow2"
      @confirm="confirmRemove2"
      ref="uModal"
      :asyncClose="true"
    ></u-modal>
    <!-- <el-button class="footerbtn" @click="bindBank(true)">{{'绑定银行卡'}}</el-button> -->
  </view>
</template>

<script>
import * as ban from '@/config/balance.js'
export default {
  data() {
    return {
      tableData: [],
      modalShow: false,
      modalShow2: false,
      pkId: '',
      userInfo: {},
    }
  },
  onLoad() {
    this.userInfo = uni.getStorageSync('User')
  },
  onShow() {
    this.getSearch()
  },
  methods: {
    setDefault(pkId) {
      ban
        .updateDefault({
          pkId: pkId,
        })
        .then(res => {
          if (res.code == 200) {
            uni.$u.toast(res.msg)
            this.getSearch()
          } else {
            uni.$u.toast(res.msg)
          }
        })
    },
    goAdd() {
      uni.navigateTo({
        url: '/pages/mine/bindBank/bindBank',
      })
    },
    removeBind(item) {
      this.pkId = item.pkId
      if (item.defaultCard == 1) {
        this.modalShow2 = true
      } else {
        this.modalShow = true
      }
    },
    confirmRemove2() {
      this.modalShow2 = false
      // this.modalShow = true
    },
    //解除绑定
    confirmRemove() {
      ban
        .removeBankBind({
          pkId: this.pkId,
        })
        .then(res => {
          if (res.code == 200) {
            uni.$u.toast(res.msg)
            this.modalShow = false
            this.getSearch()
          } else {
            uni.$u.toast(res.msg)
            this.modalShow = false
          }
        })
    },
    //点击绑定银行卡
    bindBank(val) {
      // this.isAdd = true;
      // this.jdTl = val;
    },
    getSearch() {
      ban.getBankList().then(res => {
        this.tableData = res.data
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.content {
  background-color: #f9f9f9;
  padding: 22rpx;

  .tablebox {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .card {
      width: 100%;
      background-color: rgba(170, 45, 42, 0.9);
      background-size: 100% 100%;
      border-radius: 20rpx;
      margin: 20rpx 0;
      padding: 28rpx 32rpx 40rpx 32rpx;
      margin-top: 20rpx;

      .cardtopflex {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .flexs_1 {
          display: flex;
          align-items: center;
          margin-right: 20rpx;
          color: #ffffff;
          font-size: 24rpx;

          .qiu {
            margin-right: 10rpx;
            width: 20rpx;
            height: 20rpx;
            border-radius: 50%;
            background: rgb(47, 236, 47);
          }
        }

        .cardtopflex2 {
          .imgbox {
            margin-right: 20rpx;

            img {
              width: 68rpx;
              height: 68rpx;
            }
          }

          .titlebox {
            color: #ffffff;
            text-align: left;

            .cardtitle {
              font-size: 36rpx;
              font-weight: 600;
            }

            .cardtitle2 {
              font-size: 20rpx;
              margin-top: 8rpx;
              font-weight: 400;
            }
          }
        }
      }

      .cardNumber {
        font-size: 32rpx;
        font-family:
          PingFang SC-Medium,
          PingFang SC;
        font-weight: 600;
        color: #ffffff;
        margin-top: 100rpx;
        margin-left: 36rpx;
      }

      .cardfooter {
        text-align: right;
        font-size: 24rpx;
        font-family:
          PingFang SC-Regular,
          PingFang SC;
        font-weight: 400;
        color: #ffffff;
        margin-top: 24rpx;
        cursor: pointer;
      }
    }
  }

  .footerbtn {
    display: flex;
    align-items: center;
    padding: 40rpx;
    background: #ffffff;
    font-size: 24rpx;
    font-weight: 600;
    border-radius: 20rpx;
    margin-top: 32rpx;
    width: 100%;
  }
}
</style>