Skip to content

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

提示弹窗,日期选择页面

parent 7f6392f8
Hide whitespace changes
Inline Side-by-side
Showing with 199 additions and 85 deletions
components/BabyTestTipsPopup.vue 0 → 100644
View file @ eee8bd81
<template>
<view v-if="visible" class="popup-overlay">
<view class="popup-content" @click.stop>
<!-- 问号图标 -->
<view class="question-icon">
<image class="icon" src="/static/shengzhangTool/tipsPopIcon.png" mode="aspectFit"></image>
</view>
<!-- 提示内容区域 -->
<view class="tips-content">
<rich-text class="rich-content" :nodes="tipsContent"></rich-text>
</view>
<!-- 底部按钮 -->
<view class="bottom-buttons">
<image
class="ok-btn"
:class="{'ok-btn-active': isOkPressed}"
src="/static/shengzhangTool/tipsOkBtn.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
}
})
const emit = defineEmits(['update:visible'])
// 按钮状态
const isOkPressed = ref(false)
// 富文本内容
const tipsContent = ref(`
<div style="padding: 20rpx; line-height: 1.6;">
<div style="font-size: 32rpx; font-weight: bold; color: #d3a358;">头围测量</div>
<div style="font-size: 28rpx; font-weight: 300; color: #000000;">将软尺固定于小儿眉毛上缘，软尺紧贴头皮绕过后脑最高点即为头围的长度。</div>
<br>
<div style="font-size: 32rpx; font-weight: bold; color: #d3a358;">身高测量</div>
<div style="font-size: 28rpx; font-weight: 300; color: #000000;">3岁以下的小儿躺着测身长，让小儿躺在桌上或木板床上，按直小儿的双膝，使两下肢伸直，用软尺量取头顶到脚底(注意不是足尖)的长度，3岁以上的小儿可站着测身高。</div>
<br>
<div style="font-size: 32rpx; font-weight: bold; color: #d3a358;">体重测量</div>
<div style="font-size: 28rpx; font-weight: 300; color: #000000;">1）先用小被单将孩子兜住，用称称重，然后减去小被单及包括尿布在内的一切衣物重量，即为婴儿体重；</div>
<div style="font-size: 28rpx; font-weight: 300; color: #000000;">2）家长抱着婴儿站在磅秤上称体重，减去大人的体重，即为婴儿体重。</div>
<div style="font-size: 28rpx; font-weight: 300; color: #000000;">3）测量前最好空腹，排去大小便，或两小时内没有进食，尽量脱去衣裤、鞋帽、尿布等，仅穿单衣裤；所测得的数据应减去婴儿所穿的衣物及尿布的重量。</div>
</div>
`)
// 确认按钮事件
const handleOkTouchStart = () => {
isOkPressed.value = true
}
const handleOkTouchEnd = () => {
isOkPressed.value = false
closePopup()
}
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: 661rpx;
height: 883rpx;
background-color: #ffffff;
overflow: hidden;
border-radius: 52rpx;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
.question-icon {
display: flex;
justify-content: center;
align-items: center;
margin-top: 40rpx;
.icon {
width: 80rpx;
height: 80rpx;
}
}
.tips-content {
margin-top: 20rpx;
flex: 1;
padding-left: 30rpx;
padding-right: 30rpx;
overflow-y: auto;
.rich-content {
width: 100%;
height: 100%;
/deep/ div {
margin-bottom: 20rpx;
}
/deep/ br {
display: block;
margin: 10rpx 0;
}
}
}
.bottom-buttons {
display: flex;
justify-content: center;
align-items: center;
padding: 0 40rpx 40rpx;
margin-top: 30rpx;
.ok-btn {
width: 500rpx;
height: 97rpx;
transition: transform 0.1s ease-out;
&.ok-btn-active {
transform: scale(0.95);
}
}
}
}
}
</style>
\ No newline at end of file
components/DatePickerPopup.vue
View file @ eee8bd81
...@@ -9,15 +9,15 @@ ...@@ -9,15 +9,15 @@
</view> </view>
</view> </view>
<!-- 日期选择器区域 --> <view class="date-picker-container">
<view class="date-picker-section">
<view class="date-picker-container">
<!-- 日期选择器 --> <!-- 日期选择器 -->
<picker-view <picker-view
class="date-picker" class="date-picker"
:value="datePickerValue" :value="datePickerValue"
@change="onDateChange" @change="onDateChange"
:indicator-style="indicatorStyle" :indicator-style="indicatorStyle"
indicator-class="date-picker"
mask-style="opacity: 0.5; border: none;"
> >
<!-- 年份选择 --> <!-- 年份选择 -->
<picker-view-column> <picker-view-column>
...@@ -44,28 +44,7 @@ ...@@ -44,28 +44,7 @@
</picker-view-column> </picker-view-column>
</picker-view> </picker-view>
</view> </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>
</view> </view>
</template> </template>
...@@ -92,6 +71,7 @@ const isOkPressed = ref(false) ...@@ -92,6 +71,7 @@ const isOkPressed = ref(false)
// 日期选择器样式 // 日期选择器样式
const indicatorStyle = `height: 40px; border: none;` const indicatorStyle = `height: 40px; border: none;`
// const maskStyle = `background: rgba(246, 248, 250, 0.8); `
// 当前选择的日期 // 当前选择的日期
const currentDate = ref(new Date(props.selectedDate)) const currentDate = ref(new Date(props.selectedDate))
...@@ -206,13 +186,13 @@ const closePopup = () => { ...@@ -206,13 +186,13 @@ const closePopup = () => {
.popup-content { .popup-content {
position: absolute; position: absolute;
width: 750rpx; width: 750rpx;
height: 897rpx; height: 564rpx;
background-color: #f6f8fa; background-color: #f6f8fa;
overflow: hidden; overflow: hidden;
border-top-left-radius: 32rpx; border-top-left-radius: 32rpx;
border-top-right-radius: 32rpx; border-top-right-radius: 32rpx;
bottom: 0rpx; bottom: 0rpx;
padding-top: 50rpx; padding-top: 40rpx;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
...@@ -220,12 +200,12 @@ const closePopup = () => { ...@@ -220,12 +200,12 @@ const closePopup = () => {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 30rpx; margin-right: 30rpx;
border-bottom: 1rpx solid #e0e0e0; margin-left: 30rpx;
.title { .title {
font-size: 36rpx; font-size: 36rpx;
font-weight: bold; font-weight: 400;
color: #1d1e26; color: #1d1e26;
} }
...@@ -243,34 +223,26 @@ const closePopup = () => { ...@@ -243,34 +223,26 @@ const closePopup = () => {
} }
} }
.date-picker-section { .date-picker-container {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 20rpx 30rpx;
.date-picker-container {
position: relative; position: relative;
width: 100%; width: 100%;
height: 500rpx; margin-top: 100rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.date-picker { .date-picker {
position: relative; position: relative;
z-index: 2; z-index: 2;
width: 600rpx; width: 100%;
height: 300rpx; height: 250rpx;
background-color: #f6f8fa; background: transparent;
:deep(.date-picker::before) {
.picker-column{ content: none;
background-color: #f6f8fa;
} }
:deep(.date-picker::after) {
content: none;
}
.picker-item { .picker-item {
background-color: #f6f8fa;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
...@@ -292,36 +264,6 @@ const closePopup = () => { ...@@ -292,36 +264,6 @@ const closePopup = () => {
} }
} }
} }
}
.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);
}
}
}
} }
} }
</style> </style>
\ No newline at end of file
pages/shengzhangTools/shengzhangTools.vue
View file @ eee8bd81
...@@ -96,6 +96,7 @@ ...@@ -96,6 +96,7 @@
:value="heightPickerValue" :value="heightPickerValue"
@change="isHeightTipActive ? null : onHeightChange" @change="isHeightTipActive ? null : onHeightChange"
:indicator-style="indicatorStyle" :indicator-style="indicatorStyle"
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">
...@@ -115,6 +116,7 @@ ...@@ -115,6 +116,7 @@
:value="weightPickerValue" :value="weightPickerValue"
@change="isWeightTipActive ? null : onWeightChange" @change="isWeightTipActive ? null : onWeightChange"
:indicator-style="indicatorStyle" :indicator-style="indicatorStyle"
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">
...@@ -134,6 +136,7 @@ ...@@ -134,6 +136,7 @@
:value="headPickerValue" :value="headPickerValue"
@change="isHeadTipActive ? null : onHeadChange" @change="isHeadTipActive ? null : onHeadChange"
:indicator-style="indicatorStyle" :indicator-style="indicatorStyle"
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">
...@@ -166,7 +169,7 @@ ...@@ -166,7 +169,7 @@
<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"> <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>
...@@ -196,6 +199,11 @@ ...@@ -196,6 +199,11 @@
v-model:selectedDate="selectedDate" v-model:selectedDate="selectedDate"
@change="onDateChange" @change="onDateChange"
/> />
<!-- 宝宝测评提示弹窗 -->
<BabyTestTipsPopup
v-model:visible="showBabyTestTipsPopup"
/>
</template> </template>
<script setup> <script setup>
...@@ -203,6 +211,7 @@ import { onMounted, ref } from 'vue'; ...@@ -203,6 +211,7 @@ 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'
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'}]);
...@@ -432,6 +441,14 @@ const pushCount = (val)=>{ ...@@ -432,6 +441,14 @@ const pushCount = (val)=>{
} }
} }
// 宝宝测评提示弹窗状态
const showBabyTestTipsPopup = ref(false)
const onClickTips = () => {
console.log('显示宝宝测评提示弹窗')
showBabyTestTipsPopup.value = true
}
onMounted(() => { onMounted(() => {
}) })
...@@ -680,6 +697,13 @@ onMounted(() => { ...@@ -680,6 +697,13 @@ onMounted(() => {
width:70rpx; width:70rpx;
height: 400rpx; height: 400rpx;
background: transparent; background: transparent;
:deep(.date-picker::before) {
content: none;
}
:deep(.date-picker::after) {
content: none;
}
&.measurement-picker-disabled { &.measurement-picker-disabled {
opacity: 0.4; opacity: 0.4;
......
views/Integral.vue
View file @ eee8bd81
...@@ -1472,11 +1472,6 @@ ...@@ -1472,11 +1472,6 @@
//banner点击事件 //banner点击事件
const bannerHandler = (item) => { const bannerHandler = (item) => {
jump({
type: JumpType.INNER,
url: '/pages/shengzhangTools/shengzhangTools'
})
return;
md.sensorLogTake({ md.sensorLogTake({
xcxClick: "积分服务页-首屏页面点击", xcxClick: "积分服务页-首屏页面点击",
......
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