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

修改金币卡图片

Browse Source
This commit is contained in:
yuyongdong 2024-07-04 21:04:04 +08:00
parent 816669b984
commit 8206fd760a
11 changed files with 170 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/img/marketplace/Coin_icon_1000.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 87 KiB

BIN
src/assets/img/marketplace/Coin_icon_10000.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 90 KiB

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

@ -16,7 +16,8 @@
<li>
<div class="nft">
<div class="nft-img">
<img :src="item.nft.image" alt />
<!-- <img :src="item.nft.image" alt /> -->
<ImgCard :nftData="item.nft" />
</div>
<div class="nft-name">{{ item.nft.name }}</div>
</div>
@ -49,6 +50,7 @@
<script setup>
import {ref, toRaw, computed, onMounted} from "vue";
import {Modal} from "ant-design-vue";
import ImgCard from "@/components/common/imgCard.vue"
import {priceCalculated} from "@/configs/priceCalculate";
import {BlockChain} from "@/components/chain/BlockChain";
import { formatPrice } from "@/components/chain/utils";
@ -205,8 +207,27 @@ onMounted(() => {
.nft-img {
width: 110px;
height: 164px;
border: 1px solid #fff;
// border: 1px solid #fff;
margin-left: 50px;
.card-img-common {
.img-top {
width: 100px;
height: 30px;
top: 20px;
left: 20px;
}
.img-btm {
bottom: 30px;
left: 30px;
>div {
width: 120px;
height: 40px;
}
div:nth-child(2) {
margin-left: 8px;
}
}
}
}
.nft-name {
font-weight: bold;

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

@ -17,7 +17,8 @@
<div class="content-nfts">
<div class="content-nfts-top">
<div class="content-nfts-top-left">
<img :src="props.sellDataArr.image" alt />
<!-- <img :src="props.sellDataArr.image" alt /> -->
<ImgCard :nftData="props.sellDataArr" />
</div>
<div class="content-nfts-top-right">
<div class="content-nfts-top-right-title">Enter a price</div>
@ -131,6 +132,7 @@
import {ref, toRaw, onMounted, inject} from "vue";
const message = inject("$message");
import {DownOutlined, UpOutlined} from "@ant-design/icons-vue";
import ImgCard from "@/components/common/imgCard.vue"
// import LoadingDialog from "@/components/Dialogs/loadingDialog.vue"
import {priceCalculated, timeFormat, royaltiesPrice, feePrice, totalPrice} from "@/configs/priceCalculate.js";
import {BlockChain} from "@/components/chain/BlockChain";
@ -275,9 +277,24 @@ onMounted(() => {
width: 386px;
height: 576px;
margin-right: 20px;
img {
width: 100%;
height: 100%;
.card-img-common {
.img-top {
width: 100px;
height: 30px;
top: 20px;
left: 20px;
}
.img-btm {
bottom: 30px;
left: 30px;
>div {
width: 120px;
height: 40px;
}
div:nth-child(2) {
margin-left: 8px;
}
}
}
}
.content-nfts-top-right {

11
src/components/assets/collectibles.vue
View File

@ -112,16 +112,17 @@ const handleScroll = () => {
//请求数据接口
// this.seeMoreSchoolList();
// console.log('scrollTop + windowHeight == scrollHeight请求接口',toRaw(marketplaceStore.cursorObj), scrollTop, windowHeight, scrollHeight)
if(myADdress) {
// if(myADdress) {
if(toRaw(marketplaceStore.cursorObj).remaining != 0) {
getMyAssets()
// getMyAssets()
// } else {
// console.log('不用请求')
console.log('请求coll')
} else {
return false;
console.log('不用请求coll')
// return false;
}
return false;
}
// }
}
}

129
src/components/assets/hanging.vue
View File

@ -14,106 +14,99 @@
</template>
<script setup>
import { ref, onMounted, watch } from "vue";
import {ref, onMounted, onUnmounted, watch} from "vue";
import OverView from "@/components/common/searchView/Overview.vue";
import Card from "@/components/common/hangingCard.vue";
import { apiHangingState } from "@/utils/marketplace"
import {apiHangingState} from "@/utils/marketplace";
import {walletStore} from "@/store/wallet";
import { formatPrice } from "@/components/chain/utils"
const localWalletStore = walletStore()
import {formatPrice} from "@/components/chain/utils";
const localWalletStore = walletStore();
const nftList = ref([])
const overviewValue = ref()
const nftList = ref([]);
const overviewValue = ref();
const overviewChild = (val) => {
overviewValue.value = val
getHistoryList()
}
const myAddress = ref(localWalletStore.address)
overviewValue.value = val;
getHistoryList();
};
const myAddress = ref(localWalletStore.address);
const next_cursor = ref({
count: 9,
next_cursor: "",
previous_cursor: "1",
remaining: 0,
total_count: 9
})
total_count: 9,
});
const getHistoryList = async () => {
let data = {
page_size: 20, //TODO:: 根据实际情况修改该值
cursor: next_cursor.value.next_cursor,
search_name: overviewValue.value,
}
if(myAddress.value) {
let nftListBox = []
let res = await apiHangingState(data,myAddress.value)
console.log(res)
nftList.value = [ ...nftList.value, ...res.rows]
nftListBox = nftList.value.reduce((acc, obj) => {
const existingObj = acc.find(item => item.nft.token_id == obj.nft.token_id)
if(!existingObj) {
acc.push(obj)
}
return acc
},[])
nftList.value = nftListBox
};
if (myAddress.value) {
let nftListBox = [];
let res = await apiHangingState(data, myAddress.value);
next_cursor.value = res.page;
nftList.value = [...nftList.value, ...res.rows];
nftListBox = nftList.value.reduce((acc, obj) => {
const existingObj = acc.find((item) => item.nft.token_id == obj.nft.token_id);
if (!existingObj) {
acc.push(obj);
}
return acc;
}, []);
nftList.value = nftListBox;
for (let sub of nftListBox) {
if (sub.event?.data) {
const _data = formatPrice(sub.event.data)
sub.event.icon = _data.icon
sub.event.usd = _data.usd
sub.event.currencyName = _data.currencyName
sub.event.amount = _data.amount
sub.event.decimals = _data.decimals
const _data = formatPrice(sub.event.data);
sub.event.icon = _data.icon;
sub.event.usd = _data.usd;
sub.event.currencyName = _data.currencyName;
sub.event.amount = _data.amount;
sub.event.decimals = _data.decimals;
}
}
nftList.value = nftListBox
nftList.value = nftListBox;
}
}
};
// const handleScroll = () => {
// const myADdress = localWalletStore.address
// var scrollTop =
// document.documentElement.scrollTop || document.body.scrollTop; //变量windowHeight是可视区的高度
// var windowHeight =
// document.documentElement.clientHeight || document.body.clientHeight; //变量scrollHeight是滚动条的总高度
// var scrollHeight =
// document.documentElement.scrollHeight || document.body.scrollHeight;
// const handleScrollListing = () => {
// var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //变量windowHeight是可视区的高度
// var windowHeight = document.documentElement.clientHeight || document.body.clientHeight; //变量scrollHeight是滚动条的总高度
// var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
// console.log("next_cursor.value",scrollTop, windowHeight, scrollHeight);
// return;
// if (scrollTop + windowHeight == scrollHeight) {
// //请求数据接口
// // this.seeMoreSchoolList();
// // console.log('scrollTop + windowHeight == scrollHeight请求接口',toRaw(marketplaceStore.cursorObj), scrollTop, windowHeight, scrollHeight)
// if(myADdress) {
// // if(toRaw(marketplaceStore.cursorObj).remaining != 0) {
// getHistoryList()
// console.log('请求')
// // // } else {
// // // console.log('不用请求')
// // } else {
// // return false;
// // }
// // return false;
// // //请求数据接口
// // // this.seeMoreSchoolList();
// // // console.log('scrollTop + windowHeight == scrollHeight请求接口',toRaw(marketplaceStore.cursorObj), scrollTop, windowHeight, scrollHeight)
// console.log("next_cursor.value", next_cursor.value);
// if (next_cursor.value.remaining != 0) {
// // getHistoryList()
// console.log("请求list");
// } else {
// console.log("不用请求list");
// }
// }
// }
// };
watch(localWalletStore,() => {
if(!localWalletStore.token) {
nftList.value = []
watch(localWalletStore, () => {
if (!localWalletStore.token) {
nftList.value = [];
} else {
getHistoryList()
getHistoryList();
}
})
});
onMounted(() => {
getHistoryList()
window.removeEventListener('scroll', handleScroll)
})
getHistoryList();
// window.removeEventListener("scroll", handleScrollListing);
});
onUnmounted(() => {
window.removeEventListener('scroll', handleScroll)
})
// window.removeEventListener("scroll", handleScrollListing);
});
</script>
<style lang="scss" scoped>

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

