2303 lines
68 KiB
Vue
2303 lines
68 KiB
Vue
<template>
|
||
<div class="mkt-header">
|
||
<div class="header-content">
|
||
<div class="assets-user">
|
||
<div class="assets-user-img" :style="{background: bgCor[bgCorFloor]}">
|
||
<img v-if="localWalletStore.showAddress" :src="imageUrl" alt="Dynamic Image">
|
||
<img v-else src="@/assets/img/marketplace/0000.png" alt="Dynamic Image">
|
||
</div>
|
||
<div class="assets-user-name">
|
||
<div class="adderss">{{ localWalletStore.showAddress ? localWalletStore.showAddress : 'User Address' }}</div>
|
||
<div class="email">
|
||
<p>Email: {{ userInfoData.email ? userInfoData.email : '-' }}</p>
|
||
</div>
|
||
<div class="name">
|
||
<p>Player name: <span>{{ userInfoData.nickname ? userInfoData.nickname : '-' }}</span></p>
|
||
</div>
|
||
<div class="recharge">
|
||
<div class="recharge-left">
|
||
<li>
|
||
<div class="recharge-img">
|
||
<img src="@/assets/img/marketplace/icon_diamond.png" alt="">
|
||
</div>
|
||
<span>{{ userInfoData.diamond ? userInfoData.diamond : 0 }}</span>
|
||
</li>
|
||
<li>
|
||
<div class="recharge-btn" @click="rechargeDialogVisible">Top-Up</div>
|
||
</li>
|
||
</div>
|
||
<div class="recharge-right">
|
||
<img class="icon" @click="rechargeLogDialogVisible = true" src="@/assets/img/marketplace/History.png" alt="">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
</div>
|
||
</div>
|
||
<div class="uaw-listing">
|
||
<div class="uaw-listing-content">
|
||
<div class="left">
|
||
<div class="img">
|
||
<img src="@/assets/img/marketplace/CECIcon.png" alt="">
|
||
</div>
|
||
<div class="uaw-cec-amount">
|
||
<p>
|
||
CEC:
|
||
<br>
|
||
<span v-if="cecInfo?.total != 0">{{ priceCalculated(BigInt(cecInfo?.total),18).toString().match(/^\d+(?:\.\d{0,2})?/)[0] }}</span>
|
||
<span v-else>0</span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="right">
|
||
<div class="tips">
|
||
<div class="tips-img">
|
||
<img src="@/assets/img/marketplace/Description.png" alt="">
|
||
</div>
|
||
<div class="tips-message">Shows earned CEC</div>
|
||
</div>
|
||
<div class="log" @click="receiveLog">
|
||
<img src="@/assets/img/marketplace/History.png" alt="">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="expected-content">
|
||
<div class="total">
|
||
<p>Total Contribution Credits: </p>
|
||
<div>
|
||
<span>{{ userInfoData.contribution_point }}</span>
|
||
<img src="@/assets/img/marketplace/totalContribution.png" alt="">
|
||
<img class="icon" @click="conLogDialogVisible = true" src="@/assets/img/marketplace/History.png" alt="">
|
||
</div>
|
||
</div>
|
||
<div class="day">
|
||
<p>Daily Expected: </p>
|
||
<div>
|
||
<span>+{{ contributionPoint }}/d</span>
|
||
<img src="@/assets/img/marketplace/totalContribution.png" alt="">
|
||
<img class="icon" @click="rulesDialogVisible = true" src="@/assets/img/marketplace/Description.png" alt="">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="btn">
|
||
<!-- <span class="yes" v-if="cecInfo?.stages[0]?.unlocked || cecInfo?.stages[1]?.unlocked" @click="confirmDialogVisible = false">Collection</span>
|
||
<span class="no" v-else @click="confirmCec">Collection</span> -->
|
||
</div>
|
||
<div ref="conLogModal">
|
||
<a-modal :class="'conLogModal'" :getContainer="() => $refs.conLogModal" v-model:open="conLogDialogVisible" :closable="false" :footer="null" :maskClosable="false">
|
||
<div class="log-title">Contribution Credits Record</div>
|
||
<div class="closable" @click="conLogDialogVisible = false">
|
||
<img src="@/assets/img/marketplace/Close_counter.png" alt="">
|
||
</div>
|
||
<div class="log-content">
|
||
<div class="log-header">
|
||
<li>
|
||
Activity
|
||
</li>
|
||
<li>
|
||
Date
|
||
</li>
|
||
<li>
|
||
Reward
|
||
</li>
|
||
</div>
|
||
<div class="log-body">
|
||
<div v-if="contributionList == undefined || contributionList.length <= 0" class="no-data">
|
||
<div>
|
||
<img src="@/assets/img/marketplace/Empty_state.png" alt="">
|
||
</div>
|
||
<p>No Data</p>
|
||
</div>
|
||
<div v-else class="pages" v-for="(item, index) in contributionList" :key="index">
|
||
<li>
|
||
<!-- 质押 -->
|
||
<span v-if="item.type == 1">Staked Assets</span>
|
||
<!-- 充值 -->
|
||
<span v-if="item.type == 3">Top-Up</span>
|
||
<!-- 消耗 -->
|
||
<span v-if="item.type == 2">Gold Spent</span>
|
||
</li>
|
||
<li>
|
||
{{ timeFormat(item.give_time*1000) }}
|
||
</li>
|
||
<li class="cec-amount">
|
||
<!-- <span>{{ priceCalculated(BigInt(item.contribution_point),18).toString().match(/^\d+(?:\.\d{0,2})?/)[0] }}</span> -->
|
||
<span>{{contributionLogs(item.contribution_point)}}</span>
|
||
<img src="@/assets/img/marketplace/totalContribution.png" alt="">
|
||
</li>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a-modal>
|
||
</div>
|
||
<div ref="cecLogModal">
|
||
<a-modal :class="'cecLogModal'" :getContainer="() => $refs.cecLogModal" v-model:open="logDialogVisible" :closable="false" :footer="null" :maskClosable="false">
|
||
<div class="log-title">CEC Allocation Record</div>
|
||
<div class="closable" @click="logDialogVisible = false">
|
||
<img src="@/assets/img/marketplace/Close_counter.png" alt="">
|
||
</div>
|
||
<div class="log-content">
|
||
<div class="log-header">
|
||
<li>
|
||
Event
|
||
</li>
|
||
<li>
|
||
Date
|
||
</li>
|
||
<li>
|
||
Reward
|
||
</li>
|
||
</div>
|
||
<div class="log-body">
|
||
<div class="pages" v-for="(item, index) in cecInfo?.records" :key="index">
|
||
<li>
|
||
<span v-if="item.desc == 'uaw'">Hill's Treasure Hunt</span>
|
||
<span v-else-if="item.desc == 'p2a'">Wheel of Fortune</span>
|
||
<span v-else-if="item.desc == 'game test parse 1'">P2E Season 1</span>
|
||
<span v-else>{{ item.desc }}</span>
|
||
</li>
|
||
<li>
|
||
{{ item.earnTime }}
|
||
</li>
|
||
<li class="cec-amount">
|
||
<span v-if="item.desc != ''">{{ priceCalculated(BigInt(item.amount),18).toString().match(/^\d+(?:\.\d{0,2})?/)[0] }}</span>
|
||
<img v-if="item.desc != ''" src="@/assets/img/marketplace/CECIcon.png" alt="">
|
||
</li>
|
||
</div>
|
||
<div class="no-data" v-if="cecInfo?.total == 0">
|
||
<div>
|
||
<img src="@/assets/img/marketplace/Empty_state.png" alt="">
|
||
</div>
|
||
<p>No Data</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="pagination">
|
||
<div class="prev">
|
||
<div>
|
||
<img src="@/assets/img/marketplace/Previous.png" alt="">
|
||
</div>
|
||
<span>Previous</span>
|
||
</div>
|
||
<div class="pager">
|
||
<span class="active">1</span>
|
||
<!-- <span>2</span>
|
||
<span>3</span> -->
|
||
</div>
|
||
<div class="next">
|
||
<span>Next</span>
|
||
<div>
|
||
<img src="@/assets/img/marketplace/Next.png" alt="">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- <a-table :dataSource="cecInfo?.records" :pagination="false">
|
||
<a-table-column title="Event" data-index="desc" :width="400">
|
||
<template #default="{ text: desc }">
|
||
<div class="nft">
|
||
<div class="nft-img">
|
||
</div>
|
||
<div class="nft-name">{{ desc }}</div>
|
||
</div>
|
||
</template>
|
||
</a-table-column>
|
||
<a-table-column title="Date" data-index="earnTime" :width="400">
|
||
<template #default="{ text: earnTime }">
|
||
<div class="nft">
|
||
<div class="nft-img">
|
||
</div>
|
||
<div class="nft-name">{{ earnTime }}</div>
|
||
</div>
|
||
</template>
|
||
</a-table-column>
|
||
<a-table-column title="Reward" data-index="amount" :width="400">
|
||
<template #default="{ text: amount }">
|
||
<div class="nft">
|
||
<div class="nft-img">
|
||
</div>
|
||
<div class="nft-name">{{ priceCalculated(Number(amount)) }}</div>
|
||
</div>
|
||
</template>
|
||
</a-table-column>
|
||
</a-table> -->
|
||
</a-modal>
|
||
</div>
|
||
<div ref="confirmModal">
|
||
<a-modal :class="'confirmModal'" :getContainer="() => $refs.confirmModal" v-model:open="confirmDialogVisible" :footer="null" :maskClosable="false">
|
||
<div class="content">
|
||
<li>
|
||
<div class="confirm-header">激励领取第一期</div>
|
||
<div class="confirm-content">
|
||
<p>阶段1：</p>
|
||
<div>
|
||
<img src="@/assets/img/marketplace/0000.png" alt="">
|
||
</div>
|
||
<p>解锁总奖池50%</p>
|
||
<p>可领取数量： {{ priceCalculated(Number(cecInfo?.stages[0]?.amount),18) }}</p>
|
||
<div class="btn">
|
||
<span class="yes" v-if="cecInfo?.stages[0]?.unlocked && cecInfo?.stages[0]?.status == 0">领取</span>
|
||
<span v-else>领取</span>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="confirm-header">激励领取第二期</div>
|
||
<div class="confirm-content">
|
||
<p>阶段2：</p>
|
||
<div>
|
||
<img src="@/assets/img/marketplace/0000.png" alt="">
|
||
</div>
|
||
<p>解锁总奖池50%</p>
|
||
<p>可领取数量： {{ priceCalculated(Number(cecInfo?.stages[1]?.amount),18) }}</p>
|
||
<div class="btn">
|
||
<span class="yes" v-if="cecInfo?.stages[1]?.unlocked && cecInfo?.stages[1]?.status == 0">领取</span>
|
||
<span v-else>领取</span>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
</div>
|
||
</a-modal>
|
||
</div>
|
||
<div ref="rulesModel">
|
||
<a-modal :class="'rulesModal'" :getContainer="() => $refs.rulesModel" v-model:open="rulesDialogVisible" :closable="false" :footer="null" :maskClosable="false">
|
||
<div class="log-title">Staking Rules</div>
|
||
<div class="closable" @click="rulesDialogVisible = false">
|
||
<img src="@/assets/img/marketplace/Close_counter.png" alt="">
|
||
</div>
|
||
<h3>1. Staking Rules</h3>
|
||
<div class="text">
|
||
<p>*Contributions only count if staked for a minimum of 24 hours.</p>
|
||
<p>*If unstaked before 24 hours, no Credits will be awarded.</p>
|
||
<p>*Contribution Credits are calculated daily at 00:00 UTC.</p>
|
||
</div>
|
||
<h3>2. Staking Rewards</h3>
|
||
<div class="staking-content">
|
||
<li>
|
||
<h4>hero</h4>
|
||
<div class="hero-title">
|
||
<span>Tier</span>
|
||
<span>Daily contribution points</span>
|
||
</div>
|
||
<div class="hero-body">
|
||
<div>
|
||
<span>Tier 1</span>
|
||
<span>10</span>
|
||
</div>
|
||
<div>
|
||
<span>Tier 2</span>
|
||
<span>20</span>
|
||
</div>
|
||
<div>
|
||
<span>Tier 3</span>
|
||
<span>40</span>
|
||
</div>
|
||
<div>
|
||
<span>Tier 4</span>
|
||
<span>80</span>
|
||
</div>
|
||
<div>
|
||
<span>Tier 5</span>
|
||
<span>160</span>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<h4>Founder's Tag</h4>
|
||
<div class="hero-title">
|
||
<span>Rarity</span>
|
||
<span>Daily contribution points</span>
|
||
</div>
|
||
<div class="hero-body">
|
||
<div>
|
||
<span>Common</span>
|
||
<span>20</span>
|
||
</div>
|
||
<div>
|
||
<span>Rare</span>
|
||
<span>40</span>
|
||
</div>
|
||
<div>
|
||
<span>Legendary</span>
|
||
<span>100</span>
|
||
</div>
|
||
<div>
|
||
<span> </span>
|
||
<span></span>
|
||
</div>
|
||
<div>
|
||
<span> </span>
|
||
<span></span>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
</div>
|
||
<h3>3. Bonus Calculation</h3>
|
||
<div class="text">
|
||
<p>Each Founder's Tag: +10%</p>
|
||
<p>Each Genesis Hero: +5%</p>
|
||
<p>Maximum bonus cap: +100%</p>
|
||
</div>
|
||
</a-modal>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div ref="rechargeListModal">
|
||
<a-modal :class="'rechargeListModal'" :getContainer="() => $refs.rechargeListModal" v-model:open="rechargeListDialogVisible" :closable="false" :footer="null" :maskClosable="false">
|
||
<div class="title">Top-Up</div>
|
||
<div class="credits">
|
||
<div class="credits-top">
|
||
<!-- <p>Top-Up</p> -->
|
||
</div>
|
||
<div class="credits-top">
|
||
<p>Top-Up to Earn</p>
|
||
<div class="tips-hover">
|
||
<img src="@/assets/img/marketplace/Description.png" alt="">
|
||
<div class="credits-tips">
|
||
<div>
|
||
Get 1 Contribution Credit for Every 1U Spent on Diamonds
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="credits-btm">
|
||
<img src="@/assets/img/marketplace/totalContribution.png" alt="">
|
||
<span>{{ contributionAmount }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="closable" @click="rechargeListDialogVisible = false">
|
||
<img src="@/assets/img/marketplace/Close_counter.png" alt="">
|
||
</div>
|
||
<p>Diamonds are centralized assets that can be used in the game</p>
|
||
<div class="content">
|
||
<div class="item" v-for="(item, index) in rechargeList" :key="index" @click="selectItem(item, index)">
|
||
<div class="activity" v-if="activeIndex == index">
|
||
<img src="@/assets/img/marketplace/selected.png" alt="">
|
||
</div>
|
||
<div class="first" v-if="item.max_buy_times < 9999">
|
||
<div>
|
||
<p>Limited</p>
|
||
<p>-Time</p>
|
||
<p>Offer</p>
|
||
</div>
|
||
</div>
|
||
<div class="item-img">
|
||
<img :src="rechargeImgList[item.goods_id].img" alt="">
|
||
</div>
|
||
<div class="purchase" v-if="item.max_buy_times < 9999">
|
||
<p>Bonus</p>
|
||
<div>
|
||
<img src="@/assets/img/marketplace/icon_diamond.png" alt="">
|
||
</div>
|
||
<p><span>+</span>{{ item.present_diamond }}</p>
|
||
</div>
|
||
<div v-else class="purchase-amount">
|
||
<div>
|
||
<img src="@/assets/img/marketplace/icon_diamond.png" alt="">
|
||
</div>
|
||
<span>{{brickworkAmount*100}}</span>
|
||
</div>
|
||
<div v-if="item.max_buy_times != 9999" class="item-amount">
|
||
<div>
|
||
<img src="@/assets/img/marketplace/icon_diamond.png" alt="">
|
||
</div>
|
||
{{ item.diamond }}
|
||
</div>
|
||
<div v-else class="item-amount item-amount-input">
|
||
<span @click="rechargeDecrease">-</span>
|
||
<!-- <span>0</span> -->
|
||
<input type="number" placeholder="0" v-model="brickworkAmount" @input="handleInput" oninput="value=value.replace(/[^\d]/g,'')">
|
||
<span @click="rechargeIncrease">+</span>
|
||
<h4>Unit</h4>
|
||
</div>
|
||
</div>
|
||
<div class="item"></div>
|
||
</div>
|
||
<div class="conform-btn" @click="conformBtn">
|
||
<span v-if="confirmRecharge?.goods_id == 1006">{{ priceAmount ? confirmRecharge.price : 0 }}</span>
|
||
<span v-else>{{ confirmRecharge?.price }}</span>
|
||
<img :src="icon_usdc" alt="">
|
||
</div>
|
||
</a-modal>
|
||
</div>
|
||
<div ref="rechargeLogModal">
|
||
<a-modal :class="'rechargeLogModal'" :getContainer="() => $refs.rechargeLogModal" v-model:open="rechargeLogDialogVisible" :closable="false" :footer="null" :maskClosable="false">
|
||
<div class="log-title">Transaction History</div>
|
||
<div class="closable" @click="rechargeLogDialogVisible = false">
|
||
<img src="@/assets/img/marketplace/Close_counter.png" alt="">
|
||
</div>
|
||
<div class="log-content">
|
||
<div class="log-header">
|
||
<li>
|
||
Action
|
||
</li>
|
||
<li>
|
||
Date
|
||
</li>
|
||
<li>
|
||
From
|
||
</li>
|
||
<li>
|
||
Amount
|
||
</li>
|
||
</div>
|
||
<div class="log-body">
|
||
<div v-if="rechargeHistoryList == undefined || rechargeHistoryList.length <= 0" class="no-data">
|
||
<div>
|
||
<img src="@/assets/img/marketplace/Empty_state.png" alt="">
|
||
</div>
|
||
<p>No Data</p>
|
||
</div>
|
||
<div v-else class="pages" v-for="(item, index) in rechargeHistoryList" :key="index">
|
||
<li>
|
||
<span v-if="item.type == 0">Top-Up</span>
|
||
<span v-else>Spending</span>
|
||
</li>
|
||
<li>
|
||
{{ timeFormat(item.date*1000) }}
|
||
</li>
|
||
<li>
|
||
{{ sliceAddress(item.from) }}
|
||
</li>
|
||
<li class="cec-amount">
|
||
<!-- <span>{{ priceCalculated(BigInt(item.contribution_point),18).toString().match(/^\d+(?:\.\d{0,2})?/)[0] }}</span> -->
|
||
<span>{{contributionLogs(item.amount)}}</span>
|
||
<img src="@/assets/img/marketplace/icon_diamond.png" alt="">
|
||
</li>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a-modal>
|
||
</div>
|
||
<LoadingDialog :loadingDialogVisible="loadingDialogVisible" />
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, toRaw, watch, computed, onMounted, inject } from "vue"
|
||
const message = inject("$message");
|
||
import ConfirmDialog from "@/components/Dialogs/confirmDialog.vue";
|
||
import LoadingDialog from "@/components/Dialogs/loadingDialog.vue"
|
||
import {createModal} from "@/utils/model.util";
|
||
import { apiCecInfo, apiExpected, apiUserData, apiContribution, apiRechargeGoods, apiRechargeHistory, apiDiamondHistory, apiGameLog } from "@/utils/marketplace"
|
||
import { priceCalculated, timeFormat, contributionLogs, sliceAddress } from "@/configs/priceCalculate"
|
||
import { rechargeImgList } from "@/configs/cenImg"
|
||
import { icon_usdc } from "@/configs/configchain"
|
||
import { useMarketplaceStore } from "@/store/marketplace"
|
||
import { BlockChain } from "@/components/chain/BlockChain"
|
||
import {walletStore} from "@/store/wallet";
|
||
|
||
const marketplaceStore = useMarketplaceStore()
|
||
const localWalletStore = walletStore()
|
||
// loading 弹窗
|
||
const loadingDialogVisible = ref(false)
|
||
const bgCor = ref(['#5bbbff', '#ffc35b', '#bb7fff', '#ff6600'])
|
||
const logDialogVisible = ref(false)
|
||
|
||
const bgCorFloor = computed(() => {
|
||
if(!localWalletStore.showAddress) return 0
|
||
return parseInt(localWalletStore.showAddress.substring(0,6))%4
|
||
})
|
||
const imageUrl = computed(() => {
|
||
let str = parseInt(localWalletStore.showAddress.substring(0,6))%34
|
||
if (str < 10) {
|
||
str = '0' + str
|
||
}
|
||
let imgUrl = `https://res.counterfire.games/headimg/00${str}.png`
|
||
return new URL(imgUrl, import.meta.url).href;
|
||
});
|
||
|
||
const rechargeImgUrl = computed(() => {
|
||
let imgUrl = `./img/marketplace/1001.png`
|
||
console.log(imgUrl);
|
||
return new URL(imgUrl, import.meta.url).href;
|
||
})
|
||
|
||
// 打开历史记录弹窗
|
||
const receiveLog = () => {
|
||
logDialogVisible.value = true
|
||
}
|
||
|
||
const confirmDialogVisible = ref(false)
|
||
// 领取奖励
|
||
const confirmCec = () => {
|
||
// console.log('-------')
|
||
|
||
}
|
||
|
||
const rulesDialogVisible = ref(false)
|
||
|
||
const cecInfo = ref({
|
||
total: 0,
|
||
available: '',
|
||
stages: [
|
||
{
|
||
stage: 1,
|
||
amount: '',
|
||
unlocked: '',
|
||
claimTime: '',
|
||
unlockTime: ''
|
||
}
|
||
],
|
||
records: [
|
||
{
|
||
address: '',
|
||
amount: '',
|
||
desc: '',
|
||
earnTime: ''
|
||
}
|
||
]
|
||
})
|
||
const getCecInfo = async () => {
|
||
let address = localWalletStore.address
|
||
if(address) {
|
||
const {data, errcode} = await apiCecInfo(address)
|
||
// console.log(errcode,data)
|
||
if(errcode == 0) {
|
||
cecInfo.value = data
|
||
}
|
||
} else {
|
||
return
|
||
}
|
||
}
|
||
|
||
const conLogDialogVisible = ref(false)
|
||
const contributionList = ref()
|
||
const getContribution = async () => {
|
||
let address = localWalletStore.address
|
||
if(address) {
|
||
const {rows, errcode} = await apiContribution(address)
|
||
if(errcode == 0) {
|
||
contributionList.value = rows
|
||
}
|
||
} else {
|
||
return
|
||
}
|
||
}
|
||
|
||
const contributionPoint = ref(0)
|
||
const getExpected = async () => {
|
||
let address = localWalletStore.address
|
||
if(address) {
|
||
const {contribution_point, errcode} = await apiExpected(address)
|
||
if(errcode == 0) {
|
||
contributionPoint.value = contribution_point
|
||
}
|
||
} else {
|
||
return
|
||
}
|
||
}
|
||
|
||
const contributionPointTotal = ref(0)
|
||
const userInfoData = ref(
|
||
{
|
||
contribution_point: "0.00",
|
||
diamond: "",
|
||
email: "",
|
||
errcode: 0,
|
||
errmsg: "",
|
||
gold: "0.00",
|
||
nickname: "",
|
||
}
|
||
)
|
||
const getUserData = async () => {
|
||
let address = localWalletStore.address
|
||
if(address) {
|
||
let res = await apiUserData(address)
|
||
if(res.errcode == 0) {
|
||
marketplaceStore.userGold = res.gold
|
||
userInfoData.value = res
|
||
marketplaceStore.contributionPoint = res.contribution_point
|
||
}
|
||
} else {
|
||
return
|
||
}
|
||
}
|
||
|
||
// 充值----------------------------------------stats
|
||
const rechargeLogDialogVisible = ref(false)
|
||
const rechargeListDialogVisible = ref(false)
|
||
const activeIndex = ref(0)
|
||
const rechargeList = ref()
|
||
const rechargeHistoryList = ref()
|
||
const confirmRecharge = ref()
|
||
const brickworkAmount = ref(1)
|
||
const priceAmount = ref(1)
|
||
const contributionAmount = ref(0)
|
||
|
||
// 打开充值弹窗
|
||
const rechargeDialogVisible = async () => {
|
||
let token = localWalletStore.token
|
||
if(token) {
|
||
rechargeListDialogVisible.value = true
|
||
} else {
|
||
await new BlockChain().connect()
|
||
}
|
||
}
|
||
|
||
// 列表
|
||
const getRechargeGoods = async () => {
|
||
const { errcode, errmsg, rows, contribution} = await apiRechargeGoods(localWalletStore.address)
|
||
if(errcode == 0) {
|
||
contributionAmount.value = contribution
|
||
rechargeList.value = rows
|
||
confirmRecharge.value = rows[0]
|
||
}
|
||
}
|
||
|
||
// selectItem 预选充值数量
|
||
const selectItem = (data, index) => {
|
||
activeIndex.value = index
|
||
if(data.goods_id == 1006) {
|
||
confirmRecharge.value = {
|
||
diamond: brickworkAmount.value,
|
||
goods_id: data.goods_id,
|
||
price: priceAmount.value,
|
||
max_buy_times: data.max_buy_times,
|
||
currency_list: [...data.currency_list]
|
||
}
|
||
} else {
|
||
confirmRecharge.value = data
|
||
}
|
||
}
|
||
|
||
const handleInput = (e) => {
|
||
if(Number(brickworkAmount.value) > toRaw(confirmRecharge.value).max_buy_times) {
|
||
brickworkAmount.value = toRaw(confirmRecharge.value).max_buy_times
|
||
toRaw(confirmRecharge.value).price = toRaw(confirmRecharge.value).max_buy_times
|
||
toRaw(confirmRecharge.value).diamond = brickworkAmount.value*100
|
||
} else {
|
||
toRaw(confirmRecharge.value).price = brickworkAmount.value
|
||
toRaw(confirmRecharge.value).diamond = brickworkAmount.value*100
|
||
priceAmount.value = brickworkAmount.value
|
||
}
|
||
|
||
}
|
||
|
||
const rechargeDecrease = async () => {
|
||
if(brickworkAmount.value == 1) return false
|
||
brickworkAmount.value--
|
||
priceAmount.value = brickworkAmount.value
|
||
// priceAmount.value--
|
||
if(confirmRecharge.value.goods_id == 1006) {
|
||
toRaw(confirmRecharge.value).price = brickworkAmount.value
|
||
toRaw(confirmRecharge.value).diamond = brickworkAmount.value*100
|
||
}
|
||
}
|
||
const rechargeIncrease = async () => {
|
||
if(brickworkAmount.value == toRaw(confirmRecharge.value).max_buy_times) return false
|
||
brickworkAmount.value++
|
||
priceAmount.value = brickworkAmount.value
|
||
// priceAmount.value++
|
||
if(confirmRecharge.value.goods_id == 1006) {
|
||
toRaw(confirmRecharge.value).price = brickworkAmount.value
|
||
toRaw(confirmRecharge.value).diamond = brickworkAmount.value*100
|
||
}
|
||
}
|
||
|
||
// 充值
|
||
const conformBtn = async () => {
|
||
let address = localWalletStore.address
|
||
if(toRaw(confirmRecharge.value).price == 0) {
|
||
message.error('Please select the amount of bricks to be recharged.')
|
||
} else {
|
||
loadingDialogVisible.value = true
|
||
let goods_num = Number(toRaw(confirmRecharge.value).goods_id) == 1006 ? Number(brickworkAmount.value) : 1
|
||
try {
|
||
const bc = new BlockChain()
|
||
let res = await bc.mall.execBuyItem(Number(toRaw(confirmRecharge.value).goods_id), goods_num,toRaw(confirmRecharge.value).currency_list[0].address)
|
||
if(res) {
|
||
brickworkAmount.value = 1
|
||
priceAmount.value = 1
|
||
activeIndex.value = 0
|
||
await dataInfo()
|
||
loadingDialogVisible.value = false
|
||
// message.success('Top-Up Successful')
|
||
const confirmResult = await createModal(ConfirmDialog, {
|
||
title: '',
|
||
noBtnTitle: '',
|
||
message: 'Top-Up Successful'
|
||
}).show()
|
||
}
|
||
} catch(e) {
|
||
console.log(e)
|
||
if(e.message.indexOf('rejected') > -1 || e.message.indexOf('reject') > -1) {
|
||
// message.error('Top-Up Cancelled by User')
|
||
const confirmResult = await createModal(ConfirmDialog, {
|
||
title: '',
|
||
noBtnTitle: '',
|
||
message: 'Top-Up Cancelled by User'
|
||
}).show()
|
||
} else if(e.message.indexOf('Error during transaction') > -1) {
|
||
// message.error('Top-Up Failed - Insufficient Balance')
|
||
const confirmResult = await createModal(ConfirmDialog, {
|
||
title: '',
|
||
noBtnTitle: '',
|
||
message: 'Top-Up Failed - Insufficient Balance'
|
||
}).show()
|
||
} else {
|
||
// message.error('Top-Up fail.')
|
||
const confirmResult = await createModal(ConfirmDialog, {
|
||
title: '',
|
||
noBtnTitle: '',
|
||
message: 'Top-Up fail.'
|
||
}).show()
|
||
}
|
||
loadingDialogVisible.value = false
|
||
}
|
||
}
|
||
// } else {
|
||
// const confirmResult = await createModal(ConfirmDialog, {
|
||
// title: 'Need login to Passport',
|
||
// noBtnTitle: '',
|
||
// message: 'Please log in with Passport.'
|
||
// }).show()
|
||
// }
|
||
}
|
||
|
||
const getRechargeHistory = async () => {
|
||
let address = localWalletStore.address
|
||
// let res = await apiRechargeHistory(address)
|
||
if(address) {
|
||
let res = await apiDiamondHistory(address)
|
||
// if(!res.rows) {
|
||
// res.rows = []
|
||
// }
|
||
// res.rows.forEach(item => {
|
||
// item['event'] = 'Top_Up'
|
||
// })
|
||
// his.rows.forEach(item => {
|
||
// item['event'] = 'Spending'
|
||
// })
|
||
rechargeHistoryList.value = res.rows
|
||
}
|
||
|
||
}
|
||
|
||
// 打点
|
||
const getGameLog = async () => {
|
||
let data = {
|
||
account_id: '',
|
||
session_id: '',
|
||
gameid: '',
|
||
channel: '',
|
||
event_name: '',
|
||
localuuid: ''
|
||
}
|
||
try {
|
||
let res = await apiGameLog(data)
|
||
console.log(res)
|
||
} catch(e) {
|
||
loadingDialogVisible.value = false
|
||
}
|
||
}
|
||
// 充值----------------------------------------end
|
||
const isPassprotLogin = ref(false)
|
||
const dataInfo = async () => {
|
||
// const bc = new BlockChain()
|
||
// isPassprotLogin.value = bc.passportLogined
|
||
// console.log(isPassprotLogin.value)
|
||
await getCecInfo()
|
||
await getContribution()
|
||
await getExpected()
|
||
await getUserData()
|
||
await getRechargeGoods()
|
||
await getRechargeHistory()
|
||
}
|
||
|
||
watch(localWalletStore,() => {
|
||
// console.log('localWalletStore.token',localWalletStore.address,localWalletStore.token)
|
||
if(!localWalletStore.token) {
|
||
cecInfo.value = {
|
||
total: 0,
|
||
available: '',
|
||
stages: [
|
||
{
|
||
stage: 1,
|
||
amount: '',
|
||
unlocked: '',
|
||
claimTime: '',
|
||
unlockTime: ''
|
||
}
|
||
],
|
||
records: [
|
||
{
|
||
address: '',
|
||
amount: '',
|
||
desc: '',
|
||
earnTime: ''
|
||
}
|
||
]
|
||
}
|
||
} else {
|
||
dataInfo()
|
||
}
|
||
})
|
||
|
||
onMounted(() => {
|
||
dataInfo()
|
||
})
|
||
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.mkt-header {
|
||
width: 100%;
|
||
.header-content {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding-top: 168px;
|
||
.assets-user {
|
||
display: flex;
|
||
height: 174px;
|
||
background: rgba(26,24,33, .5);
|
||
border-radius: 40px;
|
||
margin-left: 77px;
|
||
.assets-user-img {
|
||
width: 173.8px;
|
||
height: 173.8px;
|
||
margin-right: 25px;
|
||
border-radius: 16px;
|
||
overflow: hidden;
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
.assets-user-name {
|
||
font-family: 'Poppins';
|
||
color: #FFFFFF;
|
||
border-radius: 40px;
|
||
padding: 10px 20px;
|
||
.adderss {
|
||
font-weight: bold;
|
||
font-size: 30px;
|
||
}
|
||
.email {
|
||
font-size: 20px;
|
||
}
|
||
.name {
|
||
font-size: 20px;
|
||
span {
|
||
font-weight: Bold;
|
||
}
|
||
}
|
||
.recharge {
|
||
display: flex;
|
||
align-items: center;
|
||
width: 349px;
|
||
height: 36px;
|
||
margin-top: 10px;
|
||
.recharge-left {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
width: 349px;
|
||
height: 100%;
|
||
background: rgba(0,0,0,.5);
|
||
border-radius: 16px;
|
||
li {
|
||
display: flex;
|
||
align-items: center;
|
||
.recharge-img {
|
||
margin-right: 16px;
|
||
width: 36px;
|
||
height: 36px;
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
span {
|
||
font-family: 'Poppins';
|
||
font-weight: bold;
|
||
font-size: 20px;
|
||
}
|
||
.recharge-btn {
|
||
width: 100px;
|
||
height: 36px;
|
||
text-align: center;
|
||
line-height: 36px;
|
||
font-size: 20px;
|
||
font-weight: bold;
|
||
font-family: "Poppins";
|
||
color: #000;
|
||
background: #ff917f;
|
||
border-radius: 16px;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
}
|
||
.recharge-right {
|
||
margin-left: 11px;
|
||
.icon {
|
||
width: 36px;
|
||
height: 40px;
|
||
cursor: pointer;
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.uaw-listing {
|
||
color: #FFFFFF;
|
||
width: 448px;
|
||
height: 279px;
|
||
// height: 448px;
|
||
margin-right: 77px;
|
||
background: url('@/assets/img/marketplace/CEC_bg.png') no-repeat;
|
||
background-size: 100% 100%;
|
||
box-sizing: border-box;
|
||
// display: none;
|
||
.uaw-listing-content {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
height: 115px;
|
||
margin-top: 24px;
|
||
.img {
|
||
width: 119px;
|
||
height: 115px;
|
||
margin-left: 23px;
|
||
margin-right: 25px;
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
.left {
|
||
// width: 39px;
|
||
display: flex;
|
||
}
|
||
.right {
|
||
height: 100%;
|
||
margin-right: 24px;
|
||
.tips {
|
||
display: flex;
|
||
justify-content: end;
|
||
align-items: center;
|
||
margin-top: 5px;
|
||
position: relative;
|
||
.tips-img {
|
||
width: 39px;
|
||
height: 39px;
|
||
cursor: pointer;
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
.tips-message {
|
||
position: absolute;
|
||
top: -45px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 200px;
|
||
border-radius: 20px;
|
||
height: 40px;
|
||
line-height: 40px;
|
||
text-align: center;
|
||
background: #2d2738;
|
||
font-size: 18px;
|
||
display: none;
|
||
}
|
||
&:hover {
|
||
.tips-message {
|
||
display: block;
|
||
}
|
||
}
|
||
}
|
||
.log {
|
||
width: 36px;
|
||
height: 40px;
|
||
margin-top: 19px;
|
||
cursor: pointer;
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.expected-content {
|
||
width: 416px;
|
||
margin: 0 auto;
|
||
font-family: 'Poppins';
|
||
font-weight: bold;
|
||
font-size: 30px;
|
||
color: #FFFFFF;
|
||
border-top: 2px solid #525482;
|
||
box-sizing: border-box;
|
||
padding-top: 14px;
|
||
padding-right: 10px;
|
||
>div {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
font-size: 16px;
|
||
margin-bottom: 5px;
|
||
font-family: 'Poppins';
|
||
p {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
}
|
||
span {
|
||
color: #00DEFF;
|
||
font-size: 26px;
|
||
}
|
||
}
|
||
.total {
|
||
font-weight: bold;
|
||
div {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
img {
|
||
width: 27px;
|
||
height: 27px;
|
||
margin-left: 10px;
|
||
}
|
||
.icon {
|
||
width: 27px;
|
||
height: 27px;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
.day {
|
||
font-weight: 500;
|
||
div {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
img {
|
||
width: 27px;
|
||
height: 27px;
|
||
margin-left: 10px;
|
||
}
|
||
.icon {
|
||
width: 27px;
|
||
height: 27px;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
}
|
||
.uaw-cec-amount {
|
||
margin-top: 18px;
|
||
// text-align: center;
|
||
font-family: 'Poppins';
|
||
font-weight: 400;
|
||
font-size: 24px;
|
||
}
|
||
|
||
.btn {
|
||
width: 160px;
|
||
height: 40px;
|
||
line-height: 40px;
|
||
margin: 0 auto;
|
||
margin-top: 30px;
|
||
text-align: center;
|
||
display: none;
|
||
span {
|
||
display: inline-block;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: #3a3b57;
|
||
cursor:no-drop;
|
||
}
|
||
.yes {
|
||
color: #000;
|
||
border-radius: 20px;
|
||
background: #fec25d;
|
||
font-family: 'Poppins';
|
||
font-weight: 500;
|
||
font-size: 14px;
|
||
color: #2D2738;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
:deep(.conLogModal) {
|
||
width: 1052px !important;
|
||
height: 714px;
|
||
background: #1A1821;
|
||
box-shadow: 0px 15px 28px 3px rgba(22,22,22,0.13);
|
||
border-radius: 100px;
|
||
border: 1px solid #B966FF;
|
||
.ant-modal-content {
|
||
padding: 0 99px;
|
||
color: #FFF;
|
||
background: #1A1821;
|
||
box-shadow: 0px 0px 0px 0px rgba(22,22,22,0.13);
|
||
border-radius: 100px;
|
||
.ant-modal-body {
|
||
overflow: hidden;
|
||
.log-title {
|
||
font-family: 'Anton';
|
||
font-weight: 400;
|
||
font-size: 48px;
|
||
color: #FFFFFF;
|
||
margin-top: 23px;
|
||
}
|
||
.closable {
|
||
position: absolute;
|
||
right: -30px;
|
||
top: -30px;
|
||
z-index: 99;
|
||
cursor: pointer;
|
||
img {
|
||
width: 120px;
|
||
height: 120px;
|
||
}
|
||
}
|
||
.log-content {
|
||
min-height: 510px;
|
||
.log-header {
|
||
display: flex;
|
||
li {
|
||
width: 50%;
|
||
height: 48px;
|
||
line-height: 48px;
|
||
text-align: center;
|
||
font-family: 'Poppins';
|
||
font-weight: 400;
|
||
font-size: 14px;
|
||
color: #A8A5AC;
|
||
background: #2d2738;
|
||
&:nth-child(1) {
|
||
border-radius: 50px 0 0 50px;
|
||
}
|
||
// &:nth-child(2) {
|
||
// width: 40%;
|
||
// }
|
||
&:nth-child(3) {
|
||
border-radius: 0 50px 50px 0;
|
||
}
|
||
}
|
||
}
|
||
.log-body {
|
||
width: 100%;
|
||
height: 520px;
|
||
overflow-y: auto;
|
||
.pages {
|
||
display: flex;
|
||
width: 100%;
|
||
li {
|
||
width: 50%;
|
||
height: 60px;
|
||
line-height: 60px;
|
||
font-weight: 600;
|
||
font-size: 16px;
|
||
font-family: 'Poppins';
|
||
text-align: center;
|
||
}
|
||
.cec-amount {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
color: #9950FA;
|
||
span {
|
||
display: flex;
|
||
justify-content: end;
|
||
// width: 80px;
|
||
text-align: right;
|
||
}
|
||
img {
|
||
width: 28px;
|
||
height: 28px;
|
||
margin-left: 15px;
|
||
}
|
||
}
|
||
}
|
||
.no-data {
|
||
position: relative;
|
||
margin-top: 60px;
|
||
div {
|
||
width: 260px;
|
||
height: 260px;
|
||
margin: 0 auto;
|
||
}
|
||
p {
|
||
position: absolute;
|
||
bottom: 50px;
|
||
left: 52%;
|
||
transform: translateX(-50%);
|
||
font-family: 'Poppins';
|
||
font-weight: bold;
|
||
font-size: 28px;
|
||
color: #8587B2;
|
||
}
|
||
}
|
||
&::-webkit-scrollbar {
|
||
width: 5px;
|
||
}
|
||
&::-webkit-scrollbar-track {
|
||
background: #171220;
|
||
border-radius: 2px;
|
||
}
|
||
&::-webkit-scrollbar-corner {
|
||
display: block;
|
||
}
|
||
&::-webkit-scrollbar-thumb {
|
||
height: 15px;
|
||
background: #9950fd;
|
||
border-radius: 10px;
|
||
}
|
||
}
|
||
}
|
||
.pagination {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
// background: #1778f1;
|
||
// .prev {
|
||
// // width: 100px;
|
||
// // height: 100px;
|
||
// display: flex;
|
||
// align-items: center;
|
||
// div {
|
||
// width: 100px;
|
||
// height: 100px;
|
||
// }
|
||
// }
|
||
.pager {
|
||
span {
|
||
display: inline-block;
|
||
width: 29px;
|
||
height: 29px;
|
||
line-height: 29px;
|
||
text-align: center;
|
||
border-radius: 10px;
|
||
margin: 0 5px;
|
||
background: #2d2738;
|
||
font-family: 'Poppins';
|
||
font-weight: 200;
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
}
|
||
.active {
|
||
background: #5d5275;
|
||
}
|
||
}
|
||
.prev, .next {
|
||
// width: 100px;
|
||
// height: 100px;
|
||
display: flex;
|
||
align-items: center;
|
||
font-family: 'Poppins';
|
||
font-weight: 600;
|
||
font-size: 16px;
|
||
color: #9950FD;
|
||
cursor: pointer;
|
||
div {
|
||
width: 100px;
|
||
height: 100px;
|
||
}
|
||
}
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
.ant-table-wrapper {
|
||
.ant-spin-nested-loading {
|
||
.ant-spin-container {
|
||
.ant-table {
|
||
background: #2d2738;
|
||
border-bottom: 0px solid #2d2738;
|
||
color: #FFF;
|
||
.ant-table-container {
|
||
.ant-table-content {
|
||
.ant-table-thead {
|
||
border-radius: 60px;
|
||
tr {
|
||
border-radius: 60px;
|
||
overflow: hidden;
|
||
height: 40px;
|
||
line-height: 40px;
|
||
th {
|
||
background: #2d2738;
|
||
border-color: rgba(0,0,0,0);
|
||
text-align: center;
|
||
font-family: 'Poppins';
|
||
font-weight: 400;
|
||
font-size: 14px;
|
||
color: #A8A5AC;
|
||
border-radius: 50px !important;
|
||
padding: 0;
|
||
overflow: hidden;
|
||
&::before {
|
||
display: none;
|
||
}
|
||
}
|
||
.ant-table-cell {
|
||
overflow: hidden;
|
||
border-radius: 50px !important;
|
||
}
|
||
}
|
||
.ant-table-cell {
|
||
overflow: hidden;
|
||
border-radius: 50px !important;
|
||
}
|
||
}
|
||
.ant-table-tbody {
|
||
tr {
|
||
background: #16141b;
|
||
td {
|
||
border-color: rgba(0,0,0,0);
|
||
background: #16141b !important;
|
||
overflow: visible !important;
|
||
vertical-align: middle;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
:deep(.cecLogModal) {
|
||
width: 1052px !important;
|
||
height: 714px;
|
||
background: #1A1821;
|
||
box-shadow: 0px 15px 28px 3px rgba(22,22,22,0.13);
|
||
border-radius: 100px;
|
||
border: 1px solid #B966FF;
|
||
.ant-modal-content {
|
||
padding: 0 99px;
|
||
color: #FFF;
|
||
background: #1A1821;
|
||
border-radius: 100px;
|
||
.ant-modal-body {
|
||
overflow: hidden;
|
||
.log-title {
|
||
font-family: 'Anton';
|
||
font-weight: 400;
|
||
font-size: 48px;
|
||
color: #FFFFFF;
|
||
margin-top: 23px;
|
||
}
|
||
.closable {
|
||
position: absolute;
|
||
right: -30px;
|
||
top: -30px;
|
||
z-index: 99;
|
||
cursor: pointer;
|
||
img {
|
||
width: 120px;
|
||
height: 120px;
|
||
}
|
||
}
|
||
.log-content {
|
||
min-height: 510px;
|
||
.log-header {
|
||
display: flex;
|
||
li {
|
||
width: 30%;
|
||
height: 48px;
|
||
line-height: 48px;
|
||
text-align: center;
|
||
font-family: 'Poppins';
|
||
font-weight: 400;
|
||
font-size: 14px;
|
||
color: #A8A5AC;
|
||
background: #2d2738;
|
||
&:nth-child(1) {
|
||
border-radius: 50px 0 0 50px;
|
||
}
|
||
&:nth-child(2) {
|
||
width: 40%;
|
||
}
|
||
&:nth-child(3) {
|
||
border-radius: 0 50px 50px 0;
|
||
}
|
||
}
|
||
}
|
||
.log-body {
|
||
width: 100%;
|
||
.pages {
|
||
display: flex;
|
||
width: 100%;
|
||
li {
|
||
width: 30%;
|
||
height: 60px;
|
||
line-height: 60px;
|
||
font-weight: 600;
|
||
font-size: 16px;
|
||
font-family: 'Poppins';
|
||
text-align: center;
|
||
&:nth-child(2) {
|
||
width: 40%;
|
||
}
|
||
}
|
||
.cec-amount {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
color: #9950FA;
|
||
img {
|
||
width: 25px;
|
||
height: 28px;
|
||
margin-left: 15px;
|
||
}
|
||
}
|
||
}
|
||
.no-data {
|
||
position: relative;
|
||
margin-top: 60px;
|
||
div {
|
||
width: 260px;
|
||
height: 260px;
|
||
margin: 0 auto;
|
||
}
|
||
p {
|
||
position: absolute;
|
||
bottom: 50px;
|
||
left: 52%;
|
||
transform: translateX(-50%);
|
||
font-family: 'Poppins';
|
||
font-weight: bold;
|
||
font-size: 28px;
|
||
color: #8587B2;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.pagination {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
// background: #1778f1;
|
||
// .prev {
|
||
// // width: 100px;
|
||
// // height: 100px;
|
||
// display: flex;
|
||
// align-items: center;
|
||
// div {
|
||
// width: 100px;
|
||
// height: 100px;
|
||
// }
|
||
// }
|
||
.pager {
|
||
span {
|
||
display: inline-block;
|
||
width: 29px;
|
||
height: 29px;
|
||
line-height: 29px;
|
||
text-align: center;
|
||
border-radius: 10px;
|
||
margin: 0 5px;
|
||
background: #2d2738;
|
||
font-family: 'Poppins';
|
||
font-weight: 200;
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
}
|
||
.active {
|
||
background: #5d5275;
|
||
}
|
||
}
|
||
.prev, .next {
|
||
// width: 100px;
|
||
// height: 100px;
|
||
display: flex;
|
||
align-items: center;
|
||
font-family: 'Poppins';
|
||
font-weight: 600;
|
||
font-size: 16px;
|
||
color: #9950FD;
|
||
cursor: pointer;
|
||
div {
|
||
width: 100px;
|
||
height: 100px;
|
||
}
|
||
}
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
.ant-table-wrapper {
|
||
.ant-spin-nested-loading {
|
||
.ant-spin-container {
|
||
.ant-table {
|
||
background: #2d2738;
|
||
border-bottom: 0px solid #2d2738;
|
||
color: #FFF;
|
||
.ant-table-container {
|
||
.ant-table-content {
|
||
.ant-table-thead {
|
||
border-radius: 60px;
|
||
tr {
|
||
border-radius: 60px;
|
||
overflow: hidden;
|
||
height: 40px;
|
||
line-height: 40px;
|
||
th {
|
||
background: #2d2738;
|
||
border-color: rgba(0,0,0,0);
|
||
text-align: center;
|
||
font-family: 'Poppins';
|
||
font-weight: 400;
|
||
font-size: 14px;
|
||
color: #A8A5AC;
|
||
border-radius: 50px !important;
|
||
padding: 0;
|
||
overflow: hidden;
|
||
&::before {
|
||
display: none;
|
||
}
|
||
}
|
||
.ant-table-cell {
|
||
overflow: hidden;
|
||
border-radius: 50px !important;
|
||
}
|
||
}
|
||
.ant-table-cell {
|
||
overflow: hidden;
|
||
border-radius: 50px !important;
|
||
}
|
||
}
|
||
.ant-table-tbody {
|
||
tr {
|
||
background: #16141b;
|
||
td {
|
||
border-color: rgba(0,0,0,0);
|
||
background: #16141b !important;
|
||
overflow: visible !important;
|
||
vertical-align: middle;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
:deep(.confirmModal) {
|
||
.content {
|
||
display: flex;
|
||
.confirm-header {}
|
||
.confirm-content {
|
||
.btn {
|
||
width: 80px;
|
||
height: 30px;
|
||
line-height: 30px;
|
||
span {
|
||
display: inline-block;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: #3a3b57;
|
||
cursor:no-drop;
|
||
}
|
||
.yes {
|
||
background: #f59a23;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
:deep(.rulesModal) {
|
||
width: 1152px !important;
|
||
height: 805px;
|
||
background: #1A1821;
|
||
box-shadow: 0px 15px 28px 3px rgba(22,22,22,0.13);
|
||
border-radius: 100px;
|
||
border: 1px solid #B966FF;
|
||
.ant-modal-content {
|
||
width: 944px;
|
||
margin: 0 auto;
|
||
color: #FFF;
|
||
background: #1A1821;
|
||
border-radius: 100px;
|
||
box-shadow: 0 0 0 0;
|
||
.ant-modal-body {
|
||
overflow: hidden;
|
||
.log-title {
|
||
width: 944px;
|
||
margin: 0 auto;
|
||
font-family: 'Anton';
|
||
font-weight: 400;
|
||
font-size: 48px;
|
||
color: #FFFFFF;
|
||
margin-top: 23px;
|
||
border-bottom: 2px solid #3D4057;
|
||
}
|
||
.closable {
|
||
position: absolute;
|
||
right: -120px;
|
||
top: -30px;
|
||
z-index: 99;
|
||
cursor: pointer;
|
||
img {
|
||
width: 120px;
|
||
height: 120px;
|
||
}
|
||
}
|
||
h3 {
|
||
font-family: 'Poppins';
|
||
font-weight: bold;
|
||
font-size: 29px;
|
||
color: #FFFFFF;
|
||
margin-top: 20px;
|
||
}
|
||
.staking-content {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
li {
|
||
width: 427px;
|
||
border-radius: 50px;
|
||
h4 {
|
||
font-family: 'Poppins';
|
||
font-weight: bold;
|
||
font-size: 30px;
|
||
color: #AB74EA;
|
||
text-align: center;
|
||
}
|
||
.hero-title {
|
||
height: 50px;
|
||
line-height: 50px;
|
||
background: #604680;
|
||
border-radius: 30px 30px 0 0;
|
||
font-family: 'Poppins';
|
||
font-weight: bold;
|
||
font-size: 18px;
|
||
color: #F6F6F6;
|
||
span {
|
||
display: inline-block;
|
||
text-align: center;
|
||
&:nth-child(1) {
|
||
width: 127px;
|
||
border-right: 2px solid #1a1821;
|
||
}
|
||
&:nth-child(2) {
|
||
width: 300px;
|
||
}
|
||
}
|
||
}
|
||
.hero-body {
|
||
div {
|
||
height: 46px;
|
||
line-height: 46px;
|
||
text-align: center;
|
||
background: #2d2738;
|
||
font-family: 'Poppins';
|
||
font-weight: 600;
|
||
font-size: 20px;
|
||
color: #F3F0FF;
|
||
border-top: 2px solid #1a1821;
|
||
span {
|
||
display: inline-block;
|
||
text-align: center;
|
||
&:nth-child(1) {
|
||
width: 127px;
|
||
border-right: 2px solid #1a1821;
|
||
}
|
||
&:nth-child(2) {
|
||
width: 300px;
|
||
}
|
||
}
|
||
&:last-child {
|
||
border-radius: 0 0 30px 30px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
:deep(.rechargeLogModal) {
|
||
width: 1052px !important;
|
||
height: 714px;
|
||
background: #1A1821;
|
||
box-shadow: 0px 15px 28px 3px rgba(22,22,22,0.13);
|
||
border-radius: 100px;
|
||
border: 1px solid #B966FF;
|
||
.ant-modal-content {
|
||
padding: 0 99px;
|
||
color: #FFF;
|
||
background: #1A1821;
|
||
box-shadow: none;
|
||
border-radius: 100px;
|
||
.ant-modal-body {
|
||
.log-title {
|
||
font-family: 'Anton';
|
||
font-weight: 400;
|
||
font-size: 48px;
|
||
color: #FFFFFF;
|
||
margin-top: 23px;
|
||
}
|
||
.closable {
|
||
position: absolute;
|
||
right: -30px;
|
||
top: -30px;
|
||
z-index: 99;
|
||
cursor: pointer;
|
||
img {
|
||
width: 120px;
|
||
height: 120px;
|
||
}
|
||
}
|
||
.log-content {
|
||
min-height: 510px;
|
||
.log-header {
|
||
display: flex;
|
||
li {
|
||
width: 30%;
|
||
height: 48px;
|
||
line-height: 48px;
|
||
text-align: center;
|
||
font-family: 'Poppins';
|
||
font-weight: 400;
|
||
font-size: 14px;
|
||
color: #A8A5AC;
|
||
background: #2d2738;
|
||
&:nth-child(1) {
|
||
border-radius: 50px 0 0 50px;
|
||
}
|
||
&:nth-child(2) {
|
||
width: 40%;
|
||
}
|
||
&:last-child {
|
||
border-radius: 0 50px 50px 0;
|
||
}
|
||
}
|
||
}
|
||
.log-body {
|
||
width: 100%;
|
||
height: 540px;
|
||
overflow-y: auto;
|
||
.pages {
|
||
display: flex;
|
||
width: 100%;
|
||
li {
|
||
width: 30%;
|
||
height: 60px;
|
||
line-height: 60px;
|
||
font-weight: 600;
|
||
font-size: 16px;
|
||
font-family: 'Poppins';
|
||
text-align: center;
|
||
&:nth-child(2) {
|
||
width: 40%;
|
||
}
|
||
}
|
||
.cec-amount {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
color: #9950FA;
|
||
span {
|
||
display: inline-block;
|
||
width: 90px;
|
||
text-align: right;
|
||
}
|
||
img {
|
||
width: 25px;
|
||
height: 28px;
|
||
margin-left: 15px;
|
||
}
|
||
}
|
||
}
|
||
.no-data {
|
||
position: relative;
|
||
margin-top: 60px;
|
||
div {
|
||
width: 260px;
|
||
height: 260px;
|
||
margin: 0 auto;
|
||
}
|
||
p {
|
||
position: absolute;
|
||
bottom: 50px;
|
||
left: 52%;
|
||
transform: translateX(-50%);
|
||
font-family: 'Poppins';
|
||
font-weight: bold;
|
||
font-size: 28px;
|
||
color: #8587B2;
|
||
}
|
||
}
|
||
&::-webkit-scrollbar {
|
||
width: 5px;
|
||
}
|
||
&::-webkit-scrollbar-track {
|
||
background: #171220;
|
||
border-radius: 2px;
|
||
}
|
||
&::-webkit-scrollbar-corner {
|
||
display: block;
|
||
}
|
||
&::-webkit-scrollbar-thumb {
|
||
height: 15px;
|
||
background: #9950fd;
|
||
border-radius: 10px;
|
||
}
|
||
}
|
||
}
|
||
.pagination {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
// background: #1778f1;
|
||
// .prev {
|
||
// // width: 100px;
|
||
// // height: 100px;
|
||
// display: flex;
|
||
// align-items: center;
|
||
// div {
|
||
// width: 100px;
|
||
// height: 100px;
|
||
// }
|
||
// }
|
||
.pager {
|
||
span {
|
||
display: inline-block;
|
||
width: 29px;
|
||
height: 29px;
|
||
line-height: 29px;
|
||
text-align: center;
|
||
border-radius: 10px;
|
||
margin: 0 5px;
|
||
background: #2d2738;
|
||
font-family: 'Poppins';
|
||
font-weight: 200;
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
}
|
||
.active {
|
||
background: #5d5275;
|
||
}
|
||
}
|
||
.prev, .next {
|
||
// width: 100px;
|
||
// height: 100px;
|
||
display: flex;
|
||
align-items: center;
|
||
font-family: 'Poppins';
|
||
font-weight: 600;
|
||
font-size: 16px;
|
||
color: #9950FD;
|
||
cursor: pointer;
|
||
div {
|
||
width: 100px;
|
||
height: 100px;
|
||
}
|
||
}
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
.ant-table-wrapper {
|
||
.ant-spin-nested-loading {
|
||
.ant-spin-container {
|
||
.ant-table {
|
||
background: #2d2738;
|
||
border-bottom: 0px solid #2d2738;
|
||
color: #FFF;
|
||
.ant-table-container {
|
||
.ant-table-content {
|
||
.ant-table-thead {
|
||
border-radius: 60px;
|
||
tr {
|
||
border-radius: 60px;
|
||
overflow: hidden;
|
||
height: 40px;
|
||
line-height: 40px;
|
||
th {
|
||
background: #2d2738;
|
||
border-color: rgba(0,0,0,0);
|
||
text-align: center;
|
||
font-family: 'Poppins';
|
||
font-weight: 400;
|
||
font-size: 14px;
|
||
color: #A8A5AC;
|
||
border-radius: 50px !important;
|
||
padding: 0;
|
||
overflow: hidden;
|
||
&::before {
|
||
display: none;
|
||
}
|
||
}
|
||
.ant-table-cell {
|
||
overflow: hidden;
|
||
border-radius: 50px !important;
|
||
}
|
||
}
|
||
.ant-table-cell {
|
||
overflow: hidden;
|
||
border-radius: 50px !important;
|
||
}
|
||
}
|
||
.ant-table-tbody {
|
||
tr {
|
||
background: #16141b;
|
||
td {
|
||
border-color: rgba(0,0,0,0);
|
||
background: #16141b !important;
|
||
overflow: visible !important;
|
||
vertical-align: middle;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
:deep(.ant-modal-wrap) {
|
||
// z-index: 10;
|
||
}
|
||
:deep(.rechargeListModal) {
|
||
width: 1219px !important;
|
||
height: 895px;
|
||
background: #1A1821;
|
||
box-shadow: 0px 15px 28px 3px rgba(22,22,22,0.13);
|
||
border-radius: 100px;
|
||
border: 1px solid #B966FF;
|
||
top: 50px;
|
||
z-index: 10;
|
||
.ant-modal-content {
|
||
width: 100%;
|
||
padding: 0;
|
||
background: none;
|
||
color: #fff;
|
||
box-shadow: 0 0 0 0;
|
||
.ant-modal-body {
|
||
width: 100%;
|
||
text-align: center;
|
||
.title {
|
||
font-family: 'Anton';
|
||
font-weight: 400;
|
||
font-size: 48px;
|
||
margin-top: 25px;
|
||
}
|
||
.credits {
|
||
position: absolute;
|
||
top: -25px;
|
||
left: 0px;
|
||
width: 266px;
|
||
height: 138px;
|
||
padding-left: 44px;
|
||
padding-top: 30px;
|
||
box-sizing: border-box;
|
||
background: url('src/assets/img/marketplace/Top-up bg.png') no-repeat;
|
||
background-size: 100% 100%;
|
||
.credits-top {
|
||
display: flex;
|
||
align-items: center;
|
||
position: relative;
|
||
p {
|
||
color: #fff;
|
||
font-family: 'Poppins';
|
||
font-weight: 600;
|
||
font-size: 20px;
|
||
}
|
||
img {
|
||
width: 31px;
|
||
height: 31px;
|
||
margin-left: 10px;
|
||
cursor: pointer;
|
||
}
|
||
.tips-hover {
|
||
.credits-tips {
|
||
display: none;
|
||
}
|
||
&:hover {
|
||
.credits-tips {
|
||
display: block;
|
||
position: absolute;
|
||
top: -50px;
|
||
right: -340px;
|
||
width: 359px;
|
||
height: 139px;
|
||
background: url('@/assets/img/marketplace/WL.png') no-repeat;
|
||
background-size: 100% 100%;
|
||
border-radius: 10px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
div {
|
||
width: 230px;
|
||
line-height: 1.2;
|
||
padding-bottom: 15px;
|
||
font-size: 14px;
|
||
text-align: left;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.credits-btm {
|
||
display: flex;
|
||
align-items: center;
|
||
img {
|
||
width: 30px;
|
||
height: 30px;
|
||
margin-right: 10px;
|
||
}
|
||
span {
|
||
font-family: 'Poppins';
|
||
font-size: 26px;
|
||
color: #03d4f5;
|
||
}
|
||
}
|
||
}
|
||
.closable {
|
||
position: absolute;
|
||
top: -50px;
|
||
right: -50px;
|
||
cursor: pointer;
|
||
width: 160px;
|
||
height: 160px;
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
p {
|
||
font-family: 'Poppins';
|
||
font-weight: 400;
|
||
font-size: 20px;
|
||
color: #9950FD;
|
||
}
|
||
.content {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-evenly;
|
||
clear: both;
|
||
margin-top: 7px;
|
||
.item {
|
||
width: 332px;
|
||
height: 258px;
|
||
border-radius: 40px;
|
||
background: #2d2738;
|
||
margin-top: 31px;
|
||
cursor: pointer;
|
||
position: relative;
|
||
.activity {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 77px;
|
||
height: 74px;
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
.first {
|
||
position: absolute;
|
||
top: -33px;
|
||
right: -36px;
|
||
width: 131px;
|
||
height: 131px;
|
||
background: url('@/assets/img/marketplace/First-Time_bg.png') no-repeat;
|
||
background-size: 100% 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
div {
|
||
transform: rotate(-30deg);
|
||
}
|
||
p {
|
||
width: 90px;
|
||
height: 25px;
|
||
font-weight: bold;
|
||
font-family: 'Poppins';
|
||
margin: 0 auto;
|
||
color: #fff;
|
||
}
|
||
}
|
||
.item-img {
|
||
width: 312px;
|
||
height: 206px;
|
||
margin: 0 auto;
|
||
// padding: 5px;
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
.purchase {
|
||
position: absolute;
|
||
left: -7px;
|
||
bottom: 49px;
|
||
width: 346px;
|
||
height: 44px;
|
||
padding-top: 8px;
|
||
background: url('@/assets/img/marketplace/First_purchase.png') no-repeat;
|
||
background-size: 100% 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
p {
|
||
font-family: 'Anton';
|
||
font-weight: 400;
|
||
font-size: 24px;
|
||
color: #F8F6FF;
|
||
span {
|
||
font-size: 36px;
|
||
line-height: 1;
|
||
}
|
||
}
|
||
div {
|
||
width: 36px;
|
||
height: 28px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin: 0 10px;
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
.purchase-amount {
|
||
position: absolute;
|
||
left: 50%;
|
||
bottom: 55px;
|
||
transform: translateX(-50%);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 222px;
|
||
height: 42px;
|
||
background: #282333;
|
||
border: 2px solid #1e1b26;
|
||
border-radius: 20px;
|
||
div {
|
||
width: 36px;
|
||
height: 30px;
|
||
margin-right: 10px;
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
span {
|
||
display: inline-block;
|
||
width: 140px;
|
||
font-family: 'Poppins';
|
||
font-weight: bold;
|
||
font-size: 36px;
|
||
}
|
||
}
|
||
.item-amount {
|
||
font-family: 'Poppins';
|
||
font-weight: bold;
|
||
font-size: 36px;
|
||
line-height: 1;
|
||
padding-top: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
div {
|
||
width: 36px;
|
||
height: 28px;
|
||
margin-right: 10px;
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
.item-amount-input {
|
||
width: 222px;
|
||
height: 42px;
|
||
padding: 0 20px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin: 0 auto;
|
||
background: #1E1B26;
|
||
border-radius: 21px;
|
||
position: relative;
|
||
input {
|
||
color: #fff;
|
||
width: 90px;
|
||
height: 42px;
|
||
border: 0px;
|
||
text-align: center;
|
||
font-size: 28px;
|
||
margin-right: 35px;
|
||
}
|
||
input[type=number] {
|
||
-moz-appearance:textfield;
|
||
}
|
||
input[type=number]::-webkit-inner-spin-button,
|
||
input[type=number]::-webkit-outer-spin-button {
|
||
-webkit-appearance: none;
|
||
margin: 0;
|
||
}
|
||
h4 {
|
||
position: absolute;
|
||
top: 50%;
|
||
right: 50px;
|
||
transform: translateY(-50%);
|
||
// right: -43px;
|
||
font-size: 20px;
|
||
}
|
||
}
|
||
&:last-child {
|
||
opacity: 0;
|
||
}
|
||
}
|
||
}
|
||
.conform-btn {
|
||
width: 427px;
|
||
height: 81px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: #FEC25D;
|
||
box-shadow: 0px 15px 28px 3px rgba(22,22,22,0.13);
|
||
border-radius: 30px;
|
||
margin: 0 auto;
|
||
margin-top: 40px;
|
||
font-family: 'Poppins';
|
||
font-weight: bold;
|
||
font-size: 36px;
|
||
color: #2D2738;
|
||
cursor: pointer;
|
||
span {
|
||
display: inline-block;
|
||
width: 100px;
|
||
text-align: right;
|
||
}
|
||
img {
|
||
width: 54px;
|
||
height: 54px;
|
||
margin-left: 16px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |