<template>
|
<view class="case-record">
|
<!-- 统计卡片 -->
|
<view class="stats-card">
|
<view class="stat-item">
|
<text class="count">{{ stats.totalCases }}</text>
|
<text class="label">总上报量</text>
|
</view>
|
<view class="divider"></view>
|
<view class="stat-item">
|
<text class="count">{{ stats.readCases }}</text>
|
<text class="label">已阅读</text>
|
</view>
|
<view class="divider"></view>
|
<view class="stat-item">
|
<text class="count">{{ stats.agreedCases }}</text>
|
<text class="label">已同意</text>
|
</view>
|
</view>
|
|
<!-- 筛选栏 -->
|
<view class="filter-bar">
|
<view class="type-filter">
|
<text
|
v-for="(type, index) in caseTypes"
|
:key="index"
|
:class="{ active: currentType === type.value }"
|
@tap="selectType(type.value)"
|
>{{ type.label }}</text
|
>
|
</view>
|
|
<!-- 时间筛选 -->
|
<view class="date-filter">
|
<picker
|
mode="date"
|
:value="startDate"
|
:end="endDate"
|
@change="onStartDateChange"
|
>
|
<text>{{ startDate || "开始日期" }}</text>
|
</picker>
|
<text class="separator">至</text>
|
<picker
|
mode="date"
|
:value="endDate"
|
:start="startDate"
|
@change="onEndDateChange"
|
>
|
<text>{{ endDate || "结束日期" }}</text>
|
</picker>
|
</view>
|
</view>
|
|
<!-- 案例记录列表 -->
|
<scroll-view
|
scroll-y
|
class="case-list"
|
refresher-enabled
|
:refresher-triggered="refreshing"
|
@refresherrefresh="onRefresh"
|
@scrolltolower="onLoadMore"
|
>
|
<view
|
class="case-item card"
|
v-for="(caseItem, index) in filteredCases"
|
:key="index"
|
@tap="viewDetail(caseItem)"
|
>
|
<view class="header">
|
<view class="hospital-info">
|
<image :src="caseItem.hospitalLogo" mode="aspectFit" class="logo" />
|
<view class="info">
|
<text class="name">{{ caseItem.hospitalName }}</text>
|
<text class="type">{{ caseItem.caseType }}</text>
|
</view>
|
</view>
|
<text class="status" :class="caseItem.status.replace('ed', '')">{{
|
caseItem.statusText
|
}}</text>
|
</view>
|
|
<view class="detail-info">
|
<view class="info-item">
|
<text class="label">捐献编号</text>
|
<text class="value">{{ caseItem.donorNo }}</text>
|
</view>
|
<view class="info-item">
|
<text class="label">捐献者姓名</text>
|
<text class="value">{{ caseItem.donorName }}</text>
|
</view>
|
<view class="info-item">
|
<text class="label">证件号码</text>
|
<text class="value">{{ caseItem.idCardNo }}</text>
|
</view>
|
<view class="info-item">
|
<text class="label">性别/年龄</text>
|
<text class="value"
|
>{{ caseItem.gender }} / {{ caseItem.age }}岁</text
|
>
|
</view>
|
<view class="info-item">
|
<text class="label">血型</text>
|
<text class="value">{{ caseItem.bloodType }}</text>
|
</view>
|
<view class="info-item">
|
<text class="label">疾病诊断</text>
|
<text class="value">{{ caseItem.diagnosis }}</text>
|
</view>
|
<view class="info-item">
|
<text class="label">上报时间</text>
|
<text class="value">{{ caseItem.reportTime }}</text>
|
</view>
|
<view class="info-item">
|
<text class="label">上报人</text>
|
<text class="value">{{ caseItem.reporterName }}</text>
|
</view>
|
<view class="info-item" v-if="caseItem.reviewTime">
|
<text class="label">审核时间</text>
|
<text class="value">{{ caseItem.reviewTime }}</text>
|
</view>
|
<view class="info-item" v-if="caseItem.reviewerName">
|
<text class="label">审核人</text>
|
<text class="value">{{ caseItem.reviewerName }}</text>
|
</view>
|
</view>
|
<!-- 显示转运详情 -->
|
<!-- 在 .detail-info 部分之后，.footer 部分之前添加转运信息区域 -->
|
<view class="transport-section">
|
<view class="transport-info">
|
<text class="label">转运状态</text>
|
<text
|
class="transport-status"
|
:class="transportStatusMap[caseItem.transportStatus].class"
|
>
|
{{ transportStatusMap[caseItem.transportStatus].text }}
|
</text>
|
</view>
|
|
<!-- 显示转运详情 -->
|
<view
|
class="transport-details"
|
v-if="caseItem.transportStatus !== 'not_transported'"
|
>
|
<view class="detail-item">
|
<text class="detail-label">转运单号</text>
|
<text class="detail-value">{{ caseItem.transportOrderNo }}</text>
|
</view>
|
<view class="detail-item" v-if="caseItem.transportDetails">
|
<text class="detail-label">转运车辆</text>
|
<text class="detail-value">{{
|
caseItem.transportDetails.vehicle
|
}}</text>
|
</view>
|
<view
|
class="detail-item"
|
v-if="
|
caseItem.transportDetails &&
|
caseItem.transportStatus === 'transporting'
|
"
|
>
|
<text class="detail-label">当前位置</text>
|
<text class="detail-value">{{
|
caseItem.transportDetails.currentLocation
|
}}</text>
|
</view>
|
</view>
|
|
<!-- 操作按钮 -->
|
<view class="transport-actions">
|
<button
|
v-if="
|
caseItem.transportStatus === 'not_transported' &&
|
caseItem.status === 'agreed'
|
"
|
class="transport-btn primary"
|
@tap.stop="createTransportOrder(caseItem)"
|
>
|
创建转运单
|
</button>
|
|
<button
|
v-if="
|
caseItem.transportStatus === 'not_transported' &&
|
caseItem.status !== 'agreed'
|
"
|
class="transport-btn disabled"
|
disabled
|
>
|
需先同意案例
|
</button>
|
|
<button
|
v-if="caseItem.transportStatus !== 'not_transported'"
|
class="transport-btn secondary"
|
@tap.stop="viewTransportDetail(caseItem)"
|
>
|
查看转运详情
|
</button>
|
|
<button
|
v-if="caseItem.transportStatus === 'transporting'"
|
class="transport-btn track"
|
@tap.stop="trackTransport(caseItem)"
|
>
|
实时跟踪
|
</button>
|
</view>
|
</view>
|
<view class="footer">
|
<view class="action-info">
|
<text class="label">案例状态</text>
|
<text class="case-status">{{ caseItem.statusText }}</text>
|
</view>
|
<view class="actions">
|
<button
|
class="action-btn"
|
v-if="caseItem.status === 'reported'"
|
@tap.stop="withdrawCase(caseItem)"
|
>
|
撤回
|
</button>
|
<button
|
class="action-btn"
|
v-if="
|
caseItem.status === 'read' ||
|
caseItem.status === 'agreed' ||
|
caseItem.status === 'rejected'
|
"
|
@tap.stop="viewDetails(caseItem)"
|
>
|
查看详情
|
</button>
|
<button
|
class="action-btn secondary"
|
v-if="caseItem.status === 'reported'"
|
@tap.stop="editCase(caseItem)"
|
>
|
编辑
|
</button>
|
</view>
|
</view>
|
</view>
|
|
<!-- 加载更多 -->
|
<view class="load-more" v-if="hasMore">
|
<text>加载中...</text>
|
</view>
|
|
<!-- 空状态 -->
|
<view class="empty-state" v-if="filteredCases.length === 0">
|
<image src="/static/empty/no-case.png" mode="aspectFit" />
|
<text>暂无器官捐献案例记录</text>
|
</view>
|
</scroll-view>
|
|
<!-- 撤回确认弹窗 -->
|
<view class="modal-mask" v-if="showWithdrawModal">
|
<view class="modal-content">
|
<view class="modal-header">
|
<text class="modal-title">确认撤回</text>
|
</view>
|
<view class="modal-body">
|
<text>确定要撤回捐献案例 "{{ currentCase.donorNo }}" 吗？</text>
|
</view>
|
<view class="modal-footer">
|
<button class="modal-btn cancel" @tap="cancelWithdraw">取消</button>
|
<button class="modal-btn confirm" @tap="confirmWithdraw">
|
确认撤回
|
</button>
|
</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script setup>
|
import { ref, computed } from "vue";
|
import { onLoad, onShow } from "@dcloudio/uni-app";
|
import { useDict } from "@/utils/dict";
|
|
const dict = ref({});
|
const genderOptions = ref([]);
|
const educationOptions = ref([]);
|
const total = ref(0);
|
const pageNum = ref(1);
|
const pageSize = ref(10);
|
|
// 统计数据
|
const stats = ref({
|
totalCases: 8,
|
readCases: 4,
|
agreedCases: 2,
|
});
|
|
// 撤回确认弹窗相关
|
const showWithdrawModal = ref(false);
|
const currentCase = ref({});
|
|
onLoad(async (options) => {
|
// 获取字典数据
|
dict.value = await useDict(
|
"sys_IDType",
|
"sys_user_sex",
|
"sys_BloodType",
|
"sys_DiseaseType"
|
);
|
|
// 初始化选项数据
|
initOptions();
|
donatebaseinforeportList();
|
donateTotal();
|
});
|
onShow(() => {
|
// 这里可以添加从转运页面返回时的数据刷新逻辑
|
// 例如检查本地存储中是否有需要更新的转运状态
|
const transportUpdate = uni.getStorageSync("transportStatusUpdate");
|
if (transportUpdate) {
|
updateTransportStatus(transportUpdate.orderNo, transportUpdate.status);
|
uni.removeStorageSync("transportStatusUpdate");
|
}
|
});
|
|
// 初始化选项数据的方法
|
const initOptions = () => {
|
genderOptions.value = dict.value.sys_IDType || [];
|
educationOptions.value = dict.value.sys_user_sex || [];
|
};
|
const donatebaseinforeportList = async () => {
|
const params = {
|
pageNum: pageNum.value,
|
pageSize: pageSize.value,
|
};
|
const res = await uni.$uapi.post("/system/donatebaseinforeport/list", params);
|
total.value = res.total;
|
console.log(res.records, "11");
|
};
|
const donateTotal = async () => {
|
const res = await uni.$uapi.post("/system/donatebaseinforeport/getTotal");
|
console.log(res);
|
};
|
// 筛选相关
|
const caseTypes = [
|
{ label: "全部", value: "all" },
|
{ label: "已上报", value: "reported" },
|
{ label: "已阅读", value: "read" },
|
{ label: "已同意", value: "agreed" },
|
{ label: "已驳回", value: "rejected" },
|
];
|
const currentType = ref("all");
|
const startDate = ref("");
|
const endDate = ref("");
|
// 案例记录数据 - 增加更多数据[1,4](@ref)
|
const cases = ref([
|
{
|
id: 1,
|
donorNo: "DON20240325001",
|
hospitalName: "青岛镜湖医院",
|
hospitalLogo: "/static/hospital/kiang-wu.jpg",
|
caseType: "器官捐献案例",
|
donorName: "张三",
|
idCardNo: "370203198510123456",
|
gender: "男",
|
age: 38,
|
bloodType: "A型",
|
diagnosis: "脑外伤导致脑死亡",
|
reportTime: "2024-03-25 09:30",
|
reporterName: "李医生",
|
status: "agreed",
|
statusText: "已同意",
|
departmentName: "神经外科",
|
contactPerson: "王护士",
|
contactPhone: "13800138000",
|
redCrossOrg: "青岛市红十字会",
|
acquisitionOrg: "青岛市器官获取组织",
|
transportStatus: "not_transported", // 转运状态：not_transported-未转运, transporting-转运中, completed-已完成
|
transportOrderNo: "", // 转运单号
|
transportTime: "", // 转运时间
|
transportDetails: null, // 转运详情
|
},
|
{
|
id: 2,
|
donorNo: "DON20240320002",
|
hospitalName: "青岛科大医院",
|
hospitalLogo: "/static/hospital/must.jpg",
|
caseType: "器官捐献案例",
|
donorName: "李四",
|
idCardNo: "370205197805207890",
|
gender: "女",
|
age: 45,
|
bloodType: "O型",
|
diagnosis: "急性心肌梗死",
|
reportTime: "2024-03-20 15:00",
|
reporterName: "张医生",
|
status: "read",
|
statusText: "已阅读",
|
reviewTime: "2024-03-21 10:15",
|
reviewerName: "审核专员A",
|
departmentName: "心内科",
|
contactPerson: "赵护士",
|
contactPhone: "13900139000",
|
redCrossOrg: "青岛市红十字会",
|
acquisitionOrg: "青岛市器官获取组织",
|
transportStatus: "transporting", // 转运中
|
transportOrderNo: "TR20240321001",
|
transportTime: "2024-03-21 14:30",
|
transportDetails: {
|
driver: "张师傅",
|
vehicle: "鲁B12345",
|
phone: "13800138000",
|
estimatedTime: "2小时",
|
currentLocation: "青岛市南区",
|
},
|
},
|
{
|
id: 3,
|
donorNo: "DON20240318003",
|
hospitalName: "青岛大学附属医院",
|
hospitalLogo: "/static/hospital/qingda.jpg",
|
caseType: "器官捐献案例",
|
donorName: "王五",
|
idCardNo: "370211197212153214",
|
gender: "男",
|
age: 51,
|
bloodType: "B型",
|
diagnosis: "颅内出血",
|
reportTime: "2024-03-18 14:20",
|
reporterName: "刘医生",
|
status: "agreed",
|
statusText: "已同意",
|
reviewTime: "2024-03-19 09:45",
|
reviewerName: "审核专员B",
|
departmentName: "神经内科",
|
contactPerson: "钱护士",
|
contactPhone: "13600136000",
|
redCrossOrg: "青岛市红十字会",
|
acquisitionOrg: "青岛市器官获取组织",
|
transportStatus: "completed", // 已完成
|
transportOrderNo: "TR20240319001",
|
transportTime: "2024-03-19 11:20",
|
transportDetails: {
|
driver: "李师傅",
|
vehicle: "鲁B67890",
|
phone: "13900139000",
|
completedTime: "2024-03-19 13:45",
|
distance: "156公里",
|
},
|
},
|
{
|
id: 4,
|
donorNo: "DON20240315004",
|
hospitalName: "青岛市立医院",
|
hospitalLogo: "/static/hospital/shili.jpg",
|
caseType: "器官捐献案例",
|
donorName: "赵六",
|
idCardNo: "370205198803274561",
|
gender: "女",
|
age: 36,
|
bloodType: "AB型",
|
diagnosis: "多器官功能衰竭",
|
reportTime: "2024-03-15 16:40",
|
reporterName: "陈医生",
|
status: "rejected",
|
statusText: "已驳回",
|
reviewTime: "2024-03-16 11:20",
|
reviewerName: "审核专员C",
|
rejectReason: "资料不完整，需补充家属同意书",
|
departmentName: "ICU",
|
contactPerson: "孙护士",
|
contactPhone: "13700137000",
|
redCrossOrg: "青岛市红十字会",
|
acquisitionOrg: "青岛市器官获取组织",
|
transportStatus: "not_transported", // 转运状态：not_transported-未转运, transporting-转运中, completed-已完成
|
transportOrderNo: "", // 转运单号
|
transportTime: "", // 转运时间
|
transportDetails: null, // 转运详情
|
},
|
{
|
id: 5,
|
donorNo: "DON20240310005",
|
hospitalName: "青岛眼科医院",
|
hospitalLogo: "/static/hospital/yanke.jpg",
|
caseType: "角膜捐献案例",
|
donorName: "孙七",
|
idCardNo: "370203199205187896",
|
gender: "男",
|
age: 32,
|
bloodType: "O型",
|
diagnosis: "视网膜母细胞瘤",
|
reportTime: "2024-03-10 08:15",
|
reporterName: "眼科张医生",
|
status: "read",
|
statusText: "已阅读",
|
reviewTime: "2024-03-11 14:30",
|
reviewerName: "审核专员A",
|
departmentName: "眼科",
|
contactPerson: "周护士",
|
contactPhone: "13500135000",
|
redCrossOrg: "青岛市红十字会",
|
acquisitionOrg: "青岛市眼库",
|
transportStatus: "not_transported", // 转运状态：not_transported-未转运, transporting-转运中, completed-已完成
|
transportOrderNo: "", // 转运单号
|
transportTime: "", // 转运时间
|
transportDetails: null, // 转运详情
|
},
|
{
|
id: 6,
|
donorNo: "DON20240305006",
|
hospitalName: "青岛儿童医院",
|
hospitalLogo: "/static/hospital/children.jpg",
|
caseType: "器官捐献案例",
|
donorName: "周八",
|
idCardNo: "370211201802153248",
|
gender: "女",
|
age: 6,
|
bloodType: "A型",
|
diagnosis: "先天性心脏病",
|
reportTime: "2024-03-05 11:25",
|
reporterName: "儿科李医生",
|
status: "reported",
|
statusText: "已上报",
|
departmentName: "儿科ICU",
|
contactPerson: "吴护士",
|
contactPhone: "13400134000",
|
redCrossOrg: "青岛市红十字会",
|
acquisitionOrg: "青岛市器官获取组织",
|
transportStatus: "not_transported", // 转运状态：not_transported-未转运, transporting-转运中, completed-已完成
|
transportOrderNo: "", // 转运单号
|
transportTime: "", // 转运时间
|
transportDetails: null, // 转运详情
|
},
|
]);
|
// 转运状态映射
|
const transportStatusMap = {
|
not_transported: {
|
text: "未转运",
|
color: "warning",
|
class: "not-transported",
|
},
|
transporting: { text: "转运中", color: "primary", class: "transporting" },
|
completed: { text: "已完成", color: "success", class: "completed" },
|
};
|
|
// 筛选记录[3](@ref)
|
const filteredCases = computed(() => {
|
let result = cases.value;
|
|
// 状态筛选
|
if (currentType.value !== "all") {
|
result = result.filter((caseItem) => caseItem.status === currentType.value);
|
}
|
|
// 日期筛选
|
if (startDate.value && endDate.value) {
|
result = result.filter((caseItem) => {
|
const caseDate = caseItem.reportTime.split(" ")[0];
|
return caseDate >= startDate.value && caseDate <= endDate.value;
|
});
|
}
|
|
return result;
|
});
|
|
// 分页相关
|
const hasMore = ref(true);
|
const refreshing = ref(false);
|
// 创建转运单
|
const createTransportOrder = (caseItem) => {
|
console.log(caseItem);
|
|
uni.navigateTo({
|
url: `/pages/case/transferinfo?caseId=${caseItem.id}&donorNo=${caseItem.donorNo}`,
|
});
|
};
|
|
// 查看转运详情
|
const viewTransportDetail = (caseItem) => {
|
uni.navigateTo({
|
url: `/pages/transport/detail?orderNo=${caseItem.transportOrderNo}`,
|
});
|
};
|
|
// 实时跟踪
|
const trackTransport = (caseItem) => {
|
uni.navigateTo({
|
url: `/pages/transport/track?orderNo=${caseItem.transportOrderNo}`,
|
});
|
};
|
|
// 更新转运状态（用于从转运页面返回时刷新数据）
|
const updateTransportStatus = (orderNo, newStatus) => {
|
const caseItem = cases.value.find(
|
(item) => item.transportOrderNo === orderNo
|
);
|
if (caseItem) {
|
caseItem.transportStatus = newStatus;
|
}
|
};
|
// 选择类型
|
const selectType = (type) => {
|
currentType.value = type;
|
};
|
|
// 日期选择
|
const onStartDateChange = (e) => {
|
startDate.value = e.detail.value;
|
};
|
|
const onEndDateChange = (e) => {
|
endDate.value = e.detail.value;
|
};
|
|
// 查看详情
|
const viewDetail = (caseItem) => {
|
uni.navigateTo({
|
url: `/pages/case/detail?id=${caseItem.id}`,
|
});
|
};
|
|
// 撤回案例[7](@ref)
|
const withdrawCase = (caseItem) => {
|
currentCase.value = caseItem;
|
showWithdrawModal.value = true;
|
};
|
|
// 确认撤回
|
const confirmWithdraw = () => {
|
const index = cases.value.findIndex(
|
(item) => item.id === currentCase.value.id
|
);
|
if (index !== -1) {
|
// 从列表中移除已撤回的案例[4](@ref)
|
cases.value.splice(index, 1);
|
// 更新统计数据
|
stats.value.totalCases -= 1;
|
uni.showToast({
|
title: "撤回成功",
|
icon: "success",
|
});
|
}
|
showWithdrawModal.value = false;
|
};
|
|
// 取消撤回
|
const cancelWithdraw = () => {
|
showWithdrawModal.value = false;
|
};
|
|
// 查看详情
|
const viewDetails = (caseItem) => {
|
uni.navigateTo({
|
url: `/pages/case/detail?id=${caseItem.id}`,
|
});
|
};
|
|
// 编辑案例
|
const editCase = (caseItem) => {
|
uni.navigateTo({
|
url: `/pages/case/edit?id=${caseItem.id}`,
|
});
|
};
|
|
// 下拉刷新
|
const onRefresh = () => {
|
refreshing.value = true;
|
loadCases();
|
setTimeout(() => {
|
refreshing.value = false;
|
}, 1000);
|
};
|
|
// 加载更多
|
const onLoadMore = () => {
|
if (!hasMore.value) return;
|
loadCases();
|
};
|
|
// 加载记录
|
const loadCases = () => {
|
// 这里调用API加载数据
|
setTimeout(() => {
|
hasMore.value = false;
|
}, 1000);
|
};
|
</script>
|
|
<style lang="scss">
|
.case-record {
|
min-height: 100vh;
|
background: $bg-color;
|
|
.stats-card {
|
margin: 20rpx;
|
background: $primary-gradient;
|
border-radius: $radius-lg;
|
padding: 40rpx 30rpx;
|
display: flex;
|
align-items: center;
|
box-shadow: $shadow-md;
|
|
.stat-item {
|
flex: 1;
|
text-align: center;
|
|
.count {
|
font-size: 40rpx;
|
color: #fff;
|
font-weight: bold;
|
margin-bottom: 8rpx;
|
display: block;
|
}
|
|
.label {
|
font-size: 26rpx;
|
color: rgba(255, 255, 255, 0.9);
|
}
|
}
|
|
.divider {
|
width: 2rpx;
|
height: 60rpx;
|
background: rgba(255, 255, 255, 0.2);
|
}
|
}
|
|
.filter-bar {
|
background: #fff;
|
padding: 20rpx;
|
margin-bottom: 20rpx;
|
box-shadow: $shadow-sm;
|
|
.type-filter {
|
display: flex;
|
margin-bottom: 20rpx;
|
overflow-x: hidden;
|
|
text {
|
flex: 1;
|
text-align: center;
|
font-size: 28rpx;
|
color: $text-regular;
|
padding: 12rpx 0;
|
position: relative;
|
white-space: nowrap;
|
|
&.active {
|
color: $primary-color;
|
font-weight: bold;
|
|
&::after {
|
content: "";
|
position: absolute;
|
left: 50%;
|
bottom: 0;
|
transform: translateX(-50%);
|
width: 40rpx;
|
height: 4rpx;
|
background: $primary-color;
|
border-radius: 2rpx;
|
}
|
}
|
}
|
}
|
|
.date-filter {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
overflow-x: hidden;
|
|
picker {
|
flex: 1;
|
width: 0;
|
|
text {
|
display: block;
|
text-align: center;
|
font-size: 26rpx;
|
color: $text-regular;
|
padding: 12rpx 0;
|
background: $bg-color;
|
border-radius: $radius-md;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
}
|
}
|
|
.separator {
|
padding: 0 20rpx;
|
font-size: 26rpx;
|
color: $text-secondary;
|
}
|
}
|
}
|
|
.case-list {
|
height: calc(100vh - 300rpx);
|
overflow-x: hidden;
|
&::-webkit-scrollbar {
|
display: none;
|
}
|
|
.case-item {
|
margin: 20rpx;
|
background: #fff;
|
border-radius: $radius-lg;
|
padding: 30rpx;
|
box-shadow: $shadow-sm;
|
|
.header {
|
display: flex;
|
justify-content: space-between;
|
align-items: flex-start;
|
margin-bottom: 20rpx;
|
|
.hospital-info {
|
display: flex;
|
align-items: center;
|
|
.logo {
|
width: 60rpx;
|
height: 60rpx;
|
border-radius: $radius-sm;
|
margin-right: 16rpx;
|
}
|
|
.info {
|
.name {
|
font-size: 30rpx;
|
color: $text-primary;
|
font-weight: bold;
|
margin-bottom: 4rpx;
|
display: block;
|
}
|
|
.type {
|
font-size: 26rpx;
|
color: $text-regular;
|
}
|
}
|
}
|
|
.status {
|
font-size: 24rpx;
|
padding: 4rpx 12rpx;
|
border-radius: $radius-sm;
|
|
&.report {
|
color: $warning;
|
background: rgba($warning, 0.1);
|
}
|
|
&.read {
|
color: $info;
|
background: rgba($info, 0.1);
|
}
|
|
&.agree {
|
color: $success;
|
background: rgba($success, 0.1);
|
}
|
|
&.reject {
|
color: $danger;
|
background: rgba($danger, 0.1);
|
}
|
}
|
}
|
|
.detail-info {
|
padding: 20rpx 0;
|
border-top: 1rpx solid #eee;
|
border-bottom: 1rpx solid #eee;
|
|
.info-item {
|
display: flex;
|
justify-content: space-between;
|
margin-bottom: 12rpx;
|
|
&:last-child {
|
margin-bottom: 0;
|
}
|
|
.label {
|
font-size: 26rpx;
|
color: $text-regular;
|
min-width: 140rpx;
|
}
|
|
.value {
|
font-size: 26rpx;
|
color: $text-primary;
|
flex: 1;
|
text-align: right;
|
}
|
}
|
}
|
|
.footer {
|
padding-top: 20rpx;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
|
.action-info {
|
.label {
|
font-size: 26rpx;
|
color: $text-regular;
|
margin-right: 12rpx;
|
}
|
|
.case-status {
|
font-size: 28rpx;
|
color: $primary-color;
|
font-weight: bold;
|
}
|
}
|
|
.actions {
|
display: flex;
|
gap: 20rpx;
|
|
.action-btn {
|
height: 60rpx;
|
line-height: 60rpx;
|
padding: 0 30rpx;
|
font-size: 26rpx;
|
color: $primary-color;
|
background: $primary-light;
|
border-radius: $radius-xl;
|
|
&.secondary {
|
color: $text-regular;
|
background: #f5f5f5;
|
}
|
|
&:active {
|
opacity: 0.8;
|
}
|
}
|
}
|
}
|
|
&:active {
|
transform: scale(0.99);
|
}
|
}
|
}
|
.transport-section {
|
padding: 20rpx 0;
|
border-top: 1rpx solid #eee;
|
border-bottom: 1rpx solid #eee;
|
margin: 20rpx 0;
|
|
.transport-info {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 20rpx;
|
|
.label {
|
font-size: 26rpx;
|
color: #606266; /* 替换 $text-regular */
|
font-weight: bold;
|
}
|
|
.transport-status {
|
font-size: 26rpx;
|
padding: 6rpx 16rpx;
|
border-radius: 8rpx; /* 替换 $radius-sm，假设为8rpx */
|
|
&.not-transported {
|
color: #f0ad4e; /* 替换 $warning */
|
background: rgba(240, 173, 78, 0.1); /* 使用对应的rgba颜色 */
|
}
|
|
&.transporting {
|
color: #007aff; /* 替换 $primary-color */
|
background: rgba(0, 122, 255, 0.1);
|
}
|
|
&.completed {
|
color: #4cd964; /* 替换 $success */
|
background: rgba(76, 217, 100, 0.1);
|
}
|
}
|
}
|
|
.transport-details {
|
background: #f5f5f5; /* 替换 $bg-color */
|
border-radius: 16rpx; /* 替换 $radius-md，假设为16rpx */
|
padding: 20rpx;
|
margin-bottom: 20rpx;
|
|
.detail-item {
|
display: flex;
|
justify-content: space-between;
|
margin-bottom: 12rpx;
|
|
&:last-child {
|
margin-bottom: 0;
|
}
|
|
.detail-label {
|
font-size: 24rpx;
|
color: #606266; /* 替换 $text-regular */
|
}
|
|
.detail-value {
|
font-size: 24rpx;
|
color: #303133; /* 替换 $text-primary */
|
font-weight: 500;
|
}
|
}
|
}
|
|
.transport-actions {
|
display: flex;
|
gap: 20rpx;
|
flex-wrap: wrap;
|
|
.transport-btn {
|
height: 56rpx;
|
line-height: 56rpx;
|
padding: 0 24rpx;
|
font-size: 24rpx;
|
border-radius: 48rpx; /* 替换 $radius-xl，假设为48rpx */
|
border: none;
|
|
&.primary {
|
color: #fff;
|
background: #007aff; /* 替换 $primary-color */
|
}
|
|
&.secondary {
|
color: #007aff; /* 替换 $primary-color */
|
background: rgba(0, 122, 255, 0.1);
|
border: 1rpx solid #007aff; /* 替换 $primary-color */
|
}
|
|
&.track {
|
color: #fff;
|
background: #f0ad4e; /* 替换 $warning */
|
}
|
|
&.disabled {
|
color: #c0c4cc; /* 替换 $text-disabled */
|
background: #f5f5f5; /* 替换 $bg-color */
|
border: 1rpx solid #dcdfe6; /* 替换 $border-color */
|
}
|
|
&:active:not(.disabled) {
|
opacity: 0.8;
|
transform: scale(0.98);
|
}
|
}
|
}
|
}
|
.empty-state {
|
padding: 120rpx 0;
|
text-align: center;
|
|
image {
|
width: 240rpx;
|
height: 240rpx;
|
margin-bottom: 30rpx;
|
}
|
|
text {
|
font-size: 28rpx;
|
color: $text-secondary;
|
}
|
}
|
|
/* 撤回确认弹窗样式 */
|
.modal-mask {
|
position: fixed;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
background: rgba(0, 0, 0, 0.5);
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
z-index: 1000;
|
}
|
|
.modal-content {
|
background: #fff;
|
border-radius: 20rpx;
|
width: 600rpx;
|
overflow: hidden;
|
}
|
|
.modal-header {
|
padding: 40rpx 40rpx 20rpx;
|
text-align: center;
|
}
|
|
.modal-title {
|
font-size: 32rpx;
|
font-weight: bold;
|
color: $text-primary;
|
}
|
|
.modal-body {
|
padding: 20rpx 40rpx 40rpx;
|
text-align: center;
|
font-size: 28rpx;
|
color: $text-regular;
|
}
|
|
.modal-footer {
|
display: flex;
|
border-top: 1rpx solid #eee;
|
}
|
|
.modal-btn {
|
flex: 1;
|
height: 80rpx;
|
line-height: 80rpx;
|
font-size: 28rpx;
|
border: none;
|
border-radius: 0;
|
background: transparent;
|
|
&.cancel {
|
color: $text-regular;
|
border-right: 1rpx solid #eee;
|
}
|
|
&.confirm {
|
color: $danger;
|
font-weight: bold;
|
}
|
|
&:active {
|
background: #f5f5f5;
|
}
|
}
|
}
|
</style>
|
