feedingIndex

pages/feedingIndex/feedingIndex.vue

@@ -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