完成测试邮件

src/api/email/index.js

@@ -56,3 +56,13 @@ export function getEmailRecordList(params) {
     params
   })
 }
+
+
+// 发送邮件
+export function sendEmail(data) {
+  return request({
+    url: '/api/admin/email-record/send-example',
+    method: 'post',
+    data
+  })
+}

src/views/email/index.vue

@@ -281,10 +281,19 @@
                   </el-date-picker>
                 </el-form-item>
                 
-                <el-form-item>
+                <el-form-item label="测试邮箱">
-                  <el-checkbox v-model="sendForm.testSend">
+                  <el-input
-                    先发送测试邮件到我的邮箱
+                    v-model="sendForm.testEmail"
-                  </el-checkbox>
+                    placeholder="请输入测试邮箱地址"
+                    style="width: 100%;">
+                  </el-input>
+                </el-form-item>
+                
+                <el-form-item v-if="sendForm.testEmail">
+                  <el-button type="warning" @click="sendTestEmail" :loading="testSending">
+                    <i class="el-icon-s-promotion"></i>
+                    发送测试邮件
+                  </el-button>
                 </el-form-item>
               </el-form>
             </el-col>
@@ -623,9 +632,8 @@
 
 <script>
 import { saveEmailTemplate, getEmailTemplateList, deleteEmailTemplate } from '@/api/email/index'
-import { getToken } from '@/utils/auth'
 import { uploadEmailRecord } from '@/api/email/index'
-import { saveEmailRecord, getEmailRecordList } from '@/api/email/index'
+import { saveEmailRecord, getEmailRecordList, sendEmail } from '@/api/email/index'
 
 export default {
   name: 'EmailManagement',
@@ -645,6 +653,7 @@ export default {
       refreshing: false,
       currentPage: 1,
       pageSize: 20,
+      testSending: false,
       
       // 表单数据
       templateForm: {
@@ -658,7 +667,7 @@ export default {
         subject: '',
         sendMode: 'now',
         scheduleTime: null,
-        testSend: false
+        testEmail: ''
       },
 
       // 邮件模板数据
@@ -716,6 +725,7 @@ export default {
       return this.replaceVariables(this.sendForm.subject, this.sampleUser)
     },
     contentPreview() {
+      console.log(this.sampleUser)
       if (!this.selectedTemplate) return ''
       return this.replaceVariables(this.selectedTemplate.content, this.sampleUser)
     },
@@ -831,7 +841,7 @@ export default {
 
     formatTemplateContent(content) {
       return content.replace(/\n/g, '<br>')
-                   .replace(/\{\{([^}]+)\}\}/g, '<span class="variable-tag">{{$1}}</span>')
+        .replace(/\{\{([^}]+)\}\}/g, '<span class="variable-tag">{{$1}}</span>')
     },
 
     // 导航方法
@@ -1099,7 +1109,7 @@ export default {
             subject: '',
             sendMode: 'now',
             scheduleTime: null,
-            testSend: false
+            testEmail: ''
           }
           // 清空选择的收件人
           this.selectedRecipients = []
@@ -1231,6 +1241,45 @@ export default {
       this.currentPage = newPage
     },
 
+    // 发送测试邮件
+    sendTestEmail() {
+      if (!this.sendForm.testEmail) {
+        this.$message.error('请输入测试邮箱地址')
+        return
+      }
+      
+      if (!this.sendForm.subject) {
+        this.$message.error('请填写邮件主题')
+        return
+      }
+      
+      if (!this.selectedTemplate) {
+        this.$message.error('请先选择邮件模板')
+        return
+      }
+
+      this.testSending = true
+      
+      const testData = {
+        email: this.sendForm.testEmail,
+        subject: this.sendForm.subject,
+        email_template_id: this.selectedTemplate.id,
+        var_data: this.sampleUser
+      }
+      
+      sendEmail(testData)
+        .then(res => {
+          this.$message.success('测试邮件发送成功！')
+        })
+        .catch(error => {
+          console.error('发送测试邮件失败:', error)
+          this.$message.error('发送测试邮件失败')
+        })
+        .finally(() => {
+          this.testSending = false
+        })
+    },
+
     // 显示变量数据
     showVarData(varData) {
       this.currentVarData = varData
@@ -1629,6 +1678,8 @@ export default {
   color: #66b1ff;
 }
 
+
+
 /* 响应式设计 */
 @media (max-width: 768px) {
   .email-container {