frontend-app/pages/rwa_package/account/components/select-lian.vue

<template>
  <u-popup :show="itemShow" mode="bottom" bgColor="transparent">
    <view class="select-item">
      <view class="select-head">
        <view></view>
        <text class="text-28 text-fu1">选择地址</text>
        <u-icon name="close" color="#333" size="16" @click="onClose"></u-icon>
      </view>
      <view class="item-mid-view" v-if="data.length">
        <view
          class="item-mid-list"
          @click="onOk(item)"
          v-for="(item, index) in data"
          :key="item.id"
        >
          <image
            src="https://static.tbmall.xin/static/new/no_black_data.png"
            style="min-width: 88rpx; heihgt: 88rpx"
          ></image>
          <view class="item-mid-li">
            <text class="text-32 text-zu1">券商登记地址</text>
            <text class="text-28 text-fu">{{ item.addressOne }}</text>
          </view>
        </view>
      </view>
      <view class="item-mid-view-two" @click="onAdd" v-if="!data.length">
        <image
          src="https://static.tbmall.xin/static/new/no_black_data.png"
          class="no-data-black"
        ></image>
        <text class="text-28 text-fu mt-48">{{
          `请先绑定一个区块链账户，用于收款`
        }}</text>
        <view class="add-btn mt-48">
          <image
            src="https://static.tbmall.xin/static/new/add.png"
            style="margin-right: 5rpx"
          ></image>
          <text class="text-32 text-zi text-bold" style="margin-left: 5rpx"
            >添加</text
          >
        </view>
      </view>
      <!-- <view class="item-bottom-btn" v-if="data.length">
				<MyBtn @ok="onOk" text="确定"></MyBtn>
			</view> -->
    </view>
  </u-popup>
</template>

<script>
import MyBtn from "@/components/common/my-btn.vue";
import func from "@/utils/func.js";
export default {
  data() {
    return {
      itemSelect: "",
    };
  },
  components: { MyBtn },
  props: {
    itemShow: {
      type: Boolean,
      default: false,
    },
    itemData: {
      type: Array,
      default: [],
    },
    type: {
      type: [Number, String],
      default: "0",
    },
  },
  computed: {
    data() {
      let tmp = [];
      if (this.itemData && this.itemData.length) {
        this.itemData.forEach((item) => {
          console.log("item", item);

          item.addressOne = "******" + item.account.slice(-4);
        });
        tmp = this.itemData;
      }
      return tmp || [];
    },
  },

  mounted() {},
  methods: {
    onOk(item) {
      this.$emit("ok", item);
    },
    onAdd() {
      this.$emit("add");
    },
    onClose() {
      this.$emit("close");
    },
  },
};
</script>

<style scoped lang="scss">
.add-btn {
  width: 100%;
  height: 72rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border: 2rpx solid #7934f6;
  border-radius: 8rpx;
  image {
    width: 32rpx;
    height: 32rpx;
  }
}
.select-item {
  width: 100%;
  min-height: 724rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 32rpx 24rpx;
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 24rpx 24rpx 0 0;
  .item-bottom-btn {
    width: 100%;
    margin-top: 24rpx;
    min-height: 88rpx;
    display: flex;
  }
  .item-mid-view-two {
    width: 100%;
    height: 564rpx;
    min-height: 564rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    .no-data-black {
      width: 120rpx;
      height: 120rpx;
      margin-top: 120rpx;
    }
    .add-btn {
      width: 248rpx;
      height: 72rpx;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      border: 2rpx solid #7934f6;
      border-radius: 12rpx;
      image {
        width: 32rpx;
        height: 32rpx;
      }
    }
  }
  .item-mid-view {
    width: 100%;
    height: 564rpx;
    min-height: 564rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: auto;
    .item-mid-list {
      display: flex;
      flex-direction: row;
      width: 98%;
      height: 152rpx;
      min-height: 152rpx;
      border-radius: 8rpx;
      margin-top: 24rpx;
      background: #ffffff;
      border: 1px solid #e3e3e3;
      padding: 32rpx;
      box-sizing: border-box;
      position: relative;
      .item-mid-li {
        margin-left: 24rpx;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 88rpx;
      }
      .show-item-left {
        display: flex;
        flex-direction: column;
        height: 88rpx;
        min-height: 88rpx;
        margin-left: 24rpx;
      }
      .item-right-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #f3f3f3;
        border-radius: 24rpx;
        position: absolute;
        right: 28rpx;
      }
      image {
        width: 88rpx;
        height: 88rpx;
        border-radius: 44rpx;
      }
    }
  }
  .select-head {
    width: 100%;
    height: 88rpx;
    min-height: 88rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}
</style>