Skip to content

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

生长工具引导页

parent eee8bd81
Show whitespace changes
Inline Side-by-side
Showing with 422 additions and 297 deletions
components/DatePickerPopup.vue
View file @ d77163de
...@@ -10,6 +10,21 @@ ...@@ -10,6 +10,21 @@
</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
...@@ -22,7 +22,6 @@ ...@@ -22,7 +22,6 @@
<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">
...@@ -175,7 +174,11 @@ ...@@ -175,7 +174,11 @@
</view> </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>
<!-- 在页面底部添加弹窗组件 --> <!-- 在页面底部添加弹窗组件 -->
...@@ -207,16 +210,20 @@ ...@@ -207,16 +210,20 @@
</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)
} }
// 首页组件逻辑 // 首页组件逻辑
...@@ -224,12 +231,12 @@ const backHandler = () => { ...@@ -224,12 +231,12 @@ 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,20 +258,15 @@ const weight = ref('3.32') ...@@ -251,20 +258,15 @@ 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)))
} }
} }
...@@ -289,7 +291,7 @@ const onDateChange = (date) => { ...@@ -289,7 +291,7 @@ 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)
...@@ -327,7 +329,7 @@ const onHeadChange = (e) => { ...@@ -327,7 +329,7 @@ const onHeadChange = (e) => {
const changeBaby = () => { const changeBaby = () => {
console.log('切换宝宝') console.log('切换宝宝')
showBabySwitchPopup.value = true showBabySwitchPopup.value = true
currentBabyIndex.value = 0;//默认选中第一个宝宝 currentBabyIndex.value = 0 // 默认选中第一个宝宝
} }
const viewRecords = () => { const viewRecords = () => {
...@@ -389,9 +391,9 @@ const isHeightTipActive = ref(false) ...@@ -389,9 +391,9 @@ 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,9 +403,9 @@ const isWeightTipActive = ref(false) ...@@ -401,9 +403,9 @@ 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 { .guide-container{
// font-size: 24rpx; position: absolute;
// color: #999; 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> </style>
\ No newline at end of file
<!-- picker-view -->
\ 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