493 lines
12 KiB
Vue
493 lines
12 KiB
Vue
<template>
|
|
<el-dialog :show-close="false" :visible.sync="visible">
|
|
<div class="bg"></div>
|
|
<div class="container">
|
|
<div class="chip-left" v-if="data.detail">
|
|
<img
|
|
v-if="data.detail.item_id"
|
|
width="240px"
|
|
:src="
|
|
require('@/assets/market/chip/details/' + data.detail.item_id + '_full.png')
|
|
"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
<div class="chip-right">
|
|
<div class="chip-right-top">
|
|
<div class="token-id">#{{ data.token_id }}</div>
|
|
</div>
|
|
<div class="chip-right-bottom">
|
|
<div class="chip-assult">
|
|
<div class="assult-rifle">
|
|
<div class="assult-rifle-content">
|
|
<div class="assult-rifle-name">Assult Rifle</div>
|
|
<div class="hill-icon">
|
|
<img
|
|
width="28px"
|
|
src="../../assets/market/hero/hill-icon.png"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="level">
|
|
<div>
|
|
<span class="level-name">Lv</span>
|
|
<span class="level-number" v-if="data.detail">{{
|
|
data.detail.chip_grade
|
|
}}</span>
|
|
</div>
|
|
<div class="lucky-value">
|
|
<div class="lucky-img">
|
|
<img
|
|
width="35px"
|
|
src="../../assets/market/hero/lucky-img.png"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
<div>
|
|
<div class="lucky-text">Lucky</div>
|
|
<div class="lucky-boder"></div>
|
|
<div class="lucky-number">
|
|
{{ data.detail.lucky_temporary }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="owner">
|
|
<div class="owner-content">
|
|
<div>Owner :</div>
|
|
<div>{{ owner }}</div>
|
|
</div>
|
|
<div class="owner-mint">
|
|
<div>Mint Time:</div>
|
|
<div>{{ time }} UTC</div>
|
|
</div>
|
|
<div class="owner-history">
|
|
<!-- <div>History :</div>
|
|
<div>#3006985843100103 (NFTLink)</div> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="def-content" v-if="data.detail">
|
|
<div
|
|
class="def-item"
|
|
v-for="(item, i) in data.detail.rand_attr"
|
|
:key="i"
|
|
>
|
|
<div>{{ chipArridName(item.attr_id) }}</div>
|
|
<div>{{ parseFloat(item.val * 100).toFixed(2) }}%</div>
|
|
</div>
|
|
<div class="def-item">
|
|
LUCKY Unlocked at Lv.{{ data.detail.chip_grade }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="buy-price">
|
|
<div class="mynft" v-if="isType === 'mynft'">
|
|
<div class="for-rent-btn" v-if="data.o_link > 0">
|
|
<div class="adjust" @click="handPutShow"></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">{{
|
|
formatPriceShow(data.s_price ? data.s_price : " ", 18)
|
|
}}</span>
|
|
</div>
|
|
<div>
|
|
<a href="javascript:void(0)">
|
|
<img
|
|
@click="handBuyShow"
|
|
width="345px"
|
|
src="../../assets/market/hero/buy.png"
|
|
alt="aoi-hero"
|
|
/></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<Close @closeMyself="closeMyself" />
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script>
|
|
import Close from "./Close.vue";
|
|
|
|
import { formatSelect } from "@/utils/UTCTime";
|
|
import { formatAddress, getChipArrid } from "@/utils/formatAddress";
|
|
import { AppModule } from "@/store/modules/app";
|
|
import { formatPrice } from "@/utils/chain.util";
|
|
import { CONTRACT_ADDRESS } from "@/configs/config_chain";
|
|
import ChainManager from "@/chain/ChainManager";
|
|
|
|
export default {
|
|
components: { Close },
|
|
props: ["dialogVisible", "data", "isType"],
|
|
data() {
|
|
return {
|
|
chainManager: new ChainManager(),
|
|
loadingInstance:null,
|
|
visible:this.dialogVisible
|
|
};
|
|
},
|
|
watch: {
|
|
dialogVisible(val) {
|
|
this.visible = val;
|
|
},
|
|
},
|
|
computed: {
|
|
time() {
|
|
return formatSelect(this.data.modifytime);
|
|
},
|
|
owner() {
|
|
return formatAddress(this.data.owner_address);
|
|
},
|
|
},
|
|
methods: {
|
|
closeMyself(hide) {
|
|
this.$emit("on-close", hide);
|
|
//如果需要传参的话，可以在"on-close"后面再加参数，然后在父组件的函数里接收就可以了。
|
|
},
|
|
open() {
|
|
this.$emit("on-open");
|
|
//如果需要传参的话，可以在"on-close"后面再加参数，然后在父组件的函数里接收就可以了。
|
|
},
|
|
handPutShow() {
|
|
this.$emit("handPutShow");
|
|
},
|
|
formatPriceShow(price, decimals, fixed = 2) {
|
|
return formatPrice(price, decimals, fixed);
|
|
},
|
|
handBuyShow() {
|
|
this.$emit("handBuyShow");
|
|
},
|
|
chipArridName(nameId) {
|
|
return getChipArrid(nameId);
|
|
},
|
|
async handRemove() {
|
|
|
|
try {
|
|
this.showLoading()
|
|
const nftres = await this.chainManager.bc.beginCancelOrder(
|
|
this.data.o_link,
|
|
CONTRACT_ADDRESS[AppModule.chainId].marketAddress
|
|
);
|
|
if (nftres.status == true) {
|
|
this.$emit("handMessage", 1);
|
|
this.hideLoading();
|
|
setTimeout(() => {
|
|
this.$emit("handMessageHide");
|
|
this.$emit("on-close");
|
|
setTimeout(() => {
|
|
this.$emit("getMarketNftList");
|
|
}, 1000);
|
|
}, 1000);
|
|
}
|
|
} catch (err) {
|
|
console.log("query order status error", err);
|
|
this.hideLoading();
|
|
this.$emit("handMessage", 1);
|
|
}
|
|
},
|
|
showLoading() {
|
|
this.loadingInstance = this.$loading({
|
|
background: "rgba(0, 0, 0, 0.8)",
|
|
});
|
|
},
|
|
|
|
hideLoading() {
|
|
this.loadingInstance?.close();
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
::v-deep .el-dialog,
|
|
.el-pager li {
|
|
position: relative;
|
|
width: 993px !important;
|
|
height: 446px !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;
|
|
}
|
|
.contaier {
|
|
display: flex;
|
|
}
|
|
.close {
|
|
position: absolute;
|
|
cursor: pointer;
|
|
right: -18px;
|
|
top: -20px;
|
|
}
|
|
.container {
|
|
display: flex;
|
|
.chip-left {
|
|
margin-left: 60px;
|
|
margin-top: 94px;
|
|
margin-right: 38px;
|
|
}
|
|
.chip-right {
|
|
margin-top: 11px;
|
|
}
|
|
.chip-right-top {
|
|
color: #ffffff;
|
|
margin-left: 137px;
|
|
width: 319px;
|
|
.token-lable {
|
|
text-align: center;
|
|
font-size: 34px;
|
|
font-weight: bold;
|
|
color: #ffffff;
|
|
}
|
|
.token-id {
|
|
font-size: 28px;
|
|
font-family: "Bahnschrift";
|
|
font-weight: bold;
|
|
color: #ffffff;
|
|
width: 311px;
|
|
height: 41px;
|
|
margin-top: 21px;
|
|
line-height: 49px;
|
|
text-align: center;
|
|
margin-bottom: 12px;
|
|
background: #28c1ed;
|
|
border: 4px solid rgba(91, 211, 246, 0.4);
|
|
border-radius: 24px;
|
|
}
|
|
}
|
|
.chip-right-bottom {
|
|
display: flex;
|
|
}
|
|
.chip-assult {
|
|
}
|
|
.owner {
|
|
width: 316px;
|
|
height: 85px;
|
|
padding-top: 18px;
|
|
background: rgba(5, 57, 68, 0.3);
|
|
border-radius: 14px;
|
|
margin-top: 18px;
|
|
font-size: 15px;
|
|
font-weight: bold;
|
|
color: #ffffff;
|
|
}
|
|
.assult-rifle {
|
|
width: 316px;
|
|
height: 142px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
// justify-content: space-between;
|
|
background: rgba(26, 58, 175, 0.3);
|
|
border-radius: 20px;
|
|
}
|
|
.assult-rifle-name {
|
|
margin-top: 20px;
|
|
margin-left: 20px;
|
|
height: 26px;
|
|
font-size: 34px;
|
|
// font-family: "SairaStencilOne";
|
|
color: #ffffff;
|
|
}
|
|
.def-content {
|
|
width: 222px;
|
|
padding-top: 25px;
|
|
padding-left: 15px;
|
|
padding-right: 15px;
|
|
height: 238px;
|
|
background: rgba(5, 57, 68, 0.3);
|
|
border-radius: 14px;
|
|
margin-left: 18px;
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
color: #ffffff;
|
|
}
|
|
.hill-icon {
|
|
margin-top: 24px;
|
|
margin-right: 23px;
|
|
}
|
|
.assult-rifle-content {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.level {
|
|
margin-top: 18px;
|
|
margin-left: 20px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.level-number {
|
|
font-size: 41px;
|
|
font-style: italic;
|
|
margin-left: 4px;
|
|
color: #ffffff;
|
|
}
|
|
.level-name {
|
|
font-size: 35px;
|
|
font-style: italic;
|
|
margin-left: 5px;
|
|
color: #ffffff;
|
|
}
|
|
.lucky-value {
|
|
width: 140px;
|
|
height: 51px;
|
|
margin-right: 19px;
|
|
background: rgba(249, 140, 23, 0.7);
|
|
display: flex;
|
|
align-items: center;
|
|
border-radius: 29px;
|
|
}
|
|
.lucky-img {
|
|
width: 45px;
|
|
height: 45px;
|
|
background: rgba(250, 178, 100, 0.8);
|
|
display: flex;
|
|
margin-left: 4px;
|
|
justify-content: center;
|
|
align-items: center;
|
|
line-height: 45px;
|
|
margin-right: 5px;
|
|
border-radius: 50%;
|
|
}
|
|
.lucky-text {
|
|
font-size: 13px;
|
|
margin-top: 3px;
|
|
font-style: italic;
|
|
color: #ffffff;
|
|
line-height: 23px;
|
|
}
|
|
.lucky-number {
|
|
font-size: 20px;
|
|
font-style: italic;
|
|
color: #ffffff;
|
|
}
|
|
.lucky-boder {
|
|
width: 90px;
|
|
height: 2px;
|
|
background: linear-gradient(
|
|
90deg,
|
|
#ffffff 0%,
|
|
rgba(255, 255, 255, 0.1) 90%,
|
|
rgba(255, 255, 255, 0) 100%
|
|
);
|
|
border-radius: 1px;
|
|
}
|
|
}
|
|
}
|
|
.owner-content {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-left: 13px;
|
|
margin-right: 13px;
|
|
}
|
|
.owner-mint {
|
|
display: flex;
|
|
margin-top: 10px;
|
|
margin-right: 13px;
|
|
justify-content: space-between;
|
|
margin-left: 13px;
|
|
}
|
|
.owner-history {
|
|
display: flex;
|
|
margin-top: 10px;
|
|
margin-right: 13px;
|
|
justify-content: space-between;
|
|
margin-left: 13px;
|
|
}
|
|
.def-item {
|
|
width: 202px;
|
|
height: 43px;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
border-radius: 10px;
|
|
margin-bottom: 14px;
|
|
padding-right: 7px;
|
|
padding-left: 13px;
|
|
}
|
|
.buy-price {
|
|
position: absolute;
|
|
right: 63px;
|
|
bottom: -41px;
|
|
display: flex;
|
|
.maeket {
|
|
display: flex;
|
|
}
|
|
.price {
|
|
width: 187px;
|
|
height: 66px;
|
|
font-size: 27px;
|
|
position: relative;
|
|
text-align: right;
|
|
font-family: "Arciform";
|
|
margin-right: 20px;
|
|
color: #ffffff;
|
|
background: url("../../assets/market/hero/price.png") no-repeat;
|
|
background-size: contain;
|
|
.price-number {
|
|
line-height: 66px;
|
|
margin-right: 10px;
|
|
// margin-left: 60px;
|
|
}
|
|
}
|
|
.mynft {
|
|
display: flex;
|
|
}
|
|
.rent {
|
|
width: 277px;
|
|
height: 72px;
|
|
// text-align: center;
|
|
// font-size: 44px;
|
|
// line-height: 72px;
|
|
// color: #ffffff;
|
|
// background: url("../../assets/market/chip/sell-btn.png") no-repeat;
|
|
// background-size: contain;
|
|
}
|
|
.sell {
|
|
width: 277px;
|
|
height: 72px;
|
|
text-align: center;
|
|
font-size: 44px;
|
|
line-height: 72px;
|
|
color: #ffffff;
|
|
background: url("../../assets/market/chip/sell-btn.png") no-repeat;
|
|
background-size: contain;
|
|
}
|
|
.for-rent-btn {
|
|
display: flex;
|
|
// margin-top: 170px;
|
|
.adjust {
|
|
width: 277px;
|
|
height: 72px;
|
|
cursor: pointer;
|
|
// margin-left: 14px;
|
|
background: url("../../assets/market/chip/adjust.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
.remove {
|
|
width: 277px;
|
|
height: 72px;
|
|
cursor: pointer;
|
|
margin-left: 14px;
|
|
background: url("../../assets/market/chip/remove.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
}
|
|
</style>
|