uniProject/pages/chanpinneirong/index.vue

<template>
  <view class="study-record-container">
    <!-- 学科标签页 -->
    <view class="subject-tabs">
      <scroll-view scroll-x class="tabs-scroll" :scroll-left="tabScrollLeft">
        <view class="tabs-container">
          <view 
            v-for="subject in subjectList" 
            :key="subject.id"
            class="tab-item"
            :class="{ active: activeSubject === subject.id }"
            @click="switchSubject(subject.id)"
          >
            <view class="subject-icon">
              <text>{{ subject.icon }}</text>
            </view>
            <text class="subject-name">{{ subject.name }}</text>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 当前学科信息 -->
    <view class="subject-info">
      <view class="info-card">
        <view class="subject-header">
          <view class="subject-title">
            <text class="subject-name">{{ currentSubjectInfo.name }}</text>
            <text class="subject-icon-large">{{ currentSubjectInfo.icon }}</text>
          </view>
          <text class="subject-description">{{ currentSubjectInfo.description }}</text>
        </view>

        <view class="course-info">
          <view class="info-item">
            <text class="label">当前课程</text>
            <text class="value">{{ currentCourse.courseName }}</text>
          </view>
          <view class="info-row">
            <view class="info-col">
              <text class="label">等级</text>
              <text class="value level-badge">{{ currentCourse.level }}</text>
            </view>
            <view class="info-col">
              <text class="label">版本</text>
              <text class="value">{{ currentCourse.version }}</text>
            </view>
            <view class="info-col">
              <text class="label">单元</text>
              <text class="value">{{ currentCourse.unit }}</text>
            </view>
          </view>
        </view>

        <!-- 学习进度 -->
        <view class="progress-section">
          <view class="progress-header">
            <text class="section-title">学习进度</text>
            <text class="progress-percent">{{ progress }}%</text>
          </view>
          <view class="progress-bar">
            <view class="progress-fill" :style="{ width: progress + '%' }"></view>
          </view>
          <view class="continue-study">
            <button class="continue-btn" @click="continueStudy">
              <text class="btn-text">继续学习</text>
              <text class="btn-icon">→</text>
            </button>
          </view>
        </view>
      </view>
    </view>

    <!-- 课程目录 -->
    <view class="course-directory">
      <view class="directory-header">
        <text class="section-title">以下为当前等级课程目录</text>
        <view class="level-badges">
          <view 
            v-for="level in levels" 
            :key="level"
            class="level-badge"
            :class="{ active: currentLevel === level }"
            @click="switchLevel(level)"
          >
            <text>{{ level }}</text>
          </view>
        </view>
      </view>

      <!-- 使用 z-paging 实现滚动监听 -->
      <z-paging
        ref="paging"
        @scroll="onScroll"
        @query="loadCourseData"
        :refresher-enabled="false"
        :loading-more-enabled="false"
        :auto="true"
        :fixed="false"
        :hide-empty-view="true"
      >
        <!-- 当前等级课程列表 -->
        <view 
          v-for="(unit, unitIndex) in currentLevelCourses" 
          :key="unit.id"
          :id="'unit-' + unitIndex"
          class="unit-container"
          :class="{ 'last-unit': unit.isLastUnit }"
        >
          <!-- 单元信息 -->
          <view class="unit-header">
            <text class="unit-level">{{ unit.level }}</text>
            <text class="unit-title">{{ unit.title }}</text>
          </view>

          <!-- 节列表 -->
          <view 
            v-for="(section, sectionIndex) in unit.sections" 
            :key="section.id"
            class="section-item"
            :class="{
              'current-section': section.id === currentSectionId,
              'completed': section.completed
            }"
            @click="goToSection(section)"
          >
            <view class="section-order">
              <text v-if="section.type === 'test'" class="test-icon">📝</text>
              <text v-else class="section-number">第{{ section.order }}节</text>
            </view>
            <view class="section-content">
              <view class="section-main">
                <text class="section-name">{{ section.name }}</text>
                <view v-if="section.completed" class="completed-badge">
                  <text>已完成</text>
                </view>
              </view>
              <text v-if="section.description" class="section-description">
                {{ section.description }}
              </text>
            </view>
            <view class="section-action">
              <text class="action-icon">›</text>
            </view>
          </view>

          <!-- 最后一个单元的提示 -->
          <view v-if="unit.isLastUnit" class="last-unit-tip">
            <text class="tip-text">本级别最后一单元啦~</text>
          </view>
        </view>

        <!-- 查看更多 -->
        <view class="view-more" @click="viewMoreCourses">
          <text class="more-text">查看更多内容</text>
          <text class="more-icon">↓</text>
        </view>
      </z-paging>
      
      <!-- 当前单元提示 -->
      <view v-if="currentUnitTitle" class="current-unit-tip">
        <text>{{ currentUnitTitle }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 当前选中的学科
      activeSubject: 'math',
      
      // 学科列表
      subjectList: [
        {
          id: 'chinese',
          name: '语文',
          icon: '📚',
          description: '语言文学与文化传承'
        },
        {
          id: 'math',
          name: '数学',
          icon: '🧮',
          description: '逻辑思维与问题解决'
        },
        {
          id: 'english',
          name: '英语',
          icon: '🔤',
          description: '国际交流与语言能力'
        },
        {
          id: 'physics',
          name: '物理',
          icon: '⚛️',
          description: '自然规律与科学探索'
        },
        {
          id: 'chemistry',
          name: '化学',
          icon: '🧪',
          description: '物质变化与实验科学'
        }
      ],
      
      // 当前课程信息
      currentCourse: {
        courseName: '数学图解母题',
        level: 'L1',
        version: '通用版',
        unit: '第一单元'
      },
      
      // 学习进度
      progress: 65,
      
      // 等级列表
      levels: ['L1', 'L2', 'L3', 'L4'],
      currentLevel: 'L1',
      
      // 当前等级的课程数据
      currentLevelCourses: [],
      
      // 当前正在学习的节ID
      currentSectionId: 2,
      
      // 滚动相关
      currentUnitTitle: '',
      unitPositions: [],
      
      // 标签页滚动位置
      tabScrollLeft: 0
    }
  },
  
  computed: {
    // 当前学科信息
    currentSubjectInfo() {
      return this.subjectList.find(item => item.id === this.activeSubject) || {}
    }
  },
  
  mounted() {
    // 初始化加载数学数据
    this.loadMathData()
  },
  
  methods: {
    // 切换学科
    switchSubject(subjectId) {
      this.activeSubject = subjectId
      
      // 根据学科加载数据
      switch(subjectId) {
        case 'math':
          this.loadMathData()
          break
        case 'chinese':
          this.loadChineseData()
          break
        case 'english':
          this.loadEnglishData()
          break
        // 其他学科...
      }
      
      // 滚动标签到可视区域
      this.scrollTabToView(subjectId)
    },
    
    // 滚动标签到可视区域
    scrollTabToView(subjectId) {
      const index = this.subjectList.findIndex(item => item.id === subjectId)
      if (index > 2) { // 如果靠后，向右滚动
        this.tabScrollLeft = (index - 2) * 100
      }
    },
    
    // 加载数学数据
    loadMathData() {
      this.currentCourse = {
        courseName: '数学图解母题',
        level: 'L1',
        version: '通用版',
        unit: '第一单元'
      }
      
      this.currentLevelCourses = [
        {
          id: 1,
          level: 'L1',
          title: '认识厘米和米',
          sections: [
            { id: 1, order: 1, name: '用尺子测量长度', description: '学习使用尺子测量物体长度', completed: true, type: 'lesson' },
            { id: 2, order: 2, name: '解决长度问题', description: '应用长度知识解决问题', completed: false, type: 'lesson' },
            { id: 3, order: 3, name: '解决长度问题', description: '深入理解长度概念', completed: false, type: 'lesson' },
            { id: 4, name: '单元测试', description: '检验本单元学习成果', completed: false, type: 'test' }
          ],
          isLastUnit: false
        },
        {
          id: 2,
          level: 'L2',
          title: '认识厘米和米',
          sections: [
            { id: 5, order: 1, name: '用尺子测量长度', description: '复习基础测量方法', completed: false, type: 'lesson' },
            { id: 6, order: 2, name: '解决长度问题', description: '复杂场景下的应用', completed: false, type: 'lesson' },
            { id: 7, order: 3, name: '解决长度问题', description: '综合能力训练', completed: false, type: 'lesson' },
            { id: 8, name: '单元测试', description: '进阶测试', completed: false, type: 'test' }
          ],
          isLastUnit: true
        }
      ]
      
      this.progress = 65
      this.currentSectionId = 2
    },
    
    // 加载语文数据
    loadChineseData() {
      this.currentCourse = {
        courseName: '语文经典阅读',
        level: 'L1',
        version: '人教版',
        unit: '第一单元'
      }
      
      this.currentLevelCourses = [
        {
          id: 11,
          level: 'L1',
          title: '诗词鉴赏',
          sections: [
            { id: 11, order: 1, name: '唐诗三百首', description: '经典唐诗赏析', completed: true, type: 'lesson' },
            { id: 12, order: 2, name: '宋词精选', description: '婉约派与豪放派', completed: false, type: 'lesson' },
            { id: 13, order: 3, name: '古文观止', description: '文言文阅读理解', completed: false, type: 'lesson' },
            { id: 14, name: '单元测试', description: '文学常识测试', completed: false, type: 'test' }
          ],
          isLastUnit: false
        }
      ]
      
      this.progress = 45
      this.currentSectionId = 12
    },
    
    // 加载英语数据
    loadEnglishData() {
      this.currentCourse = {
        courseName: '英语口语训练',
        level: 'L2',
        version: '国际版',
        unit: '第二单元'
      }
      
      this.currentLevelCourses = [
        {
          id: 21,
          level: 'L2',
          title: '日常会话',
          sections: [
            { id: 21, order: 1, name: '自我介绍', description: '学习基础自我介绍', completed: true, type: 'lesson' },
            { id: 22, order: 2, name: '购物对话', description: '商场购物常用英语', completed: true, type: 'lesson' },
            { id: 23, order: 3, name: '餐厅点餐', description: '餐厅用餐英语表达', completed: false, type: 'lesson' },
            { id: 24, name: '口语测试', description: '情景对话测试', completed: false, type: 'test' }
          ],
          isLastUnit: false
        }
      ]
      
      this.progress = 75
      this.currentSectionId = 23
    },
    
    // z-paging 加载数据
    loadCourseData(pageNo, pageSize) {
      // 数据已经在切换学科时加载了，这里直接完成
      this.$refs.paging.complete(this.currentLevelCourses)
      
      // 计算单元位置
      this.$nextTick(() => {
        this.calculateUnitPositions()
      })
    },
    
    // 计算单元位置
    calculateUnitPositions() {
      if (!this.currentLevelCourses.length) return
      
      const query = uni.createSelectorQuery().in(this)
      this.unitPositions = []
      
      this.currentLevelCourses.forEach((unit, index) => {
        query.select(`#unit-${index}`).boundingClientRect(data => {
          if (data) {
            this.unitPositions[index] = {
              top: data.top,
              title: unit.title
            }
          }
        }).exec()
      })
    },
    
    // 滚动事件
    onScroll(e) {
      const scrollTop = e.detail.scrollTop
      
      // 判断当前单元
      for (let i = this.unitPositions.length - 1; i >= 0; i--) {
        if (this.unitPositions[i] && scrollTop >= this.unitPositions[i].top - 100) {
          const newTitle = this.currentLevelCourses[i]?.title
          if (newTitle && newTitle !== this.currentUnitTitle) {
            this.currentUnitTitle = newTitle
            console.log('切换到单元:', newTitle)
          }
          break
        }
      }
    },
    
    // 切换等级
    switchLevel(level) {
      this.currentLevel = level
      // 这里可以根据等级重新加载数据
      console.log('切换到等级:', level)
    },
    
    // 继续学习
    continueStudy() {
      const currentSection = this.findCurrentSection()
      if (currentSection) {
        this.goToSection(currentSection)
      }
    },
    
    // 查找当前正在学习的节
    findCurrentSection() {
      for (const unit of this.currentLevelCourses) {
        for (const section of unit.sections) {
          if (section.id === this.currentSectionId) {
            return section
          }
        }
      }
      return null
    },
    
    // 进入节
    goToSection(section) {
      console.log('进入节:', section.name)
      // 这里实现跳转到学习页面的逻辑
      // uni.navigateTo({
      //   url: `/pages/study/study?id=${section.id}`
      // })
    },
    
    // 查看更多
    viewMoreCourses() {
      console.log('查看更多内容')
      // 这里可以实现跳转到完整课程列表
    }
  }
}
</script>

