diff --git a/src/views/invite/index.vue b/src/views/invite/index.vue index e0614e8..81eb222 100644 --- a/src/views/invite/index.vue +++ b/src/views/invite/index.vue @@ -10,9 +10,15 @@ import { } from "ionicons/icons"; import { client, safeClient } from "@/api"; +const router = useRouter(); const userStore = useUserStore(); const { userProfile } = storeToRefs(userStore); const { data } = safeClient(client.api.referrals.summary.get()); +const qrCodeUrl = computed(() => { + const inviteLink = `${location.origin}/bind_invite?referralCode=${userProfile.value?.referralCode}`; + return `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${encodeURIComponent(inviteLink)}`; +}); +const { share, isSupported } = useShare(); // 复制状态 const copyStatus = ref({ @@ -58,13 +64,21 @@ async function handleCopy(text?: string, type: "link" | "code" | "download" = "l } function handleInvite() { - console.log("立即邀请"); - // TODO: 实现分享功能 + const inviteLink = `${location.origin}/bind_invite?referralCode=${userProfile.value?.referralCode}`; + if (isSupported.value) { + share({ + title: "邀请好友加入", + text: "使用我的邀请码注册,享受更多奖励!", + url: inviteLink, + }); + } + else { + console.warn("分享功能不支持,无法邀请好友"); + } } -function handleDownloadQR() { - console.log("下载二维码"); - // TODO: 实现下载二维码功能 +function handleBindReferralCode() { + router.push("/bind_invite"); } @@ -130,6 +144,35 @@ function handleDownloadQR() { + +
+
+
+
+
+ +
+
+
+ 绑定邀请码 +
+
+ 填写邀请码,享受更多奖励 +
+
+
+ + 去绑定 + +
+
+
+
@@ -243,7 +286,7 @@ function handleDownloadQR() {
邀请二维码 @@ -251,7 +294,7 @@ function handleDownloadQR() {

扫描二维码或长按保存分享给好友

- 下载二维码 - + -->
@@ -340,4 +383,25 @@ function handleDownloadQR() { .download-qr-btn::part(native) { font-weight: 600; } + +.bind-referral-card { + background: linear-gradient(135deg, #fff7f0 0%, #ffe8e8 100%); + border: 2px dashed #c41e3a; +} + +.bind-btn { + --background: #c41e3a; + --background-activated: #8b1a2e; + --border-radius: 20px; + --padding-start: 20px; + --padding-end: 20px; + height: 36px; + font-weight: 600; + font-size: 14px; + text-transform: none; +} + +.bind-btn::part(native) { + font-weight: 600; +}