Skip to content

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

生长曲线

parent 1c351926
Hide whitespace changes
Inline Side-by-side
Showing with 841 additions and 4 deletions
.DS_Store
View file @ b32f68f9
No preview for this file type
components/BabySwitchPopup.vue 0 → 100644
View file @ b32f68f9
<template>
<view v-if="visible" class="popup-overlay" @click="closePopup">
<view class="popup-content" @click.stop>
<!-- 弹窗头部 -->
<view class="popup-header">
<text class="popup-title">切换宝宝</text>
<image
class="close-btn"
src="/static/shengzhangTool/close.png"
mode="aspectFit"
@click="closePopup"
/>
</view>
<!-- 宝宝列表 -->
<view class="baby-list">
<view
v-for="(baby, index) in babyList"
:key="index"
class="baby-item"
:class="{ selected: selectedIndex === index }"
@click="selectBaby(index)"
>
<!-- 选中背景 -->
<image
v-if="selectedIndex === index"
class="baby-item-bg"
src="/static/shengzhangTool/babyItemBg.png"
mode="aspectFit"
/>
<!-- 宝宝头像 -->
<image
class="baby-avatar"
:src="baby.avatar || '/static/shengzhangTool/avatar.png'"
mode="aspectFill"
/>
<!-- 宝宝信息 -->
<view class="baby-info">
<view class="baby-name-row">
<text class="baby-name">{{ baby.name }}</text>
<image
class="gender-icon"
:src="baby.gender === 1 ? '/static/shengzhangTool/sex1.png' : '/static/shengzhangTool/sex0.png'"
mode="aspectFit"
/>
</view>
<text class="baby-birthday">宝宝生日: {{ baby.birthday }}</text>
</view>
</view>
</view>
</view>
</view>
</template>
<script setup>
import { defineEmits, defineProps } from 'vue'
const props = defineProps({
visible: {
type: Boolean,
default: false
},
babyList: {
type: Array,
default: () => []
},
selectedIndex: {
type: Number,
default: 0
}
})
const emit = defineEmits(['update:visible', 'update:selectedIndex', 'change'])
const closePopup = () => {
emit('update:visible', false)
}
const selectBaby = (index) => {
emit('update:selectedIndex', index)
emit('change', props.babyList[index], index)
closePopup()
}
</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;
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;
}
}
.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 {
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;
}
}
}
</style>
\ No newline at end of file
pages.json
View file @ b32f68f9
......@@ -78,6 +78,12 @@
"enablePullDownRefresh" : false,
"navigationStyle": "custom"
}
},
{
"path": "pages/shengzhangTools/shengzhangTools",
"style": {
"navigationStyle": "custom"
}
}
],
"globalStyle": {
......
pages/shengzhangTools/shengzhangTools.vue
View file @ b32f68f9
......@@ -12,28 +12,651 @@
<swiper-item v-for="(item, index) in swiperData" :key="index">
<image
class="banner-img"
:src="$baseUrl + `integral/${tupianBanben}/${item?.bannerImg}`"
:src="`${item?.bannerImg}`"
mode="aspectFill"
@click="bannerHandler(item)"
/>
</swiper-item>
</swiper>
<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">
<image class="avatar-img" src="/static/shengzhangTool/avatar.png" mode="aspectFill"></image>
</view>
<view class="baby-details">
<view class="baby-name-row">
<text class="baby-name">宝宝名称</text>
<image class="change-baby-btn" @click="changeBaby" src="/static/shengzhangTool/changeBaby.png" mode="aspectFit"></image>
</view>
<view class="baby-info-row">
<view class="gender-age">
<image class="gender-icon" src="/static/shengzhangTool/sex1.png" mode="aspectFit"></image>
<text class="age-text">8月龄</text>
</view>
<text class="birth-date">2024-10-20</text>
</view>
</view>
<view class="record-btn" @click="viewRecords">
<text class="record-text">测评记录</text>
<image class="arrow-icon" src="/static/shengzhangTool/close.png" mode="aspectFit"></image>
</view>
</view>
<!-- 分割线 -->
<image class="divider-line" src="/static/shengzhangTool/line.png" mode="aspectFit"></image>
<!-- 测评信息区域 -->
<view class="test-info-section">
<view class="test-date-row">
<text class="label">本次测评日期</text>
<view class="date-container">
<text class="date-value">2025-06-06</text>
<image class="edit-icon" src="/static/shengzhangTool/editIcon.png" mode="aspectFit"></image>
</view>
</view>
<!-- 分割线 -->
<image class="divider-line" src="/static/shengzhangTool/line.png" mode="aspectFit"></image>
<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>
</view>
</view>
<!-- 测量数据区域 -->
<view class="measurement-section">
<view class="measurement-header">
<view class="measurement-item">
<text class="measurement-title">宝宝身高</text>
</view>
<view class="measurement-item">
<text class="measurement-title">宝宝体重</text>
</view>
<view class="measurement-item">
<text class="measurement-title">宝宝头围</text>
</view>
</view>
<!-- 替换输入框区域为picker-view -->
<view class="input-section">
<view class="input-item">
<view class="input-container">
<image class="input-bg" src="/static/shengzhangTool/numBg.png" mode="aspectFit"></image>
<picker-view
class="measurement-picker"
:value="heightPickerValue"
@change="onHeightChange"
:indicator-style="indicatorStyle"
>
<picker-view-column>
<view v-for="(item, index) in heightRange" :key="index" class="picker-item">
{{ item }}
</view>
</picker-view-column>
</picker-view>
<text class="unit">cm</text>
</view>
</view>
<view class="input-item">
<view class="input-container">
<image class="input-bg" src="/static/shengzhangTool/numBg.png" mode="aspectFit"></image>
<picker-view
class="measurement-picker"
:value="weightPickerValue"
@change="onWeightChange"
:indicator-style="indicatorStyle"
>
<picker-view-column>
<view v-for="(item, index) in weightRange" :key="index" class="picker-item">
{{ item }}
</view>
</picker-view-column>
</picker-view>
<text class="unit">kg</text>
</view>
</view>
<view class="input-item">
<view class="input-container">
<image class="input-bg" src="/static/shengzhangTool/numBg.png" mode="aspectFit"></image>
<picker-view
class="measurement-picker"
:value="headPickerValue"
@change="onHeadChange"
:indicator-style="indicatorStyle"
>
<picker-view-column>
<view v-for="(item, index) in headRange" :key="index" class="picker-item">
{{ item }}
</view>
</picker-view-column>
</picker-view>
<text class="unit">cm</text>
</view>
</view>
</view>
<!-- 底部提示 -->
<view class="tips-section">
<view class="tip-item">
<text class="tip-text">暂无数据</text>
</view>
<view class="tip-item">
<text class="tip-text">暂无数据</text>
</view>
<view class="tip-item">
<text class="tip-text">暂无数据</text>
</view>
</view>
</view>
<!-- 提交按钮 -->
<view class="submit-section">
<view class="submit-btn" @click="submitData">
<image class="submit-bg" src="/static/shengzhangTool/submitBtn.png" mode="aspectFit"></image>
<!-- <text class="submit-text">确认提交</text> -->
</view>
<view class="bottom-tip">
<image class="tip-icon" src="/static/shengzhangTool/tips.png" mode="aspectFit"></image>
<!-- <text class="tip-desc">如何选择你的宝宝身高、体重、头围</text> -->
</view>
</view>
</view>
</view>
<!-- 在页面底部添加弹窗组件 -->
<BabySwitchPopup
v-model:visible="showBabySwitchPopup"
:babyList="babyList"
v-model:selectedIndex="currentBabyIndex"
@change="onBabyChange"
/>
</template>
<script setup>
import { onMounted } from 'vue';
import { onMounted, ref } from 'vue';
import BabySwitchPopup from '@/components/BabySwitchPopup.vue'
const swiperData = ref([{bannerImg: '/static/shengzhangTool/banner1.png'}, {bannerImg: '/static/shengzhangTool/banner2.png'}, {bannerImg: '/static/shengzhangTool/banner3.png'}]);
const bannerHandler = (item) => {
console.log(item);
}
// 首页组件逻辑
const backHandler = () => {
try {
uni.navigateBack({
success: () => {
console.log('返回成功');
},
fail: backFailHandler
});
} catch (error) {
console.log('error=',error);
jump({
type: JumpType.INNER,
url: "/pages/index/index"
})
}
}
const backFailHandler = (err) => {
console.log('backFailHandler=',err);
jump({
type: JumpType.INNER,
url: "/pages/index/index"
})
}
// 替换原有的变量
const height = ref('50.3')
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 generateRange = (min, max, step = 0.1) => {
const range = []
for (let i = min; i <= max; i += step) {
if(step < 0.1){
range.push(parseFloat(i.toFixed(2)))
}else{
range.push(parseFloat(i.toFixed(1)))
}
}
return range
}
// 身高范围 (40-80cm)
const heightRange = generateRange(40, 80, 0.1)
const heightPickerValue = ref([heightRange.indexOf(parseFloat(height.value))])
// 体重范围 (2-10kg)
const weightRange = generateRange(2, 10, 0.01)
const weightPickerValue = ref([weightRange.indexOf(parseFloat(weight.value))])
const swiperData = ref(['', '', '']);
// 头围范围 (30-50cm)
const headRange = generateRange(30, 50, 0.1)
const headPickerValue = ref([headRange.indexOf(parseFloat(headCircumference.value))])
// picker-view change事件处理
const onHeightChange = (e) => {
const index = e.detail.value[0]
height.value = heightRange[index].toString()
heightPickerValue.value = [index]
}
const onWeightChange = (e) => {
const index = e.detail.value[0]
weight.value = weightRange[index].toString()
weightPickerValue.value = [index]
}
const onHeadChange = (e) => {
const index = e.detail.value[0]
headCircumference.value = headRange[index].toString()
headPickerValue.value = [index]
}
// 其他方法保持不变
const changeBaby = () => {
console.log('切换宝宝')
showBabySwitchPopup.value = true
}
const viewRecords = () => {
console.log('查看测评记录')
}
const submitData = () => {
console.log('提交数据', {
height: height.value,
weight: weight.value,
headCircumference: headCircumference.value
})
}
// 添加以下数据
const showBabySwitchPopup = ref(false)
const currentBabyIndex = ref(0)
// 示例宝宝列表数据
const babyList = ref([
{
name: '宝宝名称',
gender: 1, // 1: 男孩, 0: 女孩
birthday: '2024-10-20',
avatar: '/static/shengzhangTool/avatar.png'
},
{
name: '宝宝名称',
gender: 0,
birthday: '2022-04-20',
avatar: '/static/shengzhangTool/avatar.png'
}
])
// 处理宝宝选择变化
const onBabyChange = (baby, index) => {
console.log('选择了宝宝:', baby, index)
// 这里可以更新页面上的宝宝信息
// 比如更新宝宝名称、性别、生日等
}
onMounted(() => {
getSwiperData();
})
</script>
<style lang="less" scoped>
.shengzhang-tools-container{
width: 100%;
height: 100vh;
overflow: hidden;
background-color: #fdf6eb;
.banner-swiper{
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 191rpx;
width: 687rpx;
height: 176rpx;
.banner-img{
width: 100%;
height: 100%;
border-radius: 16rpx;
}
}
.btnback{
position: absolute;
top: 119rpx;
left: 30rpx;
width: 29rpx;
height: 29rpx;
}
.title{
position: absolute;
top: 111rpx;
left: 50%;
transform: translateX(-50%);
font-size: 34rpx;
color: #000;
font-weight: 600;
}
.info-container {
width: 750rpx;
height: 1210rpx;
margin: 414rpx auto 0;
background-color: #ffffff;
border-top-left-radius: 32rpx;
border-top-right-radius: 32rpx;
padding: 40rpx 30rpx;
box-sizing: border-box;
overflow: hidden;
.baby-info-section {
display: flex;
align-items: center;
padding: 0 10rpx;
.baby-avatar {
width: 80rpx;
height: 80rpx;
border-radius: 50%;
overflow: hidden;
margin-right: 20rpx;
.avatar-img {
width: 100%;
height: 100%;
}
}
.baby-details {
flex: 1;
.baby-name-row {
display: flex;
align-items: center;
margin-bottom: 8rpx;
.baby-name {
font-size: 32rpx;
font-weight: bold;
color: #333;
margin-right: 20rpx;
}
.change-baby-btn {
width: 139rpx;
height: 37rpx;
}
}
.baby-info-row {
display: flex;
align-items: center;
.gender-age {
display: flex;
align-items: center;
margin-right: 30rpx;
.gender-icon {
width: 24rpx;
height: 24rpx;
margin-right: 8rpx;
}
.age-text {
font-size: 26rpx;
color: #666;
}
}
.birth-date {
font-size: 26rpx;
color: #666;
}
}
}
.record-btn {
display: flex;
align-items: center;
.record-text {
font-size: 26rpx;
color: #666;
margin-right: 8rpx;
}
.arrow-icon {
width: 20rpx;
height: 20rpx;
}
}
}
.divider-line {
width: 100%;
height: 2rpx;
margin: 20rpx 0;
}
.test-info-section {
// margin-bottom: 30rpx;
.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;
.date-value {
font-size: 28rpx;
color: #666;
margin-right: 10rpx;
}
.edit-icon {
width: 24rpx;
height: 24rpx;
}
}
}
.feeding-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 25rpx;
.label {
font-size: 28rpx;
color: #333;
}
.feeding-select {
display: flex;
align-items: center;
.feeding-value {
font-size: 28rpx;
color: #666;
margin-right: 8rpx;
}
.dropdown-icon {
width: 20rpx;
height: 20rpx;
}
}
}
}
.measurement-section {
margin-bottom: 40rpx;
.measurement-header {
display: flex;
margin-bottom: 25rpx;
.measurement-item {
flex: 1;
text-align: center;
.measurement-title {
font-size: 28rpx;
color: #333;
font-weight: bold;
}
}
}
.input-section {
display: flex;
// margin: 25rpx 25rpx 0rpx 25rpx;
.input-item {
flex: 1;
display: flex;
justify-content: center;
.input-container {
position: relative;
display: flex;
align-items: center;
justify-content: center;
.input-bg {
position: absolute;
width: 105rpx;
height: 44rpx;
z-index: 1;
}
.measurement-picker {
position: relative;
z-index: 2;
width:70rpx;
height: 400rpx;
background: transparent;
.picker-item {
display: flex;
align-items: center;
justify-content: center;
font-size: 28rpx;
color: #333;
font-weight: bold;
height: 40rpx;
line-height: 40rpx;
}
}
.unit {
position: absolute;
z-index: 2;
font-size: 24rpx;
color: #666;
margin-left: 162rpx;
font-weight: 600;
}
}
}
}
.tips-section {
display: flex;
.tip-item {
flex: 1;
text-align: center;
.tip-text {
font-size: 24rpx;
color: #1d1e26;
text-decoration: underline;
}
}
}
}
.submit-section {
margin-top: 40rpx;
.submit-btn {
position: relative;
width: 100%;
height: 90rpx;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20rpx;
.submit-bg {
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
}
.submit-text {
position: relative;
z-index: 2;
font-size: 32rpx;
color: #fff;
font-weight: bold;
}
}
.bottom-tip {
display: flex;
align-items: center;
justify-content: center;
.tip-icon {
width: 424rpx;
height: 23rpx;
}
// .tip-desc {
// font-size: 24rpx;
// color: #999;
// }
}
}
}
}
</style>
<!-- picker-view -->
\ No newline at end of file
views/Integral.vue
View file @ b32f68f9
......@@ -1472,6 +1472,12 @@
//banner点击事件
const bannerHandler = (item) => {
jump({
type: JumpType.INNER,
url: '/pages/shengzhangTools/shengzhangTools'
})
return;
md.sensorLogTake({
xcxClick: "积分服务页-首屏页面点击",
pageName: "积分服务页-首屏",
......
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