tf-business/pages_module/receiving/index.vue

<template>
  <view class="receiving">
    <template v-if="Object.keys(receivingInfo).length <= 0">
      <view class="empty">
        <image class="" src="@/static/image/order/empty.png" />
        <text>暂未绑定账户</text>
        <view class="btn" @click="navigateTo('/pages_module/bindingCard/index')"
          >去绑定</view
        >
      </view>
    </template>
    <template v-else>
      <view class="receiving-box">
        <view class="receiving-title">已绑定账户</view>
        <viwe class="receiving-card">
          <view class="card-box">
            <view class="card-title">
              <text>{{ bankName }}</text>
              <tui-icon
                name="evaluate"
                color="#FFFFFF"
                :size="20"
                @click="goBankCard(1)"
              ></tui-icon>
            </view>
            <view class="card-eye">
              <text>{{ cardNumber }}</text>
              <template v-if="showEye">
                <tui-icon
                  name="seen"
                  :size="20"
                  color="#FFFFFF"
                  @click="changeIcon(false)"
                ></tui-icon>
              </template>
              <template v-else>
                <tui-icon
                  name="unseen"
                  :size="20"
                  color="#FFFFFF"
                  @click="changeIcon(true)"
                ></tui-icon>
              </template>
            </view>
            <view class="card-prople">
              <text>持卡人</text>
              <text>{{ receivingInfo.cardName }}</text>
            </view>
          </view>
        </viwe>
      </view>
    </template>
  </view>
</template>

<script>
import { getReceiving, getSelect } from "@/config/index.js";
export default {
  created() {
    this.getBankAll();
  },
  onShow(){
    this.getAccount();
  },
  data() {
    return {
      receivingInfo: {},
      bankList: [],
      cardNumber: "",
      //    控制眼睛
      showEye: true,
    };
  },
  computed: {
    bankName() {
      return this.bankList.filter((item) => {
        return item.dictId == this.receivingInfo.bank;
      })[0]?.dictName;
    },
  },
  methods: {
    //  获取收款商户
    async getAccount() {
      let { data } = await getReceiving({});
      this.receivingInfo = data;
      if(Object.keys(data).length <= 0) return
      //    调用函数返回隐藏的字符
      this.cardNumber = this.convert(data.cardNumber, false);
    },
    //  获取所有银行
    async getBankAll() {
      let { data } = await getSelect({ dictName: "所属银行" });
      this.bankList = data;
    },
    //  小眼睛切换
    changeIcon(flag) {
      this.showEye = flag;
      this.cardNumber = this.convert(this.receivingInfo.cardNumber);
    },
    //  转换银行卡符号
    convert(str) {
      let lastFour = str.slice(-4);
      if (this.showEye) {
        let maskedStr = `${"*".repeat(str.length - 4)} ${lastFour}`;
        let card1 = maskedStr
          .split(" ")[0]
          .replace(/(.{4})/g, (match) => `${match} `);
        let card2 = maskedStr.split(" ")[1];
        return `${card1} ${card2}`;
      } else {
        //  不截取后面四位
        let numStr = str.slice(0, str.length - 4);
        let card1 = numStr.replace(/(.{4})/g, (match) => `${match} `);
        return `${card1} ${lastFour}`;
      }
    },
    //  跳转到编辑银行卡
    goBankCard(type) {
      uni.navigateTo({
        url: `/pages_module/bindingCard/index?type=${type}`,
      });
      let obj = {...this.receivingInfo};
      obj.dictName = this.bankName
      //    本地存储银行卡信息
      uni.setStorageSync("bankInfo", obj);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>