保誠-保戶業務員媒合平台
wayne
2022-01-26 6fa4bba623713c396432ba8b863846883d6a1906
PAMapp/pages/agentInfo/_agentNo.vue
@@ -3,7 +3,10 @@
      <el-row
        type="flex"
        justify="center">
        <UiAvatar :size="150" :fileName="agentInfo.img"></UiAvatar>
        <UiAvatar
          :size="150"
          :agentNo="agentInfo.agentNo">
        </UiAvatar>
      </el-row>
      <el-row
@@ -21,6 +24,15 @@
        class="pt-10"
        justify="center">
        <h3 class="mdTxt">{{ agentName }}</h3>
      </el-row>
      <el-row
        v-if="currentRole === role.ADMIN"
        type="flex"
        class="pam-paragraph">
        <UiField :span="12" icon="phone" label="手機號碼">
          {{ agentInfo.phoneNumber }}
        </UiField>
      </el-row>
      <el-row
@@ -110,6 +122,15 @@
        </el-col>
      </el-row>
      <div class="consultant-edit-btn">
        <UiField icon="flag" label="溝通風格">
          <div class="text--orange bold pr-10 "
            v-for="(communicationStyle, index) in displayCommunicationStyleList"
            :key="index">
              #{{ communicationStyle }}</div>
        </UiField>
    </div>
      <el-row
        type="flex"
        class="pam-paragraph">
@@ -125,7 +146,7 @@
      <el-row
        type="flex"
        class="pam-paragraph">
        <UiField icon="comment" label="個人理念">
        <UiField icon="comment" label="個人理念" class="agent-info-textarea">
          {{ agentInfo.concept }}
        </UiField>
      </el-row>
@@ -133,9 +154,9 @@
      <el-row
        type="flex"
        class="pam-paragraph">
        <UiField icon="school" label="個人背景">
          <span v-for="(experience, index) in agentInfo.experiences" :key="index">
            {{ experience }}<span v-if="index !== agentInfo.experiences.length - 1">, </span>
        <UiField icon="school" label="個人背景" class="agent-info-textarea">
          <span>
            {{ agentInfo.experiences }}
          </span>
        </UiField>
      </el-row>
@@ -143,7 +164,7 @@
      <el-row
        type="flex"
        class="pam-paragraph">
        <UiField icon="trophy" label="得獎經歷">
        <UiField icon="trophy" label="得獎經歷" class="agent-info-textarea">
          {{ agentInfo.awards }}
        </UiField>
      </el-row>
@@ -182,6 +203,9 @@
            </div>
        </div>
    </PopUpFrame>
    <div class="consultant-edit-btn" v-if="currentRole === role.ADMIN">
      <el-button type="primary" @click.native="$router.push(`/agentInfo/edit/${agentInfo.agentNo}`)">編輯帳戶資訊</el-button>
    </div>
    </div>
</template>
@@ -205,12 +229,13 @@
  agentInfo!: AgentInfo;
  role = Role;
  isAlertAddSuccess = false;
  isAlertFieldInfo  = false;
  fieldInfoTitle    = '';
  fieldInfoDesc     = '';
  hideReviews       = hideReviews ;
  isAlertFieldInfo = false;
  fieldInfoTitle = '';
  fieldInfoDesc = '';
  hideReviews = hideReviews ;
//////////////////////////////////////////////////////////////////////
  //////////////////////////////////////////////////////////////////////
  async asyncData(context: Context) {
    const agentNo = context.route.params.agentNo;
    return {
@@ -218,11 +243,12 @@
    }
  }
//////////////////////////////////////////////////////////////////////
  //////////////////////////////////////////////////////////////////////
  alertAddSuccess(): void {
      this.isAlertAddSuccess = true;
  }
  alertFieldInfo(field: string): void {
    this.isAlertFieldInfo = true;
    switch(field) {
@@ -237,12 +263,14 @@
    }
  }
//////////////////////////////////////////////////////////////////////
  get agentName(): string {
    return `${this.agentInfo.name}(${this.agentInfo.role})`;
  }
  get displayCommunicationStyleList(): string[] {
    return this.agentInfo.communicationStyle.split('、').filter((item) => item);
  }
}
</script>
@@ -296,5 +324,16 @@
  flex-wrap: wrap;
  line-height: 24px;
}
.consultant-edit-btn{
  display: flex;
  justify-content: center;
}
.pam-field{
  display: flex;
}
.agent-info-textarea{
  word-break: break-all;
  word-wrap: break-word;
}
</style>