You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
166 lines
6.1 KiB
166 lines
6.1 KiB
<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"
|
|
v-if="orderData.status != 6">
|
|
<u-steps
|
|
activeColor="#FF7A31"
|
|
:current="getStepsIndex()" 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: {
|
|
},
|
|
methods: {
|
|
getStepsIndex() {
|
|
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.getStepsIndex()] || '未知状态';
|
|
},
|
|
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.getStepsIndex()] || '/static/images/order/46524.png';
|
|
},
|
|
stepsList() {
|
|
const stepsListMap = {
|
|
0 : {//先付后用
|
|
'job-order': [
|
|
{ title: "师傅确认", date: "" },
|
|
{ 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: "" },
|
|
{ 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>
|