<template>
|
<view class="expert-review-page">
|
<!-- 审查任务概览 - 优化后的紧凑布局 -->
|
<view class="review-overview card">
|
<view class="overview-header">
|
<text class="title">伦理审查任务</text>
|
<view class="status-badge" :class="reviewStatus">
|
{{ statusText }}
|
</view>
|
</view>
|
|
<!-- 紧凑型基础信息布局 -->
|
<view class="compact-info-grid">
|
<view class="compact-info-item">
|
<up-icon name="file-text" size="14" color="#909399" />
|
<text class="compact-label">住院号</text>
|
<text class="compact-value">{{ caseInfo.hospitalNo }}</text>
|
</view>
|
<view class="compact-info-item">
|
<up-icon name="account" size="14" color="#909399" />
|
<text class="compact-label">捐献者</text>
|
<text class="compact-value">{{ caseInfo.donorName }}</text>
|
</view>
|
<view class="compact-info-item">
|
<up-icon name="man" size="14" color="#909399" />
|
<text class="compact-label">性别/年龄</text>
|
<text class="compact-value">{{ caseInfo.gender }}/{{ caseInfo.age }}岁</text>
|
</view>
|
<view class="compact-info-item">
|
<up-icon name="heart" size="14" color="#909399" />
|
<text class="compact-label">疾病诊断</text>
|
<text class="compact-value">{{ caseInfo.diagnosis }}</text>
|
</view>
|
</view>
|
</view>
|
|
<!-- 优化后的附件区域 - 紧凑列表式设计 -->
|
<view class="materials-section card">
|
<view class="section-header">
|
<text class="section-title">审查材料</text>
|
<text class="material-count">{{ materials.length }}个文件</text>
|
</view>
|
|
<view class="compact-material-list">
|
<view
|
v-for="material in materials"
|
:key="material.id"
|
class="compact-material-item"
|
@tap="previewMaterial(material)"
|
>
|
<view class="material-left">
|
<up-icon :name="material.icon" :color="material.color" size="18" />
|
<text class="file-name">{{ material.name }}</text>
|
</view>
|
<view class="material-right">
|
<text class="file-size">{{ material.size }}</text>
|
<up-icon name="arrow-right" size="14" color="#c0c4cc" />
|
</view>
|
</view>
|
</view>
|
</view>
|
|
<!-- 审查表单 -->
|
<view class="review-form card">
|
<view class="section-header">
|
<text class="section-title">审查意见</text>
|
</view>
|
|
<view class="form-content">
|
<!-- 使用uView单选组件替代自定义实现 -->
|
<view class="form-group">
|
<text class="form-label">审查结论</text>
|
<u-radio-group
|
v-model="form.conclusion"
|
placement="column"
|
activeColor="#007aff"
|
@change="onConclusionChange"
|
>
|
<u-radio
|
v-for="option in conclusionOptions"
|
:key="option.value"
|
:name="option.value"
|
:label="option.label"
|
:customStyle="{ marginBottom: '16rpx' }"
|
></u-radio>
|
</u-radio-group>
|
</view>
|
|
<!-- 审查意见 -->
|
<view class="form-group">
|
<text class="form-label">详细意见</text>
|
<u--textarea
|
v-model="form.opinion"
|
placeholder="请输入详细的审查意见和改进建议..."
|
maxlength="1000"
|
count
|
:height="120"
|
border="surround"
|
></u--textarea>
|
</view>
|
|
<!-- 风险评估 -->
|
<view class="form-group">
|
<text class="form-label">风险评估</text>
|
<view class="risk-assessment">
|
<view class="risk-item">
|
<text class="risk-label">受试者风险等级</text>
|
<view class="risk-slider-compact">
|
<view class="risk-levels">
|
<text class="level-label" :class="{ active: form.riskLevel >= 1 }">低</text>
|
<text class="level-label" :class="{ active: form.riskLevel >= 2 }">中低</text>
|
<text class="level-label" :class="{ active: form.riskLevel >= 3 }">中</text>
|
<text class="level-label" :class="{ active: form.riskLevel >= 4 }">中高</text>
|
<text class="level-label" :class="{ active: form.riskLevel >= 5 }">高</text>
|
</view>
|
<slider
|
v-model="form.riskLevel"
|
min="1"
|
max="5"
|
step="1"
|
activeColor="#f56c6c"
|
backgroundColor="#e4e7ed"
|
block-color="#f56c6c"
|
block-size="20"
|
/>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
<!-- 签名确认 -->
|
<view class="signature-section">
|
<view class="expert-signature">
|
<up-icon name="edit-pen" size="16" color="#007aff" />
|
<text class="signature-text">审查专家：{{ expertInfo.name }}</text>
|
</view>
|
<view class="time-signature">
|
<up-icon name="clock" size="16" color="#007aff" />
|
<text class="signature-text">{{ currentTime }}</text>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
<!-- 操作按钮 -->
|
<view class="action-bar-compact">
|
<button
|
class="action-btn save-btn"
|
@tap="saveDraft"
|
|
>
|
<up-icon name="file-text" size="16" color="#606266" />
|
<text>保存草稿</text>
|
</button>
|
<button
|
class="action-btn submit-btn"
|
@tap="submitReview"
|
:disabled="!canSubmit"
|
>
|
<up-icon name="checkmark" size="16" color="#fff" />
|
<text>提交审查</text>
|
</button>
|
</view>
|
|
<!-- 提交确认弹窗 -->
|
<u-modal
|
:show="showSubmitModal"
|
title="确认提交"
|
content="确定要提交审查意见吗？提交后将无法修改。"
|
showCancelButton
|
@confirm="confirmSubmit"
|
@cancel="showSubmitModal = false"
|
></u-modal>
|
</view>
|
</template>
|
|
<script setup>
|
import { ref, computed, onMounted } from "vue";
|
import { onLoad } from "@dcloudio/uni-app";
|
|
// 响应式数据
|
const caseInfo = ref({
|
hospitalNo: "D230415",
|
donorName: "张某某",
|
gender: "男",
|
age: "45",
|
diagnosis: "终末期肝病"
|
});
|
|
const materials = ref([
|
{ id: 1, name: "捐献者知情同意书.pdf", icon: "file-text", color: "#f56c6c", size: "2.3MB" },
|
{ id: 2, name: "医学评估报告.docx", icon: "file-text", color: "#1890ff", size: "1.1MB" },
|
{ id: 3, name: "实验室检查结果.xlsx", icon: "file-text", color: "#52c41a", size: "0.8MB" },
|
{ id: 4, name: "影像学资料.jpg", icon: "photo", color: "#fa8c16", size: "3.2MB" }
|
]);
|
|
const form = ref({
|
conclusion: "",
|
opinion: "",
|
riskLevel: 3
|
});
|
|
const expertInfo = ref({
|
name: "孔心涓",
|
title: "主委专家"
|
});
|
|
const reviewStatus = ref("pending");
|
const showSubmitModal = ref(false);
|
|
// 计算属性
|
const statusText = computed(() => {
|
const statusMap = {
|
pending: "待审查",
|
drafted: "草稿",
|
submitted: "已提交"
|
};
|
return statusMap[reviewStatus.value];
|
});
|
|
const canSubmit = computed(() => {
|
return form.value.conclusion !== "" && form.value.opinion.trim().length > 10;
|
});
|
|
const currentTime = computed(() => {
|
return new Date().toLocaleString('zh-CN', {
|
year: 'numeric',
|
month: '2-digit',
|
day: '2-digit',
|
hour: '2-digit',
|
minute: '2-digit'
|
});
|
});
|
|
const conclusionOptions = ref([
|
{ label: "同意", value: "approved" },
|
{ label: "修改后同意", value: "approved_with_modifications" },
|
{ label: "修改后重审", value: "re-review" },
|
{ label: "不同意", value: "disapproved" }
|
]);
|
|
// 方法
|
const loadReviewData = (reviewId) => {
|
console.log("加载审查数据:", reviewId);
|
};
|
|
const previewMaterial = (material) => {
|
uni.showToast({
|
title: `预览: ${material.name}`,
|
icon: "none"
|
});
|
};
|
|
const onConclusionChange = (value) => {
|
console.log("选中结论:", value);
|
};
|
|
const saveDraft = () => {
|
uni.showToast({
|
title: "草稿保存成功",
|
icon: "success"
|
});
|
reviewStatus.value = "drafted";
|
};
|
|
const submitReview = () => {
|
showSubmitModal.value = true;
|
};
|
|
const confirmSubmit = () => {
|
uni.showLoading({ title: "提交中..." });
|
|
setTimeout(() => {
|
uni.hideLoading();
|
uni.showToast({
|
title: "审查意见提交成功",
|
icon: "success"
|
});
|
reviewStatus.value = "submitted";
|
showSubmitModal.value = false;
|
|
setTimeout(() => {
|
uni.navigateBack();
|
}, 1500);
|
}, 2000);
|
};
|
</script>
|
|
<style lang="scss">
|
.expert-review-page {
|
min-height: 100vh;
|
background: #f5f7fa;
|
padding: 20rpx;
|
padding-bottom: 140rpx;
|
|
.card {
|
background: #fff;
|
border-radius: 16rpx;
|
margin-bottom: 20rpx;
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
|
}
|
|
.review-overview {
|
padding: 24rpx;
|
|
.overview-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 20rpx;
|
|
.title {
|
font-size: 32rpx;
|
font-weight: 600;
|
color: #303133;
|
}
|
|
.status-badge {
|
padding: 6rpx 12rpx;
|
border-radius: 12rpx;
|
font-size: 22rpx;
|
font-weight: 500;
|
|
&.pending {
|
background: #fff2e8;
|
color: #fa8c16;
|
}
|
&.drafted {
|
background: #e6f7ff;
|
color: #1890ff;
|
}
|
&.submitted {
|
background: #f6ffed;
|
color: #52c41a;
|
}
|
}
|
}
|
|
.compact-info-grid {
|
display: grid;
|
grid-template-columns: 1fr 1fr;
|
gap: 16rpx;
|
|
.compact-info-item {
|
display: flex;
|
align-items: center;
|
padding: 12rpx;
|
background: #f8f9fa;
|
border-radius: 8rpx;
|
|
.compact-label {
|
font-size: 24rpx;
|
color: #909399;
|
margin: 0 8rpx 0 12rpx;
|
}
|
|
.compact-value {
|
font-size: 24rpx;
|
color: #303133;
|
font-weight: 500;
|
flex: 1;
|
}
|
}
|
}
|
}
|
|
.materials-section {
|
padding: 24rpx;
|
|
.section-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 20rpx;
|
|
.section-title {
|
font-size: 28rpx;
|
font-weight: 600;
|
color: #303133;
|
}
|
|
.material-count {
|
font-size: 24rpx;
|
color: #909399;
|
}
|
}
|
|
.compact-material-list {
|
.compact-material-item {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding: 20rpx;
|
border-bottom: 1rpx solid #f0f0f0;
|
|
&:last-child {
|
border-bottom: none;
|
}
|
|
.material-left {
|
display: flex;
|
align-items: center;
|
flex: 1;
|
|
.file-name {
|
font-size: 26rpx;
|
color: #303133;
|
margin-left: 16rpx;
|
max-width: 400rpx;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
}
|
}
|
|
.material-right {
|
display: flex;
|
align-items: center;
|
|
.file-size {
|
font-size: 22rpx;
|
color: #909399;
|
margin-right: 12rpx;
|
}
|
}
|
|
&:active {
|
background: #f8f9fa;
|
}
|
}
|
}
|
}
|
|
.review-form {
|
padding: 24rpx;
|
|
.form-group {
|
margin-bottom: 32rpx;
|
|
.form-label {
|
display: block;
|
font-size: 28rpx;
|
font-weight: 600;
|
color: #303133;
|
margin-bottom: 20rpx;
|
}
|
}
|
|
.risk-assessment {
|
.risk-item {
|
.risk-label {
|
display: block;
|
font-size: 26rpx;
|
color: #606266;
|
margin-bottom: 16rpx;
|
}
|
|
.risk-slider-compact {
|
.risk-levels {
|
display: flex;
|
justify-content: space-between;
|
margin-bottom: 12rpx;
|
|
.level-label {
|
font-size: 22rpx;
|
color: #c0c4cc;
|
transition: color 0.3s;
|
|
&.active {
|
color: #f56c6c;
|
font-weight: 500;
|
}
|
}
|
}
|
}
|
}
|
}
|
|
.signature-section {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 20rpx;
|
background: #f8f9fa;
|
border-radius: 8rpx;
|
margin-top: 32rpx;
|
|
.expert-signature,
|
.time-signature {
|
display: flex;
|
align-items: center;
|
|
.signature-text {
|
font-size: 24rpx;
|
color: #606266;
|
margin-left: 8rpx;
|
}
|
}
|
}
|
}
|
|
.action-bar-compact {
|
position: fixed;
|
bottom: 96rpx;
|
left: 0;
|
right: 0;
|
display: flex;
|
gap: 20rpx;
|
padding: 20rpx;
|
background: #fff;
|
border-top: 1rpx solid #e4e7ed;
|
box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.08);
|
|
.action-btn {
|
flex: 1;
|
height: 80rpx;
|
border: none;
|
border-radius: 40rpx;
|
font-size: 28rpx;
|
font-weight: 500;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
gap: 8rpx;
|
|
&.save-btn {
|
background: #f5f5f5;
|
color: #606266;
|
}
|
|
&.submit-btn {
|
background: linear-gradient(135deg, #0f95b0, #89C4C1) !important;
|
color: #fff;
|
|
&:disabled {
|
background: #c0c4cc !important;
|
opacity: 0.6;
|
}
|
}
|
|
&:active:not(:disabled) {
|
transform: scale(0.98);
|
}
|
}
|
}
|
}
|
|
/* 响应式设计 */
|
@media (max-width: 768px) {
|
.expert-review-page {
|
padding: 20rpx;
|
padding-bottom: 120rpx;
|
|
.review-overview .compact-info-grid {
|
grid-template-columns: 1fr;
|
}
|
|
.action-bar-compact {
|
padding: 16rpx;
|
gap: 16rpx;
|
|
.action-btn {
|
height: 72rpx;
|
font-size: 26rpx;
|
}
|
}
|
}
|
}
|
</style>
|
