Skip to content

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

图片预览功能

parent aa6e4c40
Hide whitespace changes
Inline Side-by-side
Showing with 498 additions and 2 deletions
pages.json
View file @ bf5f2b5b
{
"pages": [
// 产检提醒
{
"path" : "pages/postnatalCheckUp/postnatalCheckUp",
"style" :
......@@ -96,6 +97,16 @@
"navigationBarBackgroundColor":"#ffffff",
"enablePullDownRefresh" : false
}
},
// 我的报告单
{
"path" : "pages/myReportCard/myReportCard",
"style" :
{
"navigationBarTitleText" : "我的报告单",
"enablePullDownRefresh" : false,
"navigationStyle": "custom"
}
}
],
"globalStyle": {
......
pages/myReportCard/myReportCard.vue 0 → 100644
View file @ bf5f2b5b
<template>
<view class="report-card" style="background-image: url(/static/chanjianTool/bg1.png);">
<view class="page-top">
<image @tap="backHandler" class="btnback" src="/static/chanjianTool/back.png"></image>
<view class="page_title">我的报告单</view>
</view>
<view class="report-card-con">
<view class="con-box">
<view class="list-item" v-for="(item, index) in listData" :key="index">
<view class="item-time">
<view class="item-time-l">
<image src="/static/chanjianTool/icon19.png"></image>
{{item.time}}
</view>
<view class="item-time-r" @click="onDelete(item.id)">
<image src="/static/chanjianTool/delete.png"></image>
</view>
</view>
<view class="item-line">
</view>
<view class="item-content">
<view class="content-1">
第{{item.num}}次产检:孕{{item.week}}周
</view>
<view class="content-2">
重点: {{getProject(item.project)}}
</view>
<view class="content-3">
<template v-for="(items, i) in item.imageList.slice(0, 3)" :key="index">
<view class="content-3-v" :class="{ 'has-more': i === 2 && item.imageList.length > 3 }">
<image @click="onPreviewImage(items.url)" :src="items.url" mode="widthFix"></image>
<view @click="onMoreImage(item.imageList)" class="more-count" v-if="i === 2 && item.imageList.length > 3">
+{{ item.imageList.length - 3 }}
</view>
</view>
</template>
</view>
</view>
</view>
</view>
</view>
<!-- 查看更多图片 -->
<view class="more-popup" v-if="showMore">
<view class="more-popup-list">
<view class="title">
我的报告单
</view>
<view class="more-image">
<view v-for="(item, index) in imageListData" :key="index" class="more-image-1" @click="onPreviewImage(item.url)">
<image :src="item.url"></image>
</view>
</view>
</view>
<view class="close-btn-bottom" @tap="closeVideo">
<image src="/static/chanjianTool/icon21.png"></image>
</view>
</view>
</view>
</template>
<script setup>
import {
ref
} from 'vue'
import {
onLoad,
onShow
} from '@dcloudio/uni-app'
import {
throttleTap
} from '@/utils/index.js';
import md from '../../md';
// 控制查看更多图片
const showMore = ref(false)
// 存储查看的图片数组
const imageListData = ref([])
// 报告单数据
const listData = ref([{
isAdd: 0, // 1 是 0 否
id: 1,
time: '2025-07-09',
num: '一', // 产检次数
week: '5-6', // 周数
status: '1', //待产检、已过期、已产检，
// 产检项目
project: [{
name: '测量胎儿颈部透明层厚度（NT)',
id: 1
},
{
name: '无创产前基因检测(NIPT)(非必查)',
id: 2
}
],
imageList: [{
url: 'https://momclub-picture-1253290912.cos.ap-beijing.myqcloud.com/xmh-mini-program/user/image/2025/07/17/xmh-mini-program_1752739702325_167279.jpeg',
id: Date.now() + Math.floor(Math.random() * 1000)
},
{
url: 'https://momclub-picture-1253290912.cos.ap-beijing.myqcloud.com/xmh-mini-program/user/image/2025/07/17/xmh-mini-program_1752739702325_167279.jpeg',
id: Date.now() + Math.floor(Math.random() * 1000)
},
{
url: 'https://momclub-picture-1253290912.cos.ap-beijing.myqcloud.com/xmh-mini-program/user/image/2025/07/17/xmh-mini-program_1752739702325_167279.jpeg',
id: Date.now() + Math.floor(Math.random() * 1000)
},
{
url: 'https://momclub-picture-1253290912.cos.ap-beijing.myqcloud.com/xmh-mini-program/user/image/2025/07/17/xmh-mini-program_1752739702325_167279.jpeg',
id: Date.now() + Math.floor(Math.random() * 1000)
},
{
url: 'https://momclub-picture-1253290912.cos.ap-beijing.myqcloud.com/xmh-mini-program/user/image/2025/07/17/xmh-mini-program_1752739702325_167279.jpeg',
id: Date.now() + Math.floor(Math.random() * 1000)
},
{
url: 'https://momclub-picture-1253290912.cos.ap-beijing.myqcloud.com/xmh-mini-program/user/image/2025/07/17/xmh-mini-program_1752739702325_167279.jpeg',
id: Date.now() + Math.floor(Math.random() * 1000)
},{
url: 'https://momclub-picture-1253290912.cos.ap-beijing.myqcloud.com/xmh-mini-program/user/image/2025/07/17/xmh-mini-program_1752739702325_167279.jpeg',
id: Date.now() + Math.floor(Math.random() * 1000)
},{
url: 'https://momclub-picture-1253290912.cos.ap-beijing.myqcloud.com/xmh-mini-program/user/image/2025/07/17/xmh-mini-program_1752739702325_167279.jpeg',
id: Date.now() + Math.floor(Math.random() * 1000)
},{
url: 'https://momclub-picture-1253290912.cos.ap-beijing.myqcloud.com/xmh-mini-program/user/image/2025/07/17/xmh-mini-program_1752739702325_167279.jpeg',
id: Date.now() + Math.floor(Math.random() * 1000)
},{
url: 'https://momclub-picture-1253290912.cos.ap-beijing.myqcloud.com/xmh-mini-program/user/image/2025/07/17/xmh-mini-program_1752739702325_167279.jpeg',
id: Date.now() + Math.floor(Math.random() * 1000)
},{
url: 'https://momclub-picture-1253290912.cos.ap-beijing.myqcloud.com/xmh-mini-program/user/image/2025/07/17/xmh-mini-program_1752739702325_167279.jpeg',
id: Date.now() + Math.floor(Math.random() * 1000)
},{
url: 'https://momclub-picture-1253290912.cos.ap-beijing.myqcloud.com/xmh-mini-program/user/image/2025/07/17/xmh-mini-program_1752739702325_167279.jpeg',
id: Date.now() + Math.floor(Math.random() * 1000)
}
]
},
{
isAdd: 0, // 1 是 0 否
id: 1,
time: '2025-07-09',
num: '一', // 产检次数
week: '5-6', // 周数
status: '1', //待产检、已过期、已产检，
// 产检项目
project: [{
name: '测量胎儿颈部透明层厚度（NT)',
id: 1
},
{
name: '无创产前基因检测(NIPT)(非必查)',
id: 2
}
],
imageList: [{
url: 'https://momclub-picture-1253290912.cos.ap-beijing.myqcloud.com/xmh-mini-program/user/image/2025/07/17/xmh-mini-program_1752739702325_167279.jpeg',
id: Date.now() + Math.floor(Math.random() * 1000)
},
{
url: 'https://momclub-picture-1253290912.cos.ap-beijing.myqcloud.com/xmh-mini-program/user/image/2025/07/17/xmh-mini-program_1752739702325_167279.jpeg',
id: Date.now() + Math.floor(Math.random() * 1000)
},
{
url: 'https://momclub-picture-1253290912.cos.ap-beijing.myqcloud.com/xmh-mini-program/user/image/2025/07/17/xmh-mini-program_1752739702325_167279.jpeg',
id: Date.now() + Math.floor(Math.random() * 1000)
},
{
url: 'https://momclub-picture-1253290912.cos.ap-beijing.myqcloud.com/xmh-mini-program/user/image/2025/07/17/xmh-mini-program_1752739702325_167279.jpeg',
id: Date.now() + Math.floor(Math.random() * 1000)
}
]
},
{
isAdd: 0, // 1 是 0 否
id: 1,
time: '2025-07-09',
num: '一', // 产检次数
week: '5-6', // 周数
status: '1', //待产检、已过期、已产检，
// 产检项目
project: [{
name: '测量胎儿颈部透明层厚度（NT)',
id: 1
},
{
name: '无创产前基因检测(NIPT)(非必查)',
id: 2
}
],
imageList: [{
url: 'https://momclub-picture-1253290912.cos.ap-beijing.myqcloud.com/xmh-mini-program/user/image/2025/07/17/xmh-mini-program_1752739702325_167279.jpeg',
id: Date.now() + Math.floor(Math.random() * 1000)
},
{
url: 'https://momclub-picture-1253290912.cos.ap-beijing.myqcloud.com/xmh-mini-program/user/image/2025/07/17/xmh-mini-program_1752739702325_167279.jpeg',
id: Date.now() + Math.floor(Math.random() * 1000)
},
{
url: 'https://momclub-picture-1253290912.cos.ap-beijing.myqcloud.com/xmh-mini-program/user/image/2025/07/17/xmh-mini-program_1752739702325_167279.jpeg',
id: Date.now() + Math.floor(Math.random() * 1000)
},
{
url: 'https://momclub-picture-1253290912.cos.ap-beijing.myqcloud.com/xmh-mini-program/user/image/2025/07/17/xmh-mini-program_1752739702325_167279.jpeg',
id: Date.now() + Math.floor(Math.random() * 1000)
}
]
},
{
isAdd: 0, // 1 是 0 否
id: 1,
time: '2025-07-09',
num: '一', // 产检次数
week: '5-6', // 周数
status: '1', //待产检、已过期、已产检，
// 产检项目
project: [{
name: '测量胎儿颈部透明层厚度（NT)',
id: 1
},
{
name: '无创产前基因检测(NIPT)(非必查)',
id: 2
}
],
imageList: [{
url: 'https://momclub-picture-1253290912.cos.ap-beijing.myqcloud.com/xmh-mini-program/user/image/2025/07/17/xmh-mini-program_1752739702325_167279.jpeg',
id: Date.now() + Math.floor(Math.random() * 1000)
},
{
url: 'https://momclub-picture-1253290912.cos.ap-beijing.myqcloud.com/xmh-mini-program/user/image/2025/07/17/xmh-mini-program_1752739702325_167279.jpeg',
id: Date.now() + Math.floor(Math.random() * 1000)
},
{
url: 'https://momclub-picture-1253290912.cos.ap-beijing.myqcloud.com/xmh-mini-program/user/image/2025/07/17/xmh-mini-program_1752739702325_167279.jpeg',
id: Date.now() + Math.floor(Math.random() * 1000)
},
{
url: 'https://momclub-picture-1253290912.cos.ap-beijing.myqcloud.com/xmh-mini-program/user/image/2025/07/17/xmh-mini-program_1752739702325_167279.jpeg',
id: Date.now() + Math.floor(Math.random() * 1000)
}
]
}
])
// 查看更多图片
const onMoreImage = (item) => {
console.log(item)
showMore.value = true
imageListData.value = item
}
const closeVideo=()=> {
showMore.value = false;
}
// 图片预览
const onPreviewImage = (url) => {
console.log(url)
uni.previewImage({
current: '1',
urls: [url]
})
}
// 拼接检查项目名称
const getProject = (projects) => {
return projects.map(project => project.name).join('、');
}
// 删除事件
const onDelete = throttleTap((id) => {
console.log(id)
})
// 返回上一页面
const backHandler = () => {
uni.navigateBack();
}
</script>
<style lang="less" scoped>
.report-card {
// position: absolute;
width: 100%;
height: 100vh;
background-size: 100% 100%;
&-con {
position: absolute;
// width: 750rpx;
top: 190rpx;
left: 31rpx;
.con-box{
width: 682rpx;
height: calc(100vh - 220rpx);
overflow-y: auto;
}
.list-item {
width: 682rpx;
border-radius: 24rpx;
background: #ffffff;
padding: 35rpx 34rpx 45rpx 34rpx;
box-sizing: border-box;
margin-bottom: 30rpx;
.item-time {
display: flex;
justify-content: space-between;
align-items: center;
.item-time-l {
display: flex;
align-items: center;
font-weight: 600;
font-size: 32rpx;
image {
width: 32rpx;
height: 32rpx;
margin-right: 15rpx;
}
}
.item-time-r {
image {
width: 31rpx;
height: 31rpx;
}
}
}
.item-line {
width: 100%;
height: 1rpx;
margin: 30rpx 0;
background-image: url(/static/chanjianTool/icon20.png);
}
.item-content {
.content-1,
.content-2 {
font-size: 26rpx;
font-weight: 600;
}
.content-2 {
margin-top: 15rpx;
}
.content-3 {
display: flex;
flex-wrap: wrap;
margin-top: 35rpx;
.content-3-v {
width: 192rpx;
height: 192rpx;
border-radius: 10rpx;
overflow: hidden;
margin-right: 13rpx;
position: relative;
}
.content-3-v.has-more image {
opacity: 0.7;
}
.more-count {
position: absolute;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.5);
color: white;
width: 192rpx;
height: 192rpx;
border-radius: 10rpx;
font-size: 38rpx;
display: flex;
justify-content: center;
align-items: center;
}
image {
width: 192rpx;
height: 192rpx;
}
}
}
}
}
// 自定义头部
.page-top {
width: 100%;
}
.btnback {
width: 16rpx;
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;
}
.more-popup {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.7);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 9999;
.more-popup-list{
width: 661rpx;
height: 881rpx;
background: #ffffff;
border-radius: 52rpx;
padding: 50rpx 58rpx;
box-sizing: border-box;
.title{
text-align: center;
font-size: 36rpx;
color: #b27c1e;
margin-bottom: 45rpx;
}
.more-image{
width: 100%;
height: 695rpx;
overflow: auto;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
}
.more-image-1 {
width: 169rpx;
height: 169rpx;
border-radius: 10rpx;
overflow: hidden;
margin-right: 14rpx;
margin-bottom: 30rpx;
flex-shrink: 0;
image {
width: 100%;
height: 100%;
/* 新增：确保图片填充模式与父容器一致 */
object-fit: cover;
/* 可选：加载时避免闪烁 */
display: block;
}
}
}
}
.close-btn-bottom {
margin: 40rpx auto 0 auto;
width: 70rpx;
height: 70rpx;
text-align: center;
z-index: 10001;
display: flex;
align-items: center;
justify-content: center;
image{
width: 70rpx;
height: 70rpx;
}
}
}
</style>
\ No newline at end of file
pages/postnatalCheckUp/postnatalCheckUp.vue
View file @ bf5f2b5b
......@@ -390,7 +390,11 @@
case 1:
showPicker.value = true
break;
case 2:
uni.navigateTo({
url:'/pages/myReportCard/myReportCard'
})
break;
default:
break;
}
......@@ -490,7 +494,6 @@
<style lang="less" scoped>
@import "@/common.less";
.postnatal {
// position: absolute;
width: 100%;
......
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