From f3e662798b3b83a83c2d60dc7b4e6cf1ee4f1331 Mon Sep 17 00:00:00 2001
From: Tomas <tomasysh@gmail.com>
Date: 星期六, 05 八月 2023 16:35:00 +0800
Subject: [PATCH] Fixed: [弱掃] p8.2 Bad use of null-like value
---
PAMapp/components/Appointment/AppointmentProgress.vue | 125 ++++++++++++++++++++++++++++++++++-------
1 files changed, 103 insertions(+), 22 deletions(-)
diff --git a/PAMapp/components/Appointment/AppointmentProgress.vue b/PAMapp/components/Appointment/AppointmentProgress.vue
index 2a9e8e5..5d31d83 100644
--- a/PAMapp/components/Appointment/AppointmentProgress.vue
+++ b/PAMapp/components/Appointment/AppointmentProgress.vue
@@ -1,12 +1,19 @@
<template>
<div class="appointment-progress">
- <div class="unread" style="display:flex">
- <div class="circle"></div>
- <div class="line"></div>
- <div class="circle"></div>
- <div class="line"></div>
- <div class="circle"></div>
- </div>
+ <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>
@@ -15,24 +22,98 @@
@Component
export default class AppointmentProgress extends Vue {
- @Prop()
- size!: number;
- @Prop()
- agentNo!: string;
+ @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;
- .circle {
- width: 10px;
- height: 10px;
- border-radius: 50px;
- background-color: $PRIMARY_BLACK;
- margin: auto;
- }
+<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>
\ No newline at end of file
+
+</style>
--
Gitblit v1.8.0