<template>
|
<view class="task-detail-container">
|
<view class="task-header">
|
<text class="task-title">{{ task.title }}</text>
|
<view class="task-status" :class="'status-' + task.status">
|
{{ getStatusText(task.status) }}
|
</view>
|
</view>
|
|
<!-- 普通任务详情 -->
|
<view class="task-info-section" v-if="isNormalTask">
|
<view class="info-item">
|
<view class="label">任务编号:</view>
|
<view class="value">{{ task.taskNo }}</view>
|
</view>
|
|
<view class="info-item">
|
<view class="label">任务类型:</view>
|
<view class="value">{{ getTaskTypeText(task.type) }}</view>
|
</view>
|
|
<view class="info-item">
|
<view class="label">车辆信息:</view>
|
<view class="value">{{ task.vehicle }}</view>
|
</view>
|
|
<view class="info-item">
|
<view class="label">出发地:</view>
|
<view class="value">{{ task.startLocation }}</view>
|
</view>
|
|
<view class="info-item">
|
<view class="label">目的地:</view>
|
<view class="value">{{ task.endLocation }}</view>
|
</view>
|
|
<view class="info-item">
|
<view class="label">出发时间:</view>
|
<view class="value">{{ task.startTime }}</view>
|
</view>
|
|
<view class="info-item">
|
<view class="label">执行人员:</view>
|
<view class="value">{{ task.assignee }}</view>
|
</view>
|
|
<view class="info-item">
|
<view class="label">任务描述:</view>
|
<view class="value">{{ task.description || '无描述信息' }}</view>
|
</view>
|
|
<view class="info-item">
|
<view class="label">行驶公里数:</view>
|
<view class="value">{{ task.distance || '未填写' }}</view>
|
</view>
|
|
<view class="info-item">
|
<view class="label">结束时间:</view>
|
<view class="value">{{ task.endTime || '未填写' }}</view>
|
</view>
|
|
<view class="info-item">
|
<view class="label">备注:</view>
|
<view class="value">{{ task.remark || '无备注' }}</view>
|
</view>
|
</view>
|
|
<!-- 急救转运任务详情 -->
|
<view class="task-info-section" v-else-if="task.type === 'emergency'">
|
<view class="info-item">
|
<view class="label">任务编号:</view>
|
<view class="value">{{ task.taskNo }}</view>
|
</view>
|
|
<view class="info-item">
|
<view class="label">任务类型:</view>
|
<view class="value">{{ getTaskTypeText(task.type) }}</view>
|
</view>
|
|
<view class="info-item">
|
<view class="label">车辆信息:</view>
|
<view class="value">{{ task.vehicle }}</view>
|
</view>
|
|
<view class="info-item">
|
<view class="label">执行人员:</view>
|
<view class="value">{{ task.assignee }}</view>
|
</view>
|
|
<view class="info-item">
|
<view class="label">归属机构:</view>
|
<view class="value">{{ task.organization || '未填写' }}</view>
|
</view>
|
|
<view class="info-item">
|
<view class="label">任务类型:</view>
|
<view class="value">{{ task.emergencyTaskType || '未填写' }}</view>
|
</view>
|
|
<view class="info-item">
|
<view class="label">转运时间:</view>
|
<view class="value">{{ task.transferTime || '未填写' }}</view>
|
</view>
|
|
<view class="section-title">患者信息</view>
|
<view class="info-item">
|
<view class="label">联系人:</view>
|
<view class="value">{{ task.patient.contact || '未填写' }}</view>
|
</view>
|
|
<view class="info-item">
|
<view class="label">联系电话:</view>
|
<view class="value">{{ task.patient.phone || '未填写' }}</view>
|
</view>
|
|
<view class="info-item">
|
<view class="label">患者姓名:</view>
|
<view class="value">{{ task.patient.name || '未填写' }}</view>
|
</view>
|
|
<view class="info-item">
|
<view class="label">性别:</view>
|
<view class="value">{{ task.patient.gender === 'male' ? '男' : '女' }}</view>
|
</view>
|
|
<view class="info-item">
|
<view class="label">身份证:</view>
|
<view class="value">{{ task.patient.idCard || '未填写' }}</view>
|
</view>
|
|
<view class="info-item">
|
<view class="label">病情:</view>
|
<view class="value">{{ task.patient.condition || '未填写' }}</view>
|
</view>
|
|
<view class="section-title">转出医院信息</view>
|
<view class="info-item">
|
<view class="label">医院名称:</view>
|
<view class="value">{{ task.hospitalOut.name || '未填写' }}</view>
|
</view>
|
|
<view class="info-item">
|
<view class="label">科室:</view>
|
<view class="value">{{ task.hospitalOut.department || '未填写' }}</view>
|
</view>
|
|
<view class="info-item">
|
<view class="label">床号:</view>
|
<view class="value">{{ task.hospitalOut.bedNumber || '未填写' }}</view>
|
</view>
|
|
<view class="info-item">
|
<view class="label">地址:</view>
|
<view class="value">{{ task.hospitalOut.address || '未填写' }}</view>
|
</view>
|
|
<view class="section-title">转入医院信息</view>
|
<view class="info-item">
|
<view class="label">医院名称:</view>
|
<view class="value">{{ task.hospitalIn.name || '未填写' }}</view>
|
</view>
|
|
<view class="info-item">
|
<view class="label">科室:</view>
|
<view class="value">{{ task.hospitalIn.department || '未填写' }}</view>
|
</view>
|
|
<view class="info-item">
|
<view class="label">床号:</view>
|
<view class="value">{{ task.hospitalIn.bedNumber || '未填写' }}</view>
|
</view>
|
|
<view class="info-item">
|
<view class="label">地址:</view>
|
<view class="value">{{ task.hospitalIn.address || '未填写' }}</view>
|
</view>
|
|
<view class="info-item">
|
<view class="label">转运公里数:</view>
|
<view class="value">{{ task.transferDistance || '未填写' }}</view>
|
</view>
|
|
<view class="info-item">
|
<view class="label">成交价:</view>
|
<view class="value">¥{{ task.price || '未填写' }}</view>
|
</view>
|
</view>
|
|
<!-- 福祉车任务详情 -->
|
<view class="task-info-section" v-else-if="task.type === 'welfare'">
|
<view class="info-item">
|
<view class="label">任务编号:</view>
|
<view class="value">{{ task.taskNo }}</view>
|
</view>
|
|
<view class="info-item">
|
<view class="label">任务类型:</view>
|
<view class="value">{{ getTaskTypeText(task.type) }}</view>
|
</view>
|
|
<view class="info-item">
|
<view class="label">车辆信息:</view>
|
<view class="value">{{ task.vehicle }}</view>
|
</view>
|
|
<view class="info-item">
|
<view class="label">执行人员:</view>
|
<view class="value">{{ task.assignee }}</view>
|
</view>
|
|
<view class="info-item">
|
<view class="label">归属机构:</view>
|
<view class="value">{{ task.organization || '未填写' }}</view>
|
</view>
|
|
<view class="info-item">
|
<view class="label">服务时间:</view>
|
<view class="value">{{ task.serviceTime || '未填写' }}</view>
|
</view>
|
|
<view class="section-title">乘客信息</view>
|
<view class="info-item">
|
<view class="label">联系人:</view>
|
<view class="value">{{ task.passenger.contact || '未填写' }}</view>
|
</view>
|
|
<view class="info-item">
|
<view class="label">联系电话:</view>
|
<view class="value">{{ task.passenger.phone || '未填写' }}</view>
|
</view>
|
|
<view class="info-item">
|
<view class="label">出发地址:</view>
|
<view class="value">{{ task.startAddress || '未填写' }}</view>
|
</view>
|
|
<view class="info-item">
|
<view class="label">目的地址:</view>
|
<view class="value">{{ task.endAddress || '未填写' }}</view>
|
</view>
|
|
<view class="info-item">
|
<view class="label">公里数:</view>
|
<view class="value">{{ task.distance || '未填写' }}</view>
|
</view>
|
|
<view class="info-item">
|
<view class="label">成交价:</view>
|
<view class="value">¥{{ task.price || '未填写' }}</view>
|
</view>
|
</view>
|
|
<!-- 任务操作按钮 (任务未完成时显示) -->
|
<view class="task-actions" v-if="task.status !== 'completed'">
|
<button
|
class="action-btn"
|
:class="{ disabled: isActionDisabled('depart') }"
|
@click="handleTaskAction('depart')"
|
>
|
出发
|
</button>
|
<button
|
class="action-btn"
|
:class="{ disabled: isActionDisabled('arrive') }"
|
@click="handleTaskAction('arrive')"
|
>
|
已到达
|
</button>
|
<button
|
class="action-btn"
|
:class="{ disabled: isActionDisabled('return') }"
|
@click="handleTaskAction('return')"
|
>
|
返程
|
</button>
|
<button
|
class="action-btn"
|
:class="{ disabled: isActionDisabled('settle') }"
|
@click="handleTaskAction('settle')"
|
>
|
结算
|
</button>
|
<button
|
class="action-btn primary"
|
:class="{ disabled: isActionDisabled('complete') }"
|
@click="handleTaskAction('complete')"
|
>
|
已完成
|
</button>
|
</view>
|
|
<view class="action-section">
|
<button class="back-btn" @click="goBack">返回</button>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
task: {
|
id: 1,
|
title: '紧急维修任务',
|
type: 'maintenance',
|
startLocation: '广州市天河区XX路123号',
|
endLocation: '广州市白云区YY路456号',
|
startTime: '2023-05-15 15:00',
|
assignee: '张三',
|
status: 'pending',
|
vehicle: '粤A12345',
|
taskNo: 'RW20230515001',
|
description: '设备故障，需要紧急维修',
|
// 普通任务字段
|
distance: '25',
|
endTime: '2023-05-15 17:00',
|
remark: '维修完成后需要测试',
|
// 急救转运任务字段
|
organization: '广州急救中心',
|
emergencyTaskType: '急救转运',
|
transferTime: '2023-05-15 16:00',
|
patient: {
|
contact: '李四',
|
phone: '13800138000',
|
name: '王五',
|
gender: 'male',
|
idCard: '440100198001011234',
|
condition: '突发心脏病'
|
},
|
hospitalOut: {
|
name: '广州市第一人民医院',
|
department: '心内科',
|
bedNumber: '101',
|
address: '广州市越秀区医院路1号'
|
},
|
hospitalIn: {
|
name: '广东省人民医院',
|
department: '心内科',
|
bedNumber: '205',
|
address: '广州市天河区医院路2号'
|
},
|
transferDistance: '15',
|
price: '800',
|
// 福祉车任务字段
|
serviceTime: '2023-05-16 09:00',
|
passenger: {
|
contact: '赵六',
|
phone: '13900139000'
|
},
|
startAddress: '广州市荔湾区社区路10号',
|
endAddress: '广州市天河区养老院路20号'
|
}
|
}
|
},
|
computed: {
|
// 判断是否为普通任务
|
isNormalTask() {
|
return this.task.type === 'maintenance' || this.task.type === 'refuel' || this.task.type === 'inspection';
|
}
|
},
|
onLoad(options) {
|
// 实际项目中这里会通过API获取任务详情
|
// const taskId = options.id;
|
// this.getTaskDetail(taskId);
|
},
|
methods: {
|
goBack() {
|
this.$tab.navigateBack();
|
},
|
|
getStatusText(status) {
|
const statusMap = {
|
'pending': '待处理',
|
'processing': '处理中',
|
'completed': '已完成'
|
}
|
return statusMap[status] || '未知'
|
},
|
|
getTaskTypeText(type) {
|
const typeMap = {
|
'maintenance': '维修保养',
|
'refuel': '加油',
|
'inspection': '巡检',
|
'emergency': '急救转运',
|
'welfare': '福祉车'
|
}
|
return typeMap[type] || '未知类型'
|
},
|
|
// 判断操作按钮是否禁用
|
isActionDisabled(action) {
|
// 根据任务状态和操作类型判断是否禁用
|
switch (action) {
|
case 'depart':
|
return this.task.status !== 'pending';
|
case 'arrive':
|
return this.task.status !== 'processing';
|
case 'return':
|
return this.task.status !== 'processing';
|
case 'settle':
|
return this.task.status !== 'processing';
|
case 'complete':
|
return this.task.status !== 'processing';
|
default:
|
return false;
|
}
|
},
|
|
// 处理任务操作
|
handleTaskAction(action) {
|
if (this.isActionDisabled(action)) {
|
return;
|
}
|
|
switch (action) {
|
case 'depart':
|
// 出发操作，根据任务类型显示不同的确认信息
|
let departMessage = '确定要标记为已出发吗？';
|
if (this.task.type !== 'maintenance' && this.task.type !== 'refuel' && this.task.type !== 'inspection') {
|
departMessage = '发出去目的地,确认？';
|
}
|
this.$modal.confirm(departMessage).then(() => {
|
this.task.status = 'processing';
|
this.$modal.showToast('已出发');
|
// 这里可以调用API更新任务状态
|
}).catch(() => {});
|
break;
|
case 'arrive':
|
// 已到达操作
|
this.$modal.confirm('已经到达目的地，确认？').then(() => {
|
this.$modal.showToast('已到达');
|
// 这里可以调用API更新任务状态
|
}).catch(() => {});
|
break;
|
case 'return':
|
// 返程操作
|
this.$modal.confirm('现在已经返程中，确认？').then(() => {
|
this.$modal.showToast('返程中');
|
// 这里可以调用API更新任务状态
|
}).catch(() => {});
|
break;
|
case 'settle':
|
// 结算操作，跳转到结算页面
|
this.$tab.navigateTo(`/pages/task/settlement?id=${this.task.id}`);
|
break;
|
case 'complete':
|
// 已完成操作
|
this.$modal.confirm('任务是否已经全部完成，确认？').then(() => {
|
this.task.status = 'completed';
|
this.$modal.showToast('任务已完成');
|
// 这里可以调用API更新任务状态
|
}).catch(() => {});
|
break;
|
}
|
},
|
|
// 模拟获取任务详情
|
getTaskDetail(taskId) {
|
// 这里应该调用API获取任务详情
|
// 暂时使用模拟数据
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.task-detail-container {
|
padding: 20rpx;
|
background-color: #f5f5f5;
|
min-height: 100vh;
|
}
|
|
.task-header {
|
background-color: white;
|
border-radius: 15rpx;
|
padding: 30rpx;
|
margin-bottom: 20rpx;
|
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
|
.task-title {
|
font-size: 36rpx;
|
font-weight: bold;
|
color: #333;
|
}
|
|
.task-status {
|
padding: 10rpx 20rpx;
|
border-radius: 10rpx;
|
font-size: 24rpx;
|
font-weight: bold;
|
|
&.status-pending {
|
background-color: #fff3cd;
|
color: #856404;
|
}
|
|
&.status-processing {
|
background-color: #cce5ff;
|
color: #004085;
|
}
|
|
&.status-completed {
|
background-color: #d4edda;
|
color: #155724;
|
}
|
}
|
}
|
|
.task-info-section {
|
background-color: white;
|
border-radius: 15rpx;
|
padding: 30rpx;
|
margin-bottom: 20rpx;
|
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
|
.section-title {
|
font-size: 32rpx;
|
font-weight: bold;
|
margin: 30rpx 0 20rpx 0;
|
padding-bottom: 10rpx;
|
border-bottom: 1rpx solid #f0f0f0;
|
color: #333;
|
}
|
|
.info-item {
|
display: flex;
|
margin-bottom: 20rpx;
|
padding-bottom: 20rpx;
|
border-bottom: 1rpx solid #f0f0f0;
|
|
&:last-child {
|
margin-bottom: 0;
|
padding-bottom: 0;
|
border-bottom: none;
|
}
|
|
.label {
|
font-size: 28rpx;
|
color: #666;
|
margin-right: 20rpx;
|
white-space: nowrap;
|
width: 150rpx;
|
}
|
|
.value {
|
font-size: 28rpx;
|
flex: 1;
|
word-break: break-all;
|
}
|
}
|
}
|
|
.task-actions {
|
display: flex;
|
flex-wrap: wrap;
|
background-color: white;
|
border-radius: 15rpx;
|
padding: 30rpx;
|
margin-bottom: 20rpx;
|
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
|
.action-btn {
|
flex: 1;
|
min-width: 30%;
|
height: 70rpx;
|
border-radius: 10rpx;
|
font-size: 26rpx;
|
margin: 10rpx 5rpx;
|
background-color: #f0f0f0;
|
color: #333;
|
|
&.primary {
|
background-color: #007AFF;
|
color: white;
|
}
|
|
&.disabled {
|
opacity: 0.5;
|
}
|
}
|
}
|
|
.action-section {
|
margin-top: 40rpx;
|
text-align: center;
|
|
.back-btn {
|
width: 80%;
|
height: 80rpx;
|
background-color: #007AFF;
|
color: white;
|
border-radius: 10rpx;
|
font-size: 32rpx;
|
}
|
}
|
</style>
|
