update: 1. 新增約訪預約資訊頭像圖片和型別icon，微調對齊方式 2. 約訪結案列表的樣式修正並調整進度條色彩

charlie

2022-01-22 38b68f92b9a47ca3947985d6b581603fe05106c7

 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>

</style>