个人中心

src/App.vue

@@ -102,12 +102,14 @@ body {
   --gray-8: 19, 53, 55;//#133537
   --gray-7: 96, 105, 97;//#606961
   --gray-6: 163, 164, 160;//#A3A4A0
+  --gray-5: 74, 102, 77;//#4A664D
 
   --color-neutral-10: rgba(var(--gray-10));//#0c150d
   --color-neutral-9: rgba(var(--gray-9));//#5a5a5a
   --color-neutral-8: rgba(var(--gray-8));//#133537
   --color-neutral-7: rgba(var(--gray-7));//#606961
   --color-neutral-6: rgba(var(--gray-6));//#A3A4A0
+  --color-neutral-5: rgba(var(--gray-5));//#4A664D
 }
 
 :root {

src/i18n/locales/fields/page-fields-zh-CN.json

@@ -6,6 +6,13 @@
     "notPermission": "无权限访问",
     "products": "产品",
     "home": "首页",
-    "profile": "个人中心"
+    "profile": "个人中心",
+    "myOrder": "我的订单",
+    "systemMessage": "系统消息",
+    "myCollection": "我的收藏",
+    "coupon": "优惠券",
+    "accountCenter": "账户中心",
+    "commonPassengerInfo": "常用旅客信息",
+    "distributionCenter": "分销中心"
   }
 }
\ No newline at end of file

src/i18n/locales/zh-CN.ts

