From 068514027f8a4cd8c881f048b19bcd28374e067c Mon Sep 17 00:00:00 2001
From: yuyongdong <yuyongdong@kingsome.cn>
Date: Mon, 24 Jun 2024 16:54:07 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Dialogs/buyDialog.vue  | 397 +++++++++++++-------------
 src/components/Dialogs/sellDialog.vue | 223 +++++++++------
 src/components/assets/card.vue        |   2 +-
 src/components/cart/index.vue         |  44 +--
 src/components/common/card.vue        |  19 +-
 src/store/marketplace.js              |  21 +-
 6 files changed, 396 insertions(+), 310 deletions(-)

diff --git a/src/components/Dialogs/buyDialog.vue b/src/components/Dialogs/buyDialog.vue
index 645c058..bdffe67 100644
--- a/src/components/Dialogs/buyDialog.vue
+++ b/src/components/Dialogs/buyDialog.vue
@@ -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> -->
+          <a-button key="back" @click="handleCancel">Return</a-button>
+          <a-button key="submit" type="primary" :loading="loading" @click="handleOk">Submit</a-button>
+      </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,15 +27,17 @@
           <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>
             <div class="id">{{ item.nft.token_id }}</div>
             <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>{{ priceCalculated(item.event.data.buy[0].amount) }}</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,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) => {
-  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 = () => {
   // toRaw(props.buyDataArr).reduce((arr, amount)) => {
-  // return arr + 
+  // return arr +
   // }
   // 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)
-    //   return $total
-    // }
-
-}
+  // countTotal(arr, amount) {
+    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;
-    .ant-modal-content {
-      padding: 0px;
-      background: #1a1821;
-      border: 1px solid #B966FF;
-      box-shadow: 0px 15px 28px 3px rgba(22,22,22,0.13);
-      border-radius: 100px;
-      .top-close {
-        position: absolute;
-        top: -53px;
-        right: -53px;
-        width: 106px;
-        height: 106px;
-        cursor: pointer;
-        img {
-          width: 100%;
-          height: 100%;
-        }
+: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-radius: 100px;
+    .top-close {
+      position: absolute;
+      top: -53px;
+      right: -53px;
+      width: 106px;
+      height: 106px;
+      cursor: pointer;
+      img {
+        width: 100%;
+        height: 100%;
       }
-      .ant-modal-body {
-        padding: 30px 50px;
-        padding-bottom: 10px;
-        .content {
-          .content-title {
-            font-family: 'Anton';
-            font-weight: 400;
-            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%;
-                  }
-                }
-              }
-            }
-          }
+    }
+    .ant-modal-body {
+      padding: 30px 50px;
+      padding-bottom: 10px;
+      .content {
+        .content-title {
+          font-family: "Anton";
+          font-weight: 400;
+          font-size: 48px;
+          margin-left: 50px;
         }
-        .btm {
+        .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;
-          margin-left: 60px;
-          padding-top: 20px;
-          border-top: 2px solid #3A3B57;
-          box-sizing: border-box;
-          .btm-left {
+          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(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;
-            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;
-                }
+            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;
               }
-              .money {
-                font-family: 'Poppins';
-                font-weight: 400;
-                font-size: 24px;
+              .nft-name {
+                font-weight: bold;
+                margin-left: 20px;
+              }
+            }
+            .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;
-            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;
+        }
+      }
+      .btm {
+        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;
+          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>
\ No newline at end of file
diff --git a/src/components/Dialogs/sellDialog.vue b/src/components/Dialogs/sellDialog.vue
index 1da2a03..3ec9c5c 100644
--- a/src/components/Dialogs/sellDialog.vue
+++ b/src/components/Dialogs/sellDialog.vue
@@ -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 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 currency = import.meta.env.VUE_APP_MARKET_CURRENCY
+const sellConfirm = async () => {
+  if(priceValue.value) {
+    const pass = new PassportWallet()
+    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;
           }
         }
diff --git a/src/components/assets/card.vue b/src/components/assets/card.vue
index 13583b9..b1ed917 100644
--- a/src/components/assets/card.vue
+++ b/src/components/assets/card.vue
@@ -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
diff --git a/src/components/cart/index.vue b/src/components/cart/index.vue
index 5a77b06..992e4cb 100644
--- a/src/components/cart/index.vue
+++ b/src/components/cart/index.vue
@@ -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-item-left-name">{{ item.nft.name }}</div>
+          </div>
+          <div class="cart-item-right">
+            <div class="cart-item-right-price"></div>
+          </div>
+        </li>
       </div>
-      <div class="cart-list">
-
+      <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 {
diff --git a/src/components/common/card.vue b/src/components/common/card.vue
index 7b8983f..88e2d70 100644
--- a/src/components/common/card.vue
+++ b/src/components/common/card.vue
@@ -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)
   }
diff --git a/src/store/marketplace.js b/src/store/marketplace.js
index a62988e..c6642be 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, } 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,
   }
 },
 {