Skip to content

飞
飞鹤小程序
Commit e6d89561 authored by weishengfei's avatar weishengfei
Browse files
Options

产检首页开发组件

parent b2f370f3
Hide whitespace changes
Inline Side-by-side
Showing with 476 additions and 155 deletions
pages/postnatalCheckUp/postnatalCheckUp.vue
View file @ e6d89561
......@@ -35,9 +35,10 @@
<image class="image2" src="/static/chanjianTool/right.png"></image>
</view>
</view>
<!-- 产检记录 -->
<!-- 产检记录 -->
<view class="postnatal-con-record">
<view class="record-item" v-for="({id, time, num, week, status, project}, index) in recordList" :key="index">
<view class="record-item" v-for="({id, time, num, week, status, project, isAdd}, index) in recordList" :key="index">
<image class="add-image" v-if="isAdd ===1 " src="/static/chanjianTool/bs.png"></image>
<view class="item-t">
<view class="item-t-l">
第{{num}}次产检
......@@ -46,22 +47,22 @@
<view class="">
产检时间：{{ time ? time : '---'}}
</view>
<image class="edit-img" src="/static/chanjianTool/edit.png"></image>
<image @click="onEdit(id, time)" class="edit-img" src="/static/chanjianTool/edit.png"></image>
</view>
</view>
<view class="item-line">
</view>
<view class="item-c">
<view class="item-c-l">
孕期{{week}}周
</view>
<view class="">
<image class="record-img" :src="getSrcUrl(status)" ></image>
<image class="record-img" :src="getSrcUrl(status)"></image>
</view>
</view>
<view class="item-b">
重点：{{getProject(project)}}
重点：{{getProject(project)}}
</view>
</view>
</view>
......@@ -70,16 +71,87 @@
<view class="postnatal-add">
<image src="/static/chanjianTool/add.png"></image>
</view>
</view>
<!-- 选择提醒弹窗 -->
<view>
<!-- 底部弹窗遮罩层 -->
<view v-if="showPicker" class="picker-layer-mask" @click="close"></view>
<!-- 弹窗内容区 -->
<view v-if="showPicker" class="picker-layer-popup">
<view class="picker-layer-panel">
<!-- 可自定义头部 -->
<view class="picker-layer-header">
<text class="picker-layer-cancel" @click="close">取消</text>
<text class="picker-layer-confirm" @click="handleConfirm">确定</text>
</view>
<view class="picker-layer-view-mask-top"></view>
<view class="picker-layer-view-mask-bottom"></view>
<!-- picker-view 选择器核心 -->
<picker-view
class="picker-layer-view"
mask-style="background: rgb(246, 248, 250); z-index: 0;"
indicator-style="border-radius: 10px; height: 50px; background:#ffffff; z-index:0"
:value="pickerValue"
@change="handleChange"
:immediate-change="true"
>
<picker-view-column>
<view class="picker-layer-item" v-for="(item, index) in options" :key="index">{{item}}</view>
</picker-view-column>
</picker-view>
</view>
</view>
</view>
<!-- 修改时间 -->
<view >
<!-- 底部弹窗遮罩层 -->
<view v-if="visible" class="picker-layer-mask" @click="close1"></view>
<!-- 弹窗内容区 -->
<view v-if="visible" class="picker-layer-popup">
<view class="picker-layer-panel">
<!-- 可自定义头部 -->
<view class="picker-layer-header">
<text class="picker-layer-cancel" @click="close1">取消</text>
<text class="picker-layer-confirm" @click="handleConfirm1">确定</text>
</view>
<view class="picker-layer-view-mask-top"></view>
<view class="picker-layer-view-mask-bottom"></view>
<!-- picker-view 选择器核心 -->
<picker-view
class="picker-layer-view"
mask-style="background: rgb(246, 248, 250); z-index: 0;"
indicator-style="border-radius: 10px; height: 50px; background:#ffffff; z-index:0"
:value="timeValue"
:immediate-change="true"
@change="bindChange"
>
<picker-view-column>
<view class="picker-layer-item" v-for="(item,index) in years" :key="index">{{item}}年</view>
</picker-view-column>
<picker-view-column>
<view class="picker-layer-item" v-for="(item,index) in months" :key="index">{{item}}月</view>
</picker-view-column>
<picker-view-column>
<view class="picker-layer-item" v-for="(item,index) in days" :key="index">{{item}}日</view>
</picker-view-column>
</picker-view>
</view>
</view>
</view>
</view>
</view>
</template>
<script setup>
import {
ref,
getCurrentInstance
getCurrentInstance,
watch
} from 'vue'
import {
onLoad,
......@@ -96,22 +168,87 @@
} = getCurrentInstance();
const $baseUrl = proxy.$baseUrl;
const back_btn = ref('')
// 提醒选择器相关状态
const showPicker = ref(false)
const options = ['当天', '前一天', '前三天'] // 提醒时间选项
const pickerValue = ref([0]) // 当前选中的索引
const selectedValue = ref('') // 选中的值
// 保存要修改的id
const editId = ref(null)
// 日期选择器相关状态
const visible = ref(false) // 是否显示日期选择器
const date = new Date()
const timeValue = ref([]) // 日期选择器当前值
// 年份数据 (2010-当前年份+2)
const years = ref([])
const currentYear = date.getFullYear()
for (let i = 2010; i <= currentYear + 2; i++) {
years.value.push(i)
}
// 月份数据
const months = ref([])
for (let i = 1; i <= 12; i++) {
months.value.push(i)
}
// 日期数据 (动态生成)
const days = ref([])
// 当前选中的年月日
const selectedYear = ref(currentYear)
const selectedMonth = ref(date.getMonth() + 1)
const selectedDay = ref(date.getDate())
// 获取某年某月的天数
function getDaysInMonth(year, month) {
return new Date(year, month, 0).getDate()
}
// 更新日期数据
const updateDays = () => {
const daysInMonth = getDaysInMonth(selectedYear.value, selectedMonth.value)
days.value = []
for (let i = 1; i <= daysInMonth; i++) {
days.value.push(i)
}
// 确保选中的日期不超过当月最大天数
if (selectedDay.value > days.value.length) {
selectedDay.value = days.value.length
}
// 更新选择器的索引值
updateValueIndices()
}
// 更新选择器的索引值
const updateValueIndices = () => {
const yearIndex = years.value.indexOf(selectedYear.value)
const monthIndex = months.value.indexOf(selectedMonth.value)
const dayIndex = days.value.indexOf(selectedDay.value)
if (yearIndex !== -1 && monthIndex !== -1 && dayIndex !== -1) {
timeValue.value = [yearIndex, monthIndex, dayIndex]
}
}
// 初始化日期数据
updateDays()
// 按钮列表
const btnList = ref([
{
name:'提醒',
imageSrc:'/static/chanjianTool/icon1.png',
const btnList = ref([{
name: '提醒',
imageSrc: '/static/chanjianTool/icon1.png',
type: 1
},
{
name:'报告单',
imageSrc:'/static/chanjianTool/icon2.png',
name: '报告单',
imageSrc: '/static/chanjianTool/icon2.png',
type: 2
},
{
name:'日历',
imageSrc:'/static/chanjianTool/icon3.png',
name: '日历',
imageSrc: '/static/chanjianTool/icon3.png',
type: 3
}
])
......@@ -130,147 +267,74 @@
},
]);
// 产检记录
const recordList = ref([
{
const recordList = ref([{
isAdd: 0, // 1 是 0 否
id: 1,
time:'2025-05-11',
num:'一', // 产检次数
week:'5-6', // 周数
status: '1', //待产检、已过期、已产检，
time: '',
num: '一', // 产检次数
week: '5-6', // 周数
status: '1', //待产检、已过期、已产检，
// 产检项目
project:[
{
name:'测量胎儿颈部透明层厚度（NT)',
id:1
project: [{
name: '测量胎儿颈部透明层厚度（NT)',
id: 1
},
{
name:'无创产前基因检测(NIPT)(非必查)',
id:2
name: '无创产前基因检测(NIPT)(非必查)',
id: 2
}
]
},
{
isAdd: 0, // 1 是 0 否
id: 2,
time:'2025-05-11',
num:'二', // 产检次数
week:'5-6', // 周数
status: '2', //待产检、已过期、已产检，
time: '2025-05-11',
num: '二', // 产检次数
week: '5-6', // 周数
status: '2', //待产检、已过期、已产检，
// 产检项目
project:[
{
name:'测量胎儿颈部透明层厚度（NT)',
id:1
project: [{
name: '测量胎儿颈部透明层厚度（NT)',
id: 1
},
{
name:'无创产前基因检测(NIPT)(非必查)',
id:2
name: '无创产前基因检测(NIPT)(非必查)',
id: 2
}
]
},
{
isAdd: 1, // 1 是 0 否
id: 3,
time:'2025-05-11',
num:'三', // 产检次数
week:'5-6', // 周数
status: '3', //待产检、已过期、已产检，
time: '2025-05-11',
num: '三', // 产检次数
week: '5-6', // 周数
status: '3', //待产检、已过期、已产检，
// 产检项目
project:[
{
name:'测量胎儿颈部透明层厚度（NT)',
id:1
project: [{
name: '测量胎儿颈部透明层厚度（NT)',
id: 1
},
{
name:'无创产前基因检测(NIPT)(非必查)',
id:2
}
]
},
{
id: 1,
time:'2025-05-11',
num:'一', // 产检次数
week:'5-6', // 周数
status: '1', //待产检、已过期、已产检，
// 产检项目
project:[
{
name:'测量胎儿颈部透明层厚度（NT)',
id:1
},
{
name:'无创产前基因检测(NIPT)(非必查)',
id:2
}
]
},
{
id: 1,
time:'2025-05-11',
num:'一', // 产检次数
week:'5-6', // 周数
status: '1', //待产检、已过期、已产检，
// 产检项目
project:[
{
name:'测量胎儿颈部透明层厚度（NT)',
id:1
},
{
name:'无创产前基因检测(NIPT)(非必查)',
id:2
}
]
},
{
id: 1,
time:'2025-05-11',
num:'一', // 产检次数
week:'5-6', // 周数
status: '1', //待产检、已过期、已产检，
// 产检项目
project:[
{
name:'测量胎儿颈部透明层厚度（NT)',
id:1
},
{
name:'无创产前基因检测(NIPT)(非必查)',
id:2
}
]
},
{
id: 1,
time:'2025-05-11',
num:'一', // 产检次数
week:'5-6', // 周数
status: '1', //待产检、已过期、已产检，
// 产检项目
project:[
{
name:'测量胎儿颈部透明层厚度（NT)',
id:1
},
{
name:'无创产前基因检测(NIPT)(非必查)',
id:2
name: '无创产前基因检测(NIPT)(非必查)',
id: 2
}
]
}
])
// 拼接检查项目名称
const getProject = (projects) =>{
return projects.map(project => project.name).join('、');
const getProject = (projects) => {
return projects.map(project => project.name).join('、');
}
// 根据状态返回图片
const getSrcUrl = (status) =>{
const getSrcUrl = (status) => {
const imageMap = {
'1': '/static/chanjianTool/icon4.png',
'2': '/static/chanjianTool/icon5.png',
'3': '/static/chanjianTool/icon6.png',
};
return imageMap[status];
'1': '/static/chanjianTool/icon4.png',
'2': '/static/chanjianTool/icon5.png',
'3': '/static/chanjianTool/icon6.png',
};
return imageMap[status];
}
// 首页组件逻辑
const backHandler = () => {
......@@ -314,11 +378,113 @@
// 按钮点击
const onBtn = (type) => {
console.log(type)
// type 1 提醒 2 报告单 3 日历
showPicker.value
switch (type) {
case 1:
showPicker.value = true
break;
default:
break;
}
}
// 提醒关闭
const close = () => {
showPicker.value = false;
}
// 选择器变化事件
const handleChange = (e) => {
pickerValue.value = e.detail.value;
}
// 确认选择
const handleConfirm = () => {
close();
selectedValue.value = options[pickerValue.value[0]];
}
// 编辑时间
const onEdit = (id, time)=>{
console.log(id, time)
editId.value = id
visible.value = true
// 如果有时间，解析时间并设置选中值
if (time) {
const dateParts = time.split('-')
const year = parseInt(dateParts[0])
const month = parseInt(dateParts[1])
const day = parseInt(dateParts[2])
// 更新选中值
selectedYear.value = year
selectedMonth.value = month
selectedDay.value = day
// 更新 timeValue 的索引
const yearIndex = years.value.indexOf(year)
const monthIndex = months.value.indexOf(month)
const dayIndex = days.value.indexOf(day)
// 这里直接修改 timeValue.value 会触发 watch
timeValue.value = [yearIndex, monthIndex, dayIndex]
} else {
// 如果没有时间，设置为当前日期
const today = new Date()
const yearIndex = years.value.indexOf(today.getFullYear())
const monthIndex = months.value.indexOf(today.getMonth() + 1)
const dayIndex = days.value.indexOf(today.getDate())
timeValue.value = [yearIndex, monthIndex, dayIndex]
}
}
const setDate = (indices) => {
if (!indices || indices.length !== 3) return
const year = years.value[indices[0]]
const month = months.value[indices[1]]
const day = days.value[indices[2]]
selectedYear.value = year
selectedMonth.value = month
selectedDay.value = day
}
// 时间选择变化时间
const bindChange = (e) => {
console.log(e)
const values = e.detail.value
timeValue.value = values
selectedYear.value = years.value[values[0]]
selectedMonth.value = months.value[values[1]]
selectedDay.value = days.value[values[2]]
}
// 时间提醒关闭
const close1 = () => {
visible.value = false;
}
// 时间确认选择
const handleConfirm1 = () => {
close1();
const formattedDate = `${selectedYear.value}-${String(selectedMonth.value).padStart(2, '0')}-${String(selectedDay.value).padStart(2, '0')}`;
const recordToUpdate = recordList.value.find(item => item.id === editId.value);
recordToUpdate.time = formattedDate;
recordList.value = [...recordList.value];
}
// 监听年份和月份变化，更新日期数据
watch([selectedYear, selectedMonth], () => {
updateDays()
})
// 监听选择器值变化，更新选中日期
watch(() => timeValue.value, (newVal) => {
setDate(newVal)
})
</script>
<style lang="less" scoped>
@import "@/common.less";
.postnatal {
// position: absolute;
width: 100%;
......@@ -338,6 +504,7 @@
align-items: center;
margin-top: 50rpx;
font-weight: 500;
.info-c {
width: 2rpx;
height: 22rpx;
......@@ -350,12 +517,14 @@
}
}
}
&-btn{
&-btn {
margin-top: 30rpx;
display: flex;
justify-content: space-between;
margin-bottom: 10rpx;
.btn-item{
.btn-item {
display: flex;
align-items: center;
justify-content: center;
......@@ -364,84 +533,109 @@
background: #ffffff;
border-radius: 16rpx;
font-size: 28rpx;
.image1{
.image1 {
width: 44rpx;
height: 44rpx;
}
.btn-item-text{
.btn-item-text {
margin-left: 6rpx;
margin-right: 34rpx;
}
.image2{
.image2 {
width: 9rpx;
height: 17rpx;
}
}
}
&-record{
&-record {
height: calc(100vh - 600rpx);
overflow-y: auto;
.record-item{
.record-item {
width: 687rpx;
background-color: #fff;
margin-top: 30rpx;
border-radius: 24rpx;
box-sizing: border-box;
padding: 40rpx 32rpx;
.item-t, .item-c{
position: relative;
.add-image{
position: absolute;
left: 0;
top: 0;
width: 111rpx;
height: 30rpx;
}
.item-t,
.item-c {
display: flex;
align-items: center;
justify-content: space-between;
}
.item-line{
.item-line {
width: 100%;
height: 2rpx;
background-color: #fcf5ec;
margin: 20rpx 0;
}
.item-t{
.item-t {
font-size: 24rpx;
font-weight: 500px;
color: #000000;
.item-t-r{
.item-t-r {
display: flex;
align-items: center;
}
}
.edit-img{
.edit-img {
width: 21rpx;
height: 21rpx;
margin-left: 14rpx;
}
.record-img{
.record-img {
width: 142rpx;
height: 35rpx;
}
.item-c{
&-l{
.item-c {
&-l {
font-size: 38rpx;
color: @color-gold-cover;
}
}
.item-b{
.item-b {
width: 100%;
white-space: nowrap; /* 禁止换行 */
overflow: hidden; /* 超出部分隐藏 */
text-overflow: ellipsis; /* 显示省略号 */
white-space: nowrap;
/* 禁止换行 */
overflow: hidden;
/* 超出部分隐藏 */
text-overflow: ellipsis;
/* 显示省略号 */
margin-top: 20rpx;
color: #6f6d67;
font-size: 24rpx
}
}
}
}
&-add{
&-add {
position: fixed;
right: 31rpx;
bottom: 230rpx;
image{
image {
width: 112rpx;
height: 113rpx;
}
......@@ -467,7 +661,7 @@
}
.btnback {
width: 15rpx;
width: 16rpx;
height: 29rpx;
margin-top: 110rpx;
margin-left: 35rpx;
......@@ -482,4 +676,131 @@
margin-top: -46rpx;
margin-left: 0rpx;
}
.picker-layer-mask {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 3999;
}
/* 遮罩层样式 */
.picker-layer-popup {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 4000;
display: flex;
flex-direction: column;
align-items: center;
animation: picker-layer-up 0.3s;
}
@keyframes picker-layer-up {
from {
transform: translateY(100%);
}
to {
transform: translateY(0);
}
}
/* 弹窗容器样式 */
.picker-layer-panel {
width: 100vw;
height: 50vh;
background: #f6f8fa;
border-top-left-radius: 24rpx;
border-top-right-radius: 24rpx;
overflow: hidden;
display: flex;
flex-direction: column;
position: relative;
}
.picker-layer-header {
display: flex;
justify-content: space-between;
align-items: center;
height: 140rpx;
box-sizing: border-box;
background: #f6f8fa;
padding: 0 32rpx;
.picker-layer-cancel {
color: #6f6d67;
font-size: 28rpx;
width: 136rpx;
height: 74rpx;
border-radius: 20rpx;
background: #ffffff;
display: flex;
align-items: center;
justify-content: center;
}
.picker-layer-confirm {
color: #ffffff;
font-size: 28rpx;
width: 136rpx;
height: 74rpx;
border-radius: 20rpx;
background: #d3a358;
display: flex;
align-items: center;
justify-content: center;
}
.picker-layer-title {
color: #222;
font-size: 32rpx;
font-weight: bold;
}
}
.picker-layer-view {
flex: 1;
width: 100%;
height: 100%;
}
.picker-layer-item {
height: 100rpx;
line-height: 100rpx;
text-align: center;
font-size: 32rpx;
color: #1d1e25;
}
.picker-layer-view-mask-top {
position: absolute;
top: 140rpx;
left: 0;
width: 100%;
height: calc(50% - 100rpx);
z-index: 1;
background: linear-gradient(to bottom,
rgb(246, 248, 250) 0%,
rgba(255, 255, 255, 0.5) 100%);
pointer-events: none;
}
.picker-layer-view-mask-bottom {
position: absolute;
bottom: 0rpx;
left: 0;
width: 100%;
height: calc(50% - 100rpx);
z-index: 1;
background: linear-gradient(to top,
rgb(246, 248, 250) 0%,
rgba(255, 255, 255, 0.5) 100%);
pointer-events: none;
}
</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