路由完善

src/layout/Manage.vue

@@ -19,7 +19,6 @@
         </el-main>
       </el-container>
     </el-container>
-
   </div>
 </template>
 

src/layout/components/Aside.vue

@@ -1,171 +1,100 @@
 <template>
   <el-aside :width="sideWidth + 'px'" style="position: sticky; bottom: 0; left: 0; height: auto; background-color: rgb(170, 113, 81); box-shadow: rgba(0, 21, 155, 0.35) 2px 0 6px">
    <el-aside :style="AsideObj">
-        <el-menu
+    <div style="height: 80px; color: white; font-weight: bold;
-            style=" overflow-y: auto; overflow-x: hidden"
+     display: flex; align-items: center; justify-content: center">
-            background-color="rgb(170, 113, 81)"
+      <img src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FypVcAOGV-Snipaste_2024-10-11_15-03-12.png" alt="" style="height: 30px">
-            :collapse="isCollapse"
+      <span style="margin-left: 5px" v-show="isShow">泠泷水月阁管理系统</span>
-            :collapse-transition="false"
+    </div>
-            text-color="#fff"
+    <el-menu
-            router
+          style=" overflow-y: auto; overflow-x: hidden"
-            active-text-color="#ffd04b">
+          background-color="rgb(170, 113, 81)"
-          <div style="height: 80px; color: white; font-weight: bold;
+          :collapse="isCollapse"
-           display: flex; align-items: center; justify-content: center">
+          :collapse-transition="false"
-            <img src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FypVcAOGV-Snipaste_2024-10-11_15-03-12.png" alt="" style="height: 30px">
+          text-color="#fff"
-            <span style="margin-left: 5px" v-show="isShow">泠泷水月阁管理系统</span>
+          router
-          </div>
+          active-text-color="#ffd04b"
-
+          :default-openeds="['0', '1']"
-          <el-sub-menu index="1">
+        >
-            <template #title>
+          <!-- 遍历 menuRoutes，动态渲染菜单项 -->
-              <el-icon><HomeFilled /></el-icon>
+          <template v-for="(item, index) in menuRoutes">
-                <span>用户管理</span>
+            <!-- 如果有子路由，使用 el-sub-menu -->
-            </template>
+            <el-sub-menu
-
+              v-if="item.children && item.children.length"
-            <el-menu-item index="/PersonalCenter">
+              :key="index"
-              <el-icon><UserFilled /></el-icon>
+              :index="index + ''"
-              <span slot="title">个人中心</span>
+            >
-            </el-menu-item>
+              <template #title>
-
+                <el-icon>
-            <el-menu-item index="/UserManagement">
+                  <component :is="iconComponents[item.meta.icon]"></component>
-              <el-icon><List /></el-icon>
+                </el-icon>
-              <span slot="title">用户列表</span>
+                <span>{{ item.meta.title }}</span>
-            </el-menu-item>
+              </template>
-
+              <!-- 二级菜单 -->
-            <el-menu-item index="/Upload">
+              <el-menu-item
-              <el-icon><List /></el-icon>
+                v-for="(item2, index2) in item.children"
-              <span slot="title">图片上传</span>
+                :key="index2"
-            </el-menu-item>
+                :index="item2.path"
-          </el-sub-menu>
+                :class="$route.path === item2.path ? 'is-active' : 'no-active'">
-
+                <template #title>
-          <el-sub-menu index="2">
+                  <el-icon>
-            <template #title>
+                    <component
-              <el-icon><HomeFilled /></el-icon>
+                      :is="iconComponents[item2.meta.icon]"
-              <span>实体类商品管理</span>
+                    ></component>
-            </template>
+                  </el-icon>
-
+                  {{ item2.meta.title }}
-            <el-menu-item index="/AddProduct">
+                </template>
-              <el-icon><Menu /></el-icon>
+              </el-menu-item>
-              <span slot="title">添加商品</span>
+            </el-sub-menu>
-            </el-menu-item>
+ 
-
+            <!-- 如果没有子路由，使用 el-menu-item     代码备用，谨防路由被修改-->   
-            <el-menu-item index="/MerchandiseCenter">
+            <!-- <el-menu-item
-              <el-icon><UserFilled /></el-icon>
+              v-else
-              <span slot="title">商品中心</span>
+              :index="item.path"
-            </el-menu-item>
+              :class="$route.path === item.path ? 'is-active' : ''"
-
+            >
-            <el-menu-item index="/TypeManagement">
+              <el-icon>
-              <el-icon><Menu /></el-icon>
+                <component :is="iconComponents[item.meta.icon]"></component>
-              <span slot="title">类别管理</span>
+              </el-icon>
-            </el-menu-item>
+              <span>{{ item.meta.title }}</span>
-          </el-sub-menu>
+            </el-menu-item> -->
-
+          </template>
-          <el-sub-menu index="3">
-            <template #title>
-              <el-icon><HomeFilled /></el-icon>
-              <span>服务类商品管理</span>
-            </template>
-            <el-menu-item index="/AddServiceProduct">
-              <el-icon><Menu /></el-icon>
-              <span slot="title">添加服务类商品</span>
-            </el-menu-item>
-            <el-menu-item index="/ProductCenter">
-              <el-icon><Menu /></el-icon>
-              <span slot="title">服务类商品中心</span>
-            </el-menu-item>
-          </el-sub-menu>
-
-          <el-sub-menu index="4">
-            <template #title>
-              <el-icon><HomeFilled/></el-icon>
-              <span>写真预约管理</span>
-            </template>
-            <el-menu-item index="/AddCostumes">
-              <el-icon><Menu /></el-icon>
-              <span slot="title">添加服装</span>
-            </el-menu-item>
-            <el-menu-item index="/ClothingGrade">
-              <el-icon><Menu /></el-icon>
-              <span slot="title">服装类别</span>
-            </el-menu-item>
-            <el-menu-item index="/ManagementCenter">
-              <el-icon><Menu /></el-icon>
-              <span slot="title">写真管理中心</span>
-            </el-menu-item>
-            <el-menu-item index="/AppointmentOrder">
-              <el-icon><Menu /></el-icon>
-              <span slot="title">预约订单</span>
-            </el-menu-item>
-            <el-menu-item index="/PendingOutfitOrder">
-              <el-icon><Menu /></el-icon>
-              <span slot="title">写真预约待处理订单</span>
-            </el-menu-item>
-          </el-sub-menu>
-
-          <el-sub-menu index="5">
-            <template #title>
-              <el-icon><HomeFilled /></el-icon>
-              <span>优惠券管理</span>
-            </template>
-            <el-menu-item index="/AddCoupons">
-              <el-icon><Menu /></el-icon>
-              <span slot="title">添加优惠券</span>
-            </el-menu-item>
-            <el-menu-item index="/CouponCenter">
-              <el-icon><Menu /></el-icon>
-              <span slot="title">优惠券中心</span>
-            </el-menu-item>
-          </el-sub-menu>
-
-          <el-sub-menu index="6">
-            <template #title>
-              <el-icon><HomeFilled/></el-icon>
-              <span>商品订单管理</span>
-            </template>
-            <el-menu-item index="/OrderList">
-              <el-icon><Menu /></el-icon>
-              <span slot="title">实体商品订单列表</span>
-            </el-menu-item>
-
-            <el-menu-item index="/ServiceOrderList">
-              <el-icon><Menu /></el-icon>
-              <span slot="title">服务类商品订单列表</span>
-            </el-menu-item>
-
-            <el-menu-item index="/PendingServiceOrderList">
-              <el-icon><Menu /></el-icon>
-              <span slot="title">服务类商品待处理订单列表</span>
-            </el-menu-item>
-
-          </el-sub-menu>
-
-
-          <el-sub-menu index="7">
-            <template #title>
-              <el-icon><Switch /></el-icon>
-              <span>退款管理</span>
-            </template>
-
-            <el-menu-item index="/refund">
-              <el-icon><Operation /></el-icon>
-              <span slot="title">退款中心</span>
-            </el-menu-item>
-
-          </el-sub-menu>
-          
         </el-menu>
       </el-aside>
     </el-aside>
 </template>
 
