个人中心

src/layouts/components/Headers.vue

@@ -66,7 +66,7 @@ const { t } = useI18n()
 const router = useRouter()
 const userStore = useUserStore()
 const systemConfigStore = useSystemConfigStore()
-console.log(userStore.userInfo,'----------')
+// console.log(userStore.userInfo,'----------')
 
 const goPage = (path: string) => {
   router.push(path)

src/router/index.ts

@@ -28,6 +28,31 @@ const router = createRouter({
              meta: { title:  "page.systemMessage" },
              component: () => import ('../views/personalCenter/systemMessage.vue')
            },
+           {
+             path: '/personalCenter/myCollection',
+             meta: { title:  "page.myCollection" },
+             component: () => import ('../views/personalCenter/myCollection.vue')
+           },
+           {
+             path: '/personalCenter/coupon',
+             meta: { title:  "page.coupon" },
+             component: () => import ('../views/personalCenter/coupon.vue')
+           },
+           {
+             path: '/personalCenter/accountCenter',
+             meta: { title:  "page.accountCenter" },
+             component: () => import ('../views/personalCenter/accountCenter.vue')
+           },
+           {
+             path: '/personalCenter/commonPassengerInfo',
+             meta: { title:  "page.commonPassengerInfo" },
+             component: () => import ('../views/personalCenter/commonPassengerInfo.vue')
+           },
+           {
+             path: '/personalCenter/distributionCenter',
+             meta: { title:  "page.distributionCenter" },
+             component: () => import ('../views/personalCenter/distributionCenter.vue')
+           },
           ]
         }
       ]

src/services/UserService.ts

@@ -504,6 +504,26 @@ class UserService {
     )
     return response as unknown as ResetPasswordResponseDto
   }
+
+  /**
+   * 获取个人中心信息
+   * @param email 邮箱地址
+   * @param code 验证码
+   * @param tenantId 租户ID（可选）
+   * @returns 验证结果
+   */
+  static async memberCenterAsync(tenantId: string): Promise<HttpResponse> {
+    const response = await OtaRequest.get(
+      '/member-auth/member-center',
+      {},
+      {
+        headers: tenantId ? {
+          '__tenant': tenantId
+        } : {}
+      }
+    )
+    return response as unknown as HttpResponse
+  }
 }
 
 export default UserService

src/views/personalCenter/accountCenter.vue

+<template>
+    <div class="w-[977px] h-full flex flex-col flex-shrink-0 overflow-hidden">
+        账户中心
+    </div>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useUserStore } from '@/stores/user'
+import { useSystemConfigStore } from '@/stores/index'
+// 引入订单状态枚举
+import OrderStatusEnum from '@/utils/orderStautsEnum'
+
+const { t } = useI18n()
+const userStore = useUserStore()
+const systemConfigStore = useSystemConfigStore()
+const orderList = ref<any>([])
+const currentStatus = ref(0)
+ 
+orderList.value.push({
+    value: 0,
+    lable: t('personal.orderStatus.ALL'),
+})
+orderList.value.push({
+    value: OrderStatusEnum.UN_PAY.value,
+    lable: OrderStatusEnum.UN_PAY.desc,
+})
+orderList.value.push({
+    value: OrderStatusEnum.PAYED.value,
+    lable: OrderStatusEnum.PAYED.desc,
+})
+orderList.value.push({
+    value: OrderStatusEnum.FINISH.value,
+    lable: OrderStatusEnum.FINISH.desc,
+})
+orderList.value.push({
+    value: OrderStatusEnum.CANCEL.value,
+    lable: OrderStatusEnum.CANCEL.desc,
+})
+
+const queryParams = ref<any>({
+    pageIndex: 1,
+    pageSize: 10,
+    orderStatus: currentStatus.value,
+})
+const dataList = ref<any>([])
+const loding = ref(false)
+const noMoreData = ref(false)
+const scrollContainer = ref<any>(null)
+const scrollThreshold = 0 // 阈值，距离底部多少距离时触发加载
+
+const changeStatus = (key: number) => {
+    currentStatus.value = key
+}
+const loadData = async () => {
+    
+}
+
+// 处理 div 滚动事件（核心修改）
+const handleDivScroll = (e: any) => {
+    if (loding.value || noMoreData.value) return;
+    const container = e.target;
+    if (!container) return;
+    // 计算滚动位置（兼容不同浏览器）
+    const scrollTop = container.scrollTop;
+    const clientHeight = container.clientHeight;
+    const scrollHeight = container.scrollHeight;
+    // 触底条件：滚动距离 + 可见高度 ≥ 总高度 - 阈值
+    if (scrollTop + clientHeight >= scrollHeight - scrollThreshold) {
+        noMoreData.value = false
+        queryParams.value.pageIndex ++
+        loadData(); // 加载下一页
+    }
+}
+
+</script>
+<style scoped lang="scss">
+.myOrderData{
+    background: #FBFBFA;
+}
+.myOrder-text-l{
+    color: var(--color-neutral-7);
+}
+:deep(.arco-scrollbar-track-direction-vertical){
+    display: none;
+}
+.myOrder-time{
+    color: var(--color-neutral-6);
+}
+</style>
\ No newline at end of file

