Skip to content

B
boyueCEnd
Commit 6b11afc0 authored by youjie's avatar youjie
Browse files
Options

个人中心

parent d28af121
Hide whitespace changes
Inline Side-by-side
Showing with 340 additions and 72 deletions
src/App.vue
View file @ 6b11afc0
......@@ -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
View file @ 6b11afc0
......@@ -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
View file @ 6b11afc0
......@@ -150,6 +150,7 @@ export default {
roomType: '房型',
to: '至',
systemMessage: '系统消息',
orderType: '所有类型',
},
// HTTP 错误状态码
httpError: {
......
src/layouts/components/Headers.vue
View file @ 6b11afc0
......@@ -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
View file @ 6b11afc0
......@@ -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 0 → 100644
View file @ 6b11afc0
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 0 → 100644
View file @ 6b11afc0
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 0 → 100644
View file @ 6b11afc0
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
View file @ 6b11afc0
......@@ -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
View file @ 6b11afc0
......@@ -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
View file @ 6b11afc0
......@@ -46,15 +46,42 @@
<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 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 }}
<div class="myOrder-status-border absolute left-0 bottom-0 w-full flex justify-center">
<div></div>
<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.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>
</div>
<a-divider class="!m-[0]"/>
<div class="flex-1 flex flex-col flex-shrink-0"
......@@ -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
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment