修改样式

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

src/components/assets/trading.vue

@@ -34,9 +34,9 @@
       </div> -->
       <div class="content-right-content">
         <div class="pages-horizontal">
-          <li v-for="(item, index) in nftList" :key="index">
-            <Card v-if="nftList != undefined || nftList.length > 0" :nftData="item"  />
-          </li>
+          <!-- <li v-for="(item, index) in nftList" :key="index"> -->
+            <Card v-if="nftList != undefined || nftList.length > 0" :nftData="nftList"  />
+          <!-- </li> -->
         </div>
       </div>
     </div>
@@ -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(() => {

src/components/cart/index.vue

@@ -16,7 +16,15 @@
             <div class="cart-item-left-name">{{ item.nft.name }}</div>
           </div>
           <div class="cart-item-right">
-            <div class="cart-item-right-price"></div>
+            <div class="cart-item-right-price">
+              <div>{{ priceCalculated(item.event.data.buy[0].amount) }}</div>
+              <div class="cart-item-right-price-img">
+                <img src="@/assets/img/marketplace/ETHicon.png" alt="">
+              </div>
+            </div>
+            <div class="cart-item-right-clear" @click="deleteNft">
+              <img src="@/assets/img/marketplace/Delete icon.png" alt="">
+            </div>
           </div>
         </li>
       </div>
@@ -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 apiClearCartList()
+      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 {
+    const res =  await marketplaceList.delCartListState(data)
     console.log(res)
   } catch (e) {
     console.log(e)
   }
 }
 
-const getCartList = async () => {
-  // let token = localStorage.getItem('assessToken')
-  // if(token) {
+// 清空购物车
+const clearCart = async () => {
   try {
-      let res = await useMarketplaceStore().cartList
-      cartList.value = res.data
+    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 {

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,

src/components/common/tradingCard.vue

@@ -1,13 +1,256 @@
 <template>
   <div>
-
+    <a-table :data-source="props.nftData" :columns="columns" :pagination="false">
+      <span slot="orderInfo" slot-scope="text,record">
+        <template >
+          <div>
+            <img :src="record.image" alt="">
+          </div>
+          <div>
+            <p>{{record.name}}</p> 
+          </div>        
+        </template>  
+      </span>
+    </a-table>
   </div>
 </template>
 
 <script setup>
+import { ref } from "vue"
+
+const props = defineProps({
+  nftData: {
+    type: Object,
+    required: true,
+  },
+});
+
+const columns = ref([
+  {
+    title: 'NFT',
+    dataIndex: '',
+    key:'rowIndex',
+    // width:60,
+    align:"center",
+    customRender:function (t,r,index) {
+      return parseInt(index)+1;
+    }
+	},
+	{
+    title:'Status',
+    align:"center",
+    dataIndex: 'orderInfo',
+    scopedSlots: { customRender: 'orderInfo' },
+	},
+	{
+    title:'Price',
+    align:"center",
+    dataIndex: 'userInfo',
+    scopedSlots: { customRender: 'userInfo' },
+	},
+	{
+    title:'Quantity',
+    align:"center",
+    dataIndex: 'userInfo',
+    scopedSlots: { customRender: 'userInfo' },
+	},
+	{
+    title:'Sender',
+    align:"center",
+    dataIndex: 'userInfo',
+    scopedSlots: { customRender: 'userInfo' },
+	},
+	{
+    title:'recipient',
+    align:"center",
+    dataIndex: 'userInfo',
+    scopedSlots: { customRender: 'userInfo' },
+	},
+	{
+    title:'Date',
+    align:"center",
+    dataIndex: 'userInfo',
+    scopedSlots: { customRender: 'userInfo' },
+	},
+	{
+    title:'Contract',
+    align:"center",
+    dataIndex: 'userInfo',
+    scopedSlots: { customRender: 'userInfo' },
+	}
+])
+
+console.log(props.nftData)
+
+const data = ref([
+  {
+    // key: '1',
+    name: 'John Brown',
+    age: 32,
+    address: 'New York No. 1 Lake Park, New York No. 1 Lake Park',
+    tags: ['nice', 'developer'],
+  },
+  {
+    // key: '2',
+    name: 'Jim Green',
+    age: 42,
+    address: 'London No. 2 Lake Park, London No. 2 Lake Park',
+    tags: ['loser'],
+  },
+  {
+    // key: '3',
+    name: 'Joe Black',
+    age: 32,
+    address: 'Sidney No. 1 Lake Park, Sidney No. 1 Lake Park',
+    tags: ['cool', 'teacher'],
+  },
+  {
+    // key: '2',
+    name: 'Jim Green',
+    age: 42,
+    address: 'London No. 2 Lake Park, London No. 2 Lake Park',
+    tags: ['loser'],
+  },
+  {
+    // key: '3',
+    name: 'Joe Black',
+    age: 32,
+    address: 'Sidney No. 1 Lake Park, Sidney No. 1 Lake Park',
+    tags: ['cool', 'teacher'],
+  },
+  {
+    // key: '2',
+    name: 'Jim Green',
+    age: 42,
+    address: 'London No. 2 Lake Park, London No. 2 Lake Park',
+    tags: ['loser'],
+  },
+  {
+    // key: '3',
+    name: 'Joe Black',
+    age: 32,
+    address: 'Sidney No. 1 Lake Park, Sidney No. 1 Lake Park',
+    tags: ['cool', 'teacher'],
+  },
+  {
+    // key: '2',
+    name: 'Jim Green',
+    age: 42,
+    address: 'London No. 2 Lake Park, London No. 2 Lake Park',
+    tags: ['loser'],
+  },
+  {
+    // key: '3',
+    name: 'Joe Black',
+    age: 32,
+    address: 'Sidney No. 1 Lake Park, Sidney No. 1 Lake Park',
+    tags: ['cool', 'teacher'],
+  },
+  {
+    // key: '2',
+    name: 'Jim Green',
+    age: 42,
+    address: 'London No. 2 Lake Park, London No. 2 Lake Park',
+    tags: ['loser'],
+  },
+  {
+    // key: '3',
+    name: 'Joe Black',
+    age: 32,
+    address: 'Sidney No. 1 Lake Park, Sidney No. 1 Lake Park',
+    tags: ['cool', 'teacher'],
+  },
+  {
+    // key: '2',
+    name: 'Jim Green',
+    age: 42,
+    address: 'London No. 2 Lake Park, London No. 2 Lake Park',
+    tags: ['loser'],
+  },
+  {
+    // key: '3',
+    name: 'Joe Black',
+    age: 32,
+    address: 'Sidney No. 1 Lake Park, Sidney No. 1 Lake Park',
+    tags: ['cool', 'teacher'],
+  },
+  {
+    // key: '2',
+    name: 'Jim Green',
+    age: 42,
+    address: 'London No. 2 Lake Park, London No. 2 Lake Park',
+    tags: ['loser'],
+  },
+  {
+    // key: '3',
+    name: 'Joe Black',
+    age: 32,
+    address: 'Sidney No. 1 Lake Park, Sidney No. 1 Lake Park',
+    tags: ['cool', 'teacher'],
+  },
+  {
+    // key: '2',
+    name: 'Jim Green',
+    age: 42,
+    address: 'London No. 2 Lake Park, London No. 2 Lake Park',
+    tags: ['loser'],
+  }
+]);
 
 </script>
 
 <style lang="scss" scoped>
-
+div {
+  width: 100%;
+  :deep(.ant-table-wrapper) {
+    .ant-spin-nested-loading {
+      .ant-spin-container {
+        .ant-table {
+          color: #fff;
+          background: #16141b;
+          .ant-table-container {
+            .ant-table-content {
+              .ant-table-thead {
+                tr {
+                  th {
+                    color: #B3B5DA;
+                    background: #16141b;
+                    border-color: #34354e;
+                    &::before {
+                      display: none;
+                    }
+                  }
+                }
+              }
+              .ant-table-tbody {
+                tr {
+                  background: #16141b;
+                  td {
+                    border-color: #34354e;
+                    background: #16141b !important;
+                    .nft {
+                      display: flex;
+                    }
+                  }
+                  &:hover {
+                    background: #16141b !important;
+                    td {
+                      background: #16141b !important;
+                    }
+                    .ant-table-cell-row-hover {
+                      background: #16141b !important;
+                    }
+                    .ant-table-cell {
+                      background: #16141b !important;
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
 </style>

src/components/layout/NavBar.vue

@@ -40,7 +40,10 @@
           <div class="immutable-cart-img">
             <img src="@/assets/img/marketplace/Add shopping cart02.png" alt="">
           </div>
-          <div v-if="localWalletStore.address" class="immutable-cart-amount">7</div>
+          <div v-if="localWalletStore.address" class="immutable-cart-amount">
+            <span v-if="marketplaceStore.cartList">{{ marketplaceStore.cartList.data.length }}</span>
+            <span v-else>0</span>
+          </div>
         </div>
         <div class="metaMask-login" v-if="!localWalletStore.address" @click="immuTableLogin">Login</div>
         <div class="metaMask-login-active" v-else @click="showMenu = !showMenu">
@@ -277,7 +280,8 @@ const myCart = async () => {
 }
 
 watch(() => route.path,(newPath, oldPath) => {
-  if(newPath == '/marketplace' || newPath == '/assets' || newPath == '/detail') {
+  let routerPath = newPath.split('/')
+  if(routerPath[1] == 'marketplace' || routerPath[1] == 'assets' || routerPath[1] == 'detail') {
     isCart.value = true
   } else {
     isCart.value = false

src/components/marketplace/mktContent.vue

@@ -12,7 +12,7 @@
     <div class="mkt-content-right">
       <div class="mkt-content-right-header">
         <div class="bg-cor"></div>
-        <div class="results-total">{{ nftList.length }} Results</div>
+        <div class="results-total"><span v-if="nftList">{{ nftList.length }}</span><span v-else>0 </span> Results</div>
         <div class="search-list">
           <li v-if="marketplaceList.overview">
             <span>Overview: </span>

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,
   }
 },
 {

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,
     };

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)
 }
 
 // 清空购物车