fix

2022-12-26 11:57:00 +08:00 · 2022-12-26 11:57:00 +08:00 · 74033c20c1
commit 74033c20c1
parent 620f7238a5
6 changed files with 220 additions and 136 deletions
--- a/src/components/market/Dundialog.vue
+++ b/src/components/market/Dundialog.vue
@ -33,7 +33,7 @@
                  />
                </div>
              </div>
-              <LeveStars :level="data.detail.gun_lv"> </LeveStars>
+              <LeveStars :quality="data.detail.gun_lv"> </LeveStars>
              <LuckyValue
                :level="data.detail.gun_lv"
                :lucky="data.detail.lucky"
--- a/src/components/market/Herodialog.vue
+++ b/src/components/market/Herodialog.vue
@ -62,7 +62,7 @@
                  />
                </div>
              </div>
-              <LeveStars :level="hero.detail.quality"> </LeveStars>
+              <LeveStars :quality="hero.detail.quality"> </LeveStars>
              <LuckyValue
                :level="hero.detail.hero_lv"
                :lucky="hero.detail.lucky"
--- a/src/components/market/LeveStars.vue
+++ b/src/components/market/LeveStars.vue
@ -1,77 +1,73 @@
 <template>
  <div>
    <div class="star">
-            <div class="level-img">
-              <div
-                class="level-levelList"
-                v-if="level > 0 && level <= 5"
-              >
-                <div
-                  class="item-Image"
-                  v-for="(item, i) in levelList.firstOrder"
-                  :key="i"
-                >
-                  <div><img width="42px" :src="item.Image" alt="" /></div>
-                </div>
-              </div>
-              <div
-                class="level-levelList"
-                v-else-if="level > 5 && level <= 10"
-              >
-                <div
-                  class="item-Image"
-                  v-for="(item, i) in levelList.secondOrder"
-                  :key="i"
-                >
-                  <div><img width="42px" :src="item.Image" alt="" /></div>
-                </div>
-              </div>
-              <div class="level-levelList" v-else>
-                <div
-                  class="item-Image"
-                  v-for="(item, i) in levelList.thirdOrder"
-                  :key="i"
-                >
-                  <div><img width="42px" :src="item.Image" alt="" /></div>
-                </div>
-              </div>
-            </div>
+      <div class="quality-img">
+        <div class="quality-levelList" v-if="quality > 0 && quality <= 5">
+          <div class="item-Image" v-for="(item, i) in firstList" :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>
+      </div>
+    </div>
  </div>
 </template>

 <script>
 export default {
  name: "LevelStar",
-  props: ["level"],
+  props: ["quality"],
+  created(){
+  console.log(this.quality,'this.level');
+  },
+  computed: {
+    firstList() {
+      console.log(this.firstOrder.splice(0, 5 - this.quality),'this.firstOrder.splice(0, 4 - this.level)');
+      return this.firstOrder.splice(0, 5 - this.quality);
+    },
+    secondList() {
+        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));
+    },
+    thirdList() {
+        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));
+    },
+  },
  data() {
    return {
-      levelList: {
-        firstOrder: [
-          { 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: [
-          { 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") },
-        ],
-      },
+      firstOrder: [
+        { 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: [
+        { 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") },
+      ],
    };
  },
-  
 };
 </script>

@ -85,13 +81,13 @@ export default {
  margin-left: 23px;
  margin-top: 19px;
  margin-bottom: 20px;
-  .level-img {
+  .quality-img {
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;
  }
-  .level-levelList {
+  .quality-levelList {
    display: flex;
  }
  .item-Image {
--- a/src/components/market/nft/HeroNft.vue
+++ b/src/components/market/nft/HeroNft.vue
@ -58,40 +58,31 @@
      <div class="info">
        <div class="info-level">
          Lv: <span class="level"></span>
-          {{ fillZero(levelNumber) }}
+          <span> {{ fillZero(levelNumber) }}</span>
+          <span>{{ this.data.detail.quality }}</span>
        </div>

        <div class="level-img">
          <div
            class="level-levelList"
-            v-if="qualityNumber > 0 && qualityNumber <= 5"
+            v-if="this.data.detail.quality > 0 && this.data.detail.quality <= 5"
          >
-            <div
-              class="item-Image"
-              v-for="(item, i) in levelList.firstOrder"
-              :key="i"
-            >
+            <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="qualityNumber > 5 && qualityNumber <= 10"
+            v-else-if="
+              this.data.detail.quality > 5 && this.data.detail.quality <= 10
+            "
          >
-            <div
-              class="item-Image"
-              v-for="(item, i) in levelList.secondOrder"
-              :key="i"
-            >
+            <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 levelList.thirdOrder"
-              :key="i"
-            >
+            <div class="item-Image" v-for="(item, i) in thirdOrder" :key="i">
              <div><img width="28px" :src="item.Image" alt="" /></div>
            </div>
          </div>
@ -192,33 +183,39 @@ export default class HeroNft extends Vue {
  isPiecePut: boolean = false;
  isBuy: boolean = false;
  type: string = "hero";
-  created() {
-    console.log(this.data, "nftlist3sdfsadff");
-  }
+  // created() {
+  //   console.log(this.data, "nftlist3sdfsadff");
+  // }
+
+  firstOrder = [
+    { 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") },
+  ];
+  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 = [
+    { 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") },
+  ];

-  levelList = {
-    firstOrder: [
-      { 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: [
-      { 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;
    if (str < 10) {
@ -235,6 +232,53 @@ export default class HeroNft extends Vue {
  showTip(hide: boolean) {
    this.isTab = hide;
  }
+  created() {
+    // console.log(this.starList, "starList");
+    if (this.data.detail.quality > 0 && this.data.detail.quality <= 5) {
+      this.firstOrder.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));
+    }
+  }
+  beforeUpdate(){
+     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));
+    }
+  }
+  // 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;
  }
@ -295,7 +339,7 @@ export default class HeroNft extends Vue {
    opacity: 0.8;
    z-index: 11;
    border-radius: 16px;
-    .for-rent-img{
+    .for-rent-img {
      margin-top: 100px;
      margin-bottom: 70px;
    }
--- a/src/components/market/nft/WeaponList.vue
+++ b/src/components/market/nft/WeaponList.vue
@ -32,7 +32,7 @@
          >
            <div
              class="item-Image"
-              v-for="(item, i) in levelList.firstOrder"
+              v-for="(item, i) in firstOrder"
              :key="i"
            >
              <div><img width="32px" :src="item.Image" alt="" /></div>
@ -44,7 +44,7 @@
          >
            <div
              class="item-Image"
-              v-for="(item, i) in levelList.secondOrder"
+              v-for="(item, i) in secondOrder"
              :key="i"
            >
              <div><img width="32px" :src="item.Image" alt="" /></div>
@ -53,7 +53,7 @@
          <div class="level-levelList" v-else>
            <div
              class="item-Image"
-              v-for="(item, i) in levelList.thirdOrder"
+              v-for="(item, i) in thirdOrder"
              :key="i"
            >
              <div><img width="32px" :src="item.Image" alt="" /></div>
@ -141,31 +141,72 @@ export default {
      type: "weapon",
      isBuy: false,
      isPiecePut: false,
-      levelList: {
-        firstOrder: [
-          { 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: [
-          { 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") },
-        ],
-      },
+
+      firstOrder: [
+        { 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") },
+      ],
+       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: [
+        { 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) {
+      console.log(
+        this.weapon.detail.quality,
+        this.firstOrder.splice(0, 5 - this.weapon.detail.quality) ,'opppppppppppppppppppppppp23233'
+      );
+      //  this.firstOrder=  this.firstOrder.splice(0, 5 - this.data.detail.quality);
+    } else if (
+      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(
+        0,
+        5 - (this.weapon.detail.quality - 10)
+      );
+    }
+  },
+  beforeUpdate(){
+     if (this.weapon.detail.quality > 0 && this.weapon.detail.quality <= 5) {
+      this.firstOrder2.splice(0, 5 - this.weapon.detail.quality);
+      //  this.firstOrder=  this.firstOrder.splice(0, 5 - this.data.detail.quality);
+    } else if (this.weapon.detail.quality > 5 && this.weapon.detail.quality <= 10) {
+      console.log("2");
+      this.secondOrder.splice(0, 5 - (this.weapon.detail.quality - 5));
+    } else {
+      this.thirdOrder.splice(0, 5 - (this.weapon.detail.quality - 10));
+    }
+  },
  methods: {
    ChipDialoghide() {
      this.dialogVisible = false;
--- a/src/views/desktop/Market.vue
+++ b/src/views/desktop/Market.vue
@ -616,13 +616,16 @@ export default class Market extends Vue {
      this.nftList = list.filter((item: any) => {
        return item.details !== null;
      });
+     
+      
      if (res) {
        const page = res;
        this.totalPage = parseInt(page.total) || 1;
        this.pageSize = page.page_size || 10;
        this.starts = page.start;
        this.currentPage = page.start / page.page_size + 1;
-      }
+      } 
+      console.log(this.nftList,'this.nftList');
    }
  }
  @Watch("isLogin")