SmartParks_uniapp/pages/sys/workbench/order/orderDetail.vue

<template>
	<view class="page-container">
		<view class="top-line"/>
		<!-- 工单状态进度 -->
		<view class="repair-detail-progress-box">
			<view class="repair-detail-progress">
				<view v-for="(step, idx) in progressSteps" :key="idx" class="repair-detail-step">
					<view
						:class="['repair-detail-dot', detailStep >= idx ? 'active' : '', (detailStep === idx && detailStatus !== '已结束') ? 'current' : '']">
					</view>
					<view v-if="idx < progressSteps.length - 1"
						:class="['repair-detail-line', detailStep > idx ? 'active' : '']"></view>
				</view>
			</view>
			<view class="repair-detail-progress-labels">
				<view v-for="(step, idx) in progressSteps" :key="idx" class="repair-detail-label">{{ step }}
				</view>
			</view>
		</view>

		<!-- 工单详情 -->
		<view class="detail-list">
			<view class="detail-value"><text class="detail-key">工单编号：</text>{{ detail.orderNo }}</view>
			<view class="detail-value"><text class="detail-key">工单名称：</text>{{ detail.orderName }}</view>
			<view class="detail-value"><text class="detail-key">工单类型：</text>{{ detail.typeName }}</view>
			<view class="detail-value"><text class="detail-key">处理地点：</text>{{ detail.location }}</view>
			<view class="detail-value"><text class="detail-key">创建时间：</text>{{ detail.createTime }}</view>
			<view class="detail-value"><text class="detail-key">发起单位/人：</text>{{ detail.initiatorPeople }}</view>
			<view class="detail-value"><text class="detail-key">计划完成时间：</text>{{ detail.planCompleTime }}</view>
			<view class="detail-value">
				<text>附件：</text>
				<text class="link" @click="downloadFile">下载</text>
			</view>
			<view class="detail-value remark"><text>备注：</text>{{ detail.remark }}</view>
		</view>

		<!-- 底部操作按钮 -->
		<view class="btn-group">
			<button class="btn ghost" @click="transfer">转派</button>
			<button class="btn primary" @click="complete">完成</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				detailStep: 0,
				detailStatus: '',
				progressSteps: ['创建工单','已接单', '处理中', '已结束'],
				currentStatus: 2, // 0: 待分配，1: 已接单，2: 处理中，3: 已完成
				detail: {	
				}
			};
		},
		onLoad(options) {
		  if (options.item) {
		    const item = JSON.parse(decodeURIComponent(options.item));
			this.detail = item;
			console.log("t1",this.detail)
		    // 现在可以使用item对象了
			// 进度映射
			if (item.status == 0) {
				this.detailStep = 0;
				this.detailStatus = '创建工单';
			} else if (item.status == 4) {
				this.detailStep = 3;
				this.detailStatus = '已结束';
			} else if(item.status == 3){
				this.detailStep = 2;
				this.detailStatus = '处理中';
			}else {
				this.detailStep = 1;
				this.detailStatus = '已接单';
			}
		  }
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			transfer() {
				uni.showToast({
					title: '转派功能开发中',
					icon: 'none'
				});
			},
			complete() {
				uni.showToast({
					title: '操作成功',
					icon: 'success'
				});
			},

			downloadFile() {
				uni.downloadFile({
					url: this.detail.attachment,
					success: (res) => {
						if (res.statusCode === 200) {
							uni.openDocument({
								filePath: res.tempFilePath
							});
						}
					}
				});
			}
		}
	};
</script>

<style scoped>
	.page-container {
		background: #fff;
	}
	.top-line{
		width: 100vw;
		height: 3rpx;
		background: #ECECEC;
	}
	.repair-detail-progress-box {
		height: 107rpx;
		margin-bottom: 41rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: stretch;
	}

	.repair-detail-progress {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 5rpx;
		margin-left: 85rpx;
		width: 100%;
	}

	.repair-detail-step {
		display: flex;
		align-items: center;
		flex: 1;
		position: relative;
	}

	.repair-detail-dot {
		width: 22rpx;
		height: 22rpx;
		border-radius: 50%;
		background: #BDBDBD;
		border: 2rpx solid #BDBDBD;
		position: relative;
		z-index: 2;
	}

	.repair-detail-dot.active {
		background: #2186FF;
		border-color: #2186FF;
	}

	.repair-detail-dot.current {
		background: #EF8D00;
		border-color: #EF8D00;
	}

	.repair-detail-line {
		flex: 1;
		height: 4rpx;
		background: #BDBDBD;
		margin: 0 2rpx;
		z-index: 1;
	}

	.repair-detail-line.active {
		background: #2186FF;
	}

	.repair-detail-progress-labels {
		display: flex;
		justify-content: space-between;
		margin-left: 0;
		width: 100%;
	}

	.repair-detail-label {
		font-size: 22rpx;
		color: #888;
		text-align: center;
		flex: 1;
		position: relative;
		top: 8rpx;
	}

	.detail-list {
		font-size: 28rpx;
		line-height: 2em;
		margin-left: 40rpx;
	}

	.detail-key{
		color: #595858;
	}
	
	.detail-value {
		margin-bottom: 30rpx;
		color: ##2F2F2F;
	}

	.remark {
		white-space: pre-line;
	}

	.link {
		color: #007CFF;
		text-decoration: underline;
	}

	.btn-group {
		display: flex;
		justify-content: space-around;
		margin-top: 60rpx;
	}

	.btn {
		width: 276rpx;
		height: 88rpx;
		padding: 20rpx;
		font-size: 30rpx;
		border-radius: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.primary {
		background-color: #1890ff;
		color: #fff;
	}

	.ghost {
		background-color: #fff;
		color: #1890ff;
		border: 2rpx solid #1890ff;
	}
</style>