frontend-app/pages/rwa_package/account/components/account-item-two.vue

<template>
  <view class="shop-item-view" v-if="dataItem" @click="onSelect">
    <image
      src="https://static.tbmall.xin/static/new/alpha.png"
      v-if="dataItem.name != 'WALLET'"
    ></image>
    <image
      src="https://static.tbmall.xin/static/new/no_black_data.png"
      v-else
    ></image>
    <view class="shop-mid-view-one" v-if="dataItem.name != 'WALLET'">
      <text class="text-32 text-gray text-overflow">{{ dataItem.account }}</text>
    </view>
    <view class="shop-mid-view" v-else>
      <text class="text-30 text-fu1 text-overflow">{{ address }}</text>
      <view class="jie-bind" @click.stop="onJie"> 解绑 </view>
    </view>
    <view class="biao-view">
      <text class="text-20 text-zi" style="line-height: 1.2">{{
        dataItem.name != "WALLET" ? "Alpha账户" : "券商登记地址"
      }}</text>
    </view>
  </view>
</template>

<script>
import func from "@/utils/func.js";
export default {
  props: {
    dataItem: {
      type: Object,
      default: null,
    },
  },
  computed: {
    address() {
      let tmp = "";
      console.log("this.data", this.dataItem);
      if (this.dataItem && this.dataItem.name == "WALLET") {
        this.dataItem.address = this.maskAddress(this.dataItem.account);
        tmp = this.dataItem.address;
      }
      return tmp;
    },
  },
  mounted() {},
  methods: {
    maskAddress(address) {
      return "******" + address.slice(-4);
    },

    onJie() {
      this.$emit("jie", this.dataItem);
    },
    onSelect() {
      this.$emit("select", this.dataItem);
    },
  },
};
</script>

<style lang="scss" scoped>
.shop-item-view {
  width: 100%;
  min-height: 152rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 28rpx 28rpx;
  box-sizing: border-box;
  position: relative;
  border-radius: 12rpx;
  overflow: hidden;
  background-color: #fff;
  margin-top: 24rpx;
  border: 2rpx solid #e3e3e3;
  .jie-bind {
    width: 112rpx;
    height: 48rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 24rpx;
    color: #666;
    font-size: 24rpx;
    // position: absolute;
    // right:32rpx;
    // bottom:24rpx;
    background-color: #f3f3f3;
  }
  .biao-view {
    padding: 0 12rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36rpx;
    min-height: 36rpx;
    position: absolute;
    border-radius: 0px 12rpx 0px 12rpx;
    top: 0;
    right: 0;
    background-color: #f2ebfe;
  }

  .shop-mid-view {
    margin-left: 24rpx;
    display: flex;
    flex: 1;
    height: 88rpx;
    min-height: 88rpx;
    // flex-direction: column;
    align-items: center;
    justify-content: space-between;
  }
  .shop-mid-view-one {
    margin: 0 24rpx;
    display: flex;
    flex: 1;
    height: 88rpx;
    min-height: 88rpx;
    flex-direction: column;
    justify-content: center;
  }
  image {
    width: 88rpx;
    min-width: 88rpx;
    height: 88rpx;
  }
}
</style>