Skip to content

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

生长工具引导页

parent eee8bd81
Hide whitespace changes
Inline Side-by-side
Showing with 422 additions and 297 deletions
components/DatePickerPopup.vue
View file @ d77163de
...@@ -9,7 +9,22 @@ ...@@ -9,7 +9,22 @@
</view> </view>
</view> </view>
<view class="date-picker-container"> <view class="date-picker-container">
<view class="date-picker-bg">
<view class="date-con0">
<image class="time-bg" src="/static/shengzhangTool/timeBg.png" mode="aspectFit"></image>
<text class="time-text">年</text>
</view>
<view class="date-con1">
<image class="time-bg" src="/static/shengzhangTool/timeBg.png" mode="aspectFit"></image>
<text class="time-text">月</text>
</view>
<view class="date-con2">
<image class="time-bg" src="/static/shengzhangTool/timeBg.png" mode="aspectFit"></image>
<text class="time-text">日</text>
</view>
</view>
<!-- 日期选择器 --> <!-- 日期选择器 -->
<picker-view <picker-view
class="date-picker" class="date-picker"
...@@ -23,7 +38,7 @@ ...@@ -23,7 +38,7 @@
<picker-view-column> <picker-view-column>
<view v-for="(year, index) in yearRange" :key="index" class="picker-item"> <view v-for="(year, index) in yearRange" :key="index" class="picker-item">
<text class="picker-text">{{ year }}</text> <text class="picker-text">{{ year }}</text>
<text v-if="index === datePickerValue[0]" class="picker-label">年</text> <!-- <text v-if="index === datePickerValue[0]" class="picker-label">年</text> -->
</view> </view>
</picker-view-column> </picker-view-column>
...@@ -31,7 +46,7 @@ ...@@ -31,7 +46,7 @@
<picker-view-column> <picker-view-column>
<view v-for="(month, index) in monthRange" :key="index" class="picker-item"> <view v-for="(month, index) in monthRange" :key="index" class="picker-item">
<text class="picker-text">{{ month }}</text> <text class="picker-text">{{ month }}</text>
<text v-if="index === datePickerValue[1]" class="picker-label">月</text> <!-- <text v-if="index === datePickerValue[1]" class="picker-label">月</text> -->
</view> </view>
</picker-view-column> </picker-view-column>
...@@ -39,7 +54,7 @@ ...@@ -39,7 +54,7 @@
<picker-view-column> <picker-view-column>
<view v-for="(day, index) in dayRange" :key="index" class="picker-item"> <view v-for="(day, index) in dayRange" :key="index" class="picker-item">
<text class="picker-text">{{ day }}</text> <text class="picker-text">{{ day }}</text>
<text v-if="index === datePickerValue[2]" class="picker-label">日</text> <!-- <text v-if="index === datePickerValue[2]" class="picker-label">日</text> -->
</view> </view>
</picker-view-column> </picker-view-column>
</picker-view> </picker-view>
...@@ -228,6 +243,79 @@ const closePopup = () => { ...@@ -228,6 +243,79 @@ const closePopup = () => {
width: 100%; width: 100%;
margin-top: 100rpx; margin-top: 100rpx;
.date-picker-bg{
position: absolute;
top: 96rpx;
left: 0;
width: 100%;
height: 60rpx;
.date-con0{
position: absolute;
// width: 122rpx;
height: 100%;
left: 64rpx;
.time-bg{
position: absolute;
width: 122rpx;
height: 51rpx;
top:50%;
transform: translateY(-50%);
}
.time-text{
position: absolute;
font-size: 28rpx;
color: #1d1e26;
font-weight: bold;
left: 135rpx;
top:50%;
transform: translateY(-50%);
}
}
.date-con1{
position: absolute;
// width: 122rpx;
height: 100%;
left: 313rpx;
.time-bg{
position: absolute;
width: 122rpx;
height: 51rpx;
top:50%;
transform: translateY(-50%);
}
.time-text{
position: absolute;
font-size: 28rpx;
color: #1d1e26;
font-weight: bold;
left: 135rpx;
top:50%;
transform: translateY(-50%);
}
}
.date-con2{
position: absolute;
// width: 122rpx;
height: 100%;
left: 562rpx;
.time-bg{
position: absolute;
top:50%;
transform: translateY(-50%);
width: 122rpx;
height: 51rpx;
}
.time-text{
position: absolute;
font-size: 28rpx;
color: #1d1e26;
font-weight: bold;
left: 135rpx;
top:50%;
transform: translateY(-50%);
}
}
}
.date-picker { .date-picker {
position: relative; position: relative;
z-index: 2; z-index: 2;
......
pages/shengzhangTools/shengzhangTools.vue
View file @ d77163de
<template> <template>
<view class="shengzhang-tools-container"> <view class="shengzhang-tools-container">
<swiper <swiper
class="banner-swiper" class="banner-swiper"
:indicator-dots="swiperData.length > 1" :indicator-dots="swiperData.length > 1"
:autoplay="swiperData.length > 1" :autoplay="swiperData.length > 1"
...@@ -22,214 +22,221 @@ ...@@ -22,214 +22,221 @@
<image @tap="backHandler" class="btnback" :src="`/static/shengzhangTool/backBtn.png`"></image> <image @tap="backHandler" class="btnback" :src="`/static/shengzhangTool/backBtn.png`"></image>
<text class="title">生长测评</text> <text class="title">生长测评</text>
<view class="info-container"> <view class="info-container">
<!-- 顶部宝宝信息区域 -->
<!-- 顶部宝宝信息区域 --> <view class="baby-info-section">
<view class="baby-info-section"> <view class="baby-avatar">
<view class="baby-avatar"> <image class="avatar-img" src="/static/shengzhangTool/avatar.png" mode="aspectFill"></image>
<image class="avatar-img" src="/static/shengzhangTool/avatar.png" mode="aspectFill"></image> </view>
</view> <view class="baby-details">
<view class="baby-details"> <view class="baby-name-row">
<view class="baby-name-row"> <text class="baby-name">宝宝名称</text>
<text class="baby-name">宝宝名称</text> <image class="change-baby-btn" @click="changeBaby" src="/static/shengzhangTool/changeBaby.png" mode="aspectFit"></image>
<image class="change-baby-btn" @click="changeBaby" src="/static/shengzhangTool/changeBaby.png" mode="aspectFit"></image> </view>
</view> <view class="baby-info-row">
<view class="baby-info-row"> <view class="gender-age">
<view class="gender-age"> <image class="gender-icon" src="/static/shengzhangTool/sex1.png" mode="aspectFit"></image>
<image class="gender-icon" src="/static/shengzhangTool/sex1.png" mode="aspectFit"></image> <text class="age-text">8月龄</text>
<text class="age-text">8月龄</text> </view>
</view> <text class="birth-date">2024-10-20</text>
<text class="birth-date">2024-10-20</text> </view>
</view> </view>
</view> <view class="record-btn" @click="viewRecords">
<view class="record-btn" @click="viewRecords"> <text class="record-text">测评记录</text>
<text class="record-text">测评记录</text> <image class="arrow-icon" src="/static/shengzhangTool/close.png" mode="aspectFit"></image>
<image class="arrow-icon" src="/static/shengzhangTool/close.png" mode="aspectFit"></image> </view>
</view> </view>
</view>
<!-- 分割线 -->
<!-- 分割线 --> <image class="divider-line" src="/static/shengzhangTool/line.png" mode="aspectFit"></image>
<image class="divider-line" src="/static/shengzhangTool/line.png" mode="aspectFit"></image>
<!-- 测评信息区域 -->
<!-- 测评信息区域 --> <view class="test-info-section">
<view class="test-info-section"> <view class="test-date-row">
<view class="test-date-row"> <text class="label">本次测评日期</text>
<text class="label">本次测评日期</text> <view class="date-container" @click="showDatePicker">
<view class="date-container" @click="showDatePicker"> <text class="date-value">{{ selectedDate }}</text>
<text class="date-value">{{ selectedDate }}</text> <image class="edit-icon" src="/static/shengzhangTool/editIcon.png" mode="aspectFit"></image>
<image class="edit-icon" src="/static/shengzhangTool/editIcon.png" mode="aspectFit"></image> </view>
</view> </view>
</view> <!-- 分割线 -->
<!-- 分割线 --> <image class="divider-line" src="/static/shengzhangTool/line.png" mode="aspectFit"></image>
<image class="divider-line" src="/static/shengzhangTool/line.png" mode="aspectFit"></image>
<view class="feeding-row">
<view class="feeding-row"> <text class="label">宝宝喂养方式</text>
<text class="label">宝宝喂养方式</text> <view class="feeding-select" @click="showFeedingPopup">
<view class="feeding-select" @click="showFeedingPopup"> <text class="feeding-value">{{ selectedFeedText }}</text>
<text class="feeding-value">{{ selectedFeedText }}</text> <image class="dropdown-icon" src="/static/shengzhangTool/close.png" mode="aspectFit"></image>
<image class="dropdown-icon" src="/static/shengzhangTool/close.png" mode="aspectFit"></image> </view>
</view> </view>
</view> </view>
</view>
<!-- 测量数据区域 -->
<!-- 测量数据区域 --> <view class="measurement-section">
<view class="measurement-section"> <view class="measurement-header">
<view class="measurement-header"> <view class="measurement-item">
<view class="measurement-item"> <text class="measurement-title">宝宝身高</text>
<text class="measurement-title">宝宝身高</text> </view>
</view> <view class="measurement-item">
<view class="measurement-item"> <text class="measurement-title">宝宝体重</text>
<text class="measurement-title">宝宝体重</text> </view>
</view> <view class="measurement-item">
<view class="measurement-item"> <text class="measurement-title">宝宝头围</text>
<text class="measurement-title">宝宝头围</text> </view>
</view> </view>
</view>
<!-- 替换输入框区域为picker-view -->
<!-- 替换输入框区域为picker-view --> <view class="input-section">
<view class="input-section"> <view class="input-item">
<view class="input-item"> <view class="input-container">
<view class="input-container"> <image class="input-bg" src="/static/shengzhangTool/numBg.png" mode="aspectFit"></image>
<image class="input-bg" src="/static/shengzhangTool/numBg.png" mode="aspectFit"></image> <picker-view
<picker-view class="measurement-picker"
class="measurement-picker" :class="{ 'measurement-picker-disabled': isHeightTipActive }"
:class="{ 'measurement-picker-disabled': isHeightTipActive }" :value="heightPickerValue"
:value="heightPickerValue" @change="isHeightTipActive ? null : onHeightChange"
@change="isHeightTipActive ? null : onHeightChange" :indicator-style="indicatorStyle"
:indicator-style="indicatorStyle" indicator-class="date-picker"
indicator-class="date-picker" >
> <picker-view-column>
<picker-view-column> <view v-for="(item, index) in heightRange" :key="index" class="picker-item">
<view v-for="(item, index) in heightRange" :key="index" class="picker-item"> {{ item }}
{{ item }} </view>
</view> </picker-view-column>
</picker-view-column> </picker-view>
</picker-view> <text class="unit">cm</text>
<text class="unit">cm</text> </view>
</view> </view>
</view> <view class="input-item">
<view class="input-item"> <view class="input-container">
<view class="input-container"> <image class="input-bg" src="/static/shengzhangTool/numBg.png" mode="aspectFit"></image>
<image class="input-bg" src="/static/shengzhangTool/numBg.png" mode="aspectFit"></image> <picker-view
<picker-view class="measurement-picker"
class="measurement-picker" :class="{ 'measurement-picker-disabled': isWeightTipActive }"
:class="{ 'measurement-picker-disabled': isWeightTipActive }" :value="weightPickerValue"
:value="weightPickerValue" @change="isWeightTipActive ? null : onWeightChange"
@change="isWeightTipActive ? null : onWeightChange" :indicator-style="indicatorStyle"
:indicator-style="indicatorStyle" indicator-class="date-picker"
indicator-class="date-picker" >
> <picker-view-column>
<picker-view-column> <view v-for="(item, index) in weightRange" :key="index" class="picker-item">
<view v-for="(item, index) in weightRange" :key="index" class="picker-item"> {{ item }}
{{ item }} </view>
</view> </picker-view-column>
</picker-view-column> </picker-view>
</picker-view> <text class="unit">kg</text>
<text class="unit">kg</text> </view>
</view> </view>
</view> <view class="input-item">
<view class="input-item"> <view class="input-container">
<view class="input-container"> <image class="input-bg" src="/static/shengzhangTool/numBg.png" mode="aspectFit"></image>
<image class="input-bg" src="/static/shengzhangTool/numBg.png" mode="aspectFit"></image> <picker-view
<picker-view class="measurement-picker"
class="measurement-picker" :class="{ 'measurement-picker-disabled': isHeadTipActive }"
:class="{ 'measurement-picker-disabled': isHeadTipActive }" :value="headPickerValue"
:value="headPickerValue" @change="isHeadTipActive ? null : onHeadChange"
@change="isHeadTipActive ? null : onHeadChange" :indicator-style="indicatorStyle"
:indicator-style="indicatorStyle" indicator-class="date-picker"
indicator-class="date-picker" >
> <picker-view-column>
<picker-view-column> <view v-for="(item, index) in headRange" :key="index" class="picker-item">
<view v-for="(item, index) in headRange" :key="index" class="picker-item"> {{ item }}
{{ item }} </view>
</view> </picker-view-column>
</picker-view-column> </picker-view>
</picker-view> <text class="unit">cm</text>
<text class="unit">cm</text> </view>
</view> </view>
</view> </view>
</view>
<!-- 底部提示 -->
<!-- 底部提示 --> <view class="tips-section">
<view class="tips-section"> <view class="tip-item0" @click="toggleHeightTip">
<view class="tip-item0" @click="toggleHeightTip"> <text class="tip-text" :class="{ 'tip-text-active': isHeightTipActive }">暂无数据</text>
<text class="tip-text" :class="{ 'tip-text-active': isHeightTipActive }">暂无数据</text> </view>
</view> <view class="tip-item1" @click="toggleWeightTip">
<view class="tip-item1" @click="toggleWeightTip"> <text class="tip-text" :class="{ 'tip-text-active': isWeightTipActive }">暂无数据</text>
<text class="tip-text" :class="{ 'tip-text-active': isWeightTipActive }">暂无数据</text> </view>
</view> <view class="tip-item2" @click="toggleHeadTip">
<view class="tip-item2" @click="toggleHeadTip"> <text class="tip-text" :class="{ 'tip-text-active': isHeadTipActive }">暂无数据</text>
<text class="tip-text" :class="{ 'tip-text-active': isHeadTipActive }">暂无数据</text> </view>
</view> </view>
</view> </view>
</view>
<!-- 提交按钮 -->
<!-- 提交按钮 --> <view class="submit-section">
<view class="submit-section"> <view class="submit-btn" @click="submitData">
<view class="submit-btn" @click="submitData"> <image class="submit-bg" src="/static/shengzhangTool/submitBtn.png" mode="aspectFit"></image>
<image class="submit-bg" src="/static/shengzhangTool/submitBtn.png" mode="aspectFit"></image> <!-- <text class="submit-text">确认提交</text> -->
<!-- <text class="submit-text">确认提交</text> --> </view>
</view> <view class="bottom-tip" @click="onClickTips">
<view class="bottom-tip" @click="onClickTips"> <image class="tip-icon" src="/static/shengzhangTool/tips.png" mode="aspectFit"></image>
<image class="tip-icon" src="/static/shengzhangTool/tips.png" mode="aspectFit"></image> <!-- <text class="tip-desc">如何选择你的宝宝身高、体重、头围</text> -->
<!-- <text class="tip-desc">如何选择你的宝宝身高、体重、头围</text> --> </view>
</view> </view>
</view> </view>
<view class="guide-container" v-if="guideIndex != -1" @click="guideHandler">
<image v-if="guideIndex == 0" class="guide-img0" src="/static/shengzhangTool/guide0.png" mode="aspectFit"></image>
<image v-if="guideIndex == 1" class="guide-img1" src="/static/shengzhangTool/guide1.png" mode="aspectFit"></image>
<image v-if="guideIndex == 2" class="guide-img2" src="/static/shengzhangTool/guide2.png" mode="aspectFit"></image>
</view> </view>
</view> </view>
<!-- 在页面底部添加弹窗组件 --> <!-- 在页面底部添加弹窗组件 -->
<BabySwitchPopup <BabySwitchPopup
v-model:visible="showBabySwitchPopup" v-model:visible="showBabySwitchPopup"
:babyList="babyList" :babyList="babyList"
v-model:selectedIndex="currentBabyIndex" v-model:selectedIndex="currentBabyIndex"
@change="onBabyChange" @change="onBabyChange"
/> />
<!-- 喂养方式弹窗 --> <!-- 喂养方式弹窗 -->
<BabyFeedSwitchPopup <BabyFeedSwitchPopup
v-model:visible="showFeedSwitchPopup" v-model:visible="showFeedSwitchPopup"
v-model:selectedIndex="currentFeedIndex" v-model:selectedIndex="currentFeedIndex"
@change="onFeedChange" @change="onFeedChange"
/> />
<!-- 日期选择弹窗 --> <!-- 日期选择弹窗 -->
<DatePickerPopup <DatePickerPopup
v-model:visible="showDatePickerPopup" v-model:visible="showDatePickerPopup"
v-model:selectedDate="selectedDate" v-model:selectedDate="selectedDate"
@change="onDateChange" @change="onDateChange"
/> />
<!-- 宝宝测评提示弹窗 --> <!-- 宝宝测评提示弹窗 -->
<BabyTestTipsPopup <BabyTestTipsPopup
v-model:visible="showBabyTestTipsPopup" v-model:visible="showBabyTestTipsPopup"
/> />
</template> </template>
<script setup> <script setup>
import { onMounted, ref } from 'vue'; import { onMounted, ref } from 'vue'
import BabySwitchPopup from '@/components/BabySwitchPopup.vue' import BabySwitchPopup from '@/components/BabySwitchPopup.vue'
import BabyFeedSwitchPopup from '@/components/BabyFeedSwitchPopup.vue' import BabyFeedSwitchPopup from '@/components/BabyFeedSwitchPopup.vue'
import DatePickerPopup from '@/components/DatePickerPopup.vue' import DatePickerPopup from '@/components/DatePickerPopup.vue'
import BabyTestTipsPopup from '@/components/BabyTestTipsPopup.vue' import BabyTestTipsPopup from '@/components/BabyTestTipsPopup.vue'
const swiperData = ref([{bannerImg: '/static/shengzhangTool/banner1.png'}, {bannerImg: '/static/shengzhangTool/banner2.png'}, {bannerImg: '/static/shengzhangTool/banner3.png'}]); const swiperData = ref([
{ bannerImg: '/static/shengzhangTool/banner1.png' },
{ bannerImg: '/static/shengzhangTool/banner2.png' },
{ bannerImg: '/static/shengzhangTool/banner3.png' }
])
const bannerHandler = (item) => { const bannerHandler = (item) => {
console.log(item); console.log(item)
} }
// 首页组件逻辑 // 首页组件逻辑
const backHandler = () => { const backHandler = () => {
try { try {
uni.navigateBack({ uni.navigateBack({
success: () => { success: () => {
console.log('返回成功'); console.log('返回成功')
}, },
fail: backFailHandler fail: backFailHandler
}); })
} catch (error) { } catch (error) {
console.log('error=',error); console.log('error=', error)
jump({ jump({
type: JumpType.INNER, type: JumpType.INNER,
url: "/pages/index/index" url: "/pages/index/index"
...@@ -238,7 +245,7 @@ const backHandler = () => { ...@@ -238,7 +245,7 @@ const backHandler = () => {
} }
const backFailHandler = (err) => { const backFailHandler = (err) => {
console.log('backFailHandler=',err); console.log('backFailHandler=', err)
jump({ jump({
type: JumpType.INNER, type: JumpType.INNER,
url: "/pages/index/index" url: "/pages/index/index"
...@@ -251,24 +258,19 @@ const weight = ref('3.32') ...@@ -251,24 +258,19 @@ const weight = ref('3.32')
const headCircumference = ref('34.5') const headCircumference = ref('34.5')
// 添加picker-view相关数据 // 添加picker-view相关数据
// const indicatorStyle = 'height: 40px; border-top: none; border-bottom: none;' const indicatorStyle = `height: 40px; border: none;`
// const indicatorStyle = 'height: 40px; border-top: 1px solid transparent; border-bottom: 1px solid transparent;'
const indicatorStyle = `height: 40px;
border: none;
// background: rgba(0,0,0,0.1);
`
// 生成数值范围 // 生成数值范围
const generateRange = (min, max, step = 0.1) => { const generateRange = (min, max, step = 0.1) => {
const range = [] const range = []
for (let i = min; i <= max; i += step) { for (let i = min; i <= max; i += step) {
if(step < 0.1){ if (step < 0.1) {
range.push(parseFloat(i.toFixed(2))) range.push(parseFloat(i.toFixed(2)))
}else{ } else {
range.push(parseFloat(i.toFixed(1))) range.push(parseFloat(i.toFixed(1)))
} }
} }
return range return range
} }
// 日期选择器相关状态 // 日期选择器相关状态
...@@ -287,9 +289,9 @@ const onDateChange = (date) => { ...@@ -287,9 +289,9 @@ const onDateChange = (date) => {
} }
const showFeedingPopup = () => { const showFeedingPopup = () => {
console.log('显示喂养方式弹窗') console.log('显示喂养方式弹窗')
showFeedSwitchPopup.value = true showFeedSwitchPopup.value = true
currentFeedIndex.value = 1;//默认选中"母乳+奶粉混合喂养" currentFeedIndex.value = 1 // 默认选中"母乳+奶粉混合喂养"
} }
// 身高范围 (40-80cm) // 身高范围 (40-80cm)
...@@ -306,40 +308,40 @@ const headPickerValue = ref([headRange.indexOf(parseFloat(headCircumference.valu ...@@ -306,40 +308,40 @@ const headPickerValue = ref([headRange.indexOf(parseFloat(headCircumference.valu
// picker-view change事件处理 // picker-view change事件处理
const onHeightChange = (e) => { const onHeightChange = (e) => {
const index = e.detail.value[0] const index = e.detail.value[0]
height.value = heightRange[index].toString() height.value = heightRange[index].toString()
heightPickerValue.value = [index] heightPickerValue.value = [index]
} }
const onWeightChange = (e) => { const onWeightChange = (e) => {
const index = e.detail.value[0] const index = e.detail.value[0]
weight.value = weightRange[index].toString() weight.value = weightRange[index].toString()
weightPickerValue.value = [index] weightPickerValue.value = [index]
} }
const onHeadChange = (e) => { const onHeadChange = (e) => {
const index = e.detail.value[0] const index = e.detail.value[0]
headCircumference.value = headRange[index].toString() headCircumference.value = headRange[index].toString()
headPickerValue.value = [index] headPickerValue.value = [index]
} }
// 其他方法保持不变 // 其他方法保持不变
const changeBaby = () => { const changeBaby = () => {
console.log('切换宝宝') console.log('切换宝宝')
showBabySwitchPopup.value = true showBabySwitchPopup.value = true
currentBabyIndex.value = 0;//默认选中第一个宝宝 currentBabyIndex.value = 0 // 默认选中第一个宝宝
} }
const viewRecords = () => { const viewRecords = () => {
console.log('查看测评记录') console.log('查看测评记录')
} }
const submitData = () => { const submitData = () => {
console.log('提交数据', { console.log('提交数据', {
height: height.value, height: height.value,
weight: weight.value, weight: weight.value,
headCircumference: headCircumference.value headCircumference: headCircumference.value
}) })
} }
// 添加以下数据 // 添加以下数据
...@@ -353,35 +355,35 @@ const selectedFeedText = ref('母乳+奶粉混合喂养') ...@@ -353,35 +355,35 @@ const selectedFeedText = ref('母乳+奶粉混合喂养')
// 示例宝宝列表数据 // 示例宝宝列表数据
const babyList = ref([ const babyList = ref([
{ {
name: '宝宝名称', name: '宝宝名称',
gender: 1, // 1: 男孩, 0: 女孩 gender: 1, // 1: 男孩, 0: 女孩
birthday: '2024-10-20', birthday: '2024-10-20',
avatar: '/static/shengzhangTool/avatar.png' avatar: '/static/shengzhangTool/avatar.png'
}, },
{ {
name: '宝宝名称', name: '宝宝名称',
gender: 0, gender: 0,
birthday: '2022-04-20', birthday: '2022-04-20',
avatar: '/static/shengzhangTool/avatar.png' avatar: '/static/shengzhangTool/avatar.png'
} }
]) ])
// 处理宝宝选择变化 // 处理宝宝选择变化
const onBabyChange = (baby, index) => { const onBabyChange = (baby, index) => {
console.log('选择了宝宝:', baby, index) console.log('选择了宝宝:', baby, index)
// 这里可以更新页面上的宝宝信息 // 这里可以更新页面上的宝宝信息
// 比如更新宝宝名称、性别、生日等 // 比如更新宝宝名称、性别、生日等
} }
// 处理喂养方式选择变化 // 处理喂养方式选择变化
const onFeedChange = (feedOption, index) => { const onFeedChange = (feedOption, index) => {
console.log('选择了喂养方式:', feedOption, index) console.log('选择了喂养方式:', feedOption, index)
selectedFeedText.value = feedOption.name selectedFeedText.value = feedOption.name
currentFeedIndex.value = index currentFeedIndex.value = index
// 这里可以更新页面上显示的喂养方式 // 这里可以更新页面上显示的喂养方式
// 比如更新 feeding-select 中的文本 // 比如更新 feeding-select 中的文本
} }
// 身高提示状态管理 // 身高提示状态管理
...@@ -389,11 +391,11 @@ const isHeightTipActive = ref(false) ...@@ -389,11 +391,11 @@ const isHeightTipActive = ref(false)
// 处理身高提示点击 // 处理身高提示点击
const toggleHeightTip = () => { const toggleHeightTip = () => {
if(!canClick(0)) return; if (!canClick(0)) return
pushCount(0); pushCount(0)
isHeightTipActive.value = !isHeightTipActive.value isHeightTipActive.value = !isHeightTipActive.value
console.log('身高提示状态:', isHeightTipActive.value) console.log('身高提示状态:', isHeightTipActive.value)
} }
// 体重提示状态管理 // 体重提示状态管理
...@@ -401,11 +403,11 @@ const isWeightTipActive = ref(false) ...@@ -401,11 +403,11 @@ const isWeightTipActive = ref(false)
// 处理体重提示点击 // 处理体重提示点击
const toggleWeightTip = () => { const toggleWeightTip = () => {
if(!canClick(1)) return; if (!canClick(1)) return
pushCount(1); pushCount(1)
isWeightTipActive.value = !isWeightTipActive.value isWeightTipActive.value = !isWeightTipActive.value
console.log('体重提示状态:', isWeightTipActive.value) console.log('体重提示状态:', isWeightTipActive.value)
} }
// 头围提示状态管理 // 头围提示状态管理
...@@ -413,30 +415,31 @@ const isHeadTipActive = ref(false) ...@@ -413,30 +415,31 @@ const isHeadTipActive = ref(false)
// 处理头围提示点击 // 处理头围提示点击
const toggleHeadTip = () => { const toggleHeadTip = () => {
if(!canClick(2)) return; if (!canClick(2)) return
pushCount(2); pushCount(2)
isHeadTipActive.value = !isHeadTipActive.value isHeadTipActive.value = !isHeadTipActive.value
console.log('头围提示状态:', isHeadTipActive.value) console.log('头围提示状态:', isHeadTipActive.value)
} }
const selectCountArr = ref([]) const selectCountArr = ref([])
//数组内存在当前索引可以点击，如果不存在，在判断是不是已经选择两个了，如果已经选择两个，则不能点击
const canClick = (val)=>{ // 数组内存在当前索引可以点击，如果不存在，在判断是不是已经选择两个了，如果已经选择两个，则不能点击
if(selectCountArr.value.indexOf(val) == -1){ const canClick = (val) => {
if(selectCountArr.value.length >= 2){ if (selectCountArr.value.indexOf(val) == -1) {
if (selectCountArr.value.length >= 2) {
return false return false
} }
return true return true
}else{ } else {
return true; return true
} }
} }
const pushCount = (val)=>{ const pushCount = (val) => {
if(selectCountArr.value.indexOf(val) == -1){ if (selectCountArr.value.indexOf(val) == -1) {
selectCountArr.value.push(val) selectCountArr.value.push(val)
}else{ } else {
selectCountArr.value.splice(selectCountArr.value.indexOf(val), 1) selectCountArr.value.splice(selectCountArr.value.indexOf(val), 1)
} }
} }
...@@ -449,40 +452,51 @@ const onClickTips = () => { ...@@ -449,40 +452,51 @@ const onClickTips = () => {
showBabyTestTipsPopup.value = true showBabyTestTipsPopup.value = true
} }
const guideIndex = ref(-1);
const guideHandler = () => {
guideIndex.value++
if (guideIndex.value > 2) {
guideIndex.value = -1;
}
}
onMounted(() => { onMounted(() => {
}) })
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.shengzhang-tools-container {
.shengzhang-tools-container{
width: 100%; width: 100%;
height: 100vh; height: 100vh;
overflow: hidden; overflow: hidden;
background-color: #fdf6eb; background-color: #fdf6eb;
.banner-swiper{
.banner-swiper {
position: absolute; position: absolute;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
top: 191rpx; top: 191rpx;
width: 687rpx; width: 687rpx;
height: 176rpx; height: 176rpx;
.banner-img{
.banner-img {
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 16rpx; border-radius: 16rpx;
} }
} }
.btnback{
.btnback {
position: absolute; position: absolute;
top: 119rpx; top: 119rpx;
left: 30rpx; left: 30rpx;
width: 29rpx; width: 29rpx;
height: 29rpx; height: 29rpx;
} }
.title{
.title {
position: absolute; position: absolute;
top: 111rpx; top: 111rpx;
left: 50%; left: 50%;
...@@ -491,6 +505,7 @@ onMounted(() => { ...@@ -491,6 +505,7 @@ onMounted(() => {
color: #000; color: #000;
font-weight: 600; font-weight: 600;
} }
.info-container { .info-container {
width: 750rpx; width: 750rpx;
height: 1210rpx; height: 1210rpx;
...@@ -593,16 +608,16 @@ onMounted(() => { ...@@ -593,16 +608,16 @@ onMounted(() => {
} }
.test-info-section { .test-info-section {
// margin-bottom: 30rpx; .test-date-row {
.test-date-row{
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
.label { .label {
font-size: 28rpx; font-size: 28rpx;
color: #333; color: #333;
} }
.date-container { .date-container {
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -619,6 +634,7 @@ onMounted(() => { ...@@ -619,6 +634,7 @@ onMounted(() => {
} }
} }
} }
.feeding-row { .feeding-row {
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -630,7 +646,6 @@ onMounted(() => { ...@@ -630,7 +646,6 @@ onMounted(() => {
color: #333; color: #333;
} }
.feeding-select { .feeding-select {
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -646,12 +661,13 @@ onMounted(() => { ...@@ -646,12 +661,13 @@ onMounted(() => {
height: 20rpx; height: 20rpx;
} }
} }
} }
} }
.measurement-section { .measurement-section {
margin-bottom: 40rpx; margin-bottom: 40rpx;
margin-top: 80rpx;
.measurement-header { .measurement-header {
display: flex; display: flex;
...@@ -671,7 +687,6 @@ onMounted(() => { ...@@ -671,7 +687,6 @@ onMounted(() => {
.input-section { .input-section {
display: flex; display: flex;
// margin: 25rpx 25rpx 0rpx 25rpx;
.input-item { .input-item {
flex: 1; flex: 1;
...@@ -694,9 +709,10 @@ onMounted(() => { ...@@ -694,9 +709,10 @@ onMounted(() => {
.measurement-picker { .measurement-picker {
position: relative; position: relative;
z-index: 2; z-index: 2;
width:70rpx; width: 70rpx;
height: 400rpx; height: 370rpx;
background: transparent; background: transparent;
:deep(.date-picker::before) { :deep(.date-picker::before) {
content: none; content: none;
} }
...@@ -740,7 +756,6 @@ onMounted(() => { ...@@ -740,7 +756,6 @@ onMounted(() => {
.tip-item0 { .tip-item0 {
flex: 1; flex: 1;
text-align: center; text-align: center;
// cursor: pointer;
&:hover { &:hover {
opacity: 0.8; opacity: 0.8;
...@@ -756,10 +771,10 @@ onMounted(() => { ...@@ -756,10 +771,10 @@ onMounted(() => {
} }
} }
} }
.tip-item1 { .tip-item1 {
flex: 1; flex: 1;
text-align: center; text-align: center;
// cursor: pointer;
&:hover { &:hover {
opacity: 0.8; opacity: 0.8;
...@@ -775,10 +790,10 @@ onMounted(() => { ...@@ -775,10 +790,10 @@ onMounted(() => {
} }
} }
} }
.tip-item2 { .tip-item2 {
flex: 1; flex: 1;
text-align: center; text-align: center;
// cursor: pointer;
&:hover { &:hover {
opacity: 0.8; opacity: 0.8;
...@@ -795,11 +810,10 @@ onMounted(() => { ...@@ -795,11 +810,10 @@ onMounted(() => {
} }
} }
} }
} }
.submit-section { .submit-section {
margin-top: 40rpx; margin-top: 80rpx;
.submit-btn { .submit-btn {
position: relative; position: relative;
...@@ -835,15 +849,38 @@ onMounted(() => { ...@@ -835,15 +849,38 @@ onMounted(() => {
width: 424rpx; width: 424rpx;
height: 23rpx; height: 23rpx;
} }
// .tip-desc {
// font-size: 24rpx;
// color: #999;
// }
} }
} }
} }
}
</style>
<!-- picker-view --> .guide-container{
\ No newline at end of file position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 1000;
.guide-img0{
width: 100%;
height: 1624rpx;
position: absolute;
top: 0;
left: 0;
}
.guide-img1{
width: 100%;
height: 1624rpx;
position: absolute;
top: 0;
left: 0;
}
.guide-img2{
width: 100%;
height: 1624rpx;
position: absolute;
top: 0;
left: 0;
}
}
}
</style>
\ No newline at end of file
static/.DS_Store
View file @ d77163de
No preview for this file type
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