cg
f945ccf4c7
- 添加项目配置文件(.editorconfig, .gitignore) - 创建App.vue主应用文件，包含启动时Mock数据初始化 - 添加index.html和main.js应用入口文件 - 配置manifest.json应用基本信息和权限设置 - 设置pages.json页面路由和全局样式 - 添加uni.promisify.adaptor.js适配器文件 - 创建uni.scss设计令牌系统，定义琥珀夜光主题色彩 - 新增constants.js常量定义，包含酒类分类和品牌数据
541 lines
12 KiB
Vue
541 lines
12 KiB
Vue
<template>
|
||
<view class="page-container home safe-bottom">
|
||
<!-- 顶部问候 -->
|
||
<view class="greeting-bar">
|
||
<view class="greeting-left">
|
||
<text class="greeting-text">{{ greeting }}，{{ userName }}</text>
|
||
<text class="greeting-sub">今晚喝一杯？</text>
|
||
</view>
|
||
<image class="avatar" :src="userAvatar" mode="aspectFill"></image>
|
||
</view>
|
||
|
||
<!-- 核心CTA - 首页最醒目位置 -->
|
||
<view class="hero-cta" @click="goRecord">
|
||
<view class="hero-cta-bg"></view>
|
||
<view class="hero-cta-content">
|
||
<text class="hero-cta-emoji">🍻</text>
|
||
<view class="hero-cta-text">
|
||
<text class="hero-cta-title">开始记录</text>
|
||
<text class="hero-cta-sub">记录今晚的酒局</text>
|
||
</view>
|
||
<text class="hero-cta-arrow">›</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 统计卡片 -->
|
||
<view class="stats-row">
|
||
<view class="stat-card card" @click="goProfile">
|
||
<text class="stat-value text-num text-amber">{{ stats.monthDrinkCount }}</text>
|
||
<text class="stat-label">本月饮酒</text>
|
||
</view>
|
||
<view class="stat-card card" @click="goProfile">
|
||
<text class="stat-value text-num">{{ stats.monthCups }}</text>
|
||
<text class="stat-label">标准杯</text>
|
||
</view>
|
||
<view class="stat-card card" @click="goProfile">
|
||
<text class="stat-value text-num" :class="stats.streakType === 'drank' ? 'text-amber' : 'text-mint'">
|
||
{{ stats.streak }}
|
||
</text>
|
||
<text class="stat-label">{{ stats.streakType === 'drank' ? '连喝天数' : '戒酒天数' }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 饮酒日历 -->
|
||
<view class="calendar-section card">
|
||
<DrinkCalendar
|
||
:year="calendarYear"
|
||
:month="calendarMonth"
|
||
:records="records"
|
||
@change-month="onMonthChange"
|
||
@select-date="onDateSelect"
|
||
/>
|
||
</view>
|
||
|
||
<!-- 本周摘要 -->
|
||
<view class="week-summary card">
|
||
<view class="week-header flex-between">
|
||
<text class="text-h3">本周摘要</text>
|
||
<text class="text-caption">{{ weekRange }}</text>
|
||
</view>
|
||
<view class="week-stats flex">
|
||
<view class="week-stat">
|
||
<text class="week-stat-value text-num">{{ stats.weekDrinkCount }}</text>
|
||
<text class="week-stat-label">次饮酒</text>
|
||
</view>
|
||
<view class="week-divider"></view>
|
||
<view class="week-stat">
|
||
<text class="week-stat-value text-num text-amber">{{ stats.weekCups }}</text>
|
||
<text class="week-stat-label">标准杯</text>
|
||
</view>
|
||
</view>
|
||
<view class="health-ref" v-if="stats.weekCups > 0">
|
||
<view class="health-bar-fill" :style="{ width: healthPercent + '%' }"></view>
|
||
<text class="health-text">
|
||
{{ stats.weekCups > 14 ? '本周超标了，注意休息' : '本周控制得不错' }}
|
||
</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 底部健康提示 -->
|
||
<view class="bottom-health-tip">
|
||
<text>过量饮酒有害健康 · 请理性记录</text>
|
||
</view>
|
||
|
||
<!-- 底部导航占位 -->
|
||
<view class="tab-bar">
|
||
<view class="tab-item tab-active" @click="goHome">
|
||
<text class="tab-icon">🏠</text>
|
||
<text class="tab-label">首页</text>
|
||
</view>
|
||
<view class="tab-center" @click="goRecord">
|
||
<view class="tab-fab">
|
||
<text class="tab-fab-icon">+</text>
|
||
</view>
|
||
</view>
|
||
<view class="tab-item" @click="goProfile">
|
||
<text class="tab-icon">👤</text>
|
||
<text class="tab-label">我的</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 日期记录弹窗 -->
|
||
<view v-if="showDayDetail" class="day-overlay" @click="showDayDetail = false">
|
||
<view class="day-detail card-elevated" @click.stop>
|
||
<view class="day-detail-header flex-between">
|
||
<text class="text-h3">{{ selectedDate }}</text>
|
||
<text class="btn-text" @click="showDayDetail = false">关闭</text>
|
||
</view>
|
||
<view v-if="selectedRecord">
|
||
<view v-if="selectedRecord.mode === 'drank'" class="day-record-info">
|
||
<view class="day-drinks">
|
||
<view v-for="(drink, i) in selectedRecord.drinks" :key="i" class="day-drink-item">
|
||
<text>{{ drink.emoji || '🥃' }} {{ drink.brand }} {{ drink.product }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="day-meta flex-between">
|
||
<text class="text-caption">{{ getFeelingName(selectedRecord.feeling) }}</text>
|
||
<text class="text-caption text-amber text-num">{{ selectedRecord.standardCupsTotal }} 标准杯</text>
|
||
</view>
|
||
</view>
|
||
<view v-else class="day-abstain">
|
||
<text class="day-abstain-emoji">🚫</text>
|
||
<text class="text-caption">今日未饮酒，好样的</text>
|
||
</view>
|
||
</view>
|
||
<view v-else class="day-empty">
|
||
<text class="text-caption">当天无记录</text>
|
||
<button class="btn-ghost" @click="backfillDate">补打卡</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import DrinkCalendar from '../../components/DrinkCalendar.vue'
|
||
import { getRecords, getUserInfo } from '../../common/mock-data'
|
||
import { calcStats, getGreeting, formatDate, getWeekStart } from '../../common/utils'
|
||
import { FEELINGS } from '../../common/constants'
|
||
|
||
export default {
|
||
components: { DrinkCalendar },
|
||
data() {
|
||
const now = new Date()
|
||
return {
|
||
calendarYear: now.getFullYear(),
|
||
calendarMonth: now.getMonth() + 1,
|
||
records: [],
|
||
stats: {},
|
||
greeting: '',
|
||
userName: '',
|
||
userAvatar: '/static/logo.png',
|
||
showDayDetail: false,
|
||
selectedDate: '',
|
||
selectedRecord: null
|
||
}
|
||
},
|
||
computed: {
|
||
weekRange() {
|
||
const weekStart = getWeekStart()
|
||
const weekEnd = new Date(weekStart)
|
||
weekEnd.setDate(weekEnd.getDate() + 6)
|
||
return `${formatDate(weekStart, 'MM/DD')} - ${formatDate(weekEnd, 'MM/DD')}`
|
||
},
|
||
healthPercent() {
|
||
// 建议每周不超过14标准杯
|
||
return Math.min((this.stats.weekCups / 14) * 100, 100)
|
||
}
|
||
},
|
||
onShow() {
|
||
// 首次启动跳转引导页
|
||
const isFirst = uni.getStorageSync('is_first_launch')
|
||
const isLoggedIn = uni.getStorageSync('is_logged_in')
|
||
if (isFirst === 'true' || !isLoggedIn) {
|
||
uni.reLaunch({ url: '/pages/onboarding/onboarding' })
|
||
return
|
||
}
|
||
this.loadData()
|
||
},
|
||
methods: {
|
||
loadData() {
|
||
this.records = getRecords()
|
||
const user = getUserInfo()
|
||
this.userName = user.nickname || '酒友'
|
||
this.userAvatar = user.avatar || '/static/logo.png'
|
||
this.greeting = getGreeting()
|
||
this.stats = calcStats(this.records)
|
||
},
|
||
onMonthChange({ year, month }) {
|
||
this.calendarYear = year
|
||
this.calendarMonth = month
|
||
},
|
||
onDateSelect(dateStr) {
|
||
this.selectedDate = dateStr
|
||
this.selectedRecord = this.records.find(r => r.date === dateStr) || null
|
||
this.showDayDetail = true
|
||
},
|
||
getFeelingName(feelingId) {
|
||
const f = FEELINGS.find(f => f.id === feelingId)
|
||
return f ? `${f.emoji} ${f.name}` : ''
|
||
},
|
||
backfillDate() {
|
||
this.showDayDetail = false
|
||
uni.navigateTo({
|
||
url: `/pages/record/record?date=${this.selectedDate}&mode=backfill`
|
||
})
|
||
},
|
||
goRecord() {
|
||
uni.navigateTo({ url: '/pages/record/record' })
|
||
},
|
||
goHome() {
|
||
// 已在首页
|
||
},
|
||
goProfile() {
|
||
uni.navigateTo({ url: '/pages/profile/profile' })
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.home {
|
||
padding: $sp-lg;
|
||
padding-top: 0;
|
||
}
|
||
|
||
.greeting-bar {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: $sp-xl 0 $sp-lg;
|
||
}
|
||
|
||
.greeting-text {
|
||
display: block;
|
||
font-size: $fs-xl;
|
||
font-weight: $fw-bold;
|
||
}
|
||
|
||
.greeting-sub {
|
||
display: block;
|
||
font-size: $fs-sm;
|
||
color: $text-secondary;
|
||
margin-top: $sp-xs;
|
||
}
|
||
|
||
.avatar {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
border-radius: $radius-full;
|
||
border: 4rpx solid $amber-glow;
|
||
}
|
||
|
||
.calendar-section {
|
||
margin-bottom: $sp-lg;
|
||
padding: $sp-lg;
|
||
}
|
||
|
||
.stats-row {
|
||
display: flex;
|
||
gap: $sp-sm;
|
||
margin-bottom: $sp-lg;
|
||
}
|
||
|
||
.stat-card {
|
||
flex: 1;
|
||
text-align: center;
|
||
padding: $sp-lg $sp-sm;
|
||
}
|
||
|
||
.stat-value {
|
||
display: block;
|
||
font-size: $fs-2xl;
|
||
margin-bottom: $sp-xs;
|
||
}
|
||
|
||
.stat-label {
|
||
font-size: $fs-xs;
|
||
color: $text-secondary;
|
||
}
|
||
|
||
.week-summary {
|
||
margin-bottom: $sp-lg;
|
||
}
|
||
|
||
.week-header {
|
||
margin-bottom: $sp-lg;
|
||
}
|
||
|
||
.week-stats {
|
||
gap: 0;
|
||
}
|
||
|
||
.week-stat {
|
||
flex: 1;
|
||
text-align: center;
|
||
}
|
||
|
||
.week-stat-value {
|
||
display: block;
|
||
font-size: $fs-2xl;
|
||
font-weight: $fw-bold;
|
||
margin-bottom: $sp-xs;
|
||
}
|
||
|
||
.week-stat-label {
|
||
font-size: $fs-sm;
|
||
color: $text-secondary;
|
||
}
|
||
|
||
.week-divider {
|
||
width: 2rpx;
|
||
background: rgba(255,255,255,0.06);
|
||
margin: $sp-xs 0;
|
||
}
|
||
|
||
.health-ref {
|
||
margin-top: $sp-lg;
|
||
position: relative;
|
||
height: 12rpx;
|
||
background: $bg-elevated;
|
||
border-radius: $radius-full;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.health-bar-fill {
|
||
height: 100%;
|
||
border-radius: $radius-full;
|
||
background: linear-gradient(90deg, $mint, $amber);
|
||
transition: width $duration-slow $ease-out;
|
||
}
|
||
|
||
.health-text {
|
||
display: block;
|
||
font-size: $fs-xs;
|
||
color: $text-tertiary;
|
||
margin-top: $sp-xs;
|
||
}
|
||
|
||
/* 核心CTA - 首页英雄区域 */
|
||
.hero-cta {
|
||
position: relative;
|
||
margin-bottom: $sp-lg;
|
||
border-radius: $radius-xl;
|
||
overflow: hidden;
|
||
padding: $sp-xl $sp-lg;
|
||
cursor: pointer;
|
||
|
||
&:active {
|
||
transform: scale(0.98);
|
||
}
|
||
}
|
||
|
||
.hero-cta-bg {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: linear-gradient(135deg, $amber-light, $amber, $amber-deep);
|
||
z-index: 0;
|
||
|
||
&::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: -100%;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
|
||
animation: shimmer 4s infinite;
|
||
}
|
||
}
|
||
|
||
@keyframes shimmer {
|
||
0% { left: -100%; }
|
||
100% { left: 100%; }
|
||
}
|
||
|
||
.hero-cta-content {
|
||
position: relative;
|
||
z-index: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: $sp-lg;
|
||
}
|
||
|
||
.hero-cta-emoji {
|
||
font-size: 72rpx;
|
||
}
|
||
|
||
.hero-cta-text {
|
||
flex: 1;
|
||
}
|
||
|
||
.hero-cta-title {
|
||
display: block;
|
||
font-size: $fs-2xl;
|
||
font-weight: $fw-black;
|
||
color: $text-on-amber;
|
||
letter-spacing: -1rpx;
|
||
}
|
||
|
||
.hero-cta-sub {
|
||
display: block;
|
||
font-size: $fs-sm;
|
||
color: rgba(11, 11, 20, 0.6);
|
||
margin-top: $sp-xs;
|
||
}
|
||
|
||
.hero-cta-arrow {
|
||
font-size: 56rpx;
|
||
color: $text-on-amber;
|
||
opacity: 0.5;
|
||
font-weight: $fw-bold;
|
||
}
|
||
|
||
.bottom-health-tip {
|
||
text-align: center;
|
||
padding: $sp-lg 0;
|
||
padding-bottom: 160rpx;
|
||
font-size: $fs-xs;
|
||
color: $text-tertiary;
|
||
opacity: 0.4;
|
||
}
|
||
|
||
/* 底部TabBar */
|
||
.tab-bar {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 120rpx;
|
||
background: $bg-card;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
padding-bottom: env(safe-area-inset-bottom);
|
||
border-top: 2rpx solid rgba(255,255,255,0.04);
|
||
z-index: 50;
|
||
}
|
||
|
||
.tab-item {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: $sp-xs;
|
||
}
|
||
|
||
.tab-icon {
|
||
font-size: $fs-xl;
|
||
opacity: 0.5;
|
||
}
|
||
|
||
.tab-label {
|
||
font-size: $fs-xs;
|
||
color: $text-tertiary;
|
||
}
|
||
|
||
.tab-active {
|
||
.tab-icon { opacity: 1; }
|
||
.tab-label { color: $amber; }
|
||
}
|
||
|
||
.tab-center {
|
||
position: relative;
|
||
top: -20rpx;
|
||
}
|
||
|
||
.tab-fab {
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
background: linear-gradient(135deg, $amber-light, $amber-deep);
|
||
border-radius: $radius-full;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-shadow: $shadow-amber;
|
||
}
|
||
|
||
.tab-fab-icon {
|
||
font-size: $fs-2xl;
|
||
font-weight: $fw-bold;
|
||
color: $text-on-amber;
|
||
}
|
||
|
||
/* 日期弹窗 */
|
||
.day-overlay {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: rgba(0,0,0,0.6);
|
||
display: flex;
|
||
align-items: flex-end;
|
||
z-index: 100;
|
||
padding: $sp-lg;
|
||
}
|
||
|
||
.day-detail {
|
||
width: 100%;
|
||
padding: $sp-xl;
|
||
border-radius: $radius-xl $radius-xl 0 0;
|
||
}
|
||
|
||
.day-detail-header {
|
||
margin-bottom: $sp-lg;
|
||
}
|
||
|
||
.day-drink-item {
|
||
padding: $sp-sm 0;
|
||
font-size: $fs-base;
|
||
border-bottom: 2rpx solid rgba(255,255,255,0.04);
|
||
}
|
||
|
||
.day-meta {
|
||
margin-top: $sp-lg;
|
||
}
|
||
|
||
.day-abstain {
|
||
text-align: center;
|
||
padding: $sp-xl 0;
|
||
}
|
||
|
||
.day-abstain-emoji {
|
||
display: block;
|
||
font-size: $fs-hero;
|
||
margin-bottom: $sp-sm;
|
||
}
|
||
|
||
.day-empty {
|
||
text-align: center;
|
||
padding: $sp-xl 0;
|
||
|
||
.btn-ghost {
|
||
margin-top: $sp-lg;
|
||
}
|
||
}
|
||
</style>
|