src/views/personalCenter/commonPassengerInfo.vue

+<template>
+    <div class="w-[977px] h-full flex flex-col flex-shrink-0 overflow-hidden">
+        常用旅客信息
+    </div>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useUserStore } from '@/stores/user'
+import { useSystemConfigStore } from '@/stores/index'
+// 引入订单状态枚举
+import OrderStatusEnum from '@/utils/orderStautsEnum'
+
+const { t } = useI18n()
+const userStore = useUserStore()
+const systemConfigStore = useSystemConfigStore()
+const orderList = ref<any>([])
+const currentStatus = ref(0)
+ 
+orderList.value.push({
+    value: 0,
+    lable: t('personal.orderStatus.ALL'),
+})
+orderList.value.push({
+    value: OrderStatusEnum.UN_PAY.value,
+    lable: OrderStatusEnum.UN_PAY.desc,
+})
+orderList.value.push({
+    value: OrderStatusEnum.PAYED.value,
+    lable: OrderStatusEnum.PAYED.desc,
+})
+orderList.value.push({
+    value: OrderStatusEnum.FINISH.value,
+    lable: OrderStatusEnum.FINISH.desc,
+})
+orderList.value.push({
+    value: OrderStatusEnum.CANCEL.value,
+    lable: OrderStatusEnum.CANCEL.desc,
+})
+
+const queryParams = ref<any>({
+    pageIndex: 1,
+    pageSize: 10,
+    orderStatus: currentStatus.value,
+})
+const dataList = ref<any>([])
+const loding = ref(false)
+const noMoreData = ref(false)
+const scrollContainer = ref<any>(null)
+const scrollThreshold = 0 // 阈值，距离底部多少距离时触发加载
+
+const changeStatus = (key: number) => {
+    currentStatus.value = key
+}
+const loadData = async () => {
+    
+}
+
+// 处理 div 滚动事件（核心修改）
+const handleDivScroll = (e: any) => {
+    if (loding.value || noMoreData.value) return;
+    const container = e.target;
+    if (!container) return;
+    // 计算滚动位置（兼容不同浏览器）
+    const scrollTop = container.scrollTop;
+    const clientHeight = container.clientHeight;
+    const scrollHeight = container.scrollHeight;
+    // 触底条件：滚动距离 + 可见高度 ≥ 总高度 - 阈值
+    if (scrollTop + clientHeight >= scrollHeight - scrollThreshold) {
+        noMoreData.value = false
+        queryParams.value.pageIndex ++
+        loadData(); // 加载下一页
+    }
+}
+
+</script>
+<style scoped lang="scss">
+.myOrderData{
+    background: #FBFBFA;
+}
+.myOrder-text-l{
+    color: var(--color-neutral-7);
+}
+:deep(.arco-scrollbar-track-direction-vertical){
+    display: none;
+}
+.myOrder-time{
+    color: var(--color-neutral-6);
+}
+</style>
\ No newline at end of file

src/views/personalCenter/components/LeftView.vue

@@ -5,13 +5,13 @@
             <a-avatar class="LeftViewImg cursor-pointer flex-shrink-0 !w-[80px] !h-[80px]">
                 <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="userInfo.photo || systemConfigStore.config?.logo || 'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp'"
                 />
             </a-avatar>
         </div>
-        <div class="mt-[13px] text-lg font-medium text-center truncate">{{ userStore.userInfo.nick }}</div>
+        <div class="mt-[13px] text-lg font-medium text-center truncate">{{ userInfo.name }}</div>
         <div class="flex justify-center items-center mt-[10px] cursor-pointer">
-            <span class="LeftViewTisp w-[6px] h-[6px] rounded-full"></span>
+            <span v-if="userInfo.externalLoginList?.length==0" class="LeftViewTisp w-[6px] h-[6px] rounded-full"></span>
             <span class="LeftViewData ml-[5px] text-sm font-medium text-[#666]">
                 {{ t('personal.completeProfile') }}
                 >>
