<template>
|
<div class="appointment-progress">
|
<div
|
class="appointment-progress__indicator"
|
:style="{ width: indicatorLineWidth }">
|
<div class="line"></div>
|
<div
|
class="circle"
|
v-for="(step, index) in stepList"
|
:class="{ 'activate': index < displayCurrentStep }"
|
:key="index">
|
</div>
|
</div>
|
<div class="appointment-progress__status-label xxsTxt text--bold ml-5">
|
{{ displayStatusLabel }}
|
</div>
|
</div>
|
</template>
|
|
<script lang="ts">
|
import { Vue, Component, Prop } from 'nuxt-property-decorator';
|
|
@Component
|
export default class AppointmentProgress extends Vue {
|
|
@Prop()
|
totalStep?: number;
|
|
@Prop()
|
currentStep!: 'picked' | 'reserved' | 'contacted' | 'done' | 'closed' | 'cancel';
|
|
//////////////////////////////////////////////////////////////////////
|
|
get stepList(): number[] {
|
const tempList: number[] = [];
|
for(let i = 0; i < (this.totalStep || 3); i ++) {
|
tempList.push(i);
|
}
|
return tempList;
|
}
|
|
get indicatorLineWidth(): string {
|
const connectLineGutter = 10;
|
return ((this.totalStep || 3) * 10 + connectLineGutter) + 'px';
|
}
|
|
get displayCurrentStep(): number {
|
let step: number = 1;
|
switch (this.currentStep) {
|
case 'contacted':
|
step = 2;
|
break;
|
case 'done':
|
step = 3;
|
break;
|
case 'closed':
|
step = 3;
|
break;
|
case 'cancel':
|
step = 3;
|
break;
|
}
|
return step;
|
}
|
|
get displayStatusLabel(): '未聯絡' | '約訪中' | '成交' | '未成交' | '已取消' {
|
let label: '未聯絡' | '約訪中' | '成交' | '未成交' | '已取消' = '未聯絡';
|
switch (this.currentStep) {
|
case 'contacted':
|
label = '約訪中';
|
break;
|
case 'done':
|
label = '成交';
|
break;
|
case 'closed':
|
label = '未成交';
|
break;
|
case 'cancel':
|
label = '已取消';
|
break;
|
}
|
return label;
|
}
|
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
|
.appointment-progress{
|
display: flex;
|
.appointment-progress__indicator {
|
align-items : center;
|
display : flex;
|
justify-content: space-between;
|
position : relative;
|
.circle {
|
background-color: white;
|
border : 1px solid #CCCCCC;
|
border-radius : 50%;
|
height : 8px;
|
margin : 0;
|
width : 8px;
|
z-index : 5;
|
&.activate {
|
background-color: $BEIGE;
|
}
|
}
|
.line {
|
background-color: #707070;
|
height : 3px;
|
left : 5%;
|
position : absolute;
|
width : 90%;
|
}
|
}
|
}
|
|
</style>
|
