employ-front/components/order-status/index.vue

<template>
	<view>
		<!-- 状态显示区域 -->
		<view class="se-flex se-flex-h-sb se-flex-v-c se-py-20">
			<!-- <view class="se-flex se-flex-v-c">
				<image src="@/static/images/order/46525.png" 
                style="width: 80rpx;height: 80rpx;" 
                mode="aspectFit"></image>
			</view> -->
			<view class="se-flex se-flex-v-c"
            style="flex-direction: row;">
				<view class="line-orange"></view>
				<text class="se-ml-10 se-fs-28 se-fw-6 se-c-black">{{ statusText }}</text>
			</view>
		</view>
		
		<!-- 进度条 -->
		<view class="se-py-20">
			<u-steps 
            activeColor="#FF7A31"
            :current="stepsIndex" dot>
				<u-steps-item class="se-fs-22" v-for="(items,indexs) in stepsList" 
                :key="indexs" :title="items.title">
				</u-steps-item>
            </u-steps>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'OrderStatus',
		props: {
			// 订单对象
			orderData: {
				type: Object,
				default: () => ({})
			},
			// 页面类型，用于区分不同页面的状态显示
			pageType: {
				type: String,
				default: 'job-order' // 'job-order' 或 'order'
			}
		},
		computed: {
			stepsIndex() {
				return this.orderData.status || 0;
			},
			statusText() {
				const statusTextMap = {
					'0' : {//先付后用
                        'job-order': {
                            0: '等待师傅确认',//师傅操作
                            1: '企业待支付',//企业操作
                            2: '订单进行中',//师傅操作
                            3: '试工完成',//企业操作
                            4: '',//暂无
                            5: '订单已完成',
                            6: '订单已取消'
                        },
                        default: {
                            0: '等待企业确认并支付',//企业操作
                            1: '',//暂无
                            2: '订单进行中',//师傅操作
                            3: '试工完成',//企业操作
                            4: '',//暂无
                            5: '订单已完成',
                            6: '订单已取消'
                        }
                    },
                    '1' : {//试用以后支付
                        'job-order': {
                            0: '等待企业确认',
                            1: '订单进行中',
                            2: '试工完成',
                            3: '企业待支付',
                            4: '订单待完成',
                            5: '订单已完成',
                            6: '订单已取消'
                        },
                        default: {
                            0: '等待企业确认',
                            1: '订单进行中',
                            2: '试工完成',
                            3: '企业待支付',
                            4: '订单待完成',
                            5: '订单已完成',
                            6: '订单已取消'
                        }
                    }
				};
                let i = this.orderData ? this.orderData.payType : '1';
                let statusTextMapItem = statusTextMap[i] || statusTextMap[1];
				const pageTypeMap = statusTextMapItem[this.pageType] || statusTextMapItem.default;
				return pageTypeMap[this.stepsIndex] || '未知状态';
			},
			statusImage() {
				const statusImageMap = {
					0: '/static/images/order/46524.png',
					1: '/static/images/order/46524.png',
					2: '/static/images/order/46525.png',
					3: '/static/images/order/46525.png',
					4: '/static/images/order/46525.png',
					5: '/static/images/order/46525.png',
					6: '/static/images/order/46525.png'
				};
				return statusImageMap[this.stepsIndex] || '/static/images/order/46524.png';
			},
			stepsList() {
				const stepsListMap = {
					0 : {//先付后用
                        'job-order': [
                            { title: "师傅确认", date: "" },
                            { title: "进行", date: "" },
                            { title: "试工完成", date: "" },
                            { title: "企业支付", date: "" },
                            { title: "订单完成", date: "" }
                        ],
                        default: [
                            { title: "接单", date: "" },
                            { title: "进行", date: "" },
                            { title: "试工完成", date: "" },
                            { title: "企业确认", date: "" },
                            { title: "企业支付", date: "" },
                            { title: "企业完成", date: "" }
                        ]
                    },
					1 : {//试用以后支付
                        'job-order': [
                            { title: "师傅确认", date: "" },
                            { title: "进行", date: "" },
                            { title: "试工完成", date: "" },
                            { title: "企业支付", date: "" },
                            { title: "订单完成", date: "" }
                        ],
                        default: [
                            { title: "接单", date: "" },
                            { title: "进行", date: "" },
                            { title: "试工完成", date: "" },
                            { title: "企业确认", date: "" },
                            { title: "企业支付", date: "" },
                            { title: "企业完成", date: "" }
                        ]
                    },
				};
                let i = this.orderData ? this.orderData.payType : '1';
                let stepsListMapItem = stepsListMap[i] || stepsListMap[1];
				return stepsListMapItem[this.pageType] || stepsListMapItem.default;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.line-orange {
		width: 8rpx;
		height: 32rpx;
		background: #ff7a31;
		border-radius: 4rpx;
	}
</style>