<style scoped>
.study-record-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding-bottom: 40rpx;
}

/* 学科标签页 */
.subject-tabs {
  background: white;
  padding: 20rpx 0;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.tabs-scroll {
  white-space: nowrap;
  height: 100rpx;
}

.tabs-container {
  display: inline-flex;
  padding: 0 30rpx;
}

.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 40rpx;
  transition: all 0.3s;
}

.tab-item.active {
  transform: translateY(-10rpx);
}

.subject-icon {
  width: 80rpx;
  height: 80rpx;
  background: #f0f2f5;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40rpx;
  margin-bottom: 10rpx;
  transition: all 0.3s;
}

.tab-item.active .subject-icon {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  transform: scale(1.1);
}

.subject-name {
  font-size: 26rpx;
  color: #666;
  font-weight: 500;
}

.tab-item.active .subject-name {
  color: #667eea;
  font-weight: bold;
}

/* 学科信息卡片 */
.subject-info {
  padding: 30rpx;
}

.info-card {
  background: white;
  border-radius: 24rpx;
  padding: 40rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
}

.subject-header {
  margin-bottom: 40rpx;
}

.subject-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20rpx;
}

.subject-name {
  font-size: 40rpx;
  font-weight: bold;
  color: #333;
}

.subject-icon-large {
  font-size: 48rpx;
}

