# 发送问卷链接到企业微信群聊 - 使用指南

## 📋 功能说明

在确认需求阶段或交付执行阶段，将项目需求调查问卷链接发送到当前群聊，方便客户填写。

---

## 🎯 实现方式

### 方式1：发送图文消息（推荐）

**效果**：群聊中显示卡片式问卷链接，带标题、描述和封面图

**代码示例**：
```typescript
// 在stage-requirements.component.ts或stage-delivery.component.ts中
async sendSurveyLinkToChat(): Promise<void> {
  try {
    console.log('📤 准备发送问卷链接到群聊...');
    
    // 1. 构建问卷链接
    const surveyUrl = `https://app.fmode.cn/dev/yss/#/wxwork/${this.cid}/project/survey/project/${this.projectId}`;
    console.log('🔗 问卷链接:', surveyUrl);
    
    // 2. 发送图文消息
    await this.wxworkSDKService.sendChatMessage({
      msgtype: 'news',
      news: {
        link: surveyUrl,
        title: '📋 项目需求调查问卷',
        desc: '请填写项目需求，我们会根据您的需求进行设计',
        imgUrl: 'https://file-cloud.fmode.cn/storage/survey-cover.jpg' // 封面图
      }
    });
    
    console.log('✅ 问卷链接已发送到群聊');
    window?.fmode?.toast?.success?.('问卷链接已发送到群聊');
  } catch (error: any) {
    console.error('❌ 发送问卷链接失败:', error);
    
    let errorMessage = '发送失败，请重试';
    if (error?.errMsg?.includes('no permission')) {
      errorMessage = '权限不足，请联系管理员配置sendChatMessage权限';
    } else if (error?.errMsg?.includes('not in session')) {
      errorMessage = '请从群聊侧边栏打开应用';
    }
    
    window?.fmode?.alert?.(errorMessage);
  }
}
```

### 方式2：发送纯文本消息

**效果**：群聊中显示纯文本问卷链接

**代码示例**：
```typescript
async sendSurveyLinkAsText(): Promise<void> {
  try {
    const surveyUrl = `https://app.fmode.cn/dev/yss/#/wxwork/${this.cid}/project/survey/project/${this.projectId}`;
    
    await this.wxworkSDKService.sendChatMessage({
      msgtype: 'text',
      text: {
        content: `📋 项目需求调查问卷\n\n请点击以下链接填写项目需求：\n${surveyUrl}\n\n我们会根据您的需求进行设计，感谢配合！`
      }
    });
    
    console.log('✅ 问卷链接已发送');
    window?.fmode?.toast?.success?.('问卷链接已发送');
  } catch (error) {
    console.error('❌ 发送失败:', error);
    window?.fmode?.alert?.('发送失败，请重试');
  }
}
```

---

## 🔧 完整实现步骤

### 步骤1：添加导入（如果还没有）
**文件**：`stage-requirements.component.ts`

```typescript
import { WxworkSDKService } from '../../../services/wxwork-sdk.service';
```

### 步骤2：注入服务
```typescript
constructor(
  // ... 其他服务
  private wxworkSDKService: WxworkSDKService
) {}
```

### 步骤3：初始化SDK（在ngOnInit中）
```typescript
async ngOnInit() {
  // 获取路由参数
  this.cid = this.route.parent?.snapshot.paramMap.get('cid') || '';
  this.projectId = this.route.parent?.snapshot.paramMap.get('projectId') || '';
  
  // 🔥 初始化企业微信SDK
  if (this.cid) {
    console.log('🔐 初始化企业微信SDK...');
    try {
      await this.wxworkSDKService.initialize(this.cid, 'project');
      console.log('✅ 企业微信SDK初始化成功');
    } catch (error) {
      console.error('❌ 企业微信SDK初始化失败:', error);
    }
  }
  
  // ... 其他初始化
}
```

### 步骤4：添加发送方法
```typescript
/**
 * 发送问卷链接到群聊
 */
