bemarket/src/components/market/nft/PieceNft.vue

<template>
  <div>
    <div class="container">
      <div
        class="list-content"
        v-for="(piece, i) in nftList"
        @click="showTip(piece)"
        :key="i"
      >
        <div class="no-sale" v-if="piece.o_link > 0 && isType == 'mynft'">
          <img
            width="205px"
            src="../../../assets/market/hero/no-sale.png"
            alt=""
          />
        </div>
        <div class="chip-bg">
          <img
            v-if="piece.c_id"
            width="125px"
            :src="require('@/assets/market/piece/' + piece.c_id + '.png')"
            alt=""
          />
          <img
            v-else
            width="125px"
            :src="
              require('@/assets/market/piece/' + piece.detail.item_id + '.png')
            "
            alt=""
          />
          <span class="amount">{{
            piece.amount ? piece.amount : piece.balance
          }}</span>
        </div>
        <div class="level-content">
          <div class="tree-guard">
            {{ piece.c_name ? piece.c_name : piece.detail.name }}
          </div>
        </div>
        <div class="lease-listing" v-if="isType == 'mynft'">
          <div class="price-left-olink" v-if="piece.o_link">
            <img
              width="32px"
              src="../../../assets/market/chip/t-icon.png"
              alt=""
            />
          </div>
          <div class="rent-olink" v-if="piece.o_link">
            {{ formatPriceShow(piece.s_price ? piece.s_price : " ", 18) }}
          </div>
          <div class="rent" v-else></div>
          <div class="sell">Sell</div>
        </div>
        <div class="price-content" v-else>
          <div class="price-left">
            <div>
              <img
                width="32px"
                src="../../../assets/market/chip/t-icon.png"
                alt=""
              />
            </div>
          </div>
          <div class="price">
            {{ formatPriceShow(piece.s_price ? piece.s_price : " ", 18) }}
          </div>
          <div class="buy">
            <img
              width="78px"
              src="../../../assets/market/chip/buy.png"
              alt=""
            />
          </div>
        </div>
      </div>
    </div>
    <PieceDialog
      ref="dialog"
      @closeTip="closeTip"
      @showTip="showTip"
      :isType="isType"
      :isShow="isShow"
      v-if="isShow"
      :isPiecePut="isPiecePut"
      :isBuy="isBuy"
      @handBuyShow="handBuyShow"
      @handBuyHide="handBuyHide"
      @handPutShow="handPutShow"
      @handPutHide="handPutHide"
      @handMessage="handMessage"
      @handMessageHide="handMessageHide"
    ></PieceDialog>
    <TheSell
      ref="selldialog"
      :type="type"
      :isPiecePut="isPiecePut"
      v-if="isType == 'mynft' && currencyTypeList.length > 0"
      :currencyTypeList="currencyTypeList"
      @closeTip="closeTip"
      @getMarketNftList="getMarketNftList"
      @handMessage="handMessage"
      @handMessageHide="handMessageHide"
      @handPutShow="handPutShow"
      @handPutHide="handPutHide"
    />
    <ChipBuyDialog
      :type="type"
      ref="buydialog"
      :isBuy="isBuy"
      v-if="isType !== 'mynft'"
      @closeTip="closeTip"
      @getMarketNftList="getMarketNftList"
      @handMessage="handMessage"
      @handMessageHide="handMessageHide"
      @handBuyShow="handBuyShow"
      @handBuyHide="handBuyHide"
    ></ChipBuyDialog>
    <MessageBox ref="message"></MessageBox>
  </div>
</template>

