diff --git a/src/assets/img/marketplace/Delete icon.png b/src/assets/img/marketplace/Delete icon.png new file mode 100644 index 0000000..3015959 Binary files /dev/null and b/src/assets/img/marketplace/Delete icon.png differ 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 +
    Login
    @@ -276,8 +279,9 @@ const myCart = async () => { } } -watch(() => route.path,(newPath, oldPath) => { - if(newPath == '/marketplace' || newPath == '/assets' || newPath == '/detail') { +watch(() => route.path,(newPath, oldPath) => { + let routerPath = newPath.split('/') + if(routerPath[1] == 'marketplace' || routerPath[1] == 'assets' || routerPath[1] == 'detail') { isCart.value = true } else { isCart.value = false diff --git a/src/components/marketplace/mktContent.vue b/src/components/marketplace/mktContent.vue index 6f56efd..5165ff1 100644 --- a/src/components/marketplace/mktContent.vue +++ b/src/components/marketplace/mktContent.vue @@ -12,7 +12,7 @@
    -
    {{ nftList.length }} Results
    +
    {{ nftList.length }}0 Results
  • Overview: diff --git a/src/store/marketplace.js b/src/store/marketplace.js index c6642be..cc0ec45 100644 --- a/src/store/marketplace.js +++ b/src/store/marketplace.js @@ -1,6 +1,6 @@ import { defineStore } from 'pinia'; import { ref } from 'vue'; -import { apiMarketplaceState, apiGetCartList, apiAddCartList } from "@/utils/marketplace" +import { apiMarketplaceState, apiGetCartList, apiAddCartList, apiDelCartList } from "@/utils/marketplace" export const useMarketplaceStore = defineStore('marketplace', () => { const overview = ref('') @@ -11,7 +11,6 @@ export const useMarketplaceStore = defineStore('marketplace', () => { const rank = ref([]) const gold = ref([]) const status = ref([]) - const cartList = ref() const updateOverviewStatus = (_connected) => { overview.value = _connected; } @@ -42,13 +41,17 @@ export const useMarketplaceStore = defineStore('marketplace', () => { } async function getCartListState() { - cartList.value = await apiGetCartList() + return await apiGetCartList() } async function addCartListState(_connected) { return await apiAddCartList(_connected) } + async function delCartListState(_connected) { + return await apiDelCartList(_connected) + } + return { overview, updateOverviewStatus, sort, updateSortStatus, @@ -59,8 +62,9 @@ export const useMarketplaceStore = defineStore('marketplace', () => { gold, updateGoldStatus, status, updateStatusStatus, getMarketplaceState, - cartList, getCartListState, + getCartListState, addCartListState, + delCartListState, } }, { diff --git a/src/store/wallet.js b/src/store/wallet.js index cea342e..0b3ec29 100644 --- a/src/store/wallet.js +++ b/src/store/wallet.js @@ -7,6 +7,7 @@ export const walletStore = defineStore( const walletType = ref(); const address = ref(); const chainId = ref(); + const tokenId = ref(); const showAddress = computed(() => { if (address.value.length > 10) { @@ -19,11 +20,13 @@ export const walletStore = defineStore( walletType.value = ''; address.value = ''; chainId.value = ''; + tokenId.value = ''; } return { walletType, address, chainId, + tokenId, showAddress, reset, }; diff --git a/src/utils/marketplace.js b/src/utils/marketplace.js index e733272..65a075e 100644 --- a/src/utils/marketplace.js +++ b/src/utils/marketplace.js @@ -7,6 +7,7 @@ const net_id = import.meta.env.VUE_APP_NET_ID const toJson = res => res.json(); const httpPost = async (url, data) => { + console.log(this.store.tokenId,'---------------------------------------') const token = localStorage.getItem('assessToken'); let headers = {"Content-Type": "application/json"}; // let token = token; @@ -39,7 +40,11 @@ const httpGet = async (url, data) => { // 获取市场所有 export const apiMarketplaceState = async (data) => { const url = `${API_BASE}/api/market/product/list/${net_id}`; - return httpPost(url, data) + // return httpPost(url, data) + let res = await axios.post(url,data, + { }) + // console.log(res) + return res.data } // 获取nft地板价 @@ -55,9 +60,9 @@ export const apiAssetsState = async (account_address, data) => { } // 获取上架出售得NFTS -export const apiHangingState = async (account_address, data) => { - const url = `${API_BASE}/api/asset/${net_id}/${account_address}` - return httpGet(url, data) +export const apiHangingState = async (data) => { + const url = `${API_BASE}/api/market/product/list/${net_id}` + return httpPost(url, data) } // 账号交易历史 @@ -84,9 +89,10 @@ export const apiAddCartList = async (data) => { return httpPost(url, data) } -// 删除购物车 -export const apiDelCartList = async () => { +// 删除购物中nft +export const apiDelCartList = async (data) => { const url = `${API_BASE}/api/shopcart/del` + return httpPost(url, data) } // 清空购物车