|
|
@@ -1,9 +1,26 @@
|
|
|
<template>
|
|
|
- <view v-if="time">
|
|
|
- <view style="background-color: #fff;padding: 20rpx 0;">
|
|
|
- <up-steps v-if="steps.length" :current="current" dot activeColor="#0279FE">
|
|
|
- <up-steps-item v-for="item in steps" :key="item.title" :title="item.title" />
|
|
|
- </up-steps>
|
|
|
+ <My-shade />
|
|
|
+ <view>
|
|
|
+ <view class="step" :style="{
|
|
|
+ width: steps.length < 5 ? '230rpx' : '690rpx',
|
|
|
+ }">
|
|
|
+ <view class="step-item" :class="item.title == 1 ? 'arrows' : ''" v-for="item in steps" :key="item.title">
|
|
|
+ <block v-if="item.title != '1'">
|
|
|
+ <view class="circle" :style="{ borderColor: item.bgColor }">
|
|
|
+ <view class="icon" :style="{ background: item.bgColor }">
|
|
|
+ <view class="iconfont" :class="item.iconfont" />
|
|
|
+ <view v-if="['已完结', '无需服务'].includes(item.title)" class="ywj" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="title">
|
|
|
+ {{ item.title }}
|
|
|
+ </view>
|
|
|
+ </block>
|
|
|
+ <view class="item" v-else>
|
|
|
+ <view class="line" />
|
|
|
+ <view class="iconfont icon-a-wodetiaozhuan" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
<view class="main">
|
|
|
<view class="billno" style="margin-bottom: -24rpx;">
|
|
|
@@ -161,7 +178,6 @@ import nodes from './modules/nodes.vue';
|
|
|
const transition = ref(true);
|
|
|
const Nodes = ref(null);
|
|
|
|
|
|
-const current = ref(-1);
|
|
|
const steps = ref([]);
|
|
|
|
|
|
let sa_serviceorderid = 0;
|
|
|
@@ -190,20 +206,31 @@ function getDetail() {
|
|
|
: 0;
|
|
|
Object.assign(detail, res.data);
|
|
|
if (res.data.status == '拒绝受理') {
|
|
|
- steps.value = [{ title: '已申请', value: '待分配' },
|
|
|
- { title: '无需服务', value: '拒绝受理' }]
|
|
|
- current.value = 1;
|
|
|
+ steps.value = [{ title: '已申请', value: '待分配', iconfont: 'icon-yishouli', bgColor: "#3874F6" },
|
|
|
+ { title: '1' },
|
|
|
+ { title: '无需服务', value: '拒绝受理', iconfont: 'icon-yiwancheng', bgColor: "#3874F6" }]
|
|
|
} else {
|
|
|
- steps.value = [{ title: '已申请', value: '待分配' },
|
|
|
- { title: '已分配', value: '待受理' },
|
|
|
- { title: '已受理', value: '待服务' },
|
|
|
- { title: '服务中', value: '服务中' },
|
|
|
- { title: '已完结', value: '已完结' }]
|
|
|
- if (res.data.status == '新建') {
|
|
|
- current.value = 0
|
|
|
- } else {
|
|
|
- current.value = steps.value.findIndex(item => item.value === res.data.status);
|
|
|
- }
|
|
|
+ steps.value = [{ title: '已申请', value: '待分配', iconfont: 'icon-yishouli' },
|
|
|
+ { title: '1' },
|
|
|
+ { title: '已分配', value: '待受理', iconfont: 'icon-yipaigong' },
|
|
|
+ { title: '1' },
|
|
|
+ { title: '已受理', value: '待服务', iconfont: 'icon-yiyuyue' },
|
|
|
+ { title: '1' },
|
|
|
+ { title: '服务中', value: '服务中', iconfont: 'icon-yidadao' },
|
|
|
+ { title: '1' },
|
|
|
+ { title: '已完结', value: '已完结', iconfont: 'icon-yiwancheng' }]
|
|
|
+ let status = res.data.status;
|
|
|
+ if (status === '新建') status = '待分配'
|
|
|
+ let index = steps.value.findIndex(item => item.value === status);
|
|
|
+ steps.value = steps.value.map((v, i) => {
|
|
|
+ if (i == index) {
|
|
|
+ v.bgColor = "#3874F6"
|
|
|
+ } else {
|
|
|
+ v.bgColor = i < index ? "#96B4FA" : "#999999"
|
|
|
+ }
|
|
|
+ return v
|
|
|
+ })
|
|
|
+
|
|
|
$Http.basic({ "id": 20230207154203, "content": { "sa_serviceorderid": sa_serviceorderid, pageSize: 1 } }).then(res => {
|
|
|
console.log("服务申请单工单列表", res)
|
|
|
if (res.code !== 1) return uni.showToast({ title: res.msg, icon: 'none' });
|
|
|
@@ -228,6 +255,90 @@ defineExpose({ detail })
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
+.step {
|
|
|
+ display: flex;
|
|
|
+ width: 690rpx;
|
|
|
+ margin: 13px 30rpx 20px 30rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ &-item {
|
|
|
+ position: relative;
|
|
|
+ height: 78px;
|
|
|
+
|
|
|
+ .circle {
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 44px;
|
|
|
+ height: 44px;
|
|
|
+ border-radius: 50%;
|
|
|
+ border: 1px solid;
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 36px;
|
|
|
+ height: 36px;
|
|
|
+ border-radius: 50%;
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ywj {
|
|
|
+ position: absolute;
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ border: 1px solid #F7F7FF;
|
|
|
+ border-radius: 50%;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .title {
|
|
|
+ position: absolute;
|
|
|
+ font-family: Microsoft YaHei, Microsoft YaHei;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333333;
|
|
|
+ bottom: 0;
|
|
|
+ white-space: nowrap;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .arrows {
|
|
|
+ flex: 1;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ height: 44px;
|
|
|
+ color: #3874F6;
|
|
|
+
|
|
|
+ .line {
|
|
|
+ width: 70%;
|
|
|
+ height: 2px;
|
|
|
+ background: #3874F6;
|
|
|
+ margin: 0 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .iconfont {
|
|
|
+ position: relative;
|
|
|
+ left: -14rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #3874F6;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
.main {
|
|
|
position: relative;
|
|
|
width: 690rpx;
|