.subject-description {
  font-size: 28rpx;
  color: #666;
  line-height: 1.5;
}

.course-info {
  margin-bottom: 40rpx;
  padding-bottom: 40rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.info-item {
  margin-bottom: 24rpx;
}

.label {
  display: block;
  font-size: 26rpx;
  color: #999;
  margin-bottom: 8rpx;
}

.value {
  font-size: 32rpx;
  color: #333;
  font-weight: 500;
}

.info-row {
  display: flex;
  justify-content: space-between;
}

.info-col {
  flex: 1;
}

.level-badge {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 8rpx 20rpx;
  border-radius: 20rpx;
  font-size: 26rpx;
}

/* 学习进度 */
.progress-section {
  margin-bottom: 20rpx;
}

.progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.progress-percent {
  font-size: 36rpx;
  font-weight: bold;
  color: #667eea;
}

.progress-bar {
  height: 16rpx;
  background: #f0f2f5;
  border-radius: 8rpx;
  margin-bottom: 40rpx;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 8rpx;
  transition: width 0.5s ease;
}

.continue-study {
  text-align: center;
}

.continue-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  padding: 24rpx 48rpx;
  border-radius: 50rpx;
  font-size: 32rpx;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.3);
}

.btn-text {
  margin-right: 10rpx;
}

