详情页面

src/components/assets/card.vue

@@ -42,18 +42,14 @@
 import { ref, toRaw, onMounted, getCurrentInstance, defineEmits,inject } from "vue"
 const message = inject('$message')
 import SellDialog from "@/components/Dialogs/sellDialog.vue"
-import { useDetailStore } from "@/store/detail"
 import { apiGetPrice, nftDetail } from "@/utils/marketplace"
 import ImgCard from "@/components/common/imgCard.vue"
 import { priceCalculated } from "@/configs/priceCalculate"
 import LazyLoadImg from "@/components/lazyloadimg"
 import placeholderImg from '@/assets/img/marketplace/GenesisHeroes_NFT.png'
 import { timeFormat } from "@/configs/priceCalculate"
-// import BuyDialog from "@/components/Dialogs/buyDialog.vue"
 const emit = defineEmits(['renewMyNft'])
-import {
-  apiAddCartList
-} from "@/utils/marketplace"
+
 import { useRouter } from "vue-router";
 import { BlockChain } from "@/components/chain/BlockChain"
 const router = useRouter();

src/components/assets/collectibles.vue

@@ -1,36 +1,13 @@
 <template>
   <div class="collection">
     <div class="content-left">
-      <OverView :overviewValue="marketplaceList.overview" @clickOverviewChild="overviewChild" />
-      <Status :statusValue="marketplaceList.status" @clickStatusChild="statusChild" />
+      <OverView :overviewValue="overviewValue" @clickOverviewChild="overviewChild" />
+      <Status :statusValue="statusValue" @clickStatusChild="statusChild" />
     </div>
     <div class="content-right">
       <div class="content-right-header">
         <div class="bg-cor"></div>
         <div class="results-total">{{ nftList.length }} Results</div>
-        <div class="search-list">
-          <!-- <li v-if="marketplaceList.overview">
-            <span>Overview:</span>
-            <span>{{ marketplaceList.overview }}</span>
-            <span v-if="marketplaceList.overview" @click="clearOverviewAll">×</span>
-          </li>
-          <li
-            v-if="marketplaceList.status.length != undefined && marketplaceList.status.length > 0"
-          >
-            <span
-              v-if="marketplaceList.status.length != undefined && marketplaceList.status.length > 0"
-            >Hero:</span>
-            <span v-for="(item,index) in marketplaceList.status" :key="item">
-              <span>{{ searchName(item) }}</span>
-              <span v-if="marketplaceList.status.length != index+1">/</span>
-            </span>
-            <span
-              v-if="marketplaceList.status != undefined && marketplaceList.status.length > 0"
-              @click="clearStatusAll"
-            >×</span>
-          </li>
-          <li v-if="filterList !== undefined && filterList.length > 0" class="clear-all">Clear All</li> -->
-        </div>
       </div>
       <div class="content-right-content">
         <div class="pages-horizontal">
@@ -51,27 +28,19 @@ import Card from "./card.vue";
 import NftId from "@/configs/item.json"
 import { apiAssetsState } from "@/utils/marketplace"
 import {walletStore} from "@/store/wallet";
-import { useCollectiblesStore } from "@/store/collectibles"
-const marketplaceList = useCollectiblesStore()
 const localWalletStore = walletStore()
 const nftList = ref([])
-const filterList = ref()
 
-const clearOverviewAll = () => {
-  marketplaceList.overview = ''
-}
-const clearHeroAll = () => {}
+const overviewValue = ref()
+const statusValue = ref('0')
 
 const overviewChild = (val) => {
-  marketplaceList.overview = val
+  overviewValue.value = val
   getMyAssets()
 }
 
-const clearStatusAll = () => {
-  marketplaceList.status = ''
-}
 const statusChild = (val) => {
-  marketplaceList.status = val
+  statusValue.value = val
   getMyAssets()
 }
 
