Commit cf40d44c authored by weishengfei's avatar weishengfei

我的日历页面开发

parent bf5f2b5b
......@@ -107,6 +107,16 @@
"enablePullDownRefresh" : false,
"navigationStyle": "custom"
}
},
// 产检日历
{
"path" : "pages/productionCalendar/productionCalendar",
"style" :
{
"navigationBarTitleText" : "",
"enablePullDownRefresh" : false,
"navigationStyle": "custom"
}
}
],
"globalStyle": {
......
<template>
<view class="container">
<view class="content">
跳转产检提醒
</view>
<Home v-if="globalStore.curTabIndex == 0 && !globalStore.isWxFriendCircle" :scroll-top="scrollTop"/>
<Brand v-if="globalStore.curTabIndex == 1 && !globalStore.isWxFriendCircle" :scroll-top="scrollTop"/>
<Integral v-if="globalStore.curTabIndex == 2 && !globalStore.isWxFriendCircle" :scrollTop="scrollTop"/>
......
......@@ -394,15 +394,22 @@
uni.navigateTo({
url:'/pages/myReportCard/myReportCard'
})
break;
break;
case 3:
uni.navigateTo({
url:'/pages/productionCalendar/productionCalendar'
})
break;
default:
break;
}
}
// 提醒关闭
const close = () => {
showPicker.value = false;
}
// 选择器变化事件
const handleChange = (e) => {
pickerValue.value = e.detail.value;
......
<template>
<view class="production-calendar">
<view class="page-top">
<view class="header-content">
<image @tap="backHandler" class="btnback" src="/static/chanjianTool/back.png"></image>
<view class="page_title">
<view class="info-l">
<image :src="info.head"></image>
</view>
<view class="info-r">
<view class="info-r-t">
{{info.name}}
<image src="/static/chanjianTool/icon22.png"></image>
</view>
<view class="info-r-b">
怀孕{{info.week}}
</view>
</view>
</view>
</view>
</view>
<!-- 显示区域 -->
<view class="production-calendar-con">
<view class="calendar-box">
11111
</view>
<view class="con-list">
<view class="con-list-item" v-for="(item, index) in info.listData ">
<view class="item-time">
<view class="">
{{item.num}}次产检
</view>
<view class="">
产检时间:{{item.time}}
</view>
</view>
<view class="item-line">
</view>
<view class="item-week">
孕期{{item.week}}
</view>
<view class="item-proect">
重点:{{getProject(item.project)}}
</view>
</view>
</view>
</view>
<!-- 新增产检 -->
<button class="form-btn" @click="onAdd">
<image src="/static/chanjianTool/icon23.png"></image>
新增产检
</button>
</view>
</template>
<script setup>
import {
ref
} from 'vue';
// 用户信息
const info = ref({
name: '好宝宝的妈妈',
head: 'https://course.feihe.com/momclub-picture/homepage/children/children_1.png',
week: '8',
listData:[
{
isAdd: 0, // 1 是 0 否
id: 2,
time: '2025-05-11',
num: '二', // 产检次数
week: '5-6', // 周数
status: '2', //待产检、已过期、已产检,
// 产检项目
project: [{
name: '测量胎儿颈部透明层厚度(NT)',
id: 1
},
{
name: '无创产前基因检测(NIPT)(非必查)',
id: 2
}
]
},
{
isAdd: 0, // 1 是 0 否
id: 2,
time: '2025-05-11',
num: '二', // 产检次数
week: '5-6', // 周数
status: '2', //待产检、已过期、已产检,
// 产检项目
project: [{
name: '测量胎儿颈部透明层厚度(NT)',
id: 1
},
{
name: '无创产前基因检测(NIPT)(非必查)',
id: 2
}
]
},
{
isAdd: 0, // 1 是 0 否
id: 2,
time: '2025-05-11',
num: '二', // 产检次数
week: '5-6', // 周数
status: '2', //待产检、已过期、已产检,
// 产检项目
project: [{
name: '测量胎儿颈部透明层厚度(NT)',
id: 1
},
{
name: '无创产前基因检测(NIPT)(非必查)',
id: 2
}
]
},
{
isAdd: 0, // 1 是 0 否
id: 2,
time: '2025-05-11',
num: '二', // 产检次数
week: '5-6', // 周数
status: '2', //待产检、已过期、已产检,
// 产检项目
project: [{
name: '测量胎儿颈部透明层厚度(NT)',
id: 1
},
{
name: '无创产前基因检测(NIPT)(非必查)',
id: 2
}
]
},
{
isAdd: 0, // 1 是 0 否
id: 2,
time: '2025-05-11',
num: '二', // 产检次数
week: '5-6', // 周数
status: '2', //待产检、已过期、已产检,
// 产检项目
project: [{
name: '测量胎儿颈部透明层厚度(NT)',
id: 1
},
{
name: '无创产前基因检测(NIPT)(非必查)',
id: 2
}
]
}
]
})
// 返回
const backHandler = () => {
uni.navigateBack()
}
// 跳转新增产检页面
const onAdd = () => {
uni.navigateTo({
url: '/pages/addPostnatal/addPostnatal'
})
}
// 拼接检查项目名称
const getProject = (projects) => {
return projects.map(project => project.name).join('、');
}
</script>
<style lang="less" scoped>
.production-calendar {
width: 100%;
height: 100vh;
background-size: 100% 100%;
// background-color: #fdf6eb;
&-con {
position: absolute;
top: 177rpx;
// left: 31rpx;
width: 100%;
box-sizing: border-box;
.calendar-box{
width: 100%;
background-color: #fdf6eb;
height: 473rpx;
padding: 55rpx 0 0 0;
box-sizing: border-box;
}
.con-list{
position: absolute;
left: 0;
top: 456rpx;
height: calc(100vh - 839rpx);
background: #fff;
border-radius: 24rpx;
padding: 30rpx;
overflow-y: auto;
.con-list-item{
width: 689rpx;
height: 221rpx;
border-radius: 24rpx;
background: #f7f8fa;
padding: 40rpx 63rpx 40rpx 35rpx;
box-sizing: border-box;
margin-bottom: 25rpx;
.item-time{
display: flex;
align-items: center;
justify-content: space-between;
font-size: 24rpx;
font-weight: bold;
color: #1d1e25;
}
.item-line{
width: 100%;
height: 1rpx;
background-color: #e6e6e8;
margin: 20rpx 0;
}
.item-week{
color: #b27c1e;
font-size: 38rpx;
}
.item-proect{
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-top: 12rpx;
color: #6f6d67;
font-size: 23rpx;
}
}
}
}
// 自定义头部
.page-top {
width: 100%;
background-color: #fdf6eb;
padding: 90rpx 0 0 10rpx;
}
.header-content {
display: flex;
align-items: center;
}
.btnback {
width: 16rpx;
height: 29rpx;
margin-left: 35rpx;
}
.page_title {
color: #1d1e25;
margin-left: 70rpx;
display: flex;
align-items: center;
.info-l {
width: 87rpx;
height: 88rpx;
border-radius: 50%;
overflow: hidden;
image {
width: 100%;
height: 100%;
}
}
.info-r {
display: flex;
flex-direction: column;
margin-left: 11rpx;
.info-r-t {
display: flex;
align-items: center;
font-size: 30rpx;
font-weight: bold;
image {
width: 18rpx;
height: 12rpx;
margin-left: 10rpx;
}
}
.info-r-b {
margin-top: 10rpx;
font-size: 24rpx;
}
}
}
// 保存
.form-btn {
width: 686rpx;
height: 94rpx;
border-radius: 46rpx;
background-color: #d3a358;
color: #ffffff;
font-size: 38rpx;
display: flex;
align-items: center;
justify-content: center;
position: fixed;
bottom: 60rpx;
left: 50%;
transform: translateX(-50%);
z-index: 2;
image{
width: 42rpx;
height: 42rpx;
margin-right: 12rpx;
}
}
}
</style>
\ No newline at end of file
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