Moabcoin_H5/pages/invite/level.vue

<template>
  <view class="layout-page" :style="themeStyle">
    <v-header title=""></v-header>
    <main class="layout-main">
      <view class="top bgb5">
        <view class="user d-flex align-center">
          <view class="head-box flex-shrink m-r-lg">
            <!-- <van-icon
              class="head w-63 h-63 rounded-max overflow-hidden color-theme-1"
              name="user-circle-o"
            /> -->
            <img :src="logoMap.login_logo" class="h-80 rounded-max" />
          </view>
          <view class="info color-plain">
            <view class="name">
              {{$t('invite.c0')}}：
              <span>{{user.username}}</span>
            </view>
            <view class="id">ID：{{user.user_id}}</view>
          </view>
        </view>
        <view class="d-flex level-text justify-between align-center">
          <view class="color-plain fn-lg">{{$t('invite.b6')}}：{{user.user_grade_name}}</view>
          <view
            class="fn-sm border-buy border-r-0  border color-success rounded-tl-lg rounded-bl-lg"
            style="padding:4px 6px"
          >{{$t('invite.c9')}}</view>
        </view>
      </view>
      <view  @click="_router.push('/pages/invite/index')" class="nav-two d-flex justify-between color-light">
        <view class="item fn-center fn-10 flex-fill flex-shrink">
          <img src="static/img/13@2x.png" class="icon h-40" />
          <p>{{$t('invite.c3')}}</p>
        </view>
        <view class="item fn-center fn-10 flex-fill flex-shrink">
          <img src="static/img/8@2x.png" class="icon h-40" />
          <p>
            {{$t('invite.c2')}}
            <span class="fn-8">（USDT）</span>
          </p>
        </view>
        <view class="item fn-center fn-10 flex-fill flex-shrink">
          <img src="static/img/4@2x.png" class="icon h-40" />
          <p>{{$t('invite.c1')}}</p>
        </view>

        <view class="item fn-center fn-10 flex-fill flex-shrink">
          <img src="static/img/4@2x(1).png" class="icon h-40" />
          <p>{{$t('invite.c4')}}</p>
        </view>
      </view>
      <view class="bg-panel-3 table-box color-light level-box box-shadow">
        <view class="title fn-center">{{$t('invite.c5')}}</view>
        <table class="table">
          <thead class="fn-13 fn-center bg-form-panel-4">
            <tr>
              <th>{{$t('invite.c6')}}</th>
              <th class="fn-wrap">{{$t('invite.b8')}} / {{$t('invite.b9')}}</th>
            </tr>
          </thead>
          <tbody>
            <template v-for="item in grade">
              <tr :key="item.grade_id">
                <td rowspan="2" class="fn-center fn-nowrap p-x-lg">
                  <img
                    v-if="levelListIcon[item.grade_id]"
                    class="icon h-16"
                    :src="levelListIcon[item.grade_id]"
                    alt
                  />
                  <p>{{item.grade_name}}</p>
                </td>
                <td class="fn-sm">
                  <view
                    class="m-b-xs"
                    v-for="(minItem,idx) in item.upgrade_condition_text"
                    :key="idx"
                  >({{idx+1}}){{minItem}}</view>
                  <view class="fn-center" v-if="!item.upgrade_condition_text.length">-</view>
                </td>
              </tr>
              <tr :key="item.grade_id+'a'">
                <td class="fn-sm">{{item.bonus_text}}</td>
              </tr>
            </template>
          </tbody>
        </table>
      </view>
      <view class="bg-panel-3 invate-info color-light box-shadow">
        <view class="title m-b-xs">{{remark.title}}</view>
        <view v-html="remark.body"></view>
      </view>
    </main>
  </view>
</template>
<script>
import Profile from "@/api/profile";
import { mapGetters,mapState } from "vuex";
export default {
  name: "level",
  data() {
    return {
      levelListIcon: {
        //  普通账户
        1: "",
        //  期权矿工
        2: "static/img/invite-2.png",
        //  节点矿工
        3: "static/img/invite-3.png",
        //  高级矿工
        4: "static/img/invite-4.png",
        //  超级矿工
        5: "static/img/invite-5.png",
        //  矿池
        6: "static/img/invite-6.png",
      },
      user: {},
      grade: [],
      remark: {},
    };
  },
  computed:{
    ...mapGetters(['themeStyle']),
	...mapState({
	  logoMap: "logoMap",
	}),
  },
  methods: {
    getGradeInfo() {
      Profile.getGradeInfo().then((res) => {
        this.user = res.data.user;
        this.grade = res.data.grade;
        this.remark = res.data.remark;
      });
    },
  },
  created() {
    this.getGradeInfo();
  },
};
</script>
<style lang="scss" scoped>
$rounded: 16px;
$pad: 23px;
$border: $border-color;
.top {
  margin: 27px 18px 0;
  border-radius: $rounded;

  padding: 19px 0;
    background: url("../../static/img/invite-bg.png") $panel-4
      no-repeat;
    background-size: 100% 100%;
  .user {
    padding: 0 $pad;
    .head-box {
      position: relative;
      .head {
        font-size: 63px;
      }
      .level-icon {
        position: absolute;
        right: 0;
        bottom: 0;
      }
    }
  }
  .level-text {
    margin-top: 40px;
    padding-left: $pad;
  }
}
.fn-8 {
  font-size: 8px;
}
.nav-two {
  margin: 21px 15px;
}
.table-box {
  border-radius: $rounded;
  margin: 0 18px;
  // padding: 0 13px;
    th,
    td {
      padding: 14px 10px;
      &:not(:last-of-type) {
        border-right: 1px solid $border-color;
      }
    }
    td {
      border-top: 1px solid $border-color;
    }
  .title {
    padding: 15px 0;
  }
}
.invate-info {
  margin: 13px 18px;
  border-radius: $rounded;
  padding: 16px $pad;
}
.bgb5{
	background: url(../../static/img/bgb5.png)no-repeat;
	background-size: 100% 100%;
}

</style>