<script>
import PieceDialog from "../PieceDialog";
import TheSell from "../TheSellDialog.vue";
import ChipBuyDialog from "../ChipBuyDialog.vue";
import MessageBox from "../MessageBox.vue";
import WeaponBuyDialog from "../WeaponBuyDialog.vue";
import { formatPrice } from "@/utils/chain.util";
export default {
  props: ["isType", "nftList", "currencyTypeList"],
  components: {
    PieceDialog,
    TheSell,
    WeaponBuyDialog,
    ChipBuyDialog,
    MessageBox,
  },
  data() {
    return {
      isShow: false,
      type: "piece",
      isPiecePut: false,
      isBuy: false,
    };
  },
  methods: {
    closeTip(hide) {
      this.isShow = hide;
    },
    formatPriceShow(price, decimals, fixed = 2) {
      return formatPrice(price, decimals, fixed);
    },
    showTip(data) {
      if (data.detail.item_id) {
        this.isShow = true;
        this.$nextTick(() => {
          this.$refs.dialog.init(data);
        });
      }
    },
    handPutShow(piece) {
      this.isPiecePut = true;
      this.$nextTick(() => {
        this.$refs.selldialog.init(piece);
      });
    },
    getMarketNftList() {
      this.$emit("getMarketNftList");
    },
    handPutHide() {
      this.isPiecePut = false;
    },
    handBuyShow(piece) {
      this.isBuy = true;
      this.$nextTick(() => {
        this.$refs.buydialog.init(piece);
      });
    },
    handBuyHide(handBuyHide) {
      this.isBuy = handBuyHide;
    },
    handMessageHide() {
      this.$nextTick(() => {
        this.$nextTick(() => {
          this.$refs.message.close();
        });
      });
    },
    handMessage(typeNumber) {
      this.$nextTick(() => {
        this.$refs.message.open(typeNumber);
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.container {
  display: flex;
  width: 1406px;
  cursor: pointer;
  flex-direction: row;
  margin-top: 43px;
  margin-left: 54px;
  align-items: center;
  flex-wrap: wrap;
}
.list-content {
  display: flex;
  flex-direction: column;
  position: relative;
  margin-right: 23px;
  width: 216px;
  padding-top: 23px;
  padding-left: 17px;
  padding-right: 17px;
  margin-bottom: 20px;
  height: 277px;
  background: url("../../../assets/market/piece/bg.png") no-repeat;
  .no-sale {
    position: absolute;
    left: 0;
    top: 0;
    width: 242px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 292px;
    background: #3c3c3c;
    border: 4px solid #cdd8fd;
    opacity: 0.8;
    z-index: 99;
    border-radius: 16px;
  }
}
.price-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  // margin-right: 32px;
}
.level-number {
  font-size: 29px;
  // font-family: 'MEurostile';
  font-weight: 400;
  font-style: italic;
  color: #454545;
}
.level-lv {
  font-size: 25px;
  // font-family: 'MEurostile';
  font-weight: 400;
  font-style: italic;
  color: #454545;
}
.price {
  font-size: 21px;
  width: 104px;
  justify-content: flex-end;
  display: flex;
  font-family: "Arciform";
  font-weight: 400;
  /* margin-left: 7px; */
  color: #454545;
}
.price-left {
  display: flex;
}
.buy {
  cursor: pointer;
  // margin-left: 13px;
}

.level-content {
  display: flex;
  justify-content: center;
  margin-top: 5px;

  .level-img {
    display: flex;
  }

  .level-levelList {
    display: flex;
    margin-left: 14px;
  }
  .item-Image {
    margin-left: 6px;
    display: flex;
  }
}
.chip-bg {
  width: 216px;
  height: 182px;
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  line-height: 182px;
  background: url("../../../assets/market/piece/bg-there.png") no-repeat;
  background-size: 100% 100%;
  .amount {
    position: absolute;
    right: 11px;
    font-size: 29px;
    bottom: -78px;
  }
}
.tree-guard {
  font-size: 21px;
  font-family: "OPPOSans";
  margin-bottom: 10px;
  font-weight: normal;
  color: #454545;
}
.lease-listing {
  display: flex;
  // justify-content: center;
  align-items: center;
  // margin-top: 11px;
  font-size: 24px;
  .rent {
    width: 97px;
    height: 40px;
  }
  .rent-olink {
    width: 80px;
    text-align: right;
    line-height: 40px;
    font-size: 18px;
  }
  .sell {
    width: 97px;
    height: 40px;
    color: #fff;
    text-align: center;
    // margin-left: 14px;
    line-height: 40px;
    background: url("../../../assets/market/hero/sell-btn.png") no-repeat;
    background-size: contain;
  }
}
</style>