463 lines
13 KiB
Vue
463 lines
13 KiB
Vue
<template>
|
|
<div>
|
|
<div class="container" @click="HeroDialog(data)">
|
|
<!-- <div class="no-sale">
|
|
<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"
|
|
width="214px"
|
|
alt=""
|
|
/>
|
|
<img
|
|
v-else
|
|
width="214px"
|
|
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">
|
|
Lv: <span class="level"></span>
|
|
<span> {{ fillZero(levelNumber) }}</span>
|
|
<span>{{ this.data.detail.quality }}</span>
|
|
</div>
|
|
|
|
<div class="level-img">
|
|
<div
|
|
class="level-levelList"
|
|
v-if="this.data.detail.quality > 0 && this.data.detail.quality <= 5"
|
|
>
|
|
<div class="item-Image" v-for="(item, i) in firstOrder" :key="i">
|
|
<div><img width="28px" :src="item.Image" alt="" /></div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="level-levelList"
|
|
v-else-if="
|
|
this.data.detail.quality > 5 && this.data.detail.quality <= 10
|
|
"
|
|
>
|
|
<div class="item-Image" v-for="(item, i) in secondOrder" :key="i">
|
|
<div><img width="28px" :src="item.Image" alt="" /></div>
|
|
</div>
|
|
</div>
|
|
<div class="level-levelList" v-else>
|
|
<div class="item-Image" v-for="(item, i) in thirdOrder" :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="HeroDialoghide"
|
|
:isTab="isTab"
|
|
:isType="isType"
|
|
:type="type"
|
|
:isBuy="isBuy"
|
|
@handBuyShow="handBuyShow"
|
|
@handBuyHide="handBuyHide"
|
|
@closeTip="closeTip"
|
|
@showTip="showTip"
|
|
@on-click="HeroDialog"
|
|
:isPiecePut="isPiecePut"
|
|
@handPutShow="handPutShow"
|
|
@handPutHide="handPutHide"
|
|
:hero="data"
|
|
></Herodialog>
|
|
<TheSellDialog
|
|
:type="type"
|
|
:isPiecePut="isPiecePut"
|
|
:data="data"
|
|
@handPutShow="handPutShow"
|
|
@handPutHide="handPutHide"
|
|
></TheSellDialog>
|
|
<TheBuyDialog
|
|
:type="type"
|
|
:isBuy="isBuy"
|
|
:data="data"
|
|
@handBuyShow="handBuyShow"
|
|
@handBuyHide="handBuyHide"
|
|
></TheBuyDialog>
|
|
<!-- <MosaicChipDialog
|
|
ref="dialog"
|
|
:data="data"
|
|
:isTab="isTab"
|
|
@closeTip="closeTip"
|
|
@showTip="showTip"
|
|
/> -->
|
|
</div>
|
|
</template>
|
|
<script lang="ts">
|
|
interface DialogConfigtype {
|
|
name: string;
|
|
title: string;
|
|
selHeader: boolean;
|
|
drag: boolean;
|
|
mask: boolean;
|
|
maskClick: boolean;
|
|
animationEnter: string;
|
|
animationLeave: string;
|
|
destroyTime: number;
|
|
}
|
|
import { Component, Prop, Vue } from "vue-property-decorator";
|
|
import Herodialog from "../Herodialog.vue";
|
|
import TheBuyDialog from "../TheBuyDialog.vue";
|
|
import TheSellDialog from "../TheSellDialog.vue";
|
|
|
|
@Component({
|
|
name: "HeroNft",
|
|
components: {
|
|
Herodialog,
|
|
TheSellDialog,
|
|
TheBuyDialog,
|
|
},
|
|
props: ["data", "isType"],
|
|
})
|
|
export default class HeroNft extends Vue {
|
|
// @Prop() data
|
|
// boxState = 'n'
|
|
dialogVisible: boolean = false;
|
|
isTab: boolean = false;
|
|
isPiecePut: boolean = false;
|
|
isBuy: boolean = false;
|
|
type: string = "hero";
|
|
// created() {
|
|
// console.log(this.data, "nftlist3sdfsadff");
|
|
// }
|
|
|
|
firstOrder = [
|
|
{ Image: require("@/assets/market/hero/star01.png") },
|
|
{ Image: require("@/assets/market/hero/star01.png") },
|
|
{ Image: require("@/assets/market/hero/star01.png") },
|
|
{ Image: require("@/assets/market/hero/star01.png") },
|
|
{ Image: require("@/assets/market/hero/star01.png") },
|
|
];
|
|
firstOrder2 = [
|
|
{ Image: require("@/assets/market/hero/star01.png") },
|
|
{ Image: require("@/assets/market/hero/star01.png") },
|
|
{ Image: require("@/assets/market/hero/star01.png") },
|
|
{ Image: require("@/assets/market/hero/star01.png") },
|
|
{ Image: require("@/assets/market/hero/star01.png") },
|
|
];
|
|
secondOrder = [
|
|
{ Image: require("@/assets/market/hero/star02.png") },
|
|
{ Image: require("@/assets/market/hero/star02.png") },
|
|
{ Image: require("@/assets/market/hero/star02.png") },
|
|
{ Image: require("@/assets/market/hero/star02.png") },
|
|
{ Image: require("@/assets/market/hero/star02.png") },
|
|
];
|
|
thirdOrder = [
|
|
{ Image: require("@/assets/market/hero/star03.png") },
|
|
{ Image: require("@/assets/market/hero/star03.png") },
|
|
{ Image: require("@/assets/market/hero/star03.png") },
|
|
{ Image: require("@/assets/market/hero/star03.png") },
|
|
{ Image: require("@/assets/market/hero/star03.png") },
|
|
];
|
|
|
|
fillZero(str: number | string) {
|
|
var realNum;
|
|
if (str < 10) {
|
|
realNum = "0" + str;
|
|
} else {
|
|
realNum = str;
|
|
console.log(realNum, "realNum");
|
|
}
|
|
return realNum;
|
|
}
|
|
closeTip(hide: boolean) {
|
|
this.isTab = hide;
|
|
}
|
|
showTip(hide: boolean) {
|
|
this.isTab = hide;
|
|
}
|
|
created() {
|
|
// console.log(this.starList, "starList");
|
|
if (this.data.detail.quality > 0 && this.data.detail.quality <= 5) {
|
|
this.firstOrder.splice(0, 5 - this.data.detail.quality);
|
|
// this.firstOrder= this.firstOrder.splice(0, 5 - this.data.detail.quality);
|
|
} else if (this.data.detail.quality > 5 && this.data.detail.quality <= 10) {
|
|
console.log("2");
|
|
this.secondOrder.splice(0, 5 - (this.data.detail.quality - 5));
|
|
} else {
|
|
this.thirdOrder.splice(0, 5 - (this.data.detail.quality - 10));
|
|
}
|
|
}
|
|
beforeUpdate(){
|
|
if (this.data.detail.quality > 0 && this.data.detail.quality <= 5) {
|
|
this.firstOrder2.splice(0, 5 - this.data.detail.quality);
|
|
// this.firstOrder= this.firstOrder.splice(0, 5 - this.data.detail.quality);
|
|
} else if (this.data.detail.quality > 5 && this.data.detail.quality <= 10) {
|
|
console.log("2");
|
|
this.secondOrder.splice(0, 5 - (this.data.detail.quality - 5));
|
|
} else {
|
|
this.thirdOrder.splice(0, 5 - (this.data.detail.quality - 10));
|
|
}
|
|
}
|
|
// Update(){
|
|
// if (this.data.detail.quality > 0 && this.data.detail.quality <= 5) {
|
|
// this.firstOrder2.splice(0, 5 - this.data.detail.quality);
|
|
// // this.firstOrder= this.firstOrder.splice(0, 5 - this.data.detail.quality);
|
|
// } else if (this.data.detail.quality > 5 && this.data.detail.quality <= 10) {
|
|
// console.log("2");
|
|
// this.secondOrder.splice(0, 5 - (this.data.detail.quality - 5));
|
|
// } else {
|
|
// this.thirdOrder.splice(0, 5 - (this.data.detail.quality - 10));
|
|
// }
|
|
// }
|
|
// get starList() {
|
|
// if (this.data.detail.quality > 0 && this.data.detail.quality <= 5) {
|
|
// console.log('11111111111111',this.firstOrder.splice(0, 5 - this.data.detail.quality));
|
|
|
|
// return this.firstOrder.splice(0, 5 - this.data.detail.quality);
|
|
// } else if (this.data.detail.quality > 5 && this.data.detail.quality <= 10) {
|
|
// console.log('2');
|
|
// return this.secondOrder.splice(0, 5 - (this.data.detail.quality - 5));
|
|
// } else {
|
|
// return this.thirdOrder.splice(0, 5 - (this.data.detail.quality - 10));
|
|
// }
|
|
// }
|
|
|
|
get levelNumber() {
|
|
return this.data.detail.hero_lv;
|
|
}
|
|
get qualityNumber() {
|
|
return this.data.detail.quality;
|
|
}
|
|
HeroDialog(data: void) {
|
|
// console.log(data.item_id+'我是英雄弹框');
|
|
this.dialogVisible = true;
|
|
console.log("-=--==--=", this.dialogVisible);
|
|
// get cardBg() {
|
|
// if (this.nftData.isGenesis) {
|
|
// return require("@/assets/main/card/card_border_s.png");
|
|
// } else {
|
|
// return require("@/assets/main/card/card_border.png");
|
|
// }
|
|
// }
|
|
}
|
|
|
|
HeroDialoghide(data: boolean) {
|
|
this.dialogVisible = data;
|
|
}
|
|
handPutShow() {
|
|
this.isPiecePut = true;
|
|
console.log("");
|
|
}
|
|
handPutHide() {
|
|
this.isPiecePut = false;
|
|
}
|
|
handBuyShow() {
|
|
this.isBuy = true;
|
|
console.log("99999999999999999");
|
|
}
|
|
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 {
|
|
margin-top: 18px;
|
|
}
|
|
.hero-img {
|
|
position: absolute;
|
|
left: 0px;
|
|
bottom: 0px;
|
|
}
|
|
.hero-name {
|
|
// width: 46px;
|
|
height: 24px;
|
|
// max-width: 86px;
|
|
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: 6px;
|
|
}
|
|
.gen {
|
|
position: absolute;
|
|
left: 5px;
|
|
top: 25px;
|
|
}
|
|
.info {
|
|
display: flex;
|
|
// justify-content: center;
|
|
align-items: center;
|
|
margin-top: 8px;
|
|
}
|
|
.info-level {
|
|
color: #000;
|
|
margin-left: 20px;
|
|
}
|
|
.level {
|
|
font-size: 21px;
|
|
}
|
|
.level-img {
|
|
display: flex;
|
|
}
|
|
.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>
|