1

pages/courses/courses.js

@@ -0,0 +1,204 @@
+// pages/courses/courses.js
+const { coursesData } = require('../../utils/data.js')
+const { showSuccess, showError } = require('../../utils/util.js')
+const learningTracker = require('../../utils/learningTracker.js')
+
+Page({
+  data: {
+    allCourses: [],
+    displayCourses: [],
+    searchKeyword: '',
+    selectedCategory: 'all',
+    categories: [
+      { id: 'all', name: '全部' },
+      { id: '必修', name: '必修' },
+      { id: '专业必修', name: '专业必修' },
+      { id: '选修', name: '选修' },
+      { id: '专业选修', name: '专业选修' }
+    ],
+    showFilter: false,
+    selectedDepartment: '全部',  // 修改为'全部'而不是'all'
+    departments: [
+      '全部',
+      '数学系',
+      '物理系',
+      '计算机学院',
+      '外国语学院'
+    ]
+  },
+
+  onLoad() {
+    try {
+      this.loadCourses()
+    } catch (error) {
+      console.error('课程加载失败:', error)
+      showError('课程数据加载失败')
+    }
+  },
+
+  onShow() {
+    // 开始跟踪学习时间
+    learningTracker.onPageShow('course')
+    
+    // 更新自定义TabBar选中状态
+    if (typeof this.getTabBar === 'function' && this.getTabBar()) {
+      this.getTabBar().setData({
+        selected: 1
+      })
+    }
+  },
+
+  onHide() {
+    // 停止跟踪学习时间
+    learningTracker.onPageHide()
+  },
+
+  onUnload() {
+    // 记录学习时长
+    learningTracker.onPageUnload()
+  },
+
+  // 加载课程数据
+  loadCourses() {
+    const courses = coursesData.map(course => ({
+      ...course,
+      isFavorite: this.checkFavorite(course.id)
+    }))
+    
+    this.setData({
+      allCourses: courses,
+      displayCourses: courses
+    })
+  },
+
+  // 检查是否已收藏
+  checkFavorite(courseId) {
+    const favorites = wx.getStorageSync('favoriteCourses') || []
+    return favorites.includes(courseId)
+  },
+
+  // 搜索课程(防抖处理)
+  onSearchInput(e) {
+    const keyword = e.detail.value
+    this.setData({ searchKeyword: keyword })
+    
+    // 清除之前的延迟搜索
+    if (this.searchTimer) {
+      clearTimeout(this.searchTimer)
+    }
+    
+    // 设置300ms防抖
+    this.searchTimer = setTimeout(() => {
+      this.filterCourses()
+    }, 300)
+  },
+
+  // 分类筛选
+  onCategoryChange(e) {
+    const category = e.currentTarget.dataset.category
+    this.setData({ selectedCategory: category })
+    this.filterCourses()
+  },
+
+  // 院系筛选
+  onDepartmentChange(e) {
+    const index = e.detail.value
+    this.setData({ 
+      selectedDepartment: this.data.departments[index],
+      showFilter: false
+    })
+    this.filterCourses()
+  },
+
+  // 筛选课程
+  filterCourses() {
+    const { allCourses, searchKeyword, selectedCategory, selectedDepartment } = this.data
+    
+    console.log('筛选条件:', {
+      searchKeyword,
+      selectedCategory,
+      selectedDepartment,
+      allCoursesCount: allCourses.length
+    })
+    
+    let filtered = allCourses.filter(course => {
+      // 搜索关键词过滤（不区分大小写，去除空格）
+      const keyword = (searchKeyword || '').trim().toLowerCase()
+      const matchKeyword = !keyword || 
+        (course.name && course.name.toLowerCase().includes(keyword)) ||
+        (course.teacher && course.teacher.toLowerCase().includes(keyword)) ||
+        (course.code && course.code.toLowerCase().includes(keyword))
+      
+      // 分类过滤
+      const matchCategory = selectedCategory === 'all' || 
+        course.category === selectedCategory
+      
+      // 院系过滤
+      const matchDepartment = selectedDepartment === '全部' ||
+        course.department === selectedDepartment
+      
+      return matchKeyword && matchCategory && matchDepartment
+    })
+    
+    console.log('筛选结果:', filtered.length, '门课程')
+    this.setData({ displayCourses: filtered })
+  },
+
+  // 显示/隐藏筛选面板
+  toggleFilter() {
+    this.setData({ showFilter: !this.data.showFilter })
+  },
+
+  // 收藏课程
+  onFavorite(e) {
+    const { id } = e.currentTarget.dataset
+    const { allCourses } = this.data
+    
+    // 更新课程收藏状态
+    const updatedCourses = allCourses.map(course => {
+      if (course.id === id) {
+        course.isFavorite = !course.isFavorite
+        
+        // 保存到本地存储
+        let favorites = wx.getStorageSync('favoriteCourses') || []
+        if (course.isFavorite) {
+          favorites.push(id)
+          showSuccess('收藏成功')
+        } else {
+          favorites = favorites.filter(fid => fid !== id)
+          showSuccess('取消收藏')
+        }
+        wx.setStorageSync('favoriteCourses', favorites)
+      }
+      return course
+    })
+    
+    this.setData({ allCourses: updatedCourses })
+    this.filterCourses()
+  },
+
+  // 查看课程详情
+  onCourseDetail(e) {
+    const { id } = e.currentTarget.dataset
+    wx.navigateTo({
+      url: `/pages/course-detail/course-detail?id=${id}`
+    })
+  },
+
+  // 清空筛选
+  onResetFilter() {
+    this.setData({
+      searchKeyword: '',
+      selectedCategory: 'all',
+      selectedDepartment: '全部',
+      showFilter: false
+    })
+    this.filterCourses()
+  },
+
+  // 清空搜索
+  onClearSearch() {
+    this.setData({ searchKeyword: '' })
+    this.filterCourses()
+  }
+})

