静态页面处理

pages.json

@@ -12,7 +12,7 @@
   }, {
     "path": "pages/index",
     "style": {
-      "navigationBarTitleText": "若依移动端框架",
+      "navigationBarTitleText": "主页",
       "navigationStyle": "custom"
     }
   }, {
@@ -20,6 +20,18 @@
     "style": {
       "navigationBarTitleText": "工作台"
     }
+  },
+  {
+  	"path": "pages/work/record/RecordList",
+  	"style": {
+  		"navigationBarTitleText": "声像记录"
+  	}
+  },
+  {
+  	"path": "pages/work/report/InspectionList",
+  	"style": {
+  		"navigationBarTitleText": "检验记录"
+  	}
   }, {
     "path": "pages/mine/index",
     "style": {

pages/work/index.uvue

@@ -24,7 +24,7 @@
 	<!-- 宫格 -->
     <view class="grid-body">
 	  <view class="grid uni-row">
-	        <view class="grid-item" v-for="(item, index) in items" :key="index" @click="enterItem" >
+	        <view class="grid-item" v-for="(item, index) in items" :key="index" @click="enterItem(item)" >
 	          <!-- 您的网格项内容 -->
 	          <uni-icons class="my-icon" :type="item.iconType" size="40" :color="item.colorClass" ></uni-icons>
 	          <text class="text">{{ item.text }}</text>
@@ -45,20 +45,21 @@
 	  }
 	  type Item={
 		  colorClass:string,
-	  	  iconType:string,		 
+	  	  iconType:string,
+		  path:string,		   
 		  text:string
 	  }
       return {
 		items: [
-		      {colorClass: 'blue', iconType: "person-filled", text: "用户管理" },
-			  {colorClass: 'blue', iconType: "download", text: "数据下载" },
-			  {colorClass: 'blue', iconType: "list", text: "任务管理" },
-			  {colorClass: 'orange', iconType: "mic", text: "声像记录" },
-			  {colorClass: 'orange', iconType: "calendar", text: "检验记录" },
-			  {colorClass: 'orange', iconType: "gear-filled", text: "关键工序" },
-			  {colorClass: 'green', iconType: "folder-add-filled", text: "文档查阅" },
-			  {colorClass: 'green', iconType: "cloud-upload", text: "数据上传" },
-			  {colorClass: 'green', iconType: "wallet-filled", text: "日志管理" }
+		      {colorClass: 'blue', iconType: "person-filled", text: "用户管理",path:"" },
+			  {colorClass: 'blue', iconType: "download", text: "数据下载",path:"" },
+			  {colorClass: 'blue', iconType: "list", text: "任务管理",path:"" },
+			  {colorClass: 'orange', iconType: "mic", text: "声像记录", path:"/pages/work/record/RecordList"},
+			  {colorClass: 'orange', iconType: "calendar", text: "检验记录",path:"/pages/work/report/InspectionList" },
+			  {colorClass: 'orange', iconType: "gear-filled", text: "关键工序",path:"" },
+			  {colorClass: 'green', iconType: "folder-add-filled", text: "文档查阅",path:"" },
+			  {colorClass: 'green', iconType: "cloud-upload", text: "数据上传",path:"" },
+			  {colorClass: 'green', iconType: "wallet-filled", text: "日志管理",path:"" }
 		] as Item[],
         current: 0 as number,
         swiperDotIndex: 0 as number,
@@ -83,10 +84,16 @@
       },
       enterItem(e) {
 		  console.log(e)
+		  if (e.path) {
+		  	uni.navigateTo({
+		  		url: e.path
+		  	});
+		  } else {
 		  uni.showToast({
 		        title: '模块建设中~',
 		        icon: 'none'
 		      });
+		}	  
       }
     }
   }

pages/work/record/RecordList.vue