.btn-icon {
  font-size: 36rpx;
}

/* 课程目录 */
.course-directory {
  margin: 0 30rpx;
  position: relative;
}

.directory-header {
  margin-bottom: 30rpx;
}

.level-badges {
  display: flex;
  margin-top: 20rpx;
}

.level-badge {
  padding: 12rpx 24rpx;
  background: #f0f2f5;
  border-radius: 20rpx;
  margin-right: 20rpx;
  font-size: 26rpx;
  color: #666;
  transition: all 0.3s;
}

.level-badge.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

/* 单元容器 */
.unit-container {
  background: white;
  border-radius: 20rpx;
  margin-bottom: 30rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
}

.unit-container.last-unit {
  border: 2rpx solid #667eea;
}

.unit-header {
  background: linear-gradient(135deg, #667eea20 0%, #764ba220 100%);
  padding: 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.unit-level {
  background: #667eea;
  color: white;
  padding: 8rpx 20rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
  margin-right: 20rpx;
}

.unit-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

/* 节项 */
.section-item {
  padding: 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
  display: flex;
  align-items: center;
  transition: all 0.3s;
}

.section-item:last-child {
  border-bottom: none;
}

.section-item.current-section {
  background: linear-gradient(135deg, #667eea10 0%, #764ba210 100%);
}

.section-item.completed {
  opacity: 0.8;
}

.section-item:active {
  background: #f0f2f5;
}

.section-order {
  width: 120rpx;
  flex-shrink: 0;
}

.test-icon {
  font-size: 36rpx;
}

.section-number {
  font-size: 28rpx;
  color: #667eea;
  font-weight: 500;
}

.section-content {
  flex: 1;
  min-width: 0;
}

.section-main {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
}

.section-name {
  font-size: 30rpx;
  color: #333;
  font-weight: 500;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.completed-badge {
  background: #52c41a;
  color: white;
  padding: 6rpx 16rpx;
  border-radius: 16rpx;
  font-size: 22rpx;
  margin-left: 20rpx;
}

.section-description {
  font-size: 26rpx;
  color: #999;
  display: block;
  line-height: 1.4;
}

.section-action {
  width: 60rpx;
  flex-shrink: 0;
  text-align: right;
}

.action-icon {
  font-size: 36rpx;
  color: #999;
}

/* 最后单元提示 */
.last-unit-tip {
  padding: 30rpx;
  background: linear-gradient(135deg, #667eea10 0%, #764ba210 100%);
  text-align: center;
}

.tip-text {
  font-size: 28rpx;
  color: #667eea;
  font-weight: 500;
}

/* 查看更多 */
.view-more {
  background: white;
  border-radius: 20rpx;
  padding: 30rpx;
  text-align: center;
  margin-top: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.more-text {
  font-size: 28rpx;
  color: #667eea;
  margin-right: 10rpx;
  font-weight: 500;
}

.more-icon {
  font-size: 24rpx;
  color: #667eea;
}

/* 当前单元提示 */
.current-unit-tip {
  position: fixed;
  bottom: 100rpx;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(102, 126, 234, 0.9);
  color: white;
  padding: 20rpx 40rpx;
  border-radius: 50rpx;
  font-size: 28rpx;
  z-index: 1000;
  box-shadow: 0 4rpx 20rpx rgba(102, 126, 234, 0.3);
}
</style>