From feb8e28a0c84efed6f28c448db37cf1332232a86 Mon Sep 17 00:00:00 2001
From: Seven <qiqiwatermelon@gmail.com>
Date: Mon, 19 Jan 2026 16:56:59 +0700
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E9=82=80=E8=AF=B7?=
 =?UTF-8?q?=E5=A5=BD=E5=8F=8B=E5=8A=9F=E8=83=BD=EF=BC=8C=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E5=88=86=E4=BA=AB=E9=93=BE=E6=8E=A5=E5=92=8C=E7=BB=91=E5=AE=9A?=
 =?UTF-8?q?=E9=82=80=E8=AF=B7=E7=A0=81=EF=BC=8C=E4=BC=98=E5=8C=96=E4=BA=8C?=
 =?UTF-8?q?=E7=BB=B4=E7=A0=81=E5=B1=95=E7=A4=BA=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/invite/index.vue | 80 ++++++++++++++++++++++++++++++++++----
 1 file changed, 72 insertions(+), 8 deletions(-)

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");
 }
 </script>
 
@@ -130,6 +144,35 @@ function handleDownloadQR() {
           </div>
         </section>
 
+        <!-- 绑定邀请码入口 -->
+        <section class="mb-4">
+          <div class="bind-referral-card rounded-2xl p-4">
+            <div class="flex items-center justify-between">
+              <div class="flex items-center gap-3">
+                <div class="bg-white rounded-full p-3 shadow-sm">
+                  <ion-icon :icon="ticketOutline" class="text-2xl text-[#c41e3a]" />
+                </div>
+                <div>
+                  <div class="text-base font-bold text-[#1a1a1a] mb-1">
+                    绑定邀请码
+                  </div>
+                  <div class="text-xs text-[#999]">
+                    填写邀请码，享受更多奖励
+                  </div>
+                </div>
+              </div>
+              <ion-button
+                fill="solid"
+                size="small"
+                class="bind-btn"
+                @click="handleBindReferralCode"
+              >
+                去绑定
+              </ion-button>
+            </div>
+          </div>
+        </section>
+
         <section class="mb-4">
           <div class="flex items-center gap-2 mb-3">
             <img src="@/assets/images/icon.png" class="size-7">
@@ -243,7 +286,7 @@ function handleDownloadQR() {
             <div class="flex flex-col items-center">
               <div class="bg-white p-4 rounded-2xl shadow-md mb-4 border-4 border-[#c41e3a]/20">
                 <img
-                  src="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=-"
+                  :src="qrCodeUrl"
                   alt="邀请二维码"
                   class="w-50 h-50"
                 >
@@ -251,7 +294,7 @@ function handleDownloadQR() {
               <p class="text-xs text-[#999] text-center mb-3">
                 扫描二维码或长按保存分享给好友
               </p>
-              <ion-button
+              <!-- <ion-button
                 expand="block"
                 fill="outline"
                 class="download-qr-btn w-full"
@@ -259,7 +302,7 @@ function handleDownloadQR() {
               >
                 <ion-icon slot="start" :icon="downloadOutline" />
                 下载二维码
-              </ion-button>
+              </ion-button> -->
             </div>
           </div>
         </section>
@@ -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;
+}
 </style>