379 lines
9.1 KiB
Vue
379 lines
9.1 KiB
Vue
<template>
|
|
<div>
|
|
<div class="container" @click="handDialog(data)">
|
|
<div class="no-sale" v-if="data.selling > 0">
|
|
<div class="for-rent">
|
|
<div class="for-rent-img">
|
|
<img
|
|
width="205px"
|
|
src="../../../assets/market/hero/for-rent.png"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="type-img" v-if="data.info !== null">
|
|
<img
|
|
v-if="data.info.is_genesis"
|
|
class="img-item"
|
|
src="../../../assets/market/hero/type-1.png"
|
|
alt=""
|
|
/>
|
|
<img
|
|
v-else
|
|
class="img-item"
|
|
src="../../../assets/market/hero/type-0.png"
|
|
alt=""
|
|
/>
|
|
<div class="hero-img">
|
|
<img
|
|
v-if="data.item_id"
|
|
width="214px"
|
|
:src="require('@/assets/market/hero/' + data.item_id + '.png')"
|
|
alt=""
|
|
/>
|
|
<img
|
|
v-if="data.c_id"
|
|
width="214px"
|
|
:src="require('@/assets/market/hero/' + data.c_id + '.png')"
|
|
alt=""
|
|
/>
|
|
<!-- <img width="214px" :src="data.details.image" alt="" /> -->
|
|
</div>
|
|
<div class="hero-name">
|
|
{{ data.c_name ? data.c_name : data.detail.hero_name }}
|
|
</div>
|
|
<div class="gen" v-if="data.info !== null">
|
|
<img
|
|
width="42px"
|
|
v-if="data.info.is_genesis"
|
|
src="../../../assets/market/hero/gen.png"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="info">
|
|
<div class="info-level">
|
|
<span>Lv:</span>
|
|
<span class="level"> {{ fillZero(levelNumber) }}</span>
|
|
</div>
|
|
|
|
<div class="level-img">
|
|
<div class="level-levelList">
|
|
<div class="item-Image" v-for="(item, i) in starList" :key="i">
|
|
<div><img width="28px" :src="item.Image" alt="" /></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="lease-listing" v-if="isType == 'mynft'">
|
|
<div class="rent"></div>
|
|
<div class="sell">Sell</div>
|
|
</div>
|
|
<div class="sale" v-else>
|
|
<div>
|
|
<img width="40px" src="../../../assets/market/hero/icon.png" alt="" />
|
|
</div>
|
|
<div class="price">{{ data.s_price ? data.s_price : " " }}</div>
|
|
<div>
|
|
<a href="javascript:void(0)">
|
|
<img
|
|
width="78px"
|
|
height="36px"
|
|
src="../../../assets/market/hero/buy-mini.png"
|
|
alt=""
|
|
/></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Herodialog
|
|
:dialogVisible="dialogVisible"
|
|
@on-close="handDialoghide"
|
|
:isTab="isTab"
|
|
:isType="isType"
|
|
:type="type"
|
|
:isBuy="isBuy"
|
|
@handBuyShow="handBuyShow"
|
|
@handBuyHide="handBuyHide"
|
|
@closeTip="closeTip"
|
|
@showTip="showTip"
|
|
@on-click="handDialog"
|
|
:isPiecePut="isPiecePut"
|
|
@handPutShow="handPutShow"
|
|
@handPutHide="handPutHide"
|
|
:hero="data"
|
|
></Herodialog>
|
|
<TheSellDialog
|
|
:type="type"
|
|
:isPiecePut="isPiecePut"
|
|
:data="data"
|
|
v-if="currencyTypeList"
|
|
:currencyTypeList="currencyTypeList"
|
|
@handPutShow="handPutShow"
|
|
@handPutHide="handPutHide"
|
|
></TheSellDialog>
|
|
<HeroBuyDialog
|
|
:type="type"
|
|
:isBuy="isBuy"
|
|
:data="data"
|
|
@handBuyShow="handBuyShow"
|
|
@handBuyHide="handBuyHide"
|
|
></HeroBuyDialog>
|
|
</div>
|
|
</template>
|
|
<script lang="ts">
|
|
import { Component, Vue, Watch } from "vue-property-decorator";
|
|
import Herodialog from "../HeroDialog.vue";
|
|
import HeroBuyDialog from "../HeroBuyDialog.vue";
|
|
import TheSellDialog from "../TheSellDialog.vue";
|
|
|
|
@Component({
|
|
name: "HeroNft",
|
|
components: {
|
|
Herodialog,
|
|
TheSellDialog,
|
|
HeroBuyDialog,
|
|
},
|
|
props: ["data", "isType", "currencyTypeList"],
|
|
})
|
|
export default class HeroNft extends Vue {
|
|
quality: any = 1;
|
|
dialogVisible: boolean = false;
|
|
isTab: boolean = false;
|
|
isPiecePut: boolean = false;
|
|
isBuy: boolean = false;
|
|
type: string = "hero";
|
|
|
|
starType = [
|
|
{ Image: require("@/assets/market/hero/star01.png") },
|
|
{ Image: require("@/assets/market/hero/star03.png") },
|
|
{ Image: require("@/assets/market/hero/star02.png") },
|
|
];
|
|
starList: any[] = [];
|
|
|
|
fillZero(str: number | string) {
|
|
var realNum;
|
|
if (str < 10) {
|
|
realNum = "0" + str;
|
|
} else {
|
|
realNum = str;
|
|
}
|
|
return realNum;
|
|
}
|
|
closeTip(hide: boolean) {
|
|
this.isTab = hide;
|
|
}
|
|
showTip(hide: boolean) {
|
|
this.isTab = hide;
|
|
}
|
|
@Watch("data.detail.quality")
|
|
haldQuality(newvalue: any) {
|
|
this.quality = newvalue;
|
|
}
|
|
created() {
|
|
if (this.qualityNumber > 0 && this.qualityNumber <= 5) {
|
|
for (var i = 1; i <= this.qualityNumber; i++) {
|
|
this.starList.push(this.starType[0]);
|
|
}
|
|
} else if (this.qualityNumber > 5 && this.qualityNumber <= 10) {
|
|
for (var i = 1; i <= this.qualityNumber - 5; i++) {
|
|
this.starList.push(this.starType[1]);
|
|
}
|
|
} else {
|
|
for (var i = 1; i <= this.qualityNumber - 10; i++) {
|
|
this.starList.push(this.starType[2]);
|
|
}
|
|
}
|
|
}
|
|
beforeUpdate() {
|
|
this.starList = [];
|
|
if (this.qualityNumber > 0 && this.qualityNumber <= 5) {
|
|
for (var i = 1; i <= this.qualityNumber; i++) {
|
|
this.starList.push(this.starType[0]);
|
|
}
|
|
} else if (this.qualityNumber > 5 && this.qualityNumber <= 10) {
|
|
for (var i = 1; i <= this.qualityNumber - 5; i++) {
|
|
this.starList.push(this.starType[1]);
|
|
}
|
|
} else {
|
|
for (var i = 1; i <= this.qualityNumber - 10; i++) {
|
|
this.starList.push(this.starType[2]);
|
|
}
|
|
}
|
|
}
|
|
get levelNumber() {
|
|
return this.data.detail.hero_lv;
|
|
}
|
|
get qualityNumber() {
|
|
return this.data.detail.quality;
|
|
}
|
|
handDialog(data: void) {
|
|
this.dialogVisible = true;
|
|
}
|
|
|
|
handDialoghide(data: boolean) {
|
|
this.dialogVisible = data;
|
|
}
|
|
handPutShow() {
|
|
this.isPiecePut = true;
|
|
}
|
|
handPutHide() {
|
|
this.isPiecePut = false;
|
|
}
|
|
handBuyShow() {
|
|
this.isBuy = true;
|
|
}
|
|
handBuyHide() {
|
|
this.isBuy = false;
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.container {
|
|
width: 256px;
|
|
height: 374px;
|
|
cursor: pointer;
|
|
background: url("../../../assets/market/hero/hero-bg.png") no-repeat;
|
|
background-size: contain;
|
|
position: relative;
|
|
.no-sale {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 249px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 370px;
|
|
background: #3c3c3c;
|
|
border: 4px solid #cdd8fd;
|
|
opacity: 0.8;
|
|
z-index: 11;
|
|
border-radius: 16px;
|
|
.for-rent-img {
|
|
margin-top: 100px;
|
|
margin-bottom: 70px;
|
|
}
|
|
.for-rent-btn {
|
|
display: flex;
|
|
// margin-top: 170px;
|
|
.adjust {
|
|
width: 105px;
|
|
height: 35px;
|
|
// margin-left: 14px;
|
|
background: url("../../../assets/market/hero/adjust.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
.remove {
|
|
width: 105px;
|
|
height: 35px;
|
|
margin-left: 14px;
|
|
background: url("../../../assets/market/hero/remove.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
}
|
|
// padding-top: 18px;
|
|
.type-img {
|
|
margin-top: 18px;
|
|
margin-left: 18px;
|
|
position: relative;
|
|
}
|
|
.img-item {
|
|
width: 214px;
|
|
margin-top: 18px;
|
|
}
|
|
.hero-img {
|
|
position: absolute;
|
|
left: 0px;
|
|
bottom: 0px;
|
|
}
|
|
.hero-name {
|
|
height: 24px;
|
|
line-height: 24px;
|
|
padding-right: 14px;
|
|
padding-left: 14px;
|
|
background: url("../../../assets/market/hero/name-bg.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
position: absolute;
|
|
right: 23px;
|
|
text-align: center;
|
|
color: #fff;
|
|
bottom: 5px;
|
|
}
|
|
.gen {
|
|
position: absolute;
|
|
left: 5px;
|
|
top: 25px;
|
|
}
|
|
.info {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 8px;
|
|
}
|
|
.info-level {
|
|
color: #454545;
|
|
font-size: 16px;
|
|
font-style: italic;
|
|
margin-left: 20px;
|
|
}
|
|
.level {
|
|
color: #454545;
|
|
font-size: 21px;
|
|
font-style: italic;
|
|
}
|
|
.level-img {
|
|
display: flex;
|
|
width: 65%;
|
|
justify-content: center;
|
|
}
|
|
.level-levelList {
|
|
display: flex;
|
|
}
|
|
.item-Image {
|
|
margin-left: 8px;
|
|
display: flex;
|
|
}
|
|
.sale {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: 13px;
|
|
padding-left: 20px;
|
|
padding-right: 20px;
|
|
.price {
|
|
font-size: 26px;
|
|
font-family: Arciform;
|
|
font-weight: 400;
|
|
color: #454545;
|
|
}
|
|
}
|
|
.lease-listing {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-top: 11px;
|
|
font-size: 24px;
|
|
.rent {
|
|
width: 105px;
|
|
height: 40px;
|
|
// text-align: center;
|
|
// line-height: 40px;
|
|
// color: #fff;
|
|
// background: url("../../../assets/market/hero/rent-btn.png") no-repeat;
|
|
// background-size: contain;
|
|
}
|
|
.sell {
|
|
width: 105px;
|
|
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>
|