feat(invitation): 添加邀请注册功能并支持小程序码

- 新增邀请注册功能，允许管理员生成邀请链接和二维码 - 支持网页注册和小程序码注册两种方式 - 实现自动建立推荐关系的功能 - 添加邀请统计和自定义小程序页面等扩展功能 - 优化用户体验和错误处理
2025-09-05 16:58:49 +08:00
parent cf74d2670c
commit 5da7d1b2ad
8 changed files with 1459 additions and 75 deletions
--- a/src/views/shop/shopAdmin/components/tests/invitation-modal.test.ts
+++ b/src/views/shop/shopAdmin/components/tests/invitation-modal.test.ts
@@ -0,0 +1,172 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { message } from 'ant-design-vue/es';
+import InvitationModal from '../invitation-modal.vue';
+
+// Mock dependencies
+vi.mock('@/api/miniprogram', () => ({
+  generateInviteRegisterCode: vi.fn().mockResolvedValue('https://example.com/miniprogram-code.jpg')
+}));
+
+vi.mock('ant-design-vue/es', () => ({
+  message: {
+    success: vi.fn(),
+    error: vi.fn()
+  }
+}));
+
+vi.mock('vue-router', () => ({
+  useRouter: () => ({
+    push: vi.fn()
+  })
+}));
+
+// Mock QrCode component
+vi.mock('@/components/QrCode/index.vue', () => ({
+  default: {
+    name: 'QrCode',
+    props: ['value', 'size', 'margin'],
+    template: '<div class="qr-code-mock">QR Code: {{ value }}</div>'
+  }
+}));
+
+describe('InvitationModal', () => {
+  let wrapper: any;
+
+  beforeEach(() => {
+    // Mock localStorage
+    Object.defineProperty(window, 'localStorage', {
+      value: {
+        getItem: vi.fn().mockReturnValue('123')
+      }
+    });
+
+    // Mock window.location
+    Object.defineProperty(window, 'location', {
+      value: {
+        origin: 'https://example.com'
+      }
+    });
+
+    wrapper = mount(InvitationModal, {
+      props: {
+        visible: true,
+        inviterId: 123
+      },
+      global: {
+        stubs: {
+          'a-modal': {
+            template: '<div class="modal-mock"><slot /></div>'
+          },
+          'a-typography-title': {
+            template: '<h4><slot /></h4>'
+          },
+          'a-typography-text': {
+            template: '<span><slot /></span>'
+          },
+          'a-input': {
+            template: '<input :value="value" />'
+          },
+          'a-button': {
+            template: '<button @click="$emit(\'click\')"><slot /></button>'
+          },
+          'a-radio-group': {
+            template: '<div><slot /></div>',
+            props: ['value'],
+            emits: ['update:value', 'change']
+          },
+          'a-radio-button': {
+            template: '<button><slot /></button>',
+            props: ['value']
+          },
+          'a-space': {
+            template: '<div class="space"><slot /></div>'
+          },
+          'a-spin': {
+            template: '<div class="spin">Loading...</div>'
+          }
+        }
+      }
+    });
+  });
+
+  it('should render correctly', () => {
+    expect(wrapper.find('.modal-mock').exists()).toBe(true);
+    expect(wrapper.text()).toContain('邀请新用户注册');
+  });
+
+  it('should generate correct invitation link', () => {
+    const expectedLink = 'https://example.com/register?inviter=123';
+    expect(wrapper.vm.invitationLink).toBe(expectedLink);
+  });
+
+  it('should show web QR code by default', () => {
+    expect(wrapper.vm.qrCodeType).toBe('web');
+    expect(wrapper.find('.qr-code-mock').exists()).toBe(true);
+  });
+
+  it('should copy invitation link', async () => {
+    // Mock clipboard API
+    Object.defineProperty(navigator, 'clipboard', {
+      value: {
+        writeText: vi.fn().mockResolvedValue(undefined)
+      }
+    });
+
+    await wrapper.vm.copyLink();
+    
+    expect(navigator.clipboard.writeText).toHaveBeenCalledWith(
+      'https://example.com/register?inviter=123'
+    );
+    expect(message.success).toHaveBeenCalledWith('邀请链接已复制到剪贴板');
+  });
+
+  it('should handle clipboard fallback', async () => {
+    // Mock clipboard API failure
+    Object.defineProperty(navigator, 'clipboard', {
+      value: undefined
+    });
+
+    // Mock document methods
+    const mockTextArea = {
+      value: '',
+      select: vi.fn(),
+      style: {}
+    };
+    
+    document.createElement = vi.fn().mockReturnValue(mockTextArea);
+    document.body.appendChild = vi.fn();
+    document.body.removeChild = vi.fn();
+    document.execCommand = vi.fn().mockReturnValue(true);
+
+    await wrapper.vm.copyLink();
+    
+    expect(document.createElement).toHaveBeenCalledWith('textarea');
+    expect(message.success).toHaveBeenCalledWith('邀请链接已复制到剪贴板');
+  });
+
+  it('should load miniprogram code when switching to miniprogram type', async () => {
+    await wrapper.setData({ qrCodeType: 'miniprogram' });
+    await wrapper.vm.onQRCodeTypeChange();
+    
+    expect(wrapper.vm.loadingMiniCode).toBe(false);
+    expect(wrapper.vm.miniProgramCodeUrl).toBe('https://example.com/miniprogram-code.jpg');
+  });
+
+  it('should reset state when modal opens', async () => {
+    // Set some state
+    await wrapper.setData({ 
+      qrCodeType: 'miniprogram',
+      miniProgramCodeUrl: 'some-url',
+      loadingMiniCode: true
+    });
+
+    // Trigger watch
+    await wrapper.setProps({ visible: false });
+    await wrapper.setProps({ visible: true });
+
+    expect(wrapper.vm.qrCodeType).toBe('web');
+    expect(wrapper.vm.miniProgramCodeUrl).toBe('');
+    expect(wrapper.vm.loadingMiniCode).toBe(false);
+  });
+});
--- a/src/views/shop/shopAdmin/components/invitation-modal.vue
+++ b/src/views/shop/shopAdmin/components/invitation-modal.vue
@@ -13,7 +13,7 @@
          分享以下链接或二维码，邀请用户注册并自动建立推荐关系
        </a-typography-text>
      </div>
