完善modal的显示和隐藏
This commit is contained in:
cebgcontract
parent
9912887466
commit
58e8eaff6d
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="reward-modal" v-if="modalShow">
|
||||
<div class="modal-bg" @click="hideView"></div>
|
||||
<div class="modal-bg" @click="hide"></div>
|
||||
<transition name="fade">
|
||||
<div class="modal-content" v-if="modalShow" key="reward_modal_content">
|
||||
<div class="modal-title">
|
||||
@ -10,7 +10,7 @@
|
||||
<hero-nft v-for="d in cardList" :key="d.id" :nft-data="d"></hero-nft>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="general-btn" @click="hideView">OK</button>
|
||||
<button class="general-btn" @click="hide">OK</button>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
@ -32,15 +32,14 @@ export default class RewardModal extends Vue {
|
||||
private modalShow = false
|
||||
@Prop() private cardList: INftData[]
|
||||
|
||||
showView() {
|
||||
show() {
|
||||
console.log('reward modal show view')
|
||||
this.modalShow = true
|
||||
}
|
||||
|
||||
hideView() {
|
||||
hide() {
|
||||
this.modalShow = false
|
||||
this.$emit('reward-modal-hide')
|
||||
const self = this
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -1,11 +1,9 @@
|
||||
import Vue, { CreateElement } from 'vue'
|
||||
|
||||
declare module 'vue/types/vue' {
|
||||
interface Vue {
|
||||
destroy?: () => void
|
||||
showView(): void
|
||||
hideView(): void
|
||||
}
|
||||
export declare class ZModal extends Vue {
|
||||
destroy: () => void
|
||||
show(): void
|
||||
hide(): void
|
||||
}
|
||||
|
||||
export const createModal = (Component: any, props: any) => {
|
||||
@ -16,7 +14,7 @@ export const createModal = (Component: any, props: any) => {
|
||||
})
|
||||
}).$mount()
|
||||
document.body.appendChild(vm.$el)
|
||||
const ele = vm.$children[0]
|
||||
const ele = vm.$children[0] as ZModal
|
||||
ele.destroy = function() {
|
||||
vm.$el.remove()
|
||||
ele.$destroy()
|
||||
|
||||
@ -68,7 +68,7 @@ import OneLuckyBox from '@/components/market/mystery/OneLuckyBox.vue'
|
||||
import { preOpenBox, queryBoxOpenState } from '@/api/Market'
|
||||
import RewardModal from '@/components/core/RewardModal.vue'
|
||||
import { INftData, parseNftData } from '@/types/Nft'
|
||||
import { createModal } from '@/utils/modal.util'
|
||||
import { createModal, ZModal } from '@/utils/modal.util'
|
||||
|
||||
const PAGE_SIZE = 8
|
||||
const MYSTERY_BOX_CACHE = 'mystery_box_cache'
|
||||
@ -106,7 +106,7 @@ export default class Official extends Vue {
|
||||
private currentPage = 1
|
||||
private nftList: string[] = []
|
||||
private isProcess = false
|
||||
private rewardModal: Vue
|
||||
private rewardModal: ZModal
|
||||
|
||||
created() {
|
||||
if (!process.env.VUE_APP_PART_CLOSE) {
|
||||
@ -118,12 +118,12 @@ export default class Official extends Vue {
|
||||
mounted() {
|
||||
this.checkOrderHistory()
|
||||
// if (process.env.NODE_ENV === 'development') {
|
||||
// window.showModal = this.showTestModal
|
||||
window.showModal = this.showTestModal
|
||||
// }
|
||||
}
|
||||
|
||||
unmounted() {
|
||||
this.rewardModal?.destroy?.()
|
||||
this.rewardModal?.destroy()
|
||||
}
|
||||
|
||||
@Watch('isLogin')
|
||||
@ -176,19 +176,28 @@ export default class Official extends Vue {
|
||||
}
|
||||
|
||||
async updateTotalNum() {
|
||||
const eth = await this.chainManager.getNftBalance(this.boxAddress, AppModule.chainId)
|
||||
this.totalCount = eth
|
||||
this.totalPage = Math.ceil(eth / PAGE_SIZE)
|
||||
try {
|
||||
const eth = await this.chainManager.getNftBalance(this.boxAddress, AppModule.chainId)
|
||||
this.totalCount = eth
|
||||
this.totalPage = Math.ceil(eth / PAGE_SIZE)
|
||||
} catch (err) {
|
||||
console.log(err)
|
||||
}
|
||||
}
|
||||
|
||||
async getNftList() {
|
||||
this.showLoading()
|
||||
const start = (this.currentPage - 1) * PAGE_SIZE
|
||||
const records: string[] = await this.chainManager.getNftList(this.boxAddress, AppModule.chainId, start, PAGE_SIZE)
|
||||
this.nftList.length = 0
|
||||
if (records.length > 0) {
|
||||
records.forEach(o => { if (o !== '0') this.nftList.push(o) })
|
||||
try {
|
||||
const records: string[] = await this.chainManager.getNftList(this.boxAddress, AppModule.chainId, start, PAGE_SIZE)
|
||||
if (records.length > 0) {
|
||||
records.forEach(o => { if (o !== '0') this.nftList.push(o) })
|
||||
}
|
||||
} catch (err) {
|
||||
console.log(err)
|
||||
}
|
||||
|
||||
this.hideLoading()
|
||||
}
|
||||
|
||||
@ -307,108 +316,106 @@ export default class Official extends Vue {
|
||||
|
||||
showRewardModal(data: any) {
|
||||
console.log('show reward modal with data: ', data)
|
||||
if (!this.rewardModal) {
|
||||
this.rewardModal = createModal(RewardModal, data)
|
||||
}
|
||||
this.rewardModal.showView?.()
|
||||
this.rewardModal = createModal(RewardModal, data)
|
||||
this.rewardModal.show()
|
||||
}
|
||||
|
||||
// showTestModal() {
|
||||
// const nftList = [{
|
||||
// token_id: '501007316659010037',
|
||||
// owner_address: '0x42448c6a38c08637218d8327b748f213fc2c0231',
|
||||
// owner_name: '',
|
||||
// item_id: '30600',
|
||||
// type: '1',
|
||||
// state: '0',
|
||||
// hide_attr: 1,
|
||||
// is_genesis: false,
|
||||
// image: 'https://www.cebg.games/res/avatars/30600.png',
|
||||
// currency_list: [],
|
||||
// transaction_recrod: [],
|
||||
// info:
|
||||
// {
|
||||
// name: 'Canoe',
|
||||
// attr: [],
|
||||
// job: 1,
|
||||
// level: 1,
|
||||
// quality: 1,
|
||||
// hp: 200,
|
||||
// speed: 6,
|
||||
// atk: 32,
|
||||
// def: 7,
|
||||
// advanced_count: 0,
|
||||
// lucky: 0,
|
||||
// success_rate: 0
|
||||
// },
|
||||
// mint_time: '1650529475'
|
||||
// },
|
||||
// {
|
||||
// token_id: '501007316776010040',
|
||||
// owner_address: '0x42448c6a38c08637218d8327b748f213fc2c0231',
|
||||
// owner_name: '',
|
||||
// item_id: '30100',
|
||||
// type: '1',
|
||||
// state: '0',
|
||||
// hide_attr: 1,
|
||||
// is_genesis: false,
|
||||
// image: 'https://www.cebg.games/res/avatars/30100.png',
|
||||
// currency_list: [],
|
||||
// transaction_recrod: [],
|
||||
// info:
|
||||
// {
|
||||
// name: 'Hill',
|
||||
// attr: [],
|
||||
// job: 1,
|
||||
// level: 1,
|
||||
// quality: 1,
|
||||
// hp: 195,
|
||||
// speed: 6,
|
||||
// atk: 35,
|
||||
// def: 6,
|
||||
// advanced_count: 0,
|
||||
// lucky: 0,
|
||||
// success_rate: 0
|
||||
// },
|
||||
// mint_time: '1650529592'
|
||||
// },
|
||||
// {
|
||||
// token_id: '501007319181010046',
|
||||
// owner_address: '0x42448c6a38c08637218d8327b748f213fc2c0231',
|
||||
// owner_name: '',
|
||||
// item_id: '30300',
|
||||
// type: '1',
|
||||
// state: '0',
|
||||
// hide_attr: 1,
|
||||
// is_genesis: true,
|
||||
// image: 'https://www.cebg.games/res/avatars/30300_1.png',
|
||||
// currency_list: [],
|
||||
// transaction_recrod: [],
|
||||
// info:
|
||||
// {
|
||||
// name: 'Aoi',
|
||||
// attr: [],
|
||||
// job: 3,
|
||||
// level: 1,
|
||||
// quality: 1,
|
||||
// hp: 120,
|
||||
// speed: 5,
|
||||
// atk: 20,
|
||||
// def: 10,
|
||||
// advanced_count: 0,
|
||||
// lucky: 0,
|
||||
// success_rate: 0
|
||||
// },
|
||||
// mint_time: '1650531993'
|
||||
// }]
|
||||
// const cardList: INftData[] = []
|
||||
// nftList.forEach(o => cardList.push(parseNftData(o)))
|
||||
// const data = {
|
||||
// title: 'Test data',
|
||||
// cardList
|
||||
// }
|
||||
// this.showRewardModal(data)
|
||||
// }
|
||||
showTestModal() {
|
||||
const nftList = [{
|
||||
token_id: '501007316659010037',
|
||||
owner_address: '0x42448c6a38c08637218d8327b748f213fc2c0231',
|
||||
owner_name: '',
|
||||
item_id: '30600',
|
||||
type: '1',
|
||||
state: '0',
|
||||
hide_attr: 1,
|
||||
is_genesis: false,
|
||||
image: 'https://www.cebg.games/res/avatars/30600.png',
|
||||
currency_list: [],
|
||||
transaction_recrod: [],
|
||||
info:
|
||||
{
|
||||
name: 'Canoe',
|
||||
attr: [],
|
||||
job: 1,
|
||||
level: 1,
|
||||
quality: 1,
|
||||
hp: 200,
|
||||
speed: 6,
|
||||
atk: 32,
|
||||
def: 7,
|
||||
advanced_count: 0,
|
||||
lucky: 0,
|
||||
success_rate: 0
|
||||
},
|
||||
mint_time: '1650529475'
|
||||
},
|
||||
{
|
||||
token_id: '501007316776010040',
|
||||
owner_address: '0x42448c6a38c08637218d8327b748f213fc2c0231',
|
||||
owner_name: '',
|
||||
item_id: '30100',
|
||||
type: '1',
|
||||
state: '0',
|
||||
hide_attr: 1,
|
||||
is_genesis: false,
|
||||
image: 'https://www.cebg.games/res/avatars/30100.png',
|
||||
currency_list: [],
|
||||
transaction_recrod: [],
|
||||
info:
|
||||
{
|
||||
name: 'Hill',
|
||||
attr: [],
|
||||
job: 1,
|
||||
level: 1,
|
||||
quality: 1,
|
||||
hp: 195,
|
||||
speed: 6,
|
||||
atk: 35,
|
||||
def: 6,
|
||||
advanced_count: 0,
|
||||
lucky: 0,
|
||||
success_rate: 0
|
||||
},
|
||||
mint_time: '1650529592'
|
||||
},
|
||||
{
|
||||
token_id: '501007319181010046',
|
||||
owner_address: '0x42448c6a38c08637218d8327b748f213fc2c0231',
|
||||
owner_name: '',
|
||||
item_id: '30300',
|
||||
type: '1',
|
||||
state: '0',
|
||||
hide_attr: 1,
|
||||
is_genesis: true,
|
||||
image: 'https://www.cebg.games/res/avatars/30300_1.png',
|
||||
currency_list: [],
|
||||
transaction_recrod: [],
|
||||
info:
|
||||
{
|
||||
name: 'Aoi',
|
||||
attr: [],
|
||||
job: 3,
|
||||
level: 1,
|
||||
quality: 1,
|
||||
hp: 120,
|
||||
speed: 5,
|
||||
atk: 20,
|
||||
def: 10,
|
||||
advanced_count: 0,
|
||||
lucky: 0,
|
||||
success_rate: 0
|
||||
},
|
||||
mint_time: '1650531993'
|
||||
}]
|
||||
const cardList: INftData[] = []
|
||||
nftList.forEach(o => cardList.push(parseNftData(o)))
|
||||
const data = {
|
||||
title: 'Test data',
|
||||
cardList
|
||||
}
|
||||
this.showRewardModal(data)
|
||||
}
|
||||
|
||||
toPage(pageNo: number) {
|
||||
console.log('to page: ', pageNo)
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user