fix

src/components/market/DefContent.vue

@@ -5,13 +5,7 @@
         <div>{{ chipArrid[chipsinfo[0].attr_id] }}</div>
         <div>+{{ chipList * 100 }}%</div>
       </div>
-      <!-- <div class="def-item">
+
-        <div>DEF PCT</div>
-        <div>+7.2%</div>
-      </div> -->
-      <!-- <div class="def-item" style="justify-content: center">
-        Unlocked at Lv.5
-      </div> -->
       <div class="def-item">LUCKY Unlocked at Lv.5</div>
     </div>
     <div class="def-content" v-else>
@@ -19,13 +13,7 @@
         <div>{{ chipArrid[chip.attr_id] }}</div>
         <div>+{{ (chip.val * 100).toFixed(2) }}%</div>
       </div>
-      <!-- <div class="def-item">
+    
-        <div>DEF PCT</div>
-        <div>+7.2%</div>
-      </div> -->
-      <!-- <div class="def-item" style="justify-content: center">
-        Unlocked at Lv.5
-      </div> -->
       <div class="def-item">LUCKY Unlocked at Lv.5</div>
     </div>
   </div>

src/components/market/Dundialog.vue

@@ -33,7 +33,7 @@
                   />
                 </div>
               </div>
-              <LeveStars :quality="data.detail.gun_lv"> </LeveStars>
+              <LeveStars :quality="data.detail.quality"> </LeveStars>
               <LuckyValue
                 :level="data.detail.gun_lv"
                 :lucky="data.detail.lucky"

src/components/market/LeveStars.vue

@@ -2,18 +2,8 @@
   <div>
     <div class="star">
       <div class="quality-img">
-        <div class="quality-levelList" v-if="quality > 0 && quality <= 5">
+        <div class="quality-levelList" >
-          <div class="item-Image" v-for="(item, i) in firstList" :key="i">
+          <div class="item-Image" v-for="(item, i) in starList" :key="i">
-            <div><img width="42px" :src="item.Image" alt="" /></div>
-          </div>
-        </div>
-        <div class="quality-levelList" v-else-if="quality > 5 && quality <= 10">
-          <div class="item-Image" v-for="(item, i) in secondList" :key="i">
-            <div><img width="42px" :src="item.Image" alt="" /></div>
-          </div>
-        </div>
-        <div class="quality-levelList" v-else>
-          <div class="item-Image" v-for="(item, i) in thirdList" :key="i">
             <div><img width="42px" :src="item.Image" alt="" /></div>
           </div>
         </div>
