peixue-dev/peidu/uniapp/teacher-package/pages/teacher/training.vue

<template>
  <view class="teacher-training">
    <view class="header">
      <text class="title">📚 线上培训</text>
      <text class="subtitle">系统学习，æˆ<EFBFBD>为优秀陪伴å‘?/text>
    </view>

    <!-- 培训进度 -->
    <view class="progress-card">
      <view class="progress-header">
        <text class="progress-title">培训进度</text>
        <text class="progress-percent">{{ progress }}%</text>
      </view>
      <view class="progress-bar">
        <view class="progress-fill" :style="{ width: progress + '%' }" />
      </view>
      <text class="progress-text">已完�{{ completedCount }}/{{ totalCount }} 个课�/text>
    </view>

    <!-- 培训课程列表 -->
    <view class="course-list">
      <view 
        v-for="(course, index) in courseList" 
        :key="index"
        class="course-card"
        :class="{ locked: course.locked, completed: course.completed }"
        @tap="viewCourse(course)"
      >
        <view class="course-number">
          <text v-if="course.completed">�/text>
          <text v-else-if="course.locked">🔒</text>
          <text v-else>{{ index + 1 }}</text>
        </view>

        <view class="course-info">
          <text class="course-title">{{ course.title }}</text>
          <text class="course-desc">{{ course.description }}</text>
          
          <view class="course-meta">
            <text class="meta-item">â<>?{{ course.duration }}</text>
            <text class="meta-item">📊 {{ course.type }}</text>
          </view>
        </view>

        <view class="course-status">
          <text v-if="course.completed" class="status-completed">已完�/text>
          <text v-else-if="course.locked" class="status-locked">未解�/text>
          <text v-else class="status-learning">学习 �/text>
        </view>
      </view>
    </view>

    <!-- 考核按钮 -->
    <view v-if="progress === 100" class="exam-section">
      <view class="exam-card">
        <text class="exam-title">🎓 æ<>­å–œå®Œæˆ<C3A6>所有培训课程ï¼<C3AF></text>
        <text class="exam-desc">请å<C2B7>‚加考核测试，通过å<E280A1>Žå<C5BD>³å<C2B3>¯æ­£å¼<C3A5>æˆ<C3A6>为陪伴员</text>
        <button class="exam-btn" @tap="goToExam">开始考核</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      progress: 60,
      completedCount: 3,
      totalCount: 5,
      courseList: [
        {
          id: 1,
          title: 'å…¬å<C2AC>¸å®—旨与æœ<C3A6>务ç<C2A1>†å¿?,
          description: '了解习正陪伴的ä¼<EFBFBD>业文化ã€<EFBFBD>æœ<EFBFBD>务宗旨和核心价值观',
          duration: '30分钟',
          type: '视频课程',
          completed: true,
          locked: false
        },
        {
          id: 2,
          title: '陪伴员è<EFBFBD>Œè´£ä¸Žæ³¨æ„<EFBFBD>事项',
          description: '学习陪伴员的工作è<EFBFBD>Œè´£ã€<EFBFBD>æœ<EFBFBD>务标准和注æ„<EFBFBD>事项',
          duration: '45分钟',
          type: '视频课程',
          completed: true,
          locked: false
        },
        {
          id: 3,
          title: '陪伴员薪资架�,
          description: '了解薪资计算方å¼<C3A5>ã€<C3A3>æ<EFBFBD><C3A6>æˆ<C3A6>规则和奖励机制',
          duration: '20分钟',
          type: '文档学习',
          completed: true,
          locked: false
        },
        {
          id: 4,
          title: '陪伴员æœ<C3A6>务æµ<C3A6>ç¨?,
          description: '掌æ<EFBFBD>¡ä»ŽæŽ¥å<EFBFBD>•åˆ°æœ<EFBFBD>务完æˆ<EFBFBD>的完整æµ<EFBFBD>ç¨?,
          duration: '40分钟',
          type: '视频课程',
          completed: false,
          locked: false
        },
        {
          id: 5,
          title: '实战案例分æž<C3A6>',
          description: '学习优秀陪伴员的æœ<C3A6>务案例和ç»<C3A7>验分äº?,
          duration: '50分钟',
          type: '视频课程',
          completed: false,
          locked: true
        }
      ]
    }
  },
  methods: {
    viewCourse(course) {
      if (course.locked) {
        uni.showToast({ title: '请先完æˆ<EFBFBD>å‰<EFBFBD>é<EFBFBD>¢çš„课ç¨?, icon: 'none' })
        return
      }
      
      if (course.completed) {
        uni.showModal({
          title: 'æ<><C3A6>示',
          content: '该课程已完æˆ<C3A6>，是å<C2AF>¦é‡<C3A9>新学习？',
          success: (res) => {
            if (res.confirm) {
              this.startCourse(course)
            }
          }
        })
      } else {
        this.startCourse(course)
      }
    },
    startCourse(course) {
      uni.showToast({ title: `开始学习：${course.title}`, icon: 'none' })
      // 这里å<C592>¯ä»¥è·³è½¬åˆ°è¯¾ç¨‹è¯¦æƒ…页或视频播放页
    },
    goToExam() {
      uni.navigateTo({
        url: '/pages/teacher/exam-test'
      })
    }
  }
}
</script>

<style scoped>
.teacher-training {
  min-height: 100vh;
  background: #f0f9f7;
  padding-bottom: 20rpx;
}

.header {
  background: linear-gradient(135deg, #5fc9ba 0%, #1e7a6d 100%);
  padding: 50rpx 30rpx;
  text-align: center;
}

.title {
  display: block;
  font-size: 40rpx;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 15rpx;
}

.subtitle {
  display: block;
  font-size: 26rpx;
  color: rgba(255, 255, 255, 0.9);
}

.progress-card {
  background: #ffffff;
  margin: 20rpx;
  padding: 30rpx;
  border-radius: 16rpx;
}

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

.progress-title {
  font-size: 30rpx;
  font-weight: 500;
  color: #333333;
}

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

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

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #5fc9ba 0%, #4CAF50 100%);
  transition: width 0.3s;
}

.progress-text {
  display: block;
  font-size: 24rpx;
  color: #666666;
  text-align: center;
}

.course-list {
  padding: 0 20rpx;
}

.course-card {
  display: flex;
  align-items: center;
  background: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.course-card.locked {
  opacity: 0.6;
}

.course-card.completed {
  background: #f0f9f7;
}

.course-number {
  width: 60rpx;
  height: 60rpx;
  background: #5fc9ba;
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  font-weight: bold;
  margin-right: 25rpx;
  flex-shrink: 0;
}

.course-card.completed .course-number {
  background: #4CAF50;
}

.course-card.locked .course-number {
  background: #cccccc;
}

.course-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.course-title {
  font-size: 30rpx;
  font-weight: 500;
  color: #333333;
  margin-bottom: 15rpx;
}

.course-desc {
  font-size: 24rpx;
  color: #666666;
  line-height: 1.5;
  margin-bottom: 15rpx;
}

.course-meta {
  display: flex;
  gap: 25rpx;
}

.meta-item {
  font-size: 24rpx;
  color: #999999;
}

.course-status {
  margin-left: 20rpx;
}

.status-completed {
  font-size: 24rpx;
  color: #4CAF50;
}

.status-locked {
  font-size: 24rpx;
  color: #999999;
}

.status-learning {
  font-size: 26rpx;
  color: #5fc9ba;
  font-weight: 500;
}

.exam-section {
  padding: 0 20rpx;
  margin-top: 20rpx;
}

.exam-card {
  background: linear-gradient(135deg, #5fc9ba 0%, #1e7a6d 100%);
  padding: 40rpx;
  border-radius: 16rpx;
  text-align: center;
}

.exam-title {
  display: block;
  font-size: 32rpx;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 20rpx;
}

.exam-desc {
  display: block;
  font-size: 26rpx;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.6;
  margin-bottom: 30rpx;
}

.exam-btn {
  width: 400rpx;
  height: 80rpx;
  background: #ffffff;
  color: #5fc9ba;
  font-size: 30rpx;
  font-weight: 500;
  border-radius: 40rpx;
  border: none;
}
</style>