修改页面

src/components/Dialogs/buyDialog.vue

@@ -72,8 +72,6 @@ const props = defineProps({
   close: Function,
 });
 
-console.log(props.buyDataArr);
-
 const totalPrice = computed(() => {
   let total = 0n;
   props.buyDataArr.forEach((item) => {
@@ -90,12 +88,11 @@ const handleOk = (e) => {
 const buyConfirm = async () => {
   const lists = toRaw(props.buyDataArr);
   const ids = lists.map((item) => item.event.data.id);
-  // console.log(lists, ids)
-  // return
   const bc = new BlockChain()
   try {
-    await bc.market.batchBuy(ids)
+    let res = await bc.market.batchBuy(ids)
-    console.log('buy success ')
+
+    console.log('buy success ',res,ids)
     hideModal({errcode: 0});
   } catch (err) {
     console.log("buy fail", err.message);

src/components/common/searchView/Price.vue

@@ -11,24 +11,21 @@
   </div>
 </template>
 <script setup>
-import { ref, watch,  } from "vue";
+import { ref, watch, defineEmits } from "vue";
 import { useMarketplaceStore } from "@/store/marketplace"
 const marketplaceList = useMarketplaceStore()
+const emit = defineEmits(['clickPriceChild'])
 
-const handleChange = (value) => {
-  // ToDo
-  optionValue.value = value
-  console.log(`selected ${optionValue.value} ${value}`);
-};
 const minPriceValue = ref()
 const maxPriceValue = ref()
-const priceApply = (e) => {
+const priceApply = () => {
   marketplaceList.minPrice = minPriceValue.value
   marketplaceList.maxPrice = maxPriceValue.value
 }
 watch(marketplaceList, () => {
   minPriceValue.value = marketplaceList.minPrice
   maxPriceValue.value = marketplaceList.maxPrice
+  emit('clickPriceChild',marketplaceList.minPrice,marketplaceList.maxPrice)
 });
 </script>
 

src/components/common/searchView/gold.vue

@@ -17,6 +17,7 @@ import { ref, reactive } from "vue";
 import { SettingOutlined } from "@ant-design/icons-vue";
 import { useMarketplaceStore } from "@/store/marketplace"
 const marketplaceList = useMarketplaceStore()
+const emit = defineEmits(['clickGoldChild'])
   const goldList = [
   { label: "Gold Card", value: "10017" },
   { label: "Black Gold Card", value: "10018" },
@@ -33,6 +34,7 @@ const handleClick = (event) => {
 const onChangeValue = (e) => {
   // ToDo: 筛选
   marketplaceList.gold = e
+  emit('clickGoldChild', e)
 };
 </script>
 

src/components/common/searchView/hero.vue

@@ -51,7 +51,6 @@ const onChangeValue = (e) => {
   // ToDo: 筛选
   state.value = e
   // marketplaceList.hero = e
-  console.log(e,state.value)
   emit('clickHeroChild',state.value)
 };
 </script>

src/components/common/searchView/rank.vue

@@ -12,13 +12,15 @@
 import { ref, reactive } from "vue";
 import { SettingOutlined } from "@ant-design/icons-vue";
 import { useMarketplaceStore } from "@/store/marketplace"
+// import { emit } from "process";
+const emit = defineEmits(['clickHeroChild'])
 const marketplaceList = useMarketplaceStore()
 const heroList = [
-  { label: "Tier1", value: "Tier1" },
+  { label: "Tier1", value: "0" },
-  { label: "Tier2", value: "Tier2" },
+  { label: "Tier2", value: "1" },
-  { label: "Tier3", value: "Tier3" },
+  { label: "Tier3", value: "2" },
-  { label: "Tier4", value: "Tier4" },
+  { label: "Tier4", value: "3" },
-  { label: "Tier5", value: "Tier5" },
+  { label: "Tier5", value: "4" },
 ];
 const state = reactive({
   value: [],
@@ -26,6 +28,7 @@ const state = reactive({
 const expandIconPosition = ref("end");
 const onChange = (e) => {
   marketplaceList.rank = e
+  emit('clickRankChild',e)
 }
 
 </script>

src/components/marketplace/mktContent.vue

@@ -3,11 +3,11 @@
     <div class="mkt-content-left">
       <OverView :overviewValue="marketplaceList.overview" @clickOverviewChild="overviewChild" />
       <Sort />
-      <Price />
+      <Price @clickPriceChild="priceChild" />
       <h2>Type</h2>
       <Hero :heroValue="marketplaceList.hero" @clickHeroChild="heroChild" />
-      <Rank />
+      <Rank @clickRankChild="rankChild" />
-      <Gold />
+      <Gold @clickGoldChild="goldChild" />
     </div>
     <div class="mkt-content-right">
       <div class="mkt-content-right-header">
@@ -44,7 +44,7 @@
           <li v-if="marketplaceList.rank.length != undefined && marketplaceList.rank.length > 0">
             <span v-if="marketplaceList.rank.length != undefined && marketplaceList.rank.length > 0">Tier: </span>
             <span v-for="item in marketplaceList.rank" :key="item">
-              {{ item }}
+              {{ searchName(item) }}
               <span v-if="marketplaceList.rank.length != index+1">/</span> 
             </span>
             <span v-if="marketplaceList.rank != undefined && marketplaceList.rank.length > 0" @click="clearRankAll">×</span>
@@ -73,7 +73,7 @@
 </template>
 
 <script setup>
-import { ref, reactive, onMounted, onUnmounted, getCurrentInstance } from "vue";
+import { ref, reactive, toRaw, onMounted, onUnmounted, getCurrentInstance } from "vue";
 const { proxy } = getCurrentInstance();
 import OverView from "@/components/common/searchView/Overview.vue"
 import Sort from "@/components/common/searchView/Sort.vue"
@@ -88,46 +88,22 @@ import {apiMarketplaceState} from "@/utils/marketplace.js"
 import { useMarketplaceStore } from "@/store/marketplace"
 const marketplaceList = useMarketplaceStore()
 
+
+
 const loadingDialogVisible = ref(false)
 const nftList = ref([])
-// ref([
-//   {
-//     name: '1111',
-//     id: '1111',
-//   },
-//   {
-//     name: '2222',
-//     id: '2222',
-//   },
-//   {
-//     name: '3333',
-//     id: '3333',
-//   },
-//   {
-//     name: '4444',
-//     id: '4444',
-//   },
-//   {
-//     name: '5555',
-//     id: '5555',
-//   },
-//   {
-//     name: '6666',
-//     id: '6666',
-//   },
-//   {
-//     name: '7777',
-//     id: '7777',
-//   }
-// ])
 
 const filterList = ref([])
 
 const clearOverviewAll = () => {
   marketplaceList.overview = ''
+  toRaw(marketplaceList.getParamsData).search.name = ''
+  getHeroData()
 }
 const overviewChild = (val) => {
   marketplaceList.overview = val
+  toRaw(marketplaceList.getParamsData).search.name = val
+  getHeroData()
 }
 
 const clearSortAll = () => {
@@ -136,20 +112,47 @@ const clearSortAll = () => {
 const clearPriceAll = () => {
   marketplaceList.minPrice = ''
   marketplaceList.maxPrice = ''
+  toRaw(marketplaceList.getParamsData).filter.price_min = ''
+  toRaw(marketplaceList.getParamsData).filter.price_max = ''
+  getHeroData()
 }
+const priceChild = (minPrice, maxPrice) => {
+  toRaw(marketplaceList.getParamsData).filter.price_min = minPrice
+  toRaw(marketplaceList.getParamsData).filter.price_max = maxPrice
+  getHeroData()
+}
+
 const clearHeroAll = () => {
   marketplaceList.hero = []
+  toRaw(marketplaceList.getParamsData).filter.item_ids = [...marketplaceList.gold,...marketplaceList.hero]
+  getHeroData()
 }
 const heroChild = (val) => {
   marketplaceList.hero = val
+  toRaw(marketplaceList.getParamsData).filter.item_ids = [...marketplaceList.gold,...marketplaceList.hero]
+  getHeroData()
 }
 
-
 const clearRankAll = () => {
   marketplaceList.rank = []
+  toRaw(marketplaceList.getParamsData).filter.hero_ranks = []
+  getHeroData()
 }
+const rankChild = (val) => {
+  marketplaceList.rank = val
+  toRaw(marketplaceList.getParamsData).filter.hero_ranks = val
+  getHeroData()
+}
+
 const clearGoldAll = () => {
   marketplaceList.gold = []
+  toRaw(marketplaceList.getParamsData).filter.item_ids = [...marketplaceList.gold,...marketplaceList.hero]
+  getHeroData()
+}
+const goldChild = (val) => {
+  marketplaceList.gold = val
+  toRaw(marketplaceList.getParamsData).filter.item_ids = [...marketplaceList.gold,...marketplaceList.hero]
+  getHeroData()
 }
 
 const searchName = (id) => {
@@ -165,33 +168,12 @@ const renewNft = async() => {
 }
 
 const getHeroData = async () => {
-  let data = {
+  loadingDialogVisible.value = true;
-    page_size: 20, //TODO:: 根据实际情况修改该值
-    cursor: '',
-    search: {
-      name: '',
-    },
-    filter: {
-      price_min: '',
-      price_max: '',
-      item_ids: [],
-      hero_ranks: []
-    },
-    sort: {
-      fields: [
-        {
-          name: '',
-          type: 0,
-        }
-      ]
-    }
-  }
-  loadingDialogVisible.value = false;
   try {
-    let res = await marketplaceList.getMarketplaceState(data)
+    let res = await marketplaceList.getMarketplaceState(marketplaceList.getParamsData)
     nftList.value = res.rows
     console.log(res,'-----')
-  //   loadingDialogVisible.value = false;
+    loadingDialogVisible.value = false;
   } catch(e) {
     // console.log(e)
   //   loadingDialogVisible.value = false;

src/configs/item.json

@@ -1,4 +1,34 @@
 {
+  "0": {
+    "id": 0,
+    "name": "Tier1",
+    "type": 31,
+    "sub_type": 1
+  },
+  "1": {
+    "id": 1,
+    "name": "Tier2",
+    "type": 31,
+    "sub_type": 1
+  },
+  "2": {
+    "id": 2,
+    "name": "Tier3",
+    "type": 31,
+    "sub_type": 1
+  },
+  "3": {
+    "id": 3,
+    "name": "Tier4",
+    "type": 31,
+    "sub_type": 1
+  },
+  "4": {
+    "id": 4,
+    "name": "Tier5",
+    "type": 31,
+    "sub_type": 1
+  },
   "10017": {
     "id": 10017,
     "name": "Gold card",

src/store/marketplace.js

@@ -13,6 +13,29 @@ export const useMarketplaceStore = defineStore('marketplace', () => {
   const status = ref([])
   const getCartList = ref([])
   const currencyPrice = ref([])
+//TODO:: 根据实际情况修改该值
+const getParamsData = ref({
+  page_size: 20, // 每页大小
+  cursor: '', // 游标
+  search: {
+    name: '', // 名字查询
+  },
+  filter: {
+    price_min: '', // 最低价
+    price_max: '', // 最高价
+    item_ids: [], // 道具ID
+    hero_ranks: [] // 品阶
+  },
+  sort: {
+    fields: [
+      {
+        name: '', 
+        type: 0,
+      }
+    ]
+  }
+})
+
   const updateOverviewStatus = (_connected) => {
     overview.value = _connected;
   }
@@ -59,6 +82,7 @@ export const useMarketplaceStore = defineStore('marketplace', () => {
   }
 
   return {
+    getParamsData,
     overview, updateOverviewStatus,
     sort, updateSortStatus,
     minPrice, updateMinPriceStatus,
@@ -71,7 +95,7 @@ export const useMarketplaceStore = defineStore('marketplace', () => {
     getCartList, getCartListState,
     addCartListState,
     delCartListState,
-    currencyPrice,priceDatas
+    currencyPrice,priceDatas,
   }
 },
 {