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

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

@ -1,11 +1,20 @@
<template> <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> <!-- <template #footer>
<a-button key="back" @click="handleCancel">Return</a-button> <a-button key="back" @click="handleCancel">Return</a-button>
<a-button key="submit" type="primary" :loading="loading" @click="handleOk">Submit</a-button> <a-button key="submit" type="primary" :loading="loading" @click="handleOk">Submit</a-button>
</template> --> </template>-->
<div class="top-close" @click="handleCancel"> <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>
<div class="content"> <div class="content">
<div class="content-title">Transaction confirmation ( {{ props.buyDataArr.length }} )</div> <div class="content-title">Transaction confirmation ( {{ props.buyDataArr.length }} )</div>
@ -18,15 +27,17 @@
<li> <li>
<div class="nft"> <div class="nft">
<div class="nft-img"> <div class="nft-img">
<img :src="item.nft.image" alt=""> <img :src="item.nft.image" alt />
</div> </div>
<div class="nft-name">{{ item.nft.name }}</div> <div class="nft-name">{{ item.nft.name }}</div>
</div> </div>
<div class="id">{{ item.nft.token_id }}</div> <div class="id">{{ item.nft.token_id }}</div>
<div class="price"> <div class="price">
<!-- <div>{{ priceCalculated(buyDataArr[0].event.data.buy[0].amount) }}</div> --> <!-- <div>{{ priceCalculated(buyDataArr[0].event.data.buy[0].amount) }}</div> -->
<div>{{ priceCalculated(item.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> </div>
</li> </li>
</div> </div>
@ -37,8 +48,8 @@
<li> <li>
<div> <div>
<!-- <span>{{ priceCalculated(buyDataArr[0].event.data.buy[0].amount) }}</span> --> <!-- <span>{{ priceCalculated(buyDataArr[0].event.data.buy[0].amount) }}</span> -->
<span>0.08</span> <span>0.08</span>{{ total }}
<img src="@/assets/img/marketplace/ETHicon.png" alt=""> <img src="@/assets/img/marketplace/ETHicon.png" alt />
</div> </div>
<!-- <div class="money">$ 400</div> --> <!-- <div class="money">$ 400</div> -->
</li> </li>
@ -46,11 +57,12 @@
<div class="btm-right" @click="buyConfirm">Confirm</div> <div class="btm-right" @click="buyConfirm">Confirm</div>
</div> </div>
</a-modal> </a-modal>
</div>
</template> </template>
<script setup> <script setup>
import { ref, toRaw, defineEmits } from "vue"; import {ref, toRaw, defineEmits, computed} from "vue";
import {priceCalculated} from "@/configs/priceCalculate.js" import {priceCalculated} from "@/configs/priceCalculate.js";
import {PassportWallet} from "@/wallet/passPort.js" import {PassportWallet} from "@/wallet/passPort.js";
// const passProd = ref(new PassportWallet()) // const passProd = ref(new PassportWallet())
const props = defineProps({ const props = defineProps({
buyDialogVisible: { buyDialogVisible: {
@ -63,218 +75,221 @@ const props = defineProps({
}, },
}); });
console.log(toRaw(props.buyDataArr)) console.log(props.buyDataArr);
const emit = defineEmits(['handleClose']) const emit = defineEmits(["handleClose"]);
const handleOk = (e) => { const handleOk = (e) => {
emit('handleClose') emit("handleClose");
}; };
const buyConfirm = async () => { const buyConfirm = async () => {
const pass = new PassportWallet() const pass = new PassportWallet();
const lists = toRaw(props.buyDataArr) const lists = toRaw(props.buyDataArr);
const ids = lists.map(item => item.event.data.id) const ids = lists.map((item) => item.event.data.id);
try { try {
await pass.batchBuy(ids) await pass.batchBuy(ids);
console.log('buy success ') console.log("buy success ");
} catch (err) { } 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 = () => { const totalPrice = () => {
// toRaw(props.buyDataArr).reduce((arr, amount)) => { // toRaw(props.buyDataArr).reduce((arr, amount)) => {
// return arr + // return arr +
// } // }
// return priceCalculated(price) // return priceCalculated(price)
// countTotal(arr, amount) { // countTotal(arr, amount) {
// let $total = 0 let $total = 0
// $total = arr.reduce((total, currentValue, currentIndex, arr) => { $total = arr.reduce((total, currentValue, currentIndex, arr) => {
// return currentValue[keyName] ? total + currentValue[keyName] * currentValue[keyNameTwo] : total return currentValue[keyName] ? total + currentValue[keyName] * currentValue[keyNameTwo] : total
// }, 0) }, 0)
// return $total // return $total
// } // }
};
}
const handleCancel = (e) => { const handleCancel = (e) => {
emit('handleClose') emit("handleClose");
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
// .ant-modal-wrap{ :deep(.ant-modal) {
// :deep(.ant-modal-wrap) { width: 1140px !important;
// width: 200px; color: #fff;
// background: #B966FF; .ant-modal-content {
// } padding: 0px;
.ant-modal { background: #1a1821;
// width: 1140px !important; border: 1px solid #b966ff;
// color: #fff; box-shadow: 0px 15px 28px 3px rgba(22, 22, 22, 0.13);
.ant-modal-content { border-radius: 100px;
padding: 0px; .top-close {
background: #1a1821; position: absolute;
border: 1px solid #B966FF; top: -53px;
box-shadow: 0px 15px 28px 3px rgba(22,22,22,0.13); right: -53px;
border-radius: 100px; width: 106px;
.top-close { height: 106px;
position: absolute; cursor: pointer;
top: -53px; img {
right: -53px; width: 100%;
width: 106px; height: 100%;
height: 106px;
cursor: pointer;
img {
width: 100%;
height: 100%;
}
} }
.ant-modal-body { }
padding: 30px 50px; .ant-modal-body {
padding-bottom: 10px; padding: 30px 50px;
.content { padding-bottom: 10px;
.content-title { .content {
font-family: 'Anton'; .content-title {
font-weight: 400; font-family: "Anton";
font-size: 48px; font-weight: 400;
margin-left: 50px; font-size: 48px;
} margin-left: 50px;
.content-table {
width: 1017px;
height: 48px;
line-height: 48px;
margin: 0 auto;
background: #2d2738;
border-radius: 20px;
display: flex;
justify-content: space-between;
align-items: center;
color: #A8A5AC;
font-size: 14px;
div {
width: 240px;
text-align: center;
&:nth-child(1) {
width: 540px;
text-align: left;
padding-left: 100px;
box-sizing: border-box;
}
&:nth-child(3) {
text-align: right;
padding-right: 100px;
box-sizing: border-box;
}
}
}
.content-nfts {
width: 1017px;
margin: 0 auto;
li {
display: flex;
justify-content: space-between;
align-items: center;
margin: 20px 0;
>div {
width: 240px;
font-family: 'Poppins';
font-weight: 500;
font-size: 30px;
text-align: center;
}
.nft {
display: flex;
align-items: center;
width: 540px;
.nft-img {
width: 110px;
height: 164px;
border: 1px solid #fff;
margin-left: 50px;
}
.nft-name {
font-weight: bold;
margin-left: 20px;
}
}
.id {
}
.price {
display: flex;
justify-content: center;
align-items: center;
.price-img {
width: 28px;
height: 28px;
margin-left: 10px;
img {
width: 100%;
height: 100%;
}
}
}
}
}
} }
.btm { .content-table {
width: 1017px;
height: 48px;
line-height: 48px;
margin: 0 auto;
background: #2d2738;
border-radius: 20px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-left: 60px; color: #a8a5ac;
padding-top: 20px; font-size: 14px;
border-top: 2px solid #3A3B57; div {
box-sizing: border-box; width: 240px;
.btm-left { text-align: center;
&:nth-child(1) {
width: 540px;
text-align: left;
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;
box-sizing: border-box;
}
}
}
.content-nfts {
width: 1017px;
margin: 0 auto;
li {
display: flex; display: flex;
margin-left: 20px; justify-content: space-between;
li { align-items: center;
font-family: 'Anton'; margin: 20px 0;
font-weight: 400; > div {
font-size: 42px; width: 240px;
color: #BB7FFF; font-family: "Poppins";
div { font-weight: 500;
display: flex; font-size: 30px;
align-items: center; text-align: center;
img { }
width: 39px; .nft {
height: 39px; display: flex;
margin-left: 20px; align-items: center;
} width: 540px;
.nft-img {
width: 110px;
height: 164px;
border: 1px solid #fff;
margin-left: 50px;
} }
.money { .nft-name {
font-family: 'Poppins'; font-weight: bold;
font-weight: 400; margin-left: 20px;
font-size: 24px; }
}
.id {
width: 340px;
}
.price {
display: flex;
justify-content: center;
align-items: center;
.price-img {
width: 28px;
height: 28px;
margin-left: 10px;
img {
width: 100%;
height: 100%;
}
} }
} }
} }
.btm-right { }
width: 240px; }
height: 40px; .btm {
display: flex; display: flex;
align-items: center; justify-content: space-between;
justify-content: center; align-items: center;
line-height: 40px; margin-left: 60px;
margin-right: 20px; padding-top: 20px;
background: #fec25d; border-top: 2px solid #3a3b57;
color: #2D2738; box-sizing: border-box;
font-family: 'Poppins'; .btm-left {
font-weight: 500; display: flex;
font-size: 14px; margin-left: 20px;
text-align: center; li {
border-radius: 20px; font-family: "Anton";
box-shadow: 0 0 5px 0px #fec25d; font-weight: 400;
cursor: pointer; 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;
display: flex;
align-items: center;
justify-content: center;
line-height: 40px;
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;
cursor: pointer;
}
} }
} }
}
} }
// }
</style> </style>

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

@ -1,5 +1,7 @@
<template> <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> <!-- <template #footer>
<a-button key="back" @click="handleCancel">Return</a-button> <a-button key="back" @click="handleCancel">Return</a-button>
<a-button key="submit" type="primary" :loading="loading" @click="handleOk">Submit</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"> <img :src="sellDataArr.image" alt="tupian">
</div> </div>
</div> </div>
<div class="id">2516</div> <div class="shelves-price">
<div>2%</div> <div class="price-top">
<div>Expected profits</div> <div>
<div class="price"> <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>{{ priceCalculated(sellDataArr[0].event.data.buy[0].amount) }}</div> -->
<div>0.08</div> <div class="price-img"><span>{{ 0.08 }}</span><img src="@/assets/img/marketplace/ETHicon.png" alt=""></div>
<div class="price-img"><img src="@/assets/img/marketplace/ETHicon.png" alt=""></div>
</div> </div>
</li> </li>
</div> </div>
</div> </div>
<div class="btm"> <div class="btm">
<div class="btm-left"> <div class="btm-btn" @click="sellConfirm">Confirm</div>
<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> </div>
</a-modal> </a-modal>
</div>
</template> </template>
<script setup> <script setup>
import { ref, toRaw, defineEmits } from "vue"; import { ref, toRaw, defineEmits } from "vue";
@ -67,21 +76,31 @@ const props = defineProps({
}); });
const emit = defineEmits(['handleClose']) const emit = defineEmits(['handleClose'])
const priceValue = ref(0.02)
const handleOk = (e) => { const handleOk = (e) => {
emit('handleClose') emit('handleClose')
}; };
const buyConfirm = async () => { const currency = import.meta.env.VUE_APP_MARKET_CURRENCY
const pass = new PassportWallet() const sellConfirm = async () => {
if(priceValue.value) {
let ids = [] const pass = new PassportWallet()
ids.push(toRaw(props.sellDataArr)[0].nft.token_id) const data = {
// console.log(ids) // import.meta.env.VUE_APP_PASSPORT_MARKET_ADDRESS
// return contractAddress: props.sellDataArr.contract_address,
let res = await pass.beginBuy(toRaw(props.sellDataArr)[0].nft.token_id) tokenId: props.sellDataArr.token_id,
console.log('购买', res) 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 = () => { // const priceAmount = () => {
// return priceCalculated(price) // return priceCalculated(price)
@ -95,7 +114,7 @@ const handleCancel = (e) => {
<style lang="scss" scoped> <style lang="scss" scoped>
// .ant-modal-wrap{ // .ant-modal-wrap{
.buyDia { :deep(.ant-modal) {
width: 1362px !important; width: 1362px !important;
color: #fff; color: #fff;
.ant-modal-content { .ant-modal-content {
@ -106,8 +125,8 @@ const handleCancel = (e) => {
border-radius: 100px; border-radius: 100px;
.top-close { .top-close {
position: absolute; position: absolute;
top: -53px; top: -20px;
right: -53px; right: -20px;
width: 106px; width: 106px;
height: 106px; height: 106px;
cursor: pointer; cursor: pointer;
@ -127,7 +146,7 @@ const handleCancel = (e) => {
margin-left: 50px; margin-left: 50px;
} }
.content-table { .content-table {
width: 1017px; width: 1208px;
height: 48px; height: 48px;
line-height: 48px; line-height: 48px;
margin: 0 auto; margin: 0 auto;
@ -143,19 +162,29 @@ const handleCancel = (e) => {
text-align: center; text-align: center;
&:nth-child(1) { &:nth-child(1) {
width: 540px; width: 540px;
text-align: left; text-align: center;
padding-left: 100px; // 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; box-sizing: border-box;
} }
} }
} }
.content-nfts { .content-nfts {
width: 1017px; width: 1208px;
margin: 0 auto; margin: 0 auto;
li { li {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; // align-items: center;
margin: 20px 0; margin: 20px 0;
>div { >div {
width: 240px; width: 240px;
@ -169,28 +198,77 @@ const handleCancel = (e) => {
align-items: center; align-items: center;
width: 540px; width: 540px;
.nft-img { .nft-img {
width: 110px; width: 369px;
height: 164px; height: 551px;
border: 1px solid #fff; border: 1px solid #fff;
margin-left: 50px; margin-left: 50px;
}
}
.id {
}
.price {
display: flex;
justify-content: center;
align-items: center;
.price-img {
width: 28px;
height: 28px;
margin-left: 10px;
img { img {
width: 100%; width: 100%;
height: 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; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-left: 60px;
padding-top: 20px;
border-top: 2px solid #3A3B57;
box-sizing: border-box; box-sizing: border-box;
.btm-left { padding-bottom: 20px;
display: flex; position: relative;
margin-left: 20px; .btm-btn {
li { position: absolute;
font-family: 'Anton'; top: -120px;
font-weight: 400; right: 30px;
font-size: 42px; width: 362px;
color: #BB7FFF; height: 97px;
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;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -236,12 +292,13 @@ const handleCancel = (e) => {
margin-right: 20px; margin-right: 20px;
background: #fec25d; background: #fec25d;
color: #2D2738; color: #2D2738;
font-family: 'Poppins';
font-weight: 500;
font-size: 14px;
text-align: center; text-align: center;
border-radius: 20px; border-radius: 20px;
box-shadow: 0 0 5px 0px #fec25d; box-shadow: 0 0 5px 0px #fec25d;
border-radius: 100px;
font-family: 'Poppins';
font-weight: 500;
font-size: 30px;
cursor: pointer; 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 const currency = import.meta.env.VUE_APP_MARKET_CURRENCY
// 出售NFT // 出售NFT
const sellNft = async (val) => { const sellNft = async (val) => {
console.log(val) console.log(toRaw(val).token_id,toRaw(val).contract_address)
sellDialogVisible.value = true sellDialogVisible.value = true
sellDataArr.value = val sellDataArr.value = val
return return

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

@ -1,17 +1,27 @@
<template> <template>
<div class="cart"> <div class="cart">
<div class="cart-header"> <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"> <div class="close" @click="closeCart">
<img src="@/assets/img/marketplace/closeicon.png" alt=""> <img src="@/assets/img/marketplace/closeicon.png" alt="">
</div> </div>
</div> </div>
<div class="cart-content"> <div class="cart-content">
<div class="cart-not"> <div v-if="cartList !== undefined && cartList.length > 0" class="cart-list">
<p>You have no items in your cart</p> <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-item-left-name">{{ item.nft.name }}</div>
</div>
<div class="cart-item-right">
<div class="cart-item-right-price"></div>
</div>
</li>
</div> </div>
<div class="cart-list"> <div v-else class="cart-not">
<p>You have no items in your cart</p>
</div> </div>
<!-- <div class="cart-price"> <!-- <div class="cart-price">
<div class="left">Total Price</div> <div class="left">Total Price</div>
@ -20,8 +30,8 @@
<div>≈ {{ 200 }}$</div> <div>≈ {{ 200 }}$</div>
</div> </div>
</div> --> </div> -->
<!-- <div class="cart-btn">Buy All</div> --> <div v-if="cartList !== undefined && cartList.length > 0" class="cart-btn">Buy All</div>
<div class="cart-btn" @click="toMarketplace">Selet NFTs to Buy</div> <div v-else class="cart-btn" @click="toMarketplace">Select NFTs to Buy</div>
</div> </div>
</div> </div>
@ -37,11 +47,12 @@ import {
apiClearCartList, apiClearCartList,
} from "@/utils/marketplace" } from "@/utils/marketplace"
const router = useRouter(); const router = useRouter();
// console.log(marketplaceStore.cartList,'Cart-------')
const emit = defineEmits(['clickStatusChild']) const emit = defineEmits(['clickStatusChild'])
const immutableStore = useImmutableStore() const immutableStore = useImmutableStore()
// const token = immutableStore.accessToken // const token = immutableStore.accessToken
const cartList = ref()
const closeCart = () => { const closeCart = () => {
emit('closeCart') emit('closeCart')
} }
@ -62,15 +73,16 @@ const clearCart = async () => {
} }
const getCartList = async () => { const getCartList = async () => {
// console.log(await useMarketplaceStore().getCartListState(),'-------------------------------------------------------')
// let token = localStorage.getItem('assessToken') // let token = localStorage.getItem('assessToken')
// if(token) { // if(token) {
// try { try {
// let res = await apiGetCartList() // let res = await useMarketplaceStore().cartList
// console.log(res,'----') let res = '-------------------------'
// } catch (e) { // cartList.value = res
// console.log(e) console.log(res)
// } } catch (e) {
console.log(e)
}
// } // }
} }
@ -82,7 +94,7 @@ onMounted(()=> {
<style lang="scss" scoped> <style lang="scss" scoped>
.cart { .cart {
width: 480px; width: 570px;
// height: 100%; // height: 100%;
color: #BB7FFF; color: #BB7FFF;
.cart-header { .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>{{ nftData.nft.owner_address.substr(0,6) }}...{{ nftData.nft.owner_address.substr(-6) }}</div>
</div> </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-buy" @click="buyNft(nftData)">Buy Now</div>
<div class="card-cat" @click.stop="addCart(nftData)"> <div class="card-cat" @click.stop="addCart(nftData)">
<img src="@/assets/img/marketplace/Add shopping cart02.png" alt=""> <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 BuyDialog from "@/components/Dialogs/buyDialog.vue"
import {priceCalculated} from "@/configs/priceCalculate.js" import {priceCalculated} from "@/configs/priceCalculate.js"
import { useDetailStore } from "@/store/detail" import { useDetailStore } from "@/store/detail"
import { useImmutableStore } from "@/store/immutable"
import { import {
apiAddCartList useMarketplaceStore
} from "@/utils/marketplace" } from "@/store/marketplace"
const detailData = useDetailStore() const detailData = useDetailStore()
const marketplaceList = useMarketplaceStore()
const immutableData = useImmutableStore()
console.log(immutableData.access)
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
const router = useRouter(); const router = useRouter();
const { proxy } = getCurrentInstance(); const { proxy } = getCurrentInstance();
@ -78,12 +82,15 @@ const addCart = async (val) => {
} }
] ]
} }
console.log(data)
// return // return
try { try {
// let res = await axios.post(`/api/shopcart/add`,{}) // let res = await axios.post(`/api/shopcart/add`,{})
let res = await apiAddCartList(data) const { errcode, errmsg } = await marketplaceList.addCartListState(data)
console.log(res) if(errcode == 0) {
alert('Added successfully')
await marketplaceList.getCartListState()
}
console.log(errcode, errmsg,'------------------------')
} catch (e) { } catch (e) {
console.log(e) console.log(e)
} }

21
src/store/marketplace.js
View File

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