157 lines
3.2 KiB
Vue
157 lines
3.2 KiB
Vue
<template>
|
|
<div>
|
|
<top-menu class="desk-top"></top-menu>
|
|
<div class="root">
|
|
<nft-detail :data="nftData"></nft-detail>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Component, Vue, Watch } from 'vue-property-decorator'
|
|
import ItemDetail from '@/components/market/ItemDetail.vue'
|
|
import TopMenu from '@/components/market/TopMenu.vue'
|
|
import NftDetail from '@/components/market/NftDetail.vue'
|
|
import { INftAttr, ISpineData } from '@/utils/SpineRender'
|
|
import { defaultINftAttr, getNftDetail } from '@/api/Mall'
|
|
import { AppModule } from '@/store/modules/app'
|
|
|
|
@Component({
|
|
components: {
|
|
NftDetail,
|
|
ItemDetail,
|
|
TopMenu
|
|
}
|
|
})
|
|
export default class Item extends Vue {
|
|
nftId = ''
|
|
nftData: ISpineData = { info: defaultINftAttr() }
|
|
created() {
|
|
this.nftId = this.$route.params.id
|
|
if (this.accountId) {
|
|
this.fetchData()
|
|
}
|
|
}
|
|
|
|
get accountId() {
|
|
return AppModule.accountId
|
|
}
|
|
|
|
@Watch('accountId')
|
|
private accountChange() {
|
|
console.log('account change: ', AppModule.accountId)
|
|
if (this.accountId) {
|
|
this.fetchData()
|
|
}
|
|
}
|
|
|
|
async fetchData() {
|
|
const reqData = {
|
|
account: this.accountId,
|
|
token_id: this.nftId
|
|
}
|
|
const res: any = await getNftDetail(reqData)
|
|
const data = res.info
|
|
const nftInfo: INftAttr = data.info
|
|
nftInfo.mintTime = data.mint_time
|
|
nftInfo.owner = data.owner_address
|
|
nftInfo.advancedCount = data.info?.advanced_count || 0
|
|
nftInfo.successRate = data.info?.success_rate || 0
|
|
const nftData: any = {
|
|
name: data.info.name,
|
|
class: ((data.info?.job || '') + '').toLowerCase(),
|
|
recordId: data.token_id,
|
|
id: data.token_id,
|
|
skelName: `n_${(data.info?.name || '').toLowerCase()}`,
|
|
directBuy: false,
|
|
showBuy: false
|
|
}
|
|
if (data.currency_list && data.currency_list.length > 0) {
|
|
const priceData: any = data.currency_list[0]
|
|
nftData.discount = priceData.discount_rate
|
|
nftData.price = priceData.original_price
|
|
nftData.priceDiscount = priceData.discount_price
|
|
nftData.currency = priceData.name
|
|
nftData.coinAddress = priceData.contract_address
|
|
}
|
|
nftData.info = nftInfo
|
|
this.nftData = nftData
|
|
// this.$forceUpdate()
|
|
console.log(this.nftData)
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
@import '../../scss/breakpoints.scss';
|
|
.root {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.banner {
|
|
position: absolute;
|
|
width: 100%;
|
|
}
|
|
.mobile-top {
|
|
display: none;
|
|
}
|
|
|
|
// Tablet & Phone
|
|
@include media('<desktop') {
|
|
.banner {
|
|
position: relative;
|
|
}
|
|
.mobile-top {
|
|
display: block;
|
|
}
|
|
|
|
}
|
|
@include media('>=desktop', '<wide'){
|
|
.root {
|
|
font-size: 11px;
|
|
}
|
|
.root .container {
|
|
width: 1024px;
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 768px) and (max-width: 1023px) {
|
|
.root {
|
|
font-size: 20px;
|
|
}
|
|
.container {
|
|
width: 768px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
.root {
|
|
font-size: 11px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 767px) and (max-width: 320px) {
|
|
.root {
|
|
font-size: 9px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
.container {
|
|
width: 375px;
|
|
}
|
|
.searchResult {
|
|
padding: 26px 20px;
|
|
}
|
|
.mobile-top {
|
|
display: block;
|
|
}
|
|
|
|
.show{
|
|
display: flex!important;
|
|
}
|
|
}
|
|
</style>
|