Merge branch 'Phase2'

Benson

2021-12-30 0d13a8e22cfd29bcb4360f2f5d6ed0c2e38e1052

Merge branch 'Phase2'

 PAMapp/assets/scss/vendors/_elementUI.scss

@@ -13,3 +13,4 @@
@import './elementUI/messageBox';
@import './elementUI/input';
@import './elementUI/tree';
@import './elementUI/upload'

 PAMapp/assets/scss/vendors/elementUI/_upload.scss

¤ñ¹ï·sÀÉ®×
@@ -0,0 +1,16 @@
.pam-avatar-uploader{
  display: flex;
  justify-content: center;
  margin-top: 10px;
  .el-upload{
    @extend .fix-chrome-click--issue;
    .pam-avatar-uploader--title{
      font-size: 20px;
      letter-spacing: 2px;
    }
    &:focus{
      border-color: $PRIMARY_BLACK;
      color: $PRIMARY_BLACK;
    }
  }
}

 PAMapp/components/editConsultantAvatar.vue

¤ñ¹ï·sÀÉ®×
@@ -0,0 +1,96 @@
<template>
  <div>
     <el-avatar
        :size="150"
        :src="imgSrc"
        class="pam-avatar cursor--pointer fix-chrome-click--issue"
    ></el-avatar>
    <el-upload
      class="pam-avatar-uploader"
      action=""
      :auto-upload="false"
      :on-change="handleAvatarSuccess"
      :show-file-list="false">
      <div class="pam-avatar-uploader--title">更換大頭貼照</div>
    </el-upload>
  </div>
</template>

<script lang="ts">
  import { MessageBox } from 'element-ui';
  import { MessageBoxData } from 'element-ui/types/message-box';
  import { Vue, Component, Prop, PropSync } from 'nuxt-property-decorator';
  import myConsultantService from '~/shared/services/my-consultant.service';
  import _ from 'lodash';

  @Component
  export default class editConsultantAvatar extends Vue {
    @Prop({type:String, default:""})
    agentNo!:string;

    @PropSync('photoBase64',{type:String, default:""})
    syncPhotoBase64!:string;

    imgSrc:string='';

    //////////////////////////////////////////////////////////////////////

    mounted() {
      if(this.agentNo) this.initConsultantAvatar()
    }

    //////////////////////////////////////////////////////////////////////

    initConsultantAvatar():void{
      myConsultantService.getConsultantAvatar(this.agentNo)
      .then(base64=>
       this.splitbase64WithCommon(base64)
      )
    }
    handleAvatarSuccess(file:any, fileList:any) {
      const isFollowUploadRule =_.includes(file.raw.type,'image/');
      isFollowUploadRule ? this.getImgSrc(file) : this.showErrorMsg()
    }
    getImgSrc(file:any):void{
      const blob = file.raw;
      this.blobToBase64(blob).then(base64=>{
        this.splitbase64WithCommon(base64 as string);
      });
    }

    //////////////////////////////////////////////////////////////////////

    private blobToBase64(blob:File):Promise<string | ArrayBuffer | null> {
      return new Promise((resolve,reject) => {
        const reader = new FileReader();
        reader.readAsDataURL(blob);
        reader.onloadend = () => {
          resolve(reader.result)
        };
      });
    }

    private splitbase64WithCommon(base64:string):void{
      const splitBase64=_.split(base64, ','); // ç‚ºäº†æŠŠ data:image , base64 è§£æžåˆ†é–‹;
      this.syncPhotoBase64 = splitBase64[1];
      this.imgSrc = base64;
    }

    private showErrorMsg():Promise<MessageBoxData>{
       return MessageBox({
          message:`<div class="message-header">上傳格式有誤</div>
                    <div class="message-content">請上傳正確圖檔</div>`,
          dangerouslyUseHTMLString: true,
          showClose:false,
          showConfirmButton:true,
          confirmButtonText:'確認',
          customClass:'pam-message-box',
          closeOnClickModal:false,
        });
    }
  }
</script>

<style lang="scss" scoped>

</style>

 PAMapp/pages/agentInfo/edit/_agentNo.vue

@@ -3,10 +3,7 @@
      <el-row
        type="flex"
        justify="center">
        <UiAvatar
          :size="150"
          :agentNo="agentInfo.agentNo">
        </UiAvatar>
        <EditConsultantAvatar :agentNo="agentInfo.agentNo" :photoBase64.sync="editInfoValue.photoBase64"/>
      </el-row>
      <el-row
        type="flex"
@@ -20,7 +17,7 @@

      <el-row
        type="flex"
        class="pt-10"
        class="pam-paragraph"
        justify="center">
        <el-input class="mdTxt" v-model="editInfoValue.name"></el-input>
      </el-row>
@@ -190,7 +187,7 @@
<script lang="ts">
import { Context } from '@nuxt/types';
import { namespace } from 'nuxt-property-decorator';
import { Vue, Component } from 'vue-property-decorator';
import { Vue, Component, Prop } from 'vue-property-decorator';
import * as _ from "lodash";

import myConsultantService from '~/shared/services/my-consultant.service';
@@ -200,15 +197,14 @@
import { hideReviews } from '~/shared/const/hide-reviews';
import { AgentInfoSetting } from '~/shared/models/account.model';
import { Role } from '~/shared/models/enum/Role';
import { agentExpertList } from '~/shared/const/agent-expert-list';
import { agentCommunicationStyleList } from '~/shared/const/agent-communication-style-list';

const localStorage = namespace('localStorage');
const localStorageTest = namespace('localStorage');

@Component
export default class AgentInfoComponent extends Vue {

  @localStorage.State('current_role')
  @Prop({type:Object ,}) aa!:any;
  @localStorageTest.State('current_role')
  currentRole!:string | null;

  _agentInfoSetting!: AgentInfoSetting;
@@ -234,7 +230,7 @@
    communicationStyle: [] as string[],
    photoBase64       : '',
  };
  

  communicationStyleList: string[] = agentCommunicationStyleList;
  role           = Role;
  agentExpertList = [
@@ -293,7 +289,7 @@
  mounted(){
    this.setAgentInfo(this.agentInfo);
  }
  

  /////////////////////////////////////////////////////////////////////////////
  private setAgentInfo(agentInfo: AgentInfo): void {
    const [agentYear, _yearUnit , agentMonth, _monthUnit] =  agentInfo.seniority.split(" ");

 PAMapp/shared/services/my-consultant.service.ts

@@ -1,8 +1,7 @@
import { http } from "./httpClient";

import { AgentInfo } from '~/shared/models/agent-info.model';
import { Consultant } from "../models/consultant.model";

import _ from "lodash";
class MyConsultantService {

  async getFavoriteConsultantList(): Promise<Consultant[]> {
@@ -37,6 +36,18 @@
    return http.post(`/appointment/markAsContacted/${appointmentId}`);
  }

  // å–得顧問頭像
  getConsultantAvatar(agentNo:string):Promise<string>{
    return http.get(`/consultant/avatar/${agentNo}`,{ responseType : 'arraybuffer' })
      .then( response => {
        const toBase64 = window.btoa(
                          _.reduce( new Uint8Array(response.data),(data,byte) =>
                            data + String.fromCharCode(byte),'')
                        );
        const imgSrc = `data:image/png;base64,${toBase64}`;
        return imgSrc;
    });
  }
}

export default new MyConsultantService();