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 @@
</view>
<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
class="date-picker"
......@@ -23,7 +38,7 @@
<picker-view-column>
<view v-for="(year, index) in yearRange" :key="index" class="picker-item">
<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>
</picker-view-column>
......@@ -31,7 +46,7 @@
<picker-view-column>
<view v-for="(month, index) in monthRange" :key="index" class="picker-item">
<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>
</picker-view-column>
......@@ -39,7 +54,7 @@
<picker-view-column>
<view v-for="(day, index) in dayRange" :key="index" class="picker-item">
<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>
</picker-view-column>
</picker-view>
......@@ -228,6 +243,79 @@ const closePopup = () => {
width: 100%;
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 {
position: relative;
z-index: 2;
......
pages/shengzhangTools/shengzhangTools.vue
View file @ d77163de
......@@ -22,7 +22,6 @@
<image @tap="backHandler" class="btnback" :src="`/static/shengzhangTool/backBtn.png`"></image>
<text class="title">生长测评</text>
<view class="info-container">
<!-- 顶部宝宝信息区域 -->
<view class="baby-info-section">
<view class="baby-avatar">
......@@ -175,7 +174,11 @@
</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>
<!-- 在页面底部添加弹窗组件 -->
......@@ -207,16 +210,20 @@
</template>
<script setup>
import { onMounted, ref } from 'vue';
import { onMounted, ref } from 'vue'
import BabySwitchPopup from '@/components/BabySwitchPopup.vue'
import BabyFeedSwitchPopup from '@/components/BabyFeedSwitchPopup.vue'
import DatePickerPopup from '@/components/DatePickerPopup.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) => {
console.log(item);
console.log(item)
}
// 首页组件逻辑
......@@ -224,12 +231,12 @@ const backHandler = () => {
try {
uni.navigateBack({
success: () => {
console.log('返回成功');
console.log('返回成功')
},
fail: backFailHandler
});
})
} catch (error) {
console.log('error=',error);
console.log('error=', error)
jump({
type: JumpType.INNER,
url: "/pages/index/index"
......@@ -238,7 +245,7 @@ const backHandler = () => {
}
const backFailHandler = (err) => {
console.log('backFailHandler=',err);
console.log('backFailHandler=', err)
jump({
type: JumpType.INNER,
url: "/pages/index/index"
......@@ -251,20 +258,15 @@ const weight = ref('3.32')
const headCircumference = ref('34.5')
// 添加picker-view相关数据
// const indicatorStyle = 'height: 40px; border-top: none; border-bottom: 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 indicatorStyle = `height: 40px; border: none;`
// 生成数值范围
const generateRange = (min, max, step = 0.1) => {
const range = []
for (let i = min; i <= max; i += step) {
if(step < 0.1){
if (step < 0.1) {
range.push(parseFloat(i.toFixed(2)))
}else{
} else {
range.push(parseFloat(i.toFixed(1)))
}
}
......@@ -289,7 +291,7 @@ const onDateChange = (date) => {
const showFeedingPopup = () => {
console.log('显示喂养方式弹窗')
showFeedSwitchPopup.value = true
currentFeedIndex.value = 1;//默认选中"母乳+奶粉混合喂养"
currentFeedIndex.value = 1 // 默认选中"母乳+奶粉混合喂养"
}
// 身高范围 (40-80cm)
......@@ -327,7 +329,7 @@ const onHeadChange = (e) => {
const changeBaby = () => {
console.log('切换宝宝')
showBabySwitchPopup.value = true
currentBabyIndex.value = 0;//默认选中第一个宝宝
currentBabyIndex.value = 0 // 默认选中第一个宝宝
}
const viewRecords = () => {
......@@ -389,9 +391,9 @@ const isHeightTipActive = ref(false)
// 处理身高提示点击
const toggleHeightTip = () => {
if(!canClick(0)) return;
if (!canClick(0)) return
pushCount(0);
pushCount(0)
isHeightTipActive.value = !isHeightTipActive.value
console.log('身高提示状态:', isHeightTipActive.value)
}
......@@ -401,9 +403,9 @@ const isWeightTipActive = ref(false)
// 处理体重提示点击
const toggleWeightTip = () => {
if(!canClick(1)) return;
if (!canClick(1)) return
pushCount(1);
pushCount(1)
isWeightTipActive.value = !isWeightTipActive.value
console.log('体重提示状态:', isWeightTipActive.value)
}
......@@ -413,30 +415,31 @@ const isHeadTipActive = ref(false)
// 处理头围提示点击
const toggleHeadTip = () => {
if(!canClick(2)) return;
if (!canClick(2)) return
pushCount(2);
pushCount(2)
isHeadTipActive.value = !isHeadTipActive.value
console.log('头围提示状态:', isHeadTipActive.value)
}
const selectCountArr = ref([])
//数组内存在当前索引可以点击，如果不存在，在判断是不是已经选择两个了，如果已经选择两个，则不能点击
const canClick = (val)=>{
if(selectCountArr.value.indexOf(val) == -1){
if(selectCountArr.value.length >= 2){
// 数组内存在当前索引可以点击，如果不存在，在判断是不是已经选择两个了，如果已经选择两个，则不能点击
const canClick = (val) => {
if (selectCountArr.value.indexOf(val) == -1) {
if (selectCountArr.value.length >= 2) {
return false
}
return true
}else{
return true;
} else {
return true
}
}
const pushCount = (val)=>{
if(selectCountArr.value.indexOf(val) == -1){
const pushCount = (val) => {
if (selectCountArr.value.indexOf(val) == -1) {
selectCountArr.value.push(val)
}else{
} else {
selectCountArr.value.splice(selectCountArr.value.indexOf(val), 1)
}
}
......@@ -449,40 +452,51 @@ const onClickTips = () => {
showBabyTestTipsPopup.value = true
}
const guideIndex = ref(-1);
const guideHandler = () => {
guideIndex.value++
if (guideIndex.value > 2) {
guideIndex.value = -1;
}
}
onMounted(() => {
})
</script>
<style lang="less" scoped>
.shengzhang-tools-container{
.shengzhang-tools-container {
width: 100%;
height: 100vh;
overflow: hidden;
background-color: #fdf6eb;
.banner-swiper{
.banner-swiper {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 191rpx;
width: 687rpx;
height: 176rpx;
.banner-img{
.banner-img {
width: 100%;
height: 100%;
border-radius: 16rpx;
}
}
.btnback{
.btnback {
position: absolute;
top: 119rpx;
left: 30rpx;
width: 29rpx;
height: 29rpx;
}
.title{
.title {
position: absolute;
top: 111rpx;
left: 50%;
......@@ -491,6 +505,7 @@ onMounted(() => {
color: #000;
font-weight: 600;
}
.info-container {
width: 750rpx;
height: 1210rpx;
......@@ -593,16 +608,16 @@ onMounted(() => {
}
.test-info-section {
// margin-bottom: 30rpx;
.test-date-row{
.test-date-row {
display: flex;
align-items: center;
justify-content: space-between;
.label {
font-size: 28rpx;
color: #333;
}
.date-container {
display: flex;
align-items: center;
......@@ -619,6 +634,7 @@ onMounted(() => {
}
}
}
.feeding-row {
display: flex;
align-items: center;
......@@ -630,7 +646,6 @@ onMounted(() => {
color: #333;
}
.feeding-select {
display: flex;
align-items: center;
......@@ -646,12 +661,13 @@ onMounted(() => {
height: 20rpx;
}
}
}
}
.measurement-section {
margin-bottom: 40rpx;
margin-top: 80rpx;
.measurement-header {
display: flex;
......@@ -671,7 +687,6 @@ onMounted(() => {
.input-section {
display: flex;
// margin: 25rpx 25rpx 0rpx 25rpx;
.input-item {
flex: 1;
......@@ -694,9 +709,10 @@ onMounted(() => {
.measurement-picker {
position: relative;
z-index: 2;
width:70rpx;
height: 400rpx;
width: 70rpx;
height: 370rpx;
background: transparent;
:deep(.date-picker::before) {
content: none;
}
......@@ -740,7 +756,6 @@ onMounted(() => {
.tip-item0 {
flex: 1;
text-align: center;
// cursor: pointer;
&:hover {
opacity: 0.8;
......@@ -756,10 +771,10 @@ onMounted(() => {
}
}
}
.tip-item1 {
flex: 1;
text-align: center;
// cursor: pointer;
&:hover {
opacity: 0.8;
......@@ -775,10 +790,10 @@ onMounted(() => {
}
}
}
.tip-item2 {
flex: 1;
text-align: center;
// cursor: pointer;
&:hover {
opacity: 0.8;
......@@ -795,11 +810,10 @@ onMounted(() => {
}
}
}
}
.submit-section {
margin-top: 40rpx;
margin-top: 80rpx;
.submit-btn {
position: relative;
......@@ -835,15 +849,38 @@ onMounted(() => {
width: 424rpx;
height: 23rpx;
}
}
}
}
// .tip-desc {
// font-size: 24rpx;
// color: #999;
// }
.guide-container{
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
<!-- 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