-      
+
      <!-- 邀请链接 -->
      <div style="margin-bottom: 20px">
        <a-input
@@ -28,35 +28,76 @@
          </template>
        </a-input>
      </div>
-      
-      <!-- 二维码 -->
+
+      <!-- 二维码选择 -->
+      <div style="margin-bottom: 16px">
+        <a-radio-group v-model:value="qrCodeType" @change="onQRCodeTypeChange">
+          <a-radio-button value="web">网页二维码</a-radio-button>
+          <a-radio-button value="miniprogram">小程序码</a-radio-button>
+        </a-radio-group>
+      </div>
+
+      <!-- 二维码显示 -->
      <div style="margin-bottom: 20px">
        <div style="display: inline-block; padding: 10px; background: white; border-radius: 4px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1)">
-          <QrCode
+          <!-- 网页二维码 -->
+          <ele-qr-code-svg
+            v-if="qrCodeType === 'web'"
            :value="invitationLink"
            :size="200"
-            :margin="10"
          />
+          <!-- 小程序码 -->
+          <div v-else-if="qrCodeType === 'miniprogram'" style="width: 200px; height: 200px; display: flex; align-items: center; justify-content: center;">
+            <img
+              v-if="miniProgramCodeUrl"
+              :src="miniProgramCodeUrl"
+              style="width: 180px; height: 180px; object-fit: contain;"
+              alt="小程序码"
+              @error="onMiniProgramCodeError"
+              @load="onMiniProgramCodeLoad"
+            />
+            <a-spin v-else-if="loadingMiniCode" tip="正在生成小程序码..." />
+            <div v-else style="color: #999; text-align: center;">
+              <div>小程序码加载失败</div>
+              <a-button size="small" @click="loadMiniProgramCode">重新加载</a-button>
+            </div>
+          </div>
        </div>
      </div>
