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"
    >
      <HeroItem :hero="hero" :isType="isType"></HeroItem>
    </div>
    <HeroModal
      v-if="isShow"
      ref="dialog"
      :isType="isType"
      @closeTip="closeTip"
      @showTip="showTip"
      :isPiecePut="isPiecePut"
       @handBuyShow="handBuyShow"
      @handPutShow="handPutShow"
      @handPutHide="handPutHide"
    ></HeroModal>
    <TheSellDialog
      :type="type"
      :isPiecePut="isPiecePut"
      ref="selldialog"
      @handPutShow="handPutShow"
      @handPutHide="handPutHide"
    ></TheSellDialog>
    <!-- v-if="currencyTypeList"
      :currencyTypeList="currencyTypeList" -->
    <TheBuyDialog
      :type="type"
      :isBuy="isBuy"
      ref="buydialog"
      @handBuyShow="handBuyShow"
      @handBuyHide="handBuyHide"
    ></TheBuyDialog>
  </div>
</template>

<script>
import HeroModal from "./HeroModal.vue";
import TheSellDialog from "./TheSellDialog.vue";
import TheBuyDialog from "./TheBuyDialog.vue";
import HeroItem from "./HeroItem";
export default {
  props: ["nftList", "isType"],
  components: {
    HeroModal,
    TheBuyDialog,
    TheSellDialog,
    HeroItem,
  },
  data() {
    return {
      isShow: false,
      type: "hero",
      isBuy: false,
      isPiecePut: false,
    };
  },
  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;
    },
    handPutShow(data) {
      this.isPiecePut = true;
      this.$nextTick(() => {
        //这里的dialog与上面dialog-component组件里面的ref属性值是一致的
        //init调用的是dialog-component组件里面的init方法
        //data是传递给弹窗页面的值
        this.$refs.selldialog.init(data);
      });
    },
    handPutHide() {
      this.isPiecePut = false;
    },
    handBuyShow(data) {
      this.isBuy = true;
      this.$nextTick(() => {
        //这里的dialog与上面dialog-component组件里面的ref属性值是一致的
        //init调用的是dialog-component组件里面的init方法
        //data是传递给弹窗页面的值
        this.$refs.buydialog.init(data);
      });
    },
    handBuyHide() {
       this.isBuy = 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: 480px;
    height: 708px;
    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>