95 lines
2.9 KiB
Vue
95 lines
2.9 KiB
Vue
<script lang='ts' setup>
|
|
import { useQRCode } from "@vueuse/integrations/useQRCode";
|
|
import { copyOutline, qrCodeOutline, shareOutline } from "ionicons/icons";
|
|
import MaterialSymbolsDownload from "~icons/material-symbols/download";
|
|
import MaterialSymbolsUpload from "~icons/material-symbols/upload";
|
|
|
|
const userStore = useUserStore();
|
|
const { userProfile } = storeToRefs(userStore);
|
|
const url = computed(() => {
|
|
return `riwaapp://onchain-address?user=${userProfile.value?.user.email}`;
|
|
});
|
|
const qrcode = useQRCode(url, {
|
|
type: "image/webp",
|
|
rendererOpts: {
|
|
quality: 1,
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<IonPage>
|
|
<IonHeader>
|
|
<IonToolbar class="ion-toolbar">
|
|
<ion-buttons slot="start">
|
|
<ui-back-button />
|
|
</ion-buttons>
|
|
<ion-title>我的二维码</ion-title>
|
|
</IonToolbar>
|
|
</IonHeader>
|
|
<IonContent :fullscreen="true" class="ion-padding">
|
|
<div class="flex justify-center items-center flex-col mt-20">
|
|
<div class="w-[80vw] h-[80vw] bg-gray-50 max-w-130 max-h-130 rounded-[14px] p-4 flex flex-col justify-center items-center relative border border-text-900">
|
|
<div class="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col items-center">
|
|
<div class="p-1 rounded-full w-fit">
|
|
<ui-avatar class="size-15 border border-text-900" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ion-text-center w-full mt-5 flex flex-col items-center">
|
|
<div class="w-[50vw] h-[50vw] max-w-62.5 max-h-62.5 flex justify-center items-center">
|
|
<img :src="qrcode" alt="QR Code" class="w-[90%] h-[90%] rounded-2xl">
|
|
</div>
|
|
<div class="mt-4">
|
|
<ion-text color="secondary">
|
|
<div class="text-sm text-text-400">
|
|
Onchain address
|
|
</div>
|
|
</ion-text>
|
|
<ion-text>
|
|
<div class="mt-4px text-md font-semibold break-all">
|
|
0x1234567890abcdef1234
|
|
</div>
|
|
</ion-text>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ion-text-center flex justify-between gap-6 w-[50%] mt-14">
|
|
<div class="button">
|
|
<div class="icon">
|
|
<MaterialSymbolsUpload class="text-xl" />
|
|
</div>
|
|
<div class="text">
|
|
Share
|
|
</div>
|
|
</div>
|
|
<div class="button">
|
|
<div class="icon">
|
|
<MaterialSymbolsDownload class="text-xl" />
|
|
</div>
|
|
<div class="text">
|
|
Copy
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</IonContent>
|
|
</IonPage>
|
|
</template>
|
|
|
|
<style lang="css" scoped>
|
|
@reference "tailwindcss";
|
|
|
|
.button {
|
|
@apply flex flex-col items-center gap-2 text-[text-500] font-medium;
|
|
}
|
|
.icon {
|
|
@apply p-2.5 bg-(--ion-color-faint) rounded-full;
|
|
}
|
|
|
|
.text {
|
|
@apply text-sm;
|
|
}
|
|
</style>
|