pages/courses/courses.json

@@ -0,0 +1,3 @@
+{
+  "navigationBarTitleText": "课程筛选"
+}

pages/courses/courses.wxml

@@ -0,0 +1,115 @@
+<!--pages/courses/courses.wxml-->
+<view class="container">
+  <!-- 搜索栏 -->
+  <view class="search-bar">
+    <view class="search-input-wrap">
+      <input 
+        class="search-input" 
+        placeholder="搜索课程名称或教师"
+        value="{{searchKeyword}}"
+        bindinput="onSearchInput"
+      />
+      <text class="search-icon" wx:if="{{!searchKeyword}}">🔍</text>
+      <text class="clear-icon" wx:if="{{searchKeyword}}" bindtap="onClearSearch">✕</text>
+    </view>
+    <view class="filter-btn" bindtap="toggleFilter">
+      <text class="filter-icon">📋</text>
+      <text>筛选</text>
+    </view>
+  </view>
+
+  <!-- 分类标签 -->
+  <scroll-view class="category-scroll" scroll-x>
+    <view class="category-list">
+      <view 
+        class="category-item {{selectedCategory === item.id ? 'active' : ''}}"
+        wx:for="{{categories}}"
+        wx:key="id"
+        data-category="{{item.id}}"
+        bindtap="onCategoryChange"
+      >
+        {{item.name}}
+      </view>
+    </view>
+  </scroll-view>
+
+  <!-- 筛选面板 -->
+  <view class="filter-panel {{showFilter ? 'show' : ''}}">
+    <view class="filter-content">
+      <view class="filter-item">
+        <text class="filter-label">院系：</text>
+        <picker 
+          mode="selector" 
+          range="{{departments}}"
+          value="{{selectedDepartment}}"
+          bindchange="onDepartmentChange"
+        >
+          <view class="picker-value">
+            {{selectedDepartment}} ▼
+          </view>
+        </picker>
+      </view>
+      <view class="filter-actions">
+        <button class="reset-btn" bindtap="onResetFilter">重置</button>
+        <button class="confirm-btn" bindtap="toggleFilter">确定</button>
+      </view>
+    </view>
+  </view>
+
+  <!-- 课程列表 -->
+  <view class="course-list">
+    <view class="result-count">
+      共找到 <text class="count-number">{{displayCourses.length}}</text> 门课程
+    </view>
+
+    <view 
+      class="course-card"
+      wx:for="{{displayCourses}}"
+      wx:key="id"
+      bindtap="onCourseDetail"
+      data-id="{{item.id}}"
+    >
+      <view class="course-header">
+        <view class="course-title">{{item.name}}</view>
+        <view 
+          class="favorite-btn"
+          catchtap="onFavorite"
+          data-id="{{item.id}}"
+        >
+          <text class="favorite-icon">{{item.isFavorite ? '❤️' : '🤍'}}</text>
+        </view>
+      </view>
+
+      <view class="course-info">
+        <view class="info-row">
+          <text class="info-label">👨‍🏫 教师：</text>
+          <text class="info-value">{{item.teacher}}</text>
+        </view>
+        <view class="info-row">
+          <text class="info-label">📍 地点：</text>
+          <text class="info-value">{{item.location}}</text>
+        </view>
+        <view class="info-row">
+          <text class="info-label">⏰ 时间：</text>
+          <text class="info-value">{{item.time}}</text>
+        </view>
+      </view>
+
+      <view class="course-footer">
+        <view class="course-tags">
+          <text class="tag category-tag">{{item.category}}</text>
+          <text class="tag credit-tag">{{item.credit}}学分</text>
+        </view>
+        <view class="enrollment-info">
+          <text class="enrollment-text">{{item.enrolled}}/{{item.capacity}}</text>
+        </view>
+      </view>
+    </view>
+
+    <!-- 空状态 -->
+    <view class="empty-state" wx:if="{{displayCourses.length === 0}}">
+      <text class="empty-icon">📭</text>
+      <text class="empty-text">暂无符合条件的课程</text>
+    </view>
+  </view>
+</view>

