cg/hejiu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(theme): 实现日夜主题自动切换功能

Browse Source 
- 添加日夜主题CSS变量定义，支持琥珀夜光和暖白琥珀两种风格
- 实现主题切换逻辑，根据时间自动切换白天(light)和夜间(dark)主题
- 在App.vue中集成主题初始化和token恢复功能
- 更新全局样式类应用主题颜色变量，包括卡片、文本、边框等
- 创建主题混入(mixin)供各页面使用，确保主题同步更新
- 实现导航栏和TabBar主题动态切换，提升用户体验
- 添加API服务层封装HaveADrink SDK，统一处理认证和请求
- 优化DrinkCard组件显示饮酒感受信息，丰富打卡记录展示
- 更新项目依赖配置，集成新的API客户端库
This commit is contained in:
cg
2026-07-16 22:47:38 +08:00
parent 145976f221
commit 860136bceb
22 changed files with 7051 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/card/card.vue
+85 -21
View File
@@ -1,5 +1,5 @@
<template>
<view class="page-container card-page">
<view :class="themeClass" class="page-container card-page">
<view class="card-nav">
<view class="step-back" @click="goBack">
<text class="step-back-arrow">‹</text>
@@ -29,12 +29,16 @@
<script>
import DrinkCard from '../../components/DrinkCard.vue'
import client from '../../common/api'
import { getRecords } from '../../common/mock-data'
import { DRINK_CATEGORIES, FOOD_CATEGORIES, DRINK_QUOTES } from '../../common/constants'
import { getThemeColors, calcStandardCups, unitToMl } from '../../common/utils'
import { DRINK_CATEGORIES, FOOD_CATEGORIES, DRINK_QUOTES, FEELINGS } from '../../common/constants'
import themeMixin from '../../common/theme-mixin'
const UNIT_NAMES = { ml: 'ml', liang: '两', bottle: '瓶', cup: '杯', can: '听', shot: 'shot' }
export default {
mixins: [themeMixin],
components: { DrinkCard },
data() {
return {
@@ -43,12 +47,57 @@ export default {
saved: false
}
},
onLoad(options) {
const records = getRecords()
if (options && options.recordId) this.record = records.find(r => r.id === options.recordId)
if (!this.record) this.record = records.find(r => r.mode === 'drank') || this.fallback()
async onLoad(options) {
if (options && options.recordId) {
try {
const resp = await client.GetRecordDetail({ id: options.recordId })
const rec = resp.data || resp
if (rec) {
this.record = {
...rec,
mode: String(rec.mode),
feeling: rec.feeling ? String(rec.feeling) : null,
visibility: rec.visibility ? String(rec.visibility) : 'private',
drinks: (rec.drinks || []).map(d => ({
...d,
category: String(d.category),
unit: String(d.unit)
}))
}
}
} catch (e) {
console.warn('获取记录详情失败，降级本地:', e)
}
}
if (!this.record) this.record = this.loadLocalRecord(options.recordId) || this.fallback()
},
methods: {
loadLocalRecord(id) {
if (!id) return null
try {
const records = getRecords()
const found = records.find(r => r.id === id)
if (!found) return null
return {
...found,
mode: String(found.mode || 'drank'),
feeling: found.feeling ? String(found.feeling) : null,
visibility: found.visibility ? String(found.visibility) : 'private',
drinks: (found.drinks || []).map(d => {
const ml = unitToMl(d.amount || 0, d.unit || 'ml')
return {
...d,
category: String(d.category || d.categoryId || ''),
unit: String(d.unit || 'ml'),
standardCups: d.standardCups || calcStandardCups(ml, d.degree || 0)
}
})
}
} catch (e) {
console.warn('读取本地记录失败:', e)
return null
}
},
fallback() {
return {
date: new Date().toISOString().slice(0, 10), mode: 'drank',
@@ -86,10 +135,11 @@ export default {
const W = 750, H = 1600
const rec = this.record
const WHITE = '#F2F2F2'
const SUB = '#7E7E96'
const DIM = '#4A4A62'
const AMBER = '#E8A838'
const colors = getThemeColors(this.currentTheme)
const WHITE = colors.textPrimary
const SUB = colors.textSecondary
const DIM = colors.textTertiary
const AMBER = colors.amber
const F = '-apple-system, PingFang SC, Helvetica Neue, sans-serif'
const cardW = W
@@ -116,12 +166,13 @@ export default {
const drinks = rec.drinks || []
const drinkH = drinks.length * 52
const foodH = rec.food ? 52 : 0
const cardH = 48 + 56 + photoAreaH + 32 + drinkH + foodH + 16 + 40 + 36 + 56 + 80 + 40
const feelingH = rec.feeling ? 48 : 0
const cardH = 48 + 56 + photoAreaH + 32 + drinkH + foodH + feelingH + 16 + 40 + 36 + 56 + 80 + 40
// 卡片背景渐变（填满整个画布）
const grad = ctx.createLinearGradient(0, 0, cardW, cardY + cardH)
grad.addColorStop(0, '#1A1510')
grad.addColorStop(1, '#0D0B08')
grad.addColorStop(0, colors.cardGradStart)
grad.addColorStop(1, colors.cardGradEnd)
ctx.setFillStyle(grad)
ctx.fillRect(0, 0, W, cardH)
@@ -148,7 +199,7 @@ export default {
if (imgs[0]) {
try { ctx.drawImage(imgs[0], P, y, maxW, heroH) } catch (e) {}
} else {
ctx.setFillStyle('rgba(255,255,255,0.03)')
ctx.setFillStyle(colors.bgPlaceholder)
ctx.fillRect(P, y, maxW, heroH)
}
ctx.restore()
@@ -193,7 +244,7 @@ export default {
if (imgs[i]) {
try { ctx.drawImage(imgs[i], pos.x, pos.y, pos.w, pos.h) } catch (e) {}
} else {
ctx.setFillStyle('rgba(255,255,255,0.03)')
ctx.setFillStyle(colors.bgPlaceholder)
ctx.fillRect(pos.x, pos.y, pos.w, pos.h)
}
ctx.restore()
@@ -203,7 +254,7 @@ export default {
// emoji 圆形
const eR = 100
const eCx = W / 2, eCy = y + eR
ctx.setFillStyle('rgba(232,168,56,0.08)')
ctx.setFillStyle(colors.emojiBg)
ctx.beginPath()
ctx.arc(eCx, eCy, eR, 0, Math.PI * 2)
ctx.fill()
@@ -222,7 +273,7 @@ export default {
const emoji = cat ? cat.emoji : '🥃'
const name = `${emoji} ${d.brand}`
const unitName = UNIT_NAMES[d.unit] || d.unit
const detail = `${d.amount}${unitName}·${d.standardCups}杯`
const detail = `${d.amount}${unitName}`
ctx.font = `500 28px ${F}`
ctx.setFillStyle(WHITE)
@@ -246,11 +297,24 @@ export default {
y += 52
}
// 饮酒感受
if (rec.feeling) {
const feeling = FEELINGS.find(f => f.id === rec.feeling)
if (feeling) {
y += 8
const feelingText = `${feeling.emoji} ${feeling.name}`
ctx.font = `500 26px ${F}`
ctx.setFillStyle(AMBER)
ctx.fillText(feelingText, P, y)
y += 40
}
}
// 分割线（渐变）
y += 16
const lineGrad = ctx.createLinearGradient(P, y, W - P, y)
lineGrad.addColorStop(0, 'transparent')
lineGrad.addColorStop(0.5, 'rgba(232,168,56,0.15)')
lineGrad.addColorStop(0.5, colors.borderSubtle)
lineGrad.addColorStop(1, 'transparent')
ctx.setStrokeStyle(lineGrad)
ctx.setLineWidth(2)
@@ -290,10 +354,10 @@ export default {
const qrSize = 80
const qrX = W - P - qrSize
const qrY = y - 30
ctx.setStrokeStyle('rgba(232,168,56,0.15)')
ctx.setStrokeStyle(colors.borderSubtle)
ctx.setLineWidth(2)
this.rr(ctx, qrX, qrY, qrSize, qrSize, 8, 'stroke')
ctx.setFillStyle('rgba(255,255,255,0.03)')
ctx.setFillStyle(colors.bgPlaceholder)
this.rr(ctx, qrX, qrY, qrSize, qrSize, 8, 'fill')
return new Promise(resolve => {
@@ -453,7 +517,7 @@ export default {
border-radius: $radius-full;
font-size: $fs-base;
background: transparent;
border: 2rpx solid rgba(255, 255, 255, 0.1);
border: 2rpx solid var(--border-active, rgba(255, 255, 255, 0.12));
color: $text-secondary;
display: flex;
align-items: center;
pages/index/index.vue
+105 -42
View File
@@ -1,15 +1,11 @@
<template>
<view class="page-container home">
<view :class="themeClass" class="page-container home">
<!-- 顶部问候 -->
<view class="greeting-bar" :style="{ paddingTop: statusBarHeight + 'px' }">
<view class="greeting-left">
<text class="greeting-text">{{ greeting }}，{{ userName }}</text>
<text class="greeting-sub">今晚喝一杯？</text>
</view>
<image v-if="userAvatar" class="avatar" :src="userAvatar" mode="aspectFill"></image>
<view v-else class="avatar avatar-placeholder">
<text class="avatar-placeholder-icon">👤</text>
</view>
</view>
<!-- 核心CTA - 首页最醒目位置 -->
@@ -121,11 +117,13 @@
<script>
import DrinkCalendar from '../../components/DrinkCalendar.vue'
import { getRecords, getUserInfo } from '../../common/mock-data'
import { calcStats, getGreeting, formatDate, getWeekStart } from '../../common/utils'
import client from '../../common/api'
import { getGreeting, formatDate, getWeekStart } from '../../common/utils'
import { FEELINGS } from '../../common/constants'
import themeMixin from '../../common/theme-mixin'
export default {
mixins: [themeMixin],
components: { DrinkCalendar },
data() {
const now = new Date()
@@ -138,7 +136,6 @@ export default {
stats: {},
greeting: '',
userName: '',
userAvatar: '',
showDayDetail: false,
selectedDate: '',
selectedRecord: null
@@ -167,17 +164,100 @@ export default {
this.loadData()
},
methods: {
loadData() {
this.records = getRecords()
const user = getUserInfo()
this.userName = user.nickname || '酒友'
this.userAvatar = user.avatar || ''
async loadData() {
this.greeting = getGreeting()
this.stats = calcStats(this.records)
// 并行加载用户信息、统计概览、记录列表
try {
const [userResp, statsResp, recordsResp] = await Promise.allSettled([
client.GetUserProfile({}),
client.GetStatsOverview({}),
client.GetRecords({ page: 1, pageSize: 100 })
])
// 用户信息
if (userResp.status === 'fulfilled' && userResp.value) {
const user = userResp.value
this.userName = user.nickname || '酒友'
uni.setStorageSync('user_info', JSON.stringify(user))
} else {
// 降级读取本地缓存
try {
const cached = JSON.parse(uni.getStorageSync('user_info') || '{}')
this.userName = cached.nickname || '酒友'
} catch (e) {
this.userName = '酒友'
}
}
// 统计概览
if (statsResp.status === 'fulfilled' && statsResp.value) {
const s = statsResp.value.data || statsResp.value
this.stats = {
weekDrinkCount: s.weekDrinkCount || 0,
weekCups: s.weekCups || 0,
monthDrinkCount: s.monthDrinkCount || 0,
monthCups: s.monthCups || 0,
streak: s.streak || 0,
streakType: String(s.streakType || 'drank'),
totalDays: s.totalDays || 0,
totalRecords: s.totalRecords || 0,
totalCups: s.totalCups || 0,
favCategory: s.favCategory ? String(s.favCategory) : null,
categoryVariety: s.categoryVariety || 0
}
}
// 记录列表
if (recordsResp.status === 'fulfilled' && recordsResp.value) {
const list = recordsResp.value.list || recordsResp.value
this.records = Array.isArray(list) ? list.map(r => ({
...r,
mode: String(r.mode),
feeling: r.feeling ? String(r.feeling) : null,
visibility: r.visibility ? String(r.visibility) : 'private',
drinks: (r.drinks || []).map(d => ({
...d,
category: String(d.category),
unit: String(d.unit)
}))
})) : []
}
} catch (e) {
console.warn('加载首页数据失败:', e)
// 降级：读取本地缓存
try {
const cached = JSON.parse(uni.getStorageSync('user_info') || '{}')
this.userName = cached.nickname || '酒友'
} catch (err) {
this.userName = '酒友'
}
}
},
onMonthChange({ year, month }) {
this.calendarYear = year
this.calendarMonth = month
// 切换月份时重新加载记录
this.loadRecordsForMonth(year, month)
},
async loadRecordsForMonth(year, month) {
try {
const monthStr = `${year}-${String(month).padStart(2, '0')}`
const resp = await client.GetRecords({ page: 1, pageSize: 100, month: monthStr })
const list = resp.list || resp
this.records = Array.isArray(list) ? list.map(r => ({
...r,
mode: String(r.mode),
feeling: r.feeling ? String(r.feeling) : null,
visibility: r.visibility ? String(r.visibility) : 'private',
drinks: (r.drinks || []).map(d => ({
...d,
category: String(d.category),
unit: String(d.unit)
}))
})) : []
} catch (e) {
console.warn('加载月度记录失败:', e)
}
},
onDateSelect(dateStr) {
this.selectedDate = dateStr
@@ -240,8 +320,7 @@ export default {
.greeting-bar {
display: flex;
justify-content: space-between;
align-items: center;
align-items: flex-start;
padding: $sp-md 0 $sp-sm;
}
@@ -249,6 +328,7 @@ export default {
display: block;
font-size:38rpx;
font-weight: $fw-bold;
color: $text-primary;
}
.greeting-sub {
@@ -258,27 +338,6 @@ export default {
margin-top: 4rpx;
}
.avatar {
width: 72rpx;
height: 72rpx;
border-radius: $radius-full;
border: 4rpx solid $amber-glow;
flex-shrink: 0;
}
.avatar-placeholder {
background: $bg-elevated;
display: flex;
align-items: center;
justify-content: center;
border: 4rpx dashed rgba(232,168,56,0.3);
}
.avatar-placeholder-icon {
font-size: 40rpx;
opacity: 0.5;
}
.calendar-section {
margin-bottom: $sp-md;
padding: $sp-md;
@@ -299,6 +358,7 @@ export default {
.stat-value {
display: block;
font-size: $fs-xl;
color: $text-primary;
margin-bottom: 4rpx;
}
@@ -328,6 +388,7 @@ export default {
display: block;
font-size: $fs-xl;
font-weight: $fw-bold;
color: $text-primary;
margin-bottom: 4rpx;
}
@@ -338,7 +399,7 @@ export default {
.week-divider {
width: 2rpx;
background: rgba(255,255,255,0.06);
background: var(--divider-color, rgba(255, 255, 255, 0.08));
margin: $sp-xs 0;
}
@@ -395,7 +456,7 @@ export default {
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
background: linear-gradient(90deg, transparent, var(--btn-shimmer, rgba(255, 255, 255, 0.15)), transparent);
animation: shimmer 4s infinite;
}
}
@@ -458,7 +519,7 @@ export default {
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.6);
background: var(--overlay-mask, rgba(0, 0, 0, 0.6));
display: flex;
align-items: flex-end;
z-index: 100;
@@ -468,6 +529,7 @@ export default {
.day-detail {
width: 100%;
padding: $sp-xl;
color: $text-primary;
border-radius: $radius-xl $radius-xl 0 0;
}
@@ -478,7 +540,8 @@ export default {
.day-drink-item {
padding: $sp-sm 0;
font-size: $fs-base;
border-bottom: 2rpx solid rgba(255,255,255,0.04);
color: $text-primary;
border-bottom: 2rpx solid var(--border-micro, rgba(255, 255, 255, 0.05));
}
.day-meta {
@@ -510,6 +573,6 @@ export default {
width: 100%;
font-size: $fs-sm;
color: $text-secondary;
border-color: rgba(255,255,255,0.1);
border-color: var(--border-active, rgba(255, 255, 255, 0.12));
}
</style>
pages/login/login.vue
+35 -17
View File
@@ -1,5 +1,5 @@
<template>
<view class="page-container login-page">
<view :class="themeClass" class="page-container login-page">
<!-- 顶部品牌区 -->
<view class="brand-area">
<view class="brand-glow"></view>
@@ -99,7 +99,11 @@
</template>
<script>
import themeMixin from '../../common/theme-mixin'
import client, { saveAuthTokens } from '../../common/api'
export default {
mixins: [themeMixin],
data() {
return {
showNotice: true,
@@ -138,29 +142,43 @@ export default {
}
this.loginLoading = true
try {
// 获取微信登录code（用于后续服务端鉴权）
const loginRes = await this.wxLogin().catch(() => null)
// 1. 获取微信登录 code
const loginRes = await this.wxLogin()
if (!loginRes || !loginRes.code) {
throw new Error('获取微信code失败')
}
// 2. 调用后端微信登录接口
const loginParams = {
code: loginRes.code,
nickName: this.nickname.trim() || '',
avatarUrl: this.avatarUrl || ''
}
const resp = await client.WechatLogin(loginParams)
// 3. 保存 token 和用户信息
saveAuthTokens(resp)
if (resp.user) {
uni.setStorageSync('user_info', JSON.stringify(resp.user))
}
uni.setStorageSync('is_logged_in', 'true')
uni.setStorageSync('is_guest', 'false')
uni.setStorageSync('is_first_launch', 'false')
this.finishLogin()
} catch (e) {
console.warn('后端登录失败，降级为本地模式:', e)
uni.showToast({ title: e.msg || '登录失败，使用本地模式', icon: 'none', duration: 2000 })
// 降级为本地登录
const userInfo = {
id: `user_${Date.now()}`,
nickname: this.nickname.trim() || '酒友',
avatar: this.avatarUrl || '',
wxCode: (loginRes && loginRes.code) || '',
joinedAt: new Date().toISOString().slice(0, 10),
preferences: null
}
uni.setStorageSync('user_info', JSON.stringify(userInfo))
this.finishLogin()
} catch (e) {
console.warn('登录失败，降级为本地登录:', e)
const userInfo = {
id: `user_${Date.now()}`,
nickname: this.nickname.trim() || '酒友',
avatar: '',
joinedAt: new Date().toISOString().slice(0, 10),
preferences: null
}
uni.setStorageSync('user_info', JSON.stringify(userInfo))
uni.setStorageSync('is_logged_in', 'true')
uni.setStorageSync('is_first_launch', 'false')
this.finishLogin()
} finally {
this.loginLoading = false
@@ -334,7 +352,7 @@ export default {
align-items: center;
justify-content: space-between;
padding: $sp-sm 0;
border-bottom: 2rpx solid rgba(255,255,255,0.04);
border-bottom: 2rpx solid var(--border-micro, rgba(255, 255, 255, 0.05));
}
.avatar-btn {
@@ -432,7 +450,7 @@ export default {
.login-divider-line {
flex: 1;
height: 2rpx;
background: rgba(255,255,255,0.06);
background: var(--bg-hover, rgba(255, 255, 255, 0.08));
}
.login-divider-text {
pages/onboarding/onboarding.vue
+4 -1
View File
@@ -1,5 +1,5 @@
<template>
<view class="page-container onboarding">
<view :class="themeClass" class="page-container onboarding">
<!-- 跳过按钮 -->
<view class="skip-bar">
<text class="btn-text" @click="goLogin">跳过</text>
@@ -63,7 +63,10 @@
</template>
<script>
import themeMixin from '../../common/theme-mixin'
export default {
mixins: [themeMixin],
data() {
return {
currentSlide: 0,
pages/profile/profile.vue
+73 -12
View File
@@ -1,5 +1,5 @@
<template>
<view class="page-container profile-page safe-bottom">
<view :class="themeClass" class="page-container profile-page safe-bottom">
<!-- 用户头部 -->
<view class="profile-header">
<view class="profile-glow"></view>
@@ -108,11 +108,13 @@
<script>
import AchievementBadge from '../../components/AchievementBadge.vue'
import { getRecords, getUserInfo } from '../../common/mock-data'
import { calcStats, checkAchievements } from '../../common/utils'
import client, { clearAuth } from '../../common/api'
import { checkAchievements } from '../../common/utils'
import { ACHIEVEMENTS, DRINK_CATEGORIES } from '../../common/constants'
import themeMixin from '../../common/theme-mixin'
export default {
mixins: [themeMixin],
components: { AchievementBadge },
data() {
return {
@@ -136,11 +138,67 @@ export default {
this.loadData()
},
methods: {
loadData() {
this.user = getUserInfo()
const records = getRecords()
this.stats = calcStats(records)
this.achievementList = checkAchievements(this.stats, ACHIEVEMENTS)
async loadData() {
try {
const [userResp, statsResp, achieveResp] = await Promise.allSettled([
client.GetUserProfile({}),
client.GetStatsOverview({}),
client.GetAchievements({})
])
// 用户信息
if (userResp.status === 'fulfilled' && userResp.value) {
this.user = userResp.value.data || userResp.value
} else {
try {
this.user = JSON.parse(uni.getStorageSync('user_info') || '{}')
} catch (e) { this.user = {} }
}
// 统计概览
if (statsResp.status === 'fulfilled' && statsResp.value) {
const s = statsResp.value.data || statsResp.value
this.stats = {
weekDrinkCount: s.weekDrinkCount || 0,
weekCups: s.weekCups || 0,
monthDrinkCount: s.monthDrinkCount || 0,
monthCups: s.monthCups || 0,
streak: s.streak || 0,
streakType: String(s.streakType || 'drank'),
totalDays: s.totalDays || 0,
totalRecords: s.totalRecords || 0,
totalCups: s.totalCups || 0,
favCategory: s.favCategory ? String(s.favCategory) : null,
categoryVariety: s.categoryVariety || 0
}
}
// 成就列表
if (achieveResp.status === 'fulfilled' && achieveResp.value) {
const list = achieveResp.value.list || achieveResp.value.data || achieveResp.value
if (Array.isArray(list) && list.length > 0) {
this.achievementList = list.map(a => ({
id: a.achievement_id || a.id,
name: a.name,
desc: a.desc,
icon: a.icon,
condition: a.condition || '',
unlocked: !!a.unlocked
}))
} else {
// API 返回空，降级本地计算
this.achievementList = checkAchievements(this.stats, ACHIEVEMENTS)
}
} else {
this.achievementList = checkAchievements(this.stats, ACHIEVEMENTS)
}
} catch (e) {
console.warn('加载个人数据失败:', e)
try {
this.user = JSON.parse(uni.getStorageSync('user_info') || '{}')
} catch (err) { this.user = {} }
this.achievementList = checkAchievements(this.stats, ACHIEVEMENTS)
}
},
showAchievementDetail(a) {
this.detailAchievement = a
@@ -172,9 +230,7 @@ export default {
confirmColor: '#FF6B6B',
success: (res) => {
if (res.confirm) {
uni.removeStorageSync('is_logged_in')
uni.removeStorageSync('is_guest')
uni.removeStorageSync('user_info')
clearAuth()
uni.reLaunch({ url: '/pages/login/login' })
}
}
@@ -239,6 +295,7 @@ export default {
.profile-name {
font-size: $fs-xl;
font-weight: $fw-bold;
color: $text-primary;
margin-bottom: $sp-xs;
}
@@ -256,6 +313,7 @@ export default {
display: block;
font-size: $fs-lg;
font-weight: $fw-bold;
color: $text-primary;
margin-bottom: $sp-lg;
}
@@ -274,6 +332,7 @@ export default {
display: block;
font-size: $fs-2xl;
font-weight: $fw-bold;
color: $text-primary;
margin-bottom: $sp-xs;
}
@@ -299,6 +358,7 @@ export default {
display: block;
font-size: $fs-3xl;
font-weight: $fw-black;
color: $text-primary;
}
.streak-emoji {
@@ -326,6 +386,7 @@ export default {
align-items: center;
gap: $sp-md;
padding: $sp-lg 0;
color: $text-primary;
&:active {
opacity: 0.7;
@@ -364,7 +425,7 @@ export default {
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.7);
background: var(--overlay-modal, rgba(0, 0, 0, 0.7));
display: flex;
align-items: center;
justify-content: center;
pages/record/record.vue
+54 -18
View File
@@ -1,5 +1,5 @@
<template>
<view class="page-container record-page safe-bottom">
<view :class="themeClass" class="page-container record-page safe-bottom">
<!-- 顶部进度 -->
<view class="step-header">
<view class="step-back" @click="handleBack">
@@ -336,9 +336,12 @@ import {
FEELINGS, VISIBILITY_OPTIONS
} from '../../common/constants'
import { calcStandardCups, unitToMl, formatDate } from '../../common/utils'
import client from '../../common/api'
import { addRecord } from '../../common/mock-data'
import themeMixin from '../../common/theme-mixin'
export default {
mixins: [themeMixin],
data() {
return {
currentStep: 1,
@@ -548,25 +551,48 @@ export default {
}
if (this.currentStep < this.totalSteps) this.currentStep++
},
publishRecord() {
async publishRecord() {
const allDrinks = this.allDrinks.length > 0 ? this.allDrinks : this.drinks
const record = {
const recordData = {
date: this.backfillDate || formatDate(new Date(), 'YYYY-MM-DD'),
mode: 'drank',
drinks: allDrinks,
food: this.selectedFood ? { category: this.selectedFood, name: this.foodName } : null,
drinks: allDrinks.map(d => ({
category: d.category,
brand: d.brand,
product: d.product || '',
amount: d.amount,
unit: d.unit,
degree: d.degree,
standardCups: d.standardCups
})),
food: this.selectedFood ? { category: this.selectedFood, name: this.foodName || '' } : null,
feeling: this.selectedFeeling || null,
photos: this.photos,
photos: [],
visibility: 'friends',
standardCupsTotal: this.totalCups
quote: ''
}
const saved = addRecord(record)
try {
uni.showLoading({ title: '保存中...' })
// 调用后端创建记录
const resp = await client.CreateRecord(recordData)
const saved = resp.data || resp
uni.hideLoading()
// 跳转到卡片页，传递记录ID
uni.redirectTo({
url: `/pages/card/card?recordId=${saved.id}`
})
// 跳转到卡片页，传递记录ID
uni.redirectTo({
url: `/pages/card/card?recordId=${saved.id}`
})
} catch (e) {
uni.hideLoading()
console.warn('创建记录失败，降级本地保存:', e)
uni.showToast({ title: e.msg || '保存失败，已本地保存', icon: 'none', duration: 2000 })
// 降级：本地保存
const saved = addRecord(recordData)
uni.redirectTo({
url: `/pages/card/card?recordId=${saved.id}`
})
}
}
}
}
@@ -575,6 +601,7 @@ export default {
<style lang="scss" scoped>
.record-page {
padding: $sp-lg;
color: $text-primary;
display: flex;
flex-direction: column;
}
@@ -639,6 +666,7 @@ export default {
display: block;
font-size: $fs-2xl;
font-weight: $fw-black;
color: $text-primary;
margin-bottom: $sp-xs;
}
@@ -687,6 +715,7 @@ export default {
.category-name {
font-size: $fs-sm;
font-weight: $fw-medium;
color: $text-primary;
}
.brand-section {
@@ -718,7 +747,7 @@ export default {
padding: $sp-md $sp-lg;
color: $text-primary;
font-size: $fs-base;
border: 2rpx solid rgba(255,255,255,0.06);
border: 2rpx solid var(--border-faint, rgba(255, 255, 255, 0.08));
}
.input-placeholder {
@@ -840,6 +869,7 @@ export default {
.standard-cup-value {
font-size: $fs-xl;
font-weight: $fw-bold;
color: $text-primary;
}
/* 标准杯说明弹窗 */
@@ -849,7 +879,7 @@ export default {
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.7);
background: var(--overlay-modal, rgba(0, 0, 0, 0.7));
display: flex;
align-items: center;
justify-content: center;
@@ -874,6 +904,7 @@ export default {
.cup-info-title {
font-size: $fs-lg;
font-weight: $fw-bold;
color: $text-primary;
}
.cup-info-close {
@@ -924,7 +955,7 @@ export default {
justify-content: space-between;
align-items: center;
padding: $sp-sm 0;
border-bottom: 2rpx solid rgba(255, 255, 255, 0.04);
border-bottom: 2rpx solid var(--border-micro, rgba(255, 255, 255, 0.05));
}
.cup-info-cell {
@@ -1034,6 +1065,7 @@ export default {
.food-name {
font-size: $fs-sm;
font-weight: $fw-medium;
color: $text-primary;
}
.food-detail {
@@ -1077,6 +1109,7 @@ export default {
.feeling-name {
font-size: $fs-lg;
font-weight: $fw-bold;
color: $text-primary;
margin-bottom: $sp-xs;
}
@@ -1116,7 +1149,7 @@ export default {
right: $sp-sm;
width: 44rpx;
height: 44rpx;
background: rgba(0,0,0,0.6);
background: var(--overlay-mask, rgba(0, 0, 0, 0.6));
border-radius: $radius-full;
display: flex;
align-items: center;
@@ -1133,7 +1166,7 @@ export default {
flex-direction: column;
align-items: center;
justify-content: center;
border: 3rpx dashed rgba(255,255,255,0.1);
border: 3rpx dashed var(--border-dashed, rgba(255, 255, 255, 0.12));
&:active {
background: $bg-card-alt;
@@ -1142,6 +1175,7 @@ export default {
.photo-add-icon {
font-size: $fs-3xl;
color: $text-tertiary;
margin-bottom: $sp-sm;
opacity: 0.5;
}
@@ -1153,6 +1187,7 @@ export default {
.photo-tip {
text-align: center;
color: $text-secondary;
}
/* Step 6: 发布 */
@@ -1200,6 +1235,7 @@ export default {
display: block;
font-size: $fs-base;
font-weight: $fw-medium;
color: $text-primary;
}
.visibility-desc {
@@ -1236,7 +1272,7 @@ export default {
justify-content: space-between;
align-items: center;
padding-top: $sp-md;
border-top: 2rpx solid rgba(255,255,255,0.06);
border-top: 2rpx solid var(--border-faint, rgba(255, 255, 255, 0.08));
}
/* 保存提示卡片 */