wallet_app/src/views/login/backupMnemonic/index.vue

<template>
  <div class="container">
    <van-skeleton
      v-if="walletData.words.length == 0"
      style="width: 100%"
      title
      :row="8"
    />
    <div class="tag-container" v-else>
      <van-tag
        v-for="item in walletData.words"
        :key="item"
        plain
        type="primary"
        text-color="#4765DD"
        >{{ item }}</van-tag
      >
    </div>

    <div class="button-group">
      <a
        class="button-group-mnemonic a-link im-copy-btn"
        :data-clipboard-text="walletData.words"
      >
        {{ $t("login.CopyMnemonic") }}</a
      >
      <van-button
        class="btn"
        round
        block
        type="primary"
        native-type="submit"
        @click="next"
        :loading-text="$t('form.Loading')"
        :loading="loading"
      >
        {{ $t("login.BackupComplete") }}
      </van-button>
    </div>
  </div>
</template>

<script setup>
import { createAccent } from "@/api/path/login.api";
import { useWalletStore } from "@/stores/modules/walletStore";

// 一键复制文本
import { useCopy } from "@/hooks/use-copy.js";
useCopy();

const router = useRouter();
const walletStore = useWalletStore();

const loading = ref(false);
const walletData = ref({
  words: [],
});

const next = async () => {
  // 登录
  loading.value = true;
  await walletStore.loginWithPrivateKey();
  walletStore.$persist();
  loading.value = false;
  router.push({
    path: "/wallet",
  });
};

onMounted(async () => {
  const { data } = await createAccent({});
  walletData.value = JSON.parse(atob(data.content));
  walletStore.account = walletData.value.address;
  walletStore.privateKey = walletData.value.privateKey;
  walletStore.words = walletData.value.words;
});
</script>

<style scoped lang="less">
.tag-container {
  margin-top: 3px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 16px;
  padding: 27px;
  .van-tag {
    width: 87px;
    height: 33px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
  }
  .van-tag--plain {
    background: #eceffc;
  }
}

.button-group {
  margin: 33px 17px 0 17px;
  display: flex;
  flex-direction: column;
  align-items: center;
  .button-group-mnemonic {
    font-size: 14px;
    margin-bottom: 21px;
  }
}
.btn {
  background: @theme-color1;
  border-radius: 70px;
  font-family:
    PingFang SC,
    PingFang SC;
  font-weight: 600;
  font-size: 19px;
  color: #ffffff;
  height: 54px !important;
  border: none !important;
}
</style>