hookehuyr

feat(router): 添加历史足迹页面路由和视图组件

添加新的历史足迹页面路由'/recall',并创建对应的视图组件Index.vue
组件包含用户头像、欢迎语、加入时间统计等信息
移除vite配置中未使用的postcss插件配置
......@@ -97,6 +97,12 @@ export const routes = [
meta: { title: '我的活动' },
},
{
path: '/recall',
name: 'Recall',
component: () => import('../views/recall/Index.vue'),
meta: { title: '历史足迹' },
},
{
path: '/checkout',
name: 'CheckoutPage',
component: () => import('../views/checkout/CheckoutPage.vue'),
......
<!--
* @Date: 2025-12-19 15:40:34
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-12-19 16:00:08
* @FilePath: /mlaj/src/views/recall/Index.vue
* @Description: 文件描述
-->
<template>
<div class="min-h-screen bg-[#F0FBF9] flex flex-col items-center pt-20 pb-10 px-6 relative overflow-hidden">
<!-- 头像 -->
<div class="relative mb-6">
<img
:src="userAvatar || defaultAvatar"
class="w-24 h-24 rounded-full border-4 border-white shadow-lg object-cover"
alt="User Avatar"
/>
</div>
<!-- 欢迎语 -->
<h1 class="text-2xl font-bold text-[#1A3B34] mb-2">{{ userName }}</h1>
<h2 class="text-xl font-bold text-[#1A3B34] mb-4">欢迎回归美乐爱觉宇宙</h2>
<p class="text-slate-500 text-sm mb-12">您与Behalo的故事从这里开始</p>
<!-- 时间卡片 -->
<div class="bg-white rounded-3xl p-8 shadow-xl w-full max-w-sm text-center mb-auto relative z-10">
<p class="text-slate-500 mb-4">您加入Behalo的时间</p>
<div class="text-3xl font-bold text-[#1A3B34] mb-4 tracking-wide">{{ joinDateFormatted }}</div>
<div class="text-slate-500">
已有 <span class="text-[#1A3B34] font-bold text-lg">{{ durationString }}</span>
</div>
</div>
<!-- 底部引导 -->
<div class="flex flex-col items-center mt-12 animate-bounce cursor-pointer">
<ChevronDoubleDownIcon class="w-6 h-6 text-[#4ADE80] mb-2" />
<span class="text-[#4ADE80] font-medium text-sm">向上滑动,探索更多历程</span>
</div>
</div>
</template>
<script setup>
import { computed, onMounted } from 'vue';
import { useAuth } from '@/contexts/auth';
import { ChevronDoubleDownIcon } from '@heroicons/vue/24/solid';
import dayjs from 'dayjs';
// 状态
const { currentUser } = useAuth();
// 使用一个通用的默认头像URL,实际项目中应替换为本地资源或配置的默认图
const defaultAvatar = 'https://cdn.ipadbiz.cn/mlaj/images/default_avatar.png';
const userAvatar = computed(() => {
let avatar = currentUser.value?.avatar;
if (avatar && avatar.includes('cdn.ipadbiz.cn')) {
avatar += '?imageMogr2/thumbnail/200x/strip/quality/70';
}
return avatar;
});
const userName = computed(() => currentUser.value?.name || '旅行者');
// 加入时间逻辑
// 优先使用 created_at,如果没有则尝试 reg_time,最后回退到当前时间(防止报错)
const joinDate = computed(() => {
return currentUser.value?.created_at || currentUser.value?.reg_time || new Date();
});
const joinDateFormatted = computed(() => {
return dayjs(joinDate.value).format('YYYY年M月D日');
});
const durationString = computed(() => {
const start = dayjs(joinDate.value);
const now = dayjs();
const years = now.diff(start, 'year');
const months = now.diff(start, 'month') % 12;
// 如果不满一个月,显示天数
if (years === 0 && months === 0) {
const days = now.diff(start, 'day');
return `${days} 天`;
}
if (years > 0) {
return `${years} 年 ${months} 个月`;
} else {
return `${months} 个月`;
}
});
onMounted(() => {
// 调试用,确认用户信息字段
console.log('Recall Page - Current User:', currentUser.value);
});
</script>
<style scoped>
/* 针对不同屏幕尺寸的微调可以放在这里,或者直接使用 Tailwind */
</style>
......@@ -3,6 +3,7 @@ export default {
content: [
"./index.html",
"./src/**/*.{vue,js,ts,jsx,tsx}",
// Force refresh
],
theme: {
extend: {
......
/*
* @Date: 2025-03-20 19:53:12
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-03-25 17:58:03
* @LastEditTime: 2025-12-19 15:58:39
* @FilePath: /mlaj/vite.config.js
* @Description: 文件描述
*/
......@@ -66,25 +66,6 @@ export default ({ command, mode }) => {
},
css: {
modules: '', // 配置 CSS modules 的行为。选项将被传递给 postcss-modules。
postcss: { // 内联的 PostCSS 配置(格式同 postcss.config.js),或者一个(默认基于项目根目录的)自定义的 PostCSS 配置路径。其路径搜索是通过 postcss-load-config 实现的。 注意,如果提供了该内联配置,Vite 将不会搜索其他 PostCSS 配置源。
plugins: [
// postcsspxtoviewport({
// unitToConvert: 'px', // 要转化的单位
// viewportWidth: 375, // UI设计稿的宽度
// unitPrecision: 6, // 转换后的精度,即小数点位数
// propList: ['*'], // 指定转换的css属性的单位,*代表全部css属性的单位都进行转换
// viewportUnit: 'vw', // 指定需要转换成的视窗单位,默认vw
// fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位,默认vw
// selectorBlackList: ['ignore-'], // 指定不转换为视窗单位的类名,
// minPixelValue: 1, // 默认值1,小于或等于1px则不进行转换
// mediaQuery: true, // 是否在媒体查询的css代码中也进行转换,默认false
// replace: true, // 是否转换后直接更换属性值
// // exclude: [/node_modules/], // 设置忽略文件,用正则做目录名匹配
// exclude: [],
// landscape: false // 是否处理横屏情况
// })
]
},
preprocessorOptions: {
// less: {
// javascriptEnabled: true,
......