async sendSurveyLinkToChat(): Promise<void> {
  if (!this.cid || !this.projectId) {
    window?.fmode?.alert?.('缺少必要参数，无法发送问卷链接');
    return;
  }
  
  try {
    console.log('📤 准备发送问卷链接...');
    console.log('  CID:', this.cid);
    console.log('  ProjectID:', this.projectId);
    
    // 构建问卷URL
    const surveyUrl = `https://app.fmode.cn/dev/yss/#/wxwork/${this.cid}/project/survey/project/${this.projectId}`;
    console.log('🔗 问卷URL:', surveyUrl);
    
    // 发送图文消息
    await this.wxworkSDKService.sendChatMessage({
      msgtype: 'news',
      news: {
        link: surveyUrl,
        title: '📋 项目需求调查问卷',
        desc: '请填写项目需求，我们会根据您的需求进行设计。点击填写问卷 →',
        imgUrl: 'https://file-cloud.fmode.cn/storage/company/cDL6R1hgSi/assets/survey-cover.jpg'
      }
    });
    
    console.log('✅ 问卷链接发送成功');
    window?.fmode?.toast?.success?.('✅ 问卷链接已发送到群聊');
    
  } catch (error: any) {
    console.error('❌ 发送问卷链接失败:', error);
    console.error('  错误消息:', error?.errMsg);
    console.error('  错误代码:', error?.errCode);
    
    // 友好的错误提示
    let errorMessage = '发送失败，请重试';
    if (error?.errMsg?.includes('no permission')) {
      errorMessage = '❌ 权限不足\n请联系管理员在企微后台配置sendChatMessage权限';
    } else if (error?.errMsg?.includes('not in session')) {
      errorMessage = '❌ 请从群聊侧边栏打开应用\n不能从工作台打开';
    } else if (error?.message === 'JSSDK注册失败') {
      errorMessage = '❌ JSSDK注册失败\n请从群聊侧边栏重新打开应用';
    }
    
    window?.fmode?.alert?.(errorMessage);
  }
}
```

### 步骤5：添加UI按钮
**文件**：`stage-requirements.component.html`

```html
<!-- 在合适的位置添加发送问卷按钮 -->
<div class="survey-section">
  <h3>需求调研</h3>
  <p>请客户填写需求调查问卷</p>
  
  <button class="btn-send-survey" (click)="sendSurveyLinkToChat()">
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
      <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/>
    </svg>
    <span>发送问卷链接到群聊</span>
  </button>
</div>
```

### 步骤6：添加样式
**文件**：`stage-requirements.component.scss`

```scss
.survey-section {
  padding: 20px;
  background: #f9fafb;
  border-radius: 8px;
  margin: 20px 0;
  
  h3 {
    margin: 0 0 8px 0;
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
  }
  
  p {
    margin: 0 0 16px 0;
    font-size: 14px;
    color: #6b7280;
  }
  
  .btn-send-survey {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #4f46e5;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    
    &:hover {
      background: #4338ca;
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
    }
    
    &:active {
      transform: translateY(0);
    }
    
    svg {
      flex-shrink: 0;
    }
  }
}
```

---

## 🎨 UI效果对比

### 方式1：图文消息（news）
**群聊中显示**：
```
┌──────────────────────────────────┐
│ 📋 项目需求调查问卷              │
│                                  │
│ [封面图]                         │
│                                  │
│ 请填写项目需求，我们会根据您     │
│ 的需求进行设计。点击填写问卷 →   │
└──────────────────────────────────┘
```
✅ **优点**：视觉效果好，带封面图，点击跳转

### 方式2：纯文本（text）
**群聊中显示**：
```
📋 项目需求调查问卷

请点击以下链接填写项目需求：
https://app.fmode.cn/dev/yss/#/wxwork/...

我们会根据您的需求进行设计，感谢配合！
```
✅ **优点**：简单直接，兼容性好

---

## 🧪 测试步骤

### 1. 从群聊侧边栏打开应用
```
群聊 → 右上角"..." → 应用 → 你的应用
```

### 2. 进入确认需求阶段

### 3. 点击"发送问卷链接到群聊"按钮

### 4. 检查控制台日志
```
📤 准备发送问卷链接...
  CID: cDL6R1hgSi
  ProjectID: xxx
🔗 问卷URL: https://...
🔍 [sendChatMessage] ========== 开始发送消息 ==========
🔍 [sendChatMessage] 消息类型: news
✅ [sendChatMessage] 消息发送成功!
✅ 问卷链接发送成功
```

### 5. 检查群聊中是否显示问卷链接卡片

### 6. 点击卡片，验证是否跳转到问卷页面

---

## 🔍 常见问题

### Q1: 发送后群聊中没有显示
**检查清单**：
1. ✅ 是否从群聊侧边栏打开应用？
2. ✅ 控制台是否显示"消息发送成功"？
3. ✅ 是否有报错信息？
4. ✅ 企微后台是否开启sendChatMessage权限？

### Q2: 点击卡片无法跳转
**原因**：问卷URL格式错误或域名未配置

**检查**：
```typescript
// URL格式应该是：
https://app.fmode.cn/dev/yss/#/wxwork/{cid}/project/survey/project/{projectId}

