cebg-activities/src/views/mobile/RankingList.vue

<template>
  <div class="container">
    <div class="content">
      <div class="top">
        <div class="account-btn">
          <div>
            <img
              class="icon-img"
              src="../../assets/mobile/twitter.png"
              alt=""
            />
          </div>
          <div class="text">fsdf</div>
        </div>
        <div class="twitter-btn">
          <div>
            <img
              class="icon-img"
              src="../../assets/mobile/twitter.png"
              alt=""
            />
          </div>
          <div class="text">@monal</div>
        </div>
        <div class="discard-btn">
          <div>
            <img
              class="icon-img"
              src="../../assets/mobile/discard.png"
              alt=""
            />
          </div>
          <div class="text">Comicboo</div>
        </div>
      </div>
      <div class="switch">
        <div
          v-for="(item, i) in tabbar"
          :key="i"
          @click="change(i)"
          :class="currentIndex == i ? 'prebeta' : 'prebeta-default'"
        >
          {{ item.title }}
        </div>
      </div>
      <div v-show="currentIndex == 0" class="list">
        <div class="invititaion-code-title">
          INVITATIONN CODE
          <img class="icon-img" src="../../assets/mobile/i-icon.png" alt="" />
        </div>
        <div class="invititaion-code">
          {{ userinfo.invite_code }}
          <img class="icon-img" src="../../assets/mobile/copy.png" alt="" />
        </div>
        <div class="time-content">
          <div class="date-time-title">BETA TEST COUNT COUNTDOWN</div>
          <div class="date-time">
            <div>
              <div class="time-circular">{{ time.day }}</div>
              <div class="time-text">DAY(S)</div>
            </div>

            <div>
              <div class="time-circular">{{ time.hours }}</div>
              <div class="time-text">HOUR</div>
            </div>

            <div>
              <div class="time-circular">{{ time.minutes }}</div>
              <div class="time-text">MINUTE</div>
            </div>

            <div>
              <div class="time-circular">{{ time.seconds }}</div>
              <div class="time-text">SECOND</div>
            </div>
          </div>
        </div>
        <div class="points-list">
          <div class="list-header">
            <div class="rank">
              <div class="clan-member-text">Rank</div>
              <div class="rank-number">{{ userinfo.rank }}</div>
            </div>
            <div class="points">
              <div class="clan-member-text">Commander Rally Points</div>
              <div class="rank-number">
                {{ userinfo.point }}
                <span class="number-img">
                  <img
                    class="icon-img"
                    src="../../assets/mobile/i-icon.png"
                    alt=""
                /></span>
              </div>
            </div>
            <div class="clan-member">
              <div class="clan-member-text">CLAN MEMBER</div>
              <div class="rank-number">
                {{ userinfo.clan_member }}
                <span class="number-img">
                  <img
                    class="icon-img"
                    src="../../assets/mobile/i-icon.png"
                    alt=""
                /></span>
              </div>
            </div>
          </div>
          <div class="points-option">
            <div class="date">Date</div>
            <div class="operators">Operators</div>
            <div class="event">Event</div>
            <div class="points-text">Points</div>
          </div>
          <div class="data-list">
            <div class="list-item" v-for="(item, i) in listevent" :key="i">
              <div class="date">{{ item.create_time.slice(0, 10) }}</div>
              <div class="operators">{{ item.operator }}</div>
              <div class="event">{{ item.event }}</div>
              <div class="points-text">{{ "+" + item.point }}</div>
            </div>
          </div>
        </div>
        <div class="leaderboard-btn" @click="navigator">Leaderboard</div>
      </div>
      <div v-show="currentIndex == 1" class="info">Coming Soon</div>
    </div>
    <!-- <Footer class="footer"></Footer> -->
  </div>
</template>