-      
+
      <!-- 使用说明 -->
      <div style="text-align: left; background: #f5f5f5; padding: 12px; border-radius: 4px; margin-bottom: 20px">
        <div style="font-weight: 500; margin-bottom: 8px">使用说明：</div>
        <div style="font-size: 12px; color: #666; line-height: 1.5">
-          1. 复制邀请链接发送给用户，或让用户扫描二维码<br>
-          2. 用户点击链接进入注册页面<br>
-          3. 用户完成注册后，系统自动建立推荐关系<br>
-          4. 您可以在"推荐关系管理"中查看邀请结果
+          <template v-if="qrCodeType === 'web'">
+            1. 复制邀请链接发送给用户，或让用户扫描网页二维码<br>
+            2. 用户点击链接或扫码进入注册页面<br>
+            3. 用户完成注册后，系统自动建立推荐关系<br>
+            4. 您可以在"推荐关系管理"中查看邀请结果
+          </template>
+          <template v-else>
+            1. 让用户扫描小程序码进入小程序<br>
+            2. 小程序会自动识别邀请信息<br>
+            3. 用户在小程序内完成注册后，系统自动建立推荐关系<br>
+            4. 您可以在"推荐关系管理"中查看邀请结果
+          </template>
        </div>
      </div>
-      
+
+      <!-- 调试信息 -->
+      <div v-if="showDebugInfo" style="margin-bottom: 16px; padding: 8px; background: #f0f0f0; border-radius: 4px; font-size: 12px;">
+        <div><strong>调试信息:</strong></div>
+        <div>邀请人ID: {{ inviterId }}</div>
+        <div>邀请链接: {{ invitationLink }}</div>
+        <div v-if="qrCodeType === 'miniprogram'">小程序码URL: {{ miniProgramCodeUrl }}</div>
+        <div>BaseUrl: {{ baseUrl }}</div>
+      </div>
+
      <!-- 操作按钮 -->
      <div>
        <a-space>
          <a-button @click="downloadQRCode">下载二维码</a-button>
          <a-button type="primary" @click="copyLink">复制链接</a-button>
-          <a-button @click="goToRefereeManage">查看推荐关系</a-button>
        </a-space>
      </div>
    </div>
@@ -67,7 +108,7 @@
 import { ref, computed, watch } from 'vue';
 import { message } from 'ant-design-vue/es';
 import { useRouter } from 'vue-router';
