huangjinming 20d1f1ecc5 fix
2023-01-04 15:00:10 +08:00

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>