Skip to content

飞
飞鹤小程序
Commit 974ed970 authored by spc's avatar spc
Browse files
Options

feedingIndex

parent 95f08a3f
Hide whitespace changes
Inline Side-by-side
Showing with 1649 additions and 0 deletions
pages.json
View file @ 974ed970
......@@ -86,6 +86,21 @@
"navigationBarTitleText" : "",
"navigationStyle": "custom"
}
},
{
"path" : "pages/feedingAnalysis/feedingAnalysis",
"style" :
{
"navigationBarTitleText" : "",
"navigationStyle": "custom"
}
},
{
"path" : "pages/feedingIndex/feedingIndex",
"style" :
{
"navigationBarTitleText" : ""
}
}
],
"globalStyle": {
......
pages/feedingAnalysis/feedingAnalysis.vue 0 → 100644
View file @ 974ed970
<template>
<view class="feeding-analysis-page">
<!-- 状态栏占位 -->
<view class="status-bar-placeholder"></view>
<!-- 头部导航 -->
<view class="header">
<view class="nav-left" @click="goBack">
<text class="back-btn">‹</text>
</view>
</view>
<!-- 图例 -->
<view class="legend-section">
<view class="legend-item">
<view class="legend-color legend-breastfeeding"></view>
<text class="legend-text">母乳亲喂</text>
</view>
<view class="legend-item">
<view class="legend-color legend-bottle"></view>
<text class="legend-text">母乳瓶喂</text>
</view>
<view class="legend-item">
<view class="legend-color legend-formula"></view>
<text class="legend-text">奶粉喂养</text>
</view>
<view class="legend-item">
<view class="legend-color legend-food"></view>
<text class="legend-text">辅食</text>
</view>
</view>
<!-- CSS柱状图区域 -->
<view class="chart-section">
<view class="chart-container">
<view class="chart-nav-left" @click="prevWeek">
<view class="nav-arrow">‹</view>
</view>
<view class="chart-content">
<view class="chart-bars">
<view
v-for="(day, index) in chartData"
:key="index"
class="chart-bar-wrapper"
:class="{ active: day.isActive }"
>
<view class="chart-bar">
<view
v-for="(typeData, typeIndex) in getBarSegments(day)"
:key="typeIndex"
class="bar-segment"
:style="{
height: `${typeData.height}%`,
backgroundColor: typeData.color
}"
></view>
</view>
<view class="bar-count" v-if="day.isActive && day.totalCount > 0">
{{ day.totalCount }}次
</view>
<view class="bar-date">{{ day.date }}</view>
</view>
</view>
</view>
<view class="chart-nav-right" @click="nextWeek">
<view class="nav-arrow">›</view>
</view>
</view>
<!-- 宝宝年龄 -->
<view class="baby-age">
<text>宝宝 5个月20天</text>
</view>
</view>
<!-- 喂养记录列表 -->
<scroll-view class="records-container" scroll-y>
<view v-if="todayRecords.length === 0" class="empty-state">
<text class="empty-text">当日暂无记录</text>
</view>
<view v-else class="record-list">
<template v-for="(record, index) in todayRecords" :key="index">
<view class="record-item">
<view class="time-dot">
<view class="dot" :style="{ backgroundColor: getRecordColor(record.type) }"></view>
<text class="time">{{ record.time }}</text>
</view>
<view class="record-content" :style="{ backgroundColor: getRecordBgColor(record.type) }">
<view class="record-header">
<image :src="getRecordIcon(record.type)" :class="getRecordIconClass(record.type)" />
<text class="record-type">{{ record.type }}</text>
<text class="edit-btn" @click="editRecord(index)">修改</text>
</view>
<view class="record-details">
<!-- 母乳亲喂：显示左右时间，时间加粗 -->
<view v-if="record.type === '母乳亲喂' && (record.leftDuration || record.rightDuration)"
class="duration-info">
<view v-if="record.leftDuration" class="duration-text">
<text class="duration-label">左</text>
<text class="duration-time">{{ record.leftDuration }}</text>
</view>
<view v-if="record.rightDuration" class="duration-text">
<text class="duration-label">右</text>
<text class="duration-time">{{ record.rightDuration }}</text>
</view>
</view>
<!-- 母乳瓶喂：显示总乳量 -->
<view v-if="record.type === '母乳瓶喂' && record.amount" class="amount-info">
<view class="amount-text">
<text class="amount-label">总乳量</text>
<text class="amount-value">{{ record.amount }}</text>
</view>
</view>
<!-- 奶粉喂养：显示总奶量 -->
<view v-if="record.type === '奶粉喂养' && record.amount" class="amount-info">
<view class="amount-text">
<text class="amount-label">总奶量</text>
<text class="amount-value">{{ record.amount }}</text>
</view>
</view>
<!-- 辅食：显示内容，超出显示... -->
<view v-if="record.type === '辅食' && record.content" class="content-info">
<view class="content-text">{{ record.content }}</view>
</view>
</view>
</view>
</view>
<!-- 在两个记录之间添加连接线 -->
<view v-if="index < todayRecords.length - 1" class="timeline-connector"></view>
</template>
</view>
</scroll-view>
</view>
</template>
<script setup>
import { ref, computed, onMounted, watch, nextTick } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
const version = 'v1'
// 资源路径
const feedingRecordRes = {
icon_fushi: `/static/feedingRecord/${version}/icon_fushi.png`,
icon_muru: `/static/feedingRecord/${version}/icon_muru.png`,
icon_naifen: `/static/feedingRecord/${version}/icon_naifen.png`,
icon_pingwei: `/static/feedingRecord/${version}/icon_pingwei.png`,
}
// 响应式数据
const currentWeek = ref(0) // 当前显示的周数
const selectedDate = ref('2025-07-03') // 当前选中的日期
const chartData = ref([])
// 喂养记录数据
const feedingRecords = ref({
'2025-07-03': [
{
time: '06:20',
type: '母乳亲喂',
leftDuration: '10min',
rightDuration: '10min'
},
{
time: '09:30',
type: '母乳瓶喂',
amount: '约50ml'
},
{
time: '13:50',
type: '奶粉喂养',
amount: '约50ml'
},
{
time: '17:25',
type: '辅食',
content: '小米粥,玉米,馒头,煮面条,包子,奶糊...'
}
],
'2025-07-02': [
{
time: '07:00',
type: '母乳亲喂',
leftDuration: '12min',
rightDuration: '8min'
},
{
time: '11:30',
type: '母乳瓶喂',
amount: '约80ml'
}
],
'2025-07-01': [
{
time: '08:30',
type: '母乳亲喂',
leftDuration: '15min',
rightDuration: '12min'
}
],
'2025-07-04': [
{
time: '06:00',
type: '奶粉喂养',
amount: '约60ml'
},
{
time: '12:00',
type: '辅食',
content: '鸡蛋羹,胡萝卜泥'
}
],
'2025-07-05': [
{
time: '07:30',
type: '母乳亲喂',
leftDuration: '8min',
rightDuration: '10min'
},
{
time: '15:00',
type: '辅食',
content: '苹果泥,香蕉'
}
],
'2025-07-06': [
{
time: '09:00',
type: '辅食',
content: '南瓜粥,土豆泥'
}
],
'2025-07-07': [
{
time: '08:00',
type: '母乳瓶喂',
amount: '约70ml'
},
{
time: '14:00',
type: '奶粉喂养',
amount: '约40ml'
}
]
})
// 计算属性 - 当前选中日期的记录
const todayRecords = computed(() => {
if (!selectedDate.value) return []
return feedingRecords.value[selectedDate.value] || []
})
// 计算属性 - 当周最大次数
const maxWeekCount = computed(() => {
if (chartData.value.length === 0) return 0
return Math.max(...chartData.value.map(d => d.totalCount))
})
// 获取记录颜色 - 根据设计稿调整
function getRecordColor(type) {
const colors = {
'母乳亲喂': '#F9D9D9', // 浅粉色
'母乳瓶喂': '#D9D9F9', // 浅紫色
'奶粉喂养': '#F9E9D9', // 浅橙色/米色
'辅食': '#D9F9D9' // 浅绿色
}
return colors[type] || '#CCCCCC'
}
// 获取记录背景色 - 根据设计稿调整
function getRecordBgColor(type) {
const colors = {
'母乳亲喂': '#F9D9D9', // 浅粉色
'母乳瓶喂': '#D9D9F9', // 浅紫色
'奶粉喂养': '#F9E9D9', // 浅橙色/米色
'辅食': '#D9F9D9' // 浅绿色
}
return colors[type] || '#F5F5F5'
}
// 获取类型颜色
function getTypeColor(type) {
const colors = {
'母乳亲喂': '#F9D9D9', // 浅粉色
'母乳瓶喂': '#D9D9F9', // 浅紫色
'奶粉喂养': '#F9E9D9', // 浅橙色/米色
'辅食': '#D9F9D9' // 浅绿色
}
return colors[type] || '#CCCCCC'
}
// 获取记录图标
function getRecordIcon(type) {
const icons = {
'母乳亲喂': feedingRecordRes.icon_muru,
'母乳瓶喂': feedingRecordRes.icon_pingwei,
'奶粉喂养': feedingRecordRes.icon_naifen,
'辅食': feedingRecordRes.icon_fushi
}
return icons[type] || ''
}
// 获取记录图标样式类
function getRecordIconClass(type) {
const classes = {
'母乳亲喂': 'record-icon-img-muruqinwei',
'母乳瓶喂': 'record-icon-img-pingwei',
'奶粉喂养': 'record-icon-img-naifen',
'辅食': 'record-icon-img-fushi'
}
return classes[type] || ''
}
// 编辑记录
function editRecord(index) {
console.log('编辑记录:', index)
}
// 返回上一页
function goBack() {
uni.navigateBack()
}
// 生成周数据
function generateWeekData(weekOffset = 0) {
const data = []
const baseDate = new Date('2025-07-03')
baseDate.setDate(baseDate.getDate() + weekOffset * 7)
for (let i = 0; i < 7; i++) {
const date = new Date(baseDate)
date.setDate(date.getDate() + i)
const dateString = date.toISOString().split('T')[0]
const records = feedingRecords.value[dateString] || []
// 统计各类型记录数量
const typeCounts = {
'母乳亲喂': 0,
'母乳瓶喂': 0,
'奶粉喂养': 0,
'辅食': 0
}
records.forEach(record => {
if (typeCounts.hasOwnProperty(record.type)) {
typeCounts[record.type]++
}
})
data.push({
date: `${date.getMonth() + 1}/${date.getDate()}`,
dateString,
isActive: dateString === selectedDate.value,
totalCount: records.length,
typeCounts
})
}
return data
}
// 上一周
function prevWeek() {
currentWeek.value--
updateChartData()
}
// 下一周
function nextWeek() {
currentWeek.value++
updateChartData()
}
// 更新图表数据
function updateChartData() {
chartData.value = generateWeekData(currentWeek.value)
}
// 选择日期
function selectDate(dateString) {
selectedDate.value = dateString
updateChartData()
}
// 获取柱状图段数据
function getBarSegments(day) {
const segments = [];
const totalCount = day.totalCount;
if (totalCount === 0 || maxWeekCount.value === 0) {
return segments;
}
// 定义类型顺序和颜色
const typeOrder = ['母乳亲喂', '母乳瓶喂', '奶粉喂养', '辅食'];
const typeColors = {
'母乳亲喂': '#F9D9D9', // 浅粉色
'母乳瓶喂': '#D9D9F9', // 浅紫色
'奶粉喂养': '#F9E9D9', // 浅橙色/米色
'辅食': '#D9F9D9' // 浅绿色
};
// 按顺序添加有数据的类型，从底部向上堆叠
typeOrder.forEach(type => {
if (day.typeCounts[type] > 0) {
// 计算该类型在当周最大次数中的占比
const height = (day.typeCounts[type] / maxWeekCount.value) * 100;
segments.push({
height: height,
color: typeColors[type]
});
}
});
return segments;
}
// 页面加载
onLoad(() => {
updateChartData()
})
// 监听选中日期变化
watch(selectedDate, () => {
updateChartData()
})
</script>
<style lang="scss" scoped>
.feeding-analysis-page {
min-height: 100vh;
background: #FDFBF7; // 根据设计稿调整背景色
display: flex;
flex-direction: column;
}
// 状态栏占位
.status-bar-placeholder {
height: 75rpx;
background: #FDFBF7;
}
// 头部导航
.header {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 20rpx 30rpx;
background: #FDFBF7;
.nav-left {
display: flex;
align-items: center;
padding: 15rpx;
.back-btn {
font-size: 40rpx;
color: #000000; // 黑色箭头
font-weight: bold;
line-height: 1;
}
}
}
// 图例
.legend-section {
display: flex;
justify-content: space-around;
align-items: center;
padding: 25rpx 40rpx;
background: #FDFBF7;
.legend-item {
display: flex;
align-items: center;
gap: 12rpx;
.legend-color {
width: 32rpx; // 16px * 2
height: 32rpx; // 16px * 2
border-radius: 6rpx; // 稍微圆角
&.legend-breastfeeding {
background: #F9D9D9; // 浅粉色
}
&.legend-bottle {
background: #D9D9F9; // 浅紫色
}
&.legend-formula {
background: #F9E9D9; // 浅橙色/米色
}
&.legend-food {
background: #D9F9D9; // 浅绿色
}
}
.legend-text {
font-size: 26rpx;
color: #000000; // 黑色文字
font-weight: 500;
}
}
}
// CSS柱状图区域
.chart-section {
background: #FDFBF7;
padding: 30rpx 0;
.chart-container {
display: flex;
align-items: center;
padding: 0 30rpx;
.chart-nav-left,
.chart-nav-right {
width: 70rpx;
height: 70rpx;
background: #FDFBF7; // 浅米色背景
border-radius: 35rpx;
display: flex;
align-items: center;
justify-content: center;
margin: 0 15rpx;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
.nav-arrow {
font-size: 28rpx;
color: #000000; // 黑色箭头
font-weight: bold;
line-height: 1;
}
}
.chart-content {
flex: 1;
margin: 0 25rpx;
height: 220rpx;
background: transparent; // 去掉背景色
border-radius: 16rpx;
padding: 20rpx;
// 去掉阴影
.chart-bars {
display: flex;
align-items: flex-end; // 从底部对齐
justify-content: space-between;
height: 100%;
padding: 20rpx 0 40rpx 0;
box-sizing: border-box;
position: relative;
.chart-bar-wrapper {
display: flex;
flex-direction: column;
align-items: center;
flex: 1;
position: relative;
padding: 0 10rpx;
&.active {
.chart-bar {
// 选中状态不需要背景色，保持透明
}
// 选中状态的背景显示在日期文字后面
.bar-date {
background: #F0EFEA;
padding: 4rpx 8rpx;
border-radius: 4rpx;
}
}
.chart-bar {
width: 60rpx;
height: 120rpx;
display: flex;
flex-direction: column;
// 移除容器的border-radius，让内部段自己控制圆角
position: relative;
background: transparent;
justify-content: flex-end; // 确保段从底部开始
.bar-segment {
width: 100%;
min-height: 10rpx;
transition: height 0.3s ease;
flex-shrink: 0;
// 如果只有一个段，整个柱子都有圆角
&:only-child {
border-radius: 8rpx !important;
}
// 多个段的情况
&:not(:only-child) {
// 第一个段（底部）有底部圆角
&:first-child {
border-top-left-radius: 8rpx !important;
border-top-right-radius: 8rpx !important;
}
// 最后一个段（顶部）有顶部圆角
&:last-child {
border-bottom-left-radius: 8rpx !important;
border-bottom-right-radius: 8rpx !important;
}
// 中间段没有圆角
&:not(:first-child):not(:last-child) {
border-radius: 0 !important;
}
}
}
}
.bar-count {
position: absolute;
top: -30rpx; // 调整位置到柱子顶部上方
left: 50%;
transform: translateX(-50%);
font-size: 20rpx;
color: #C89F6B;
font-weight: bold;
white-space: nowrap;
z-index: 3;
}
.bar-date {
margin-top: 10rpx;
font-size: 24rpx;
color: #666666;
font-weight: 500;
}
&.active .bar-date {
color: #C89F6B;
font-weight: bold;
}
}
}
}
}
.baby-age {
text-align: center;
padding: 25rpx 0;
text {
font-size: 26rpx;
color: #000000; // 黑色文字
font-weight: bold; // 加粗
}
}
}
// 记录列表
.records-container {
flex: 1;
background: #FDFBF7; // 与背景色一致
border-radius: 32rpx 32rpx 0 0;
margin-top: 20rpx;
padding: 30rpx 0 0 0;
.empty-state {
display: flex;
justify-content: center;
align-items: center;
height: 300rpx;
.empty-text {
font-size: 28rpx;
color: #999;
}
}
.record-list {
padding: 0 30rpx 30rpx 30rpx;
.record-item {
display: flex;
margin-bottom: 50rpx;
position: relative;
.time-dot {
width: 140rpx;
display: flex;
align-items: flex-start;
padding-top: 35rpx;
margin-right: 20rpx;
flex-shrink: 0;
.dot {
width: 18rpx;
height: 18rpx;
border-radius: 50%;
margin-right: 20rpx;
margin-top: 10rpx;
flex-shrink: 0;
}
.time {
font-size: 26rpx;
color: #000000; // 黑色文字
line-height: 1.4;
font-weight: bold; // 加粗
}
}
.record-content {
flex: 1;
min-height: 160rpx;
border-radius: 24rpx;
padding: 28rpx;
box-sizing: border-box;
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.06);
.record-header {
display: flex;
align-items: center;
margin-bottom: 16rpx;
.record-icon-img-muruqinwei,
.record-icon-img-pingwei,
.record-icon-img-naifen,
.record-icon-img-fushi {
width: 36rpx;
height: 36rpx;
margin-right: 16rpx;
flex-shrink: 0;
}
.record-type {
flex: 1;
font-size: 30rpx;
font-weight: 600;
color: #000000; // 黑色文字
line-height: 1.4;
}
.edit-btn {
font-size: 24rpx;
color: #AAAAAA; // 浅灰色文字
padding: 10rpx 20rpx;
border: 1rpx solid #E0E0E0; // 浅灰色边框
border-radius: 20rpx;
background: #F5F5F5; // 浅灰色背景
opacity: 0.9;
font-weight: 500;
}
}
.record-details {
.duration-info,
.amount-info {
.duration-text,
.amount-text {
display: flex;
align-items: center;
gap: 20rpx;
margin-bottom: 12rpx;
&:last-child {
margin-bottom: 0;
}
.duration-label,
.amount-label {
font-size: 26rpx;
color: #000000; // 黑色文字
font-weight: 500;
min-width: 60rpx;
}
.duration-time,
.amount-value {
font-size: 26rpx;
color: #000000; // 黑色文字
font-weight: 600;
}
}
}
.content-info {
.content-text {
font-size: 26rpx;
color: #000000; // 黑色文字
font-weight: 600;
line-height: 1.5;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
}
}
}
}
.timeline-connector {
width: 3rpx;
height: 50rpx;
background: #E0E0E0; // 浅灰色连接线
margin-left: 25rpx;
margin-top: -25rpx;
margin-bottom: -25rpx;
border-radius: 2rpx;
}
}
}
// 响应式适配
@media screen and (max-width: 750rpx) {
.legend-section {
padding: 25rpx 30rpx;
.legend-item {
gap: 8rpx;
.legend-color {
width: 20rpx;
height: 20rpx;
}
.legend-text {
font-size: 24rpx;
}
}
}
.chart-section {
.chart-container {
padding: 0 20rpx;
.chart-nav-left,
.chart-nav-right {
width: 60rpx;
height: 60rpx;
margin: 0 10rpx;
}
.chart-content {
margin: 0 20rpx;
height: 200rpx;
}
}
}
.records-container {
.record-list {
padding: 0 20rpx 30rpx 20rpx;
.record-item {
.time-dot {
width: 120rpx;
margin-right: 15rpx;
}
.record-content {
padding: 24rpx;
}
}
}
}
}
</style>
pages/feedingIndex/feedingIndex.vue 0 → 100644
View file @ 974ed970
<template>
<view class="feeding-record-add-page">
<!-- 广告横幅 -->
<view class="ad-banner">
<image class="banner-bg" src="/static/feedingIndex/v1/banner.png" mode="aspectFill" />
</view>
<!-- 喂养时间 -->
<view class="feeding-time">
<text class="time-label">喂养时间</text>
<text class="time-value">2025-06-01 22:22</text>
<image class="edit-icon" src="/static/feedingIndex/v1/icon_modify.png" mode="aspectFit" />
<text class="records-link">喂养记录 ›</text>
</view>
<!-- 喂养类型选择 -->
<view class="feeding-types">
<view class="type-item" v-for="(type, index) in feedingTypes" :key="index"
:class="{ active: selectedType === type.value }" @click="selectType(type.value)">
<view class="type-icon" :style="{ backgroundColor: type.color }">
<image class="icon-img" :src="type.icon" mode="aspectFit" />
</view>
<text class="type-label">{{ type.label }}</text>
</view>
</view>
<!-- 温馨提示 -->
<view class="warm-tip">
<text>温馨提示:每十分钟建议更换一侧,更推荐瓶装方式喂养~</text>
</view>
<!-- 动态表单区域 -->
<view class="form-section">
<!-- 母乳亲喂表单 -->
<view v-if="selectedType === 'breastfeeding'" class="breastfeeding-form">
<view class="duration-controls">
<view class="duration-item">
<view class="duration-circle">
<text class="duration-number">{{ leftDuration }}</text>
<text class="duration-unit">分钟</text>
</view>
<view class="duration-buttons">
<image class="btn-minus" src="/static/feedingIndex/v1/icon-L.png" mode="aspectFit" @click="adjustDuration('left', -1)" />
<image class="btn-plus" src="/static/feedingIndex/v1/icon+L.png" mode="aspectFit" @click="adjustDuration('left', 1)" />
</view>
<text class="duration-label">左侧哺乳时长</text>
</view>
<view class="duration-item">
<view class="duration-circle">
<text class="duration-number">{{ rightDuration }}</text>
<text class="duration-unit">分钟</text>
</view>
<view class="duration-buttons">
<image class="btn-minus" src="/static/feedingIndex/v1/icon-L.png" mode="aspectFit" @click="adjustDuration('right', -1)" />
<image class="btn-plus" src="/static/feedingIndex/v1/icon+L.png" mode="aspectFit" @click="adjustDuration('right', 1)" />
</view>
<text class="duration-label">右侧哺乳时长</text>
</view>
</view>
</view>
<!-- 母乳瓶喂/奶粉喂养表单 -->
<view v-if="selectedType === 'bottle' || selectedType === 'formula'" class="bottle-form">
<view class="bottle-graphic">
<view class="bottle-container">
<view class="bottle-liquid" :style="{ height: `${(amount / 100) * 200}%` }"></view>
<view class="bottle-scale">
<text class="scale-mark">80</text>
<text class="scale-mark">85</text>
<text class="scale-mark active">90</text>
<text class="scale-mark">95</text>
<text class="scale-mark">100</text>
</view>
</view>
<view class="amount-bubble">
<text class="bubble-label">喂奶量</text>
<text class="bubble-value">{{ amount }}ml</text>
</view>
<view class="adjust-arrows">
<image class="arrow-up" src="/static/feedingIndex/v1/icon+G.png" mode="aspectFit" @click="adjustAmount(10)" />
<image class="arrow-down" src="/static/feedingIndex/v1/icon-G.png" mode="aspectFit" @click="adjustAmount(-10)" />
</view>
</view>
</view>
<!-- 辅食表单 -->
<view v-if="selectedType === 'food'" class="food-form">
<view class="selected-items">
<text>米粉,面条,苹果,土豆</text>
</view>
<view class="food-categories">
<text class="category-title">辅食分类</text>
<text class="complete-btn">完成</text>
</view>
<view class="category-list">
<view class="category-item">
<text class="category-name">主食</text>
<text class="add-btn">+</text>
<view class="selected-tags">
<text class="tag">米粉 ✕</text>
<text class="tag">面条 ✕</text>
</view>
</view>
<view class="category-item">
<text class="category-name">蔬菜</text>
<text class="add-btn">+</text>
<view class="selected-tags">
<text class="tag">山药 ✕</text>
<text class="tag">萝卜 ✕</text>
<text class="tag active">土豆 ✕</text>
<text class="tag">豆 ✕</text>
<text class="tag">青瓜 ✕</text>
<text class="tag">白菜 ✕</text>
</view>
<text class="expand-arrow">↑</text>
</view>
<view class="category-item">
<text class="category-name">水果</text>
<text class="add-btn">+</text>
<view class="selected-tags">
<text class="tag">香蕉 ✕</text>
<text class="tag active">苹果 ✕</text>
<text class="tag">牛油果 ✕</text>
</view>
</view>
<view class="category-item">
<text class="category-name">其他</text>
<text class="add-btn">+</text>
<view class="selected-tags">
<text class="tag">鱼油 ✕</text>
</view>
</view>
</view>
</view>
</view>
<!-- 记录方式选择 -->
<view class="record-methods">
<image class="tab-image" :src="getTabImage()" mode="aspectFill" />
<view class="click-area left" @click="setRecordMethod('manual')"></view>
<view class="click-area center" @click="setRecordMethod('timer')"></view>
<view class="click-area right" @click="setRecordMethod('voice')"></view>
</view>
<!-- 录音控制区域 -->
<view v-if="recordMethod === 'voice'" class="voice-controls">
<view class="voice-status">
<image class="voice-icon" :src="isRecording ? '/static/feedingIndex/v1/icon_luyining.png' : '/static/feedingIndex/v1/icon_luyin.png'" mode="aspectFit" />
<text class="voice-text">{{ isRecording ? '录音中...' : '点击开始录音' }}</text>
</view>
<view class="voice-buttons">
<image class="voice-btn" :src="isRecording ? '/static/feedingIndex/v1/icon_stop.png' : '/static/feedingIndex/v1/icon_start.png'" mode="aspectFit" @click="toggleRecording" />
</view>
</view>
<!-- 底部完成按钮 -->
<view class="complete-btn" @click="completeRecord">
<image class="complete-btn-bg" src="/static/feedingIndex/v1/complete_btn.png" mode="aspectFit" />
</view>
</view>
</template>
<script setup>
import { ref, computed } from 'vue'
const feedingTypes = ref([
{ value: 'breastfeeding', label: '母乳亲喂', color: '#FFD0D0', icon: '/static/feedingIndex/v1/icon_muruqinwei.png' },
{ value: 'bottle', label: '母乳瓶喂', color: '#D0D0FF', icon: '/static/feedingIndex/v1/icon_murupinwei.png' },
{ value: 'formula', label: '奶粉喂养', color: '#FFE4B5', icon: '/static/feedingIndex/v1/icon_naifen.png' },
{ value: 'food', label: '辅食', color: '#D0FFD0', icon: '/static/feedingIndex/v1/icon_fushi.png' }
])
const selectedType = ref('breastfeeding')
const recordMethod = ref('timer')
const isRecording = ref(false)
// 母乳亲喂时长
const leftDuration = ref(60)
const rightDuration = ref(5)
// 奶量
const amount = ref(90)
// 方法
function selectType(type) {
selectedType.value = type
}
function adjustDuration(side, value) {
if (side === 'left') {
leftDuration.value = Math.max(0, leftDuration.value + value)
} else {
rightDuration.value = Math.max(0, rightDuration.value + value)
}
}
function adjustAmount(value) {
amount.value = Math.max(0, Math.min(100, amount.value + value))
}
function setRecordMethod(method) {
recordMethod.value = method
}
function toggleRecording() {
isRecording.value = !isRecording.value
}
function completeRecord() {
console.log('完成记录')
uni.navigateBack()
}
function goBack() {
uni.navigateBack()
}
function getTabImage() {
if (recordMethod.value === 'manual') {
return '/static/feedingIndex/v1/Tab_bottom_write.png'
} else if (recordMethod.value === 'timer') {
return '/static/feedingIndex/v1/Tab_bottom_timer.png'
} else {
return '/static/feedingIndex/v1/Tab_bottom_voice.png'
}
}
</script>
<style lang="scss" scoped>
.feeding-record-add-page {
background: #FFF8F1;
min-height: 100vh;
padding: 0;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20rpx 30rpx;
background: #FFF8F1;
.back-icon {
font-size: 40rpx;
color: #333;
font-weight: bold;
}
.title {
font-size: 32rpx;
color: #333;
font-weight: bold;
}
.nav-right {
display: flex;
gap: 20rpx;
.nav-icon {
font-size: 28rpx;
color: #333;
}
}
}
.ad-banner {
position: relative;
margin: 20rpx 30rpx;
border-radius: 20rpx;
overflow: hidden;
height: 200rpx;
.banner-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.banner-left {
position: relative;
z-index: 2;
flex: 1;
padding: 30rpx;
.brand {
display: block;
font-size: 28rpx;
color: #333;
font-weight: bold;
margin-bottom: 10rpx;
}
.slogan {
display: block;
font-size: 24rpx;
color: #333;
margin-bottom: 20rpx;
}
.test-btn {
display: flex;
align-items: center;
gap: 10rpx;
background: #0066CC;
color: white;
padding: 10rpx 20rpx;
border-radius: 20rpx;
width: fit-content;
margin-bottom: 10rpx;
.test-icon {
font-size: 20rpx;
}
.test-text {
font-size: 24rpx;
}
}
.sales-text {
font-size: 20rpx;
color: #666;
}
}
.banner-right {
position: absolute;
right: 30rpx;
top: 50%;
transform: translateY(-50%);
z-index: 2;
.milk-can {
position: relative;
width: 100rpx;
height: 120rpx;
background: #FFD700;
border-radius: 50rpx;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
.benefit-text {
font-size: 18rpx;
color: #333;
writing-mode: vertical-rl;
}
}
}
}
.feeding-time {
display: flex;
align-items: center;
padding: 20rpx 30rpx;
background: #FFF8F1;
.time-label {
font-size: 28rpx;
color: #333;
margin-right: 20rpx;
}
.time-value {
font-size: 28rpx;
color: #333;
margin-right: 10rpx;
}
.edit-icon {
width: 32rpx;
height: 32rpx;
margin-right: auto;
}
.records-link {
font-size: 26rpx;
color: #C89F6B;
}
}
.feeding-types {
display: flex;
justify-content: space-around;
padding: 30rpx;
background: #FFF8F1;
.type-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 10rpx;
.type-icon {
width: 80rpx;
height: 80rpx;
border-radius: 20rpx;
display: flex;
align-items: center;
justify-content: center;
position: relative;
.icon-img {
width: 60rpx;
height: 60rpx;
}
}
.type-label {
font-size: 24rpx;
color: #333;
}
&.active .type-icon {
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
transform: scale(1.05);
}
}
}
.warm-tip {
text-align: center;
padding: 20rpx 30rpx;
background: #FFF8F1;
text {
font-size: 24rpx;
color: #666;
}
}
.form-section {
padding: 30rpx;
background: #FFF8F1;
}
.breastfeeding-form {
.duration-controls {
display: flex;
justify-content: space-around;
gap: 40rpx;
.duration-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 20rpx;
.duration-circle {
width: 200rpx;
height: 200rpx;
// border-radius: 50%;
// background: linear-gradient(135deg, #FFE4B5, #FFD700);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.duration-number {
font-size: 48rpx;
color: #333;
font-weight: bold;
}
.duration-unit {
font-size: 24rpx;
color: #666;
}
}
.duration-buttons {
display: flex;
gap: 40rpx;
.btn-minus,
.btn-plus {
width: 60rpx;
height: 60rpx;
}
}
.duration-label {
font-size: 24rpx;
color: #333;
}
}
}
}
.bottle-form {
.bottle-graphic {
display: flex;
justify-content: center;
align-items: center;
position: relative;
height: 400rpx;
.bottle-container {
position: relative;
width: 120rpx;
height: 300rpx;
background: rgba(255, 228, 181, 0.3);
border-radius: 60rpx;
overflow: hidden;
.bottle-liquid {
position: absolute;
bottom: 0;
width: 100%;
background: #FFA500;
transition: height 0.3s ease;
}
.bottle-scale {
position: absolute;
right: -40rpx;
top: 0;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 20rpx 0;
.scale-mark {
font-size: 20rpx;
color: #666;
&.active {
color: #FFA500;
font-weight: bold;
}
}
}
}
.amount-bubble {
position: absolute;
left: 50%;
transform: translateX(-50%);
background: #FFE4B5;
padding: 20rpx;
border-radius: 20rpx;
text-align: center;
.bubble-label {
display: block;
font-size: 20rpx;
color: #333;
margin-bottom: 5rpx;
}
.bubble-value {
display: block;
font-size: 32rpx;
color: #333;
font-weight: bold;
}
}
.adjust-arrows {
position: absolute;
right: 20rpx;
display: flex;
flex-direction: column;
gap: 20rpx;
.arrow-up,
.arrow-down {
width: 60rpx;
height: 60rpx;
}
}
}
}
.food-form {
.selected-items {
background: white;
padding: 20rpx;
border-radius: 20rpx;
margin-bottom: 30rpx;
text {
font-size: 28rpx;
color: #333;
font-weight: bold;
}
}
.food-categories {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20rpx;
.category-title {
font-size: 28rpx;
color: #333;
font-weight: bold;
}
.complete-btn {
font-size: 26rpx;
color: #C89F6B;
}
}
.category-list {
.category-item {
display: flex;
align-items: center;
gap: 20rpx;
margin-bottom: 20rpx;
flex-wrap: wrap;
.category-name {
font-size: 26rpx;
color: #333;
min-width: 80rpx;
}
.add-btn {
width: 40rpx;
height: 40rpx;
border-radius: 50%;
background: #FFE4B5;
color: #333;
display: flex;
align-items: center;
justify-content: center;
font-size: 24rpx;
font-weight: bold;
}
.selected-tags {
display: flex;
flex-wrap: wrap;
gap: 10rpx;
.tag {
background: #FFE4B5;
color: #333;
padding: 8rpx 16rpx;
border-radius: 20rpx;
font-size: 22rpx;
&.active {
background: #C89F6B;
color: white;
}
}
}
.expand-arrow {
font-size: 24rpx;
color: #666;
}
}
}
}
.record-methods {
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 120rpx; // 调整为图片高度
background: #F8F8F8; // 背景色根据需要
.tab-image {
width: 100%;
height: 100%;
}
.click-area {
position: absolute;
top: 0;
bottom: 0;
width: 33.33%;
}
.left {
left: 0;
}
.center {
left: 33.33%;
}
.right {
left: 66.66%;
}
}
.voice-controls {
padding: 30rpx;
background: #FFF8F1;
display: flex;
flex-direction: column;
align-items: center;
gap: 30rpx;
.voice-status {
display: flex;
flex-direction: column;
align-items: center;
gap: 20rpx;
.voice-icon {
width: 468rpx;
height: 180rpx;
}
.voice-text {
font-size: 28rpx;
color: #333;
}
}
.voice-buttons {
.voice-btn {
width: 100rpx;
height: 100rpx;
}
}
}
.complete-btn {
position: fixed;
bottom: 40rpx;
left: 40rpx;
right: 40rpx;
height: 100rpx;
display: flex;
align-items: center;
justify-content: center;
position: relative;
.complete-btn-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.complete-text {
position: relative;
z-index: 2;
color: white;
font-size: 32rpx;
font-weight: bold;
}
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment