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-06-24 16:54:07 +08:00
parent 69e80fcd14
commit 068514027f
6 changed files with 396 additions and 310 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,11 +1,20 @@
<template>
<a-modal :class="'buyDia'" v-model:open="props.buyDialogVisible" :closable="false" :footer="null" style="width: 1141px;" :maskClosable="false" @ok="handleOk">
<div ref="buyModal">
<a-modal
:class="'buyDia'"
v-model:open="props.buyDialogVisible"
:closable="false"
:footer="null"
:getContainer="() => $refs.buyModal"
:maskClosable="false"
@ok="handleOk"
>
<!-- <template #footer>
<a-button key="back" @click="handleCancel">Return</a-button>
<a-button key="submit" type="primary" :loading="loading" @click="handleOk">Submit</a-button>
</template> -->
</template>-->
<div class="top-close" @click="handleCancel">
<img src="@/assets/img/marketplace/Close counter.png" alt="">
<img src="@/assets/img/marketplace/Close counter.png" alt />
</div>
<div class="content">
<div class="content-title">Transaction confirmation ( {{ props.buyDataArr.length }} )</div>
@ -18,7 +27,7 @@
<li>
<div class="nft">
<div class="nft-img">
<img :src="item.nft.image" alt="">
<img :src="item.nft.image" alt />
</div>
<div class="nft-name">{{ item.nft.name }}</div>
</div>
@ -26,7 +35,9 @@
<div class="price">
<!-- <div>{{ priceCalculated(buyDataArr[0].event.data.buy[0].amount) }}</div> -->
<div>{{ priceCalculated(item.event.data.buy[0].amount) }}</div>
<div class="price-img"><img src="@/assets/img/marketplace/ETHicon.png" alt=""></div>
<div class="price-img">
<img src="@/assets/img/marketplace/ETHicon.png" alt />
</div>
</div>
</li>
</div>
@ -37,8 +48,8 @@
<li>
<div>
<!-- <span>{{ priceCalculated(buyDataArr[0].event.data.buy[0].amount) }}</span> -->
<span>0.08</span>
<img src="@/assets/img/marketplace/ETHicon.png" alt="">
<span>0.08</span>{{ total }}
<img src="@/assets/img/marketplace/ETHicon.png" alt />
</div>
<!-- <div class="money">$ 400</div> -->
</li>
@ -46,11 +57,12 @@
<div class="btm-right" @click="buyConfirm">Confirm</div>
</div>
</a-modal>
</div>
</template>
<script setup>
import { ref, toRaw, defineEmits } from "vue";
import {priceCalculated} from "@/configs/priceCalculate.js"
import {PassportWallet} from "@/wallet/passPort.js"
import {ref, toRaw, defineEmits, computed} from "vue";
import {priceCalculated} from "@/configs/priceCalculate.js";
import {PassportWallet} from "@/wallet/passPort.js";
// const passProd = ref(new PassportWallet())
const props = defineProps({
buyDialogVisible: {
@ -63,28 +75,33 @@ const props = defineProps({
},
});
console.log(toRaw(props.buyDataArr))
console.log(props.buyDataArr);
const emit = defineEmits(['handleClose'])
const emit = defineEmits(["handleClose"]);
const handleOk = (e) => {
emit('handleClose')
emit("handleClose");
};
const buyConfirm = async () => {
const pass = new PassportWallet()
const pass = new PassportWallet();
const lists = toRaw(props.buyDataArr)
const ids = lists.map(item => item.event.data.id)
const lists = toRaw(props.buyDataArr);
const ids = lists.map((item) => item.event.data.id);
try {
await pass.batchBuy(ids)
console.log('buy success ')
await pass.batchBuy(ids);
console.log("buy success ");
} catch (err) {
console.log('buy fail', err.message)
console.log("buy fail", err.message);
}
}
};
const total = computed(() => {
let aa = toRaw(props.buyDataArr.event)
// return toRaw(props.buyDataArr).event.data.buy[0].amount.reduce((sum, item) => sum + item.value, 0);
console.log('computed',aa)
// return aa;
});
//计算对象数组中某个属性合计
const totalPrice = () => {
@ -93,34 +110,28 @@ const totalPrice = () => {
// }
// return priceCalculated(price)
// countTotal(arr, amount) {
// let $total = 0
// $total = arr.reduce((total, currentValue, currentIndex, arr) => {
// return currentValue[keyName] ? total + currentValue[keyName] * currentValue[keyNameTwo] : total
// }, 0)
let $total = 0
$total = arr.reduce((total, currentValue, currentIndex, arr) => {
return currentValue[keyName] ? total + currentValue[keyName] * currentValue[keyNameTwo] : total
}, 0)
// return $total
// }
}
};
const handleCancel = (e) => {
emit('handleClose')
}
emit("handleClose");
};
</script>
<style lang="scss" scoped>
// .ant-modal-wrap{
// :deep(.ant-modal-wrap) {
// width: 200px;
// background: #B966FF;
// }
.ant-modal {
// width: 1140px !important;
// color: #fff;
:deep(.ant-modal) {
width: 1140px !important;
color: #fff;
.ant-modal-content {
padding: 0px;
background: #1a1821;
border: 1px solid #B966FF;
box-shadow: 0px 15px 28px 3px rgba(22,22,22,0.13);
border: 1px solid #b966ff;
box-shadow: 0px 15px 28px 3px rgba(22, 22, 22, 0.13);
border-radius: 100px;
.top-close {
position: absolute;
@ -139,7 +150,7 @@ const handleCancel = (e) => {
padding-bottom: 10px;
.content {
.content-title {
font-family: 'Anton';
font-family: "Anton";
font-weight: 400;
font-size: 48px;
margin-left: 50px;
@ -154,7 +165,7 @@ const handleCancel = (e) => {
display: flex;
justify-content: space-between;
align-items: center;
color: #A8A5AC;
color: #a8a5ac;
font-size: 14px;
div {
width: 240px;
@ -165,6 +176,11 @@ const handleCancel = (e) => {
padding-left: 100px;
box-sizing: border-box;
}
&:nth-child(2) {
width: 340px;
text-align: center;
box-sizing: border-box;
}
&:nth-child(3) {
text-align: right;
padding-right: 100px;
@ -180,9 +196,9 @@ const handleCancel = (e) => {
justify-content: space-between;
align-items: center;
margin: 20px 0;
>div {
> div {
width: 240px;
font-family: 'Poppins';
font-family: "Poppins";
font-weight: 500;
font-size: 30px;
text-align: center;
@ -203,6 +219,7 @@ const handleCancel = (e) => {
}
}
.id {
width: 340px;
}
.price {
display: flex;
@ -227,16 +244,16 @@ const handleCancel = (e) => {
align-items: center;
margin-left: 60px;
padding-top: 20px;
border-top: 2px solid #3A3B57;
border-top: 2px solid #3a3b57;
box-sizing: border-box;
.btm-left {
display: flex;
margin-left: 20px;
li {
font-family: 'Anton';
font-family: "Anton";
font-weight: 400;
font-size: 42px;
color: #BB7FFF;
color: #bb7fff;
div {
display: flex;
align-items: center;
@ -247,7 +264,7 @@ const handleCancel = (e) => {
}
}
.money {
font-family: 'Poppins';
font-family: "Poppins";
font-weight: 400;
font-size: 24px;
}
@ -262,8 +279,8 @@ const handleCancel = (e) => {
line-height: 40px;
margin-right: 20px;
background: #fec25d;
color: #2D2738;
font-family: 'Poppins';
color: #2d2738;
font-family: "Poppins";
font-weight: 500;
font-size: 14px;
text-align: center;
@ -275,6 +292,4 @@ const handleCancel = (e) => {
}
}
}
// }
</style>

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

@ -1,5 +1,7 @@
<template>
<a-modal :class="'buyDia'" v-model:open="props.sellDialogVisible" :closable="false" :footer="null" style="width: 1363px;" :maskClosable="false" @ok="handleOk">
<div ref="sellModal">
<a-modal :class="'buyDia'" v-model:open="props.sellDialogVisible" :closable="false" :footer="null" :getContainer="() => $refs.sellModal" :maskClosable="false" @ok="handleOk">
<!-- <template #footer>
<a-button key="back" @click="handleCancel">Return</a-button>
<a-button key="submit" type="primary" :loading="loading" @click="handleOk">Submit</a-button>
@ -23,32 +25,39 @@
<img :src="sellDataArr.image" alt="tupian">
</div>
</div>
<div class="id">2516</div>
<div>2%</div>
<div>Expected profits</div>
<div class="price">
<div class="shelves-price">
<div class="price-top">
<div>
<a-input :value="priceValue" @pressEnter="overviewData" placeholder="Basic usage">
<template #prefix>
<search-outlined style="color: #9588ac;" />
</template>
</a-input>
</div>
<div>
<span>ETH</span>
<img src="@/assets/img/marketplace/ETHicon.png" alt="">
</div>
</div>
<div class="price-btm">
<span>The floor Price: {{ 0.18 }}</span>
<img src="@/assets/img/marketplace/ETHicon.png" alt="">
</div>
</div>
<div class="royalties">2%</div>
<div class="expected">Expected profits</div>
<div class="profits">
<!-- <div>{{ priceCalculated(sellDataArr[0].event.data.buy[0].amount) }}</div> -->
<div>0.08</div>
<div class="price-img"><img src="@/assets/img/marketplace/ETHicon.png" alt=""></div>
<div class="price-img"><span>{{ 0.08 }}</span><img src="@/assets/img/marketplace/ETHicon.png" alt=""></div>
</div>
</li>
</div>
</div>
<div class="btm">
<div class="btm-left">
<li>Total&nbsp;:&nbsp;</li>
<li>
<div>
<!-- <span>{{ priceCalculated(sellDataArr[0].event.data.buy[0].amount) }}</span> -->
<span>0.08</span>
<img src="@/assets/img/marketplace/ETHicon.png" alt="">
</div>
<div class="money">$ 400</div>
</li>
</div>
<div class="btm-right" @click="sellConfirm">Confirm</div>
<div class="btm-btn" @click="sellConfirm">Confirm</div>
</div>
</a-modal>
</div>
</template>
<script setup>
import { ref, toRaw, defineEmits } from "vue";
@ -67,21 +76,31 @@ const props = defineProps({
});
const emit = defineEmits(['handleClose'])
const priceValue = ref(0.02)
const handleOk = (e) => {
emit('handleClose')
};
const buyConfirm = async () => {
const currency = import.meta.env.VUE_APP_MARKET_CURRENCY
const sellConfirm = async () => {
if(priceValue.value) {
const pass = new PassportWallet()
let ids = []
ids.push(toRaw(props.sellDataArr)[0].nft.token_id)
// console.log(ids)
// return
let res = await pass.beginBuy(toRaw(props.sellDataArr)[0].nft.token_id)
console.log('购买', res)
const data = {
// import.meta.env.VUE_APP_PASSPORT_MARKET_ADDRESS
contractAddress: props.sellDataArr.contract_address,
tokenId: props.sellDataArr.token_id,
currencyAddress: currency,
currencyAmount: '1000000000000000000'
}
// sellDataArr.value.push(val)
// buyDialogVisible.value = true
let res = await pass.beginSellERC721(data)
console.log('售NFT', res)
} else {
alert('价格不能为空')
}
}
// const priceAmount = () => {
// return priceCalculated(price)
@ -95,7 +114,7 @@ const handleCancel = (e) => {
<style lang="scss" scoped>
// .ant-modal-wrap{
.buyDia {
:deep(.ant-modal) {
width: 1362px !important;
color: #fff;
.ant-modal-content {
@ -106,8 +125,8 @@ const handleCancel = (e) => {
border-radius: 100px;
.top-close {
position: absolute;
top: -53px;
right: -53px;
top: -20px;
right: -20px;
width: 106px;
height: 106px;
cursor: pointer;
@ -127,7 +146,7 @@ const handleCancel = (e) => {
margin-left: 50px;
}
.content-table {
width: 1017px;
width: 1208px;
height: 48px;
line-height: 48px;
margin: 0 auto;
@ -143,19 +162,29 @@ const handleCancel = (e) => {
text-align: center;
&:nth-child(1) {
width: 540px;
text-align: left;
padding-left: 100px;
text-align: center;
// padding-left: 150px;
box-sizing: border-box;
}
&:nth-child(3) {
width: 120px;
text-align: center;
box-sizing: border-box;
}
&:nth-child(4) {
width: 209px;
text-align: center;
box-sizing: border-box;
}
}
}
.content-nfts {
width: 1017px;
width: 1208px;
margin: 0 auto;
li {
display: flex;
justify-content: space-between;
align-items: center;
// align-items: center;
margin: 20px 0;
>div {
width: 240px;
@ -169,28 +198,77 @@ const handleCancel = (e) => {
align-items: center;
width: 540px;
.nft-img {
width: 110px;
height: 164px;
width: 369px;
height: 551px;
border: 1px solid #fff;
margin-left: 50px;
}
}
.id {
}
.price {
display: flex;
justify-content: center;
align-items: center;
.price-img {
width: 28px;
height: 28px;
margin-left: 10px;
img {
width: 100%;
height: 100%;
}
}
}
.shelves-price {
width: 262px;
.price-top {
display: flex;
justify-content: space-around;
width: 100%;
height: 54px;
background: #2d2738;
border-radius: 20px;
div {
display: flex;
align-items: center;
span {
color: #9950FD;
}
img {
width: 28px;
height: 28px;
margin-left: 10px;
}
}
}
.price-btm {
display: flex;
align-items: center;
justify-content: center;
margin-top: 5px;
span {
font-family: 'Poppins';
font-weight: 400;
font-size: 18px;
}
img {
width: 19px;
height: 19px;
margin-left: 10px;
}
}
}
.royalties {
width: 120px;
}
.expected {
width: 209px;
height: 58px;
font-family: 'Poppins';
font-weight: 500;
font-size: 30px;
}
.profits {
.price-img {
display: flex;
justify-content: center;
align-items: center;
img {
width: 28px;
height: 28px;
margin-left: 10px;
}
}
}
}
}
}
@ -198,37 +276,15 @@ const handleCancel = (e) => {
display: flex;
justify-content: space-between;
align-items: center;
margin-left: 60px;
padding-top: 20px;
border-top: 2px solid #3A3B57;
box-sizing: border-box;
.btm-left {
display: flex;
margin-left: 20px;
li {
font-family: 'Anton';
font-weight: 400;
font-size: 42px;
color: #BB7FFF;
div {
display: flex;
align-items: center;
img {
width: 39px;
height: 39px;
margin-left: 20px;
}
}
.money {
font-family: 'Poppins';
font-weight: 400;
font-size: 24px;
}
}
}
.btm-right {
width: 240px;
height: 40px;
padding-bottom: 20px;
position: relative;
.btm-btn {
position: absolute;
top: -120px;
right: 30px;
width: 362px;
height: 97px;
display: flex;
align-items: center;
justify-content: center;
@ -236,12 +292,13 @@ const handleCancel = (e) => {
margin-right: 20px;
background: #fec25d;
color: #2D2738;
font-family: 'Poppins';
font-weight: 500;
font-size: 14px;
text-align: center;
border-radius: 20px;
box-shadow: 0 0 5px 0px #fec25d;
border-radius: 100px;
font-family: 'Poppins';
font-weight: 500;
font-size: 30px;
cursor: pointer;
}
}

2
src/components/assets/card.vue
View File

@ -53,7 +53,7 @@ const sellDataArr = ref([])
const currency = import.meta.env.VUE_APP_MARKET_CURRENCY
// 出售NFT
const sellNft = async (val) => {
console.log(val)
console.log(toRaw(val).token_id,toRaw(val).contract_address)
sellDialogVisible.value = true
sellDataArr.value = val
return

44
src/components/cart/index.vue
View File

@ -1,17 +1,27 @@
<template>
<div class="cart">
<div class="cart-header">
<div>My Cart ( 0 ) <span @click="clearCart">Clear</span></div>
<div>My Cart <span v-if="cartList">( {{ cartList.length }} )</span> <span @click="clearCart">Clear</span></div>
<div class="close" @click="closeCart">
<img src="@/assets/img/marketplace/closeicon.png" alt="">
</div>
</div>
<div class="cart-content">
<div class="cart-not">
<p>You have no items in your cart</p>
<div v-if="cartList !== undefined && cartList.length > 0" class="cart-list">
<li class="cart-item" v-for="(item, index) in cartList" :key="index">
<div class="cart-item-left">
<div class="cart-item-left-img">
<img :src="item.nft.image" alt="">
</div>
<div class="cart-list">
<div class="cart-item-left-name">{{ item.nft.name }}</div>
</div>
<div class="cart-item-right">
<div class="cart-item-right-price"></div>
</div>
</li>
</div>
<div v-else class="cart-not">
<p>You have no items in your cart</p>
</div>
<!-- <div class="cart-price">
<div class="left">Total Price</div>
@ -20,8 +30,8 @@
<div>≈ {{ 200 }}$</div>
</div>
</div> -->
<!-- <div class="cart-btn">Buy All</div> -->
<div class="cart-btn" @click="toMarketplace">Selet NFTs to Buy</div>
<div v-if="cartList !== undefined && cartList.length > 0" class="cart-btn">Buy All</div>
<div v-else class="cart-btn" @click="toMarketplace">Select NFTs to Buy</div>
</div>
</div>
@ -37,11 +47,12 @@ import {
apiClearCartList,
} from "@/utils/marketplace"
const router = useRouter();
// console.log(marketplaceStore.cartList,'Cart-------')
const emit = defineEmits(['clickStatusChild'])
const immutableStore = useImmutableStore()
// const token = immutableStore.accessToken
const cartList = ref()
const closeCart = () => {
emit('closeCart')
}
@ -62,15 +73,16 @@ const clearCart = async () => {
}
const getCartList = async () => {
// console.log(await useMarketplaceStore().getCartListState(),'-------------------------------------------------------')
// let token = localStorage.getItem('assessToken')
// if(token) {
// try {
// let res = await apiGetCartList()
// console.log(res,'----')
// } catch (e) {
// console.log(e)
// }
try {
// let res = await useMarketplaceStore().cartList
let res = '-------------------------'
// cartList.value = res
console.log(res)
} catch (e) {
console.log(e)
}
// }
}
@ -82,7 +94,7 @@ onMounted(()=> {
<style lang="scss" scoped>
.cart {
width: 480px;
width: 570px;
// height: 100%;
color: #BB7FFF;
.cart-header {

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

@ -18,7 +18,7 @@
<div>{{ nftData.nft.owner_address.substr(0,6) }}...{{ nftData.nft.owner_address.substr(-6) }}</div>
</div>
</div>
<div class="card-btn">
<div class="card-btn" v-show="nftData.nft.owner_address">
<div class="card-buy" @click="buyNft(nftData)">Buy Now</div>
<div class="card-cat" @click.stop="addCart(nftData)">
<img src="@/assets/img/marketplace/Add shopping cart02.png" alt="">
@ -33,10 +33,14 @@ import { ref, toRaw, onMounted, getCurrentInstance } from "vue"
import BuyDialog from "@/components/Dialogs/buyDialog.vue"
import {priceCalculated} from "@/configs/priceCalculate.js"
import { useDetailStore } from "@/store/detail"
import { useImmutableStore } from "@/store/immutable"
import {
apiAddCartList
} from "@/utils/marketplace"
useMarketplaceStore
} from "@/store/marketplace"
const detailData = useDetailStore()
const marketplaceList = useMarketplaceStore()
const immutableData = useImmutableStore()
console.log(immutableData.access)
import { useRouter } from "vue-router";
const router = useRouter();
const { proxy } = getCurrentInstance();
@ -78,12 +82,15 @@ const addCart = async (val) => {
}
]
}
console.log(data)
// return
try {
// let res = await axios.post(`/api/shopcart/add`,{})
let res = await apiAddCartList(data)
console.log(res)
const { errcode, errmsg } = await marketplaceList.addCartListState(data)
if(errcode == 0) {
alert('Added successfully')
await marketplaceList.getCartListState()
}
console.log(errcode, errmsg,'------------------------')
} catch (e) {
console.log(e)
}

21
src/store/marketplace.js
View File

@ -1,6 +1,6 @@
import { defineStore } from 'pinia';
import { ref } from 'vue';
import { apiMarketplaceState, apiGetCartList, } from "@/utils/marketplace"
import { apiMarketplaceState, apiGetCartList, apiAddCartList } from "@/utils/marketplace"
export const useMarketplaceStore = defineStore('marketplace', () => {
const overview = ref('')
@ -38,21 +38,15 @@ export const useMarketplaceStore = defineStore('marketplace', () => {
}
async function getMarketplaceState(_connected) {
const res = await apiMarketplaceState(_connected)
console.log(_connected)
return res
return await apiMarketplaceState(_connected)
}
// actions: {
// const getCartList = async () => {
// return '可以'
// }
// }
async function getCartListState() {
// cartList.value = '可以'
let res = await apiGetCartList()
// console.log(res)
return res
cartList.value = await apiGetCartList()
}
async function addCartListState(_connected) {
return await apiAddCartList(_connected)
}
return {
@ -66,6 +60,7 @@ export const useMarketplaceStore = defineStore('marketplace', () => {
status, updateStatusStatus,
getMarketplaceState,
cartList, getCartListState,
addCartListState,
}
},
{