717 lines
19 KiB
Vue
717 lines
19 KiB
Vue
<template>
|
|
<el-dialog
|
|
:show-close="false"
|
|
:class="isTabs ? 'contents' : 'contents'"
|
|
:visible.sync="dialogVisible"
|
|
>
|
|
<Transition v-if="!isTabs">
|
|
<div class="hero-tab-left">
|
|
<div class="bg"></div>
|
|
<div class="contaier">
|
|
<div class="hero-left">
|
|
<img
|
|
v-if="hero.c_id"
|
|
:src="
|
|
require('@/assets/market/hero/details/' +
|
|
hero.c_id +
|
|
'_full.png')
|
|
"
|
|
alt="aoi-hero"
|
|
/>
|
|
<img
|
|
v-if="hero.item_id"
|
|
:src="
|
|
require('@/assets/market/hero/details/' +
|
|
hero.item_id +
|
|
'_full.png')
|
|
"
|
|
alt="aoi-hero"
|
|
/>
|
|
</div>
|
|
<div class="hero-left-info">
|
|
<img
|
|
v-if="hero.c_id"
|
|
:src="
|
|
require('@/assets/market/hero/details/' +
|
|
hero.c_id +
|
|
'_full.png')
|
|
"
|
|
alt="aoi-hero"
|
|
/>
|
|
<img
|
|
v-if="hero.item_id"
|
|
:src="
|
|
require('@/assets/market/hero/details/' +
|
|
hero.item_id +
|
|
'_full.png')
|
|
"
|
|
alt="aoi-hero"
|
|
/>
|
|
</div>
|
|
<div class="hero-right-token">
|
|
<div class="token-name">TOKEN ID</div>
|
|
<div class="token-id">#{{ hero.detail.token_id }}</div>
|
|
<div class="hill">
|
|
<div class="hill-content">
|
|
<div class="hill-name">
|
|
{{ hero.c_name ? hero.c_name : hero.detail.hero_name
|
|
}}<span class="name">Name</span>
|
|
</div>
|
|
<div>
|
|
<img
|
|
width="34px"
|
|
src="../../assets/market/hero/hill-icon.png"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
</div>
|
|
<LeveStars :quality="hero.detail.quality"> </LeveStars>
|
|
<LuckyValue
|
|
:level="hero.detail.hero_lv"
|
|
:lucky="hero.detail.lucky"
|
|
></LuckyValue>
|
|
<ProgressCard
|
|
color="rgba(184, 77, 204, 0.7)"
|
|
progressImg="aggressivity"
|
|
definecolor="#ca61dc"
|
|
:max="hero.detail.pvp_ceg_uplimit"
|
|
:min="hero.detail.pvp_ceg_uplimit"
|
|
></ProgressCard>
|
|
<ProgressCard
|
|
color="rgba(193, 168, 93, 0.7)"
|
|
progressImg="defense"
|
|
definecolor="#d0bd7a"
|
|
:max="hero.detail.pve_ceg_uplimit"
|
|
:min="hero.detail.pve_ceg_uplimit"
|
|
></ProgressCard>
|
|
|
|
<ProgressCard
|
|
color="rgba(81, 194, 224, 0.7)"
|
|
progressImg="lightning"
|
|
definecolor="#7dd6ff"
|
|
:max="hero.detail.hero_tili_max"
|
|
:min="hero.detail.hero_tili"
|
|
></ProgressCard>
|
|
</div>
|
|
</div>
|
|
<div class="hero-right-hp">
|
|
<div class="hero-hp">
|
|
<div class="hero-item hero-item-hp">
|
|
<div class="item">
|
|
<div class="item-img">
|
|
<img
|
|
width="32px"
|
|
src="../../assets/market/hero/hp.png"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
<div>HP</div>
|
|
</div>
|
|
<div>
|
|
{{
|
|
hero.detail.rand_attr[0].val
|
|
? hero.detail.rand_attr[0].val >= 100
|
|
? parseInt(hero.detail.rand_attr[0].val * 1)
|
|
: (hero.detail.rand_attr[0].val * 1).toFixed(2)
|
|
: ""
|
|
}}
|
|
</div>
|
|
</div>
|
|
<div class="hero-item hero-item-attack">
|
|
<div class="item">
|
|
<div class="item-img">
|
|
<img
|
|
width="32px"
|
|
src="../../assets/market/hero/attack.png"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
<div>ATTACK</div>
|
|
</div>
|
|
<div>
|
|
{{
|
|
hero.detail.rand_attr[1].val
|
|
? hero.detail.rand_attr[1].val >= 100
|
|
? parseInt(hero.detail.rand_attr[1].val * 1)
|
|
: (hero.detail.rand_attr[1].val * 1).toFixed(2)
|
|
: ""
|
|
}}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hero-item hero-item-def">
|
|
<div class="item">
|
|
<div class="item-img">
|
|
<img
|
|
width="32px"
|
|
src="../../assets/market/hero/def.png"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
<div>DEFENCE</div>
|
|
</div>
|
|
<div>
|
|
{{
|
|
hero.detail.rand_attr[2].val
|
|
? hero.detail.rand_attr[2].val >= 100
|
|
? parseInt(hero.detail.rand_attr[2].val * 1)
|
|
: (hero.detail.rand_attr[2].val * 1).toFixed(2)
|
|
: ""
|
|
}}
|
|
</div>
|
|
</div>
|
|
<div class="hero-item hero-item-cri">
|
|
<div class="item">
|
|
<div class="item-img">
|
|
<img
|
|
width="33px"
|
|
src="../../assets/market/hero/cri.png"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
<div>CRITICAL</div>
|
|
</div>
|
|
<div>
|
|
{{
|
|
hero.detail.rand_attr[4].val
|
|
? (hero.detail.rand_attr[4].val * 1 * 100).toFixed(2)
|
|
: "0"
|
|
}}%
|
|
</div>
|
|
</div>
|
|
<div class="hero-item hero-item-criDam">
|
|
<div class="item">
|
|
<div class="item-img">
|
|
<img
|
|
width="33px"
|
|
src="../../assets/market/hero/criDam.png"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
<div>CRI DAMAGE</div>
|
|
</div>
|
|
<div>
|
|
{{
|
|
hero.detail.rand_attr[5].val
|
|
? (hero.detail.rand_attr[5].val * 1 * 100).toFixed(2)
|
|
: "0"
|
|
}}%
|
|
</div>
|
|
</div>
|
|
<div class="hero-item hero-item-dodge">
|
|
<div class="item">
|
|
<div class="item-img">
|
|
<img
|
|
width="33px"
|
|
src="../../assets/market/hero/dodge.png"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
<div>DODGE</div>
|
|
</div>
|
|
<div>
|
|
{{
|
|
hero.detail.rand_attr[6].val
|
|
? (hero.detail.rand_attr[6].val * 1 * 100).toFixed(2)
|
|
: "0"
|
|
}}%
|
|
</div>
|
|
</div>
|
|
<div class="hero-item hero-item-reduces">
|
|
<div class="item">
|
|
<div class="item-img">
|
|
<img
|
|
width="33px"
|
|
src="../../assets/market/hero/reduces.png"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
<div>RUDUCE</div>
|
|
</div>
|
|
<div>
|
|
{{
|
|
hero.detail.rand_attr[7].val
|
|
? (hero.detail.rand_attr[7].val * 1 * 100).toFixed(2)
|
|
: "0"
|
|
}}%
|
|
</div>
|
|
</div>
|
|
<div class="hero-item hero-item-speed">
|
|
<div class="item">
|
|
<div class="item-img">
|
|
<img
|
|
width="32px"
|
|
src="../../assets/market/hero/speed.png"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
<div>SPEED</div>
|
|
</div>
|
|
<div>
|
|
{{
|
|
hero.detail.rand_attr[3].val
|
|
? hero.detail.rand_attr[3].val
|
|
: ""
|
|
}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<AccountCard
|
|
:owner="
|
|
hero.owner_address
|
|
? hero.owner_address
|
|
: hero.info.owner_address
|
|
"
|
|
:time="hero.modifytime"
|
|
>
|
|
</AccountCard>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
<Transition v-else>
|
|
<div>
|
|
<MosaicChipDialog :type="type" :hero="hero" /></div
|
|
></Transition>
|
|
<div class="buy-price">
|
|
<div class="mynft" v-if="isType === 'mynft'">
|
|
<div class="for-rent-btn" v-if="hero.selling > 0">
|
|
<div class="adjust" @click="handPutShow(hero)"></div>
|
|
<div class="remove" @click="handremove"></div>
|
|
</div>
|
|
<div v-else>
|
|
<div class="rent"></div>
|
|
<div class="sell" @click="handPutShow">Sell</div>
|
|
</div>
|
|
</div>
|
|
<div class="maeket" v-else>
|
|
<div class="price">
|
|
<span class="price-number">{{
|
|
hero.s_price ? hero.s_price : " "
|
|
}}</span>
|
|
</div>
|
|
<div>
|
|
<a href="javascript:void(0)">
|
|
<img
|
|
@click="handBuyShow"
|
|
width="469px"
|
|
src="../../assets/market/hero/buy.png"
|
|
alt="aoi-hero"
|
|
/></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="tabs">
|
|
<div :class="isTabs ? 'chip-tab' : 'hero-tab'" @click="handHeroTab">
|
|
HERO
|
|
</div>
|
|
<div>
|
|
<div
|
|
v-if="hero.detail.chips_info.length > 0 && hero.detail.chips_info"
|
|
:class="isTabs ? 'hero-tab' : 'chip-tab'"
|
|
@click="handChipTab"
|
|
>
|
|
CHIP
|
|
</div>
|
|
<div v-else :class="isTabs ? 'hero-tab' : 'chip-tab'">
|
|
<img width="33px" src="../../assets/market/lock.png" alt="aoi-hero" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Close @closeMyself="closeMyself" />
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script>
|
|
import LeveStars from "./LeveStars.vue";
|
|
import Close from "./Close.vue";
|
|
import AccountCard from "./AccountCard.vue";
|
|
import ProgressCard from "./ProgressCard.vue";
|
|
import LuckyValue from "./LuckyValue.vue";
|
|
import MosaicChipDialog from "./MosaicChip.vue";
|
|
import { AppModule } from "@/store/modules/app";
|
|
import { CONTRACT_ADDRESS } from "@/configs/config_chain";
|
|
import ChainManager from "@/chain/ChainManager";
|
|
export default {
|
|
props: ["dialogVisible", "hero", "isType"],
|
|
components: {
|
|
LeveStars,
|
|
Close,
|
|
AccountCard,
|
|
ProgressCard,
|
|
MosaicChipDialog,
|
|
LuckyValue,
|
|
},
|
|
data() {
|
|
return {
|
|
isTabs: false,
|
|
type: "hero",
|
|
orderId: 1,
|
|
chainManager: new ChainManager(),
|
|
};
|
|
},
|
|
methods: {
|
|
closeMyself(hide) {
|
|
this.$emit("on-close", hide);
|
|
//如果需要传参的话，可以在"on-close"后面再加参数，然后在父组件的函数里接收就可以了。
|
|
},
|
|
open() {
|
|
this.$emit("on-open");
|
|
//如果需要传参的话，可以在"on-close"后面再加参数，然后在父组件的函数里接收就可以了。
|
|
},
|
|
|
|
closeTip() {},
|
|
showTip() {
|
|
this.isTabs = true;
|
|
this.$nextTick(() => {
|
|
//这里的dialog与上面dialog-component组件里面的ref属性值是一致的
|
|
//init调用的是dialog-component组件里面的init方法
|
|
//data是传递给弹窗页面的值
|
|
this.$refs.dialog.init(this.hero);
|
|
});
|
|
},
|
|
closeTip() {
|
|
// 分发自定义事件(事件名: closeTip)
|
|
this.$emit("closeTip", false);
|
|
},
|
|
showTip() {
|
|
this.$emit("showTip", true);
|
|
},
|
|
handHeroTab() {
|
|
this.$emit("closeTip", false);
|
|
this.isTabs = false;
|
|
},
|
|
handChipTab() {
|
|
this.$emit("showTip", true);
|
|
this.isTabs = true;
|
|
},
|
|
handPutShow(data) {
|
|
this.$emit("handPutShow",data);
|
|
console.log("ppwowerw");
|
|
},
|
|
handBuyShow() {
|
|
this.$emit("handBuyShow");
|
|
console.log("handBuyShow");
|
|
},
|
|
async handremove() {
|
|
try {
|
|
const nftres = await this.chainManager.bc.beginCancelOrder(
|
|
this.orderId,
|
|
CONTRACT_ADDRESS[AppModule.chainId].marketDddress
|
|
);
|
|
console.log(nftres, "beginSell");
|
|
} catch (err) {
|
|
console.log("query order status error", err);
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.contents {
|
|
::v-deep .el-dialog,
|
|
.el-pager li {
|
|
position: relative;
|
|
width: 1727px !important;
|
|
height: 775px !important;
|
|
background: url("../../assets/market/hero/dialog-bg.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
box-shadow: none;
|
|
}
|
|
::v-deep .el-dialog__body {
|
|
padding: 0px 0px !important;
|
|
}
|
|
::v-deep .el-dialog__header {
|
|
padding: 0px 0px 0px;
|
|
}
|
|
}
|
|
.content {
|
|
::v-deep .el-dialog,
|
|
.el-pager li {
|
|
position: relative;
|
|
width: 1354px !important;
|
|
height: 775px !important;
|
|
background: url("../../assets/market/piece/details/bg.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
box-shadow: none;
|
|
}
|
|
::v-deep .el-dialog__body {
|
|
padding: 0px 0px !important;
|
|
}
|
|
::v-deep .el-dialog__header {
|
|
padding: 0px 0px 0px;
|
|
}
|
|
}
|
|
.hero-tab-left {
|
|
.contaier {
|
|
display: flex;
|
|
}
|
|
.hero-left {
|
|
width: 802px;
|
|
height: 651px;
|
|
position: absolute;
|
|
top: -41px;
|
|
left: -40px;
|
|
img {
|
|
width: 100%;
|
|
}
|
|
}
|
|
.hero-left-info {
|
|
width: 949px;
|
|
height: 651px;
|
|
margin-top: 36px;
|
|
img {
|
|
width: 100%;
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.hill {
|
|
width: 100%;
|
|
height: 509px;
|
|
margin-top: 31px;
|
|
background: url("../../assets/market/hero/hill-bg.png") no-repeat;
|
|
background-size: contain;
|
|
.hill-content {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding-top: 15px;
|
|
margin-left: 32px;
|
|
margin-right: 24px;
|
|
margin-bottom: 26px;
|
|
}
|
|
.hill-name {
|
|
font-size: 47px;
|
|
// font-family: "SairaStencilOne";
|
|
position: relative;
|
|
color: #ffffff;
|
|
}
|
|
.name {
|
|
font-size: 17px;
|
|
position: absolute;
|
|
left: -27px;
|
|
bottom: -11px;
|
|
font-family: "OPPOSans";
|
|
font-weight: normal;
|
|
color: #ffffff;
|
|
margin-left: 33px;
|
|
}
|
|
}
|
|
.hero-right-token {
|
|
width: 353px;
|
|
color: #ffffff;
|
|
right: 0px;
|
|
.token-name {
|
|
text-align: center;
|
|
margin-top: 51px;
|
|
font-size: 34px;
|
|
margin-bottom: 11px;
|
|
font-weight: bold;
|
|
font-weight: bold;
|
|
color: #ffffff;
|
|
}
|
|
.token-id {
|
|
width: 345px;
|
|
height: 41px;
|
|
font-size: 30px;
|
|
line-height: 49px;
|
|
text-align: center;
|
|
margin-bottom: 32px;
|
|
background: #28c1ed;
|
|
border: 4px solid rgba(91, 211, 246, 0.4);
|
|
border-radius: 24px;
|
|
}
|
|
}
|
|
|
|
.hero-right-hp {
|
|
width: 33%;
|
|
margin-left: 25px;
|
|
margin-top: 36px;
|
|
color: #ffffff;
|
|
right: 0px;
|
|
.hero-hp {
|
|
width: 409px;
|
|
height: 466px;
|
|
background: rgba(5, 57, 68, 0.3);
|
|
padding-top: 29px;
|
|
padding-left: 35px;
|
|
padding-right: 31px;
|
|
border-radius: 20px;
|
|
}
|
|
}
|
|
|
|
.hero-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: 24px;
|
|
font-family: "Bahnschrift";
|
|
font-weight: bold;
|
|
color: #ffffff;
|
|
.item {
|
|
display: flex;
|
|
font-size: 24px;
|
|
font-family: "Bahnschrift";
|
|
font-weight: bold;
|
|
color: #ffffff;
|
|
.item-img {
|
|
margin-right: 26px;
|
|
}
|
|
}
|
|
}
|
|
.hero-item-hp {
|
|
margin-bottom: 13px;
|
|
}
|
|
.hero-item-attack {
|
|
margin-bottom: 25px;
|
|
}
|
|
.hero-item-def {
|
|
margin-bottom: 17px;
|
|
}
|
|
.hero-item-cri {
|
|
margin-bottom: 13px;
|
|
}
|
|
.hero-item-criDam {
|
|
margin-bottom: 20px;
|
|
}
|
|
.hero-item-dodge {
|
|
margin-bottom: 18px;
|
|
}
|
|
.hero-item-reduces {
|
|
margin-bottom: 22px;
|
|
}
|
|
|
|
.hp-bottom {
|
|
width: 435px;
|
|
height: 126px;
|
|
font-size: 22px;
|
|
font-family: "Bahnschrift";
|
|
font-weight: bold;
|
|
color: #ffffff;
|
|
margin-top: 13px;
|
|
padding-right: 20px;
|
|
padding-left: 20px;
|
|
padding-top: 28px;
|
|
background: rgba(5, 57, 68, 0.3);
|
|
border-radius: 20px;
|
|
.userinfo {
|
|
display: flex;
|
|
margin-bottom: 12px;
|
|
justify-content: space-between;
|
|
}
|
|
}
|
|
}
|
|
.buy-price {
|
|
position: absolute;
|
|
right: 89px;
|
|
bottom: -46px;
|
|
display: flex;
|
|
.maeket {
|
|
display: flex;
|
|
}
|
|
.price {
|
|
width: 281px;
|
|
height: 89px;
|
|
font-size: 43px;
|
|
position: relative;
|
|
font-family: "Arciform";
|
|
font-weight: 400;
|
|
color: #ffffff;
|
|
background: url("../../assets/market/hero/price.png") no-repeat;
|
|
background-size: contain;
|
|
.price-number {
|
|
line-height: 89px;
|
|
margin-left: 90px;
|
|
}
|
|
}
|
|
.mynft {
|
|
display: flex;
|
|
}
|
|
|
|
.sell {
|
|
width: 384px;
|
|
height: 89px;
|
|
cursor: pointer;
|
|
text-align: center;
|
|
font-size: 44px;
|
|
line-height: 89px;
|
|
color: #ffffff;
|
|
background: url("../../assets/market/chip/sell-btn.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
.rent {
|
|
width: 384px;
|
|
height: 89px;
|
|
margin-right: 35px;
|
|
}
|
|
.for-rent-btn {
|
|
display: flex;
|
|
.adjust {
|
|
width: 384px;
|
|
height: 89px;
|
|
cursor: pointer;
|
|
background: url("../../assets/market/hero/adjust.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
.remove {
|
|
width: 384px;
|
|
height: 89px;
|
|
cursor: pointer;
|
|
margin-left: 14px;
|
|
background: url("../../assets/market/hero/remove.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
}
|
|
.tabs {
|
|
position: absolute;
|
|
left: 734px;
|
|
top: -70px;
|
|
display: flex;
|
|
.hero-tab {
|
|
width: 306px;
|
|
height: 80px;
|
|
cursor: pointer;
|
|
font-size: 63px;
|
|
font-family: "SairaStencilOne";
|
|
font-weight: 400;
|
|
color: #ffffff;
|
|
line-height: 80px;
|
|
text-align: center;
|
|
margin-right: 10px;
|
|
background: url("../../assets/market/tabhshow.png") no-repeat;
|
|
background-size: contain;
|
|
}
|
|
.chip-tab {
|
|
width: 290px;
|
|
height: 70px;
|
|
font-size: 46px;
|
|
line-height: 70px;
|
|
margin-right: 10px;
|
|
cursor: pointer;
|
|
text-align: center;
|
|
font-family: "SairaStencilOne";
|
|
font-weight: 400;
|
|
color: #5e82d7;
|
|
background: url("../../assets/market/tabhied.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
.v-enter-from,
|
|
.v-leave-to {
|
|
opacity: 0;
|
|
}
|
|
|
|
.v-enter-active,
|
|
.v-leave-active {
|
|
transition: opacity 0.5s ease;
|
|
}
|
|
|
|
.v-enter-to,
|
|
.v-leave-from {
|
|
opacity: 1;
|
|
}
|
|
</style>
|