保誠-保戶業務員媒合平台
wayne
2022-02-17 4394e4248455637ab7836756058ac872fdf4af10
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
@@ -24,6 +27,15 @@
      </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
        type="flex"
        class="pam-paragraph">
        <UiField :span="12" icon="agent" label="頭銜">
@@ -35,7 +47,7 @@
        type="flex"
        class="pam-paragraph">
        <UiField icon="company" label="服務地區">
          {{ agentInfo.serveArea }}
          {{ agentInfo.serveArea | toServeArea }}
        </UiField>
      </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>
@@ -193,15 +217,17 @@
import myConsultantService from '~/shared/services/my-consultant.service';
import { AgentInfo } from '~/shared/models/agent-info.model';
import { hideReviews } from '~/shared/const/hide-reviews';
import { Role } from '~/shared/models/enum/role';
import { Role } from '~/shared/models/enum/Role';
const roleStorage = namespace('localStorage');
@Component
export default class AgentInfoComponent extends Vue {
  @roleStorage.Getter currentRole!:string|null;
  role = Role;
  agentInfo!: AgentInfo;
  role = Role;
  isAlertAddSuccess = false;
  isAlertFieldInfo = false;
  fieldInfoTitle = '';
@@ -210,16 +236,14 @@
  //////////////////////////////////////////////////////////////////////
  get agentName(): string {
    return `${this.agentInfo.name}(${this.agentInfo.role})`;
  }
  async asyncData(context: Context) {
    const agentNo = context.route.params.agentNo;
    return {
      agentInfo: await myConsultantService.getConsultantDetail(agentNo).then((res) => res)
    }
  }
  //////////////////////////////////////////////////////////////////////
  alertAddSuccess(): void {
      this.isAlertAddSuccess = true;
@@ -238,6 +262,15 @@
        break;
    }
  }
  get agentName(): string {
    return `${this.agentInfo.name}(${this.agentInfo.role})`;
  }
  get displayCommunicationStyleList(): string[] {
    return this.agentInfo.communicationStyle.split('、').filter((item) => item);
  }
}
</script>
@@ -291,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>