cg
b95243c8f8
- 添加完整的后端接口文档，包含用户、打卡记录、统计等模块 - 修复应用名称从"喝酒了么"统一更正为"喝了么" - 重构App.vue中的启动逻辑，增加数据迁移和路由守卫功能 - 调整DrinkCalendar组件的UI间距和尺寸参数 - 优化DrinkCard组件的品牌展示文案 - 修改manifest.json中的应用描述和微信小程序配置 - 调整pages.json中的页面路径顺序和tabBar配置 - 更新全局样式文件中的应用名称标识 - 修改mock数据中的用户头像默认值 - 优化卡片导出功能的绘制逻辑和视觉效果
339 lines
6.6 KiB
Vue
339 lines
6.6 KiB
Vue
<script>
|
|
export default {
|
|
onLaunch() {
|
|
console.log('喝了么 App Launch')
|
|
// 初始化Mock数据(仅首次)
|
|
const hasData = uni.getStorageSync('drink_records')
|
|
if (!hasData) {
|
|
import('./common/mock-data').then(({ initMockData }) => {
|
|
initMockData()
|
|
console.log('Mock数据已初始化')
|
|
})
|
|
}
|
|
// 数据迁移：清除旧版 logo.png 头像引用
|
|
this.migrateUserData()
|
|
// 启动路由守卫
|
|
this.checkLaunchRoute()
|
|
},
|
|
onShow() {
|
|
console.log('App Show')
|
|
},
|
|
onHide() {
|
|
console.log('App Hide')
|
|
},
|
|
methods: {
|
|
// 数据迁移：清除旧版 logo.png 头像引用
|
|
migrateUserData() {
|
|
try {
|
|
const raw = uni.getStorageSync('user_info')
|
|
if (raw) {
|
|
const user = JSON.parse(raw)
|
|
if (user.avatar && user.avatar.includes('logo.png')) {
|
|
user.avatar = ''
|
|
uni.setStorageSync('user_info', JSON.stringify(user))
|
|
}
|
|
}
|
|
} catch (e) { /* ignore */ }
|
|
},
|
|
// 启动时检查登录与引导状态，决定跳转目标
|
|
checkLaunchRoute() {
|
|
const isFirst = uni.getStorageSync('is_first_launch')
|
|
const isLoggedIn = uni.getStorageSync('is_logged_in')
|
|
|
|
if (!isFirst || isFirst === 'true') {
|
|
// 首次使用 → 引导页
|
|
uni.reLaunch({ url: '/pages/onboarding/onboarding' })
|
|
} else if (!isLoggedIn || isLoggedIn !== 'true') {
|
|
// 未登录 → 登录页
|
|
uni.reLaunch({ url: '/pages/login/login' })
|
|
}
|
|
// 否则正常进入首页(index)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
/* ==========================================
|
|
* 喝了么 - 全局样式
|
|
* 设计概念: 琥珀夜光 Amber Night
|
|
* ========================================== */
|
|
|
|
page {
|
|
background-color: $bg-base;
|
|
color: $text-primary;
|
|
font-family: $font-base;
|
|
font-size: $fs-base;
|
|
line-height: $lh-normal;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
/* --- 通用工具类 --- */
|
|
.page-container {
|
|
min-height: 100vh;
|
|
background-color: $bg-base;
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
}
|
|
|
|
.card {
|
|
background-color: $bg-card;
|
|
border-radius: $radius-lg;
|
|
padding: $sp-lg;
|
|
box-shadow: $shadow-sm;
|
|
}
|
|
|
|
.card-elevated {
|
|
background-color: $bg-elevated;
|
|
border-radius: $radius-lg;
|
|
padding: $sp-lg;
|
|
box-shadow: $shadow-md;
|
|
}
|
|
|
|
/* --- 文本层级 --- */
|
|
.text-hero {
|
|
font-size: $fs-hero;
|
|
font-weight: $fw-black;
|
|
line-height: $lh-tight;
|
|
letter-spacing: -2rpx;
|
|
}
|
|
|
|
.text-display {
|
|
font-size: $fs-3xl;
|
|
font-weight: $fw-black;
|
|
line-height: $lh-tight;
|
|
}
|
|
|
|
.text-h1 {
|
|
font-size: $fs-2xl;
|
|
font-weight: $fw-bold;
|
|
line-height: $lh-tight;
|
|
}
|
|
|
|
.text-h2 {
|
|
font-size: $fs-xl;
|
|
font-weight: $fw-bold;
|
|
line-height: $lh-tight;
|
|
}
|
|
|
|
.text-h3 {
|
|
font-size: $fs-lg;
|
|
font-weight: $fw-medium;
|
|
line-height: $lh-normal;
|
|
}
|
|
|
|
.text-body {
|
|
font-size: $fs-base;
|
|
font-weight: $fw-normal;
|
|
line-height: $lh-normal;
|
|
}
|
|
|
|
.text-caption {
|
|
font-size: $fs-sm;
|
|
color: $text-secondary;
|
|
line-height: $lh-normal;
|
|
}
|
|
|
|
.text-tiny {
|
|
font-size: $fs-xs;
|
|
color: $text-tertiary;
|
|
}
|
|
|
|
/* --- 数字专用 --- */
|
|
.text-num {
|
|
font-family: $font-num;
|
|
font-weight: $fw-bold;
|
|
letter-spacing: -1rpx;
|
|
}
|
|
|
|
/* --- 色彩文字 --- */
|
|
.text-amber {
|
|
color: $amber;
|
|
}
|
|
|
|
.text-mint {
|
|
color: $mint;
|
|
}
|
|
|
|
.text-coral {
|
|
color: $coral;
|
|
}
|
|
|
|
.text-secondary {
|
|
color: $text-secondary;
|
|
}
|
|
|
|
/* --- 按钮系统 --- */
|
|
.btn-primary {
|
|
background: linear-gradient(135deg, $amber, $amber-deep);
|
|
color: $text-on-amber;
|
|
font-size: $fs-md;
|
|
font-weight: $fw-bold;
|
|
padding: $sp-md $sp-xl;
|
|
border-radius: $radius-full;
|
|
border: none;
|
|
text-align: center;
|
|
box-shadow: $shadow-amber;
|
|
transition: all $duration-fast $ease-out;
|
|
|
|
&:active {
|
|
transform: scale(0.97);
|
|
box-shadow: 0 4rpx 16rpx rgba(232, 168, 56, 0.2);
|
|
}
|
|
}
|
|
|
|
.btn-primary-lg {
|
|
@extend .btn-primary;
|
|
padding: $sp-lg $sp-xl;
|
|
font-size: $fs-lg;
|
|
border-radius: $radius-full;
|
|
}
|
|
|
|
.btn-secondary {
|
|
background-color: $bg-elevated;
|
|
color: $text-primary;
|
|
font-size: $fs-base;
|
|
font-weight: $fw-medium;
|
|
padding: $sp-md $sp-xl;
|
|
border-radius: $radius-full;
|
|
border: 2rpx solid rgba(255, 255, 255, 0.08);
|
|
text-align: center;
|
|
transition: all $duration-fast $ease-out;
|
|
|
|
&:active {
|
|
background-color: $bg-card-alt;
|
|
transform: scale(0.97);
|
|
}
|
|
}
|
|
|
|
.btn-ghost {
|
|
background-color: transparent;
|
|
color: $amber;
|
|
font-size: $fs-base;
|
|
font-weight: $fw-medium;
|
|
padding: $sp-sm $sp-lg;
|
|
border: 2rpx solid $amber;
|
|
border-radius: $radius-full;
|
|
text-align: center;
|
|
transition: all $duration-fast $ease-out;
|
|
|
|
&:active {
|
|
background-color: $amber-glow;
|
|
}
|
|
}
|
|
|
|
.btn-text {
|
|
background: none;
|
|
border: none;
|
|
color: $text-secondary;
|
|
font-size: $fs-sm;
|
|
padding: $sp-xs $sp-sm;
|
|
}
|
|
|
|
/* --- 琥珀CTA大按钮(签名元素) --- */
|
|
.btn-cta {
|
|
background: linear-gradient(135deg, $amber-light, $amber, $amber-deep);
|
|
color: $text-on-amber;
|
|
font-size: $fs-xl;
|
|
font-weight: $fw-bold;
|
|
padding: $sp-lg 0;
|
|
border-radius: $radius-xl;
|
|
border: none;
|
|
text-align: center;
|
|
box-shadow: $shadow-amber;
|
|
width: 100%;
|
|
position: relative;
|
|
overflow: hidden;
|
|
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: -100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
|
|
animation: shimmer 3s infinite;
|
|
}
|
|
|
|
&:active {
|
|
transform: scale(0.98);
|
|
}
|
|
}
|
|
|
|
@keyframes shimmer {
|
|
0% { left: -100%; }
|
|
100% { left: 100%; }
|
|
}
|
|
|
|
/* --- 标签 --- */
|
|
.tag {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: $sp-xs $sp-md;
|
|
border-radius: $radius-full;
|
|
font-size: $fs-sm;
|
|
font-weight: $fw-medium;
|
|
background-color: $bg-elevated;
|
|
color: $text-secondary;
|
|
|
|
&.tag-active {
|
|
background-color: $amber-glow;
|
|
color: $amber;
|
|
border: 2rpx solid rgba(232, 168, 56, 0.3);
|
|
}
|
|
}
|
|
|
|
/* --- 分隔线 --- */
|
|
.divider {
|
|
height: 2rpx;
|
|
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
|
|
margin: $sp-lg 0;
|
|
}
|
|
|
|
/* --- 弹性布局辅助 --- */
|
|
.flex {
|
|
display: flex;
|
|
}
|
|
|
|
.flex-col {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.flex-center {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.flex-between {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.flex-1 {
|
|
flex: 1;
|
|
}
|
|
|
|
/* --- 安全区域 --- */
|
|
.safe-bottom {
|
|
padding-bottom: calc(env(safe-area-inset-bottom) + 120rpx);
|
|
}
|
|
|
|
/* --- 健康提示条 --- */
|
|
.health-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: $sp-sm;
|
|
font-size: $fs-xs;
|
|
color: $text-tertiary;
|
|
background-color: rgba(255, 255, 255, 0.02);
|
|
|
|
text {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
</style>
|