fix

src/components/market/FilterLeft.vue

@@ -3,8 +3,12 @@
     <Herofilter
       v-if="nftType - 1 == 0"
       @searchClear="searchClear"
+      @heroLevelChange="heroLevelChange"
       @handSelect="handSelect"
       :value="value"
+      :jobList="jobList"
+      @jobStatus="jobStatus"
+      :selectValue="selectValue"
       :options="options"
       :isType="isType"
     ></Herofilter>
@@ -35,7 +39,7 @@ import Weaponfilter from "@/components/market/filters/Weaponfilter";
 import Chipfilter from "@/components/market/filters/Chipfilter";
 import Piecefilter from "@/components/market/filters/Piecefilter";
 export default {
-  props: ["nftType", "value", "isType",'options'],
+  props: ["nftType", "value", "isType", "options", "selectValue", "jobList"],
   components: {
     Herofilter,
     Chipfilter,
@@ -50,9 +54,17 @@ export default {
     sliderChange(value) {
       this.$emit("sliderChange", value);
     },
-    handSelect(){
+    handSelect(value) {
-       this.$emit("handSelect", value);
+      console.log(value, "2");
-    }
+      this.$emit("handSelect", value);
+    },
+    jobStatus(item) {
+      this.$emit("jobStatus", item);
+    },
+    heroLevelChange(levelSlider) {
+      console.log(levelSlider, "levelSlider2");
+      this.$emit("heroLevelChange", levelSlider);
+    },
   },
 };
 </script>

src/components/market/Herodialog.vue

@@ -87,7 +87,7 @@
                       alt=""
                     />
                   </div>
-                  <div>TTACK</div>
+                  <div>ATTACK</div>
                 </div>
                 <div>
                   {{

src/components/market/Piecedialog.vue

@@ -32,10 +32,10 @@
               </div>
               <div class="level">
                 <div>
-                  <span class="level-name">Owner：</span>
+                  <span class="level-name">Amount：</span>
                   <!-- <span class="level-number">04</span> -->
                 </div>
-                <div class="piece-number">9999.99</div>
+                <div class="piece-number">{{ piece.balance }}</div>
               </div>
             </div>
             <div class="owner">

src/components/market/PropertySelect.vue

@@ -23,12 +23,25 @@
 
 <script>
 export default {
-  props: ["value", "options"],
+  props: ["selectValue", "options"],
+  data() {
+    return {
+      value: null,
+    };
+  },
   methods: {
     handSelect(value) {
       this.$emit("handSelect", value);
     },
   },
+  watch: {
+    selectValue: {
+      handler(val) {
+        this.value = val;
+      },
+      immediate: true,
+    },
+  },
 };
 </script>
 <style lang="scss" scoped>

src/components/market/filters/Herofilter.vue

@@ -4,8 +4,8 @@
       <div class="filter"></div>
       <SearchInput :hero="hero" @searchClear="searchClear" />
       <PropertySelect
-        :value="value"
         :options="options"
+        :selectValue="selectValue"
         @handSelect="handSelect"
       />
       <div class="job-content">
@@ -37,7 +37,7 @@
             <div>
               <Slider
                 :max="15"
-                @onChange="onChange"
+                @onChange="heroLevelChange"
                 :min="0"
                 :value="value"
               ></Slider>
@@ -95,7 +95,7 @@ import SearchInput from "../SearchInput";
 import PriceFilter from "../PriceFilter.vue";
 import PropertySelect from "../PropertySelect.vue";
 export default {
-  props: ["value", "isType",'options'],
+  props: ["value", "isType", "options", "selectValue",'jobList'],
   components: {
     Slider,
     PriceFilter,
@@ -107,52 +107,14 @@ export default {
       hero: "",
       priceMin: "",
       priceMax: "",
-      jobList: [
-        {
-          id: 0,
-          jobname: "raider",
-          jobType: true,
-          jobImg: require("../../../assets/market/filter-left/raider.png"),
-          disImg: require("../../../assets/market/filter-left/raider-disabled.png"),
-        },
-        {
-          id: 1,
-          jobname: "guardian",
-          jobType: true,
-          jobImg: require("../../../assets/market/filter-left/guardian.png"),
-          disImg: require("../../../assets/market/filter-left/guardian-disabled.png"),
-        },
-        {
-          id: 2,
-          jobname: "machinist",
-          jobType: true,
-          jobImg: require("../../../assets/market/filter-left/machinist.png"),
-          disImg: require("../../../assets/market/filter-left/machinist-disabled.png"),
-        },
-        {
-          id: 3,
-          jobname: "medic",
-          jobType: true,
-          jobImg: require("../../../assets/market/filter-left/medic.png"),
-          disImg: require("../../../assets/market/filter-left/medic-disabled.png"),
-        },
-      ],
-     
     };
   },
 
   methods: {
-    jobStatus(item) {
+    jobStatus(item){
-      this.jobList[item.id].jobType = !this.jobList[item.id].jobType;
+      this.$emit("jobStatus", item);
-
-      let list = this.jobList.filter((item) => {
-        return item.jobType == true;
-      });
-      let arry = list.map((item) => {
-        return item.id;
-      });
-      console.log(arry, "list");
     },
+  
     searchClear(hero) {
       // this.hero = "";
     },
@@ -164,11 +126,12 @@ export default {
       this.priceMax = "";
     },
     handSelect(value) {
-      console.log(value);
+      console.log(value, "1");
       this.$emit("handSelect", value);
     },
-    onChange(newVal) {
+    heroLevelChange(levelSlider) {
-      console.log(newVal, "scale");
+       console.log(levelSlider, "levelSlider");
+       this.$emit("heroLevelChange", levelSlider);
     },
     levelonChange(newVal2) {
       console.log(newVal2, "scale2");
@@ -251,7 +214,7 @@ $item-size: 20px;
       justify-content: space-between;
     }
   }
-  .filterbottom{
+  .filterbottom {
     margin-bottom: 28px;
   }
 }

src/components/market/nft/Chip.vue

@@ -14,6 +14,7 @@
           :src="require('@/assets/market/chip/chip_' + '01' + '.png')"
           alt=""
         />
+       
       </div>
       <div class="level-content">
         <div class="level-lv">

src/components/market/nft/PieceNft.vue

@@ -20,6 +20,7 @@
             :src="require('@/assets/market/piece/piece_' + '01' + '.png')"
             alt=""
           />
+          <span class="amount">Amount：{{ piece.balance }}</span>
         </div>
         <div class="level-content">
           <!-- <div class="level-lv">
@@ -279,11 +280,18 @@ export default {
   width: 216px;
   height: 182px;
   display: flex;
+  position: relative;
   justify-content: center;
   align-items: center;
   line-height: 182px;
   background: url("../../../assets/market/piece/bg-there.png") no-repeat;
   background-size: 100% 100%;
+  .amount {
+    position: absolute;
+    right: 11px;
+    bottom: -78px;
+    
+  }
 }
 .tree-guard {
   font-size: 21px;

src/views/desktop/MyNft.vue

@@ -8,9 +8,13 @@
           @searchClear="searchClear"
           @handSelect="handSelect"
           @sliderChange="sliderChange"
+          @heroLevelChange="heroLevelChange"
           :nft-type="nftType"
           :isType="currentTab"
           :value="value"
+          :jobList="jobList"
+          @jobStatus="jobStatus"
+          :selectValue="selectValue"
           :options="options"
         ></FilterLeft>
         <div class="right-part">
@@ -118,45 +122,77 @@ export default class MyNft extends Vue {
   nftType = 1;
   nftState = 0;
   value = 7;
+  selectValue = "all";
   showOrderStatus = false;
   private filters = ["All Items", "Normal", "Selling", "Renting"];
   private options = [
     {
-      value: "选项1",
+      value: null,
       label: "All",
     },
     {
-      value: "选项2",
+      value: "Hill",
       label: "Hill",
     },
     {
-      value: "选项3",
+      value: "Highest",
       label: "Highest",
     },
     {
-      value: "选项4",
+      value: "Yamato",
       label: "Yamato",
     },
     {
-      value: "选项5",
+      value: "Miffy",
       label: "Miffy",
     },
     {
-      value: "选项6",
+      value: "Canoe",
       label: "Canoe",
     },
     {
-      value: "选项7",
+      value: "Mariana",
       label: "Mariana",
     },
     {
-      value: "选项8",
+      value: "Lazer",
       label: "Lazer",
     },
   ];
+  jobList = [
+    {
+      id: 0,
+      jobname: "raider",
+      jobType: true,
+      jobImg: require("../../assets/market/filter-left/raider.png"),
+      disImg: require("../../assets/market/filter-left/raider-disabled.png"),
+    },
+    {
+      id: 1,
+      jobname: "guardian",
+      jobType: true,
+      jobImg: require("../../assets/market/filter-left/guardian.png"),
+      disImg: require("../../assets/market/filter-left/guardian-disabled.png"),
+    },
+    {
+      id: 2,
+      jobname: "machinist",
+      jobType: true,
+      jobImg: require("../../assets/market/filter-left/machinist.png"),
+      disImg: require("../../assets/market/filter-left/machinist-disabled.png"),
+    },
+    {
+      id: 3,
+      jobname: "medic",
+      jobType: true,
+      jobImg: require("../../assets/market/filter-left/medic.png"),
+      disImg: require("../../assets/market/filter-left/medic-disabled.png"),
+    },
+  ];
   private totalPage = 1;
   private currentPage = 1;
   private searchFilters: any = null;
+  private jobFilters: any = "1|2|3|4";
   private orderAsc: any = 0;
   private lvFilter: any = 1;
   private orderMethod: any = 0;
@@ -183,9 +219,31 @@ export default class MyNft extends Vue {
     console.log(hero, "herio2020");
   }
   handSelect(value: string) {
-    console.log(value, "herio2022");
+    this.searchFilters = value;
+    this.getHeroNftList(this.currentPage);
   }
+  jobStatus(item: any) {
+    this.jobList[item.id].jobType = !this.jobList[item.id].jobType;
 
+    let list = this.jobList.filter((item) => {
+      return item.jobType == true;
+    });
+    let arry = list.map((item) => {
+      return item.id;
+    });
+    console.log(arry.join("|"), "list");
+    let newArray = arry.map(function (index) {
+      return index + 1;
+    });
+    this.jobFilters = newArray.join("|");
+    this.getHeroNftList(this.currentPage);
+  }
+  heroLevelChange(levelSlider: any) {
+  
+    this.lvFilter = levelSlider;
+    this.getHeroNftList(this.currentPage);
+    // this.$emit("heroLevelChange", levelSlider);
+  }
   async getHeroNftList(pageNo: number) {
     if (!AppModule.accountId) {
       return;
@@ -194,7 +252,7 @@ export default class MyNft extends Vue {
       page: pageNo,
       type: this.nftType == 4 ? 5 : this.nftType,
       account: "0x9a4d9dd2bfcad659975f0f5a480625c7929e9385",
-      job_filters: "1|2|3|4",
+      job_filters: this.jobFilters,
       search_filters: this.searchFilters,
       lv_filter: this.lvFilter,
       order_asc: this.orderAsc,