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