bemarket/src/components/mobile/main/HeroList.vue

<template>
  <div class="container">
    <div
      class="hero-list"
      v-for="(hero, i) in nftList"
      @click="showTip(hero)"
      :key="i"
    >
      <div class="type-img">
        <img
          v-if="hero.info.is_genesis == 1"
          class="img-item"
          src="../../../assets/mobile/market/hero/type-1.png"
          alt=""
        />
        <img
          v-else
          class="img-item"
          src="../../../assets/mobile/market/hero/type-0.png"
          alt=""
        />
        <div class="hero-img">
          <img
            v-if="hero.item_id"
            :src="require('@/assets/mobile/market/hero/' + hero.item_id + '.png')"
            alt=""
          />
        </div>
        <div class="gen">
          <img
            width="42px"
            v-if="hero.info.is_genesis == 1"
            src="../../../assets/market/hero/gen.png"
            alt=""
          />
        </div>
      </div>
      <div class="info">
        <div class="info-level">
          Lv: <span class="level"></span> {{ hero.detail.hero_lv }}
        </div>
        <div class="level-img">
          <div
            class="level-levelList"
            v-if="hero.info.level > 0 && hero.info.level <= 5"
          >
            <div
              class="item-Image"
              v-for="(item, i) in levelList.firstOrder"
              :key="i"
            >
              <div class="hero-level-img"><img :src="item.Image" alt="" /></div>
            </div>
          </div>
          <div
            class="level-levelList"
            v-else-if="hero.info.level > 5 && hero.info.level <= 10"
          >
            <div
              class="item-Image"
              v-for="(item, i) in levelList.secondOrder"
              :key="i"
            >
              <div class="hero-level-img"><img :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="hero-level-img"><img :src="item.Image" alt="" /></div>
            </div>
          </div>
        </div>
      </div>
      <div class="sale">
        <div class="t-icon">
          <img src="../../../assets/mobile/market/hero/t-icon.png" alt="" />
        </div>
        <div class="price">{{ hero.s_price }}</div>
        <div class="buy">
          <a href="">
            <img src="../../../assets/mobile/market/hero/buy.png" alt=""
          /></a>
        </div>
      </div>
    </div>
    <HeroModal
      v-if="isShow"
      ref="dialog"
      @closeTip="closeTip"
      @showTip="showTip"
    ></HeroModal>
  </div>
</template>

<script>
import HeroModal from "./HeroModal.vue";
export default {
  props: ["nftList"],
  components: {
    HeroModal,
  },
  data() {
    return {
      isShow: 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") },
        ],
      },
    };
  },
  filters: {
    fillZero(str) {
      var realNum;
      if (str < 10) {
        realNum = "0" + str;
      } else {
        realNum = str;
      }
      return realNum;
    },
  },
  methods: {
    showTip(data) {
      this.isShow = true;
      this.$nextTick(() => {
        //这里的dialog与上面dialog-component组件里面的ref属性值是一致的
        //init调用的是dialog-component组件里面的init方法
        //data是传递给弹窗页面的值
        this.$refs.dialog.init(data);
      });
    },
    handleClick(data) {
      this.Visiable = true;
      this.$nextTick(() => {
        //这里的dialog与上面dialog-component组件里面的ref属性值是一致的
        //init调用的是dialog-component组件里面的init方法
        //data是传递给弹窗页面的值
        this.$refs.dialog.init(data);
      });
    },
    closeTip() {
      this.isShow = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  display: flex;
  margin-top: 34px;
  margin-left: 27px;
  margin-right: 27px;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  .hero-list {
    width: 312px;
    height: 462px;
    margin-right: 46px;
    margin-bottom: 31px;
    background: url("../../../assets/mobile/market/hero/hero-bg.png") no-repeat;
    background-size: cover;
  }
  .type-img {
    margin-top: 18px;
    margin-left: 18px;
    position: relative;
    img {
      width: 272px;
    }
    .hero-img {
      position: absolute;
      left: 0;
      top: 0;
      img {
        width: 272px;
      }
    }
    .gen {
      position: absolute;
      left: 6px;
      top: 10px;
      width: 53px;
      height: 34px;
      img {
        width: 100%;
      }
    }
  }
  .info {
    display: flex;
    // justify-content: center;
    align-items: center;
    // margin-top: 15px;
    .info-level {
      font-size: 21px;
      color: #000;
      margin-left: 25px;
    }
    .level {
      font-size: 26px;
    }
    .level-img {
      display: flex;
    }
    .level-levelList {
      display: flex;
    }
    .item-Image {
      margin-left: 3px;
      display: flex;
      .hero-level-img {
        width: 36px;
        img {
          width: 100%;
        }
      }
    }
  }
  .sale {
    display: flex;
    justify-content: space-between;
    // margin-top: 13px;
    padding-left: 22px;
    padding-right: 22px;
    .t-icon {
      width: 41px;
      img {
        width: 100%;
      }
    }
    .buy {
      width: 99px;
      height: 46px;
      img {
        width: 99px;
        height: 46px;
      }
    }
    .price {
      font-size: 32px;
      color: #454545;
    }
  }
}
</style>