我的订单

components.d.ts

@@ -72,7 +72,4 @@ declare module 'vue' {
     VerifySlide: typeof import('./src/components/Verifition/Verify/VerifySlide.vue')['default']
     WangEditor: typeof import('./src/components/FormUI/wangEditor/index.vue')['default']
   }
-  export interface ComponentCustomProperties {
-    vLoading: typeof import('element-plus/es')['ElLoadingDirective']
-  }
 }

src/router/modules/recruit.js

@@ -108,6 +108,14 @@ const recruit = [
           title: '订单详情'
         }
       },
+      {
+        path: '/mall/order',
+        component: () => import('@/views/mall/order/index.vue'),
+        name: 'mallOrder',
+        meta: {
+          title: '我的购物车'
+        }
+      },
       {
         path: '/mall/cart',
         component: () => import('@/views/mall/cart/index.vue'),

src/views/mall/components/navbar.vue

@@ -1,18 +1,25 @@
 <template>
   <div class="stickyBox py-5">
     <div class="default-width d-flex align-center justify-space-between">
-      <div class="header-link">
-        <span class="cursor-pointer" :class="{'active-route' : isActive('/mall')}" @click="router.push('/mall')">首页</span>
-        <span class="cursor-pointer mx-8" :class="{'active-route' : isActive('/mall/user', true)}" @click="handleTo('/mall/user')">
-          <v-icon>mdi-account-circle-outline</v-icon>
+      <div class="header-link d-flex">
+        <span class="cursor-pointer d-flex align-center ml-8" :class="{'active-route' : isActive('/mall')}" @click="router.push('/mall')">
+          <v-icon size="24" class="mr-2">mdi-shopping-outline</v-icon>
+          首页
+        </span>
+        <span class="cursor-pointer d-flex align-center ml-8" :class="{'active-route' : isActive('/mall/user', true)}" @click="handleTo('/mall/user')">
+          <v-icon size="24" class="mr-2">mdi-account-circle-outline</v-icon>
           我的
         </span>
-        <!-- <span class="cursor-pointer" @click="emit('pointExchange')">
+        <!-- <span class="cursor-pointer d-flex align-center ml-8" @click="emit('pointExchange')">
           <v-icon>mdi-octagram-outline</v-icon>
           积分兑换
         </span> -->
-        <span class="cursor-pointer" :class="{'active-route' : isActive('/mall/cart')}" @click="handleTo('/mall/cart')">
-          <v-icon size="20">mdi-cart-outline</v-icon>
+        <span class="cursor-pointer d-flex align-center ml-8" :class="{'active-route' : isActive('/mall/order')}" @click="handleTo('/mall/order')">
+          <v-icon size="20" class="mr-2">mdi-order-bool-ascending</v-icon>
+          我的订单
+        </span>
+        <span class="cursor-pointer d-flex align-center ml-8" :class="{'active-route' : isActive('/mall/cart')}" @click="handleTo('/mall/cart')">
+          <v-icon size="20" class="mr-2">mdi-cart-outline</v-icon>
           购物车
         </span>
       </div>

src/views/mall/order/index.vue

@@ -0,0 +1,20 @@
+<!-- 导航栏-我的订单 -->
+<template>
+  <div>
+    <Navbar class="mb-3" />
+    <v-card class="default-width card-box mb-5 resume-box">
+      <div class="resume-header mx-n2 mb-5">
+        <div class="resume-title">我的订单</div>
+      </div>
+      <order :tabListBg="false"></order>
+    </v-card>
+  </div>
+</template>
+
+<script setup>
+defineOptions({name: 'mall-user-cart'})
+import order from '@/views/mall/user/order'
+import Navbar from '@/views/mall/components/navbar.vue'
+</script>
+<style lang="scss" scoped>
+</style>

src/views/mall/user/cart/index.vue

@@ -1,4 +1,4 @@
-<!--  -->
+<!-- 我的-购物车 -->
 <template>
   <div>
     <cart

src/views/mall/user/order/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <v-tabs v-model="tab" align-tabs="start" color="primary" bg-color="#f7f8fa" @update:modelValue="queryParams.pageNo = 1, getOrderPage()">
+    <v-tabs v-model="tab" align-tabs="start" color="primary" :bg-color="props.tabListBg ? '#f7f8fa': '#fff'" @update:modelValue="queryParams.pageNo = 1, getOrderPage()">
       <v-tab v-for="(val, i) in tabList" :key="i" :value="val.value">{{ val.title }}</v-tab>
     </v-tabs>
     <div v-if="orderList.length" class="mt-3">
@@ -54,6 +54,12 @@ import GoodsItem from '../../components/GoodsItem/index.vue'
 import CommentForm from './commentForm.vue'
 import pay from '@/views/mall/components/details/order/pay.vue'
 // import { useRouter } from 'vue-router'
+const props = defineProps({
+  tabListBg: {
+    type: Boolean,
+    default: true
+  },
+})
 
 // const router = useRouter()
 const tab = ref(-1)