add#133803 - 製作功能元件 appoitment-progress

Tomas

2022-01-10 b1d83028691edb487c4a0e4f7ded977dc916d783

add#133803 - 製作功能元件 appoitment-progress

 PAMapp/assets/scss/utilities/_heading.scss

@@ -39,6 +39,10 @@
  font-size: 14px;
}

.xxsTxt {
  font-size: 12px;
}

.text--bold {
  font-weight: bold !important;
}

 PAMapp/assets/scss/utilities/_utilities.scss

@@ -32,6 +32,10 @@
  margin-bottom: 10px;
}

.ml-5 {
  margin-left: 5px;
}

.ml-10{
  margin-left: 10px;
}

 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,95 @@

@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 = 0;
    switch (this.currentStep) {
      case 'picked' || 'reserved':
        step = 1;
        break;
      case 'contacted':
        step = 2;
        break;
      case 'done' || 'closed' || '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 {
    justify-content: space-between;
    display        : flex;
    align-items    : center;
    position       : relative;
    .circle {
      width           : 8px;
      height          : 8px;
      border-radius   : 50%;
      background-color: white;
      margin          : 0;
      z-index         : 50;
      border          : 1px solid #707070;
      &.activate {
        background-color: $PRIMARY_BLACK;
      }
    }
    .line {
      position        : absolute;
      height          : 3px;
      width           : 90%;
      left            : 5%;
      background-color: #707070;
    }
  }
}
</style>

</style>

 PAMapp/components/Client/ClientCard.vue

@@ -29,13 +29,9 @@
                        >(客戶未提供需求項目)</span>
                    </template>
                </div>
                <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>
                <AppointmentProgress
                  :currentStep="'contacted'"
                ></AppointmentProgress>
            </div>
        </div>
            <!-- <el-col :xs="5" :sm="3" align="middle">
@@ -53,7 +49,7 @@
                    </template>
                </div>
            </el-col> -->
            

            <div class="flex-column contactInfo" :xs="4" :sm="6">
                <!-- <div
                    class="smTxt_bold fix-chrome-click--issue"
@@ -353,7 +349,7 @@
        margin-bottom: 10px;
        display: flex;
        justify-content: space-between;
        

        transition: background-color 0.5s;
        &.new {
            border-left: solid 4px $YELLOW;
@@ -367,7 +363,7 @@
            .circle {
                width: 10px;
                height: 10px;
                border-radius: 50px;
                border-radius: 50%;
                background-color: $PRIMARY_RED;
                margin: auto;
            }
@@ -387,7 +383,6 @@
            text-overflow: ellipsis;
            .professionalsTxt {
                font-size: 12px;
                font-weight: bold;
                margin-right: 5px;
            }
            .noProfessionalsTxt {
@@ -445,6 +440,6 @@
        height: 4px;
        width: 10px;
        background-color: $PRUDENTIAL_GREY;
        

    }
</style>