小程序提交

pages/course/courseList/courseList.js

@@ -1,3 +1,5 @@
+import { baseUrl, globalImgUrl } from "../../../request";
+
 // pages/course/courseList/courseList.js
 Page({
 
@@ -5,8 +7,9 @@ Page({
    * 页面的初始数据
    */
   data: {
-    items:[null,null,null,null,null,null,null,null,null],
+    courseList:[],  // 课程列表
     courseType: '', // 课程类别
+    globalImgUrl,
   },
 
   // 跳转课程详情页面
@@ -23,10 +26,45 @@ Page({
    * 生命周期函数--监听页面加载
    */
   onLoad(options) {
-    // console.log('option--->',options);
-    this.setData({
-      courseType: options.type
-    })
+    // 接收路由参数 type 作为搜索关键字
+    const courseType = options.type || '';
+    this.setData({ courseType }, () => {
+      this.fetchCourseList();
+    });
+  },
+
+  // 从后端拉取课程列表
+  fetchCourseList() {
+    wx.request({
+      url: baseUrl + '/course/query/type',
+      method: 'POST',
+      header: {
+        Authorization: wx.getStorageSync('token')
+      },
+      data: {
+        templateString: this.data.courseType
+      },
+      success: res => {
+        console.log('课程列表',res.data.data);
+        if (res.data.code === 1) {
+          this.setData({ 
+            courseList: res.data.data
+           });
+        } else {
+          wx.showToast({
+            icon: 'none',
+            title: res.data.message || '获取课程失败',
+          });
+        }
+      },
+      fail: err => {
+        console.error('request failed', err);
+        wx.showToast({
+          icon: 'none',
+          title: '网络请求失败',
+        });
+      }
+    });
   },
 
   /**

pages/course/courseList/courseList.wxml

@@ -1,35 +1,39 @@
-<!--pages/course/courseList/courseList.wxml-->
 <view class="flex-col page">
   <text class="self-center text">{{ courseType }}</text>
-  <image
-    class="shrink-0 self-start image image_2"
-    src="./image/line.png"
-  />
-  <image
-    class="shrink-0 self-end image image_3"
-    src="./image/line.png"
-  />
+  <image class="shrink-0 self-start image image_2" src="./image/line.png" />
+  <image class="shrink-0 self-end image image_3" src="./image/line.png" />
+
   <view class="flex-col self-stretch list">
+    <!-- 遍历接口返回的 items 数组 -->
     <view
-      class="flex-col justify-start list-item"
-      wx:for="{{items}}"
+      class="flex-col list-item"
+      wx:for="{{courseList}}"
       wx:for-item="item"
       wx:for-index="index"
-      wx:key="index"
+      wx:key="id"
     >
-      <view class="flex-row items-center relative group" bind:tap="gotoCourseDetail" data-id="{{ '1' }}">
+      <view
+        class="flex-row items-center relative group"
+        bindtap="gotoCourseDetail"
+        data-id="{{item.id}}"
+      >
+        <!-- 课程封面 -->
         <image
           class="shrink-0 image_4"
-          src="https://ide.code.fun/api/image?token=6858ee4b4ae84d0012334127&name=9c2a22f14e2bd768cbd40d939693e4a8.png"
+          src="{{ globalImgUrl  + item.image}}"
+          mode="aspectFill"
         />
         <view class="flex-col flex-1 ml-12">
-          <text class="font">区块链和加密数字货币（随报随学认证班）</text>
+          <!-- 课程名称 -->
+          <text class="font">{{item.name}}</text>
           <view class="flex-row justify-between items-baseline mt-17">
-            <text class="font_2">券后99元起</text>
-            <text class="font_3">18523人学习</text>
+            <!-- 卷后价格 -->
+            <text class="font_2">券后{{item.discountPrice}}元起</text>
+            <!-- 已有下单人数 -->
+            <text class="font_3">{{item.orderCount}}人学习</text>
           </view>
         </view>
       </view>
     </view>
   </view>
-</view>
+</view>