Skip to content

飞
飞鹤小程序
Commit 1d0e53c2 authored by 王炽's avatar 王炽
Browse files
Options

6666

parent b32f68f9
Hide whitespace changes
Inline Side-by-side
Showing with 449 additions and 101 deletions
components/BabyFeedSwitchPopup.vue 0 → 100644
View file @ 1d0e53c2
<template>
<view v-if="visible" class="popup-overlay">
<view class="popup-content" @click.stop>
<!-- 喂养方式列表 -->
<view class="feed-list">
<view
v-for="(item, index) in feedOptions"
:key="index"
class="feed-item"
:class="{ selected: selectedIndex === index }"
@click="selectFeed(index)"
>
<!-- 选中背景 -->
<image
v-if="selectedIndex === index"
class="feed-item-bg"
src="/static/shengzhangTool/changeFeed/itemBg.png"
mode="aspectFit"
/>
<!-- 喂养方式文本 -->
<text class="feed-text">{{ item.name }}</text>
</view>
</view>
<!-- 底部按钮 -->
<view class="bottom-buttons">
<image
class="cancel-btn"
:class="{'cancel-btn-active': isCancelPressed}"
src="/static/shengzhangTool/changeFeed/cancelBtn.png"
@touchstart="handleCancelTouchStart"
@touchend="handleCancelTouchEnd"
mode="aspectFit"
/>
<image
class="ok-btn"
:class="{'ok-btn-active': isOkPressed}"
src="/static/shengzhangTool/changeFeed/okBtn.png"
@touchstart="handleOkTouchStart"
@touchend="handleOkTouchEnd"
mode="aspectFit"
/>
</view>
</view>
</view>
</template>
<script setup>
import { ref, defineEmits, defineProps } from 'vue'
const props = defineProps({
visible: {
type: Boolean,
default: false
},
selectedIndex: {
type: Number,
default: 0
}
})
const emit = defineEmits(['update:visible', 'update:selectedIndex', 'change'])
// 喂养方式选项
const feedOptions = ref([
{ name: '纯母乳', value: 'pure_breast' },
{ name: '母乳+奶粉混合喂养', value: 'mixed_feeding' },
{ name: '纯奶粉', value: 'pure_formula' },
{ name: '奶粉+辅食', value: 'formula_food' },
{ name: '母乳+辅食', value: 'breast_food' }
])
const selectIndex = ref(props.selectedIndex)
// 按钮状态
const isCancelPressed = ref(false)
const isOkPressed = ref(false)
// 添加加载状态
const isLoadingFeed = ref(false)
// 喂养方式相关数据
const showFeedSwitchPopup = ref(false)
const currentFeedIndex = ref(1) // 默认选中"母乳+奶粉混合喂养"
const selectedFeedText = ref('母乳+奶粉混合喂养')
// 选择喂养方式
const selectFeed = (index) => {
selectIndex.value = index
emit('update:selectedIndex', index)
}
// 取消按钮事件
const handleCancelTouchStart = () => {
isCancelPressed.value = true
}
const handleCancelTouchEnd = () => {
isCancelPressed.value = false
closePopup()
}
// 确认按钮事件
const handleOkTouchStart = () => {
isOkPressed.value = true
}
const handleOkTouchEnd = () => {
isOkPressed.value = false
const index = selectIndex.value
const selectedFeed = feedOptions.value[index]
// 发送事件通知主页面
emit('change', selectedFeed, index)
closePopup()
}
// 点击喂养方式选择
const openFeedSelector = () => {
console.log('打开喂养方式选择器')
showFeedSwitchPopup.value = true
}
// 处理喂养方式选择变化
const onFeedChange = (feedOption, index) => {
isLoadingFeed.value = true
console.log('选择了喂养方式:', feedOption, index)
selectedFeedText.value = feedOption.name
currentFeedIndex.value = index
// 模拟保存数据
setTimeout(() => {
isLoadingFeed.value = false
}, 300)
}
const closePopup = () => {
emit('update:visible', false)
}
</script>
<style lang="less" scoped>
.popup-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.7);
z-index: 9999;
.popup-content {
position: absolute;
width: 750rpx;
height: 897rpx;
background-color: #f6f8fa;
overflow: hidden;
border-top-left-radius: 32rpx;
border-top-right-radius: 32rpx;
bottom: 0rpx;
padding-top: 50rpx;
.feed-list {
flex: 1;
overflow-y: auto;
padding-left: 30rpx;
padding-right: 30rpx;
.feed-item {
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: 106rpx;
margin-bottom: 20rpx;
border-radius: 16rpx;
background-color: #fff;
&.selected {
background-color: transparent;
}
.feed-item-bg {
position: absolute;
width: 689rpx;
height: 108rpx;
z-index: 1;
}
.feed-text {
position: relative;
z-index: 2;
font-size: 28rpx;
color: #1d1e26;
font-weight: 400;
}
}
}
.bottom-buttons {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 20rpx;
padding-left: 30rpx;
padding-right: 30rpx;
.cancel-btn {
width: 334rpx;
height: 97rpx;
transition: transform 0.1s ease-out;
&.cancel-btn-active {
transform: scale(0.95);
}
}
.ok-btn {
width: 334rpx;
height: 97rpx;
transition: transform 0.1s ease-out;
&.ok-btn-active {
transform: scale(0.95);
}
}
}
}
}
.feeding-select {
display: flex;
align-items: center;
cursor: pointer; // 添加手型光标
.feeding-value {
font-size: 28rpx;
color: #666;
margin-right: 8rpx;
}
.dropdown-icon {
width: 20rpx;
height: 20rpx;
transition: transform 0.3s ease; // 添加旋转动画
}
// 可选：添加点击反馈效果
&:active {
opacity: 0.7;
}
}
</style>
\ No newline at end of file
components/BabySwitchPopup.vue
View file @ 1d0e53c2
<template>
<view v-if="visible" class="popup-overlay" @click="closePopup">
<view v-if="visible" class="popup-overlay">
<view class="popup-content" @click.stop>
<!-- 弹窗头部 -->
<view class="popup-header">
<text class="popup-title">切换宝宝</text>
<image
class="close-btn"
src="/static/shengzhangTool/close.png"
src="/static/shengzhangTool/changeBaby/closeBtn.png"
mode="aspectFit"
@click="closePopup"
/>
......@@ -25,7 +25,7 @@
<image
v-if="selectedIndex === index"
class="baby-item-bg"
src="/static/shengzhangTool/babyItemBg.png"
src="/static/shengzhangTool/changeBaby/babyItemBg.png"
mode="aspectFit"
/>
......@@ -50,12 +50,22 @@
</view>
</view>
</view>
<image
class="ok-btn"
:class="{'ok-btn-active': isOkPressed}"
src="/static/shengzhangTool/changeBaby/okBtn.png"
@touchstart="handleOkTouchStart"
@touchend="handleOkTouchEnd"
mode="aspectFit"
></image>
</view>
</view>
</template>
<script setup>
import { defineEmits, defineProps } from 'vue'
import { ref, defineEmits, defineProps } from 'vue'
const props = defineProps({
visible: {
......@@ -74,14 +84,33 @@ const props = defineProps({
const emit = defineEmits(['update:visible', 'update:selectedIndex', 'change'])
const selectHandle = () => {
}
const isOkPressed = ref(false)
const handleOkTouchStart = () => {
isOkPressed.value = true
}
const handleOkTouchEnd = () => {
isOkPressed.value = false
const index = selectIndex.value;
// 发送事件 通知主页面
emit('change', props.babyList[index], index)
closePopup();
}
const closePopup = () => {
emit('update:visible', false)
}
const selectIndex = ref(0)
const selectBaby = (index) => {
emit('update:selectedIndex', index)
emit('change', props.babyList[index], index)
closePopup()
selectIndex.value = index;
emit('update:selectedIndex', index);
}
</script>
......@@ -94,109 +123,131 @@ const selectBaby = (index) => {
bottom: 0;
background-color: rgba(0, 0, 0, 0.7);
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
}
.popup-content {
width: 600rpx;
background-color: #ffffff;
border-radius: 20rpx;
overflow: hidden;
position: relative;
max-height: 80vh;
display: flex;
flex-direction: column;
}
.popup-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 40rpx 30rpx 20rpx;
border-bottom: 1px solid #f0f0f0;
.popup-title {
font-size: 32rpx;
font-weight: bold;
color: #333;
}
.close-btn {
width: 40rpx;
height: 40rpx;
padding: 10rpx;
}
}
// display: flex;
// align-items: center;
// justify-content: center;
.baby-list {
flex: 1;
padding: 20rpx;
max-height: 60vh;
overflow-y: auto;
}
.baby-item {
position: relative;
display: flex;
align-items: center;
padding: 20rpx;
margin-bottom: 20rpx;
border-radius: 16rpx;
background-color: #f8f8f8;
&.selected {
background-color: transparent;
}
.baby-item-bg {
.popup-content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.baby-avatar {
position: relative;
z-index: 2;
width: 80rpx;
height: 80rpx;
border-radius: 50%;
margin-right: 20rpx;
}
.baby-info {
position: relative;
z-index: 2;
flex: 1;
.baby-name-row {
width: 750rpx;
height: 719rpx;
background-color: #f6f8fa;
overflow: hidden;
border-top-left-radius: 32rpx;
border-top-right-radius: 32rpx;
bottom: 0rpx;
.popup-header {
display: flex;
align-items: center;
margin-bottom: 8rpx;
justify-content: space-between;
padding: 40rpx 30rpx 20rpx;
.baby-name {
font-size: 28rpx;
.popup-title {
font-size: 32rpx;
font-weight: bold;
color: #333;
margin-right: 10rpx;
}
.gender-icon {
width: 24rpx;
height: 24rpx;
.close-btn {
width: 40rpx;
height: 40rpx;
}
}
.baby-list {
flex: 1;
padding-left: 31rpx;
padding-right: 31rpx;
padding-top: 20rpx;
// padding-bottom: 20rpx;
height: 360rpx;
overflow-y: auto;
.baby-item {
position: relative;
display: flex;
align-items: center;
padding-left: 30rpx;
margin-bottom: 20rpx;
height: 129rpx;
border-radius: 16rpx;
background-color: #fff;
&.selected {
background-color: transparent;
}
.baby-item-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.baby-avatar {
position: relative;
z-index: 2;
width: 80rpx;
height: 80rpx;
border-radius: 50%;
margin-right: 20rpx;
}
.baby-info {
position: relative;
z-index: 2;
flex: 1;
.baby-name-row {
display: flex;
align-items: center;
margin-bottom: 8rpx;
.baby-name {
font-size: 28rpx;
font-weight: bold;
color: #333;
margin-right: 10rpx;
}
.gender-icon {
width: 24rpx;
height: 24rpx;
}
}
.baby-birthday {
font-size: 24rpx;
color: #666;
}
}
}
}
.baby-birthday {
font-size: 24rpx;
color: #666;
.ok-btn {
position: absolute;
width: 681rpx;
height: 98rpx;
margin-left: 35rpx;
margin-top: 0rpx;
&.ok-btn-active {
transform: scale(0.95);
}
}
}
}
</style>
\ No newline at end of file
pages/shengzhangTools/shengzhangTools.vue
View file @ 1d0e53c2
......@@ -64,9 +64,9 @@
<view class="feeding-row">
<text class="label">宝宝喂养方式</text>
<view class="feeding-select">
<text class="feeding-value">母乳+奶粉混合喂养</text>
<image class="dropdown-icon" src="/static/shengzhangTool/open.png" mode="aspectFit"></image>
<view class="feeding-select" @click="showFeedingPopup">
<text class="feeding-value">{{ selectedFeedText }}</text>
<image class="dropdown-icon" src="/static/shengzhangTool/close.png" mode="aspectFit"></image>
</view>
</view>
</view>
......@@ -179,11 +179,19 @@
v-model:selectedIndex="currentBabyIndex"
@change="onBabyChange"
/>
<!-- 喂养方式弹窗 -->
<BabyFeedSwitchPopup
v-model:visible="showFeedSwitchPopup"
v-model:selectedIndex="currentFeedIndex"
@change="onFeedChange"
/>
</template>
<script setup>
import { onMounted, ref } from 'vue';
import BabySwitchPopup from '@/components/BabySwitchPopup.vue'
import BabyFeedSwitchPopup from '@/components/BabyFeedSwitchPopup.vue'
const swiperData = ref([{bannerImg: '/static/shengzhangTool/banner1.png'}, {bannerImg: '/static/shengzhangTool/banner2.png'}, {bannerImg: '/static/shengzhangTool/banner3.png'}]);
......@@ -243,6 +251,11 @@ const generateRange = (min, max, step = 0.1) => {
return range
}
const showFeedingPopup = () => {
console.log('显示喂养方式弹窗')
showFeedSwitchPopup.value = true
}
// 身高范围 (40-80cm)
const heightRange = generateRange(40, 80, 0.1)
const heightPickerValue = ref([heightRange.indexOf(parseFloat(height.value))])
......@@ -278,6 +291,7 @@ const onHeadChange = (e) => {
const changeBaby = () => {
console.log('切换宝宝')
showBabySwitchPopup.value = true
currentBabyIndex.value = 0;//默认选中第一个宝宝
}
const viewRecords = () => {
......@@ -296,6 +310,11 @@ const submitData = () => {
const showBabySwitchPopup = ref(false)
const currentBabyIndex = ref(0)
// 喂养方式弹窗相关状态
const showFeedSwitchPopup = ref(false)
const currentFeedIndex = ref(1) // 默认选中"母乳+奶粉混合喂养"
const selectedFeedText = ref('母乳+奶粉混合喂养')
// 示例宝宝列表数据
const babyList = ref([
{
......@@ -319,6 +338,16 @@ const onBabyChange = (baby, index) => {
// 比如更新宝宝名称、性别、生日等
}
// 处理喂养方式选择变化
const onFeedChange = (feedOption, index) => {
console.log('选择了喂养方式:', feedOption, index)
selectedFeedText.value = feedOption.name
currentFeedIndex.value = index
// 这里可以更新页面上显示的喂养方式
// 比如更新 feeding-select 中的文本
}
onMounted(() => {
})
......
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