huangjinming/CounterFireGames
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

gif替换成视频、新增gacha跳转

Browse Source
This commit is contained in:
yuyongdong 2024-07-31 11:06:53 +08:00
parent f681c24e5b
commit 4b4f94e6fd
15 changed files with 101 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/img/marketplace/totalContribution.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

5
src/components/Dialogs/buyDialog.vue
View File

@ -265,8 +265,9 @@ onMounted(() => {
bottom: 8px;
left: 10px;
>div {
width: 30px;
height: 15px;
width: 32px;
height: 13px;
font-size: 8px;
}
div:nth-child(2) {
margin-left: 8px;

6
src/components/Dialogs/sellDialog.vue
View File

@ -303,11 +303,11 @@ onMounted(() => {
font-size: 18px;
}
.img-btm {
bottom: 30px;
left: 30px;
bottom: 16px;
left: 20px;
font-size: 18px;
>div {
width: 120px;
width: 110px;
height: 40px;
}
div:nth-child(2) {

4
src/components/assets/activity.vue
View File

@ -21,7 +21,7 @@
<div>
<img src="@/assets/img/marketplace/Empty_state.png" alt="">
</div>
<p>No NFT yet</p>
<p>There has been no activity.</p>
</div>
</div>
</div>
@ -138,7 +138,7 @@ const getMyAssets = async () => {
try {
reqData.value.cursor = next_cursor.value.next_cursor
// let res = await apiLockState(myADdress, reqData.value)
let res = await apiActivity(data, myADdress)
let res = await apiActivity(reqData.value, myADdress)
// console.log(res,'--------------------------------')
// return
nftList.value = [...nftList.value, ...res.rows]

8
src/components/assets/assetsHeader.vue
View File

@ -84,7 +84,7 @@
</li>
<li class="cec-amount">
<!-- <span>{{ priceCalculated(BigInt(item.contribution_point),18).toString().match(/^\d+(?:\.\d{0,2})?/)[0] }}</span> -->
<span>{{item.contribution_point.match(/^\d+(?:\.\d{0,.})?/)[0]}}</span>
<span>{{contributionLogs(item.contribution_point)}}</span>
<img src="@/assets/img/marketplace/totalContribution.png" alt="">
</li>
</div>
@ -310,7 +310,7 @@ import { ref, watch, computed, onMounted } from "vue"
import ConfirmDialog from "@/components/Dialogs/confirmDialog.vue";
import {createModal} from "@/utils/model.util";
import { apiCecInfo, apiExpected, apiUserData, apiContribution } from "@/utils/marketplace"
import { priceCalculated, timeFormat } from "@/configs/priceCalculate"
import { priceCalculated, timeFormat, contributionLogs } from "@/configs/priceCalculate"
import { useMarketplaceStore } from "@/store/marketplace"
import {walletStore} from "@/store/wallet";
@ -513,7 +513,7 @@ onMounted(() => {
font-size: 18px;
img {
width: 27px;
height: 23px;
height: 27px;
margin-left: 10px;
}
.icon {
@ -528,7 +528,7 @@ onMounted(() => {
font-size: 14px;
img {
width: 27px;
height: 23px;
height: 27px;
margin-left: 10px;
}
.icon {

30
src/components/assets/myCard.vue
View File

@ -15,6 +15,11 @@
<div class="no-sell" v-show="nftData.on_sale == 1" @click="cancelNft(nftData)">
<img src="@/assets/img/marketplace/On_SeLL.png" alt="">
</div>
<div v-if="nftData.type == 13">
<span v-if="nftData.quality == 1" class="common">Common</span>
<span v-else-if="nftData.quality == 2" class="rare">Rare</span>
<span v-else-if="nftData.quality == 3" class="legendary">Legendary</span>
</div>
</div>
<div class="card-price">
<div class="sell-price">
@ -33,7 +38,7 @@
</div>
<div v-if="LOCKER_ADDRESS.toLowerCase() == nftData.owner_address.toLowerCase() || FOUNDER_ADDRESS.toLowerCase() == nftData.owner_address.toLowerCase()" class="link-staking">
<span v-if="nftData?.status">loading</span>
<img v-else src="@/assets/img/marketplace/Staking.png" @click="unStake(nftData)" alt="">
<img v-else src="@/assets/img/marketplace/Staking.png" @click="unStake(nftData)" alt="">
</div>
<div v-if="LOCKER_ADDRESS.toLowerCase() != nftData.owner_address.toLowerCase() && (nftData.type == 1 || nftData.type == 12) && nftData.on_sale == 0" class="link-below">
<span v-if="nftData?.status">loading</span>
@ -50,15 +55,15 @@
<span v-if="nftData?.status" class="bgC">loading</span>
<span v-else @click="sellNft(nftData)">List</span>
</div>
<div class="card-cancel" v-if="nftData.on_sale == 1" @click="cancelNft(nftData)">Cancel listing</div>
<div class="card-cancel" v-if="nftData.on_sale == 1" @click="cancelNft(nftData)">Delist</div>
</div>
<div class="card-btn" v-else>
<div class="card-cancel" v-if="LOCKER_ADDRESS.toLowerCase() == nftData.owner_address.toLowerCase() || FOUNDER_ADDRESS.toLowerCase() == nftData.owner_address.toLowerCase()">
<span v-if="nftData?.status">loading</span>
<span @click="unStake(nftData)">Unstake</span>
<span @click="unStake(nftData)">Withdraw</span>
</div>
<div class="card-sell" v-else>
<span v-if="nftData?.status">loading</span>
<span v-if="nftData?.status" class="bgC">loading</span>
<span v-else @click="lockToGame(nftData)">Stake</span>
</div>
</div>
@ -145,7 +150,7 @@ const cancelNft = async (val) => {
let res = await bc.market.cancelOrder([orderIds.event.data.id])
if(res.result) {
let timer = setTimeout(() => {
message.success('Your item has been unlisted.')
message.success('Your item has been delisted.')
emit('renewMyNft')
clearTimeout(timer);
}, 2000);
@ -154,7 +159,7 @@ const cancelNft = async (val) => {
if(e.message.indexOf('rejected') > -1) {
message.error('User rejected the request')
} else {
message.error('Your item has failed to be unlisted.')
message.error('Your item has failed to be delisted.')
}
}
}
@ -192,7 +197,7 @@ const lockToGameConfirm = async () => {
const confirmResult = await createModal(ConfirmDialog, {
title: '',
noBtnTitle: '',
message: 'Staking is complete. This process may take 3-4 minutes.'
message: 'Staking is complete. Please refresh the page in 3 to 4 minutes to view the updated status.'
}).show()
loadingDialogVisible.value = false
if(res) {
@ -230,7 +235,7 @@ const unlockMainConfirm = async () => {
const confirmResult = await createModal(ConfirmDialog, {
title: '',
noBtnTitle: '',
message: 'Staking is complete. This process may take 3-4 minutes.'
message: 'Staking is complete. Please refresh the page in 3 to 4 minutes to view the updated status.'
}).show()
loadingDialogVisible.value = false
if(res) {
@ -505,17 +510,18 @@ onMounted(() => {
}
}
.link-staking {
width: 138px;
img {
width: 140px;
height: 48px;
width: 138px;
height: 46px;
}
span {
display: flex;
justify-content: center;
border-radius: 10px;
align-items: center;
width: 100%;
height: 100%;
width: 94px;
height: 44px;
color: #FF6271;
border: 2px solid #ff6978;
}

6
src/components/common/card.vue
View File

@ -31,7 +31,7 @@
</div>
</div>
<div class="card-btn" v-else>
<div class="card-cancel" @click="cancelNft(nftData)">Off the shelves</div>
<div class="card-cancel" @click="cancelNft(nftData)">Delist</div>
</div>
<BuyDialog :buyDialogVisible="buyDialogVisible" :buyDataArr="buyDataArr" @handleClose="buyHandleClose" />
</div>
@ -107,14 +107,14 @@ const cancelNft = async (val) => {
let res = await bc.market.cancelOrder([val.event.data.id])
console.log(res,[val.event.data.id])
if(res.result) {
message.success('Your item has been unlisted.')
message.success('Your item has been delisted.')
emit('renewNft')
}
} catch (e) {
if(e.message.indexOf('rejected') > -1) {
message.error('User rejected the request')
} else {
message.error('Your item has failed to be unlisted.')
message.error('Your item has failed to be delisted.')
}
}
}

16
src/components/common/convertCard.vue
View File

@ -15,10 +15,13 @@
<a-table-column title="Status" data-source="orderList" :width="400">
<template #default="{ text: orderList }">
<div class="status">
<div class="nft-status" v-if="orderList.nft.item_id == '10017' || orderList.nft.item_id == '10018'">Redeem</div>
<div class="nft-status" v-if="orderList.nft.item_id == '10017' || orderList.nft.item_id == '10018'">
<span v-if="orderList.type == 1">Mint</span>
<span v-else>Redeem</span>
</div>
<div class="nft-status" v-else-if="orderList.type == 1">Mint</div>
<div class="nft-status" v-else-if="orderList.type == 2">Stake</div>
<div class="nft-status" v-else-if="orderList.type == 3">UnStake</div>
<div class="nft-status" v-else-if="orderList.type == 3">Withdraw</div>
</div>
</template>
</a-table-column>
@ -95,7 +98,14 @@ const props = defineProps({
},
});
const chainExpolor = (nft) => {
return `${import.meta.env.VUE_APP_EXPLORER_URL}/token/${nft.contract_address}/instance/${nft.token_id}`
// console.log(nft)
let linkUrl = ''
if(nft.type == 13) {
linkUrl = `https://etherscan.io/token/0xec23679653337d4c6390d0eeba682246a6067777?a=${nft.token_id}`
} else {
linkUrl = `${import.meta.env.VUE_APP_EXPLORER_URL}/token/${nft.contract_address}/instance/${nft.token_id}`
}
return linkUrl
}
</script>

6
src/components/common/hangingCard.vue
View File

@ -46,7 +46,7 @@
<a-table-column title="" data-index="event">
<template #default="{ text: event }">
<div class="event-btn" @click="eventNft(event)">
Off the shelves
Delist
</div>
</template>
</a-table-column>
@ -77,13 +77,13 @@ const eventNft = async (e) => {
let res = await bc.market.cancelOrder([e.data.id])
if(res.result) {
let timer = setTimeout(() => {
message.success('Your item has been unlisted.')
message.success('Your item has been delisted.')
emit('renewMyNft')
clearTimeout(timer);
}, 2000);
}
} catch (e) {
message.error('Your item has failed to be unlisted.')
message.error('Your item has failed to be delisted.')
}
}

10
src/components/common/imgCard.vue
View File

@ -6,7 +6,13 @@
<img v-else-if="props.nftData.quality == 3" class="founder" src="@/assets/img/marketplace/hero/Golden_GIF.gif" alt="">
</li>
<li v-else-if="props.nftData.type == 1 || props.nftData.type == 12">
<LazyLoadImg :src="props.nftData.image" :src-placeholder="placeholderImg" alt="图片"/>
<!-- <LazyLoadImg :src="props.nftData.image" :src-placeholder="placeholderImg" alt="图片"/> -->
<video ref="videoRef" autoplay loop muted>
<source
:src="props.nftData.image"
type="video/mp4"
/>
</video>
<div class="img-top">
{{ props.nftData.detail.max_mining_days }}D
</div>
@ -14,6 +20,7 @@
<div>{{ props.nftData.detail.wealth }}</div>
<div>{{ props.nftData.detail.lucky }}</div>
</div>
</li>
<li v-else>
<div class="gold-img">
@ -83,6 +90,7 @@ const props = defineProps({
box-sizing: border-box;
}
}
}
.gold-img {
border: 2px solid #655b77;

2
src/components/common/searchView/nftStatusRadio.vue
View File

@ -4,7 +4,7 @@
<a-radio-group v-model:value="props.statusValue" @change="onChangeValue">
<a-radio value="0">All</a-radio>
<a-radio value="1">Listed</a-radio>
<a-radio value="2">Unlisted</a-radio>
<a-radio value="2">Not Listed</a-radio>
<!-- <a-radio value="3">Staking</a-radio> -->
</a-radio-group>
</div>

16
src/components/common/starTimer.vue
View File

@ -7,23 +7,23 @@
<script setup>
import { ref, onMounted, onUnmounted, defineComponent } from 'vue';
const props = defineProps({
getAddress: {
endAt: {
type: String,
required: true,
},
});
// console.log(new Date(props.getAddress).getTime(),'----')
// console.log(new Date(props.endAt).getTime(),'----')
let remainingTime = ref(0); // 24小时 = 86400秒
const day = ref(0);
const hour = ref(0);
const min = ref(0);
const sec = ref(0);
const entTime = ref(new Date(props.getAddress).getTime());
const entTime = ref(new Date(props.endAt).getTime());
let intervalId = null
const emit = defineEmits(['stopTime'])
const starTimer = () => {
let nowTime = new Date().getTime();
// let str = localStorage.getItem(`openTime${props.getAddress}`)
// let str = localStorage.getItem(`openTime${props.endAt}`)
// let strTime = (1718098200000 - nowTime) / 1000
let strTime = (entTime.value - nowTime) / 1000
intervalId = setInterval(() => {
@ -49,7 +49,7 @@ const starTimer = () => {
sec.value = s;
} else {
emit('stopTime')
localStorage.removeItem(`openTime${props.getAddress}`)
localStorage.removeItem(`openTime${props.endAt}`)
clearInterval(intervalId);
intervalId = null
}
@ -57,9 +57,9 @@ const starTimer = () => {
}
// 判断是否登录 判断是否显示mint成功倒计时
const isOpenTime = () => {
let openTime = localStorage.getItem(`openTime${props.getAddress}`)
if(props.getAddress) {
// if(props.getAddress == openTime.split('-')[0]) {
let openTime = localStorage.getItem(`openTime${props.endAt}`)
if(props.endAt) {
// if(props.endAt == openTime.split('-')[0]) {
starTimer()
// }
}

14
src/components/layout/NavBar.vue
View File

@ -157,11 +157,11 @@ const navList = reactive([
name: "NOTICE",
path: "/notice",
},
// {
// id: 5,
// name: "GACHA",
// path: "https://gacha.counterfire.games/view",
// },
{
id: 5,
name: "GACHA",
path: "https://gacha.counterfire.games/view",
},
// {
// id: 5,
// name: "EVENT",
@ -216,8 +216,8 @@ function handNavCurent(nav) {
router.push(nav.path);
// } else if(nav.id == 6) {
// window.open(nav.path, "_blank");
// } else if(nav.id == 5) {
// window.open(nav.path, "_blank")
} else if(nav.id == 5) {
window.open(nav.path, "_blank")
}
// if (nav.id == 1 || nav.id == 2 || nav.id == 3) {
// window.open(nav.path, "_blank");

8
src/configs/priceCalculate.js
View File

@ -80,6 +80,14 @@ export const contribution = (quality, type) => {
return str
}
// 处理贡献值历史记录小数点
export const contributionLogs = (item) => {
let a = (+item || 0)
.toFixed(2)
.replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, "$&,");
return a;
}
// 质押时间
export const timeStaking = (time) => {
let timeArr = []

31
src/views/DetailView.vue
View File

@ -21,7 +21,8 @@
<div>Price</div>
<div class="time">
<img src="@/assets/img/marketplace/time.png" alt="img">
<div>Time remaining: &nbsp;<StarTimer :getAddress="detailData.event.data.end_at" /></div>
<!-- <div>Time remaining: &nbsp;<StarTimer :endAt="detailData.event.data.end_at" /></div> -->
<div>(UTC)End Time: &nbsp;{{detailData.event.data.end_at}}</div>
</div>
</li>
<li>
@ -53,7 +54,7 @@
<span>Loading</span>
</div>
<div class="cancel" v-else>
<span @click="localWalletStore.token == '' ? cardLogin() : backStaking()">Unstake</span>
<span @click="localWalletStore.token == '' ? cardLogin() : backStaking()">Withdraw</span>
</div>
</div>
<div v-if="(detailData.nft.type == 1 && !detailData.nft.contract_address) && LOCKER_ADDRESS.toLowerCase() != detailData.nft.owner_address.toLowerCase()">
@ -84,7 +85,7 @@
-->
<div v-if="myAddress == detailData.nft.owner_address && detailData.nft?.status != 1">
<div class="sell" @click="beginSell" v-if="detailData.nft.on_sale == 0 && detailData.nft.type != 13">List</div>
<div class="cancel" @click="cancelSell" v-if="detailData.nft.on_sale == 1">Cancel listing</div>
<div class="cancel" @click="cancelSell" v-if="detailData.nft.on_sale == 1">Delist</div>
<div class="redeem" v-if="detailData.nft.on_sale == 0 && (detailData.nft.type == 1 || detailData.nft.type == 12)" @click="lockToGame('convert')">
<span>Stake</span>
</div>
@ -129,6 +130,12 @@
<div>Royalties</div>
<div>{{ detailData.nft.token_id ? '2%' : '-' }}</div>
</li>
<li v-if="detailData.nft.type == 13">
<div>Rarity</div>
<div v-if="detailData.nft.quality == 1">Common</div>
<div v-else-if="detailData.nft.quality == 2">Rare</div>
<div v-else-if="detailData.nft.quality == 3">Legendary</div>
</li>
</div>
</div>
</div>
@ -358,7 +365,7 @@ const lockToGameConfirm = async () => {
const confirmResult = await createModal(ConfirmDialog, {
title: '',
noBtnTitle: '',
message: 'Staking is complete. This process may take 3-4 minutes.'
message: 'Staking is complete. Please refresh the page in 3 to 4 minutes to view the updated status.'
}).show()
loadingDialogVisible.value = false
if(res) {
@ -393,7 +400,7 @@ const unlockMainConfirm = async () => {
const confirmResult = await createModal(ConfirmDialog, {
title: '',
noBtnTitle: '',
message: 'Staking is complete. This process may take 3-4 minutes.'
message: 'Staking is complete. Please refresh the page in 3 to 4 minutes to view the updated status.'
}).show()
loadingDialogVisible.value = false
if(res) {
@ -541,7 +548,7 @@ const cancelSell = async() => {
if(res.result) {
let timer = setTimeout(() => {
getDetail()
message.success('Your item has been unlisted.')
message.success('Your item has been delisted.')
clearTimeout(timer)
}, 2000);
}
@ -560,7 +567,7 @@ const cancelSell = async() => {
if(e.message.indexOf('rejected') > -1) {
message.error('User rejected the request')
} else {
message.error('Your item has failed to be unlisted.')
message.error('Your item has failed to be delisted.')
}
}
}
@ -631,7 +638,7 @@ const mintHero = async () => {
const getDetail = async () => {
let { errcode, errmsg, data} = await nftDetail(props.address, props.tokenid)
console.log(data)
// console.log(data)
contractBlankUrl.value = `${import.meta.env.VUE_APP_EXPLORER_URL}/address/${data.nft.contract_address}`
contractTokenUrl.value = `${import.meta.env.VUE_APP_EXPLORER_URL}/token/${data.nft.contract_address}/instance/${data.nft.token_id}`
@ -701,11 +708,11 @@ onMounted(() => {
font-size: 18px;
}
.img-btm {
bottom: 35px;
left: 65px;
bottom:16px;
left: 20px;
>div {
width: 120px;
height: 43px;
width: 110px;
height: 40px;
font-size: 18px;
}
div:nth-child(2) {