@@ -27,45 +17,45 @@ export default {
   name: "LevelStar",
   props: ["quality"],
   created() {
-  console.log(this.quality,'this.level');
+   
-  },
+    if (this.quality > 0 && this.quality <= 5) {
-  computed: {
+      for (var i = 1; i <= this.quality; i++) {
-    firstList() {
+        this.starList.push(this.starType[0]);
-      console.log(this.firstOrder.splice(0, 5 - this.quality),'this.firstOrder.splice(0, 4 - this.level)');
+      }
-      return this.firstOrder.splice(0, 5 - this.quality);
+    } else if (this.quality > 5 && this.quality <= 10) {
-    },
+      for (var i = 1; i <= this.quality-5; i++) {
-    secondList() {
+        this.starList.push(this.starType[1]);
-        console.log(this.secondOrder.splice(0, 4 - (this.quality -5)),'this.firstOrder.splice(0, 4 - this.level)');
+      }
-      return this.secondOrder.splice(0, 5 - (this.quality -5));
+    } else {
-    },
+      for (var i = 1; i <= this.quality-10; i++) {
-    thirdList() {
+        this.starList.push(this.starType[2]);
-        console.log(this.thirdOrder.splice(0, 4 - (this.quality -10)),'this.firstOrder.splice(0, 4 - this.level)');
+      }
-      return this.thirdOrder.splice(0, 5 - (this.quality -10));
+    }
   },
+   beforeUpdate() {
+    this.starList = [];
+    if (this.quality > 0 && this.quality <= 5) {
+      for (var i = 1; i <= this.quality; i++) {
+        this.starList.push(this.starType[0]);
+      }
+    } else if (this.quality > 5 && this.quality <= 10) {
+      for (var i = 1; i <= this.quality - 5; i++) {
+        this.starList.push(this.starType[1]);
+      }
+    } else {
+      for (var i = 1; i <= this.quality - 10; i++) {
+        this.starList.push(this.starType[2]);
+      }
+    }
   },
   data() {
     return {
-      firstOrder: [
+      starType: [
         { Image: require("@/assets/market/hero/star01.png") },
-        { Image: require("@/assets/market/hero/star01.png") },
+        { Image: require("@/assets/market/hero/star03.png") },
-        { Image: require("@/assets/market/hero/star01.png") },
-        { Image: require("@/assets/market/hero/star01.png") },
-        { Image: require("@/assets/market/hero/star01.png") },
-      ],
-      secondOrder: [
-        { Image: require("@/assets/market/hero/star02.png") },
-        { Image: require("@/assets/market/hero/star02.png") },
-        { Image: require("@/assets/market/hero/star02.png") },
-        { Image: require("@/assets/market/hero/star02.png") },
         { Image: require("@/assets/market/hero/star02.png") },
       ],
-      thirdOrder: [
+      starList: []
-        { Image: require("@/assets/market/hero/star03.png") },
-        { Image: require("@/assets/market/hero/star03.png") },
-        { Image: require("@/assets/market/hero/star03.png") },
-        { Image: require("@/assets/market/hero/star03.png") },
-        { Image: require("@/assets/market/hero/star03.png") },
-      ],
     };
   },
 };

src/components/market/TheSellDialog.vue

@@ -107,7 +107,11 @@ export default {
     };
   },
   created() {
+    if (this.options.length > 0) {
+      return;
+    } else {
       this.getOption();
+    }
 
     console.log(this.options, "87887");
   },
@@ -130,18 +134,18 @@ export default {
       switch (this.type) {
         case "hero":
           console.log(this.type, "-=-", AppModule.chainId);
-          '1338'
+          "1338";
           console.log(CONTRACT_ADDRESS[AppModule.chainId]);
-          this.nft_Token = CONTRACT_ADDRESS['1338'].hero;
+          this.nft_Token = CONTRACT_ADDRESS["1338"].hero;
           break;
         case "weapon":
-          this.nft_Token = CONTRACT_ADDRESS['1338'].weapon;
+          this.nft_Token = CONTRACT_ADDRESS["1338"].weapon;
           break;
         case "chip":
-          this.nft_Token = CONTRACT_ADDRESS['1338'].chip;
+          this.nft_Token = CONTRACT_ADDRESS["1338"].chip;
           break;
         case "piece":
-          this.nft_Token = CONTRACT_ADDRESS['1338'].piece;
+          this.nft_Token = CONTRACT_ADDRESS["1338"].piece;
           break;
       }
       try {
@@ -153,7 +157,7 @@ export default {
             : this.data.detail.token_id,
           amount: this.piece ? this.cunout : 1,
           price: this.price,
-          marketAddress: CONTRACT_ADDRESS['1338'].address,
+          marketAddress: CONTRACT_ADDRESS["1338"].address,
         };
         console.log(shellData, "shellData");
         const nftres = await this.chainManager.bc.beginNftSell(
@@ -162,13 +166,12 @@ export default {
           this.piece ? this.piece.detail.token_id : this.data.detail.token_id,
           this.piece ? this.cunout : 1,
           this.price,
-          CONTRACT_ADDRESS['1338'].address
+          CONTRACT_ADDRESS["1338"].address
         );
         console.log(nftres, "beginSell");
       } catch (err) {
         console.log("query order status error", err);
       }
-      
     },
     async getOption() {
       const res = await getSupportedCurrenTypes();

src/components/market/nft/HeroNft.vue

@@ -59,30 +59,11 @@
         <div class="info-level">
           Lv: <span class="level"></span>
           <span> {{ fillZero(levelNumber) }}</span>
-          <span>{{ this.data.detail.quality }}</span>
         </div>
 
         <div class="level-img">
-          <div
+          <div class="level-levelList">
-            class="level-levelList"
+            <div class="item-Image" v-for="(item, i) in starList" :key="i">
-            v-if="this.data.detail.quality > 0 && this.data.detail.quality <= 5"
-          >
-            <div class="item-Image" v-for="(item, i) in firstOrder" :key="i">
-              <div><img width="28px" :src="item.Image" alt="" /></div>
-            </div>
-          </div>
-          <div
-            class="level-levelList"
-            v-else-if="
-              this.data.detail.quality > 5 && this.data.detail.quality <= 10
-            "
-          >
-            <div class="item-Image" v-for="(item, i) in secondOrder" :key="i">
-              <div><img width="28px" :src="item.Image" alt="" /></div>
-            </div>
-          </div>
-          <div class="level-levelList" v-else>
-            <div class="item-Image" v-for="(item, i) in thirdOrder" :key="i">
               <div><img width="28px" :src="item.Image" alt="" /></div>
             </div>
           </div>
@@ -161,7 +142,7 @@ interface DialogConfigtype {
   animationLeave: string;
   destroyTime: number;
 }
-import { Component, Prop, Vue } from "vue-property-decorator";
+import { Component, Prop, Vue, Watch } from "vue-property-decorator";
 import Herodialog from "../Herodialog.vue";
 import TheBuyDialog from "../TheBuyDialog.vue";
 import TheSellDialog from "../TheSellDialog.vue";
@@ -178,6 +159,7 @@ import TheSellDialog from "../TheSellDialog.vue";
 export default class HeroNft extends Vue {
   //  @Prop() data
   // boxState = 'n'
+  quality: any = 1;
   dialogVisible: boolean = false;
   isTab: boolean = false;
   isPiecePut: boolean = false;
@@ -186,35 +168,12 @@ export default class HeroNft extends Vue {
   // created() {
   //   console.log(this.data, "nftlist3sdfsadff");
   // }
-
+  starType = [
-  firstOrder = [
     { Image: require("@/assets/market/hero/star01.png") },
-    { Image: require("@/assets/market/hero/star01.png") },
+    { Image: require("@/assets/market/hero/star03.png") },
-    { Image: require("@/assets/market/hero/star01.png") },
-    { Image: require("@/assets/market/hero/star01.png") },
-    { Image: require("@/assets/market/hero/star01.png") },
-  ];
-  firstOrder2 = [
-    { Image: require("@/assets/market/hero/star01.png") },
-    { Image: require("@/assets/market/hero/star01.png") },
-    { Image: require("@/assets/market/hero/star01.png") },
-    { Image: require("@/assets/market/hero/star01.png") },
-    { Image: require("@/assets/market/hero/star01.png") },
-  ];
-  secondOrder = [
-    { Image: require("@/assets/market/hero/star02.png") },
-    { Image: require("@/assets/market/hero/star02.png") },
-    { Image: require("@/assets/market/hero/star02.png") },
-    { Image: require("@/assets/market/hero/star02.png") },
     { Image: require("@/assets/market/hero/star02.png") },
   ];
-  thirdOrder = [
+  starList:any[]=[]
-    { Image: require("@/assets/market/hero/star03.png") },
-    { Image: require("@/assets/market/hero/star03.png") },
-    { Image: require("@/assets/market/hero/star03.png") },
-    { Image: require("@/assets/market/hero/star03.png") },
-    { Image: require("@/assets/market/hero/star03.png") },
-  ];
 
   fillZero(str: number | string) {
     var realNum;
@@ -232,53 +191,44 @@ export default class HeroNft extends Vue {
   showTip(hide: boolean) {
     this.isTab = hide;
   }
+  @Watch("data.detail.quality")
+  haldQuality(newvalue: any) {
+    this.quality = newvalue;
+    console.log(this.quality, "this.quality");
+    console.log(this.qualityNumber, "this.qualityNumber");
+
+  }
   created() {
-    // console.log(this.starList, "starList");
+    if (this.qualityNumber > 0 && this.qualityNumber <= 5) {
-    if (this.data.detail.quality > 0 && this.data.detail.quality <= 5) {
+      for (var i = 1; i <= this.qualityNumber; i++) {
-      this.firstOrder.splice(0, 5 - this.data.detail.quality);
+        this.starList.push(this.starType[0]);
-      //  this.firstOrder=  this.firstOrder.splice(0, 5 - this.data.detail.quality);
+      }
-    } else if (this.data.detail.quality > 5 && this.data.detail.quality <= 10) {
+    } else if (this.qualityNumber > 5 && this.qualityNumber <= 10) {
-      console.log("2");
+      for (var i = 1; i <= this.qualityNumber-5; i++) {
-      this.secondOrder.splice(0, 5 - (this.data.detail.quality - 5));
+        this.starList.push(this.starType[1]);
+      }
     } else {
-      this.thirdOrder.splice(0, 5 - (this.data.detail.quality - 10));
+      for (var i = 1; i <= this.qualityNumber-10; i++) {
+        this.starList.push(this.starType[2]);
+      }
     }
   }
   beforeUpdate() {
-     if (this.data.detail.quality > 0 && this.data.detail.quality <= 5) {
+    this.starList=[]
-      this.firstOrder2.splice(0, 5 - this.data.detail.quality);
+     if (this.qualityNumber > 0 && this.qualityNumber <= 5) {
-      //  this.firstOrder=  this.firstOrder.splice(0, 5 - this.data.detail.quality);
+      for (var i = 1; i <= this.qualityNumber; i++) {
-    } else if (this.data.detail.quality > 5 && this.data.detail.quality <= 10) {
+        this.starList.push(this.starType[0]);
-      console.log("2");
+      }
-      this.secondOrder.splice(0, 5 - (this.data.detail.quality - 5));
+    } else if (this.qualityNumber > 5 && this.qualityNumber <= 10) {
+      for (var i = 1; i <= this.qualityNumber - 5; i++) {
+        this.starList.push(this.starType[1]);
+      }
     } else {
-      this.thirdOrder.splice(0, 5 - (this.data.detail.quality - 10));
+      for (var i = 1; i <= this.qualityNumber- 10; i++) {
+        this.starList.push(this.starType[2]);
+      }
     }
   }
-  // Update(){
-  //    if (this.data.detail.quality > 0 && this.data.detail.quality <= 5) {
-  //     this.firstOrder2.splice(0, 5 - this.data.detail.quality);
-  //     //  this.firstOrder=  this.firstOrder.splice(0, 5 - this.data.detail.quality);
-  //   } else if (this.data.detail.quality > 5 && this.data.detail.quality <= 10) {
-  //     console.log("2");
-  //     this.secondOrder.splice(0, 5 - (this.data.detail.quality - 5));
-  //   } else {
-  //     this.thirdOrder.splice(0, 5 - (this.data.detail.quality - 10));
-  //   }
-  // }
-  // get starList() {
-  //   if (this.data.detail.quality > 0 && this.data.detail.quality <= 5) {
-  //     console.log('11111111111111',this.firstOrder.splice(0, 5 - this.data.detail.quality));
-
-  //     return this.firstOrder.splice(0, 5 - this.data.detail.quality);
-  //   } else if (this.data.detail.quality > 5 && this.data.detail.quality <= 10) {
-  //      console.log('2');
-  //     return this.secondOrder.splice(0, 5 - (this.data.detail.quality - 5));
-  //   } else {
-  //     return this.thirdOrder.splice(0, 5 - (this.data.detail.quality - 10));
-  //   }
-  // }
-
   get levelNumber() {
     return this.data.detail.hero_lv;
   }
@@ -411,6 +361,8 @@ export default class HeroNft extends Vue {
   }
   .level-img {
     display: flex;
+    width: 65%;
+    justify-content: center;
   }
   .level-levelList {
     display: flex;

src/components/market/nft/WeaponList.vue

@@ -28,34 +28,9 @@
         <div class="level-img">
           <div
             class="level-levelList"
-            v-if="weapon.detail.quality > 0 && weapon.detail.quality <= 5"
+           
-          >
-            <div
-              class="item-Image"
-              v-for="(item, i) in firstOrder"
-              :key="i"
-            >
-              <div><img width="32px" :src="item.Image" alt="" /></div>
-            </div>
-          </div>
-          <div
-            class="level-levelList"
-            v-else-if="weapon.detail.quality > 5 && weapon.detail.quality <= 10"
-          >
-            <div
-              class="item-Image"
-              v-for="(item, i) in secondOrder"
-              :key="i"
-            >
-              <div><img width="32px" :src="item.Image" alt="" /></div>
-            </div>
-          </div>
-          <div class="level-levelList" v-else>
-            <div
-              class="item-Image"
-              v-for="(item, i) in thirdOrder"
-              :key="i"
           >
+            <div class="item-Image" v-for="(item, i) in starList" :key="i">
               <div><img width="32px" :src="item.Image" alt="" /></div>
             </div>
           </div>
@@ -141,70 +116,50 @@ export default {
       type: "weapon",
       isBuy: false,
       isPiecePut: false,
-      firstOrder: [
+      starType: [
         { Image: require("@/assets/market/hero/star01.png") },
-        { Image: require("@/assets/market/hero/star01.png") },
+        { Image: require("@/assets/market/hero/star03.png") },
-        { Image: require("@/assets/market/hero/star01.png") },
-        { Image: require("@/assets/market/hero/star01.png") },
-        { Image: require("@/assets/market/hero/star01.png") },
-      ],
-       firstOrder2: [
-        { Image: require("@/assets/market/hero/star01.png") },
-        { Image: require("@/assets/market/hero/star01.png") },
-        { Image: require("@/assets/market/hero/star01.png") },
-        { Image: require("@/assets/market/hero/star01.png") },
-        { Image: require("@/assets/market/hero/star01.png") },
-      ],
-      secondOrder: [
-        { Image: require("@/assets/market/hero/star02.png") },
-        { Image: require("@/assets/market/hero/star02.png") },
-        { Image: require("@/assets/market/hero/star02.png") },
-        { Image: require("@/assets/market/hero/star02.png") },
         { Image: require("@/assets/market/hero/star02.png") },
       ],
-      thirdOrder: [
+      starList: []
-        { Image: require("@/assets/market/hero/star03.png") },
-        { Image: require("@/assets/market/hero/star03.png") },
-        { Image: require("@/assets/market/hero/star03.png") },
-        { Image: require("@/assets/market/hero/star03.png") },
-        { Image: require("@/assets/market/hero/star03.png") },
-      ],
     };
   },
   created() {
-    // console.log(this.starList, "starList");
+   
-    if (this.weapon.detail.quality > 0 && this.weapon.detail.quality <= 5) {
+    if (this.qualityNumber > 0 && this.qualityNumber <= 5) {
-      console.log(
+      for (var i = 1; i <= this.qualityNumber; i++) {
-        this.weapon.detail.quality,
+        this.starList.push(this.starType[0]);
-        this.firstOrder.splice(0, 5 - this.weapon.detail.quality) ,'opppppppppppppppppppppppp23233'
+      }
-      );
+    } else if (this.qualityNumber > 5 && this.qualityNumber <= 10) {
-      //  this.firstOrder=  this.firstOrder.splice(0, 5 - this.data.detail.quality);
+      for (var i = 1; i <= this.qualityNumber - 5; i++) {
-    } else if (
+        this.starList.push(this.starType[1]);
-      this.weapon.detail.quality > 5 &&
+      }
-      this.weapon.detail.quality <= 10
-    ) {
-      console.log("2");
-      this.secondOrder = this.secondOrder.splice(
-        0,
-        5 - (this.weapon.detail.quality - 5)
-      );
     } else {
-      this.thirdOrder = this.thirdOrder.splice(
+      for (var i = 1; i <= this.qualityNumber - 10; i++) {
-        0,
+        this.starList.push(this.starType[2]);
-        5 - (this.weapon.detail.quality - 10)
+      }
-      );
     }
   },
   beforeUpdate() {
-     if (this.weapon.detail.quality > 0 && this.weapon.detail.quality <= 5) {
+    this.starList = [];
-      this.firstOrder2.splice(0, 5 - this.weapon.detail.quality);
+    if (this.qualityNumber > 0 && this.qualityNumber <= 5) {
-      //  this.firstOrder=  this.firstOrder.splice(0, 5 - this.data.detail.quality);
+      for (var i = 1; i <= this.qualityNumber; i++) {
-    } else if (this.weapon.detail.quality > 5 && this.weapon.detail.quality <= 10) {
+        this.starList.push(this.starType[0]);
-      console.log("2");
-      this.secondOrder.splice(0, 5 - (this.weapon.detail.quality - 5));
-    } else {
-      this.thirdOrder.splice(0, 5 - (this.weapon.detail.quality - 10));
       }
+    } else if (this.qualityNumber > 5 && this.qualityNumber <= 10) {
+      for (var i = 1; i <= this.qualityNumber - 5; i++) {
+        this.starList.push(this.starType[1]);
+      }
+    } else {
+      for (var i = 1; i <= this.qualityNumber - 10; i++) {
+        this.starList.push(this.starType[2]);
+      }
+    }
+  },
+  computed: {
+    qualityNumber() {
+      return this.weapon.detail.quality;
+    },
   },
   methods: {
     ChipDialoghide() {
@@ -316,14 +271,20 @@ export default {
 .level-content {
   display: flex;
   .level-img {
+     margin-top: 7px;
     display: flex;
+    width: 78%;
+    justify-content: center;
+    align-items: center;
   }
 
   .level-levelList {
     display: flex;
+    align-items: center;
     margin-left: 14px;
   }
   .item-Image {
+    align-items: center;
     margin-left: 6px;
     display: flex;
   }