Merge branch 'new-CounterFire' of http://git.kingsome.cn/huangjinming/CounterFireGames into new-CounterFire

src/components/Dialogs/buyDialog.vue

@@ -4,13 +4,14 @@
       <img src="@/assets/img/marketplace/Close_counter.png" alt />
     </div>
     <div class="buy-dialog-content">
-      <div class="content">
-        <div class="content-title">Transaction confirmation ( {{ props.buyDataArr.length }} )</div>
-        <div class="content-table">
+      <div class="content-title">Transaction confirmation ( {{ props.buyDataArr.length }} )</div>
+      <div class="content-table">
           <div>NFT</div>
           <div>Token ID</div>
           <div>Price</div>
         </div>
+      <div class="content">
+        
         <div class="content-nfts" v-for="(item, index) in props.buyDataArr" :key="index">
           <li>
             <div class="nft">
@@ -29,7 +30,9 @@
           </li>
         </div>
       </div>
-      <div class="btm">
+      
+    </div>
+    <div class="btm">
         <div class="btm-left">
           <li>Total&nbsp;:&nbsp;</li>
           <li>
@@ -41,7 +44,6 @@
         </div>
         <div class="btm-right" @click="buyConfirm">Confirm</div>
       </div>
-    </div>
   </div>
 </template>
 <script setup>
