From 36e03d6863e5fd86105a966622936f801d1026c9 Mon Sep 17 00:00:00 2001 From: yuyongdong Date: Tue, 25 Jun 2024 17:47:55 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/img/marketplace/Delete icon.png | Bin 0 -> 2966 bytes src/components/assets/card.vue | 10 +- src/components/assets/trading.vue | 10 +- src/components/cart/index.vue | 111 +++++++-- src/components/chain/Market.js | 2 +- src/components/common/tradingCard.vue | 247 ++++++++++++++++++++- src/components/layout/NavBar.vue | 10 +- src/components/marketplace/mktContent.vue | 2 +- src/store/marketplace.js | 12 +- src/store/wallet.js | 3 + src/utils/marketplace.js | 18 +- 11 files changed, 383 insertions(+), 42 deletions(-) create mode 100644 src/assets/img/marketplace/Delete icon.png diff --git a/src/assets/img/marketplace/Delete icon.png b/src/assets/img/marketplace/Delete icon.png new file mode 100644 index 0000000000000000000000000000000000000000..301595938a8acb9343e4256da806f869a503468e GIT binary patch literal 2966 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 M07*qoM6N<$f~D`k?*IS* literal 0 HcmV?d00001 diff --git a/src/components/assets/card.vue b/src/components/assets/card.vue index 4bef8c3..7f3cb8b 100644 --- a/src/components/assets/card.vue +++ b/src/components/assets/card.vue @@ -69,17 +69,19 @@ const sellDataArr = ref([]) const currency = import.meta.env.VUE_APP_MARKET_CURRENCY // 出售NFT const sellNft = async (val) => { - getPrice() - console.log(toRaw(val)) + // getPrice() + // console.log(toRaw(val)) // sellDialogVisible.value = true // sellDataArr.value = val - return + // return + let orderData = new Date() const data = { // import.meta.env.VUE_APP_PASSPORT_MARKET_ADDRESS contractAddress: val.contract_address, tokenId: val.token_id, currencyAddress: currency, - currencyAmount: '1000000000000000000' + currencyAmount: '1000000000000000000', + orderExpiry: orderData, } // sellDataArr.value.push(val) // buyDialogVisible.value = true diff --git a/src/components/assets/trading.vue b/src/components/assets/trading.vue index e4685fb..775282a 100644 --- a/src/components/assets/trading.vue +++ b/src/components/assets/trading.vue @@ -34,9 +34,9 @@ -->
-
  • - -
    • + + +
    @@ -47,7 +47,7 @@ import { ref, onMounted } from "vue"; import OverView from "@/components/common/searchView/Overview.vue"; import Status from "@/components/common/searchView/status.vue"; -import Card from "@/components/common/card.vue"; +import Card from "@/components/common/tradingCard.vue"; import { apiHistoryState } from "@/utils/marketplace" import { useTradingStore } from "@/store/trading" import {walletStore} from "@/store/wallet"; @@ -84,6 +84,8 @@ const getHistoryList = async () => { cursor: '', } let res = await apiHistoryState(myAddress,data) + nftList.value = res.rows + console.log(res) } onMounted(() => { diff --git a/src/components/cart/index.vue b/src/components/cart/index.vue index f24fabb..a50bf71 100644 --- a/src/components/cart/index.vue +++ b/src/components/cart/index.vue @@ -16,7 +16,15 @@
    {{ item.nft.name }}
    -
    +
    +
    {{ priceCalculated(item.event.data.buy[0].amount) }}
    +
    + +
    +
    +
    + +
    @@ -42,8 +50,10 @@ import { ref, defineEmits, onMounted } from "vue" import { useRouter, useRoute } from "vue-router"; import { useImmutableStore } from "@/store/immutable" import { useMarketplaceStore } from "@/store/marketplace" +import {priceCalculated} from "@/configs/priceCalculate.js" +const marketplaceList = useMarketplaceStore() import { - apiGetCartList, + apiDelCartList, apiClearCartList, } from "@/utils/marketplace" const router = useRouter(); @@ -62,26 +72,49 @@ const toMarketplace = () => { router.push('/marketplace'); } -const clearCart = async () => { - console.log('清楚购物车') + + + +// 获取购物车列表 +const getCartList = async () => { + // let token = localStorage.getItem('assessToken') + // if(token) { + try { + let res = await marketplaceList.getCartListState() + cartList.value = res.data + } catch (e) { + console.log(e) + } + // } +} + +// 删除nft +const deleteNft = async (val) => { + const data = { + net_id: import.meta.env.VUE_APP_NET_ID, + tokens: [ + { + token_id: val.nft.token_id, + contract_address: val.nft.contract_address, + } + ] + } try { - let res = await apiClearCartList() + const res = await marketplaceList.delCartListState(data) console.log(res) } catch (e) { console.log(e) } } -const getCartList = async () => { - // let token = localStorage.getItem('assessToken') - // if(token) { - try { - let res = await useMarketplaceStore().cartList - cartList.value = res.data - } catch (e) { - console.log(e) - } - // } +// 清空购物车 +const clearCart = async () => { + try { + let res = await apiClearCartList() + console.log(res) + } catch (e) { + console.log(e) + } } onMounted(()=> { @@ -124,7 +157,7 @@ onMounted(()=> { } } .cart-content { - padding: 30px; + padding: 0 30px; .cart-not { text-align: center; margin-bottom: 30px; @@ -133,6 +166,9 @@ onMounted(()=> { } .cart-list { .cart-item { + display: flex; + justify-content: space-between; + margin: 15px auto; .cart-item-left { display: flex; .cart-item-left-img { @@ -147,7 +183,48 @@ onMounted(()=> { margin-left: 29px; } } - .cart-item-right {} + .cart-item-right { + height: 40px; + .cart-item-right-price { + display: flex; + align-items: center; + div { + height: 27px; + line-height: 27px; + font-family: 'Poppins'; + font-weight: bold; + font-size: 24px; + color: #984FFB; + } + .cart-item-right-price-img { + width: 27px; + height: 27px; + margin-left: 10px; + img { + width: 100%; + height: 100%; + } + } + } + .cart-item-right-clear { + display: none; + width: 39px; + height: 40px; + cursor: pointer; + img { + width: 100%; + height: 100%; + } + } + &:hover { + .cart-item-right-price { + display: none; + } + .cart-item-right-clear { + display: block; + } + } + } } } .cart-btn { diff --git a/src/components/chain/Market.js b/src/components/chain/Market.js index 65c6c3c..cc77a1e 100644 --- a/src/components/chain/Market.js +++ b/src/components/chain/Market.js @@ -70,7 +70,7 @@ export class ImtblMarket { // This signature is stored off-chain and is later provided to any user wishing to fulfil the open order. // The signature only allows the order to be fulfilled if it meets the conditions specified by the user that created the listing. if (action.type === orderbook.ActionType.SIGNABLE) { - orderSignature = await signer._signTypedData( + orderSignature = await this.signer._signTypedData( action.message.domain, action.message.types, action.message.value, diff --git a/src/components/common/tradingCard.vue b/src/components/common/tradingCard.vue index 07db6ab..35ea79c 100644 --- a/src/components/common/tradingCard.vue +++ b/src/components/common/tradingCard.vue @@ -1,13 +1,256 @@ \ No newline at end of file diff --git a/src/components/layout/NavBar.vue b/src/components/layout/NavBar.vue index e7431ab..1a83f46 100644 --- a/src/components/layout/NavBar.vue +++ b/src/components/layout/NavBar.vue @@ -40,7 +40,10 @@
    -
    7
    +
    + {{ marketplaceStore.cartList.data.length }} + 0 +