Skip to content

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

产检提醒首页开发

parent 75d186ae
Hide whitespace changes
Inline Side-by-side
Showing with 499 additions and 1 deletion
pages.json
View file @ b2f370f3
{
"pages": [
"pages": [
{
"path" : "pages/postnatalCheckUp/postnatalCheckUp",
"style" :
{
"navigationBarTitleText" : "",
"enablePullDownRefresh" : false,
"navigationStyle": "custom"
}
},
{
"path": "pages/index/index",
"style": {
......@@ -79,6 +88,7 @@
"navigationStyle": "custom"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
......
pages/index/index.vue
View file @ b2f370f3
<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"/>
......
pages/postnatalCheckUp/postnatalCheckUp.vue 0 → 100644
View file @ b2f370f3
<template>
<view>
<view class="postnatal" style="background-image: url(/static/chanjianTool/bg.png);">
<view class="page-top">
<image @tap="backHandler" class="btnback" src="/static/chanjianTool/back.png"></image>
<view class="page_title">产检提醒</view>
</view>
<view class="postnatal-con">
<!-- 轮播图 -->
<swiper class="banner-swiper" :autoplay="true" :circular="true">
<swiper-item v-for="(item, index) in bannerList" :key="index">
<image class="banner-img" :src="`${item.img}`" mode="aspectFill" @click="handleBannerClick(item, index)" />
</swiper-item>
</swiper>
<!-- 孕期信息 -->
<view class="postnatal-con-info">
<view class="info-l">
孕八周
</view>
<view class="info-c">
<image class="info-img" src="/static/chanjianTool/line.png"></image>
</view>
<view class="info-r">
预产期：2025-10-01
</view>
</view>
<!-- 按钮 -->
<view class="postnatal-con-btn">
<view class="btn-item" v-for="({name, imageSrc, type}, index) in btnList" :key="index" @click="onBtn(type)">
<image class="image1" :src="`${imageSrc}`"></image>
<view class="btn-item-text">
{{name}}
</view>
<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="item-t">
<view class="item-t-l">
第{{num}}次产检
</view>
<view class="item-t-r">
<view class="">
产检时间：{{ time ? time : '---'}}
</view>
<image 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>
</view>
</view>
<view class="item-b">
重点：{{getProject(project)}}
</view>
</view>
</view>
</view>
<!-- 新增产检 -->
<view class="postnatal-add">
<image src="/static/chanjianTool/add.png"></image>
</view>
</view>
</view>
</template>
<script setup>
import {
ref,
getCurrentInstance
} from 'vue'
import {
onLoad,
onShow
} from '@dcloudio/uni-app'
import {
jump,
JumpType,
throttleTap
} from '@/utils/index.js';
import md from '../../md';
const {
proxy
} = getCurrentInstance();
const $baseUrl = proxy.$baseUrl;
const back_btn = ref('')
// 按钮列表
const btnList = ref([
{
name:'提醒',
imageSrc:'/static/chanjianTool/icon1.png',
type: 1
},
{
name:'报告单',
imageSrc:'/static/chanjianTool/icon2.png',
type: 2
},
{
name:'日历',
imageSrc:'/static/chanjianTool/icon3.png',
type: 3
}
])
// 轮播数据
const bannerList = ref([{
img: 'https://course.feihe.com/momclub-picture/contentLibrary/1003/banner-cl0.png',
url: `https://www.baidu.com`
},
{
img: 'https://course.feihe.com/momclub-picture/contentLibrary/1003/banner-cl1.png',
url: `https://www.baidu.com`
},
{
img: 'https://course.feihe.com/momclub-picture/contentLibrary/1003/banner-cl2.png',
url: `https://www.baidu.com`
},
]);
// 产检记录
const recordList = ref([
{
id: 1,
time:'2025-05-11',
num:'一', // 产检次数
week:'5-6', // 周数
status: '1', //待产检、已过期、已产检，
// 产检项目
project:[
{
name:'测量胎儿颈部透明层厚度（NT)',
id:1
},
{
name:'无创产前基因检测(NIPT)(非必查)',
id:2
}
]
},
{
id: 2,
time:'2025-05-11',
num:'二', // 产检次数
week:'5-6', // 周数
status: '2', //待产检、已过期、已产检，
// 产检项目
project:[
{
name:'测量胎儿颈部透明层厚度（NT)',
id:1
},
{
name:'无创产前基因检测(NIPT)(非必查)',
id:2
}
]
},
{
id: 3,
time:'2025-05-11',
num:'三', // 产检次数
week:'5-6', // 周数
status: '3', //待产检、已过期、已产检，
// 产检项目
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
}
]
}
])
// 拼接检查项目名称
const getProject = (projects) =>{
return projects.map(project => project.name).join('、');
}
// 根据状态返回图片
const getSrcUrl = (status) =>{
const imageMap = {
'1': '/static/chanjianTool/icon4.png',
'2': '/static/chanjianTool/icon5.png',
'3': '/static/chanjianTool/icon6.png',
};
return imageMap[status];
}
// 首页组件逻辑
const backHandler = () => {
if (!back_btn) {
uni.navigateBack();
} else {
jump({
type: JumpType.INNER,
url: `/pages/index/index`
})
}
}
// 点击轮播图事件
const handleBannerClick = (item, index) => {
console.log(item)
// let buttonName = '';
// switch(index){
// case 0:
// buttonName = '第一张焦点图';
// break;
// case 1:
// buttonName = '第二张焦点图';
// break;
// case 2:
// buttonName = '第三张焦点图';
// break;
// }
// 跳转
jump({
type: JumpType.H5,
url: item.url
})
// md.sensorLogTake({
// xcxClick: "产品提醒页-首屏页面点击",
// pageName: "产品提醒页-首屏",
// buttonName: buttonName,
// });
}
// 按钮点击
const onBtn = (type) => {
console.log(type)
}
</script>
<style lang="less" scoped>
@import "@/common.less";
.postnatal {
// position: absolute;
width: 100%;
height: 100vh;
background-size: 100% 100%;
// background-color: #fdf6eb;
&-con {
position: absolute;
// width: 750rpx;
top: 190rpx;
left: 31rpx;
&-info {
font-size: 24rpx;
display: flex;
align-items: center;
margin-top: 50rpx;
font-weight: 500;
.info-c {
width: 2rpx;
height: 22rpx;
margin: 0 16rpx;
.info-img {
display: block;
width: 100%;
height: 100%;
}
}
}
&-btn{
margin-top: 30rpx;
display: flex;
justify-content: space-between;
margin-bottom: 10rpx;
.btn-item{
display: flex;
align-items: center;
justify-content: center;
width: 212rpx;
height: 85rpx;
background: #ffffff;
border-radius: 16rpx;
font-size: 28rpx;
.image1{
width: 44rpx;
height: 44rpx;
}
.btn-item-text{
margin-left: 6rpx;
margin-right: 34rpx;
}
.image2{
width: 9rpx;
height: 17rpx;
}
}
}
&-record{
height: calc(100vh - 600rpx);
overflow-y: auto;
.record-item{
width: 687rpx;
background-color: #fff;
margin-top: 30rpx;
border-radius: 24rpx;
box-sizing: border-box;
padding: 40rpx 32rpx;
.item-t, .item-c{
display: flex;
align-items: center;
justify-content: space-between;
}
.item-line{
width: 100%;
height: 2rpx;
background-color: #fcf5ec;
margin: 20rpx 0;
}
.item-t{
font-size: 24rpx;
font-weight: 500px;
color: #000000;
.item-t-r{
display: flex;
align-items: center;
}
}
.edit-img{
width: 21rpx;
height: 21rpx;
margin-left: 14rpx;
}
.record-img{
width: 142rpx;
height: 35rpx;
}
.item-c{
&-l{
font-size: 38rpx;
color: @color-gold-cover;
}
}
.item-b{
width: 100%;
white-space: nowrap; /* 禁止换行 */
overflow: hidden; /* 超出部分隐藏 */
text-overflow: ellipsis; /* 显示省略号 */
margin-top: 20rpx;
color: #6f6d67;
font-size: 24rpx
}
}
}
}
&-add{
position: fixed;
right: 31rpx;
bottom: 230rpx;
image{
width: 112rpx;
height: 113rpx;
}
}
}
.banner-swiper {
width: 687rpx;
height: 177rpx;
border-radius: 12rpx;
overflow: hidden;
.banner-img {
width: 100%;
height: 100%;
// border-radius: 16rpx;
}
}
.page-top {
width: 100%;
}
.btnback {
width: 15rpx;
height: 29rpx;
margin-top: 110rpx;
margin-left: 35rpx;
}
.page_title {
width: 100%;
font-size: 34rpx;
font-weight: 500;
text-align: center;
color: #1d1e25;
margin-top: -46rpx;
margin-left: 0rpx;
}
</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