319 lines
7.6 KiB
Vue
319 lines
7.6 KiB
Vue
<template>
|
|
<a class="card-outlet" :href="showLink? `/item/${nftData.id}`: 'javascript:void(0)'" :class="{'nohand': !showLink}">
|
|
<div class="nft-id">#{{nftData.id}}</div>
|
|
<div class="card" >
|
|
<img v-if="nftData.id" class="bg-img" :src="cardBg" alt="">
|
|
<div v-if="nftData.id" class="anim-border">
|
|
<img class="card-main-img" :src="nftData.image" alt=""/>
|
|
<div class="info-bar" :class="{'bottom': !nftData.showBuy}">
|
|
<div class="name-label">{{nftData.name}}</div>
|
|
<!-- <div class="level-label">Lvl {{nftData.level || 1}}</div>-->
|
|
<!-- <div class="info-div" v-if="nftData.showBuy" @click="buyItem" :class="{'gray': !showLight}">-->
|
|
<!-- <img class='buy-icon' src="@/assets/main/card/icon_buy.png" alt=""/>-->
|
|
<!-- <div class="price-label">-->
|
|
<!-- <span :class="{'price': nftData.price !== nftData.priceDiscount}">{{priceDiscountShow}} {{nftData.currency}}</span>-->
|
|
<!-- <span v-if="nftData.price!==nftData.priceDiscount" class="price-old">{{priceShow}} {{nftData.currency}}</span>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
</div>
|
|
<div class="class-div" v-if="nftData.type === 1">
|
|
<img :src="require('@/assets/main/card/class_'+nftData.job+'.png')" alt="">
|
|
</div>
|
|
<div class="active-btn" v-if="showActivateBtn" @click="onActivateClick">
|
|
<img src="@/assets/market/btn_activate.png" alt="activate btn">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Component, Prop, Vue } from 'vue-property-decorator'
|
|
import { AppModule } from '@/store/modules/app'
|
|
import { UserModule } from '@/store/modules/user'
|
|
import ChainManager from '@/chain/ChainManager'
|
|
import { INftData } from '@/types/Nft'
|
|
|
|
@Component({
|
|
name: 'HeroNft',
|
|
components: {
|
|
}
|
|
})
|
|
export default class HeroNft extends Vue {
|
|
@Prop() private nftData: INftData
|
|
chainManger = new ChainManager()
|
|
|
|
get walletCollected() {
|
|
return AppModule.walletConnected
|
|
}
|
|
|
|
get cardBg() {
|
|
if (this.nftData.isGenesis) {
|
|
return require('@/assets/main/card/card_border_s.png')
|
|
} else {
|
|
return require('@/assets/main/card/card_border.png')
|
|
}
|
|
}
|
|
|
|
get showLink() {
|
|
return !this.nftData.hideAttr && !this.showActivateBtn
|
|
}
|
|
|
|
get showActivateBtn() {
|
|
return (this.nftData?.id || '').length > 17
|
|
}
|
|
|
|
// get showLight() {
|
|
// return !this.accountId || this.canBuy
|
|
// }
|
|
//
|
|
// get canBuy() {
|
|
// return !this.nftData.stopBuy
|
|
// }
|
|
|
|
// get priceDiscountShow() {
|
|
// const v = Math.pow(10, this.nftData.decimals!)
|
|
// return (this.nftData.priceDiscount! / v).toFixed(3)
|
|
// }
|
|
//
|
|
// get priceShow() {
|
|
// const v = Math.pow(10, this.nftData.decimals!)
|
|
// return (this.nftData.price! / v).toFixed(3)
|
|
// }
|
|
|
|
get accountId() {
|
|
return AppModule.accountId
|
|
}
|
|
|
|
get logined() {
|
|
return !!UserModule.token && !!AppModule.step
|
|
}
|
|
|
|
onActivateClick() {
|
|
if (!this.nftData) {
|
|
return
|
|
}
|
|
if (this.nftData.id.length < 18) {
|
|
return
|
|
}
|
|
this.$emit('activate-clicked', this.nftData.id)
|
|
}
|
|
|
|
// async buyItem(event: any) {
|
|
// console.log('on click item: ', this.nftData.id)
|
|
// event.preventDefault()
|
|
// if (!this.logined) {
|
|
// await this.chainManger.login()
|
|
// }
|
|
// if (!this.canBuy) {
|
|
// this.$message({
|
|
// message: 'Can`t buy current time',
|
|
// type: 'warning',
|
|
// duration: 5 * 1000
|
|
// })
|
|
// return
|
|
// }
|
|
// if (!this.nftData.directBuy) {
|
|
// return
|
|
// }
|
|
// if (this.nftData.stopBuy) {
|
|
// return
|
|
// }
|
|
// EventBus.$emit(PRESALE_BEGIN)
|
|
// const account = AppModule.accountId
|
|
// try {
|
|
// const price = parsePrice(this.nftData.priceDiscount!, this.nftData.decimals!)
|
|
// const { nonce, signature } = await this.chainManger.bc.signPresale({
|
|
// type: this.nftData.recordId!,
|
|
// paymentTokenAddress: this.nftData.coinAddress!,
|
|
// price,
|
|
// buyerAddress: account
|
|
// })
|
|
// const buyData = {
|
|
// buyer_address: AppModule.accountId,
|
|
// type: this.nftData.recordId,
|
|
// price,
|
|
// payment_token_address: this.nftData.coinAddress,
|
|
// nonce,
|
|
// signature
|
|
// }
|
|
// await this.chainManger.bc.increaseAllowance(this.nftData.coinAddress!, price)
|
|
// const res: any = await buyBox(buyData)
|
|
// const orderId = res.order_id
|
|
// localStorage.setItem('tmp_presale_order_id', orderId)
|
|
// EventBus.$emit(PRESALE_ORDER_GET, orderId)
|
|
// } catch (err) {
|
|
// console.log('buy error: ', err)
|
|
// EventBus.$emit(PRESALE_ERROR, err)
|
|
// }
|
|
// }
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import '../../../scss/breakpoints.scss';
|
|
// rect: 297x389
|
|
$width: 14em;
|
|
$height: 18.33em;
|
|
.card-outlet{
|
|
.card{
|
|
position: relative;
|
|
width: $width;
|
|
height: $height;
|
|
}
|
|
}
|
|
.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;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.class-div{
|
|
position: absolute;
|
|
top: 8px;
|
|
right: 8px;
|
|
width: $width*42/297;
|
|
height: $height*42/389;
|
|
}
|
|
.class-div img {
|
|
width: 100%;
|
|
}
|
|
.active-btn{
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
margin: auto;
|
|
background-color: #00000091;
|
|
img{
|
|
position: absolute;
|
|
cursor: pointer;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
margin: auto;
|
|
width: toEm(224px);
|
|
height: toEm(76px);
|
|
}
|
|
}
|
|
.name-img {
|
|
height: $height * 39 / 389;
|
|
width: auto;
|
|
position: absolute;
|
|
right: $width * 9 / 297;
|
|
bottom: $height * 100 / 389;
|
|
}
|
|
.info-bar {
|
|
position: absolute;
|
|
right: $width * 20 / 297;
|
|
bottom: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
align-items: flex-end;
|
|
div:last-child{
|
|
margin-bottom: 0;
|
|
}
|
|
.name-label {
|
|
color: white;
|
|
text-transform:capitalize;
|
|
font-size: $width * 40 / 390;
|
|
text-shadow: black 0.1em 0.1em 0.2em
|
|
}
|
|
.level-label{
|
|
color: yellow;
|
|
margin-bottom: -$height * 20 / 389;
|
|
margin-top: -$height * 5 / 389;
|
|
text-shadow: black 0.1em 0.1em 0.2em;
|
|
}
|
|
.info-div {
|
|
background-image: url('../../../assets/main/card/name_bg.png');
|
|
width: 100%;
|
|
height: $height * 0.29;
|
|
left: 0;
|
|
right: 0;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
justify-content: space-between;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.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 {
|
|
|
|
filter: grayscale(100%);
|
|
}
|
|
.bottom {
|
|
bottom: $height * 10 / 389;
|
|
}
|
|
|
|
.nft-id {
|
|
color: #46E0F4;
|
|
display: unset;
|
|
width: $width;
|
|
margin-bottom: 5px;
|
|
}
|
|
.nohand{
|
|
cursor: auto;
|
|
}
|
|
|
|
</style>
|