pages/courses/courses.wxss

@@ -0,0 +1,482 @@
+/* pages/courses/courses.wxss */
+.container {
+  background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
+  min-height: 100vh;
+  /* 底部留出TabBar的空间 */
+  padding-bottom: calc(env(safe-area-inset-bottom) + 150rpx);
+}
+
+/* 搜索栏 */
+.search-bar {
+  display: flex;
+  padding: 20rpx 30rpx;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  gap: 20rpx;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.15);
+}
+
+.search-input-wrap {
+  flex: 1;
+  position: relative;
+  animation: slideInLeft 0.5s ease-out;
+}
+
+@keyframes slideInLeft {
+  from {
+    opacity: 0;
+    transform: translateX(-20rpx);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.search-input {
+  width: 100%;
+  height: 70rpx;
+  background-color: rgba(255, 255, 255, 0.95);
+  border-radius: 35rpx;
+  padding: 0 50rpx 0 30rpx;
+  font-size: 28rpx;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
+  transition: all 0.3s ease;
+}
+
+.search-input:focus {
+  background-color: #ffffff;
+  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.12);
+}
+
+.search-icon {
+  position: absolute;
+  right: 30rpx;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 32rpx;
+  color: #999999;
+  transition: color 0.3s ease;
+}
+
+.clear-icon {
+  position: absolute;
+  right: 30rpx;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 32rpx;
+  color: #999999;
+  width: 40rpx;
+  height: 40rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, #E0E0E0 0%, #BDBDBD 100%);
+  border-radius: 50%;
+  font-size: 24rpx;
+  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
+}
+
+.clear-icon:active {
+  transform: translateY(-50%) scale(0.9);
+  box-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.15);
+}
+
+.filter-btn {
+  display: flex;
+  align-items: center;
+  gap: 10rpx;
+  padding: 0 30rpx;
+  background: rgba(255, 255, 255, 0.25);
+  color: #ffffff;
+  border-radius: 35rpx;
+  font-size: 28rpx;
+  backdrop-filter: blur(10rpx);
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
+  transition: all 0.3s ease;
+  animation: slideInRight 0.5s ease-out;
+}
+
+@keyframes slideInRight {
+  from {
+    opacity: 0;
+    transform: translateX(20rpx);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.filter-btn:active {
+  background: rgba(255, 255, 255, 0.35);
+  transform: scale(0.95);
+}
+
+.filter-icon {
+  font-size: 32rpx;
+}
+
+/* 分类标签 */
+.category-scroll {
+  white-space: nowrap;
+  background-color: #ffffff;
+  padding: 20rpx 0;
+  border-bottom: 1rpx solid #f0f0f0;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
+}
+
+.category-list {
+  display: inline-flex;
+  padding: 0 30rpx;
+  gap: 20rpx;
+}
+
+.category-item {
+  display: inline-block;
+  padding: 14rpx 32rpx;
+  background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
+  color: #666666;
+  border-radius: 30rpx;
+  font-size: 26rpx;
+  font-weight: 500;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.06);
+  position: relative;
+  overflow: hidden;
+}
+
+.category-item::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(135deg, rgba(74, 144, 226, 0.1) 0%, rgba(102, 126, 234, 0.1) 100%);
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.category-item:active::before {
+  opacity: 1;
+}
+
+.category-item.active {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: #ffffff;
+  box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
+  transform: translateY(-2rpx);
+}
+
+.category-item.active::before {
+  opacity: 0;
+}
+
+/* 筛选面板 */
+.filter-panel {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 200;
+  pointer-events: none;
+  transition: all 0.3s ease;
+}
+
+.filter-panel.show {
+  pointer-events: auto;
+}
+
+.filter-panel::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  backdrop-filter: blur(4rpx);
+}
+
+.filter-panel.show::before {
+  opacity: 1;
+}
+
+.filter-content {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: #ffffff;
+  border-radius: 30rpx 30rpx 0 0;
+  padding: 40rpx 30rpx;
+  transform: translateY(100%);
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1);
+}
+
+.filter-panel.show .filter-content {
+  transform: translateY(0);
+}
+
+/* 课程列表 */
+.course-list {
+  padding: 20rpx 30rpx;
+}
+
+.result-count {
+  font-size: 26rpx;
+  color: #999999;
+  margin-bottom: 20rpx;
+  animation: fadeIn 0.5s ease-out;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.course-card {
+  background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
+  border-radius: 20rpx;
+  padding: 30rpx;
+  margin-bottom: 20rpx;
+  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  overflow: hidden;
+  animation: slideInUp 0.5s ease-out both;
+}
+
+.course-card:nth-child(1) { animation-delay: 0.05s; }
+.course-card:nth-child(2) { animation-delay: 0.1s; }
+.course-card:nth-child(3) { animation-delay: 0.15s; }
+.course-card:nth-child(4) { animation-delay: 0.2s; }
+.course-card:nth-child(5) { animation-delay: 0.25s; }
+
+@keyframes slideInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20rpx);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.course-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 6rpx;
+  height: 100%;
+  background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.course-card:active {
+  transform: scale(0.98);
+  box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.15);
+}
+
+.course-card:active::before {
+  opacity: 1;
+}
+
+/* 筛选面板 */
+.filter-panel {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 200;
+  display: none;
+}
+
+.filter-panel.show {
+  display: block;
+}
+
+.filter-content {
+  position: absolute;
+  top: 200rpx;
+  left: 30rpx;
+  right: 30rpx;
+  background-color: #ffffff;
+  border-radius: 16rpx;
+  padding: 40rpx;
+}
+
+.filter-item {
+  display: flex;
+  align-items: center;
+  margin-bottom: 30rpx;
+}
+
+.filter-label {
+  font-size: 28rpx;
+  color: #333333;
+  margin-right: 20rpx;
+}
+
+.picker-value {
+  flex: 1;
+  padding: 20rpx;
+  background-color: #F5F5F5;
+  border-radius: 8rpx;
+  font-size: 28rpx;
+}
+
+.filter-actions {
+  display: flex;
+  gap: 20rpx;
+  margin-top: 40rpx;
+}
+
+.reset-btn, .confirm-btn {
+  flex: 1;
+  height: 80rpx;
+  line-height: 80rpx;
+  border-radius: 40rpx;
+  font-size: 28rpx;
+}
+
+.reset-btn {
+  background-color: #F5F5F5;
+  color: #666666;
+}
+
+.confirm-btn {
+  background-color: #4A90E2;
+  color: #ffffff;
+}
+
+/* 课程列表 */
+.course-list {
+  padding: 20rpx 30rpx;
+}
+
+.result-count {
+  font-size: 26rpx;
+  color: #999999;
+  margin-bottom: 20rpx;
+}
+
+.count-number {
+  color: #4A90E2;
+  font-weight: bold;
+}
+
+.course-card {
+  background-color: #ffffff;
+  border-radius: 16rpx;
+  padding: 30rpx;
+  margin-bottom: 20rpx;
+  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
+}
+
+.course-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 20rpx;
+}
+
+.course-title {
+  flex: 1;
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #333333;
+}
+
+.favorite-btn {
+  padding: 10rpx;
+}
+
+.favorite-icon {
+  font-size: 36rpx;
+}
+
+.course-info {
+  margin-bottom: 20rpx;
+}
+
+.info-row {
+  display: flex;
+  margin-bottom: 12rpx;
+  font-size: 26rpx;
+}
+
+.info-label {
+  color: #999999;
+  width: 150rpx;
+}
+
+.info-value {
+  flex: 1;
+  color: #666666;
+}
+
+.course-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-top: 20rpx;
+  border-top: 1rpx solid #EEEEEE;
+}
+
+.course-tags {
+  display: flex;
+  gap: 10rpx;
+}
+
+.tag {
+  padding: 8rpx 16rpx;
+  border-radius: 6rpx;
+  font-size: 22rpx;
+}
+
+.category-tag {
+  background-color: #E8F4FF;
+  color: #4A90E2;
+}
+
+.credit-tag {
+  background-color: #FFF0E6;
+  color: #FF8C42;
+}
+
+.enrollment-info {
+  font-size: 24rpx;
+  color: #999999;
+}
+
+/* 空状态 */
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 100rpx 0;
+}
+
+.empty-icon {
+  font-size: 100rpx;
+  margin-bottom: 20rpx;
+}
+
+.empty-text {
+  font-size: 28rpx;
+  color: #999999;
+}