<script>
import Footer from "../layout/Footer.vue";
export default {
  components: {
    Footer,
  },
  data() {
    return {
      userinfo: null,
      listevent: null,
      currentIndex: 0,
      account: '',
      time: null,
      endTime: "2022-11-20 18:00:00",
      flag: false,
      tabbar: [
        {
          id: 0,
          title: "CEBG PreBeta Points",
        },
        {
          id: 2,
          title: "CEBG Beta info",
        },
      ],
    };
  },
  created() {
    this.loadLocalData()
    if (!this.account) {
      return;
    }
    this.$axios
      .post(process.env.VUE_APP_API_HOST + "/aa1/user_info", {
        account: "0xCC8EFe18ca9f000786D73D993e85A9eFc3ac9417",
      })
      .then((res) => {
        console.log("成功", res.data);
        this.userinfo = res.data;
      })
      .catch((err) => {
        console.error(err);
        alert(err.response.data.msg);
      });
    this.$axios
      .post(process.env.VUE_APP_API_HOST + "/aa1/list_event_log", {
        account: "0xCC8EFe18ca9f000786D73D993e85A9eFc3ac9417",
      })
      .then((res) => {
        console.log("成功", res.data);
        this.listevent = res.data.data;
      })
      .catch((err) => {
        console.error(err);
        alert(err.response.data.msg);
      });
  },
  mounted() {
    let time = setInterval(() => {
      if (this.flag == true) {
        clearInterval(time);
      }
      this.timeDown();
    }, 500);
  },
  methods: {
    loadLocalData() {
      let userInfo = localStorage.getItem('userinfo')
      if (userInfo) {
        try {
          let userData = JSON.parse(userInfo)
          this.account = userData.account;
        } catch(err) {
        }
      }
    },
    navigator() {
      this.$router.push("lisitdetails");
    },
    change(i) {
      this.currentIndex = i;
    },
    timeDown() {
      const endTime = new Date(this.endTime);
      const nowTime = new Date();
      let leftTime = parseInt((endTime.getTime() - nowTime.getTime()) / 1000);
      let d = parseInt(leftTime / (24 * 60 * 60));
      let h = this.formate(parseInt((leftTime / (60 * 60)) % 24));
      let m = this.formate(parseInt((leftTime / 60) % 60));
      let s = this.formate(parseInt(leftTime % 60));
      if (leftTime <= 0) {
        this.flag = true;
        this.$emit("time-end");
      }
      this.time = { day: d, hours: h, minutes: m, seconds: s };
    },
    formate(time) {
      if (time >= 10) {
        return time;
      } else {
        return `0${time}`;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  position: relative;
  width: 100vw;
  height: 100vh;
  background: url(../../assets/mobile/bg-content.png);
  background-size: 100% 100%;
  margin-top: 4vh;
  //   padding-left: 3vw;
  //   padding-right: 3vw;
}
.content {
  width: 100%;
  margin: 0 auto;
}
.top {
  display: flex;
  width: 92%;
  margin: 0 auto;
  margin-bottom: 3vh;
}
.account-btn,
.twitter-btn,
.discard-btn {
  width: 28.5vw;
  height: 3.88vh;
  margin-right: 2.4vw;
  background: #0d0d0d;
  border: 1px solid rgba(208, 163, 110, 0.79);
  border-radius: 42px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.text {
  font-size: 0.1vw;
  font-family: OPPOSans;
  font-weight: normal;
  color: #d7a972;
}

.icon-img {
  width: 4vw;
}
.invititaion-code {
  text-align: center;
  font-family: OPPOSans;
}

.switch {
  width: 90vw;
  display: flex;
  margin-top: 5vh;
  text-align: center;
  margin: 0 auto;
  background: #0d0d0d;
  border-radius: 46px;
  padding: 1.2vh 1.2vh 1.2vh 1.2vh;
  .prebeta {
    width: 50%;
    height: 4.2vh;
    text-align: center;
    cursor: pointer;
    line-height: 4.2vh;
    font-size: 0.85rem;
    font-family: OPPOSans;
    font-weight: normal;
    color: #ffffff;
    background: linear-gradient(171deg, #775437, #f2c082);
    border-radius: 33px;
  }
  .prebeta-default {
    width: 50%;
    height: 4.2vh;
    text-align: center;
    cursor: pointer;
    line-height: 4.2vh;
    font-size: 0.85rem;
    font-family: OPPOSans;
    font-weight: normal;
    color: #ffffff;
    // background: linear-gradient(171deg, #775437, #f2c082);
    border-radius: 33px;
  }
}
.date-time {
  display: flex;
  width: 92%;
  margin: 0 auto;
  justify-content: space-between;
  background: #0c0c0c;
  opacity: 0.6;
}
.time-circular {
  width: 18vw;
  height: 18vw;
  font-size: 2.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #353535;
  border-radius: 50%;
  font-family: OPPOSans;
  font-weight: normal;
}
.invititaion-code-title {
  font-size: 1.2rem;
  font-family: BigJohn;
  font-weight: 400;
  color: #cfa16c;
  background: linear-gradient(171deg, #775437 0.1220703125%, #f2c082 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-top: 3vh;
  text-align: center;
}
.date-time-title {
  font-size: 0.99rem;
  font-family: BigJohn;
  font-weight: 400;
  text-align: center;
  color: #cfa16c;
  margin-bottom: 1.2vh;
  background: linear-gradient(171deg, #775437 0.1220703125%, #f2c082 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.invititaion-code {
  text-align: center;
  margin-bottom: 3vh;
  font-family: OPPOSans;
  font-weight: normal;
}
.time-content {
  width: 85vw;
  padding-top: 1.2vh;
  padding-left: 3vw;
  padding-right: 3vw;
  padding-bottom: 2.2vh;
  background: rgba(12, 12, 12, 1);
  margin: 0 auto;
}
.time-text {
  text-align: center;
  margin-top: 2vw;
  font-size: 0.85rem;
  font-family: OPPOSans;
  font-weight: normal;
  color: #fffefe;
}

.points-list {
  width: 94%;
  margin: 0 auto;
  // height: 40vh;
  margin-top: 2vh;
  margin-bottom: 4vh;
  border: 1px solid rgba(208, 163, 110, 0.79);
  background: #0f0f0f;
  .list-header {
    display: flex;
    margin-top: 1vh;
    padding-left: 1.6vw;
    padding-right: 1.6vw;
    justify-content: space-between;
  }
}
.rank,
.points,
.clan-member {
  border: 1px solid rgba(208, 163, 110, 0.79);
  opacity: 0.6;
  text-align: center;
  position: relative;
}
.points-option {
  display: flex;
  margin-top: 2.6vw;
  margin-bottom: 1.42vh;
  padding-right: 1vw;
  padding-left: 2vw;
}
.number-img {
  position: absolute;
  right: 0.8vw;
  bottom: 0;
}
.operators {
  font-size: 0.7rem;
  font-family: OPPOSans;
  font-weight: normal;
  color: #d7a972;
  font-size: 0.7rem;
  width: 47vw;
}
.date {
  width: 20vw;
  font-size: 0.7rem;
  font-family: OPPOSans;
  font-weight: normal;
  color: #d7a972;
}
.points-text {
  font-size: 0.7rem;
  font-family: OPPOSans;
  font-weight: normal;
  text-align: right;
  color: #d7a972;
  width: 9vw;
}

.event {
  font-size: 0.7rem;
  width: 38vw;
  font-size: 0.7rem;
  font-family: OPPOSans;
  font-weight: normal;
  color: #d7a972;
}
.rank {
  padding-right: 1vw;
  padding-left: 1vw;
}
.rank-number {
  font-size: 1rem;
  margin-bottom: 1vh;
}
.clan-member-text {
  margin-top: 0.55vh;
  font-size: 0.9rem;
  padding-left: 2vw;
  padding-right: 2vw;
  font-family: OPPOSans;
  font-weight: normal;
  color: #d7a972;
}
.list-item {
  display: flex;
  width: 97%;
  margin: 0 auto;
  padding-top: 0.7vh;
  padding-bottom: 0.7vh;
  border-bottom: 1px solid rgba(208, 163, 110, 0.79);
  .date {
    width: 18vw;
    font-size: 0.46rem;
    font-family: OPPOSans;
    font-weight: normal;
    color: #ffffff;
  }
  .points-text {
    font-size: 0.46rem;
    font-family: OPPOSans;
    font-weight: normal;
    text-align: right;
    color: #ffffff;
    width: 12vw;
  }

  .event {
    width: 27vw;
    font-size: 0.46rem;
    font-family: OPPOSans;
    font-weight: normal;
    color: #ffffff;
  }
  .operators {
    font-size: 0.46rem;
    font-family: OPPOSans;
    font-weight: normal;
    color: #ffffff;
    width: 34vw;
  }
}
.leaderboard-btn {
  width: 50vw;
  margin: 0 auto;
  height: 4.8vh;
  text-align: center;
  line-height: 4.8vh;
  background: linear-gradient(165deg, #775437, #f2c082);
  border-radius: 59px;
  font-family: BigJohn;
  font-weight: 400;
  color: #fffefe;
}
.info {
  height: calc(100vh - 4.8vh - 25vh);
  font-size: 2rem;
  text-align: center;
  font-family: BigJohn;
  line-height: 35vh;
  font-weight: 400;
  color: #fffefe;
}
@media screen and (min-width : 992px) {
  .icon-img {
  width: 20px;
}
}
.footer{
  position: absolute;
  bottom: 0;
}
</style>