@@ -0,0 +1,184 @@
+<template>
+	<scroll-view scroll-y class="container">
+		<view class="record-card" v-for="item in records" :key="item.id">
+			<view class="header-row">
+				<text class="department">{{ item.department }}</text>
+				<text class="status" :class="{'status-cancelled': item.status === '已取消'}">{{ item.status }}</text>
+			</view>
+
+			<view class="info-row">
+				<text class="label">医生：</text>
+				<text class="value">{{ item.doctor }}（{{ item.level }}）</text>
+			</view>
+
+			<view class="info-row">
+				<text class="label">午别：</text>
+				<text class="value">{{ item.period }}</text>
+			</view>
+
+			<view class="info-row">
+				<text class="label">时间：</text>
+				<text class="value">{{ item.date }}</text>
+			</view>
+
+			<view class="info-row">
+				<text class="label">号序：</text>
+				<text class="value">{{ item.serialNumber }}</text>
+			</view>
+
+			<view class="info-row">
+				<text class="label">费用：</text>
+				<text class="value fee">￥{{ item.fee.toFixed(2) }}</text>
+			</view>
+
+			<button class="cancel-btn" v-if="item.status !== '已取消'" @click="cancel(item.id)">
+				取消挂号
+			</button>
+		</view>
+	</scroll-view>
+</template>
+
+<script setup>
+	import {
+		ref
+	} from 'vue'
+
+	const records = ref([{
+			id: 1,
+			department: '心血管内科',
+			doctor: '张三',
+			level: '主任医师',
+			period: '上午',
+			date: '2025-06-05',
+			serialNumber: 'A123',
+			fee: 150,
+			status: '已挂号',
+		},
+		{
+			id: 2,
+			department: '神经内科',
+			doctor: '李四',
+			level: '副主任医师',
+			period: '下午',
+			date: '2025-06-06',
+			serialNumber: 'B045',
+			fee: 120,
+			status: '已挂号',
+		},
+	])
+
+	const cancel = (id) => {
+		const index = records.value.findIndex((r) => r.id === id)
+		if (index !== -1) {
+			records.value[index].status = '已取消'
+			// 这里可以扩展调用接口逻辑
+			uni.showToast({
+				title: '挂号已取消',
+				icon: 'success',
+			})
+		}
+	}
+</script>
+
+<style scoped>
+	.container {
+		padding: 24rpx;
+		background-color: #f0f4f8;
+		min-height: 100vh;
+		display: flex;
+		flex-direction: column;
+		gap: 24rpx;
+		font-family: "PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif;
+	}
+
+	/* 卡片整体 */
+	.record-card {
+		background: #ffffff;
+		border-radius: 20rpx;
+		padding: 24rpx 32rpx;
+		box-shadow: 0 8rpx 15rpx rgba(0, 43, 92, 0.1);
+		display: flex;
+		flex-direction: column;
+		gap: 16rpx;
+		margin-bottom: 20rpx;
+	}
+
+	/* 头部：科室 和 状态 */
+	.header-row {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		align-items: center;
+	}
+
+	.department {
+		font-size: 32rpx;
+		font-weight: 700;
+		color: #004a99;
+	}
+
+	.status {
+		font-size: 28rpx;
+		font-weight: 600;
+		color: #1890ff;
+		padding: 6rpx 18rpx;
+		border-radius: 16rpx;
+		background-color: #e6f7ff;
+		user-select: none;
+	}
+
+	.status-cancelled {
+		color: #ff4d4f;
+		background-color: #fff1f0;
+	}
+
+	/* 信息行 */
+	.info-row {
+		display: flex;
+		flex-direction: row;
+		gap: 10rpx;
+		font-size: 28rpx;
+		color: #33475b;
+		align-items: center;
+	}
+
+	.label {
+		font-weight: 600;
+		color: #102a43;
+		min-width: 100rpx;
+	}
+
+	.value {
+		flex: 1;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.fee {
+		color: #fa541c;
+		font-weight: 700;
+	}
+
+	/* 取消按钮 */
+	.cancel-btn {
+		align-self: flex-end;
+		background-color: #ff4d4f;
+		color: #fff;
+		border: none;
+		border-radius: 32rpx;
+		padding: 5rpx 30rpx;
+		font-size: 28rpx;
+		font-weight: 700;
+		cursor: pointer;
+		transition: background-color 0.3s ease;
+	}
+
+	.cancel-btn:hover {
+		background-color: #d9363e;
+	}
+
+	.cancel-btn:active {
+		background-color: #a93232;
+	}
+</style>

pages/work/report/InspectionDetail.vue

@@ -0,0 +1,156 @@
+<template>
+	<scroll-view scroll-y class="container">
+		<!-- 标题Banner -->
+		<view class="banner">
+			<text class="banner-title">📝 报告详情</text>
+		</view>
+
+		<!-- 报告基础信息 -->
+		<view class="section">
+			<text class="section-title">检查信息</text>
+			<view class="info-item"><text>项目名称：</text><text>{{ report.name }}</text></view>
+			<view class="info-item"><text>检查医生：</text><text>{{ report.doctor }}</text></view>
+			<view class="info-item"><text>开单时间：</text><text>{{ report.applyDate }}</text></view>
+			<view class="info-item"><text>报告时间：</text><text>{{ report.reportDate }}</text></view>
+		</view>
+
+		<!-- 检查结果 -->
+		<view class="section">
+			<text class="section-title">检查结果</text>
+			<text class="section-content">{{ report.result }}</text>
+		</view>
+
+		<!-- 结论建议 -->
+		<view class="section">
+			<text class="section-title">医生结论</text>
+			<text class="section-content">{{ report.conclusion }}</text>
+		</view>
+
+		<!-- 按钮 -->
+		<view class="footer-btn">
+			<button class="main-btn" @click="goBack">返回上一页</button>
+		</view>
+	</scroll-view>
+</template>
+
+<script setup>
+	import {
+		ref,
+		onMounted
+	} from 'vue'
+	import {
+		onLoad
+	} from '@dcloudio/uni-app'
+
+	const report = ref({
+		id: null,
+		name: '',
+		doctor: '',
+		applyDate: '',
+		reportDate: '',
+		result: '',
+		conclusion: ''
+	})
+
+	onLoad((options) => {
+		const reportId = options.id
+		// 模拟数据加载，建议替换为后端接口请求
+		if (reportId === '1') {
+			report.value = {
+				id: 1,
+				name: '胸部CT检查',
+				doctor: '张医生',
+				applyDate: '2025-06-10 09:15',
+				reportDate: '2025-06-10 17:30',
+				result: '影像显示右肺下叶有小结节，建议定期复查。',
+				conclusion: '建议每年复查一次，观察结节变化，保持良好作息。'
+			}
+		} else {
+			report.value = {
+				id: 2,
+				name: '血常规检验',
+				doctor: '李医生',
+				applyDate: '2025-06-08 10:00',
+				reportDate: '2025-06-08 13:40',
+				result: '白细胞数量正常，红细胞轻微偏低，血红蛋白正常。',
+				conclusion: '注意饮食营养，必要时补铁，定期复查。'
+			}
+		}
+	})
+
+	const goBack = () => {
+		uni.navigateBack()
+	}
+</script>
+
+<style scoped>
+	.container {
+		padding: 40rpx;
+		background-color: #f5f7fa;
+		min-height: 100vh;
+		box-sizing: border-box;
+	}
+
+	.banner {
+		background: linear-gradient(135deg, #2193b0, #6dd5ed);
+		border-radius: 24rpx;
+		padding: 40rpx 30rpx;
+		margin-bottom: 40rpx;
+		box-shadow: 0 8rpx 16rpx rgba(33, 147, 176, 0.3);
+	}
+
+	.banner-title {
+		color: white;
+		font-size: 36rpx;
+		font-weight: bold;
+		text-align: center;
+	}
+
+	.section {
+		background-color: #fff;
+		border-radius: 20rpx;
+		padding: 30rpx;
+		margin-bottom: 30rpx;
+		box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.05);
+	}
+
+	.section-title {
+		font-size: 32rpx;
+		color: #333;
+		font-weight: bold;
+		margin-bottom: 20rpx;
+		display: block;
+	}
+
+	.info-item {
+		display: flex;
+		justify-content: space-between;
+		font-size: 28rpx;
+		color: #666;
+		margin-bottom: 18rpx;
+	}
+
+	.section-content {
+		font-size: 28rpx;
+		color: #444;
+		line-height: 1.8;
+		white-space: pre-line;
+	}
+
+	.footer-btn {
+		margin-top: 40rpx;
+		display: flex;
+		justify-content: center;
+	}
+
+	.main-btn {
+		width: 80%;
+		padding: 28rpx 0;
+		font-size: 30rpx;
+		color: #fff;
+		border: none;
+		border-radius: 100rpx;
+		background: linear-gradient(to right, #36d1dc, #5b86e5);
+		box-shadow: 0 10rpx 24rpx rgba(91, 134, 229, 0.3);
+	}
+</style>

pages/work/report/InspectionList.vue

@@ -0,0 +1,194 @@
+<template>
+	<scroll-view scroll-y class="container">
+		<!-- Banner -->
+		<view class="banner">
+			<text class="banner-title">🧪 检查检验报告</text>
+		</view>
+
+		<!-- 检查报告卡片列表 -->
+		<view v-if="reportList.length" class="card-list">
+			<view class="card" v-for="item in reportList" :key="item.id">
+				<view class="card-header">
+					<image :src="item.icon" class="card-icon" />
+					<view class="header-info">
+						<text class="item-title">{{ item.name }}</text>
+						<text class="item-status">{{ item.status }}</text>
+					</view>
+				</view>
+				<view class="divider"></view>
+				<view class="card-info">
+					<text class="item-text">📅 开单时间：{{ item.applyDate }}</text>
+					<text class="item-text">📝 报告时间：{{ item.reportDate }}</text>
+				</view>
+				<view class="btn-group">
+					<button class="main-btn" @click="viewReport(item)">查看报告</button>
+				</view>
+			</view>
+		</view>
+
+		<!-- 空状态 -->
+		<view v-else class="empty-card">
+			<image src="/static/image/empty.png" class="empty-img" />
+			<text class="empty-text">暂无检查检验记录</text>
+		</view>
+	</scroll-view>
+</template>
+
+<script setup>
+	import {
+		ref
+	} from 'vue'
+
+	const reportList = ref([{
+			id: 1,
+			name: '胸部CT检查',
+			icon: '/static/icons/ct.png',
+			status: '✅ 已出报告',
+			applyDate: '2025-06-10 09:15',
+			reportDate: '2025-06-10 17:30'
+		},
+		{
+			id: 2,
+			name: '血常规检验',
+			icon: '/static/icons/blood.png',
+			status: '✅ 已出报告',
+			applyDate: '2025-06-08 10:00',
+			reportDate: '2025-06-08 13:40'
+		}
+	])
+
+	const viewReport = (item) => {
+		uni.navigateTo({
+			url: `/pages/inspection/ReportDetail?id=${item.id}`
+		})
+	}
+</script>
+
+<style scoped>
+	.container {
+		padding: 40rpx;
+		background-color: #f5f7fa;
+		min-height: 100vh;
+		box-sizing: border-box;
+	}
+
+	.banner {
+		background: linear-gradient(135deg, #6dd5ed, #2193b0);
+		border-radius: 24rpx;
+		padding: 40rpx 30rpx;
+		margin-bottom: 40rpx;
+		box-shadow: 0 8rpx 16rpx rgba(33, 147, 176, 0.3);
+	}
+
+	.banner-title {
+		color: white;
+		font-size: 36rpx;
+		font-weight: bold;
+		text-align: center;
+	}
+
+	.card-list {
+		display: flex;
+		flex-direction: column;
+		gap: 30rpx;
+	}
+
+	.card {
+		background-color: white;
+		border-radius: 20rpx;
+		padding: 30rpx;
+		box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.05);
+		display: flex;
+		flex-direction: column;
+	}
+
+	.card-header {
+		display: flex;
+		align-items: center;
+		margin-bottom: 20rpx;
+	}
+
+	.card-icon {
+		width: 64rpx;
+		height: 64rpx;
+		margin-right: 20rpx;
+		border-radius: 12rpx;
+		background-color: #eef5ff;
+		padding: 10rpx;
+	}
+
+	.header-info {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.item-title {
+		font-size: 32rpx;
+		color: #222;
+		font-weight: bold;
+	}
+
+	.item-status {
+		font-size: 28rpx;
+		color: #43cea2;
+		margin-top: 8rpx;
+	}
+
+	.divider {
+		height: 1px;
+		background-color: #eee;
+		margin: 20rpx 0;
+	}
+
+	.card-info {
+		font-size: 28rpx;
+		color: #666;
+		line-height: 1.6;
+		display: flex;
+		flex-direction: column;
+		gap: 10rpx;
+	}
+
+	.btn-group {
+		display: flex;
+		justify-content: flex-end;
+		margin-top: 20rpx;
+	}
+
+	.main-btn {
+		font-size: 28rpx;
+		color: white;
+		border: none;
+		border-radius: 100rpx;
+		background: linear-gradient(to right, #36d1dc, #5b86e5);
+		box-shadow: 0 6rpx 16rpx rgba(91, 134, 229, 0.3);
+		transition: all 0.2s ease-in-out;
+	}
+
+	.main-btn:active {
+		opacity: 0.9;
+		transform: scale(0.98);
+	}
+
+	.empty-card {
+		background-color: white;
+		border-radius: 20rpx;
+		padding: 60rpx 30rpx;
+		box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.05);
+		text-align: center;
+		margin-top: 100rpx;
+	}
+
+	.empty-img {
+		width: 180rpx;
+		height: 180rpx;
+		margin-bottom: 30rpx;
+		opacity: 0.8;
+	}
+
+	.empty-text {
+		font-size: 30rpx;
+		color: #999;
+	}
+</style>