@@ -79,10 +48,10 @@ const getMyAssets = async () => {
   nftList.value = []
   const myADdress = localWalletStore.address
   const data = {
-    type: toRaw(marketplaceList.status),
+    type: statusValue.value,
     page_size: '20',
     cursor: '',
-    search_name: toRaw(marketplaceList.overview)
+    search_name: overviewValue.value
   }
   if(myADdress) {
     try {
@@ -94,10 +63,6 @@ const getMyAssets = async () => {
   }
 }
 
-const searchName = (id) => {
-  return NftId[id].name
-}
-
 onMounted(() => {
   getMyAssets()
 })
@@ -137,22 +102,6 @@ onMounted(() => {
         font-size: 14px;
         color: #b3b5da;
       }
-      .search-list {
-        display: flex;
-        align-items: center;
-        color: #fff;
-        li {
-          margin-left: 10px;
-          background: #2d2738;
-          padding: 5px 10px;
-          border-radius: 10px;
-          font-size: 12px;
-          cursor: pointer;
-        }
-        .clear-all {
-          background: #5a4a6d;
-        }
-      }
     }
     .content-right-content {
       margin-top: 30px;

src/components/assets/hanging.vue

@@ -1,8 +1,7 @@
 <template>
   <div class="hanging">
     <div class="content-left">
-      <OverView :overviewValue="marketplaceList.overview" @clickOverviewChild="overviewChild" />
-      <!-- <Status :statusValue="marketplaceList.status" @clickStatusChild="statusChild" /> -->
+      <OverView :overviewValue="overviewValue" @clickOverviewChild="overviewChild" />
     </div>
     <div class="content-right">
       <div class="content-right-content">
@@ -17,28 +16,17 @@
 <script setup>
 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/hangingCard.vue";
 import { apiHangingState } from "@/utils/marketplace"
-import { useHangingStore } from "@/store/hanging"
 import {walletStore} from "@/store/wallet";
 const localWalletStore = walletStore()
-const marketplaceList = useHangingStore()
 
 const nftList = ref([])
-const filterList = ref()
-
-const clearOverviewAll = () => {
-  marketplaceList.overview = ''
-}
-const clearHeroAll = () => {}
+const overviewValue = ref()
 
 const overviewChild = (val) => {
-  marketplaceList.overview = val
-}
-
-const clearStatusAll = () => {
-  marketplaceList.status = ''
+  overviewValue.value = val
+  getHistoryList()
 }
 
 const getHistoryList = async () => {
@@ -47,7 +35,7 @@ const getHistoryList = async () => {
     page_size: 20, //TODO:: 根据实际情况修改该值
     cursor: '',
     search: {
-      name: '',
+      name: overviewValue.value,
     },
     filter: {
       price_min: '',
@@ -66,7 +54,6 @@ const getHistoryList = async () => {
   }
   if(myAddress) {
     let res = await apiHangingState(data)
-    console.log('getHistoryList', res)
     nftList.value = res.rows
   }
 }

src/components/assets/trading.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="trading">
     <div class="content-left">
-      <OverView :overviewValue="marketplaceList.overview" @clickOverviewChild="overviewChild" />
-      <StatusRadio :statusValue="marketplaceList.statusRadio" @clickStatusChild="statusChild" />
+      <OverView :overviewValue="overviewValue" @clickOverviewChild="overviewChild" />
+      <StatusRadio :statusValue="statusValue" @clickStatusChild="statusChild" />
     </div>
     <div class="content-right">
       <div class="content-right-content">
@@ -20,37 +20,31 @@ import OverView from "@/components/common/searchView/Overview.vue";
 import StatusRadio from "@/components/common/searchView/statusRadio.vue";
 import Card from "@/components/common/tradingCard.vue";
 import { apiHistoryState, nftDetail } from "@/utils/marketplace"
-import { useTradingStore } from "@/store/trading"
 import {walletStore} from "@/store/wallet";
 const localWalletStore = walletStore()
-const marketplaceList = useTradingStore()
 const myAddress = ref(localWalletStore.address)
 const nftList = ref([])
-const clearOverviewAll = () => {
-  marketplaceList.overview = ''
-}
+const overviewValue = ref()
+const statusValue = ref('0')
+
 const overviewChild = (val) => {
-  marketplaceList.overview = val
+  overviewValue.value = val
 }
 
 const statusChild = (val) => {
-  console.log(val)
-  marketplaceList.statusRadio = val
+  statusValue.value = val
   getHistoryList()
 }
 
 const getHistoryList = async () => {
-  console.log(myAddress.value)
   const data = {
-    type: toRaw(marketplaceList.statusRadio),
+    type: statusValue.value,
     page_size: '20',
     cursor: '',
   }
-  console.log(data)
   if(myAddress.value) {
     let res = await apiHistoryState(myAddress.value,data)
     nftList.value = res.rows
-    console.log(res)
   }
 }
 

src/components/common/card.vue

@@ -43,9 +43,7 @@ import {walletStore} from "@/store/wallet";
 import { BlockChain } from "@/components/chain/BlockChain"
 import LazyLoadImg from "@/components/lazyloadimg"
 import placeholderImg from '@/assets/img/marketplace/GenesisHeroes_NFT.png'
-import {
-  useMarketplaceStore
-} from "@/store/marketplace"
+import { useMarketplaceStore } from "@/store/marketplace"
 const localWalletStore = walletStore()
 const marketplaceList = useMarketplaceStore()
 import {createModal} from "@/utils/model.util";
@@ -67,6 +65,8 @@ const buyDataArr = ref([])
 
 // 确认购买弹窗
 const buyNft = async (val) => {
+  console.log(val)
+  return
   buyDataArr.value = []
   buyDataArr.value.push(val)
   const buyResult = await createModal(BuyDialog, {
@@ -103,7 +103,6 @@ const toDetail = () => {
 
 // 添加购物车
 const addCart = async (val) => {
-  console.log('-',val.nft)
   const data = {
     net_id: import.meta.env.VUE_APP_NET_ID,
     tokens: [

src/store/collectibles.js

@@ -1,28 +0,0 @@
-import { defineStore } from 'pinia';
-import { ref } from 'vue';
-// import { apiMarketplaceState } from "@/utils/marketplace"
-
-export const useCollectiblesStore = defineStore('collectibles', () => {
-  const overview = ref('')
-  const status = ref('0')
-  const updateOverviewStatus = (_connected) => {
-    overview.value = _connected;
-  }
-  const updateStatusStatus = (_connected) => {
-    status.value = _connected;
-  }
-
-  // async function getMarketPlaceData() {
-  //   const result = async apiMarketplaceState(13473,'0x8c10Ae04BF525734eaC00d5F7c062567461c207F')
-  //   console.log(result)
-  // }
-
-  return {
-    overview, updateOverviewStatus,
-    status, updateStatusStatus,
-  }
-},
-  {
-    persist: true,
-  }
-)

src/store/detail.js

@@ -1,23 +0,0 @@
-import { defineStore } from 'pinia';
-import { ref } from 'vue';
-// import { apiMarketplaceState } from "@/utils/marketplace"
-
-export const useDetailStore = defineStore('detail', () => {
-  const nftData = ref()
-  const updateDetailStatus = (_connected) => {
-    nftData.value = _connected;
-  }
-
-  // async function getMarketPlaceData() {
-  //   const result = async apiMarketplaceState(13473,'0x8c10Ae04BF525734eaC00d5F7c062567461c207F')
-  //   console.log(result)
-  // }
-
-  return {
-    nftData, updateDetailStatus,
-  }
-},
-  {
-    persist: true,
-  }
-)

src/store/hanging.js

@@ -1,28 +0,0 @@
-import { defineStore } from 'pinia';
-import { ref } from 'vue';
-// import { apiMarketplaceState } from "@/utils/marketplace"
-
-export const useHangingStore = defineStore('hanging', () => {
-  const overview = ref('')
-  const status = ref([])
-  const updateOverviewStatus = (_connected) => {
-    overview.value = _connected;
-  }
-  const updateStatusStatus = (_connected) => {
-    status.value = _connected;
-  }
-
-  // async function getMarketPlaceData() {
-  //   const result = async apiMarketplaceState(13473,'0x8c10Ae04BF525734eaC00d5F7c062567461c207F')
-  //   console.log(result)
-  // }
-
-  return {
-    overview, updateOverviewStatus,
-    status, updateStatusStatus,
-  }
-},
-  {
-    persist: true,
-  }
-)

src/store/trading.js

@@ -1,23 +0,0 @@
-import { defineStore } from 'pinia';
-import { ref } from 'vue';
-// import { apiMarketplaceState } from "@/utils/marketplace"
-
-export const useTradingStore = defineStore('trading', () => {
-  const overview = ref('')
-  const statusRadio = ref('0')
-  const updateOverviewStatus = (_connected) => {
-    overview.value = _connected;
-  }
-  const updateStatusRadioStatus = (_connected) => {
-    statusRadio.value = _connected;
-  }
-
-  return {
-    overview, updateOverviewStatus,
-    statusRadio, updateStatusRadioStatus,
-  }
-},
-  {
-    persist: true,
-  }
-)

src/views/DetailView.vue

@@ -40,7 +40,7 @@
             -->
             <div v-if="myAddress != detailData.nft.owner_address && detailData.event">
               <div class="buy" @click="buyNow">Buy Now</div>
-              <div class="add">
+              <div class="add" @click="addCart">
                 <span>Add to cart </span>
                 <div>
                   <img src="@/assets/img/marketplace/Add shopping cart.png" alt="">
@@ -141,8 +141,10 @@
 </template>
 
 <script setup>
-import { ref, toRaw, onMounted } from "vue"
+import { ref, toRaw, onMounted , inject} from "vue"
+const message = inject('$message')
 import { useRouter } from "vue-router";
+import BuyDialog from "@/components/Dialogs/buyDialog.vue"
 import ImgCard from "@/components/common/imgCard.vue"
 import StarTimer from "@/components/common/starTimer.vue"
 import SellDialog from "@/components/Dialogs/sellDialog.vue"
@@ -150,10 +152,13 @@ import { nftDetail, apiGetPrice } from "@/utils/marketplace"
 import {priceCalculated} from "@/configs/priceCalculate.js"
 import { BlockChain } from "@/components/chain/BlockChain"
 import {walletStore} from "@/store/wallet";
+import { useMarketplaceStore } from "@/store/marketplace"
 import LazyLoadImg from "@/components/lazyloadimg"
 import {formatPrice} from "@/components/chain/utils"
+import {createModal} from "@/utils/model.util";
 const router = useRouter();
 const localWalletStore = walletStore()
+const marketplaceList = useMarketplaceStore()
 const props = defineProps({
   address: String,
   tokenid: String
@@ -167,7 +172,23 @@ const usd = ref('')
 const price = ref('')
 
 // 购买
+const buyDataArr = ref([])
 const buyNow = async () => {
+  // console.log(toRaw(detailData.value))
+  // return
+  debugger
+  buyDataArr.value = []
+  buyDataArr.value.push(detailData.value)
+  const buyResult = await createModal(BuyDialog, {
+    buyDataArr: buyDataArr.value,
+  }).show()
+  if(buyResult.errcode) {
+    console.log('buy fail')
+    message.success('buy fail')
+    return 
+  }
+  return
+  // ------------------------
   let tokenIds = [detailData.value.event.data.id]
   try {
     await new BlockChain().market.batchBuy(tokenIds)
@@ -177,6 +198,34 @@ const buyNow = async () => {
   }
 }
 
+// 添加购物车
+const addCart = async () => {
+  const data = {
+    net_id: import.meta.env.VUE_APP_NET_ID,
+    tokens: [
+      {
+        token_id: detailData.value.nft.token_id,
+        contract_address: detailData.value.nft.contract_address,
+      }
+    ]
+  }
+  try {
+    const { errcode, errmsg } = await marketplaceList.addCartListState(data)
+    console.log(errcode, errmsg)
+    if(errcode == 0) {
+      message.success('success! Add from cart')
+      marketplaceList.getCartList = await marketplaceList.getCartListState()
+    }
+  } catch (e) {
+    message.error('fail! Add from cart')
+  }
+}
+
+// 移除购物车
+const clearCart = async () => {
+  // TODO:
+}
+
 const lockToGame = async() => {
   try {
     await new BlockChain().locker.lock(detailData.value.nft.contract_address, [detailData.value.nft.token_id])
@@ -188,6 +237,8 @@ const lockToGame = async() => {
 
 }
 
+
+// 售卖弹窗
 const floorPrice = ref('0')
 const sellDialogVisible = ref(false)
 const beginSell = async() => {
@@ -212,6 +263,8 @@ const beginSell = async() => {
 
 }
 
+
+// 取消售卖
 const cancelSell = async() => {
   console.log('cancelSell', detailData.value.event)