realty/virgo.wzfrontend/workark_wx/subPages/indexPage/orderDetail/orderDetail.vue

<template>
	<view class="order-detail">
		<view class="hui-detail">
			<view class="detail-box">
				<view class="title-box">
					<view class="title">{{orderData.title||'-'}}</view>
					<view class="date">{{orderData.createTime || '-'}}</view>
					<view class="title-icon">
						<uni-icons type="icon-hetongwendang" custom-prefix="iconfont" color="#fff" size="18">
						</uni-icons>
					</view>
				</view>
				<view class="other">
					<view class="item">
						<view class="label">订单编号</view>
						<view class="value"> {{orderData.orderNo ||'-'}}</view>
					</view>
					<view class="item">
						<view class="label">价格(元)</view>
						<view class="value color-error">{{orderData.totalFee || '-'}}</view>
					</view>
				</view>
				<view class="state">
					<view></view>
					<view class="tag">
						<view class="status-tag" :class="{
							'warning':orderData.orderStatus === '未支付',
							'success':orderData.orderStatus === '支付成功',
							'error':orderData.orderStatus === '超时已关闭'
						}">
							{{orderData.orderStatus}}
						</view>
					</view>
				</view>
			</view>
			<view class="detail-box" v-if="!orderData.proceId">
				<view class="sub-title file-box">
					<uni-icons type="map-filled" class="inherit-icons" size="24" color="#08979c"></uni-icons>
					<text class="sub-label">订单合同</text>
				</view>
				<view class="other">
					<view class="item" v-if="orderData.contractId">
						<view class="label">合同编号</view>
						<view class="value">{{contractNode.contractNo}}</view>
					</view>
					<view class="item" v-if="orderData.contractId">
						<view class="label">合同内容</view>
						<view class="value">
							<text class="color-primary">查看合同</text>
						</view>
					</view>
					<view class="item">
						<view class="label">合同状态</view>
						<view class="value">
							<uv-steps :current="current" direction="column" dot>
								<uv-steps-item title="服务商上传合同" :desc="contractNode.createDate"></uv-steps-item>
								<uv-steps-item title="客户确认" :desc="contractNode.confirmDate"></uv-steps-item>
								<uv-steps-item title="服务商盖章" :desc="contractNode.processDate"></uv-steps-item>
								<uv-steps-item title="客户盖章" :desc="contractNode.updateDate"></uv-steps-item>
								<uv-steps-item title="签约成功" :desc="contractNode.updateDate"></uv-steps-item>
							</uv-steps>
						</view>
					</view>
				</view>
			</view>
			<view class="detail-box">
				<view class="sub-title file-box">
					<uni-icons type="map-filled" class="inherit-icons" size="24" color="#08979c"></uni-icons>
					<text class="sub-label">订单过程</text>
				</view>
				<view class="other process-box">
					<process-item :list="contractProcessList"></process-item>
				</view>
			</view>
		</view>
		<view class="hui-button-box" v-if="operationBtn.length>0">
			<view class="hui-button" v-for="(item,index) in operationBtn" :key="index" @click="operation(item)">
				{{item.name}}
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getOrderDetail,
		getBindContract,
		getProcessData,
		getWxPay
	} from '@/request/api/workark.js'
	import processItem from '@/subPages/indexPage/components/processItem.vue';
	export default {
		components: {
			processItem
		},
		data() {
			return {
				orderId: '',
				orderData: {},
				operationBtn: [],
				contractNode: {},
				current: 0,
				contractProcessList: []
			};
		},
		onLoad(body) {
			this.orderId = body.orderId;
			if (this.orderId) this.init();
		},
		methods: {
			async init() {
				let orderData = await getOrderDetail(this.orderId);
				if (!orderData.state) return;
				this.orderData = orderData.data;
				this.current = this.returnCurrent();
				this.initProcessData();
				if (this.orderData.contractId) this.initBindContract();
			},
			async initBindContract() {
				let contractNode = await getBindContract(this.orderData.contractId);
				if (!contractNode.state) return;
				this.contractNode = contractNode.data;
			},
			async initProcessData() {
				let contractProcess = await getProcessData(this.orderData.id);
				if (!contractProcess.state) return;
				this.contractProcessList = contractProcess.data;
				this.updateParentStatus(this.contractProcessList);
			},
			returnCurrent() {
				if (!this.orderData.contractId) return 0;
				if (this.orderData.contractStatus === 0) return 1;
				if (this.orderData.contractStatus === 1) return 2;
				if (this.orderData.contractStatus === 2) return 3;
				if (this.orderData.contractStatus === 3) return 5;
			},
			updateParentStatus(nodes) {
				nodes.forEach(node => {
					if (node.type !== 3) {
						// 递归处理子节点
						let children = !node.children ? [] : node.children.filter(item => item.type != 3);
						if (children.length > 0) {
							this.updateParentStatus(node.children); // 先处理子节点
							// 获取所有子节点的 status
							const childStatusList = node.children.map(child => child.status);
							// 判断条件优先级：4 > 1/2 > 3
							if (childStatusList.some(status => status === 4)) {
								node.status = 4;
							} else if (childStatusList.some(status => status === 1 || status === 2)) {
								node.status = 1;
							} else if (childStatusList.every(status => status === 3)) {
								node.status = 3;
							} else if (childStatusList.some(status => status === 3)) {
								node.status = 1;
							}
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	//详情
	.hui-detail {
		padding: 30rpx;

		.detail-box {
			background-color: #ffffff;
			border-radius: 16rpx;
			box-shadow: 0px 1px 12px rgba(3, 3, 3, 0.08);
			padding: 30rpx;
			position: relative;
			margin-bottom: 30rpx;

			&.file-box {
				padding-bottom: 20rpx;
			}
		}

		.sub-title {
			display: flex;
			align-items: center;
			margin-left: -8rpx;

			.sub-label {
				font-size: 32rpx;
				font-weight: 600;
				margin-left: 14rpx;
			}
		}

		.title-box {
			padding-left: 90rpx;
			position: relative;
			min-height: 88rpx;

			.title-icon {
				width: 70rpx;
				height: 70rpx;
				text-align: center;
				line-height: 70rpx;
				background: $uv-primary;
				border-radius: 70rpx;
				position: absolute;
				left: 0;
				top: 50%;
				margin-top: -35rpx;
			}

			.title {
				font-size: 32rpx;
				font-weight: 600;
				margin-bottom: 8rpx;
			}

			.date {
				font-size: 24rpx;
				color: $uv-content-color;
			}
		}

		.other {
			margin-top: 20rpx;

			.item {
				margin-top: 16rpx;
			}

			.label {
				color: $uv-content-color;
				font-size: 24rpx;
			}

			.value {
				margin-top: 10rpx;
				font-weight: 400;
			}

			.file-item {
				background-color: #ededed;
				height: 80rpx;
				display: flex;
				align-items: center;
				border-radius: 12rpx;
				padding: 0 14rpx;
			}

			.file-name {
				flex: 1;
				width: 0;
				margin-left: 10rpx;
			}

			.contarct-item {
				background-color: #ededed;
				border-radius: 12rpx;
				padding: 20rpx;
				margin-bottom: 20rpx;
			}

			.contarct-content {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 16rpx;

				&.last {
					margin-bottom: 0rpx;

					.content-item {
						flex: 1;
						width: 0;
					}
				}

				.content-title {
					font-size: 32rpx;
					font-weight: 500;
				}

				.content-label {
					color: $uv-content-color;
					font-size: 24rpx;
				}

				.content-value {
					font-weight: 400;
					margin-left: 6rpx;
					flex: 1;
					width: 0;
				}

				.content-item {
					overflow: hidden;
					display: flex;
					align-items: center;

					&.content-title {
						flex: 1;
						width: 0;
					}
				}
			}
		}

		.state {
			margin-top: 20rpx;
			display: flex;
			justify-content: space-between;

			.create {
				height: 48rpx;
				border-radius: 48rpx;
				border: 1px solid $uv-primary;
				display: flex;
				align-items: center;
				color: $uv-primary;
				padding: 0 10rpx;

				.name {
					font-size: 24rpx;
					flex: 1;
					max-width: 150rpx;
					min-width: 70rpx;
					overflow: hidden;
					margin-left: 10rpx;
					line-height: 36rpx;
					padding-right: 10rpx;
				}
			}
		}
	}
</style>