Skip to content

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

feedingIndex

parent 7dd34561
Hide whitespace changes
Inline Side-by-side
Showing with 246 additions and 95 deletions
pages/feedingIndex/feedingIndex.vue
View file @ b070e06a
......@@ -13,9 +13,12 @@
<!-- 喂养时间 -->
<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>
<image class="arrow-right" src="/static/feedingIndex/v1/icon_arrow_yellow.png"></image>
</view>
......@@ -24,8 +27,11 @@
<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" />
<image class="icon-bg" src="/static/feedingIndex/v1/icon_bg.png" mode="aspectFit"
v-if="selectedType === type.value" />
<view class="type-icon-wrapper">
<image class="type-icon" :src="type.icon" mode="aspectFit" />
</view>
<text class="type-label">{{ type.label }}</text>
</view>
......@@ -39,31 +45,45 @@
<!-- 动态表单区域 -->
<view class="form-section">
<!-- 母乳亲喂表单 -->
<view v-if="selectedType === 'breastfeeding'" class="breastfeeding-form">
<view v-if="selectedType === 'breastfeeding' && shouldShowForm" 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>
<image class="circle-bg" src="/static/feedingIndex/v1/iconBg.png" mode="aspectFit" />
<view class="circle-content">
<text class="duration-number">{{ feedingData.breastfeeding.leftDuration }}</text>
<text class="duration-unit">分钟</text>
</view>
</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)" />
<image class="btn-minus"
:src="feedingData.breastfeeding.leftDuration <= 0 ? '/static/feedingIndex/v1/icon-G.png' : '/static/feedingIndex/v1/icon-L.png'"
mode="aspectFit" @click="adjustDuration('left', -1)"
:class="{ disabled: feedingData.breastfeeding.leftDuration <= 0 }" />
<image class="btn-plus"
:src="feedingData.breastfeeding.leftDuration >= 60 ? '/static/feedingIndex/v1/icon+G.png' : '/static/feedingIndex/v1/icon+L.png'"
mode="aspectFit" @click="adjustDuration('left', 1)"
:class="{ disabled: feedingData.breastfeeding.leftDuration >= 60 }" />
</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>
<image class="circle-bg" src="/static/feedingIndex/v1/iconBg.png" mode="aspectFit" />
<view class="circle-content">
<text class="duration-number">{{ feedingData.breastfeeding.rightDuration }}</text>
<text class="duration-unit">分钟</text>
</view>
</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)" />
<image class="btn-minus"
:src="feedingData.breastfeeding.rightDuration <= 0 ? '/static/feedingIndex/v1/icon-G.png' : '/static/feedingIndex/v1/icon-L.png'"
mode="aspectFit" @click="adjustDuration('right', -1)"
:class="{ disabled: feedingData.breastfeeding.rightDuration <= 0 }" />
<image class="btn-plus"
:src="feedingData.breastfeeding.rightDuration >= 60 ? '/static/feedingIndex/v1/icon+G.png' : '/static/feedingIndex/v1/icon+L.png'"
mode="aspectFit" @click="adjustDuration('right', 1)"
:class="{ disabled: feedingData.breastfeeding.rightDuration >= 60 }" />
</view>
<text class="duration-label">右侧哺乳时长</text>
</view>
......@@ -71,10 +91,12 @@
</view>
<!-- 母乳瓶喂/奶粉喂养表单 -->
<view v-if="selectedType === 'bottle' || selectedType === 'formula'" class="bottle-form">
<view v-if="(selectedType === 'bottle' || selectedType === 'formula') && shouldShowForm"
class="bottle-form">
<view class="bottle-graphic">
<view class="bottle-container">
<view class="bottle-liquid" :style="{ height: `${(amount / 100) * 200}%` }"></view>
<view class="bottle-liquid"
:style="{ height: `${(feedingData[selectedType].amount / 100) * 200}%` }"></view>
<view class="bottle-scale">
<text class="scale-mark">80</text>
<text class="scale-mark">85</text>
......@@ -85,7 +107,7 @@
</view>
<view class="amount-bubble">
<text class="bubble-label">喂奶量</text>
<text class="bubble-value">{{ amount }}ml</text>
<text class="bubble-value">{{ feedingData[selectedType].amount }}ml</text>
</view>
<view class="adjust-arrows">
<image class="arrow-up" src="/static/feedingIndex/v1/icon+G.png" mode="aspectFit"
......@@ -97,9 +119,9 @@
</view>
<!-- 辅食表单 -->
<view v-if="selectedType === 'food'" class="food-form">
<view v-if="selectedType === 'food' && shouldShowForm" class="food-form">
<view class="selected-items">
<text>米粉,面条,苹果,土豆</text>
<text>{{ feedingData.food.selectedItems.join(',') }}</text>
</view>
<view class="food-categories">
<text class="category-title">辅食分类</text>
......@@ -146,17 +168,8 @@
</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 v-if="recordMethods[selectedType] === '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'"
......@@ -165,14 +178,39 @@
</view>
<view class="voice-buttons">
<image class="voice-btn"
:src="isRecording ? '/static/feedingIndex/v1/icon_stop.png' : '/static/feedingIndex/v1/icon_start.png'"
:src="isRecording ? '/static/feedingIndex/v1/icon_luyin_stop.png' : '/static/feedingIndex/v1/icon_luyin_start.png'"
mode="aspectFit" @click="toggleRecording" />
</view>
</view>
<!-- 计时器控制区域 -->
<view v-if="recordMethods[selectedType] === 'timer'" class="timer-controls">
<view class="timer-status">
<image class="timer-icon"
:src="isTimerRunning ? '/static/feedingIndex/v1/icon_timer_running.png' : '/static/feedingIndex/v1/icon_timer_stopped.png'"
mode="aspectFit" />
<text class="timer-text">{{ isTimerRunning ? '计时中...' : '点击开始计时' }}</text>
</view>
<view class="timer-buttons">
<image class="timer-btn"
:src="isTimerRunning ? '/static/feedingIndex/v1/icon_stop.png' : '/static/feedingIndex/v1/icon_start.png'"
mode="aspectFit" @click="toggleTimer" />
</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 class="complete-btn" @click="completeRecord">
<image class="complete-btn-bg" src="/static/feedingIndex/v1/complete_btn.png" mode="aspectFit" />
<view class="bottom_complete-btn" @click="completeRecord">
<image class="complete-btn-bg" src="/static/feedingIndex/v1/complete_btn.png" />
</view>
</view>
</template>
......@@ -187,22 +225,45 @@ const bannerHandler = (item) => {
}
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' }
{ value: 'breastfeeding', label: '母乳亲喂', icon: '/static/feedingIndex/v1/icon_muruqinwei.png' },
{ value: 'bottle', label: '母乳瓶喂', icon: '/static/feedingIndex/v1/icon_murupinwei.png' },
{ value: 'formula', label: '奶粉喂养', icon: '/static/feedingIndex/v1/icon_naifen.png' },
{ value: 'food', label: '辅食', icon: '/static/feedingIndex/v1/icon_fushi.png' }
])
const selectedType = ref('breastfeeding')
const recordMethod = ref('timer')
// 为每种喂养方式设置独立的记录方法
const recordMethods = ref({
breastfeeding: 'timer',
bottle: 'timer',
formula: 'timer',
food: 'timer'
})
const isRecording = ref(false)
const isTimerRunning = ref(false)
// 为每种喂养方式设置独立的数据
const feedingData = ref({
breastfeeding: {
leftDuration: 5,
rightDuration: 5
},
bottle: {
amount: 90
},
formula: {
amount: 90
},
food: {
selectedItems: ['米粉', '面条', '苹果', '土豆']
}
})
// 母乳亲喂时长
const leftDuration = ref(60)
const rightDuration = ref(5)
// 奶量
const amount = ref(90)
// 计算属性 - 判断是否显示表单
const shouldShowForm = computed(() => {
const currentMethod = recordMethods.value[selectedType.value]
return currentMethod === 'timer' // 只有计时模式显示表单
})
// 方法
function selectType(type) {
......@@ -210,25 +271,42 @@ function selectType(type) {
}
function adjustDuration(side, value) {
const currentData = feedingData.value.breastfeeding
if (side === 'left') {
leftDuration.value = Math.max(0, leftDuration.value + value)
// 限制在0-60分钟范围内
const newValue = currentData.leftDuration + value
if (newValue >= 0 && newValue <= 60) {
currentData.leftDuration = newValue
}
} else {
rightDuration.value = Math.max(0, rightDuration.value + value)
// 限制在0-60分钟范围内
const newValue = currentData.rightDuration + value
if (newValue >= 0 && newValue <= 60) {
currentData.rightDuration = newValue
}
}
}
function adjustAmount(value) {
amount.value = Math.max(0, Math.min(100, amount.value + value))
const currentType = selectedType.value
if (currentType === 'bottle' || currentType === 'formula') {
const currentData = feedingData.value[currentType]
currentData.amount = Math.max(0, Math.min(100, currentData.amount + value))
}
}
function setRecordMethod(method) {
recordMethod.value = method
recordMethods.value[selectedType.value] = method
}
function toggleRecording() {
isRecording.value = !isRecording.value
}
function toggleTimer() {
isTimerRunning.value = !isTimerRunning.value
}
function completeRecord() {
console.log('完成记录')
uni.navigateBack()
......@@ -239,9 +317,10 @@ function goBack() {
}
function getTabImage() {
if (recordMethod.value === 'manual') {
const currentMethod = recordMethods.value[selectedType.value]
if (currentMethod === 'manual') {
return '/static/feedingIndex/v1/Tab_bottom_write.png'
} else if (recordMethod.value === 'timer') {
} else if (currentMethod === 'timer') {
return '/static/feedingIndex/v1/Tab_bottom_timer.png'
} else {
return '/static/feedingIndex/v1/Tab_bottom_voice.png'
......@@ -271,7 +350,7 @@ function getTabImage() {
.feeding-time {
display: flex;
align-items: center;
padding: 20rpx 30rpx;
padding: 20rpx 30rpx 5rpx 30rpx;
background: #FFF8F1;
.time-label {
......@@ -308,39 +387,57 @@ function getTabImage() {
.feeding-types {
display: flex;
justify-content: space-around;
padding: 30rpx;
background: #FFF8F1;
justify-content: space-between;
padding: 0rpx 30rpx;
gap: 15rpx;
.type-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 10rpx;
gap: 8rpx;
padding: 15rpx 10rpx;
border-radius: 12rpx;
background: transparent;
transition: all 0.3s ease;
.type-icon {
.icon-bg {
width: 228rpx;
height: 144rpx;
position: absolute;
}
.type-icon-wrapper {
position: relative;
width: 80rpx;
height: 80rpx;
border-radius: 20rpx;
display: flex;
align-items: center;
justify-content: center;
position: relative;
.icon-img {
width: 60rpx;
height: 60rpx;
.type-icon {
width: 48rpx;
height: 48rpx;
position: relative;
}
}
.type-label {
font-size: 24rpx;
color: #333;
font-size: 26rpx;
color: #6f6d67;
font-weight: 500;
z-index: 2;
}
&.active .type-icon {
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
transform: scale(1.05);
&.active {
.type-label {
color: #1d1e25;
font-weight: 800;
}
}
}
}
......@@ -372,37 +469,63 @@ function getTabImage() {
flex-direction: column;
align-items: center;
gap: 20rpx;
position: relative;
.duration-circle {
width: 200rpx;
height: 200rpx;
// border-radius: 50%;
// background: linear-gradient(135deg, #FFE4B5, #FFD700);
width: 278rpx;
height: 278rpx;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.duration-number {
font-size: 48rpx;
color: #333;
font-weight: bold;
.circle-bg {
position: absolute;
width: 100%;
height: 100%;
}
.duration-unit {
font-size: 24rpx;
color: #666;
.circle-content {
position: relative;
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 {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
gap: 40rpx;
justify-content: space-between;
align-items: center;
pointer-events: none;
.btn-minus,
.btn-plus {
width: 60rpx;
height: 60rpx;
width: 78rpx;
height: 180rpx;
margin-top: -45rpx;
pointer-events: auto;
&.disabled {
pointer-events: none;
}
}
}
......@@ -591,7 +714,8 @@ function getTabImage() {
display: flex;
justify-content: center;
align-items: center;
height: 120rpx; // 调整为图片高度
width: 468rpx;
height: 180rpx; // 调整为图片高度
background: #F8F8F8; // 背景色根据需要
.tab-image {
......@@ -652,12 +776,45 @@ function getTabImage() {
}
}
.complete-btn {
position: fixed;
bottom: 40rpx;
left: 40rpx;
right: 40rpx;
height: 100rpx;
.timer-controls {
padding: 30rpx;
background: #FFF8F1;
display: flex;
flex-direction: column;
align-items: center;
gap: 30rpx;
.timer-status {
display: flex;
flex-direction: column;
align-items: center;
gap: 20rpx;
.timer-icon {
width: 468rpx;
height: 180rpx;
}
.timer-text {
font-size: 28rpx;
color: #333;
}
}
.timer-buttons {
.timer-btn {
width: 100rpx;
height: 100rpx;
}
}
}
.bottom_complete-btn {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 686rpx;
height: 94rpx;
display: flex;
align-items: center;
justify-content: center;
......@@ -671,12 +828,6 @@ function getTabImage() {
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