-import QrCode from '@/components/QrCode/index.vue';
+import { generateInviteCode } from '@/api/miniprogram';

 const emit = defineEmits<{
  (e: 'update:visible', visible: boolean): void;
@@ -80,11 +121,26 @@ const props = defineProps<{

 const router = useRouter();

+// 二维码类型
+const qrCodeType = ref<'web' | 'miniprogram'>('web');
+// 小程序码URL
+const miniProgramCodeUrl = ref<string>('');
+// 小程序码加载状态
+const loadingMiniCode = ref(false);
+// 显示调试信息
+const showDebugInfo = ref(false);
+// 基础URL（用于调试）
+const baseUrl = ref('');
+
+// 获取邀请人ID
+const inviterId = computed(() => {
+  return props.inviterId || Number(localStorage.getItem('UserId'));
+});
+
 // 生成邀请链接
 const invitationLink = computed(() => {
  const baseUrl = window.location.origin;
-  const inviterId = props.inviterId || localStorage.getItem('UserId');
-  return `${baseUrl}/register?inviter=${inviterId}`;
+  return `${baseUrl}/dealer/register?inviter=${inviterId.value}`;
 });

 // 复制链接
@@ -104,35 +160,128 @@ const copyLink = async () => {
  }
 };

-// 下载二维码
-const downloadQRCode = () => {
+// 加载小程序码
+const loadMiniProgramCode = async () => {
+  const currentInviterId = inviterId.value;
+  if (!currentInviterId) {
+    console.error('邀请人ID不存在');
+    message.error('邀请人ID不存在');
+    return;
+  }
+
+  console.log('开始加载小程序码，邀请人ID:', currentInviterId);
+  loadingMiniCode.value = true;
+
  try {
-    // 查找二维码canvas元素
-    const canvas = document.querySelector('.ant-modal-body canvas') as HTMLCanvasElement;
-    if (canvas) {
-      const link = document.createElement('a');
-      link.download = `邀请注册二维码.png`;
-      link.href = canvas.toDataURL();
-      link.click();
-      message.success('二维码已下载');
-    } else {
-      message.error('下载失败，请稍后重试');
-    }
-  } catch (e) {
-    message.error('下载失败');
+    const codeUrl = await generateInviteCode(currentInviterId);
+    console.log('小程序码生成成功:', codeUrl);
+    miniProgramCodeUrl.value = codeUrl;
+    message.success('小程序码加载成功');
+  } catch (e: any) {
+    console.error('加载小程序码失败:', e);
+    message.error(`小程序码加载失败: ${e.message}`);
+  } finally {
+    loadingMiniCode.value = false;
  }
 };

-// 跳转到推荐关系管理
-const goToRefereeManage = () => {
-  router.push('/shop/user-referee');
-  updateVisible(false);
+// 小程序码加载错误
+const onMiniProgramCodeError = () => {
+  console.error('小程序码图片加载失败');
+  message.error('小程序码显示失败');
+};
+
+// 小程序码加载成功
+const onMiniProgramCodeLoad = () => {
+  console.log('小程序码图片加载成功');
+};
+
+// 二维码类型切换
+const onQRCodeTypeChange = () => {
+  if (qrCodeType.value === 'miniprogram' && !miniProgramCodeUrl.value) {
+    loadMiniProgramCode();
+  }
+};
+
+// 下载二维码
+const downloadQRCode = () => {
+  try {
+    if (qrCodeType.value === 'web') {
+      // 下载网页二维码 - 查找SVG元素
+      const svgElement = document.querySelector('.ant-modal-body svg') as SVGElement;
+      if (svgElement) {
+        // 将SVG转换为Canvas再下载
+        const canvas = document.createElement('canvas');
+        const ctx = canvas.getContext('2d');
+        const img = new Image();
+
+        // 获取SVG的XML字符串
+        const svgData = new XMLSerializer().serializeToString(svgElement);
+        const svgBlob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
+        const url = URL.createObjectURL(svgBlob);
+
+        img.onload = () => {
+          canvas.width = img.width || 200;
+          canvas.height = img.height || 200;
+          ctx?.drawImage(img, 0, 0);
+
+          const link = document.createElement('a');
+          link.download = `邀请注册二维码.png`;
+          link.href = canvas.toDataURL('image/png');
+          link.click();
+
+          URL.revokeObjectURL(url);
+          message.success('二维码已下载');
+        };
+
+        img.onerror = () => {
+          URL.revokeObjectURL(url);
+          message.error('二维码下载失败');
+        };
+
+        img.src = url;
+      } else {
+        message.error('未找到二维码，请稍后重试');
+      }
+    } else {
+      // 下载小程序码
+      if (miniProgramCodeUrl.value) {
+        const link = document.createElement('a');
+        link.download = `邀请小程序码.png`;
+        link.href = miniProgramCodeUrl.value;
+        link.target = '_blank';
+        link.click();
+        message.success('小程序码已下载');
+      } else {
+        message.error('小程序码未加载');
+      }
+    }
+  } catch (e) {
+    console.error('下载失败:', e);
+    message.error('下载失败');
+  }
 };

 // 更新visible
 const updateVisible = (value: boolean) => {
  emit('update:visible', value);
 };
+
+// 监听弹窗显示状态
+watch(() => props.visible, (visible) => {
+  if (visible) {
+    // 重置状态
+    qrCodeType.value = 'web';
+    miniProgramCodeUrl.value = '';
+    loadingMiniCode.value = false;
+    showDebugInfo.value = false;
+
+    // 获取调试信息
+    import('@/config/setting').then(({ SERVER_API_URL }) => {
+      baseUrl.value = SERVER_API_URL;
+    });
+  }
+});
 </script>

 <style lang="less" scoped>