@ -6,7 +6,9 @@
<!-- <LazyLoadImg :src="nftData.image" :src-placeholder="placeholderImg" alt="图片"/> -->
</div>
<div class="card-name">
<div>GENESIS HERO</div>
<div>
<span v-if="nftData.type == 1">GENESIS HERO</span>
</div>
<div class="no-sell" v-show="nftData.on_sale == 1" @click="cancelNft(nftData)">
<img src="@/assets/img/marketplace/On_SeLL.png" alt="">
</div>
@ -21,7 +23,7 @@
<img :src="icon" alt="">
</div>
</div>
<div v-if="nftData.type == 0 && nftData.on_sale == 0" class="enabled" @click="lockToGame('redeem')">
<div v-if="nftData.type == 11 && nftData.on_sale == 0" class="enabled" @click="lockToGame('redeem')">
Redeem
</div>
<div v-if="nftData.type == 1 && nftData.on_sale == 0" class="link-below" @click="lockToGame('convert')">
@ -211,23 +213,27 @@ onMounted(() => {
height: 360px;
margin: 0 auto;
:deep(.card-img-common) {
.img-top {
width: 100px;
height: 30px;
top: 20px;
left: 20px;
}
.img-btm {
bottom: 12px;
left: 20px;
>div {
width: 80px;
li {
width: 100%;
height: 100%;
.img-top {
width: 100px;
height: 30px;
top: 20px;
left: 20px;
}
div:nth-child(1) {
}
div:nth-child(2) {
margin-left: 8px;
.img-btm {
bottom: 12px;
left: 20px;
>div {
width: 80px;
height: 30px;
}
div:nth-child(1) {
}
div:nth-child(2) {
margin-left: 8px;
}
}
}
}

14
src/components/assets/trading.vue
View File

@ -58,7 +58,6 @@ const getHistoryList = async () => {
if(myADdress) {
let nftListBox
let res = await apiHistoryState(myADdress,data)
console.log(res)
next_cursor.value = res.page
nftList.value = [...nftList.value, ...res.rows]
nftListBox = nftList.value.reduce((acc, obj) => {
@ -68,7 +67,6 @@ const getHistoryList = async () => {
}
return acc
},[])
// nftList.value = nftListBox
for (let sub of nftListBox) {
if (sub.event?.data) {
const _data = parseTradeEvent(sub.event)
@ -83,8 +81,7 @@ const getHistoryList = async () => {
}
}
const handleScroll = () => {
const myADdress = localWalletStore.address
const handleScrollTrad = () => {
var scrollTop =
document.documentElement.scrollTop || document.body.scrollTop; //变量windowHeight是可视区的高度
var windowHeight =
@ -96,7 +93,10 @@ const handleScroll = () => {
// this.seeMoreSchoolList();
// console.log('scrollTop + windowHeight == scrollHeight请求接口',toRaw(marketplaceStore.cursorObj), scrollTop, windowHeight, scrollHeight)
if(next_cursor.value.remaining != 0) {
getHistoryList()
// getHistoryList()
console.log('请求trad')
} else {
console.log('不用请求trad')
}
return false;
}
@ -112,11 +112,11 @@ watch(localWalletStore,() => {
onMounted(() => {
getHistoryList()
window.addEventListener("scroll", handleScroll, true);
window.addEventListener("scroll", handleScrollTrad, true);
})
onUnmounted(() => {
window.removeEventListener('scroll', handleScroll)
window.removeEventListener('scroll', handleScrollTrad)
})
</script>

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

@ -5,7 +5,9 @@
<ImgCard :nftData="nftData.nft" />
</div>
<div class="card-name">
<div>GENESIS HERO</div>
<div>
<span v-if="nftData.nft.type == 1">GENESIS HERO</span>
</div>
<div>{{nftData.nft.name}}</div>
</div>
<div class="card-price">

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

@ -1,13 +1,21 @@
<template>
<div class="card-img-common">
<LazyLoadImg :src="props.nftData.image" :src-placeholder="placeholderImg" alt="图片"/>
<div class="img-top">
{{ props.nftData.detail.max_mining_days }}D
</div>
<div class="img-btm">
<div>{{ props.nftData.detail.wealth }}</div>
<div>{{ props.nftData.detail.lucky }}</div>
</div>
<li v-if="props.nftData.type == 1">
<LazyLoadImg :src="props.nftData.image" :src-placeholder="placeholderImg" alt="图片"/>
<div class="img-top">
{{ props.nftData.detail.max_mining_days }}D
</div>
<div class="img-btm">
<div>{{ props.nftData.detail.wealth }}</div>
<div>{{ props.nftData.detail.lucky }}</div>
</div>
</li>
<li v-else>
<div class="gold-img">
<img v-if="props.nftData.detail.gold_coins == 1000" src="@/assets/img/marketplace/Coin_icon_1000.png" alt="">
<img v-if="props.nftData.detail.gold_coins == 10000" src="@/assets/img/marketplace/Coin_icon_10000.png" alt="">
</div>
</li>
</div>
</template>
@ -27,11 +35,19 @@ const props = defineProps({
<style lang="scss" scoped>
.card-img-common {
position: relative;
width: 100%;
height: 100%;
img {
width: 100%;
height: 100%;
}
li {
position: relative;
}
.gold-img {
border: 2px solid #fff;
background: rgb(60, 50, 26);
}
.img-top {
position: absolute;
display: flex;

2
src/views/DetailView.vue
View File

@ -61,7 +61,7 @@
<div class="sell" @click="beginSell" v-if="detailData.nft.on_sale == 0">List</div>
<div class="cancel" @click="cancelSell" v-if="detailData.nft.on_sale == 1">Cancel listing</div>
<div class="redeem" @click="lockToGame('convert')" v-if="detailData.nft.on_sale == 0 && detailData.nft.type == 1">Convert</div>
<div class="redeem" @click="lockToGame('redeem')" v-if="detailData.nft.on_sale == 0 && detailData.nft.type == 0">Redeem</div>
<div class="redeem" @click="lockToGame('redeem')" v-if="detailData.nft.on_sale == 0 && detailData.nft.type == 11">Redeem</div>
</div>
</div>
<div class="info">