RWACha-DAPP/src/views/mine/createCode.vue

<template>
  <div class="product-detail-page">
    <!-- 顶部返回按钮 -->
    <div class="head">
      <img @click="back" src="@/assets/images/back.png" class="arrow_img" />
      <span>{{ $t('lang499') }}</span>
    </div>
    <div class="box">
      <div class="box_item">
        <div class="flex">
          <img :src="userInfo.avatar" alt="" class="pic" />

          <div class="right">
            <div class="name_box">
              <div class="name">UID：{{ userInfo.nickname }}</div>
              <div class="name">{{ $t('lang35') }}{{ userInfo.address.slice(0, 6) + '****' + userInfo.address.slice(userInfo.address.length - 6, userInfo.address.length) || '' }}</div>
              <div class="time">{{ $t('lang506') }}：{{ dateFormatFn(userInfo.create_time)  || '' }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="level_box">
        <div v-for="(item, index) in levels" :key="index" :class="['level_item', { level_item_act: index == levelIndex }]" @click="changeCode(item, index)">
          <span>{{ item.name }}</span>
          <span>{{ $t('lang507') }}{{ item.value }}</span>
        </div>
      </div>
      <div class="create_btn" @click="generate">{{ $t('lang508') }}</div>
      <div class="bottom">
        <div class="tip">{{ $t('lang509') }}</div>
        <div class="code_box">
          <div class="code_box_name">
            {{ levels[levelIndex].name }}
          </div>
          <div class="code_item" v-if="normal.length > 0">
            <div class="code copys" v-for="(item, index) in normal" :key="index" @click="copy" :data-clipboard-text="item.code_no">
              {{ item.code_no }}
            </div>
          </div>
          <div class="no_code" v-else>
            {{ $t('lang60') }}
          </div>
        </div>
        <div class="tip1">{{ $t('lang511') }}</div>
      </div>
      <div class="bottom">
        <div class="tip">{{ $t('lang510') }}</div>
        <div class="code_box">
          <div class="code_box_name">
            {{ levels[levelIndex].name }}
          </div>
          <div class="code_item" v-if="used.length > 0">
            <div class="code" v-for="(item, index) in used" :key="index">
              {{ item.code_no }}
            </div>
          </div>
          <div class="no_code" v-else>
            {{ $t('lang60') }}
          </div>
        </div>
      </div>
    </div>

    <van-overlay :show="loading">
      <div class="wrapper" @click.stop>
        <van-loading type="spinner" class="loading" />
      </div>
    </van-overlay>
  </div>
</template>
<script>
import { homeApi } from '@/api/index';
import Clipboard from 'clipboard';
import { dateFormat, typemat } from '@/utils/formatTool.js';
export default {
  data() {
    return {
      loading: false,
      userInfo: {
        address: '',
      },
      levels: [
        {
          name: this.$t('lang513'),
          value: 0,
          index: 0,
        },
        {
          name: this.$t('lang503'),
          value: 0,
          index: 1,
        },
        {
          name: this.$t('lang504'),
          value: 0,
          index: 2,
        },
        {
          name: this.$t('lang505'),
          value: 0,
          index: 3,
        },
      ],
      levelIndex: 0,
      normal: [],
      used: [],
    };
  },
  mounted() {
    this.getUserInfo();
    this.getActivateCodeList();
    this.getActivateCodeRemaining();
  },
  methods: {
    back() {
      this.$router.back();
    },
    getUserInfo() {
      homeApi.getUserInfo({}).then(res => {
        if (res.code == 200) {
          this.userInfo = res.data;
          console.log(this.userInfo);
        } else {
        }
      });
    },
    // 激活码列表
    getActivateCodeList() {
      // level(0:V1 1:V2 2:V3 3:V4)
      homeApi
        .activateCodeList({
          level: this.levels[this.levelIndex].index,
        })
        .then(res => {
          if (res.code == 200) {
            this.normal = res.data.normal;
            this.used = res.data.used;
          } else {
          }
        });
    },
    // 剩余激活数量
    getActivateCodeRemaining() {
      homeApi.activateCodeRemaining({}).then(res => {
        if (res.code == 200) {
          this.levels[0].value = res.data.level_v1;
          this.levels[1].value = res.data.level_v2;
          this.levels[2].value = res.data.level_v3;
          this.levels[3].value = res.data.level_v4;
        } else {
        }
      });
    },
    generate() {
      homeApi.activateCodeGenerate({ level: this.levels[this.levelIndex].index }).then(res => {
        if (res.code == 200) {
          this.$toast(this.$t('lang152'));
          this.getActivateCodeList();
          this.getActivateCodeRemaining();
        } else {
        }
      });
    },
    navigatorTo(name, id) {
      if (name == 'service') {
        console.log(this.$i18n.locale);
        if (this.$i18n.locale == 'zh-cn') {
          this.$router.push({ name, query: { id: this.configInfo.zh_serve_agree } });
        } else if (this.$i18n.locale == 'en') {
          this.$router.push({ name, query: { id: this.configInfo.en_serve_agree } });
        }
      } else {
        this.$router.push({ name, query: { id: id } });
      }
    },
    changeCode(item, index) {
      this.levelIndex = index;
      this.getActivateCodeList();
    },
    copy() {
      // if (this.userinfo.address) {
      var clipboard = new Clipboard('.copys');
      clipboard.on('success', e => {
        this.$toast(this.$t('lang45'));
        clipboard.destroy(); // 释放内存
      });
      clipboard.on('error', e => {
        this.$toast(this.$t('lang46'));
        clipboard.destroy(); // 释放内存
      });
      // }
    },
    dateFormatFn(date) {
      return dateFormat(new Date(date * 1000), 'yyyy-MM-dd hh:mm:ss');
    },
  },
};
</script>
<style lang="less" scoped>
.head {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(#000, 0.8);
  letter-spacing: 1.5px;
  font-weight: 550;
  background: #fff;
  padding: 14px 0;
  z-index: 99;
  .arrow_img {
    position: absolute;
    left: 20px;
    width: 10px;
    height: 16px;
    // transform: translate(0, -50%);
  }
}
.box {
  width: 100%;
  height: 100vh;
  color: #000;
  font-size: 13px;
  padding: 10px 16px;
  margin: 60px 0;
  box-sizing: border-box;
  background-color: #fff;
  .grey {
    color: #535353;
  }
  .black {
    color: #000;
  }
  .grey-8 {
    color: #535353;
  }

  &_item {
    font-size: 12px;
    letter-spacing: 1px;
    padding: 10px 0;
    margin-bottom: 10px;
    border-bottom: 1px solid #dadada;
    background-color: #fff;
    .pic {
      width: 70px;
      height: 70px;
      border-radius: 8px;
    }

    .right {
      padding-left: 14px;
      .name_box {
        color: #808080;
        font-size: 11px;
        line-height: 200%;

        .name {
          color: #000;
          font-size: 13px;
        }
      }
      .qiu {
        padding-top: 8px;
        &_price {
          font-size: 17px;
          font-weight: 600;
          margin-left: -2px;
          margin-top: -3px;
        }
      }
    }
  }
  .level_box {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 10px;
    .level_item {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      width: 48.5%;
      padding: 8px 0;
      margin-bottom: 10px;
      border-radius: 6px;
      background-color: #f5f5f5;
      span:first-child {
        font-size: 13px;
        margin-bottom: 5px;
      }
      span:last-child {
        font-size: 12px;
        color: #292929;
      }
    }
    .level_item_act {
      color: #fff;
      background-color: #1dc297;

      span:last-child {
        color: #f1f1f1;
      }
    }
  }

  .create_btn {
    color: #fff;
    text-align: center;
    padding: 8px 0;
    border-radius: 20px;
    margin-top: 12px;
    background-color: #1dc297;
  }
  .bottom {
    margin-top: 16px;

    .tip {
      font-size: 12px;
      color: #5a5a5a;
      padding: 6px 0 10px;
    }
    .tip1 {
      font-size: 11px;
      color: #747474;
      padding: 6px 0 8px;
    }

    .code_box {
      padding: 10px;
      border-radius: 6px;
      background-color: #ebebeb;

      &_name {
        font-size: 12px;
        color: #5e5e5e;
        margin-bottom: 10px;
      }

      .code_item {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* 一行 3 列，每列平分宽度 */
        gap: 10px; /* 元素之间的间距，可根据需要调整 */
        margin: 0px 0 6px;
        .code {
          // width: 30%;
          color: #292929;
          text-align: center;
          font-size: 12px;
          padding: 4px 0;
          // margin: 10px 0 0;
          border-radius: 6px;
          background-color: #fff;
        }
        .copys {
          color: #fff;
          background-color: #1DC297
        }
      }
      .no_code {
        font-size: 12px;
        color: #5e5e5e;
        text-align: center;
        margin: 10px 0;
      }
    }
  }
}
.flex {
  display: flex;
  align-items: center;
}
.sb {
  justify-content: space-between;
}

/deep/.van-button--disabled {
  opacity: 0.6;
}
.wrapper {
  // display: flex;
  // justify-content: center;
  .loading {
    position: absolute;
    left: 46%;
    top: 46%;
  }
}
</style>