334 lines
7.3 KiB
Vue
334 lines
7.3 KiB
Vue
<template>
|
|
<div class="container">
|
|
<div
|
|
class="list-content"
|
|
v-for="(piece, i) in nftList"
|
|
@click="showTip(piece)"
|
|
:key="i"
|
|
>
|
|
<div class="no-sale" v-if="piece.o_link > 0 && isType == 'mynft'">
|
|
<div class="for-rent">
|
|
<div class="for-rent-img">
|
|
<img
|
|
width="205px"
|
|
src="../../../assets/market/hero/no-sale.png"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="chip-bg">
|
|
<img
|
|
v-if="piece.detail"
|
|
:src="
|
|
require('@/assets/market/piece/' + piece.detail.token_id + '.png')
|
|
"
|
|
alt=""
|
|
/>
|
|
<img
|
|
v-else-if="piece.token_id"
|
|
:src="
|
|
require('@/assets/market/piece/' + piece.token_id + '.png')
|
|
"
|
|
alt=""
|
|
/>
|
|
<span class="amount">{{
|
|
piece.amount ? piece.amount : piece.balance
|
|
}}</span>
|
|
</div>
|
|
<div class="level-content">
|
|
<div class="level-lv">
|
|
<!-- Lv <span class="level-number">{{ chip.detail.chip_grade }}</span> -->
|
|
</div>
|
|
<div class="tree-guard">
|
|
{{ piece.c_name ? piece.c_name : piece.detail.name }}
|
|
</div>
|
|
</div>
|
|
<div class="mynft-btn" v-if="isType == 'mynft'">
|
|
<div class="t-icon" v-if="piece.o_link > 0 && isType == 'mynft'">
|
|
<img src="../../../assets/market/chip/t-icon.png" alt="" />
|
|
</div>
|
|
<div class="price" v-if="piece.o_link > 0 && isType == 'mynft'">
|
|
{{ formatPriceShow(piece.s_price, 18) }}
|
|
</div>
|
|
<div class="sell-btn">sell</div>
|
|
</div>
|
|
<div class="price-content" v-else>
|
|
<div class="price-left">
|
|
<div class="t-icon">
|
|
<img src="../../../assets/market/chip/t-icon.png" alt="" />
|
|
</div>
|
|
<div class="price">{{ formatPriceShow(piece.s_price, 18) }}</div>
|
|
</div>
|
|
<div class="buy">
|
|
<img src="../../../assets/market/chip/buy.png" alt="" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<PieceModal
|
|
v-if="isShow"
|
|
ref="dialog"
|
|
:isType="isType"
|
|
@closeTip="closeTip"
|
|
@showTip="showTip"
|
|
:isPiecePut="isPiecePut"
|
|
@handBuyShow="handBuyShow"
|
|
@handPutShow="handPutShow"
|
|
@handPutHide="handPutHide"
|
|
></PieceModal>
|
|
<TheSellDialog
|
|
:type="type"
|
|
:isPiecePut="isPiecePut"
|
|
v-if="currencyTypeList.length > 0 && isType == 'mynft'"
|
|
:currencyTypeList="currencyTypeList"
|
|
ref="selldialog"
|
|
@handMessage="handMessage"
|
|
@handMessageHide="handMessageHide"
|
|
@handPutShow="handPutShow"
|
|
@handPutHide="handPutHide"
|
|
></TheSellDialog>
|
|
<TheBuyDialog
|
|
:type="type"
|
|
:isBuy="isBuy"
|
|
ref="buydialog"
|
|
@handMessage="handMessage"
|
|
@handMessageHide="handMessageHide"
|
|
@handBuyShow="handBuyShow"
|
|
@handBuyHide="handBuyHide"
|
|
></TheBuyDialog>
|
|
<MessageBox ref="message"></MessageBox>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import PieceModal from "./PieceModal.vue";
|
|
import TheSellDialog from "./TheSellDialog.vue";
|
|
import TheBuyDialog from "./TheBuyDialog.vue";
|
|
import MessageBox from "./MessageBox.vue";
|
|
import { formatPrice } from "@/utils/chain.util";
|
|
export default {
|
|
props: ["nftList", "isType", "currencyTypeList"],
|
|
components: { MessageBox, PieceModal, TheSellDialog, TheBuyDialog },
|
|
data() {
|
|
return {
|
|
isShow: false,
|
|
isPiecePut: false,
|
|
type: "piece",
|
|
isBuy: false,
|
|
};
|
|
},
|
|
|
|
methods: {
|
|
chipDialoghide() {
|
|
this.dialogVisible = false;
|
|
},
|
|
formatPriceShow(price, decimals, fixed = 2) {
|
|
return formatPrice(price, decimals, fixed);
|
|
},
|
|
chipDialog() {
|
|
this.dialogVisible = true;
|
|
},
|
|
handMessage() {
|
|
this.$nextTick(() => {
|
|
this.$refs.message.open(1);
|
|
});
|
|
},
|
|
handMessageHide() {
|
|
this.$nextTick(() => {
|
|
this.$nextTick(() => {
|
|
this.$refs.message.close();
|
|
});
|
|
});
|
|
},
|
|
showTip(data) {
|
|
this.isShow = true;
|
|
this.$nextTick(() => {
|
|
this.$refs.dialog.init(data);
|
|
});
|
|
},
|
|
closeTip() {
|
|
this.isShow = false;
|
|
},
|
|
handPutShow(data) {
|
|
this.isPiecePut = true;
|
|
this.$nextTick(() => {
|
|
this.$refs.selldialog.init(data);
|
|
});
|
|
},
|
|
handPutHide() {
|
|
this.isPiecePut = false;
|
|
},
|
|
handBuyShow(data) {
|
|
this.isBuy = true;
|
|
this.$nextTick(() => {
|
|
this.$refs.buydialog.init(data);
|
|
});
|
|
},
|
|
handBuyHide() {
|
|
this.isBuy = false;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.container {
|
|
display: flex;
|
|
width: 100%;
|
|
cursor: pointer;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
flex-direction: row;
|
|
margin-top: 43px;
|
|
margin-left: 72px;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
.list-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-right: 41px;
|
|
width: 382px;
|
|
height: 504px;
|
|
padding-top: 35px;
|
|
padding-left: 33px;
|
|
padding-right: 33px;
|
|
margin-bottom: 20px;
|
|
background: url("../../../assets/mobile/market/chip/bg.png") no-repeat;
|
|
background-size: contain;
|
|
position: relative;
|
|
.no-sale {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background: #3c3c3c;
|
|
border: 4px solid #cdd8fd;
|
|
opacity: 0.8;
|
|
z-index: 11;
|
|
border-radius: 16px;
|
|
.for-rent-img {
|
|
margin-top: 100px;
|
|
margin-bottom: 70px;
|
|
width: 378px;
|
|
img {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.mynft-btn {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
// margin-right: 39px;
|
|
margin-top: 20px;
|
|
.sell-btn {
|
|
width: 189px;
|
|
height: 62px;
|
|
background: #2bcced;
|
|
border: 4px solid #85eaff;
|
|
font-size: 47px;
|
|
text-align: center;
|
|
// font-family: "Arciform";
|
|
font-weight: 400;
|
|
color: #ffffff;
|
|
border-radius: 31px;
|
|
}
|
|
}
|
|
.price-content {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-right: 32px;
|
|
margin-top: 20px;
|
|
}
|
|
.level-number {
|
|
font-size: 43px;
|
|
font-style: italic;
|
|
color: #454545;
|
|
}
|
|
.level-lv {
|
|
font-size: 37px;
|
|
font-style: italic;
|
|
color: #454545;
|
|
}
|
|
.t-icon {
|
|
width: 59px;
|
|
height: 59px;
|
|
img {
|
|
width: 59px;
|
|
height: 59px;
|
|
}
|
|
}
|
|
.price {
|
|
font-size: 47px;
|
|
font-family: "Arciform";
|
|
font-weight: 400;
|
|
color: #454545;
|
|
margin-left: 7px;
|
|
margin-right: 7px;
|
|
}
|
|
.price-left {
|
|
display: flex;
|
|
}
|
|
.buy {
|
|
width: 137px;
|
|
height: 59px;
|
|
cursor: pointer;
|
|
img {
|
|
width: 137px;
|
|
height: 59px;
|
|
}
|
|
}
|
|
|
|
.level-content {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: 5px;
|
|
margin-left: 4px;
|
|
.level-img {
|
|
display: flex;
|
|
}
|
|
|
|
.level-levelList {
|
|
display: flex;
|
|
margin-left: 14px;
|
|
}
|
|
.item-Image {
|
|
margin-left: 6px;
|
|
display: flex;
|
|
}
|
|
}
|
|
.chip-bg {
|
|
width: 379px;
|
|
height: 336px;
|
|
margin-left: 4px;
|
|
display: flex;
|
|
justify-content: center;
|
|
position: relative;
|
|
align-items: center;
|
|
background: url("../../../assets/market/chip/bg-there.png") no-repeat;
|
|
background-size: contain;
|
|
img {
|
|
width: 268px;
|
|
height: 233px;
|
|
}
|
|
.amount {
|
|
position: absolute;
|
|
right: 19px;
|
|
font-size: 41px;
|
|
bottom: 15px;
|
|
}
|
|
}
|
|
.tree-guard {
|
|
font-size: 38px;
|
|
font-family: "OPPOSans";
|
|
font-weight: normal;
|
|
color: #454545;
|
|
}
|
|
</style>
|