@@ -85,12 +85,16 @@
     </div>
 </template>
 <script setup lang="ts">
-import { ref, reactive, inject, watch } from 'vue'
+import { ref, reactive, inject, watch, computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 import { useUserStore } from '@/stores/user'
+import UserService from '@/services/UserService'
 import { useSystemConfigStore } from '@/stores/index'
 
+
+
+
 const props = defineProps({
     menuList: {
         type: Array,
@@ -112,8 +116,14 @@ const { t } = useI18n()
 const router = useRouter()
 const userStore = useUserStore()
 const systemConfigStore = useSystemConfigStore()
-const activeMenu = ref(props.activeMenu)
+const tenantId = computed(() => systemConfigStore.tenantId)
+
+const userData = ref({} as any)
+userData.value = inject('userData')
 
+const userInfo = computed(() => userData.value.userInfo)
+
+const activeMenu = ref(props.activeMenu)
 watch(() => props.activeMenu, (newVal, oldVal) => {
     activeMenu.value = newVal
 })
@@ -121,6 +131,12 @@ watch(() => props.activeMenu, (newVal, oldVal) => {
 const goPage = (path:string) => {
     router.push(path)
 }
+
+const getPersonalInfor = async () => {
+  const response = await UserService.memberCenterAsync(tenantId.value)
+  userData.value.userInfo = response
+}
+getPersonalInfor()
 </script>
 <style scoped>
 .LeftViewImg{

src/views/personalCenter/coupon.vue

+<template>
+    <div class="w-[977px] h-full flex flex-col flex-shrink-0 overflow-hidden">
+        优惠券
+    </div>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useUserStore } from '@/stores/user'
+import { useSystemConfigStore } from '@/stores/index'
+// 引入订单状态枚举
+import OrderStatusEnum from '@/utils/orderStautsEnum'
+
+const { t } = useI18n()
+const userStore = useUserStore()
+const systemConfigStore = useSystemConfigStore()
+const orderList = ref<any>([])
+const currentStatus = ref(0)
+ 
+orderList.value.push({
+    value: 0,
+    lable: t('personal.orderStatus.ALL'),
+})
+orderList.value.push({
+    value: OrderStatusEnum.UN_PAY.value,
+    lable: OrderStatusEnum.UN_PAY.desc,
+})
+orderList.value.push({
+    value: OrderStatusEnum.PAYED.value,
+    lable: OrderStatusEnum.PAYED.desc,
+})
+orderList.value.push({
+    value: OrderStatusEnum.FINISH.value,
+    lable: OrderStatusEnum.FINISH.desc,
+})
+orderList.value.push({
+    value: OrderStatusEnum.CANCEL.value,
+    lable: OrderStatusEnum.CANCEL.desc,
+})
+
+const queryParams = ref<any>({
+    pageIndex: 1,
+    pageSize: 10,
+    orderStatus: currentStatus.value,
+})
+const dataList = ref<any>([])
+const loding = ref(false)
+const noMoreData = ref(false)
+const scrollContainer = ref<any>(null)
+const scrollThreshold = 0 // 阈值，距离底部多少距离时触发加载
+
+const changeStatus = (key: number) => {
+    currentStatus.value = key
+}
+const loadData = async () => {
+    
+}
+
+// 处理 div 滚动事件（核心修改）
+const handleDivScroll = (e: any) => {
+    if (loding.value || noMoreData.value) return;
+    const container = e.target;
+    if (!container) return;
+    // 计算滚动位置（兼容不同浏览器）
+    const scrollTop = container.scrollTop;
+    const clientHeight = container.clientHeight;
+    const scrollHeight = container.scrollHeight;
+    // 触底条件：滚动距离 + 可见高度 ≥ 总高度 - 阈值
+    if (scrollTop + clientHeight >= scrollHeight - scrollThreshold) {
+        noMoreData.value = false
+        queryParams.value.pageIndex ++
+        loadData(); // 加载下一页
+    }
+}
+
+</script>
+<style scoped lang="scss">
+.myOrderData{
+    background: #FBFBFA;
+}
+.myOrder-text-l{
+    color: var(--color-neutral-7);
+}
+:deep(.arco-scrollbar-track-direction-vertical){
+    display: none;
+}
+.myOrder-time{
+    color: var(--color-neutral-6);
+}
+</style>
\ No newline at end of file

src/views/personalCenter/distributionCenter.vue

+<template>
+    <div class="w-[977px] h-full flex flex-col flex-shrink-0 overflow-hidden">
+        分销
+    </div>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useUserStore } from '@/stores/user'
+import { useSystemConfigStore } from '@/stores/index'
+// 引入订单状态枚举
+import OrderStatusEnum from '@/utils/orderStautsEnum'
+
+const { t } = useI18n()
+const userStore = useUserStore()
+const systemConfigStore = useSystemConfigStore()
+const orderList = ref<any>([])
+const currentStatus = ref(0)
+ 
+orderList.value.push({
+    value: 0,
+    lable: t('personal.orderStatus.ALL'),
+})
+orderList.value.push({
+    value: OrderStatusEnum.UN_PAY.value,
+    lable: OrderStatusEnum.UN_PAY.desc,
+})
+orderList.value.push({
+    value: OrderStatusEnum.PAYED.value,
+    lable: OrderStatusEnum.PAYED.desc,
+})
+orderList.value.push({
+    value: OrderStatusEnum.FINISH.value,
+    lable: OrderStatusEnum.FINISH.desc,
+})
+orderList.value.push({
+    value: OrderStatusEnum.CANCEL.value,
+    lable: OrderStatusEnum.CANCEL.desc,
+})
+
+const queryParams = ref<any>({
+    pageIndex: 1,
+    pageSize: 10,
+    orderStatus: currentStatus.value,
+})
+const dataList = ref<any>([])
+const loding = ref(false)
+const noMoreData = ref(false)
+const scrollContainer = ref<any>(null)
+const scrollThreshold = 0 // 阈值，距离底部多少距离时触发加载
+
+const changeStatus = (key: number) => {
+    currentStatus.value = key
+}
+const loadData = async () => {
+    
+}
+
+// 处理 div 滚动事件（核心修改）
+const handleDivScroll = (e: any) => {
+    if (loding.value || noMoreData.value) return;
+    const container = e.target;
+    if (!container) return;
+    // 计算滚动位置（兼容不同浏览器）
+    const scrollTop = container.scrollTop;
+    const clientHeight = container.clientHeight;
+    const scrollHeight = container.scrollHeight;
+    // 触底条件：滚动距离 + 可见高度 ≥ 总高度 - 阈值
+    if (scrollTop + clientHeight >= scrollHeight - scrollThreshold) {
+        noMoreData.value = false
+        queryParams.value.pageIndex ++
+        loadData(); // 加载下一页
+    }
+}
+
+</script>
+<style scoped lang="scss">
+.myOrderData{
+    background: #FBFBFA;
+}
+.myOrder-text-l{
+    color: var(--color-neutral-7);
+}
+:deep(.arco-scrollbar-track-direction-vertical){
+    display: none;
+}
+.myOrder-time{
+    color: var(--color-neutral-6);
+}
+</style>
\ No newline at end of file

src/views/personalCenter/index.vue

 <template>
     <div class="h-screen flex justify-center pt-[25px] pb-[12px]">
         <div class="h-full flex justify-between w-[1200px]">
+            <!-- 左侧导航栏 -->
             <LeftView 
             :menu-list="menuList"
             :active-menu="activeMenu"/>
+            <!-- 右侧页面内容 -->
             <main class="h-full flex-1 ml-[24px]">
                 <router-view />
             </main>
@@ -11,11 +13,12 @@
     </div>
 </template>
 <script setup lang="ts">
-import { ref, computed, watch } from 'vue'
+import { ref, computed,reactive, provide } from 'vue'
 import { useRoute } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import LeftView from './components/LeftView.vue'
 
+
 const { t } = useI18n()
 const route = useRoute()
 
@@ -39,33 +42,37 @@ const menuList = ref([
         path: '/personalCenter/systemMessage',
         key: 'systemMessage',
     },
-    // {
-    //     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',
-    // },
+    {
+        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 userData = reactive({
+    userInfo: {},
+})
+provide('userData', userData)
 
 </script>
 <style scoped>

src/views/personalCenter/myCollection.vue

+<template>
+    <div class="w-[977px] h-full flex flex-col flex-shrink-0 overflow-hidden">
+        收藏
+    </div>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useUserStore } from '@/stores/user'
+import { useSystemConfigStore } from '@/stores/index'
+// 引入订单状态枚举
+import OrderStatusEnum from '@/utils/orderStautsEnum'
+
+const { t } = useI18n()
+const userStore = useUserStore()
+const systemConfigStore = useSystemConfigStore()
+const orderList = ref<any>([])
+const currentStatus = ref(0)
+ 
+orderList.value.push({
+    value: 0,
+    lable: t('personal.orderStatus.ALL'),
+})
+orderList.value.push({
+    value: OrderStatusEnum.UN_PAY.value,
+    lable: OrderStatusEnum.UN_PAY.desc,
+})
+orderList.value.push({
+    value: OrderStatusEnum.PAYED.value,
+    lable: OrderStatusEnum.PAYED.desc,
+})
+orderList.value.push({
+    value: OrderStatusEnum.FINISH.value,
+    lable: OrderStatusEnum.FINISH.desc,
+})
+orderList.value.push({
+    value: OrderStatusEnum.CANCEL.value,
+    lable: OrderStatusEnum.CANCEL.desc,
+})
+
+const queryParams = ref<any>({
+    pageIndex: 1,
+    pageSize: 10,
+    orderStatus: currentStatus.value,
+})
+const dataList = ref<any>([])
+const loding = ref(false)
+const noMoreData = ref(false)
+const scrollContainer = ref<any>(null)
+const scrollThreshold = 0 // 阈值，距离底部多少距离时触发加载
+
+const changeStatus = (key: number) => {
+    currentStatus.value = key
+}
+const loadData = async () => {
+    
+}
+
+// 处理 div 滚动事件（核心修改）
+const handleDivScroll = (e: any) => {
+    if (loding.value || noMoreData.value) return;
+    const container = e.target;
+    if (!container) return;
+    // 计算滚动位置（兼容不同浏览器）
+    const scrollTop = container.scrollTop;
+    const clientHeight = container.clientHeight;
+    const scrollHeight = container.scrollHeight;
+    // 触底条件：滚动距离 + 可见高度 ≥ 总高度 - 阈值
+    if (scrollTop + clientHeight >= scrollHeight - scrollThreshold) {
+        noMoreData.value = false
+        queryParams.value.pageIndex ++
+        loadData(); // 加载下一页
+    }
+}
+
+</script>
+<style scoped lang="scss">
+.myOrderData{
+    background: #FBFBFA;
+}
+.myOrder-text-l{
+    color: var(--color-neutral-7);
+}
+:deep(.arco-scrollbar-track-direction-vertical){
+    display: none;
+}
+.myOrder-time{
+    color: var(--color-neutral-6);
+}
+</style>
\ No newline at end of file

src/views/personalCenter/myOrder.vue

@@ -10,7 +10,7 @@
                         {{t('personal.bindingEmail')}}
                     </div>
                     <div class="mt-[10px] flex items-center">
-                        <span class="text-base font-normal">{{ userStore.userInfo?.email || t('personal.unbound') }}</span>
+                        <span class="text-base font-normal">{{ userInfo?.email || t('personal.unbound') }}</span>
                         <img class="w-[15px] h-[15px] ml-[10px] cursor-pointer" src="../../assets/images/personal/pen.png" alt="" />
                     </div>
                 </div>
@@ -134,7 +134,7 @@
     </div>
 </template>
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, inject, computed, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useUserStore } from '@/stores/user'
 import { useSystemConfigStore } from '@/stores/index'
@@ -146,6 +146,11 @@ import ListProductTypeEnum from '@/utils/listProductType'
 const { t } = useI18n()
 const userStore = useUserStore()
 const systemConfigStore = useSystemConfigStore()
+
+const userData = ref({} as any)
+userData.value = inject('userData')
+const userInfo = ref({} as any)
+
 const orderList = ref<any>([])
 const currentStatus = ref(0)
 const productTypeList = ref<any>([])
@@ -158,7 +163,7 @@ productTypeList.value.push({
     value: ListProductTypeEnum.SCENIC.value,
     label: ListProductTypeEnum.SCENIC.desc,
 })
-console.log(productTypeList.value,'--------')
+// console.log(productTypeList.value,'--------')
  
 orderList.value.push({
     value: 0,
@@ -192,6 +197,12 @@ const noMoreData = ref(false)
 const scrollContainer = ref<any>(null)
 const scrollThreshold = 0 // 阈值，距离底部多少距离时触发加载
 
+watch(() => userData.value.userInfo, (newVal, oldVal) => {
+    if(newVal!=oldVal){
+        userInfo.value = userData.value.userInfo
+    }
+})
+
 const changeStatus = (key: number) => {
     currentStatus.value = key
 }