bemarket/src/components/market/NftItem.vue

<template>
  <div class="card" >
    <img v-if="data.id" class="bg-img" src="@/assets/main/card/card_border.png" alt="">
    <div v-if="data.id" class="anim-border">
      <img class="card-main-img" :src="require(`@/assets/main/card/${data.skelName}.png`)"  alt=""/>
      <div class="name-label">{{data.name}}</div>
      <div class="info-div" @click="buyItem" :class="{'gray': data.stopBuy}">
        <img class='buy-icon' src="@/assets/main/card/icon_buy.png" alt=""/>
        <div class="price-label">
          <span :class="{'price': data.price !== data.priceDiscount}">{{data.priceDiscount || data.price}} {{data.currency}}</span>
          <span v-if="data.price!==data.priceDiscount" class="price-old">{{data.price}} {{data.currency}}</span>
        </div>
      </div>
      <div class="class-div">
        <img :src="require('@/assets/main/card/class_'+data.class+'.png')" alt="">
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { ISpineData } from '@/utils/SpineRender'
import { BlockChain } from '@/utils/blockchain'
import { AppModule } from '@/store/modules/app'
import { buyBox } from '@/api/Mall'
import { Message } from 'element-ui'

declare module 'vue/types/vue' {
  interface Vue {
    data: ISpineData
  }
}

@Component({
  name: 'NftItem',
  components: {
  },
  props: ['data']
})
export default class extends Vue {
  bc = new BlockChain()

  get walletCollected() {
    return AppModule.walletConnected
  }

  async buyItem() {
    if (!AppModule.canBuy) {
      Message({
        message: 'Can`t buy current time',
        type: 'warning',
        duration: 5 * 1000
      })
      return
    }
    if (!this.data.directBuy) {
      return
    }
    if (this.data.stopBuy) {
      return
    }
    if (!this.walletCollected) {
      await this.bc.connect()
    }

    const buyData = { account: AppModule.accountId, box_id: this.data.recordId }
    const res = await buyBox(buyData)
    console.log('buy nft: ', res)
  }
}
</script>

<style lang="scss" scoped>
// rect: 297x389
$width: 14em;
$height: 18.33em;
.bg-img {
  width: $width;
  height: $height;
}
.anim-border {
  width: $width;
  height: $height;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}
.card-main-img {
  position: absolute;
  bottom: 0;
  max-height: 100%;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.info-div {
  background-image: url('../../assets/main/card/name_bg.png');
  width: 100%;
  height: $height * 0.29;
  position: absolute;
  bottom: $height * 0.025;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  background-size: contain;
  background-repeat: no-repeat;
  justify-content: space-between;
}

.class-div{
  position: absolute;
  top: 8px;
  right: 8px;
  width: $width*42/297;
  height: $height*42/389;
}
.class-div img {
  width: 100%;
}
.name-img {
  height: $height * 39 / 389;
  width: auto;
  position: absolute;
  right: $width * 9 / 297;
  bottom: $height * 100 / 389;
}
.name-label {
  font-family: 'title',serif;
  color: white;
  text-transform:capitalize;
  font-size: $width * 40 / 390;
  position: absolute;
  right: $width * 20 / 297;
  bottom: $height * 70 / 389;
}
.price-label {
  color: black;
  height: $height * 29 / 389;
  font-weight: bold;
  width: $width * 145 / 297;
  background-image: url('../../assets/main/card/price_bg.png');
  background-size: contain;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin-right: $width * 40 / 297;
  margin-bottom: $width * 10 / 297;
}
.price-label span {
  font-size: $width * 20 / 297;
}
.price-label .price{
  color: red;
  margin-top: 9px;
  text-shadow: black 0.1em 0.1em 0.2em
}
.price-label .price-old{
  text-decoration:line-through;
  font-size: $width * 15 / 297;
  color: white;
  text-shadow: black 0.1em 0.1em 0.2em
}
.buy-icon {
  width: $width * 44 / 297;
  height: $height * 52 / 389;
  margin-left: $width * 40 / 297;
  margin-bottom: $height * 12 / 389;
}

.gray {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);

  filter: grayscale(100%);

}

</style>