@@ -150,6 +150,7 @@ export default {
     roomType: '房型',
     to: '至',
     systemMessage: '系统消息',
+    orderType: '所有类型',
   },
   // HTTP 错误状态码
   httpError: {

src/layouts/components/Headers.vue

@@ -29,7 +29,7 @@
           {{ t('login.loginButton') }}/{{ t('login.register') }}
         </a-button>
         <a-avatar v-else class="cursor-pointer flex-shrink-0 !w-[35px] !h-[35px]"
-        @click="goPage('/personalCenter')">
+        @click="goPage('/personalCenter/myOrder')">
           <img class="w-full h-full cursor-pointer"
             alt="avatar"
             :src="userStore.userInfo.avatar || systemConfigStore.config?.logo || 'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp'"

src/router/index.ts

@@ -17,7 +17,18 @@ const router = createRouter({
         {
           path: '/personalCenter',
           meta: { title:  "page.profile" },
-          component: () => import ('../views/personalCenter/index.vue')
+          component: () => import ('../views/personalCenter/index.vue'),
+           children: [{
+             path: '/personalCenter/myOrder',
+             meta: { title:  "page.myOrder" },
+             component: () => import ('../views/personalCenter/myOrder.vue')
+           },
+           {
+             path: '/personalCenter/systemMessage',
+             meta: { title:  "page.systemMessage" },
+             component: () => import ('../views/personalCenter/systemMessage.vue')
+           },
+          ]
         }
       ]
     },

src/utils/enumhelper.ts

+const EnumHelper = {
+    ParseToEnum(TEnum: any, value: any, comparison: string = '') {
+        if (Object.isFrozen(TEnum)) {
+            let t = Object.values(TEnum)
+            let r = t.find(x => (comparison != '' && x[comparison] == value) || (comparison == '' && x == value))
+            return r
+        } else {
+            throw new Error("这不是一个枚举类型");
+        }
+    }
+}
+
+export default EnumHelper
\ No newline at end of file

src/utils/listProductType.ts

+const ListProductTypeEnum = Object.freeze({
+
+    TRIP: {
+        value: 1,
+        desc: '線路旅遊',
+        bgColor: 'bg-pink-2',
+        color: 'text-pink'
+    },
+    SCENIC: {
+        value: 2,
+        desc: '景點門票',
+        bgColor: 'bg-purple-2',
+        color: 'text-purple'
+    },
+    HOTEL: {
+        value: 3,
+        desc: '酒店住宿',
+        bgColor: 'bg-indigo-2',
+        color: 'text-indigo'
+    },
+    CAR: {
+        value: 4,
+        desc: '目的地用車',
+        bgColor: 'bg-teal-2',
+        color: 'text-teal'
+    },
+    JALAN: {
+        value: 5,
+        desc: '酒店住宿',
+        bgColor: 'bg-secondary-2',
+        color: 'text-secondary'
+    },
+    VISA: {
+        value: 6,
+        desc: '签证',
+        bgColor: 'bg-primary-2',
+        color: 'text-primary'
+    },
+})
+
+export default ListProductTypeEnum
\ No newline at end of file

src/utils/producttypeenum.ts

+import EnumHelper from "./enumhelper"
+import ListProductTypeEnum from "./listProductType"
+
+const ProductTypeEnum = Object.freeze({
+    /**
+     * 一日游
+     */
+    ONE_DAY: {
+        value: 1,
+        desc: '當地遊产品'
+    },
+    /**
+     * 多日游
+     */
+    TEAM_TRIP: {
+        value: 2,
+        desc: '出境遊产品'
+    },
+    /**
+     * 小包团
+     */
+    UNIT_TRIP: {
+        value: 3,
+        desc: '小包团产品'
+    },
+
+    /**
+     * 景点门票
+     */
+    SCENIC_SPOT: {
+        value: 4,
+        desc: '景点门票产品'
+    },
+
+    /**
+     * 主题乐园
+     */
+    THEME_PART: {
+        value: 5,
+        desc: '主题乐园门票'
+    },
+
+    /**
+     * 博物馆
+     */
+    MUSEUM: {
+        value: 6,
+        desc: '博物馆门票'
+    },
+
+    /**
+     * 历史景点
+     */
+    HISTORY: {
+        value: 7,
+        desc: '历史景点门票'
+    },
+
+    /**
+     * 温泉酒店
+     */
+    HOT_SPRING: {
+        value: 8,
+        desc: '温泉酒店产品'
+    },
+
+    /**
+     * 星级酒店
+     */
+    STAR_HOTEL: {
+        value: 9,
+        desc: '星级酒店产品'
+    },
+
+    /**
+     * 度假酒店
+     */
+    RESORT_HOTEL: {
+        value: 10,
+        desc: '度假酒店产品'
+    },
+
+    /**
+     * 民宿
+     */
+    HOMESTAY: {
+        value: 11,
+        desc: '民宿产品'
+    },
+
+    /**
+     * 包车
+     */
+    CHARTER: {
+        value: 12,
+        desc: '包车产品'
+    },
+
+    /**
+     * 接机
+     */
+    PICK_UP: {
+        value: 13,
+        desc: '接机产品'
+    },
+
+    /**
+     * 送机
+     */
+    DROP_OFF: {
+        value: 14,
+        desc: '送机产品'
+    },
+    VISA: {
+        value: 15,
+        desc: '签证产品'
+    }
+
+
+})
+
+const mappingRules = [
+    [-1],
+    [1, 2, 3],
+    [4, 5, 6, 7],
+    [-1],
+    [12, 13, 14],
+    [8, 9, 10, 11],
+    [15]
+]
+
+const mappingListType = (value: number) => {
+    let val = mappingRules.findIndex(x => {
+        return x.indexOf(value) != -1
+    })
+
+    if (val && val > 0) {
+        return EnumHelper.ParseToEnum(ListProductTypeEnum, val, 'value')
+    }
+    return {}
+}
+
+const transProductEnum = (value: number) => {
+    return mappingRules[value]
+}
+
+export default ProductTypeEnum
+
+export { mappingListType, transProductEnum }
\ No newline at end of file

src/views/personalCenter/components/LeftView.vue

@@ -30,7 +30,7 @@
             <div class="LeftView-menu flex items-center cursor-pointer py-[7px] rounded-[8px]  SourceHanSansCN"
             :class="[activeMenu==item.key?'active':'']"
             v-if="item.key=='myOrder'"
-            @click="changeActiveMenu(item.key)">
+            @click="goPage(item.path)">
                 <div class="w-[22px] h-[22px] cursor-pointer"></div>
                 <span class="ml-[18px] text-sm font-light">
                     {{ item.name }}
@@ -50,7 +50,7 @@
             <div class="LeftView-menu flex items-center cursor-pointer py-[7px] rounded-[8px]  SourceHanSansCN"
             :class="[activeMenu==item.key?'active':'']"
             v-if="item.key!='myOrder'&&item.key!='distributionCenter'"
-            @click="changeActiveMenu(item.key)">
+            @click="goPage(item.path)">
                 <div class="w-[22px] h-[22px] cursor-pointer"></div>
                 <span class="ml-[18px] text-sm font-light">
                     {{ item.name }}
@@ -74,7 +74,7 @@
             <div class="LeftView-menu flex items-center cursor-pointer py-[7px] rounded-[8px]  SourceHanSansCN"
             :class="[activeMenu==item.key?'active':'']"
             v-if="item.key=='distributionCenter'"
-            @click="changeActiveMenu(item.key)">
+            @click="goPage(item.path)">
                 <div class="w-[22px] h-[22px] cursor-pointer"></div>
                 <span class="ml-[18px] text-sm font-light">
                     {{ item.name }}
@@ -85,8 +85,9 @@
     </div>
 </template>
 <script setup lang="ts">
-import { ref, reactive, inject } from 'vue'
+import { ref, reactive, inject, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
 import { useUserStore } from '@/stores/user'
 import { useSystemConfigStore } from '@/stores/index'
 
@@ -108,12 +109,17 @@ const emit = defineEmits<{
 
 
 const { t } = useI18n()
+const router = useRouter()
 const userStore = useUserStore()
 const systemConfigStore = useSystemConfigStore()
 const activeMenu = ref(props.activeMenu)
-const changeActiveMenu = (key:string) => {
-    activeMenu.value = key
-    emit('menu-click', key)
+
+watch(() => props.activeMenu, (newVal, oldVal) => {
+    activeMenu.value = newVal
+})
+
+const goPage = (path:string) => {
+    router.push(path)
 }
 </script>
 <style scoped>

src/views/personalCenter/index.vue

@@ -3,82 +3,70 @@
         <div class="h-full flex justify-between w-[1200px]">
             <LeftView 
             :menu-list="menuList"
-            :active-menu="activeMenu"
-            @menu-click="menuClick"/>
-            <div class="h-full flex-1 ml-[24px]">
-                <myOrder v-if="activeMenu === 'myOrder'"/>
-                <systemMessage v-if="activeMenu === 'systemMessage'"/>
-            </div>
+            :active-menu="activeMenu"/>
+            <main class="h-full flex-1 ml-[24px]">
+                <router-view />
+            </main>
         </div>
     </div>
 </template>
 <script setup lang="ts">
-import { ref, reactive, computed, provide } from 'vue'
+import { ref, computed, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import LeftView from './components/LeftView.vue'
-import myOrder from './myOrder.vue'
-import systemMessage from './systemMessage.vue'
 
 const { t } = useI18n()
 const route = useRoute()
 
 
 // 当前激活的菜单
-const activeMenu = ref('myOrder')
-
-const fatherGinseng = reactive({
-    
+const activeMenu = computed(() => {
+  const path = route.path
+  const menu = menuList.value.find(item => path.startsWith(item.path))
+  return menu?.key || 'myOrder'
 })
 
-provide('fatherGinseng', fatherGinseng)
 // 菜单配置
 const menuList = ref([
     {
         name: t('personal.menu.myOrder'),
-        path: '/myOrder',
+        path: '/personalCenter/myOrder',
         key: 'myOrder',
     },
     {
         name: t('personal.menu.systemMessage'),
-        path: '/systemMessage',
+        path: '/personalCenter/systemMessage',
         key: 'systemMessage',
     },
-    {
-        name: t('personal.menu.myCollection'),
-        path: '/myCollection',
-        key: 'myCollection',
-    },
-    {
-        name: t('personal.menu.coupon'),
-        path: '/coupon',
-        key: 'coupon',
-        count: 2,
-    },
-    {
-        name: t('personal.menu.accountCenter'),
-        path: '/accountCenter',
-        key: 'accountCenter',
-    },
-    {
-        name: t('personal.menu.commonPassengerInfo'),
-        path: '/commonPassengerInfo',
-        key: 'commonPassengerInfo',
-    },
-    {
-        name: t('personal.menu.distributionCenter'),
-        path: '/distributionCenter',
-        key: 'distributionCenter',
-    },
+    // {
+    //     name: t('personal.menu.myCollection'),
+    //     path: '/personalCenter/myCollection',
+    //     key: 'myCollection',
+    // },
+    // {
+    //     name: t('personal.menu.coupon'),
+    //     path: '/personalCenter/coupon',
+    //     key: 'coupon',
+    //     count: 2,
+    // },
+    // {
+    //     name: t('personal.menu.accountCenter'),
+    //     path: '/personalCenter/accountCenter',
+    //     key: 'accountCenter',
+    // },
+    // {
+    //     name: t('personal.menu.commonPassengerInfo'),
+    //     path: '/personalCenter/commonPassengerInfo',
+    //     key: 'commonPassengerInfo',
+    // },
+    // {
+    //     name: t('personal.menu.distributionCenter'),
+    //     path: '/personalCenter/distributionCenter',
+    //     key: 'distributionCenter',
+    // },
 ])
 
-const menuClick = (key: string) => {
-   activeMenu.value = key
-}
-
-
-
-
 </script>
 <style scoped>
 

src/views/personalCenter/myOrder.vue

@@ -46,16 +46,43 @@
                 <img class="w-[221px] h-[150px] absolute bottom-0 right-0 z-[2  ]" src="../../assets/images/personal/bg.png" alt="" />
             </div>
         </div>
-        <div class="flex text-base relative">
+        <div class="flex justify-between items-center text-base relative">
+            <div class="flex">
                 <div v-for="(item,index) in orderList"
                     class="myOrder-status px-[13px] py-[22px] cursor-pointer relative"
                     :class="[currentStatus==item.value?'active font-medium':'font-light']"
-            @click="changeStatus(item.value)">{{ item.lable }}
+                    @click="changeStatus(item.value)">{{ item.label }}
                     <div class="myOrder-status-border absolute left-0 bottom-0 w-full flex justify-center">
                         <div></div>
                     </div>
                 </div>
             </div>
+            <div>
+                <a-dropdown position="br" trigger="click">
+                    <div class="orderType-down px-[20px] h-[40px] rounded-[6px] 
+                    from-blue-50 to-indigo-50 flex items-center 
+                    justify-center cursor-pointer transition-all 
+                    duration-200 text-nowrap SourceHanSansCN">
+                    <span class="text-sm font-medium flex items-center">
+                        <span class="mr-[6px]">{{ t('personal.orderType') }}</span>
+                        <icon-down />
+                    </span>
+                    </div>
+                    <template #content>
+                    <a-doption 
+                        v-for="option in productTypeList" 
+                        :key="option.value"
+                        class="orderType-text SourceHanSansCN"
+                        :class="{ 'bg-blue-50': currentType === option.value }"
+                    >
+                        <div class="flex items-center space-x-3 px-2 py-1">
+                            <span class="font-medium">{{ option.label }}</span>
+                        </div>
+                    </a-doption>
+                    </template>
+                </a-dropdown>
+            </div>
+        </div>
         <a-divider class="!m-[0]"/>
         <div class="flex-1 flex flex-col flex-shrink-0"
         :class="[!(dataList.length==0&&!loding)?'items-center justify-center':'']">
@@ -113,32 +140,45 @@ import { useUserStore } from '@/stores/user'
 import { useSystemConfigStore } from '@/stores/index'
 // 引入订单状态枚举
 import OrderStatusEnum from '@/utils/orderStautsEnum'
+import ListProductTypeEnum from '@/utils/listProductType'
+
 
 const { t } = useI18n()
 const userStore = useUserStore()
 const systemConfigStore = useSystemConfigStore()
 const orderList = ref<any>([])
 const currentStatus = ref(0)
+const productTypeList = ref<any>([])
+const currentType = ref(0)
+productTypeList.value.push({
+    value: ListProductTypeEnum.HOTEL.value,
+    label: ListProductTypeEnum.HOTEL.desc,
+})
+productTypeList.value.push({
+    value: ListProductTypeEnum.SCENIC.value,
+    label: ListProductTypeEnum.SCENIC.desc,
+})
+console.log(productTypeList.value,'--------')
  
 orderList.value.push({
     value: 0,
-    lable: t('personal.orderStatus.ALL'),
+    label: t('personal.orderStatus.ALL'),
 })
 orderList.value.push({
     value: OrderStatusEnum.UN_PAY.value,
-    lable: OrderStatusEnum.UN_PAY.desc,
+    label: OrderStatusEnum.UN_PAY.desc,
 })
 orderList.value.push({
     value: OrderStatusEnum.PAYED.value,
-    lable: OrderStatusEnum.PAYED.desc,
+    label: OrderStatusEnum.PAYED.desc,
 })
 orderList.value.push({
     value: OrderStatusEnum.FINISH.value,
-    lable: OrderStatusEnum.FINISH.desc,
+    label: OrderStatusEnum.FINISH.desc,
 })
 orderList.value.push({
     value: OrderStatusEnum.CANCEL.value,
-    lable: OrderStatusEnum.CANCEL.desc,
+    label: OrderStatusEnum.CANCEL.desc,
 })
 
 const queryParams = ref<any>({
@@ -215,4 +255,14 @@ const handleDivScroll = (e: any) => {
 :deep(.arco-scrollbar-track-direction-vertical){
     display: none;
 }
+.orderType-down{
+    background: #F3F3F2;
+    color: var(--color-neutral-5);
+}
+.orderType-text{
+    color: var(--color-neutral-5);
+}
+.orderType-text:hover{
+    color: var(--color-neutral-5);
+}
 </style>
\ No newline at end of file