feat(profile): 添加我的订单页面

在用户个人中心添加“我的订单”页面，展示用户的订单信息，包括订单号、状态、商品详情等。支持查看订单详情和支付功能。

@@ -97,6 +97,12 @@ const routes = [
     meta: { title: '我的课程' }
     meta: { title: '我的课程' }
   },
   },
   {
   {
+    path: '/profile/orders',
+    name: 'Orders',
+    component: () => import('../views/profile/OrdersPage.vue'),
+    meta: { title: '我的订单' }
+  },
+  {
     path: '/profile/favorites',
     path: '/profile/favorites',
     name: 'MyFavorites',
     name: 'MyFavorites',
     component: () => import('../views/profile/MyFavoritesPage.vue'),
     component: () => import('../views/profile/MyFavoritesPage.vue'),

+<!--
+ * @Date: 2025-03-21
+ * @Description: 我的订单页面
+-->
+<template>
+  <AppLayout title="我的订单">
+    <div class="bg-gradient-to-b from-green-50/70 to-white/90 min-h-screen pb-20">
+      <!-- 订单列表 -->
+      <van-list
+        v-model:loading="loading"
+        :finished="finished"
+        finished-text="没有更多了"
+        @load="onLoad"
+        class="px-4 py-3 space-y-4"
+      >
+        <FrostedGlass
+          v-for="order in orders"
+          :key="order.id"
+          class="p-4 rounded-xl"
+        >
+          <div class="flex items-center justify-between mb-3">
+            <span class="text-sm text-gray-500">订单号：{{ order.orderNo }}</span>
+            <span :class="['text-sm', order.statusColor]">{{ order.statusText }}</span>
+          </div>
+
+          <div class="flex items-center mb-3">
+            <img :src="order.image" class="w-20 h-20 object-cover rounded-lg" :alt="order.title">
+            <div class="ml-3 flex-1">
+              <h3 class="text-base font-medium mb-1">{{ order.title }}</h3>
+              <p class="text-sm text-gray-500 mb-1">{{ order.description }}</p>
+              <p class="text-sm text-gray-500">{{ order.createTime }}</p>
+            </div>
+          </div>
+
+          <div class="flex justify-between items-center pt-3 border-t border-gray-100">
+            <div class="text-base font-medium text-green-600">¥{{ order.amount }}</div>
+            <div class="space-x-2">
+              <button
+                v-if="order.status === 'pending'"
+                class="px-4 py-1.5 text-sm text-white bg-green-600 rounded-full"
+                @click="handlePay(order)"
+              >
+                立即支付
+              </button>
+              <button
+                v-if="order.status === 'paid'"
+                class="px-4 py-1.5 text-sm text-gray-600 bg-gray-100 rounded-full"
+                @click="handleViewDetail(order)"
+              >
+                查看详情
+              </button>
+            </div>
+          </div>
+        </FrostedGlass>
+      </van-list>
+
+      <!-- 无数据提示 -->
+      <div v-if="!loading && orders.length === 0" class="flex flex-col items-center justify-center py-12">
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
+        </svg>
+        <p class="mt-4 text-gray-500">暂无订单记录</p>
+      </div>
+    </div>
+  </AppLayout>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import AppLayout from '@/components/layout/AppLayout.vue'
+import FrostedGlass from '@/components/ui/FrostedGlass.vue'
+
+const router = useRouter()
+const loading = ref(false)
+const finished = ref(false)
+const orders = ref([
+  {
+    id: 1,
+    orderNo: 'ORDER202503210001',
+    status: 'pending',
+    statusText: '待支付',
+    statusColor: 'text-orange-500',
+    title: '亲子阅读课程',
+    description: '3-6岁儿童亲子阅读指导',
+    image: '/assets/images/course-1.jpg',
+    amount: 299,
+    createTime: '2025-03-21 10:30:00'
+  },
+  {
+    id: 2,
+    orderNo: 'ORDER202503210002',
+    status: 'paid',
+    statusText: '已支付',
+    statusColor: 'text-green-500',
+    title: '儿童绘画课程',
+    description: '儿童创意绘画启蒙课程',
+    image: '/assets/images/course-2.jpg',
+    amount: 199,
+    createTime: '2025-03-21 09:15:00'
+  }
+])
+
+// 加载更多
+const onLoad = () => {
+  // 模拟异步加载
+  setTimeout(() => {
+    loading.value = false
+    finished.value = true
+  }, 1000)
+}
+
+// 支付订单
+const handlePay = (order) => {
+  router.push(`/checkout/${order.id}`)
+}
+
+// 查看订单详情
+const handleViewDetail = (order) => {
+  router.push(`/profile/orders/${order.id}`)
+}
+</script>