cg
860136bceb
- 添加日夜主题CSS变量定义，支持琥珀夜光和暖白琥珀两种风格 - 实现主题切换逻辑，根据时间自动切换白天(light)和夜间(dark)主题 - 在App.vue中集成主题初始化和token恢复功能 - 更新全局样式类应用主题颜色变量，包括卡片、文本、边框等 - 创建主题混入(mixin)供各页面使用，确保主题同步更新 - 实现导航栏和TabBar主题动态切换，提升用户体验 - 添加API服务层封装HaveADrink SDK，统一处理认证和请求 - 优化DrinkCard组件显示饮酒感受信息，丰富打卡记录展示 - 更新项目依赖配置，集成新的API客户端库
1336 lines
32 KiB
Vue
1336 lines
32 KiB
Vue
<template>
|
||
<view :class="themeClass" class="page-container record-page safe-bottom">
|
||
<!-- 顶部进度 -->
|
||
<view class="step-header">
|
||
<view class="step-back" @click="handleBack">
|
||
<text class="step-back-arrow">‹</text>
|
||
</view>
|
||
<view class="step-progress">
|
||
<view
|
||
v-for="i in totalSteps"
|
||
:key="i"
|
||
class="step-dot"
|
||
:class="{
|
||
'step-dot-active': i === currentStep,
|
||
'step-dot-done': i < currentStep
|
||
}"
|
||
></view>
|
||
</view>
|
||
<text class="step-label">{{ currentStep }}/{{ totalSteps }}</text>
|
||
</view>
|
||
|
||
<!-- 步骤标题 -->
|
||
<view class="step-title-area">
|
||
<text class="step-title">{{ stepTitles[currentStep - 1] }}</text>
|
||
<text class="step-subtitle">{{ stepSubtitles[currentStep - 1] }}</text>
|
||
</view>
|
||
|
||
<!-- Step 1: 选酒 -->
|
||
<view v-if="currentStep === 1" class="step-content">
|
||
<!-- 酒类选择网格 -->
|
||
<view class="category-grid">
|
||
<view
|
||
v-for="cat in drinkCategories"
|
||
:key="cat.id"
|
||
class="category-item"
|
||
:class="{ 'category-active': currentDrink.category === cat.id }"
|
||
@click="selectCategory(cat)"
|
||
>
|
||
<text class="category-emoji">{{ cat.emoji }}</text>
|
||
<text class="category-name">{{ cat.name }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 品牌选择 -->
|
||
<view v-if="currentDrink.category" class="brand-section">
|
||
<text class="section-label">品牌</text>
|
||
<view class="brand-tags">
|
||
<view
|
||
v-for="brand in brandList"
|
||
:key="brand.name"
|
||
class="tag"
|
||
:class="{ 'tag-active': currentDrink.brand === brand.name }"
|
||
@click="selectBrand(brand)"
|
||
>
|
||
<text>{{ brand.name }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="input-row">
|
||
<input
|
||
class="input-field"
|
||
v-model="currentDrink.brand"
|
||
placeholder="或输入其他品牌"
|
||
placeholder-class="input-placeholder"
|
||
/>
|
||
</view>
|
||
|
||
<!-- 产品名称 -->
|
||
<text class="section-label" style="margin-top: 24rpx;">产品名称</text>
|
||
<view class="input-row">
|
||
<input
|
||
class="input-field"
|
||
v-model="currentDrink.product"
|
||
placeholder="如：飞天茅台53度"
|
||
placeholder-class="input-placeholder"
|
||
/>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- Step 2: 记量 -->
|
||
<view v-if="currentStep === 2" class="step-content">
|
||
<view class="amount-section card">
|
||
<view class="amount-row">
|
||
<input
|
||
class="amount-input text-num"
|
||
type="digit"
|
||
v-model="amountStr"
|
||
placeholder="0"
|
||
placeholder-class="input-placeholder"
|
||
@input="onAmountChange"
|
||
/>
|
||
<text class="amount-unit">{{ currentDrink.unit === 'ml' ? 'ml' : currentDrink.unit }}</text>
|
||
</view>
|
||
|
||
<!-- 单位切换 -->
|
||
<view class="unit-switcher">
|
||
<view
|
||
v-for="u in units"
|
||
:key="u.id"
|
||
class="unit-btn"
|
||
:class="{ 'unit-active': currentDrink.unit === u.id }"
|
||
@click="currentDrink.unit = u.id; onAmountChange()"
|
||
>
|
||
<text>{{ u.name }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 酒精度数 -->
|
||
<view class="degree-row">
|
||
<text class="section-label">酒精度数</text>
|
||
<view class="degree-input-wrap">
|
||
<input
|
||
class="degree-input text-num"
|
||
type="digit"
|
||
v-model="degreeStr"
|
||
@input="onAmountChange"
|
||
/>
|
||
<text class="degree-symbol">°</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="divider"></view>
|
||
|
||
<!-- 标准杯显示 -->
|
||
<view class="standard-cup-result">
|
||
<view class="standard-cup-label-row">
|
||
<text class="standard-cup-label">本次饮酒量</text>
|
||
<view class="cup-info-btn" @click="showCupInfo = true">
|
||
<text class="cup-info-icon">?</text>
|
||
</view>
|
||
</view>
|
||
<text class="standard-cup-value text-num text-amber">{{ currentCups }} 标准杯</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 已添加的酒水列表 -->
|
||
<view v-if="drinks.length > 0" class="added-drinks">
|
||
<text class="section-label">已添加的酒水</text>
|
||
<view v-for="(d, i) in drinks" :key="i" class="added-drink-item card">
|
||
<view class="flex-between">
|
||
<text>{{ getCatEmoji(d.category) }} {{ d.brand }} {{ d.product }}</text>
|
||
<text class="text-amber text-num">{{ d.standardCups }}杯</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 累计标准杯 -->
|
||
<view class="total-cups-bar">
|
||
<text class="text-caption">本次累计</text>
|
||
<text class="total-cups-value text-num text-amber">{{ totalCups }} 标准杯</text>
|
||
</view>
|
||
|
||
<!-- 健康提醒 -->
|
||
<view v-if="totalCups > 3" class="health-warning card">
|
||
<text class="health-warning-icon">⚠️</text>
|
||
<text class="health-warning-text">今日已饮用 {{ totalCups }} 标准杯，建议每日不超过2标准杯</text>
|
||
</view>
|
||
<view v-else class="health-hint">
|
||
<text class="text-tiny">建议每日不超过2标准杯（《中国居民膳食指南》）</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 标准杯说明弹窗 -->
|
||
<view v-if="showCupInfo" class="cup-info-overlay" @click="showCupInfo = false">
|
||
<view class="cup-info-card card-elevated" @click.stop>
|
||
<view class="cup-info-header">
|
||
<text class="cup-info-title">什么是「标准杯」？</text>
|
||
<text class="cup-info-close" @click="showCupInfo = false">✕</text>
|
||
</view>
|
||
<view class="cup-info-body">
|
||
<text class="cup-info-desc">标准杯是国际通用的饮酒量度量单位，方便你比较不同酒类的实际酒精摄入量。</text>
|
||
<view class="cup-info-formula">
|
||
<text class="cup-info-formula-text">1 标准杯 = 10g 纯酒精</text>
|
||
</view>
|
||
<text class="cup-info-subtitle">常见换算参考：</text>
|
||
<view class="cup-info-table">
|
||
<view class="cup-info-row">
|
||
<text class="cup-info-cell">🥃 白酒 (52°) 1两</text>
|
||
<text class="cup-info-cell cup-info-val">≈ 2.1 杯</text>
|
||
</view>
|
||
<view class="cup-info-row">
|
||
<text class="cup-info-cell">🍺 啤酒 (5°) 1瓶</text>
|
||
<text class="cup-info-cell cup-info-val">≈ 2.0 杯</text>
|
||
</view>
|
||
<view class="cup-info-row">
|
||
<text class="cup-info-cell">🍷 红酒 (13°) 1杯</text>
|
||
<text class="cup-info-cell cup-info-val">≈ 1.5 杯</text>
|
||
</view>
|
||
<view class="cup-info-row">
|
||
<text class="cup-info-cell">🥂 威士忌 (40°) 1shot</text>
|
||
<text class="cup-info-cell cup-info-val">≈ 1.0 杯</text>
|
||
</view>
|
||
</view>
|
||
<view class="cup-info-tip">
|
||
<text class="cup-info-tip-text">💡 中国居民膳食指南建议：成年人每日饮酒不超过 2 标准杯</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- Step 3: 配餐 -->
|
||
<view v-if="currentStep === 3" class="step-content">
|
||
<view class="food-grid">
|
||
<view
|
||
v-for="food in foodCategories"
|
||
:key="food.id"
|
||
class="food-item"
|
||
:class="{ 'food-active': selectedFood === food.id }"
|
||
@click="selectedFood = food.id"
|
||
>
|
||
<text class="food-emoji">{{ food.emoji }}</text>
|
||
<text class="food-name">{{ food.name }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view v-if="selectedFood && selectedFood !== 'none'" class="food-detail">
|
||
<text class="section-label">具体吃了什么</text>
|
||
<input
|
||
class="input-field"
|
||
v-model="foodName"
|
||
placeholder="如：毛肚、黄喉、肥牛..."
|
||
placeholder-class="input-placeholder"
|
||
/>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- Step 4: 感受 -->
|
||
<view v-if="currentStep === 4" class="step-content">
|
||
<view class="feeling-grid">
|
||
<view
|
||
v-for="f in feelings"
|
||
:key="f.id"
|
||
class="feeling-item"
|
||
:class="{ 'feeling-active': selectedFeeling === f.id }"
|
||
@click="selectedFeeling = f.id"
|
||
>
|
||
<text class="feeling-emoji">{{ f.emoji }}</text>
|
||
<text class="feeling-name">{{ f.name }}</text>
|
||
<text class="feeling-desc">{{ f.desc }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="feeling-skip">
|
||
<text class="text-caption">不想记录感受？可以直接下一步</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- Step 5: 照片 -->
|
||
<view v-if="currentStep === 5" class="step-content">
|
||
<view class="photo-grid">
|
||
<view
|
||
v-for="(photo, index) in photos"
|
||
:key="index"
|
||
class="photo-item"
|
||
>
|
||
<image :src="photo" mode="aspectFill" class="photo-img"></image>
|
||
<view class="photo-remove" @click="removePhoto(index)">
|
||
<text>✕</text>
|
||
</view>
|
||
</view>
|
||
<view v-if="photos.length < 6" class="photo-add" @click="choosePhoto">
|
||
<text class="photo-add-icon">📷</text>
|
||
<text class="photo-add-text">拍照/相册</text>
|
||
</view>
|
||
</view>
|
||
<view class="photo-tip">
|
||
<text class="text-caption">最多选择6张照片，记录今夜的精彩瞬间</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- Step 6: 确认保存 -->
|
||
<view v-if="currentStep === 6" class="step-content">
|
||
<!-- 记录预览 -->
|
||
<view class="preview-section card">
|
||
<text class="section-label">记录预览</text>
|
||
<view class="preview-drinks">
|
||
<view v-for="(d, i) in allDrinks" :key="i" class="preview-item">
|
||
<text>{{ getCatEmoji(d.category) }} {{ d.brand }} {{ d.product }} · {{ d.amount }}{{ d.unit }}</text>
|
||
<text class="text-amber text-num">{{ d.standardCups }}杯</text>
|
||
</view>
|
||
</view>
|
||
<view class="divider"></view>
|
||
<view class="preview-meta">
|
||
<text v-if="selectedFood !== 'none'" class="preview-line">🍲 {{ getFoodName() }}</text>
|
||
<text v-if="selectedFeeling" class="preview-line">{{ getFeelingEmoji() }} {{ getFeelingName() }}</text>
|
||
<text class="preview-line">📍 {{ backfillDate || '今天' }}</text>
|
||
</view>
|
||
<view class="preview-total">
|
||
<text class="text-caption">总计</text>
|
||
<text class="text-amber text-num" style="font-size: 34rpx;">{{ totalCups }} 标准杯</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 保存后提示 -->
|
||
<view class="save-hint card">
|
||
<text class="save-hint-icon">✨</text>
|
||
<view class="save-hint-text">
|
||
<text class="save-hint-title">保存后可生成酒局卡片</text>
|
||
<text class="save-hint-desc">卡片可保存到相册发朋友圈，或分享给好友</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 底部操作栏 -->
|
||
<view class="bottom-actions">
|
||
<button
|
||
v-if="currentStep > 1"
|
||
class="btn-secondary"
|
||
@click="prevStep"
|
||
>上一步</button>
|
||
<view v-else class="btn-placeholder"></view>
|
||
|
||
<button
|
||
v-if="currentStep < totalSteps"
|
||
class="btn-primary"
|
||
@click="nextStep"
|
||
:disabled="!canProceed"
|
||
>下一步</button>
|
||
<button
|
||
v-else
|
||
class="btn-cta"
|
||
@click="publishRecord"
|
||
style="flex: none; width: 55%;"
|
||
>保存并生成卡片</button>
|
||
</view>
|
||
|
||
<!-- 添加更多酒水按钮(Step 1) -->
|
||
<view v-if="currentStep === 1 && drinks.length > 0" class="add-more-bar">
|
||
<button class="btn-ghost" @click="resetCurrentDrink">+ 再添加一种酒</button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
DRINK_CATEGORIES, DRINK_UNITS, BRANDS, FOOD_CATEGORIES,
|
||
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,
|
||
totalSteps: 6,
|
||
stepTitles: ['选择酒水', '记录用量', '配餐', '感受', '照片', '确认保存'],
|
||
stepSubtitles: ['喝了什么酒？', '喝了多少？', '配了什么菜？', '感觉如何？', '拍张照片吧', '保存后可生成分享卡片'],
|
||
|
||
drinkCategories: DRINK_CATEGORIES,
|
||
units: DRINK_UNITS,
|
||
foodCategories: FOOD_CATEGORIES,
|
||
feelings: FEELINGS,
|
||
visibilityOptions: VISIBILITY_OPTIONS,
|
||
|
||
// Step 1
|
||
currentDrink: { category: '', brand: '', product: '', amount: 0, unit: 'ml', degree: 0 },
|
||
drinks: [],
|
||
brandList: [],
|
||
|
||
// Step 2
|
||
amountStr: '',
|
||
degreeStr: '',
|
||
|
||
// Step 3
|
||
selectedFood: '',
|
||
foodName: '',
|
||
|
||
// Step 4
|
||
selectedFeeling: '',
|
||
|
||
// Step 5
|
||
photos: [],
|
||
|
||
// Step 6
|
||
visibility: 'friends',
|
||
|
||
// 补打卡日期
|
||
backfillDate: '',
|
||
|
||
// 标准杯说明弹窗
|
||
showCupInfo: false
|
||
}
|
||
},
|
||
computed: {
|
||
currentCups() {
|
||
const ml = unitToMl(parseFloat(this.amountStr) || 0, this.currentDrink.unit)
|
||
return calcStandardCups(ml, parseFloat(this.degreeStr) || 0)
|
||
},
|
||
totalCups() {
|
||
const addedCups = this.drinks.reduce((sum, d) => sum + d.standardCups, 0)
|
||
return Math.round((addedCups + this.currentCups) * 100) / 100
|
||
},
|
||
allDrinks() {
|
||
const all = [...this.drinks]
|
||
if (this.amountStr && this.currentDrink.category) {
|
||
const ml = unitToMl(parseFloat(this.amountStr) || 0, this.currentDrink.unit)
|
||
all.push({
|
||
...this.currentDrink,
|
||
amount: parseFloat(this.amountStr) || 0,
|
||
degree: parseFloat(this.degreeStr) || 0,
|
||
standardCups: calcStandardCups(ml, parseFloat(this.degreeStr) || 0)
|
||
})
|
||
}
|
||
return all
|
||
},
|
||
canProceed() {
|
||
switch (this.currentStep) {
|
||
case 1: return this.currentDrink.category && this.currentDrink.brand
|
||
case 2: return parseFloat(this.amountStr) > 0
|
||
case 3: return true // 配餐可选
|
||
case 4: return true // 感受可选
|
||
case 5: return true // 照片可选
|
||
case 6: return true
|
||
default: return true
|
||
}
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
if (options && options.date) {
|
||
this.backfillDate = options.date
|
||
}
|
||
},
|
||
onBackPress() {
|
||
if (this.currentStep > 1 || this.hasFormData()) {
|
||
uni.showModal({
|
||
title: '放弃记录？',
|
||
content: '当前填写的内容将不会保存',
|
||
confirmText: '继续填写',
|
||
cancelText: '放弃',
|
||
success: (res) => {
|
||
if (res.cancel) {
|
||
uni.navigateBack()
|
||
}
|
||
}
|
||
})
|
||
return true // 阻止默认返回
|
||
}
|
||
return false
|
||
},
|
||
methods: {
|
||
selectCategory(cat) {
|
||
this.currentDrink.category = cat.id
|
||
this.currentDrink.degree = cat.defaultDegree
|
||
this.degreeStr = String(cat.defaultDegree)
|
||
this.brandList = BRANDS[cat.id] || []
|
||
},
|
||
selectBrand(brand) {
|
||
this.currentDrink.brand = brand.name
|
||
this.currentDrink.product = brand.product
|
||
this.currentDrink.degree = brand.degree
|
||
this.degreeStr = String(brand.degree)
|
||
},
|
||
onAmountChange() {
|
||
// 响应式计算
|
||
},
|
||
getCatEmoji(catId) {
|
||
const cat = this.drinkCategories.find(c => c.id === catId)
|
||
return cat ? cat.emoji : '🥃'
|
||
},
|
||
getFoodName() {
|
||
const food = this.foodCategories.find(f => f.id === this.selectedFood)
|
||
if (!food) return ''
|
||
return this.foodName ? `${food.name}·${this.foodName}` : food.name
|
||
},
|
||
getFeelingEmoji() {
|
||
const f = this.feelings.find(f => f.id === this.selectedFeeling)
|
||
return f ? f.emoji : ''
|
||
},
|
||
getFeelingName() {
|
||
const f = this.feelings.find(f => f.id === this.selectedFeeling)
|
||
return f ? f.name : ''
|
||
},
|
||
choosePhoto() {
|
||
uni.chooseImage({
|
||
count: 6 - this.photos.length,
|
||
sizeType: ['compressed'],
|
||
sourceType: ['album', 'camera'],
|
||
success: (res) => {
|
||
this.photos = [...this.photos, ...res.tempFilePaths]
|
||
}
|
||
})
|
||
},
|
||
removePhoto(index) {
|
||
this.photos.splice(index, 1)
|
||
},
|
||
resetCurrentDrink() {
|
||
// 保存当前酒水到列表
|
||
if (this.amountStr && this.currentDrink.category) {
|
||
const ml = unitToMl(parseFloat(this.amountStr) || 0, this.currentDrink.unit)
|
||
this.drinks.push({
|
||
...this.currentDrink,
|
||
amount: parseFloat(this.amountStr) || 0,
|
||
degree: parseFloat(this.degreeStr) || 0,
|
||
standardCups: calcStandardCups(ml, parseFloat(this.degreeStr) || 0)
|
||
})
|
||
}
|
||
this.currentDrink = { category: '', brand: '', product: '', amount: 0, unit: 'ml', degree: 0 }
|
||
this.amountStr = ''
|
||
this.degreeStr = ''
|
||
},
|
||
handleBack() {
|
||
if (this.currentStep > 1) {
|
||
this.prevStep()
|
||
} else if (this.hasFormData()) {
|
||
uni.showModal({
|
||
title: '放弃记录？',
|
||
content: '当前填写的内容将不会保存',
|
||
confirmText: '继续填写',
|
||
cancelText: '放弃',
|
||
success: (res) => {
|
||
if (res.cancel) {
|
||
uni.navigateBack()
|
||
}
|
||
}
|
||
})
|
||
} else {
|
||
uni.navigateBack()
|
||
}
|
||
},
|
||
hasFormData() {
|
||
return this.drinks.length > 0 ||
|
||
this.currentDrink.brand ||
|
||
this.currentDrink.category ||
|
||
this.selectedFood ||
|
||
this.selectedFeeling ||
|
||
this.photos.length > 0
|
||
},
|
||
prevStep() {
|
||
if (this.currentStep > 1) this.currentStep--
|
||
},
|
||
nextStep() {
|
||
// Step 1 -> 2: 保存酒水基础信息
|
||
if (this.currentStep === 1) {
|
||
if (!this.degreeStr) this.degreeStr = String(this.currentDrink.degree)
|
||
}
|
||
// Step 2 -> 3: 保存饮用量
|
||
if (this.currentStep === 2) {
|
||
const ml = unitToMl(parseFloat(this.amountStr) || 0, this.currentDrink.unit)
|
||
this.drinks.push({
|
||
...this.currentDrink,
|
||
amount: parseFloat(this.amountStr) || 0,
|
||
degree: parseFloat(this.degreeStr) || 0,
|
||
standardCups: calcStandardCups(ml, parseFloat(this.degreeStr) || 0)
|
||
})
|
||
// 重置当前输入
|
||
this.currentDrink = { ...this.currentDrink, amount: 0 }
|
||
this.amountStr = ''
|
||
}
|
||
if (this.currentStep < this.totalSteps) this.currentStep++
|
||
},
|
||
async publishRecord() {
|
||
const allDrinks = this.allDrinks.length > 0 ? this.allDrinks : this.drinks
|
||
const recordData = {
|
||
date: this.backfillDate || formatDate(new Date(), 'YYYY-MM-DD'),
|
||
mode: 'drank',
|
||
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: [],
|
||
visibility: 'friends',
|
||
quote: ''
|
||
}
|
||
|
||
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}`
|
||
})
|
||
} 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}`
|
||
})
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.record-page {
|
||
padding: $sp-lg;
|
||
color: $text-primary;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
/* 步骤头部 */
|
||
.step-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: $sp-md;
|
||
padding: $sp-md 0;
|
||
}
|
||
|
||
.step-back {
|
||
width: 64rpx;
|
||
height: 64rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: $radius-full;
|
||
background: $bg-card;
|
||
}
|
||
|
||
.step-back-arrow {
|
||
font-size: $fs-xl;
|
||
color: $text-secondary;
|
||
font-weight: $fw-bold;
|
||
}
|
||
|
||
.step-progress {
|
||
flex: 1;
|
||
display: flex;
|
||
gap: $sp-xs;
|
||
}
|
||
|
||
.step-dot {
|
||
flex: 1;
|
||
height: 6rpx;
|
||
border-radius: $radius-full;
|
||
background: $bg-elevated;
|
||
transition: all $duration-base $ease-out;
|
||
|
||
&.step-dot-done {
|
||
background: $amber;
|
||
}
|
||
|
||
&.step-dot-active {
|
||
background: $amber-light;
|
||
}
|
||
}
|
||
|
||
.step-label {
|
||
font-size: $fs-sm;
|
||
color: $text-tertiary;
|
||
font-family: $font-num;
|
||
}
|
||
|
||
.step-title-area {
|
||
margin-bottom: $sp-xl;
|
||
}
|
||
|
||
.step-title {
|
||
display: block;
|
||
font-size: $fs-2xl;
|
||
font-weight: $fw-black;
|
||
color: $text-primary;
|
||
margin-bottom: $sp-xs;
|
||
}
|
||
|
||
.step-subtitle {
|
||
font-size: $fs-sm;
|
||
color: $text-secondary;
|
||
}
|
||
|
||
.step-content {
|
||
flex: 1;
|
||
}
|
||
|
||
/* Step 1: 酒类选择 */
|
||
.category-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: $sp-md;
|
||
margin-bottom: $sp-xl;
|
||
}
|
||
|
||
.category-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding: $sp-lg $sp-sm;
|
||
background: $bg-card;
|
||
border-radius: $radius-lg;
|
||
border: 2rpx solid transparent;
|
||
transition: all $duration-fast $ease-out;
|
||
|
||
&.category-active {
|
||
border-color: $amber;
|
||
background: $amber-glow;
|
||
}
|
||
|
||
&:active {
|
||
transform: scale(0.95);
|
||
}
|
||
}
|
||
|
||
.category-emoji {
|
||
font-size: 56rpx;
|
||
margin-bottom: $sp-sm;
|
||
}
|
||
|
||
.category-name {
|
||
font-size: $fs-sm;
|
||
font-weight: $fw-medium;
|
||
color: $text-primary;
|
||
}
|
||
|
||
.brand-section {
|
||
margin-top: $sp-lg;
|
||
}
|
||
|
||
.section-label {
|
||
display: block;
|
||
font-size: $fs-sm;
|
||
font-weight: $fw-medium;
|
||
color: $text-secondary;
|
||
margin-bottom: $sp-md;
|
||
}
|
||
|
||
.brand-tags {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: $sp-sm;
|
||
margin-bottom: $sp-lg;
|
||
}
|
||
|
||
.input-row {
|
||
margin-bottom: $sp-sm;
|
||
}
|
||
|
||
.input-field {
|
||
background: $bg-elevated;
|
||
border-radius: $radius-md;
|
||
padding: $sp-md $sp-lg;
|
||
color: $text-primary;
|
||
font-size: $fs-base;
|
||
border: 2rpx solid var(--border-faint, rgba(255, 255, 255, 0.08));
|
||
}
|
||
|
||
.input-placeholder {
|
||
color: $text-tertiary;
|
||
}
|
||
|
||
/* Step 2: 记量 */
|
||
.amount-section {
|
||
margin-bottom: $sp-lg;
|
||
}
|
||
|
||
.amount-row {
|
||
display: flex;
|
||
align-items: baseline;
|
||
gap: $sp-sm;
|
||
margin-bottom: $sp-xl;
|
||
}
|
||
|
||
.amount-input {
|
||
font-size: $fs-3xl;
|
||
font-weight: $fw-black;
|
||
color: $text-primary;
|
||
flex: 1;
|
||
background: transparent;
|
||
border: none;
|
||
padding: 0;
|
||
height: 100rpx;
|
||
line-height: 100rpx;
|
||
}
|
||
|
||
.amount-unit {
|
||
font-size: $fs-lg;
|
||
color: $text-secondary;
|
||
}
|
||
|
||
.unit-switcher {
|
||
display: flex;
|
||
gap: $sp-sm;
|
||
margin-bottom: $sp-xl;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.unit-btn {
|
||
padding: $sp-sm $sp-lg;
|
||
background: $bg-elevated;
|
||
border-radius: $radius-full;
|
||
font-size: $fs-sm;
|
||
color: $text-secondary;
|
||
border: 2rpx solid transparent;
|
||
transition: all $duration-fast $ease-out;
|
||
|
||
&.unit-active {
|
||
background: $amber-glow;
|
||
color: $amber;
|
||
border-color: rgba(232,168,56,0.3);
|
||
}
|
||
}
|
||
|
||
.degree-row {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.degree-input-wrap {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: $sp-xs;
|
||
}
|
||
|
||
.degree-input {
|
||
width: 120rpx;
|
||
text-align: center;
|
||
background: $bg-elevated;
|
||
border-radius: $radius-md;
|
||
padding: $sp-sm;
|
||
color: $text-primary;
|
||
font-size: $fs-lg;
|
||
}
|
||
|
||
.degree-symbol {
|
||
font-size: $fs-lg;
|
||
color: $text-secondary;
|
||
}
|
||
|
||
.standard-cup-result {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.standard-cup-label {
|
||
font-size: $fs-base;
|
||
color: $text-secondary;
|
||
}
|
||
|
||
.standard-cup-label-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: $sp-sm;
|
||
}
|
||
|
||
.cup-info-btn {
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
background: $bg-elevated;
|
||
border-radius: $radius-full;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.cup-info-icon {
|
||
font-size: $fs-xs;
|
||
color: $text-tertiary;
|
||
font-weight: $fw-bold;
|
||
}
|
||
|
||
.standard-cup-value {
|
||
font-size: $fs-xl;
|
||
font-weight: $fw-bold;
|
||
color: $text-primary;
|
||
}
|
||
|
||
/* 标准杯说明弹窗 */
|
||
.cup-info-overlay {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: var(--overlay-modal, rgba(0, 0, 0, 0.7));
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 200;
|
||
padding: $sp-xl;
|
||
}
|
||
|
||
.cup-info-card {
|
||
width: 100%;
|
||
max-width: 620rpx;
|
||
padding: $sp-xl;
|
||
border-radius: $radius-xl;
|
||
}
|
||
|
||
.cup-info-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: $sp-lg;
|
||
}
|
||
|
||
.cup-info-title {
|
||
font-size: $fs-lg;
|
||
font-weight: $fw-bold;
|
||
color: $text-primary;
|
||
}
|
||
|
||
.cup-info-close {
|
||
font-size: $fs-lg;
|
||
color: $text-tertiary;
|
||
padding: $sp-xs;
|
||
}
|
||
|
||
.cup-info-body {}
|
||
|
||
.cup-info-desc {
|
||
display: block;
|
||
font-size: $fs-sm;
|
||
color: $text-secondary;
|
||
line-height: $lh-loose;
|
||
margin-bottom: $sp-lg;
|
||
}
|
||
|
||
.cup-info-formula {
|
||
background: $amber-glow;
|
||
border-radius: $radius-md;
|
||
padding: $sp-md;
|
||
text-align: center;
|
||
margin-bottom: $sp-lg;
|
||
}
|
||
|
||
.cup-info-formula-text {
|
||
font-size: $fs-md;
|
||
font-weight: $fw-bold;
|
||
color: $amber;
|
||
font-family: $font-num;
|
||
}
|
||
|
||
.cup-info-subtitle {
|
||
display: block;
|
||
font-size: $fs-sm;
|
||
font-weight: $fw-medium;
|
||
color: $text-secondary;
|
||
margin-bottom: $sp-md;
|
||
}
|
||
|
||
.cup-info-table {
|
||
margin-bottom: $sp-lg;
|
||
}
|
||
|
||
.cup-info-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: $sp-sm 0;
|
||
border-bottom: 2rpx solid var(--border-micro, rgba(255, 255, 255, 0.05));
|
||
}
|
||
|
||
.cup-info-cell {
|
||
font-size: $fs-sm;
|
||
color: $text-primary;
|
||
}
|
||
|
||
.cup-info-val {
|
||
color: $amber;
|
||
font-weight: $fw-bold;
|
||
font-family: $font-num;
|
||
}
|
||
|
||
.cup-info-tip {
|
||
background: rgba(94, 198, 160, 0.1);
|
||
border-radius: $radius-md;
|
||
padding: $sp-md;
|
||
}
|
||
|
||
.cup-info-tip-text {
|
||
font-size: $fs-xs;
|
||
color: $mint;
|
||
line-height: $lh-loose;
|
||
}
|
||
|
||
.added-drinks {
|
||
margin-bottom: $sp-lg;
|
||
}
|
||
|
||
.added-drink-item {
|
||
padding: $sp-md;
|
||
margin-bottom: $sp-sm;
|
||
}
|
||
|
||
.total-cups-bar {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: $sp-md $sp-lg;
|
||
background: $bg-card;
|
||
border-radius: $radius-lg;
|
||
margin-bottom: $sp-md;
|
||
}
|
||
|
||
.total-cups-value {
|
||
font-size: $fs-xl;
|
||
font-weight: $fw-bold;
|
||
}
|
||
|
||
.health-warning {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: $sp-md;
|
||
padding: $sp-md;
|
||
background: rgba(255, 107, 107, 0.1);
|
||
border: 2rpx solid rgba(255, 107, 107, 0.2);
|
||
}
|
||
|
||
.health-warning-icon {
|
||
font-size: $fs-xl;
|
||
}
|
||
|
||
.health-warning-text {
|
||
font-size: $fs-sm;
|
||
color: $coral;
|
||
flex: 1;
|
||
}
|
||
|
||
.health-hint {
|
||
text-align: center;
|
||
padding: $sp-sm;
|
||
}
|
||
|
||
/* Step 3: 配餐 */
|
||
.food-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: $sp-md;
|
||
margin-bottom: $sp-xl;
|
||
}
|
||
|
||
.food-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding: $sp-lg $sp-sm;
|
||
background: $bg-card;
|
||
border-radius: $radius-lg;
|
||
border: 2rpx solid transparent;
|
||
transition: all $duration-fast $ease-out;
|
||
|
||
&.food-active {
|
||
border-color: $amber;
|
||
background: $amber-glow;
|
||
}
|
||
|
||
&:active {
|
||
transform: scale(0.95);
|
||
}
|
||
}
|
||
|
||
.food-emoji {
|
||
font-size: 56rpx;
|
||
margin-bottom: $sp-sm;
|
||
}
|
||
|
||
.food-name {
|
||
font-size: $fs-sm;
|
||
font-weight: $fw-medium;
|
||
color: $text-primary;
|
||
}
|
||
|
||
.food-detail {
|
||
margin-top: $sp-lg;
|
||
}
|
||
|
||
/* Step 4: 感受 */
|
||
.feeling-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: $sp-lg;
|
||
margin-bottom: $sp-xl;
|
||
}
|
||
|
||
.feeling-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding: $sp-xl $sp-lg;
|
||
background: $bg-card;
|
||
border-radius: $radius-xl;
|
||
border: 3rpx solid transparent;
|
||
transition: all $duration-base $ease-bounce;
|
||
|
||
&.feeling-active {
|
||
border-color: $amber;
|
||
background: $amber-glow;
|
||
transform: scale(1.03);
|
||
}
|
||
|
||
&:active {
|
||
transform: scale(0.96);
|
||
}
|
||
}
|
||
|
||
.feeling-emoji {
|
||
font-size: 80rpx;
|
||
margin-bottom: $sp-md;
|
||
}
|
||
|
||
.feeling-name {
|
||
font-size: $fs-lg;
|
||
font-weight: $fw-bold;
|
||
color: $text-primary;
|
||
margin-bottom: $sp-xs;
|
||
}
|
||
|
||
.feeling-desc {
|
||
font-size: $fs-xs;
|
||
color: $text-secondary;
|
||
}
|
||
|
||
.feeling-skip {
|
||
text-align: center;
|
||
padding: $sp-lg;
|
||
}
|
||
|
||
/* Step 5: 照片 */
|
||
.photo-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: $sp-md;
|
||
margin-bottom: $sp-lg;
|
||
}
|
||
|
||
.photo-item {
|
||
aspect-ratio: 1;
|
||
border-radius: $radius-lg;
|
||
overflow: hidden;
|
||
position: relative;
|
||
}
|
||
|
||
.photo-img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.photo-remove {
|
||
position: absolute;
|
||
top: $sp-sm;
|
||
right: $sp-sm;
|
||
width: 44rpx;
|
||
height: 44rpx;
|
||
background: var(--overlay-mask, rgba(0, 0, 0, 0.6));
|
||
border-radius: $radius-full;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #fff;
|
||
font-size: $fs-sm;
|
||
}
|
||
|
||
.photo-add {
|
||
aspect-ratio: 1;
|
||
background: $bg-card;
|
||
border-radius: $radius-lg;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border: 3rpx dashed var(--border-dashed, rgba(255, 255, 255, 0.12));
|
||
|
||
&:active {
|
||
background: $bg-card-alt;
|
||
}
|
||
}
|
||
|
||
.photo-add-icon {
|
||
font-size: $fs-3xl;
|
||
color: $text-tertiary;
|
||
margin-bottom: $sp-sm;
|
||
opacity: 0.5;
|
||
}
|
||
|
||
.photo-add-text {
|
||
font-size: $fs-xs;
|
||
color: $text-tertiary;
|
||
}
|
||
|
||
.photo-tip {
|
||
text-align: center;
|
||
color: $text-secondary;
|
||
}
|
||
|
||
/* Step 6: 发布 */
|
||
.visibility-section {
|
||
margin-bottom: $sp-xl;
|
||
}
|
||
|
||
.visibility-options {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: $sp-sm;
|
||
}
|
||
|
||
.visibility-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: $sp-md;
|
||
padding: $sp-lg;
|
||
background: $bg-card;
|
||
border-radius: $radius-lg;
|
||
border: 2rpx solid transparent;
|
||
transition: all $duration-fast $ease-out;
|
||
|
||
&.visibility-active {
|
||
border-color: $amber;
|
||
background: $amber-glow;
|
||
}
|
||
}
|
||
|
||
.visibility-radio {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
border-radius: $radius-full;
|
||
border: 3rpx solid $text-tertiary;
|
||
transition: all $duration-fast $ease-out;
|
||
|
||
&.radio-checked {
|
||
border-color: $amber;
|
||
background: $amber;
|
||
box-shadow: inset 0 0 0 6rpx $bg-base;
|
||
}
|
||
}
|
||
|
||
.visibility-name {
|
||
display: block;
|
||
font-size: $fs-base;
|
||
font-weight: $fw-medium;
|
||
color: $text-primary;
|
||
}
|
||
|
||
.visibility-desc {
|
||
display: block;
|
||
font-size: $fs-xs;
|
||
color: $text-secondary;
|
||
margin-top: $sp-xs;
|
||
}
|
||
|
||
.preview-section {
|
||
margin-bottom: $sp-lg;
|
||
}
|
||
|
||
.preview-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: $sp-sm 0;
|
||
}
|
||
|
||
.preview-meta {
|
||
margin-bottom: $sp-md;
|
||
}
|
||
|
||
.preview-line {
|
||
display: block;
|
||
font-size: $fs-base;
|
||
padding: $sp-xs 0;
|
||
color: $text-secondary;
|
||
}
|
||
|
||
.preview-total {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding-top: $sp-md;
|
||
border-top: 2rpx solid var(--border-faint, rgba(255, 255, 255, 0.08));
|
||
}
|
||
|
||
/* 保存提示卡片 */
|
||
.save-hint {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: $sp-md;
|
||
margin-top: $sp-lg;
|
||
padding: $sp-lg;
|
||
background: rgba(232, 168, 56, 0.06);
|
||
border: 2rpx solid rgba(232, 168, 56, 0.15);
|
||
}
|
||
|
||
.save-hint-icon {
|
||
font-size: $fs-xl;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.save-hint-title {
|
||
display: block;
|
||
font-size: $fs-base;
|
||
font-weight: $fw-bold;
|
||
color: $text-primary;
|
||
margin-bottom: $sp-xs;
|
||
}
|
||
|
||
.save-hint-desc {
|
||
display: block;
|
||
font-size: $fs-sm;
|
||
color: $text-secondary;
|
||
line-height: $lh-loose;
|
||
}
|
||
|
||
/* 底部操作栏 */
|
||
.bottom-actions {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
display: flex;
|
||
gap: $sp-md;
|
||
padding: $sp-lg;
|
||
padding-bottom: calc(env(safe-area-inset-bottom) + $sp-lg);
|
||
background: linear-gradient(to top, $bg-base 80%, transparent);
|
||
z-index: 50;
|
||
|
||
.btn-secondary, .btn-primary {
|
||
flex: 1;
|
||
}
|
||
}
|
||
|
||
.btn-placeholder {
|
||
flex: 1;
|
||
}
|
||
|
||
.add-more-bar {
|
||
padding: $sp-lg 0;
|
||
text-align: center;
|
||
}
|
||
</style>
|