@@ -124,6 +126,7 @@ onMounted(() => {
   border: 1px solid #b966ff;
   box-shadow: 0px 15px 28px 3px rgba(22, 22, 22, 0.13);
   border-radius: 100px;
+  z-index: 10000;
   .top-close {
     position: absolute;
     top: -23px;
@@ -136,16 +139,13 @@ onMounted(() => {
       height: 100%;
     }
   }
-  .buy-dialog-content {
-    margin-top: 40px;
-    .content {
-      .content-title {
+  .content-title {
         font-family: "Anton";
         font-weight: 400;
         font-size: 48px;
         margin-left: 50px;
       }
-      .content-table {
+  .content-table {
         width: 1017px;
         height: 48px;
         line-height: 48px;
@@ -178,6 +178,12 @@ onMounted(() => {
           }
         }
       }
+  .buy-dialog-content {
+    margin-top: 40px;
+    .content {
+      max-height: 45vh;
+      overflow-y: auto;
+      
       .content-nfts {
         width: 1017px;
         margin: 0 auto;
@@ -228,12 +234,15 @@ onMounted(() => {
         }
       }
     }
-    .btm {
+    
+  }
+  .btm {
       display: flex;
       justify-content: space-between;
       align-items: center;
       margin-left: 60px;
-      padding-top: 20px;
+      padding-top: 10px;
+      padding-bottom: 10px;
       border-top: 2px solid #3a3b57;
       box-sizing: border-box;
       .btm-left {
@@ -267,7 +276,7 @@ onMounted(() => {
         align-items: center;
         justify-content: center;
         line-height: 40px;
-        margin-right: 20px;
+        margin-right: 40px;
         background: #fec25d;
         color: #2d2738;
         font-family: "Poppins";
@@ -279,6 +288,5 @@ onMounted(() => {
         cursor: pointer;
       }
     }
-  }
 }
 </style>

src/components/Dialogs/confirmDialog.vue

@@ -87,6 +87,7 @@ function hideModal(result = null) {
 } */
 
 .cf-overlay {
+  z-index: 1000;
   width: 1140px;
   min-height: 500px;
   background: #1a1821;

src/components/cart/index.vue

@@ -53,7 +53,7 @@
 </template>
 
 <script setup>
-import { ref, onMounted, inject } from "vue"
+import { ref, onMounted, inject, computed } from "vue"
 const message = inject('$message')
 import ImgCard from "@/components/common/imgCard.vue"
 import ConfirmDialog from "@/components/Dialogs/confirmDialog.vue";
@@ -68,11 +68,26 @@ import {
   apiDelCartList,
   apiClearCartList,
 } from "@/utils/marketplace"
-import { computed } from "vue";
 const router = useRouter();
 const emit = defineEmits(['clickStatusChild'])
 
-const cartList = ref()
+// const cartList = ref()
+
+const cartList = computed(() => {
+  let datas = marketplaceList.getCartList.data
+  for (let sub of datas) {
+    if (sub.event?.data) {
+      const _data = formatPrice(sub.event.data)
+      sub.icon = _data.icon
+      sub.usd = _data.usd
+      sub.currencyName = _data.currencyName
+      sub.amount = _data.amount
+      sub.tokenAmount = _data.tokenAmount
+      sub.decimals = _data.decimals
+    }
+  }
+  return datas
+})
 
 const closeCart = () => {
   emit('closeCart')
@@ -120,23 +135,7 @@ const getCartList = async () => {
   // if(token) {
     try {
       let res = await marketplaceList.getCartListState()
-      console.log(res)
-      if (res.data && res.data.length > 0) {
-        for (let sub of res.data) {
-          if (sub.event?.data) {
-            const _data = formatPrice(sub.event.data)
-            sub.icon = _data.icon
-            sub.usd = _data.usd
-            sub.currencyName = _data.currencyName
-            sub.amount = _data.amount
-            sub.tokenAmount = _data.tokenAmount
-            sub.decimals = _data.decimals
-          }
-        }
-      }
-      
-      console.log(res)
-      cartList.value = res.data
+  
       marketplaceList.getCartList = res
     } catch (e) {
       console.log(e)
@@ -274,6 +273,8 @@ onMounted(()=> {
       color: #fff;
     }
     .cart-list {
+      max-height: 50vh;
+      overflow-y: auto;
       .cart-item {
         display: flex;
         justify-content: space-between;

src/components/common/card.vue

@@ -20,10 +20,10 @@
     </div>
     <div class="card-btn" v-if="nftData.nft.owner_address != localWalletStore.address">
       <div class="card-buy" @click="localWalletStore.address == '' ? cardLogin() : buyNft(nftData)">Buy Now</div>
-      <div v-if="nftData.in_shopcart == 0" class="card-cat" @click.stop="localWalletStore.address == '' ? cardLogin() : addCart(nftData)">
+      <div v-if="!isInCard" class="card-cat" @click.stop="localWalletStore.address == '' ? cardLogin() : addCart(nftData)">
         <img src="@/assets/img/marketplace/Add_shopping_cart.png" alt="">
       </div>
-      <div v-else class="card-cat" @click.stop="clearCart(nftData)">
+      <div v-else class="card-cat clear-cat" @click.stop="deleteFromCart(nftData)">
         <img src="@/assets/img/marketplace/Move_out.png" alt="">
       </div>
     </div>
@@ -34,7 +34,7 @@
 </template>
 
 <script setup>
-import { ref, toRaw, onMounted, getCurrentInstance, inject } from "vue"
+import { ref, toRaw, onMounted, getCurrentInstance, inject, computed } from "vue"
 const message = inject('$message')
 import BuyDialog from "@/components/Dialogs/buyDialog.vue"
 import ImgCard from "@/components/common/imgCard.vue"
@@ -160,8 +160,25 @@ const addCart = async (val) => {
 }
 
 // 移除购物车
-const clearCart = async (val) => {
-
+const deleteFromCart = 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 { errcode, errmsg } =  await marketplaceList.delCartListState(data)
+    if(errcode == 0) {
+      message.success('success! Remove from cart')
+      marketplaceList.getCartList = await marketplaceList.getCartListState()
+    }
+  } catch (e) {
+    console.log(e)
+  }
 }
 
 // 登录
@@ -169,6 +186,17 @@ const cardLogin = async () => {
   await new BlockChain().connect()
 }
 
+const isInCard = computed(() => {
+  let cardList = toRaw(marketplaceList.getCartList)
+  if (!cardList?.data?.length) {
+    return false
+  }
+  let exists = cardList.data.find(item => {
+    return item.nft.token_id == props.nftData.nft.token_id && item.nft.contract_address == props.nftData.nft.contract_address
+  })
+  return exists
+})
+
 onMounted(() => {
   // console.log(JSON.parse(JSON.stringify(props.nftData)), "-=-=-");
   if (props.nftData?.event?.data) {
@@ -279,6 +307,9 @@ onMounted(() => {
         height: 39px;
       }
     }
+    .clear-cat {
+      background: #ff6271;
+    }
     .card-cancel {
       width: 100%;
       background: #ff6271;