-<script setup lang="ts">
+<script setup >
-import {ref} from 'vue'
+import {ref ,computed } from 'vue'
 import { defineProps } from 'vue';
 import emitter from '@/utils/emitter'
-import {List} from "@element-plus/icons-vue";
+import { useRouter } from 'vue-router';
+import {
+  House,
+  User,
+  Location,
+  Histogram,
+  DataAnalysis,
+  Menu,
+  Switch,
+  Edit,
+  Camera,
+  Calendar,
+  Box,
+  Upload,
+  Postcard,
+  TakeawayBox,
+  Files,
+  DataBoard,
+  MessageBox,
+  Discount,
+  Notification,
+  Tickets,
+  Money
+} from "@element-plus/icons-vue";  
 defineProps(['send-data'])
 
 const showLog = ref(true)
-
 const isCollapse = ref(false)
 const isShow = ref(true)
 const sideWidth = ref(250)
@@ -173,7 +102,7 @@ const AsideObj = ref({
   width: '250px'
 })
 
-emitter.on('Aside', (value:any) => {
+emitter.on('Aside', (value) => {
   showLog.value = value
   if(showLog.value){
     AsideObj.value.width = '64px'
@@ -186,13 +115,69 @@ emitter.on('Aside', (value:any) => {
     isShow.value = true
     sideWidth.value = 250
   }
-
 })
 
+//动态路由导航
+const router = useRouter()
+console.log('router--->',router.options.routes);
 
-
+// 创建图标映射表
+const iconComponents = {
+  House,
+  User,
+  Location,
+  Histogram,
+  DataAnalysis,
+  Menu,
+  Switch,
+  Edit,
+  Camera,
+  Calendar,
+  Box,
+  Upload,
+  Postcard,
+  TakeawayBox,
+  Files,
+  DataBoard,
+  MessageBox,
+  Discount,
+  Notification,
+  Tickets,
+  Money
+  // 添加其他图标组件映射
+};
+// 过滤掉不需要展示的路由，并调整 layout 的子路由
+const menuRoutes = computed(() => {
+  // 获取所有路由
+  const routes = router.options.routes;
+  // 过滤掉不需要展示的路由并展开 layout 子路由
+  const adjustedRoutes = routes.flatMap((route) => {
+    // 隐藏 'layout' 路由但展示其子路由作为一级路由
+    if (route.path === "/" && route.children) {
+      return route.children.map((child) => ({
+        ...child,
+        path: child.path,
+        meta: child.meta,
+      }));
+    }
+    console.log('map-->',route);
+    // 如果路由设置为隐藏，则跳过
+    if (route.meta?.hidden) {
+      return [];
+    }
+    return route;
+  });
+  console.log('adj--->',adjustedRoutes);
+  return adjustedRoutes;
+});
+console.log('menuRoutes--->',menuRoutes.value);
 
 </script>
 <style scoped>
-
+.is-active {
+  color: #ffd04b;
+}
+.no-active {
+  color: #ffffff;
+}
 </style>

src/layout/components/Breadcrumb.vue

@@ -0,0 +1,31 @@
+<template>
+    <el-breadcrumb :separator-icon="ArrowRight" class="bread">
+        <el-breadcrumb-item v-for="(item,index) in routers" :key="item.path" :to="item.path">
+            <!-- {{ item?.meta?.title }} -->
+            <span v-if="item.redirect === 'noredirect' || index === routers.length - 1" class="no-redirect">
+                {{ item.meta.title }}
+            </span>
+            <!-- 如果没有重定向，使用 router-link 来跳转到对应路径 -->
+            <router-link v-else :to="item.redirect ? (item.redirect as string) : (item.path as string)">
+                {{ item.meta.title }}
+            </router-link>
+        </el-breadcrumb-item>
+    </el-breadcrumb>
+</template>
+
+<script lang="ts" setup>
+import { ArrowRight } from '@element-plus/icons-vue'
+import { computed } from 'vue';
+import { useRouter } from 'vue-router';
+const router = useRouter()
+console.log('当前路由--->', router.currentRoute.value.matched)
+const routers = computed(() => {  //过滤掉没有meta得
+    return router.currentRoute.value.matched.filter(item => item.meta.title)
+})
+</script>
+
+<style>
+/* .bread {
+    margin-top: 8px;
+} */
+</style>

src/layout/components/Header.vue

@@ -10,10 +10,8 @@
         <Fold />
       </el-icon>
 
-
+      <!-- 面包屑导航 -->
-      <el-breadcrumb separator="/">
+      <Breadcrumb/>
-        <a-breadcrumb-item>{{ route.name }}</a-breadcrumb-item>
-      </el-breadcrumb>
     </div>
 
     <div :style="{ display: 'flex', justifyContent: 'center', alignItems: 'center', marginRight: offset + 'px' }">
@@ -39,18 +37,16 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
 import emitter from '@/utils/emitter'
-import { useRoute, useRouter } from "vue-router";
+import { useRouter } from "vue-router";
 import myAxios from '@/api/myAxios';
 import { userStore } from '@/store/userStore';
 import { ElMessage } from 'element-plus';
-
+import Breadcrumb from './Breadcrumb.vue';
 const router = useRouter();
-const route = useRoute();
 const offset = ref(20)
 const showLog = ref(false)
 const store = userStore()
 const userInfo = store.loginUser
-
 const logout = async () => {
   const res: any = await myAxios.post("/user/logout", {})
   if (res.data.code == 1 && res.data) {

src/router/index.ts

@@ -1,11 +1,11 @@
 import {createRouter, createWebHashHistory} from "vue-router";
-import {routes} from "./routes";
+import {constantRoute } from "./routes";
 import { userStore } from "@/store/userStore";
 // 创建路由实例并传递 `routes` 配置
 const router = createRouter({
     // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
     history: createWebHashHistory(),
-    routes, // `routes: routes` 的缩写
+    routes: constantRoute , // `routes: routes` 的缩写
 })
 //路由的请求拦截器 
 //to 是即将进入的路由对象，from 是当前离开的路由对象，next 是一个函数，调用它会继续导航。
@@ -23,4 +23,4 @@ router.beforeEach((to, from, next) => {
         next();
     }
 });
-export default router
+export default router

src/router/routes.ts

@@ -1,114 +1,301 @@
-
+export const constantRoute  = [
-
-export const routes = [
     {
         path: '/',
         name:'login',
-        component: () => import("../views/Login.vue")
+        component: () => import("@/views/Login.vue"),
+        meta: {
+            title: '登录界面',
+            hidden: true
+        }
     },
+    // 个人中心页面
     {
-        path: '/home',
+        path: '/User',
-        name:'home',
+        redirect: '/PersonalCenter',
-        component: () => import("../views/Home.vue")
+        name: 'person',
-    },
-    {
-        path: '/manage',
         component: () => import("@/layout/Manage.vue"),
-        children:[
+        meta: {
+            title: '用户管理',
+            icon: 'Menu',
+            hidden: false
+        },
+        children :[
             {
                 path: '/PersonalCenter',
                 name:'个人中心',
-                component: ()=> import("../views/User/PersonalCenter.vue")
+                component: ()=> import("@/views/User/PersonalCenter.vue"),
+                meta: { 
+                    title: '个人中心',
+                    icon: 'User',
+                    hidden: false
+                }
             },
             {
                 path: '/Upload',
                 name:'文件上传',
-                component: ()=> import("../views/User/Upload.vue")
+                component: ()=> import("@/views/User/Upload.vue"),
+                meta: { 
+                    title: '文件上传' ,
+                    icon: 'Upload',
+                    hidden: false
+                }
             },
             {
                 path: '/UserManagement',
                 name:'用户列表',
-                component: ()=> import("../views/User/UserManagement.vue")
+                component: ()=> import("@/views/User/UserManagement.vue"),
-            },
+                meta: { 
+                    title: '用户列表',
+                    icon: 'Postcard',
+                    hidden: false
+                }
+            }
+        ]
+    },
+    // 实体类商品
+    {
+        path: '/entityProduct',
+        redirect: '/AddProduct',
+        component: () => import("@/layout/Manage.vue"),
+        meta: {
+            title : '实体类商品管理',
+            icon: 'TakeawayBox',
+            hidden: false
+        },
+        children: [
             {
                 path: '/AddProduct',
                 name: '添加商品',
-                component: ()=> import("../views/Commodity/AddProduct.vue")
+                component: ()=> import("@/views/Commodity/AddProduct.vue"),
+                meta: { 
+                    title: '添加商品',
+                    icon: 'Edit',
+                    hidden: false
+                }
             },
             {
                 path: '/MerchandiseCenter',
                 name: '商品中心',
-                component: ()=> import("../views/Commodity/MerchandiseCenter.vue")
+                component: ()=> import("@/views/Commodity/MerchandiseCenter.vue"),
+                meta: { 
+                    title: '商品中心' ,
+                    icon: 'DataAnalysis',
+                    hidden: false
+                }
             },
             {
                 path: '/TypeManagement',
                 name: '类别管理',
-                component: ()=> import("../views/Commodity/TypeManagement.vue")
+                component: ()=> import("@/views/Commodity/TypeManagement.vue"),
-            },
+                meta: { 
-            {
+                    title: '类别管理' ,
-                path: '/OrderList',
+                    icon: 'Files',
-                name: '订单列表',
+                    hidden: false
-                component: ()=> import("../views/Orders/OrderList.vue")
+                }
-            },
+            }
-            {
+        ]
-                path: '/ServiceOrderList',
+    },
-                name: '服务类订单列表',
+    // 服务类商品
-                component: ()=> import("../views/Orders/ServiceOrderList.vue")
+    {
-            },
+        path: '/serviceProduct',
-            {
+        redirect: '/AddServiceProduct',
-                path: '/PendingServiceOrderList',
+        component: () => import("@/layout/Manage.vue"),
-                name: '服务类商品待处理订单',
+        meta: {
-                component: ()=> import("../views/Orders/PendingServiceOrderList.vue")
+            title: '服务类商品管理',
-            },
+            icon : 'Calendar',
-            {
+            hidden: false
-                path: '/AddCoupons',
+        },
-                name:'添加优惠券',
+        children: [
-                component: ()=> import("../views/Coupons/AddCoupons.vue")
-            },
-            {
-                path: '/CouponCenter',
-                name:'优惠券中心',
-                component: ()=> import("../views/Coupons/CouponCenter.vue")
-            },
             {
                 path: '/AddServiceProduct',
                 name: '添加服务类商品',
-                component: ()=> import("../views/ServiceType/AddServiceProduct.vue")
+                component: ()=> import("@/views/ServiceType/AddServiceProduct.vue"),
+                meta: { 
+                    title: '添加服务类商品' ,
+                    icon: 'Edit',
+                    hidden: false
+                }
             },
             {
                 path: '/ProductCenter',
                 name: '服务类商品管理中心',
-                component: ()=> import("../views/ServiceType/ProductCenter.vue")
+                component: ()=> import("@/views/ServiceType/ProductCenter.vue"),
+                meta: { 
+                    title: '服务类商品管理中心' ,
+                    icon: 'DataBoard',
+                    hidden: false
+                }
+            }
+        ]
+    },
+    // 订单管理(服务类+实体类)
+    {
+        path: '/order',
+        redirect: '/OrderList',
+        component: () => import("@/layout/Manage.vue"),
+        meta: {
+            title: '商品订单管理',
+            icon: 'DataAnalysis',
+            hidden: false
+        },
+        children: [
+            {
+                path: '/OrderList',
+                name: '订单列表',
+                component: ()=> import("@/views/Orders/OrderList.vue"),
+                meta: { 
+                    title: '实体商品订单列表' ,
+                    icon: 'Box',
+                    hidden: false
+                }
+            },
+            {
+                path: '/ServiceOrderList',
+                name: '服务类订单列表',
+                component: ()=> import("@/views/Orders/ServiceOrderList.vue"),
+                meta: { 
+                    title: '服务类订单列表' ,
+                    icon: 'MessageBox',
+                    hidden: false
+                }
+            },
+            {
+                path: '/PendingServiceOrderList',
+                name: '服务类商品待处理订单',
+                component: ()=> import("@/views/Orders/PendingServiceOrderList.vue"),
+                meta: { 
+                    title: '服务类商品待处理订单' ,
+                    icon: 'Notification',
+                    hidden: false
+                }
+            }
+        ]
+    },
+    // 优惠卷信息
+    {
+        path: '/coupon',
+        redirect: '/AddCoupons',
+        component: () => import("@/layout/Manage.vue"),
+        meta: {
+            title: '优惠卷管理',
+            icon: 'Discount',
+            hidden: false
+        },
+        children: [
+            {
+                path: '/AddCoupons',
+                name:'添加优惠券',
+                component: ()=> import("@/views/Coupons/AddCoupons.vue"),
+                meta: { 
+                    title: '添加优惠券' ,
+                    icon: 'Edit',
+                    hidden: false
+                }
+            },
+            {
+                path: '/CouponCenter',
+                name:'优惠券中心',
+                component: ()=> import("@/views/Coupons/CouponCenter.vue"),
+                meta: { 
+                    title: '优惠券中心' ,
+                    icon: 'DataAnalysis',
+                    hidden: false
+                }
+            }
+        ]
+    },
+    // 写真预约
+    {
+        path: '/outfitManage',
+        redirect: '/AddCostumes',
+        component: () => import("@/layout/Manage.vue"),
+        meta: {
+            title: '写真预约管理',
+            icon: 'Camera',
+            hidden: false
+        },
+        children: [
+            {
+                path: '/AddCostumes',
+                name: '添加服装',
+                component: ()=> import("@/views/CostumeAppointments/AddCostumes.vue"),
+                meta: { 
+                    title: '添加服装' ,
+                    icon: 'Edit',
+                    hidden: false
+                }
             },
             {
                 path: '/ClothingGrade',
                 name: '服装等级管理',
-                component: ()=> import("../views/CostumeAppointments/ClothingGrade.vue")
+                component: ()=> import("@/views/CostumeAppointments/ClothingGrade.vue"),
+                meta: { 
+                    title: '服装等级管理' ,
+                    icon: 'Files',
+                    hidden: false
+                }
             },
             {
                 path: '/ManagementCenter',
                 name: '服装详情管理',
-                component: ()=> import("../views/CostumeAppointments/ManagementCenter.vue")
+                component: ()=> import("@/views/CostumeAppointments/ManagementCenter.vue"),
+                meta: { 
+                    title: '服装详情管理' ,
+                    icon: 'Tickets',
+                    hidden: false
+                }
             },
             {
                 path: '/AppointmentOrder',
                 name: '写真预约订单管理',
-                component: ()=> import("../views/CostumeAppointments/AppointmentOrder.vue")
+                component: ()=> import("@/views/CostumeAppointments/AppointmentOrder.vue"),
+                meta: { 
+                    title: '写真预约订单管理' ,
+                    icon: 'MessageBox',
+                    hidden: false
+                }
+            },
+            {
+                path: '/OutfitOrderDetail',
+                name: '写真预约订单详情',
+                component: ()=> import("@/views/CostumeAppointments/OutfitOrderDetail.vue"),
+                meta: { 
+                    title: '写真订单详情' ,
+                    hidden: true
+                }
             },
             {
                 path: '/PendingOutfitOrder',
                 name: '待处理写真预约订单',
-                component: ()=> import("../views/CostumeAppointments/PendingOutfitOrder.vue")
+                component: ()=> import("@/views/CostumeAppointments/PendingOutfitOrder.vue"),
-            },
+                meta: { 
+                    title: '待处理写真预约订单' ,
+                    icon: 'Notification',
+                    hidden: false
+                }
+            }
+        ]
+    },
+    // 退款管理
+    {
+        path: '/refund',
+        redirect: '/refundManage',
+        component: () => import("@/layout/Manage.vue"),
+        meta: {
+            title: '退款管理',
+            icon: 'Switch',
+            hidden: false
+        },
+        children:[
             {
-                path: '/AddCostumes',
+                path: '/refundManage',
-                name: '添加服装',
-                component: ()=> import("../views/CostumeAppointments/AddCostumes.vue")
-            },
-            {
-                path: '/refund',
                 name:'退款管理',
-                component: ()=> import("../views/Refund/Refund.vue")
+                component: ()=> import("@/views/Refund/Refund.vue"),
+                meta: { 
+                    title: '退款管理' ,
+                    icon: 'Money',
+                    hidden: false
+                }
             },
         ]
     },

src/views/CostumeAppointments/AppointmentOrder.vue

@@ -17,51 +17,13 @@
     </el-table-column>
     <el-table-column prop="orderNumber" label="订单编号" width="300"></el-table-column>
     <el-table-column prop="createTime" label="下单时间" width="180"></el-table-column>
-    <!-- <el-table-column prop="userName" label="用户名" width="120"></el-table-column> -->
-    <el-table-column label="所购买的商品" width="150">
-      <el-table-column label="展开" type="expand" width="150">
-        <template #default="props">
-          <el-table :data="props.row.orderItemList" border :cell-style="{ 'text-align': 'center', 'font-size': '14px'}">
-            <el-table-column label="商品名称" prop="goodSnapshot.name" width="200"/>
-            <el-table-column label="商品图片" prop="goodSnapshot.goodImg" width="200">
-              <template #default="scope">
-                <div>
-                  <img :src="scope.row.goodSnapshot.goodImg.split(';')[0]" alt="" style="height: 50px;">
-                </div>
-              </template>
-            </el-table-column>
-            <el-table-column label="类别" prop="goodSnapshot.type"  width="200"/>
-            <el-table-column label="商品单价" prop="goodSnapshot.price" width="200" />
-<!--            <el-table-column label="是否是限定商品" prop="goodSnapshot.festivalOrder" width="150"/>-->
-            <el-table-column label="数量" prop="quantity" width="200"/>
-            <el-table-column label="总价" prop="itemTotalAmount" width="200"/>
-            <el-table-column label="预约日期" prop="reservationDate" width="200"></el-table-column>
-            <el-table-column label="预约时间段" prop="timeSlot" width="200"></el-table-column>
-          </el-table>
-        </template>
-      </el-table-column>
-    </el-table-column>
-    <el-table-column label="联系人信息" width="180">
-      <el-table-column prop="contactsSnapshot.name" label="姓名" />
-      <el-table-column prop="contactsSnapshot.phone" label="手机号" width="180"/>
-    </el-table-column>
-<!--    <el-table-column label="优惠券信息" width="50">-->
-<!--      <el-table-column prop="couponSnapshot.name" label="优惠卷名称" />-->
-    <!-- <el-table-column prop="couponSnapshot.conditionAmount" label="优惠金额" /> -->
-<!--    </el-table-column>-->
     <el-table-column prop="totalAmount" label="订单实付金额"></el-table-column>
     <el-table-column prop="orderStatus" label="订单状态"></el-table-column>
     <el-table-column label="操作" width="220px" fixed="right">
       <template #default="scope">
-        <el-button size="small" @click="showDetail(scope.$index, scope.row)">
+        <el-button size="small" @click="showDetail(scope.row)">
           详情
         </el-button>
-<!--        <el-button :disabled="!['待发货'].includes(scope.row.orderStatus)" size="small" @click="openShipmentDialog(scope.row.id)"  > &lt;!&ndash;   @click="deliverGoods(scope.row)"&ndash;&gt;-->
-<!--          发货-->
-<!--        </el-button>-->
-<!--        <el-button :disabled="!['待支付'].includes(scope.row.orderStatus)" size="small" @click="cancelOrder(scope.row)" type="warning" plain>-->
-<!--          取消订单-->
-<!--        </el-button>-->
         <el-button :disabled="!['待发货'].includes(scope.row.orderStatus)" size="small" @click="deleteOrder(scope.row)" type="danger" plain>
           退款
         </el-button>
@@ -75,58 +37,6 @@
                    :small="null" :disabled="null" :background="null" layout="total, sizes, prev, pager, next, jumper"
                    :total="total" />
   </div>
-  <!--  弹窗-->
-  <el-dialog title="订单详情信息" v-model="DialogVisible" width="60%">
-    <el-form label-width="100px" size="default" :model="editForm" :disabled="disabled">
-      <div style="display: flex">
-        <el-form-item label="订单编号" style="width: 400px">
-          <el-input v-model="editForm.orderNumber" autocomplete="off"></el-input>
-        </el-form-item>
-      </div>
-      <div style="display: flex">
-        <el-form-item label="联系人姓名" style="width: 300px">
-          <el-input v-model="editForm.contactsSnapshot.name" autocomplete="off"></el-input>
-        </el-form-item>
-        <el-form-item label="手机号" style="width: 300px">
-          <el-input v-model="editForm.contactsSnapshot.phone" autocomplete="off"></el-input>
-        </el-form-item>
-      </div>
-      <!-- 这里的商品明细就不放图片了 -->
-      <div style="display: flex">
-        <el-form-item label="订单总金额" style="width: 250px">
-          <el-input v-model="totalAmount" autocomplete="off"></el-input>
-        </el-form-item>
-
-        <el-form-item label="优惠价格" style="width: 250px">
-          <el-input v-model="editForm.couponSnapshot.conditionAmount" autocomplete="off"></el-input>
-        </el-form-item>
-
-      </div>
-
-      <el-form-item label="订单实付金额" style="width: 250px">
-        <el-input v-model="editForm.totalAmount" autocomplete="off"></el-input>
-      </el-form-item>
-
-      <el-form-item label="订单状态" style="width: 250px">
-        <el-input v-model="editForm.orderStatus" autocomplete="off"></el-input>
-      </el-form-item>
-
-      <div style="display: flex">
-        <el-form-item label="下单时间"  style="width: 300px;">
-          <el-input v-model="editForm.createTime" autocomplete="off"></el-input>
-        </el-form-item>
-<!--        <el-form-item label="更新时间" style="width: 300px;">-->
-<!--          <el-input v-model="editForm.updateTime" autocomplete="off"></el-input>-->
-<!--        </el-form-item>-->
-      </div>
-    </el-form>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button style="height: 30px;" @click="DialogVisible = false">取消</el-button>
-        <el-button style="height: 30px" type="primary" @click="DialogVisible = false" >确认</el-button>
-      </div>
-    </template>
-  </el-dialog>
 </template>
 
 <script lang="ts" setup>
@@ -134,16 +44,10 @@ import { onMounted, ref } from "vue";
 import myAxios from "@/api/myAxios";
 import { ElMessage } from "element-plus";
 import { SuccessInfo , ErrorInfo } from "@/utils/messageInfo";
+import { useRouter , useRoute } from "vue-router";
 import emitter from "@/utils/emitter";
 const tableData: any = ref([]);  //表单展示数据
 const total = ref(0);
-const title = ref('')
-const disabled = ref(true)
-const editForm: any = ref({});//编辑表单
-const shipment:any = ref({
-  trackingNumber: null
-})//物流单号
-const DialogVisible = ref(false); //详情展示
 const orderNumber = ref('')
 const searchParams: any = ref({ //封装分页 
   current: 1, //当前页码
@@ -152,6 +56,8 @@ const searchParams: any = ref({ //封装分页
   sortOrder: "descend", //降序
   orderType: 'service'
 })
+const router = useRouter()  
+const route = useRoute()
 const loading = ref(false)
 onMounted(() => {
   getOrderList()  //页面加载获取订单列表
@@ -189,18 +95,11 @@ const getOrderList = async () => {
   }
 }
 
-const totalAmount = ref(0)
-const couponAmount = ref(0)
 //查看订单详情
-const showDetail = (index: number, row: any) => {
+const showDetail = (row: any) => {
-  title.value = "订单详情"
+  router.push({
-  DialogVisible.value = true;
+    path: '/OutfitOrderDetail'
-  if (row.couponSnapshot !== null) {
+  })
-    couponAmount.value = row.couponSnapshot.conditionAmount;
-  }
-  totalAmount.value = row.totalAmount + couponAmount.value;
-  editForm.value = row;
-  console.log('editForm--->',editForm.value);
 };
 const deleteOrder = async (row : any) => {  //微信退款
   loading.value = true

src/views/CostumeAppointments/OutfitOrderDetail.vue

@@ -0,0 +1,23 @@
+<template>
+    <div>
+1
+    </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import myAxios from "@/api/myAxios";
+import { ElMessage } from "element-plus";
+import { SuccessInfo , ErrorInfo } from "@/utils/messageInfo";
+import { useRouter , useRoute } from "vue-router";
+
+const route = useRoute();
+console.log(route.params.id);
+onMounted(()=>{
+
+})
+</script>
+
+<style scoped>
+
+</style>

src/views/Home.vue

@@ -1,240 +0,0 @@
-<template>
-  <!-- <div> -->
-<!--    <el-form ref="resetFormData" :model="form" label-width="auto" style="width: 750px" size="large">-->
-<!--      <el-form-item label="服装类别" prop="type">-->
-<!--        <el-select v-model="typeList.value" placeholder="请选择" @change="(event: any) => loadType(event)">-->
-<!--          <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.type" />-->
-<!--        </el-select>-->
-<!--      </el-form-item>-->
-<!--      <el-form-item label="服装名称" prop="name">-->
-<!--        <el-select v-model="nameList.value" placeholder="请选择" @change="(event: any) => loadName(event)">-->
-<!--          <el-option v-for="item in nameList" :key="item.value" :label="item.label" :value="item.name" />-->
-<!--        </el-select>-->
-<!--      </el-form-item>-->
-<!--    </el-form>-->
-
-    <!-- <el-calendar :disabled-date="disabledDate" class="disabledDate">
-      <template #date-cell="{ data }">
-        <p
-            :class="[
-            selectedDates.includes(data.day)? 'is-selected' : '',
-            isFutureDate(data.day)? '' : 'disabled'
-          ]"
-            @click="handleDateClick(data.day)"
-            class="calendar-date-cell"
-        >
-          {{ data.day.split('-').slice(1).join('-') }}
-          <span v-if="selectedDates.includes(data.day)">✔️</span>
-        </p>
-      </template>
-    </el-calendar> -->
-    <!--抽屉-->
-    <!-- <el-drawer
-        v-for="(drawerInfo, date) in dateDrawerData"
-        :key="date"
-        v-model="drawerInfo.visible"
-        title="{{ date.split('-').slice(1).join('-') }}的时间段设置"
-        :with-header="false"
-    >
-      <div style="margin-bottom: 10px">
-        <el-button @click="addTimePickers(date)">添加时间段</el-button>
-        <el-button @click="printSelectedTimePeriods(date)">保存</el-button>
-      </div>
-      <div v-for="(timeData, index) in drawerInfo.timeDataList" :key="index">
-        <el-time-picker v-model="timeData.value1" placeholder="设置时间段" format="HH:mm" />
-        <el-button @click="deleteTimePicker(index, date)">删除时间段</el-button>
-      </div>
-    </el-drawer>
-  </div>
-  <el-form-item>
-    <el-button type="primary" @click="onSubmit">上架</el-button>
-  </el-form-item>
-  <el-form-item>
-    <el-button type="primary" @click="resetForm">重置</el-button>
-  </el-form-item> -->
-</template>
-
-<script lang="ts" setup>
-import { ref, onMounted } from 'vue'
-import { ElButton, ElTimePicker, ElDrawer } from 'element-plus'
-import myAxios from "@/api/myAxios"
-
-// const dateDrawerData = ref<{
-//   visible: boolean
-//   timeDataList: { value1: string; value2: [Date, Date] }[]
-// }>({})
-
-// const addTimePickers = (date: string) => {
-//   if (!dateDrawerData.value[date]) {
-//     dateDrawerData.value[date] = {
-//       visible: false,
-//       timeDataList: []
-//     }
-//   }
-//   dateDrawerData.value[date].timeDataList.push({
-//     value1: '',
-//     value2: [new Date(), new Date()]
-//   })
-// }
-
-// const deleteTimePicker = (index: number, date: string) => {
-//   if (dateDrawerData.value[date]) {
-//     dateDrawerData.value[date].timeDataList.splice(index, 1)
-//   }
-// }
-
-// const printSelectedTimePeriods = (date: string) => {
-//   if (dateDrawerData.value[date]) {
-//     const selectedTimePeriods = dateDrawerData.value[date].timeDataList.map((timeData) => {
-//       return {
-//         time1: timeData.value1
-//       }
-//     })
-//     console.log(selectedTimePeriods);
-//   }
-// }
-
-const selectedDates = ref<string[]>([])
-const disabledDate = (date: any) => {
-  const today = new Date()
-  const dateString = date.toISOString().split('T')[0]
-  const todayString = today.toISOString().split('T')[0]
-  return dateString < todayString
-}
-
-const isFutureDate = (date: any) => {
-  const today = new Date().toISOString().split('T')[0]
-  return date >= today
-}
-
-// const handleDateClick = (date: any) => {
-//   const dateStr = date
-//   if (isFutureDate(dateStr)) {
-//     if (selectedDates.value.includes(dateStr)) {
-//       selectedDates.value = selectedDates.value.filter(d => d!== dateStr)
-//     } else {
-//       selectedDates.value.push(dateStr)
-//       if (!dateDrawerData.value[dateStr]) {
-//         dateDrawerData.value[dateStr] = {
-//           visible: true,
-//           timeDataList: []
-//         }
-//       } else {
-//         dateDrawerData.value[dateStr].visible = true;
-//       }
-//     }
-//   }
-// }
-
-onMounted(() => {
-  getType();
-})
-
-const form = ref({
-  type: '',
-  name: ''
-})
-
-
-const typeList = ref<{ type: string; label: string }[]>([])
-
-const getType = async () => {
-  const res = await myAxios.post('/clothesGrade/list', {})
-  typeList.value = res.data.data.map((item: any) => ({
-    type: item.clothesType,
-    label: item.clothesType
-  }))
-}
-
-const nameList = ref<{ name: string; label: string }[]>([])
-
-const loadType = (value: any) => {
-    form.value.type = value
-   getName()
-
-}
-const loadName = (value: any) => {
-
-    form.value.name = value;
-}
-
-const getName = async () => {
-  const selectedType = form.value.type;
-  const res = await myAxios.post('/clothesInfo/list/page', {
-    clothesType: selectedType
-  })
-  console.log(selectedType, '1111111111111');
-  nameList.value = res.data.data.records.map((item: any) => ({
-    name: item.name,
-    label: item.name
-  }))
-}
-
-//提交
-const onSubmit = () => {
-
-}
-
-//重置
-const resetForm = () => {
-
-}
-</script>
-
-<style scoped>
-.demo-date-picker {
-  display: flex;
-  width: 100%;
-  padding: 0;
-  flex-wrap: wrap;
-}
-
-.demo-date-picker .block {
-  padding: 30px 0;
-  text-align: center;
-  border-right: solid 1px var(--el-border-color);
-  flex: 1;
-}
-
-.demo-date-picker .block:last-child {
-  border-right: none;
-}
-
-.demo-date-picker .demonstration {
-  display: block;
-  color: var(--el-text-color-secondary);
-  font-size: 14px;
-  margin-bottom: 20px;
-}
-.example-basic .el-date-editor {
-  margin: 8px;
-}
-
-.calendar-date-cell {
-  cursor: pointer;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-}
-
-.is-selected {
-  color: black;
-  border-radius: 50%;
-}
-.disabledDate{
-  width: 550px;
-  height: 280px;
-  font-size: 12px;
-  --el-calendar-cell-width: 30px;
-}
-.disabled {
-  color: #dcdfe6;
-  pointer-events: none;
-}
-.custom-calendar /deep/ .el-calendar-table .el-calendar-day{
-  height: 50px;
-}
-</style>
-
-