路由完善
This commit is contained in:
parent
53f2651c99
commit
08933c0aaf
|
|
@ -19,7 +19,6 @@
|
|||
</el-main>
|
||||
</el-container>
|
||||
</el-container>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
style=" overflow-y: auto; overflow-x: hidden"
|
||||
background-color="rgb(170, 113, 81)"
|
||||
:collapse="isCollapse"
|
||||
:collapse-transition="false"
|
||||
text-color="#fff"
|
||||
router
|
||||
active-text-color="#ffd04b">
|
||||
<div style="height: 80px; color: white; font-weight: bold;
|
||||
display: flex; align-items: center; justify-content: center">
|
||||
<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">
|
||||
<span style="margin-left: 5px" v-show="isShow">泠泷水月阁管理系统</span>
|
||||
</div>
|
||||
|
||||
<el-sub-menu index="1">
|
||||
<template #title>
|
||||
<el-icon><HomeFilled /></el-icon>
|
||||
<span>用户管理</span>
|
||||
</template>
|
||||
|
||||
<el-menu-item index="/PersonalCenter">
|
||||
<el-icon><UserFilled /></el-icon>
|
||||
<span slot="title">个人中心</span>
|
||||
</el-menu-item>
|
||||
|
||||
<el-menu-item index="/UserManagement">
|
||||
<el-icon><List /></el-icon>
|
||||
<span slot="title">用户列表</span>
|
||||
</el-menu-item>
|
||||
|
||||
<el-menu-item index="/Upload">
|
||||
<el-icon><List /></el-icon>
|
||||
<span slot="title">图片上传</span>
|
||||
</el-menu-item>
|
||||
</el-sub-menu>
|
||||
|
||||
<el-sub-menu index="2">
|
||||
<template #title>
|
||||
<el-icon><HomeFilled /></el-icon>
|
||||
<span>实体类商品管理</span>
|
||||
</template>
|
||||
|
||||
<el-menu-item index="/AddProduct">
|
||||
<el-icon><Menu /></el-icon>
|
||||
<span slot="title">添加商品</span>
|
||||
</el-menu-item>
|
||||
|
||||
<el-menu-item index="/MerchandiseCenter">
|
||||
<el-icon><UserFilled /></el-icon>
|
||||
<span slot="title">商品中心</span>
|
||||
</el-menu-item>
|
||||
|
||||
<el-menu-item index="/TypeManagement">
|
||||
<el-icon><Menu /></el-icon>
|
||||
<span slot="title">类别管理</span>
|
||||
</el-menu-item>
|
||||
</el-sub-menu>
|
||||
|
||||
<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>
|
||||
<div style="height: 80px; color: white; font-weight: bold;
|
||||
display: flex; align-items: center; justify-content: center">
|
||||
<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">
|
||||
<span style="margin-left: 5px" v-show="isShow">泠泷水月阁管理系统</span>
|
||||
</div>
|
||||
<el-menu
|
||||
style=" overflow-y: auto; overflow-x: hidden"
|
||||
background-color="rgb(170, 113, 81)"
|
||||
:collapse="isCollapse"
|
||||
:collapse-transition="false"
|
||||
text-color="#fff"
|
||||
router
|
||||
active-text-color="#ffd04b"
|
||||
:default-openeds="['0', '1']"
|
||||
>
|
||||
<!-- 遍历 menuRoutes，动态渲染菜单项 -->
|
||||
<template v-for="(item, index) in menuRoutes">
|
||||
<!-- 如果有子路由，使用 el-sub-menu -->
|
||||
<el-sub-menu
|
||||
v-if="item.children && item.children.length"
|
||||
:key="index"
|
||||
:index="index + ''"
|
||||
>
|
||||
<template #title>
|
||||
<el-icon>
|
||||
<component :is="iconComponents[item.meta.icon]"></component>
|
||||
</el-icon>
|
||||
<span>{{ item.meta.title }}</span>
|
||||
</template>
|
||||
<!-- 二级菜单 -->
|
||||
<el-menu-item
|
||||
v-for="(item2, index2) in item.children"
|
||||
:key="index2"
|
||||
:index="item2.path"
|
||||
:class="$route.path === item2.path ? 'is-active' : 'no-active'">
|
||||
<template #title>
|
||||
<el-icon>
|
||||
<component
|
||||
:is="iconComponents[item2.meta.icon]"
|
||||
></component>
|
||||
</el-icon>
|
||||
{{ item2.meta.title }}
|
||||
</template>
|
||||
</el-menu-item>
|
||||
</el-sub-menu>
|
||||
|
||||
<!-- 如果没有子路由，使用 el-menu-item 代码备用，谨防路由被修改-->
|
||||
<!-- <el-menu-item
|
||||
v-else
|
||||
:index="item.path"
|
||||
:class="$route.path === item.path ? 'is-active' : ''"
|
||||
>
|
||||
<el-icon>
|
||||
<component :is="iconComponents[item.meta.icon]"></component>
|
||||
</el-icon>
|
||||
<span>{{ item.meta.title }}</span>
|
||||
</el-menu-item> -->
|
||||
</template>
|
||||
</el-menu>
|
||||
</el-aside>
|
||||
</el-aside>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref} from 'vue'
|
||||
<script setup >
|
||||
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>
|
||||
31
src/layout/components/Breadcrumb.vue
Normal file
31
src/layout/components/Breadcrumb.vue
Normal file
|
|
@ -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>
|
||||
|
|
@ -10,10 +10,8 @@
|
|||
<Fold />
|
||||
</el-icon>
|
||||
|
||||
|
||||
<el-breadcrumb separator="/">
|
||||
<a-breadcrumb-item>{{ route.name }}</a-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
<!-- 面包屑导航 -->
|
||||
<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) {
|
||||
|
|
|
|||
|
|
@ -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 是一个函数，调用它会继续导航。
|
||||
|
|
|
|||
|
|
@ -1,114 +1,301 @@
|
|||
|
||||
|
||||
export const routes = [
|
||||
export const constantRoute = [
|
||||
{
|
||||
path: '/',
|
||||
name:'login',
|
||||
component: () => import("../views/Login.vue")
|
||||
component: () => import("@/views/Login.vue"),
|
||||
meta: {
|
||||
title: '登录界面',
|
||||
hidden: true
|
||||
}
|
||||
},
|
||||
// 个人中心页面
|
||||
{
|
||||
path: '/home',
|
||||
name:'home',
|
||||
component: () => import("../views/Home.vue")
|
||||
},
|
||||
{
|
||||
path: '/manage',
|
||||
path: '/User',
|
||||
redirect: '/PersonalCenter',
|
||||
name: 'person',
|
||||
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")
|
||||
},
|
||||
{
|
||||
path: '/OrderList',
|
||||
name: '订单列表',
|
||||
component: ()=> import("../views/Orders/OrderList.vue")
|
||||
},
|
||||
{
|
||||
path: '/ServiceOrderList',
|
||||
name: '服务类订单列表',
|
||||
component: ()=> import("../views/Orders/ServiceOrderList.vue")
|
||||
},
|
||||
{
|
||||
path: '/PendingServiceOrderList',
|
||||
name: '服务类商品待处理订单',
|
||||
component: ()=> import("../views/Orders/PendingServiceOrderList.vue")
|
||||
},
|
||||
{
|
||||
path: '/AddCoupons',
|
||||
name:'添加优惠券',
|
||||
component: ()=> import("../views/Coupons/AddCoupons.vue")
|
||||
},
|
||||
{
|
||||
path: '/CouponCenter',
|
||||
name:'优惠券中心',
|
||||
component: ()=> import("../views/Coupons/CouponCenter.vue")
|
||||
},
|
||||
component: ()=> import("@/views/Commodity/TypeManagement.vue"),
|
||||
meta: {
|
||||
title: '类别管理' ,
|
||||
icon: 'Files',
|
||||
hidden: false
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
// 服务类商品
|
||||
{
|
||||
path: '/serviceProduct',
|
||||
redirect: '/AddServiceProduct',
|
||||
component: () => import("@/layout/Manage.vue"),
|
||||
meta: {
|
||||
title: '服务类商品管理',
|
||||
icon : 'Calendar',
|
||||
hidden: false
|
||||
},
|
||||
children: [
|
||||
{
|
||||
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',
|
||||
name: '添加服装',
|
||||
component: ()=> import("../views/CostumeAppointments/AddCostumes.vue")
|
||||
},
|
||||
{
|
||||
path: '/refund',
|
||||
path: '/refundManage',
|
||||
name:'退款管理',
|
||||
component: ()=> import("../views/Refund/Refund.vue")
|
||||
component: ()=> import("@/views/Refund/Refund.vue"),
|
||||
meta: {
|
||||
title: '退款管理' ,
|
||||
icon: 'Money',
|
||||
hidden: false
|
||||
}
|
||||
},
|
||||
]
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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)" > <!– @click="deliverGoods(scope.row)"–>-->
|
||||
<!-- 发货-->
|
||||
<!-- </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) => {
|
||||
title.value = "订单详情"
|
||||
DialogVisible.value = true;
|
||||
if (row.couponSnapshot !== null) {
|
||||
couponAmount.value = row.couponSnapshot.conditionAmount;
|
||||
}
|
||||
totalAmount.value = row.totalAmount + couponAmount.value;
|
||||
editForm.value = row;
|
||||
console.log('editForm--->',editForm.value);
|
||||
const showDetail = (row: any) => {
|
||||
router.push({
|
||||
path: '/OutfitOrderDetail'
|
||||
})
|
||||
};
|
||||
const deleteOrder = async (row : any) => { //微信退款
|
||||
loading.value = true
|
||||
|
|
|
|||
23
src/views/CostumeAppointments/OutfitOrderDetail.vue
Normal file
23
src/views/CostumeAppointments/OutfitOrderDetail.vue
Normal file
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user