fangliaoxiaochengxv/subPages/withdrawalAccountManagement/withdrawalAccountManagement.vue

<template>
  <view class="withdrawalAccountManagement">
    <view class="list">
      <view
        class="item"
        v-for="b in list"
        :key="b.id"
        :style="{ backgroundColor: b.bank_bg }"
        @click="handleSelect(b)"
      >
        <u--image
          v-if="b.bank_logo"
          width="102rpx"
          height="102rpx"
          radius="100%"
          shape="circle"
          bgColor="#d3c6b5"
          customStyle="border-radius:100%;"
          :src="b.bank_logo"
          :fade="true"
          duration="450"
        ></u--image>
        <view class="right">
          <view class="name">{{ b.bank_name }}</view>
          <view class="docs">{{ b.bank_bran || "储蓄卡" }}</view>
          <view class="code">
            <text class="code-ellipsis">... ... .... </text>
            <text class="code-number">{{ bankLastCode(b.bank_code) }}</text>
          </view>
        </view>
      </view>
    </view>
    <navigator url="/subPages/addWithdrawalAccount/addWithdrawalAccount">
      <view class="add-wrap">
        <u-icon name="plus" color="#2B313D"></u-icon>
        <text>添加结算账户</text>
      </view>
    </navigator>
    <u-action-sheet
      :show="actionShow"
      :actions="bankOperateList"
      :closeOnClickOverlay="true"
      :closeOnClickAction="true"
      :safeAreaInsetBottom="true"
      cancelText="取消"
      @select="handleSelectOperate"
      @close="handleClose"
    ></u-action-sheet>
  </view>
</template>

<script>
import { getMyBanks, removeBanks } from "@/common/api/withdrawal";

export default {
  data() {
    return {
      selectBank: null,
      list: [],
      actionShow: false,
      bankOperateList: [
        {
          type: "delete",
          name: "解绑",
        },
      ],
    };
  },
  onShow() {
    this._getMyBanks();
  },
  methods: {
		bankLastCode(code) {
		  return code.slice(-4);
		},
    _getMyBanks() {
      getMyBanks().then(({ data = [] }) => {
        this.list = data;
      });
    },
    handleSelect(item) {
      this.actionShow = true;
      this.selectBank = item;
    },
    handleSelectOperate({ type }) {
      if (type === "delete" && this.selectBank) {
        removeBanks({ code: this.selectBank.code }).then((res) => {
          uni.$u.toast("解绑成功");
          this._getMyBanks();
          this.selectBank = null;
        });
      }
    },
    handleClose() {
      this.actionShow = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.withdrawalAccountManagement {
  padding: 20rpx 20rpx 40rpx;
  background-color: #f5f6f8;
  .item {
    display: flex;
    height: 247rpx;
    background: #31649d;
    border-radius: 15rpx;
    margin-bottom: 15rpx;
    padding: 36rpx 0 0 43rpx;
    .right {
      margin-left: 23rpx;
    }
    .name {
      font-size: 32rpx;
      font-weight: bold;
      color: #ffffff;
      line-height: 45rpx;
    }
    .docs {
      font-size: 28rpx;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.38);
      line-height: 39rpx;
    }
    .code {
      display: flex;
      align-items: center;
      height: 87rpx;
      font-size: 62rpx;
      font-weight: 500;
      color: #ffffff;
      line-height: 1;
      .code-ellipsis {
        margin-top: -32rpx;
      }
      .code-number {
        margin-left: 20rpx;
      }
    }
  }
  .add-wrap {
    display: flex;
    align-items: center;
    padding-left: 47rpx;
    height: 157rpx;
    background: #ffffff;
    border-radius: 15rpx;
    font-size: 30rpx;
    font-weight: 500;
    color: #1d161f;
    line-height: 1;
    text {
      margin-left: 8rpx;
    }
  }
}
</style>