|
@ -5,13 +5,25 @@ |
|
|
:style="{ color: orderStyle.color }" |
|
|
:style="{ color: orderStyle.color }" |
|
|
@tap="changeStatus($event, task.process)" |
|
|
@tap="changeStatus($event, task.process)" |
|
|
> |
|
|
> |
|
|
|
|
|
<!-- 1进行中 2暂停中 3已完成 --> |
|
|
<u-circle-progress |
|
|
<u-circle-progress |
|
|
:percent="+orderStyle.persent" |
|
|
:percent="+orderStyle.persent" |
|
|
:active-color="orderStyle.color" |
|
|
:active-color="orderStyle.color" |
|
|
bg-color="rgba(255,255,255,0)" |
|
|
bg-color="rgba(255,255,255,0)" |
|
|
border-width="4" |
|
|
border-width="4" |
|
|
:width="task.process !== 4 ? 66 : 50" |
|
|
:width="task.process !== 4 ? 66 : 50" |
|
|
|
|
|
v-if="task.process === 1 || task.process === 2 || task.process === 3" |
|
|
> |
|
|
> |
|
|
|
|
|
<view class="u-progress-content"> |
|
|
|
|
|
<view class="u-progress-dot"></view> |
|
|
|
|
|
<view class="u-progress-info"> |
|
|
|
|
|
<u-icon :name="orderStyle.icon" v-if="orderStyle.icon" size="15px"></u-icon> |
|
|
|
|
|
<template v-else>{{ computeDurationText() }}</template> |
|
|
|
|
|
</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
</u-circle-progress> |
|
|
|
|
|
<!-- 0未开始 4添加任务 --> |
|
|
|
|
|
<view class="progress-box flex justify-center items-center rounded-full" v-else :class="task.process === 4 ? 'progress-box-4' : ''"> |
|
|
<view class="u-progress-content"> |
|
|
<view class="u-progress-content"> |
|
|
<view class="u-progress-dot"></view> |
|
|
<view class="u-progress-dot"></view> |
|
|
<view class="u-progress-info"> |
|
|
<view class="u-progress-info"> |
|
@ -22,7 +34,7 @@ |
|
|
<template v-else>{{ computeDurationText() }}</template> |
|
|
<template v-else>{{ computeDurationText() }}</template> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</u-circle-progress> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</template> |
|
|
</template> |
|
@ -184,4 +196,17 @@ export default { |
|
|
height: 33px; |
|
|
height: 33px; |
|
|
width: 33px; |
|
|
width: 33px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.progress-box { |
|
|
|
|
|
background: rgba(255, 255, 255, 0); |
|
|
|
|
|
width: 33px; |
|
|
|
|
|
height: 33px; |
|
|
|
|
|
border: 2px solid #9ca3af; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.progress-box-4 { |
|
|
|
|
|
width: 25px; |
|
|
|
|
|
height: 25px; |
|
|
|
|
|
border: 2px solid #60a5fa; |
|
|
|
|
|
} |
|
|
</style> |
|
|
</style> |
|
|