englishread-front/subPages/home/components/CoursePopup.vue

<template>
  <uv-popup 
    mode="bottom" 
    ref="coursePopup"
    round="32rpx"
    bg-color="#f8f8f8"
    safeAreaInsetBottom
  >
    <view class="course-popup">
      <view class="popup-header">
        <view>
          <uv-icon name="arrow-down" color="black" size="20"></uv-icon>
        </view>
        <view class="popup-title">课程</view>
        <view class="popup-title" @click="toggleSort">
          倒序
        </view>
      </view>
      <view class="course-list">
        <view 
          v-for="course in displayCourseList" 
          :key="course.id"
          class="course-item"
          :class="{ 'active': course.id === currentCourse }"
          @click="selectCourse(course.id)"
        >
          <view class="course-number" :class="{ 'highlight': course.id === currentCourse }">
            {{ String(course.index).padStart(2, '0') }}
          </view>
          <view class="course-content">
            <view class="course-english" :class="{ 'highlight': course.id === currentCourse }">
              {{ course.english }}
            </view>
            <view class="course-chinese" :class="{ 'highlight': course.id === currentCourse }">
              {{ course.chinese }}
            </view>
          </view>
        </view>
      </view>
    </view>
  </uv-popup>
</template>

<script>
export default {
  name: 'CoursePopup',
  props: {
    courseList: {
      type: Array,
      default: () => []
    },
    currentCourse: {
      type: [String, Number],
      default: 1
    },
    isReversed: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    displayCourseList() {
      return this.isReversed ? [...this.courseList].reverse() : this.courseList;
    }
  },
  methods: {
    open() {
      if (this.$refs.coursePopup) {
        this.$refs.coursePopup.open()
      }
    },
    close() {
      if (this.$refs.coursePopup) {
        this.$refs.coursePopup.close()
      }
    },
    toggleSort() {
      this.$emit('toggle-sort')
    },
    selectCourse(courseId) {
      this.$emit('select-course', courseId)
      this.close()
    }
  }
}
</script>

<style lang="scss" scoped>
/* 课程弹出窗样式 */
.course-popup {
  padding: 0 32rpx;
  max-height: 80vh;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 2rpx solid #EEEEEE;
}

.popup-title {
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 34rpx;
  color: #181818;
}

.course-list {
  max-height: 60vh;
  overflow-y: auto;
}

.course-item {
  display: flex;
  align-items: center;
  gap: 24rpx;
  padding-top: 24rpx;
  padding-right: 8rpx;
  padding-bottom: 24rpx;
  padding-left: 8rpx;
  border-bottom: 1px solid #EEEEEE;
  cursor: pointer;
  
  &:last-child {
    border-bottom: none;
  }
}

.course-number {
  width: 80rpx;
  font-family: PingFang SC;
  font-size: 36rpx;
  color: #999;
  
  &.highlight {
    color: #06DADC;
  }
}

.course-content {
  flex: 1;
}

.course-english {
  font-family: PingFang SC;
  font-weight: 600;
  font-size: 36rpx;
  line-height: 44rpx;
  color: #252545;
  margin-bottom: 8rpx;
  
  &.highlight {
    color: #06DADC;
  }
}

.course-chinese {
  font-size: 28rpx;
  line-height: 48rpx;
  color: #3B3D3D;
  
  &.highlight {
    color: #06DADC;
  }
}
</style>