OL-LearnPlatform/src/views/TestSections.vue

<template>
  <div class="test-sections">
    <h1>测试课程章节API</h1>
    
    <div class="test-controls">
      <label>课程ID:</label>
      <input v-model.number="testLessonId" type="number" placeholder="输入课程ID" />
      <button @click="testGetSections">获取章节列表</button>
    </div>

    <div class="results">
      <h3>API调用结果:</h3>
      
      <div v-if="loading" class="loading">
        <p>正在加载...</p>
      </div>
      
      <div v-else-if="error" class="error">
        <p>错误: {{ error }}</p>
      </div>
      
      <div v-else-if="sections.length > 0" class="success">
        <h4>章节列表 (共{{ sections.length }}个):</h4>
        <div class="section-list">
          <div v-for="section in sections" :key="section.id" class="section-item">
            <div class="section-info">
              <strong>ID:</strong> {{ section.id }} <br>
              <strong>标题:</strong> {{ section.title }} <br>
              <strong>课程ID:</strong> {{ section.lessonId }} <br>
              <strong>排序:</strong> {{ section.sortOrder }} <br>
              <strong>链接:</strong> {{ section.sectionId }} <br>
              <strong>层级:</strong> {{ section.level }}
            </div>
          </div>
        </div>
      </div>
      
      <div v-else class="no-data">
        <p>暂无数据</p>
      </div>

      <div class="raw-response" v-if="rawResponse">
        <h4>原始响应:</h4>
        <pre>{{ JSON.stringify(rawResponse, null, 2) }}</pre>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { CourseApi } from '@/api/modules/course'
import type { CourseSection } from '@/api/types'

const testLessonId = ref(1)
const loading = ref(false)
const error = ref('')
const sections = ref<CourseSection[]>([])
const rawResponse = ref<any>(null)

const testGetSections = async () => {
  if (!testLessonId.value) {
    error.value = '请输入课程ID'
    return
  }

  try {
    loading.value = true
    error.value = ''
    sections.value = []
    rawResponse.value = null

    console.log('测试API调用，课程ID:', testLessonId.value)
    
    const response = await CourseApi.getCourseSections(testLessonId.value)
    console.log('API响应:', response)
    
    rawResponse.value = response
    
    if (response.code === 0 || response.code === 200) {
      sections.value = response.data.list || []
      console.log('章节数据:', sections.value)
    } else {
      error.value = response.message || '获取章节失败'
    }
  } catch (err: any) {
    console.error('API调用失败:', err)
    error.value = err.message || '网络错误'
    rawResponse.value = err
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.test-sections {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.test-controls {
  margin-bottom: 20px;
  padding: 16px;
  background: #f5f5f5;
  border-radius: 8px;
}

.test-controls label {
  margin-right: 8px;
  font-weight: 600;
}

.test-controls input {
  margin-right: 12px;
  padding: 6px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.test-controls button {
  background: #1890ff;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

.test-controls button:hover {
  background: #40a9ff;
}

.results {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 16px;
}

.loading {
  text-align: center;
  color: #666;
}

.error {
  color: #ff4d4f;
  background: #fff2f0;
  padding: 12px;
  border-radius: 4px;
  border: 1px solid #ffccc7;
}

.success {
  color: #52c41a;
}

.no-data {
  text-align: center;
  color: #999;
}

.section-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}

.section-item {
  background: #f8f9fa;
  padding: 12px;
  border-radius: 6px;
  border: 1px solid #e9ecef;
}

.section-info {
  font-size: 14px;
  line-height: 1.6;
}

.raw-response {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #eee;
}

.raw-response pre {
  background: #f5f5f5;
  padding: 12px;
  border-radius: 4px;
  overflow-x: auto;
  font-size: 12px;
  max-height: 300px;
  overflow-y: auto;
}
</style>