// 确保cid和projectId都有值
console.log('CID:', this.cid);
console.log('ProjectID:', this.projectId);
```

### Q3: 提示"Permission Denied"
**解决**：
1. 企微管理后台 → 应用管理 → 你的应用
2. 接口权限 → 开启"发送消息到聊天中"
3. 保存并等待5分钟生效

### Q4: 封面图不显示
**原因**：imgUrl路径错误或图片不可访问

**解决**：
```typescript
// 确保使用可公开访问的图片URL
imgUrl: 'https://file-cloud.fmode.cn/storage/company/cDL6R1hgSi/assets/survey-cover.jpg'

// 或者使用项目中的图片
imgUrl: 'https://app.fmode.cn/dev/yss/assets/survey-cover.png'
```

---

## 📝 完整代码示例

### stage-requirements.component.ts
```typescript
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { WxworkSDKService } from '../../../services/wxwork-sdk.service';

@Component({
  selector: 'app-stage-requirements',
  templateUrl: './stage-requirements.component.html',
  styleUrls: ['./stage-requirements.component.scss']
})
export class StageRequirementsComponent implements OnInit {
  cid: string = '';
  projectId: string = '';
  
  constructor(
    private route: ActivatedRoute,
    private wxworkSDKService: WxworkSDKService
  ) {}
  
  async ngOnInit() {
    // 获取路由参数
    this.cid = this.route.parent?.snapshot.paramMap.get('cid') || '';
    this.projectId = this.route.parent?.snapshot.paramMap.get('projectId') || '';
    
    // 初始化企业微信SDK
    if (this.cid) {
      console.log('🔐 初始化企业微信SDK...');
      try {
        await this.wxworkSDKService.initialize(this.cid, 'project');
        console.log('✅ 企业微信SDK初始化成功');
      } catch (error) {
        console.error('❌ 企业微信SDK初始化失败:', error);
      }
    }
    
    // ... 其他初始化
  }
  
  /**
   * 发送问卷链接到群聊
   */
  async sendSurveyLinkToChat(): Promise<void> {
    if (!this.cid || !this.projectId) {
      window?.fmode?.alert?.('缺少必要参数，无法发送问卷链接');
      return;
    }
    
    try {
      console.log('📤 准备发送问卷链接...');
      
      // 构建问卷URL
      const surveyUrl = `https://app.fmode.cn/dev/yss/#/wxwork/${this.cid}/project/survey/project/${this.projectId}`;
      console.log('🔗 问卷URL:', surveyUrl);
      
      // 发送图文消息
      await this.wxworkSDKService.sendChatMessage({
        msgtype: 'news',
        news: {
          link: surveyUrl,
          title: '📋 项目需求调查问卷',
          desc: '请填写项目需求，我们会根据您的需求进行设计。点击填写问卷 →',
          imgUrl: 'https://file-cloud.fmode.cn/storage/company/cDL6R1hgSi/assets/survey-cover.jpg'
        }
      });
      
      console.log('✅ 问卷链接发送成功');
      window?.fmode?.toast?.success?.('✅ 问卷链接已发送到群聊');
      
    } catch (error: any) {
      console.error('❌ 发送问卷链接失败:', error);
      
      let errorMessage = '发送失败，请重试';
      if (error?.errMsg?.includes('no permission')) {
        errorMessage = '❌ 权限不足\n请联系管理员配置sendChatMessage权限';
      } else if (error?.errMsg?.includes('not in session')) {
        errorMessage = '❌ 请从群聊侧边栏打开应用';
      } else if (error?.message === 'JSSDK注册失败') {
        errorMessage = '❌ JSSDK注册失败\n请从群聊侧边栏重新打开应用';
      }
      
      window?.fmode?.alert?.(errorMessage);
    }
  }
}
```

---

**文档创建时间**：2025-11-30 13:50  
**适用阶段**：确认需求、交付执行  
**关键方法**：`wxworkSDKService.sendChatMessage()`  
**消息类型**：news（图文）或 text（纯文本）