fix

src/components/mobile/main/ChipFilter.vue

@@ -68,9 +68,9 @@ export default {
     return {
       hero: "",
       priceMin: "",
-      value2: 7,
+      value2: 0,
-      value3: 7,
+      value3: 0,
-      value: 7,
+      value: 0,
       priceMax: "",
     };
   },

src/components/mobile/main/FilterTop.vue

@@ -19,20 +19,32 @@
         :jobList="jobList"
         :options="options"
         @jobStatus="jobStatus"
+        @handHeroSelect="handHeroSelect"
+        @heroLevelChange="heroLevelChange"
+        @heroQuilityChange="heroQuilityChange"
+        @heroDurabilityChange="heroDurabilityChange"
+        @handPriceFilter="handPriceFilter"
+        @handPriceMax="handPriceMax"
+        @handPriceMin="handPriceMin"
+        :priceMin="priceMin"
+        :priceMax="priceMax"
         v-if="nftType == 1 && nftNumber"
         class="filter-modal"
       ></HeroFilter>
       <WeaponFilter
+        :weaponOptions="weaponOptions"
         v-else-if="nftType == 2 && nftNumber"
         class="filter-modal"
       ></WeaponFilter>
       <ChipFilter
+        :chipOptions="chipOptions"
         v-else-if="nftType == 3 && nftNumber"
         class="filter-modal"
         :chipList="chipList"
       ></ChipFilter>
       <PieceFilter
         :pieceList="pieceList"
+        :pieceOptions="pieceOptions"
         v-else-if="nftType == 4 && nftNumber"
         class="filter-modal"
       ></PieceFilter>
