yicangzongtai_app_240321/pages/order/banks/list.vue

<template>
  <view class="container-banks">
    <navbar :config="config" backColor="#666"></navbar>
    <view class="banks" v-if="list.length">
      <view class="item" :class="{'gray': !item.valid}" v-for="(item, index) in list" :key="item.id">
        <!-- <view class="iconfont3 bank-icon">&#xe607;</view> -->
        <view class="box">
          <image :src="item.logo" mode="widthFix"></image>
          <text class="bank_name">{{item.local_bank_name || item.bank_name}}</text>
          <text>{{item.local_bank_card_type_name}}</text>
        </view>
        <view class="box">
          <view class="name">（{{$mUtil.bankAccount(item.card_id)}}）</view>
          <view class="unbind" v-if="item.valid" @click="unbindBankCard(item.id)">解绑</view>
          <view class="unbind" v-if="!item.valid" @click="unbindBankCard(item.id)">删除</view>
        </view>
      </view>
    </view>
    <noData v-if="list.length<=0"></noData>
    <view class="footer">
      <view class="btn" @click="addBankCard()">+ 新增银行卡</view>
      <!-- <view class="btn unbind">- 解绑银行卡</view> -->
    </view>
  </view>
</template>

<script>
  import noData from "@/components/noData/nodata.vue"
  export default {
    components: {
      noData
    },
    data() {
      return {
        config: {
          back: true,
          title: '管理银行卡',
          color: '#1a1a1a',
          backgroundColor: [1, "#fff"],
          statusBarFontColor: '#1A1A1A',
        },
        list: []
      }
    },
    onShow() {
      this.getlist()
    },
    methods: {
      getlist() {
        this.$http.get('/usercard/list').then(res => {
          if (res.code == 200) {
            this.list = res.list
            this.list.map(item => {
              item.logo = this.$mConfig.bankLink + item.local_bank_mark
            })
          }
        })
      },
      addBankCard() {
        uni.navigateTo({
          url: '/pages/order/banks/addBankCard'
        })
      },
      unbindBankCard(id) {
        uni.showModal({
          title: '提示',
          content: '请确认是否解除此银行卡的绑定！',
          success: (res) => {
            if (res.confirm) {
              this.deleteBank(id)
              console.log('用户点击确定');
            } else if (res.cancel) {
              console.log('用户点击取消');
            }
          }
        });
      },
      deleteBank(id) {
        this.$http.delete('/usercard/remove', {
          id: id
        }).then(res => {
          if (res.code == 200) {
            this.getlist()
            this.$mUtil.toast("解绑成功")
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .banks {
    padding: 30rpx;

    .item {
      // height: 100rpx;
      // display: flex;
      // align-items: center;
      padding: 20rpx 0;
      border-bottom: 1rpx solid #E6E5E5;
      
      .box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        &:first-child {
          margin-bottom: 20rpx;
        }
        
        .bank_name {
          font-size: 30rpx;
          font-weight: bold;
        }
      }

      image {
        width: 250rpx;
        height: auto;
      }

      .bank-icon {
        margin-right: 10rpx;
        color: #2f77f1;
        font-size: 50rpx;
        flex-shrink: 0;
      }

      .name {
        margin-right: 20rpx;
        font-size: 26rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .unbind {
        margin-left: auto;
        color: red;
        flex-shrink: 0;
      }
    }

    .gray {
      color: gray;

      .bank-icon {
        color: gray;
      }
    }
  }

  .footer {
    width: 100%;
    padding: 30rpx 60rpx;
    position: fixed;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;

    .btn {
      width: 100%;
      color: #fff;
      text-align: center;
      line-height: 85rpx;
      border: 1rpx solid #3775F6;
      border-radius: 44rpx;
      background-color: #FA6138;
      font-size: 28rpx;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: 400;
      text-align: center;
    }

    .unbind {
      color: #fff;
      border: 1rpx solid #f56c6c;
      background-color: #f56c6c;
    }
  }
</style>