.

pages.json

@@ -84,6 +84,16 @@
     "style": {
       "navigationBarTitleText": "浏览文本"
     }
+  }, {
+    "path": "pages/courseDetail/courseDetail",
+    "style": {
+      "navigationBarTitleText": "课程详情"
+    }
+  }, {
+    "path": "pages/orderDetail/orderDetail",
+    "style": {
+      "navigationBarTitleText": "订单详情"
+    }
   }],
   "tabBar": {
     "color": "#000000",

pages/index.vue

@@ -1,4 +1,4 @@
-<template>
+"calendar-box<template>
   <view class="page-container">
     <!-- 导航栏 -->
     <view class="nav-bar">
@@ -11,6 +11,16 @@
     <!-- 仿日历形状的框 -->
     <view class="calendar-box">
       <!-- 这里可以添加日历内容 -->
+      <div class="daily - tip">
+    <div class="tip - content">
+      <span class="date">14</span>
+      <span class="month">/ 五月</span>
+      <p class="slogan">学习让我们成为更好的自己。</p>
+    </div>
+    <!-- <div class="tip- img">
+      <img src="../static/images/image.png" alt="学习插图"> 
+    </div> -->
+  </div>
     </view>
     <!-- 中间内容 -->
     <view class="content-box">
@@ -107,7 +117,7 @@ export default {
 
   /* 仿日历形状的框 */
   .calendar-box {
-    width: 80%; /* 可根据需求调整宽度 */
+    width: 90%; /* 可根据需求调整宽度 */
     height: 150rpx; /* 缩短高度，可根据需求调整 */
     margin: 20rpx auto;
     border: 1rpx solid #ccc;
@@ -195,4 +205,49 @@ export default {
   cursor: pointer;
   padding: 5px;
 }
+/* 整体容器样式 */
+.daily-tip {
+    background-color: #e6f7ff; /* 浅蓝色背景，类似图中背景色调 */
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 轻微阴影增加立体感 */
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+/* 日期和话语部分样式 */
+.tip-content {
+    width: 60%;
+}
+
+.date {
+    font-size: 28px;
+    font-weight: bold;
+    color: #333;
+}
+
+.month {
+    font-size: 16px;
+    color: #666;
+    margin-left: 5px;
+}
+
+.slogan {
+    font-size: 18px;
+    color: #333;
+    margin-top: 10px;
+}
+
+/* 插图部分样式 */
+.tip-img {
+    width: 30%;
+    display: flex;
+    justify-content: flex-end;
+}
+
+.tip-img img {
+    max-width: 100%;
+    height: auto;
+}
 </style>

pages/work/index.vue

@@ -37,6 +37,7 @@
           v-for="(course, index) in courses" 
           :key="index"
           class="course-item"
+          @click="goToCourseDetail(course)"
         >
           <view class="course-img">
             <image :src="course.imgUrl" mode="aspectFill"></image>
@@ -54,11 +55,123 @@
 export default {
   data() {
     return {
-      currentTab: 1,
+      currentTab: 0,
       categories: [], 
-      courses: [], 
+      allCourses: [], // 存储所有课程数据
+      courses: [], // 存储当前显示的课程数据
       searchQuery: '',
-      showAll: false // 控制是否显示全部分类
+      showAll: false, // 控制是否显示全部分类
+      // 定义分类与课程的映射
+      categoryCourseMap: {
+        0: [
+          {
+            imgUrl: 'https://picx.zhimg.com/v2-d6f44389971daab7e688e5b37046e4e4_720w.jpg?source=172ae18b',
+            courseName: '课程1',
+            coursePrice: 99
+          },
+          {
+            imgUrl: 'https://img.ixintu.com/download/jpg/201911/e25b904bc42a74d7d77aed81e66d772c.jpg!con',
+            courseName: '课程2',
+            coursePrice: 199
+          }
+        ],
+        1: [
+          {
+            imgUrl: 'https://ts1.tc.mm.bing.net/th/id/OIP-C.Nj6o69waOC3JTbebyCu-hgHaEc?rs=1&pid=ImgDetMain',
+            courseName: '课程3',
+            coursePrice: 20
+          },
+          {
+            imgUrl: 'https://pic1.zhimg.com/v2-02760a1bf058904006740d3f66b2c9ac_r.jpg?source=1940ef5c',
+            courseName: '课程4',
+            coursePrice: 150
+          }
+        ],
+        2: [
+          {
+            imgUrl: 'https://ts1.tc.mm.bing.net/th/id/R-C.987f582c510be58755c4933cda68d525?rik=C0D21hJDYvXosw&riu=http%3a%2f%2fimg.pconline.com.cn%2fimages%2fupload%2fupc%2ftx%2fwallpaper%2f1305%2f16%2fc4%2f20990657_1368686545122.jpg&ehk=netN2qzcCVS4ALUQfDOwxAwFcy41oxC%2b0xTFvOYy5ds%3d&risl=&pid=ImgRaw&r=0',
+            courseName: '课程5',
+            coursePrice: 50
+          },
+          {
+            imgUrl: 'https://ts1.tc.mm.bing.net/th/id/OIP-C.MQoT8Pi43oSD6cQGpvs-lAHaEK?rs=1&pid=ImgDetMain',
+            courseName: '课程6',
+            coursePrice: 80
+          }
+        ],
+        3: [
+          {
+            imgUrl: 'https://ts1.tc.mm.bing.net/th/id/R-C.cf381aa2a44f28ade81cb72e0e8decae?rik=xctKMrYyWQKvDg&riu=http%3a%2f%2fwww.1mpi.com%2fpic%2f9af8385ddd409baf50e081d6%2f2-810-jpg_6-1080-0-0-1080.jpg&ehk=Fw4Rzzq%2bSED%2bgMqemTtEk7fUdSL%2fkwW0KcsnygzTqp4%3d&risl=&pid=ImgRaw&r=0',
+            courseName: '课程7',
+            coursePrice: 120
+          },
+          {
+            imgUrl: 'https://img.shetu66.com/2023/04/25/1682391088567884.png',
+            courseName: '课程8',
+            coursePrice: 180
+          }
+        ],
+        4: [
+          {
+            imgUrl: 'https://ts1.tc.mm.bing.net/th/id/R-C.82ece114307f62dc0b8aa2c366b9ef37?rik=GwmaljjvGJ75zg&riu=http%3a%2f%2fimg.pconline.com.cn%2fimages%2fupload%2fupc%2ftx%2fwallpaper%2f1308%2f15%2fc2%2f24494094_1376530595238.jpg&ehk=L%2fNVdWJDsmRvIsmKuuUcvCGnK4DJwpxad4JswscWIN0%3d&risl=&pid=ImgRaw&r=0',
+            courseName: '课程9',
+            coursePrice: 30
+          },
+          {
+            imgUrl: 'https://bpic.588ku.com/back_origin_min_pic/21/07/09/8c9d5f41848ca6a292d52b3457ed418a.jpg',
+            courseName: '课程10',
+            coursePrice: 60
+          }
+        ],
+        5: [
+          {
+            imgUrl: 'https://pic.616pic.com/ys_bnew_img/00/13/11/J1kFGL8p6F.jpg',
+            courseName: '课程11',
+            coursePrice: 90
+          },
+          {
+            imgUrl: 'https://pic.616pic.com/ys_bnew_img/00/47/45/WwJs1U7BJW.jpg',
+            courseName: '课程12',
+            coursePrice: 110
+          }
+        ],
+        6: [
+          {
+            imgUrl: 'https://pic.616pic.com/ys_bnew_img/00/06/07/KT7I0AbOoI.jpg',
+            courseName: '课程13',
+            coursePrice: 40
+          },
+          {
+            imgUrl: 'https://ts1.tc.mm.bing.net/th/id/R-C.72eb213371fd74859ad6c574cf223070?rik=AjZbpwPKouep7A&riu=http%3a%2f%2fattach.66rpg.com%2fbbs%2fattachment%2fforum%2f201501%2f09%2f211837s6hkh6g5mg35336s.jpg&ehk=gJTX%2bHzLsoWwDctstn13%2bJY3QmA86kqpzexWicVHgbw%3d&risl=&pid=ImgRaw&r=0',
+            courseName: '课程14',
+            coursePrice: 70
+          }
+        ],
+        7: [
+          {
+            imgUrl: 'https://ts1.tc.mm.bing.net/th/id/R-C.478f595a4d79e0aacc812494d3f8ab9f?rik=%2bqgBvxUlXAuqqQ&riu=http%3a%2f%2ffile.51pptmoban.com%2fd%2ffile%2f2023%2f08%2f25%2f43b8e6ed4fa04f190edd0c8bd83d52b0.jpg&ehk=qiyuhH8mm%2bU9cHz1Px%2fLOZqDKA6PaSlPbn8yD5mnQGk%3d&risl=&pid=ImgRaw&r=0',
+            courseName: '课程15',
+            coursePrice: 130
+          },
+          {
+            imgUrl: 'https://img.keaitupian.cn/newupload/07/1688632400492441.jpg',
+            courseName: '课程16',
+            coursePrice: 160
+          }
+        ],
+        8: [
+          {
+            imgUrl: 'https://img.tukuppt.com/photo-big/18/10/08/07/27/181008072732.jpg',
+            courseName: '课程17',
+            coursePrice: 200
+          },
+          {
+            imgUrl: 'https://file.51pptmoban.com/d/file/2022/09/13/b2d85362febcf895e78916e0696f1a59.jpg',
+            courseName: '课程18',
+            coursePrice: 220
+          }
+        ]
+      }
     };
   },
   computed: {
@@ -73,7 +186,9 @@ export default {
   },
   mounted() {
     this.fetchCategories(); 
-    this.fetchCourses(); 
+    // 初始化所有课程数据
+    this.allCourses = Object.values(this.categoryCourseMap).flat();
+    this.fetchCourses();
   },
   methods: {
     // 获取分类导航数据
@@ -100,59 +215,36 @@ export default {
       });
     },
     // 获取课程列表数据
-    fetchCourses() {
-      let url = `http://localhost:8080/system/course/findById?courseCategory=${this.currentTab}`;
+    // 修改 fetchCourses 方法，接收 index 参数
+    fetchCourses(index) {
+      const categoryIndex = index !== undefined ? index : this.currentTab;
+      let categoryCourses = this.categoryCourseMap[categoryIndex] || [];
+
       if (this.searchQuery) {
-        url += `&search=${this.searchQuery}`;
+        categoryCourses = categoryCourses.filter(course =>
+          course.courseName.includes(this.searchQuery)
+        );
       }
-      console.log('请求的 URL:', url); // 添加调试信息
-      uni.request({
-        url: url,
-        method: 'POST',
-        success: (res) => {
-          console.log('请求成功，响应数据:', res); // 添加调试信息
-          if (res.statusCode === 200) {
-            if (res.data && Array.isArray(res.data.data)) { 
-              // 检查数据是否为 null 或 undefined
-              const validCourses = res.data.data.map(course => course !== null && course !== undefined ? course : {});
-              this.courses = validCourses;
-            } else {
-              console.error('响应数据格式不符合预期:', res.data);
-              uni.showToast({
-                title: '响应数据格式错误',
-                icon: 'none'
-              });
-            }
-          } else {
-            console.error('获取课程列表数据失败:', `HTTP error! status: ${res.statusCode}`);
-            uni.showToast({
-              title: `获取课程列表失败，状态码: ${res.statusCode}`,
-              icon: 'none'
-            });
-          }
-        },
-        fail: (error) => {
-          console.error('获取课程列表数据失败:', error.errMsg);
-          uni.showToast({
-            title: `获取课程列表失败: ${error.errMsg}`,
-            icon: 'none'
-          });
-        },
-        complete: () => {
-          // 请求完成后的操作，可根据需要添加
-        }
-      });
+
+      this.courses = categoryCourses;
     },
     changeTab(index) {
       this.currentTab = index;
-      this.fetchCourses(); 
+      // 调用 fetchCourses 时传递 index 参数
+      this.fetchCourses(index); 
     },
     onSearch() {
+      // 搜索时调用 fetchCourses 不传递 index 参数，使用默认逻辑
       this.fetchCourses(); 
     },
     // 切换显示全部分类状态
     toggleShowAll() {
       this.showAll = !this.showAll;
+    },
+    goToCourseDetail(course) {
+      uni.navigateTo({
+        url: `/pages/courseDetail/courseDetail?imgUrl=${encodeURIComponent(course.imgUrl)}&courseName=${encodeURIComponent(course.courseName)}&coursePrice=${course.coursePrice}`
+      });
     }
   }
 };