feat: 添加邀请好友功能，支持分享链接和绑定邀请码，优化二维码展示样式

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>