支付宝下单和其他细节优化

src/components/SettingsInviteDialog.vue

@@ -0,0 +1,107 @@
+<template>
+  <!-- 邀请注册送会员弹窗 -->
+  <Teleport to="body">
+    <div v-if="modelValue" class="settings-invite-overlay" @click="$emit('update:modelValue', false)">
+      <div class="settings-invite-dialog" @click.stop>
+        <!-- 关闭按钮 -->
+        <span class="settings-invite-dialog__close" @click="$emit('update:modelValue', false)">✕</span>
+
+        <!-- 标题 -->
+        <h2 class="settings-invite-dialog__title">邀请好友免费获取7天会员权益</h2>
+
+        <!-- 邀请链接区域 -->
+        <div class="settings-invite-dialog__link-box">
+          <p class="settings-invite-dialog__link-text">来一起领取AI求职助手会员！{{ inviteText }}</p>
+        </div>
+
+        <!-- 复制链接按钮 -->
+        <button class="settings-invite-dialog__copy-btn" @click="handleCopy">复制链接</button>
+
+        <!-- 步骤说明 -->
+        <p class="settings-invite-dialog__steps-tip">仅需 3 步可免费获取会员权益</p>
+
+        <div class="settings-invite-dialog__step">
+          <div class="settings-invite-dialog__step-title">第1步：分享专属邀请链接</div>
+          <p class="settings-invite-dialog__step-desc">点击"复制链接"，并发送给好友</p>
+        </div>
+        <div class="settings-invite-dialog__step">
+          <div class="settings-invite-dialog__step-title">第2步：好友完成新用户首次体验</div>
+          <p class="settings-invite-dialog__step-desc">链接 24 小时内有效，好友在时效内体验AI求职助手</p>
+        </div>
+        <div class="settings-invite-dialog__step">
+          <div class="settings-invite-dialog__step-title">第3步：分享人获得7天会员权益</div>
+          <p class="settings-invite-dialog__step-desc">免费会员权益一年内有效，AI助力加速上岸</p>
+        </div>
+
+        <!-- 统计数据 -->
+        <div class="settings-invite-dialog__stats">
+          <div class="settings-invite-dialog__stat-item">
+            <div class="settings-invite-dialog__stat-label">累计获得会员天数</div>
+            <div class="settings-invite-dialog__stat-value">{{ totalDays }}天</div>
+          </div>
+          <div class="settings-invite-dialog__stat-item">
+            <div class="settings-invite-dialog__stat-label">累计邀请好友</div>
+            <div class="settings-invite-dialog__stat-value">{{ totalFriends }}位</div>
+          </div>
+        </div>
+
+        <!-- 活动规则折叠 -->
+        <div class="settings-invite-dialog__rules" @click="showRules = !showRules">
+          <span class="settings-invite-dialog__rules-label">活动规则</span>
+          <svg class="settings-invite-dialog__rules-arrow" :class="{ 'settings-invite-dialog__rules-arrow--open': showRules }" viewBox="0 0 12 12" fill="none">
+            <path d="M3 4.5L6 7.5L9 4.5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </div>
+        <div v-if="showRules" class="settings-invite-dialog__rules-content">
+          <p>1. 每成功邀请一位新用户注册并完成首次体验，邀请人可获得 7 天免费会员权益。</p>
+          <p>2. 邀请链接有效期为 24 小时，过期需重新生成。</p>
+          <p>3. 累计获得的会员天数一年内有效，超过一年未使用的天数将自动失效。</p>
+          <p>4. 同一被邀请人仅计算一次，重复邀请不累计奖励。</p>
+          <p>5. 本活动最终解释权归平台所有。</p>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useStore } from 'vuex'
+import { ElMessage } from 'element-plus'
+
+/** 组件 Props */
+defineProps<{ modelValue: boolean }>()
+
+/** 组件 Emits */
+defineEmits<{ (e: 'update:modelValue', value: boolean): void }>()
+
+const store = useStore()
+
+/** 活动规则展开状态 */
+const showRules = ref(false)
+
+/** 累计获得会员天数（暂用模拟数据） */
+const totalDays = ref(1)
+
+/** 累计邀请好友数（暂用模拟数据） */
+const totalFriends = ref(1)
+
+/** 用户邀请码 — 从全局 store 读取 */
+const inviteCode = computed(() => store.state.userInfo?.inviteCode || '')
+
+/** 邀请链接文案 */
+const inviteText = computed(() => {
+  const code = inviteCode.value
+  return `https://www.qiuzhizhushou.com/invite_code=${code}，点击链接进入活动！`
+})
+
+/** 复制链接到剪贴板 */
+async function handleCopy() {
+  try {
+    await navigator.clipboard.writeText(inviteText.value)
+    ElMessage.success('链接已复制')
+  } catch {
+    ElMessage.error('复制失败，请手动复制')
+  }
+}
+</script>