@@ -46,7 +58,18 @@ import WeaponFilter from "@/components/mobile/main/WeaponFilter.vue";
 import ChipFilter from "@/components/mobile/main/ChipFilter.vue";
 import PieceFilter from "@/components/mobile/main/PieceFilter.vue";
 export default {
-  props: ["nftType", "jobList", "chipList", "pieceList", "options"],
+  props: [
+    "nftType",
+    "jobList",
+    "chipList",
+    "pieceList",
+    "options",
+    "priceMin",
+    "priceMax",
+    'weaponOptions',
+    'chipOptions',
+    'pieceOptions'
+  ],
   components: {
     HeroFilter,
     WeaponFilter,
@@ -77,6 +100,24 @@ export default {
     handHeroSelect(value) {
       this.$emit("handHeroSelect", value);
     },
+    heroLevelChange(value) {
+      this.$emit("heroLevelChange", value);
+    },
+    heroQuilityChange(value) {
+      this.$emit("heroQuilityChange", value);
+    },
+    heroDurabilityChange(value) {
+      this.$emit("heroDurabilityChange", value);
+    },
+    handPriceFilter() {
+      this.$emit("handPriceFilter");
+    },
+    handPriceMax(value) {
+      this.$emit("handPriceMax", value);
+    },
+    handPriceMin(value) {
+      this.$emit("handPriceMin", value);
+    },
   },
 };
 </script>

src/components/mobile/main/Herofilter.vue

@@ -22,7 +22,12 @@
         <div class="btn-bg">Quility</div>
         <div class="level-slider">
           <div class="slider">
-            <Slider :min="0" :max="15" v-model="value"></Slider>
+            <Slider
+              :min="0"
+              :max="15"
+              v-model="Quility"
+              @change="heroQuilityChange"
+            ></Slider>
           </div>
           <div class="slider-number">
             <div>0</div>
@@ -34,11 +39,16 @@
         <div class="btn-bg">Level</div>
         <div class="level-slider">
           <div class="slider">
-            <Slider :min="0" :max="15" v-model="value2"></Slider>
+            <Slider
+              :min="0"
+              :max="20"
+              v-model="Level"
+              @change="heroLevelChange"
+            ></Slider>
           </div>
           <div class="slider-number">
             <div>0</div>
-            <div>15</div>
+            <div>20</div>
           </div>
         </div>
       </div>
@@ -46,16 +56,29 @@
         <div class="btn-bg">durability</div>
         <div class="level-slider">
           <div class="slider">
-            <Slider :min="0" :max="15" v-model="value3"></Slider>
+            <Slider
+              :min="0"
+              :max="100"
+              v-model="durability"
+              @change="heroDurabilityChange"
+            ></Slider>
           </div>
           <div class="slider-number">
             <div>0</div>
-            <div>15</div>
+            <div>100%</div>
           </div>
         </div>
       </div>
     </div>
-    <div class="price">
+    <PriceFilter
+      v-show="isType !== 'mynft'"
+      @handPriceFilter="handPriceFilter"
+      @handPriceMax="handPriceMax"
+      @handPriceMin="handPriceMin"
+      :priceMin="priceMin"
+      :priceMax="priceMax"
+    />
+    <!-- <div class="price">
       <div class="price-btn" @click="priceFilter">Price</div>
       <div class="price-bottom">
         <div class="price-min">
@@ -74,27 +97,27 @@
           ></el-input>
         </div>
       </div>
-    </div>
+    </div> -->
   </div>
 </template>
 
 <script>
 import Slider from "./Slider.vue";
+import PriceFilter from "./PriceFilter.vue";
 import PropertySelect from "./PropertySelect.vue";
 export default {
-  props: ["jobList",'options'],
+  props: ["jobList", "options", "isType", "priceMin", "priceMax"],
   components: {
     Slider,
+    PriceFilter,
     PropertySelect,
   },
   data() {
     return {
       hero: "",
-      priceMin: "",
+      Level: 0,
-      value2: 7,
+      durability: 0,
-      value3: 7,
+      Quility: 0,
-      value: 7,
-      priceMax: "",
     };
   },
   mounted() {
@@ -116,7 +139,26 @@ export default {
       this.$emit("hande");
     },
     handHeroSelect(value) {
-      this.$emit("handHeroSelect",value);
+      this.$emit("handHeroSelect", value);
+    },
+
+    heroLevelChange(value) {
+      this.$emit("heroLevelChange", value);
+    },
+    heroQuilityChange(value) {
+      this.$emit("heroQuilityChange", value);
+    },
+    heroDurabilityChange(value) {
+      this.$emit("heroDurabilityChange", value);
+    },
+    handPriceFilter() {
+      this.$emit("handPriceFilter");
+    },
+    handPriceMax(value) {
+      this.$emit("handPriceMax", value);
+    },
+    handPriceMin(value) {
+      this.$emit("handPriceMin", value);
     },
   },
 };

src/components/mobile/main/PriceFilter.vue

@@ -0,0 +1,129 @@
+<template>
+  <div>
+    <div class="price">
+      <div class="price-btn" @click="handPriceFilter">Price</div>
+      <div class="price-bottom">
+        <div class="price-min">
+          <el-input
+            v-model="priceMinValue"
+            :maxlength="13"
+            placeholder="Min"
+          ></el-input>
+        </div>
+        <div class="boder"></div>
+        <div class="price-max">
+          <el-input
+            v-model="priceMaxValue"
+            :maxlength="13"
+            placeholder="Max"
+          ></el-input>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["priceMin", "priceMax"],
+  data() {
+    return {};
+  },
+  computed: {
+    priceMinValue: {
+      get() {
+        return this.priceMin;
+      },
+      set(value) {
+        this.$emit("handPriceMin", value);
+      },
+    },
+    priceMaxValue: {
+      get() {
+        return this.priceMax;
+      },
+      set(value) {
+        this.$emit("handPriceMax", value);
+      },
+    },
+  },
+  methods: {
+    handPriceFilter() {
+      this.$emit("handPriceFilter");
+    }
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.price {
+  margin-top: 100px;
+  margin-left: 23px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  .price-btn {
+    width: 271px;
+    font-size: 24px;
+    font-weight: normal;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    cursor: pointer;
+    color: #ffffff;
+    height: 103px;
+    margin-bottom: 24px;
+    line-height: 103px;
+    background: url("../../../assets/market/filter-left/btn-bg.png") no-repeat;
+    background-size: contain;
+  }
+  .price-min {
+    width: 271px;
+    font-size: 24px;
+    font-weight: normal;
+    text-align: center;
+    color: #ffffff;
+    height: 60px;
+    background: url("../../../assets/market/filter-left/price-btn.png")
+      no-repeat;
+    background-size: 100% 100%;
+  }
+  .price-max {
+    width: 271px;
+    font-size: 24px;
+    font-weight: normal;
+    text-align: center;
+    color: #ffffff;
+    height: 60px;
+    background: url("../../../assets/market/filter-left/price-btn.png")
+      no-repeat;
+    background-size: 100% 100%;
+  }
+  .price-bottom {
+    display: flex;
+    width: 633px;
+    height: 73px;
+    justify-content: flex-start;
+    align-items: center;
+    ::v-deep .el-input__inner {
+      background: transparent;
+      height: 60px;
+      color: #fff;
+      border: none;
+    }
+    ::v-deep .el-input__inner::placeholder {
+      color: #fff;
+      text-align: center;
+    }
+  }
+  .boder {
+    margin-top: 15px;
+    width: 45px;
+    margin-right: 11px;
+    margin-left: 11px;
+    background: #ffffff;
+    height: 2px;
+  }
+}
+</style>

src/components/mobile/main/Slider.vue

@@ -2,7 +2,7 @@
   <div class="my-slider">
     <div class="my-slider__tooltip" :style="style">
       <div class="my-slider__tooltip-wrapper">
-        {{ slider }}
+        {{ max == 100 ? slider + "%" : slider }}
       </div>
     </div>
     <el-slider

src/components/mobile/main/WeaponFilter.vue

@@ -2,9 +2,9 @@
   <div class="containers">
     <div class="job-content">
       <PropertySelect
-        :options="options"
+        :options="weaponOptions"
         :selectValue="selectValue"
-        @handSelect="handHeroSelect"
+        @handSelect="handWeaponSelect"
       ></PropertySelect>
     </div>
     <div class="level-filter">
@@ -72,6 +72,7 @@
 import Slider from "./Slider.vue";
 import PropertySelect from "./PropertySelect.vue";
 export default {
+  props:['weaponOptions'],
   components: {
     Slider,
     PropertySelect
@@ -84,36 +85,7 @@ export default {
       value3: 7,
       value: 7,
       priceMax: "",
-      jobList: [
+     
-        {
-          id: 0,
-          jobname: "raider",
-          jobType: false,
-          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"),
-        },
-      ],
     };
   },
   mounted() {
@@ -134,8 +106,8 @@ export default {
     handclick() {
       this.$emit("hande");
     },
-    handHeroSelect() {
+    handWeaponSelect(value) {
-      this.$emit("handHeroSelect");
+      this.$emit("handWeaponSelect",value);
     },
   },
 };

src/views/mobile/Market.vue

@@ -6,6 +6,17 @@
       @handSearch="handSearch"
       @jobStatus="jobStatus"
       @handHeroSelect="handHeroSelect"
+      @heroLevelChange="heroLevelChange"
+      @heroQuilityChange="heroQuilityChange"
+      @heroDurabilityChange="heroDurabilityChange"
+      @handPriceFilter="handPriceFilter"
+      @handPriceMax="handPriceMax"
+      @handPriceMin="handPriceMin"
+      :priceMin="priceMin"
+      :priceMax="priceMax"
+      :weaponOptions="weaponOptions"
+      :pieceOptions="pieceOptions"
+      :chipOptions="chipOptions"
       :chipList="chipList"
       :pieceList="pieceList"
       :jobList="jobList"
@@ -60,6 +71,8 @@ export default {
       nftList: [],
       debounce: null,
       priceFilter: "0|10000",
+      priceMin: 0,
+      priceMax: 10000,
       isFiters: false,
       totalPage: 1,
       pageSize: 10,
@@ -154,6 +167,189 @@ export default {
           label: "Kurosawa",
         },
       ],
+      weaponOptions: [
+        {
+          value: null,
+          label: "All",
+        },
+        {
+          value: "Submachine",
+          label: "Submachine",
+        },
+        {
+          value: "Shotgun",
+          label: "Shotgun",
+        },
+
+        {
+          value: "Sniper",
+          label: "Sniper",
+        },
+
+        {
+          value: "Bazooka",
+          label: "Bazooka",
+        },
+
+        {
+          value: "Laser",
+          label: "Laser",
+        },
+        {
+          value: "Freeze",
+          label: "Freeze",
+        },
+        {
+          value: "Flame",
+          label: "Flame",
+        },
+      ],
+      chipOptions: [
+        {
+          value: null,
+          label: "All",
+        },
+        {
+          value: "Life Source(H)",
+          label: "Life Source(H)",
+        },
+        {
+          value: "Brutal force(H)",
+          label: "Brutal force(H)",
+        },
+
+        {
+          value: "Tree gurad(H)",
+          label: "Tree gurad(H)",
+        },
+
+        {
+          value: "Sniper eye(H)",
+          label: "Sniper eye(H)",
+        },
+
+        {
+          value: "Sniper heart(H)",
+          label: "Sniper heart(H)",
+        },
+        {
+          value: "Limbo dodge(H)",
+          label: "Limbo dodge(H)",
+        },
+        {
+          value: "Limbo pace(H)",
+          label: "Limbo pace(H)",
+        },
+        {
+          value: "Level Green vibrant(H)",
+          label: "Level Green vibrant(H)",
+        },
+        {
+          value: "Price Brutal force(w)",
+          label: "Price Brutal force(w)",
+        },
+        {
+          value: "Sniper eye(W)",
+          label: "Sniper eye(W)",
+        },
+        {
+          value: "Sniper heart(W)",
+          label: "Sniper heart(W)",
+        },
+        {
+          value: "Blood sucker(w)",
+          label: "Blood sucker(w)",
+        },
+        {
+          value: "Graceful draw(w)",
+          label: "Graceful draw(w)",
+        },
+        {
+          value: "Bullet speed(W)",
+          label: "Bullet speed(W)",
+        },
+      ],
+      pieceOptions: [
+        {
+          value: null,
+          label: "All",
+        },
+        {
+          value: "Testimonial",
+          label: "Testimonial",
+        },
+        {
+          value: "Shoulder",
+          label: "Shoulder",
+        },
+
+        {
+          value: "Left Arm",
+          label: "Left Arm",
+        },
+
+        {
+          value: "Abdomen",
+          label: "Abdomen",
+        },
+
+        {
+          value: "Left Leg",
+          label: "Left Leg",
+        },
+        {
+          value: "Weapon Head",
+          label: "Weapon Head",
+        },
+        {
+          value: "Chest",
+          label: "Chest",
+        },
+        {
+          value: "Right Arm",
+          label: "Right Arm",
+        },
+        {
+          value: "Right Leg",
+          label: "Right Leg",
+        },
+        {
+          value: "Blueprint",
+          label: "Blueprint",
+        },
+        {
+          value: "Sight",
+          label: "Sight",
+        },
+        {
+          value: "Stock",
+          label: "Stock",
+        },
+        {
+          value: "Trigger",
+          label: "Trigger",
+        },
+        {
+          value: "Ammo",
+          label: "Ammo",
+        },
+        {
+          value: "Bolt",
+          label: "Bolt",
+        },
+        {
+          value: "Barrel",
+          label: "Barrel",
+        },
+        {
+          value: "Grip",
+          label: "Grip",
+        },
+        {
+          value: "Clip",
+          label: "Clip",
+        },
+      ],
       jobList: [
         {
           id: 0,
@@ -275,6 +471,30 @@ export default {
       this.searchFilters = value;
       this.getHeroNftList();
     },
+    heroLevelChange(value) {
+      console.log(value, "value");
+      this.lvFilter = value;
+      this.getHeroNftList();
+    },
+    heroQuilityChange(value) {
+      this.qualityFilter = value;
+      this.getHeroNftList();
+    },
+    heroDurabilityChange(value) {
+      console.log(value, "heroDurabilityChange");
+      this.durabilityFilter = value;
+      this.getHeroNftList();
+    },
+    handPriceMax(value) {
+      this.priceMax = value;
+    },
+    handPriceMin(value) {
+      this.priceMin = value;
+    },
+    handPriceFilter() {
+      this.priceFilter = this.priceMin + "|" + this.priceMax;
+      this.getHeroNftList();
+    },
     async getHeroNftList(pageNo) {
       if (!AppModule.accountId) {
         return;