From f90c94f20b5f11d3b3ce0164d619c0112d5158c9 Mon Sep 17 00:00:00 2001
From: Mila <Mila@pollex.com.tw>
Date: 星期四, 20 一月 2022 18:23:56 +0800
Subject: [PATCH] update: TODO#133100 顧問端：header增加顧問頭像圖示

---
 PAMapp/components/editConsultantAvatar.vue |   89 ++++++++++++++++++++++++++++++--------------
 1 files changed, 60 insertions(+), 29 deletions(-)

diff --git a/PAMapp/components/editConsultantAvatar.vue b/PAMapp/components/editConsultantAvatar.vue
index ee4071f..02d61c9 100644
--- a/PAMapp/components/editConsultantAvatar.vue
+++ b/PAMapp/components/editConsultantAvatar.vue
@@ -1,37 +1,52 @@
 <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=""
+      ref="upload"
+      action="#"
       :auto-upload="false"
-      :on-change="handleAvatarSuccess"
-      :show-file-list="false">
-      <div class="pam-avatar-uploader--title">���之�鞎潛</div>
+      :on-change="handleAvatarUploaded"
+      :show-file-list="false"
+      accept="image/png, image/jpeg, image/jpg">
+        <el-avatar
+
+          :size="150"
+          :src="imgSrc"
+          class="pam-avatar cursor--pointer fix-chrome-click--issue"
+        ></el-avatar>
+        <div  class="pam-avatar-uploader__action-label mt-10 cursor--pointer" >閮剖����</div>
     </el-upload>
+      <div
+        v-if="showResetAvatarBtn"
+        class="pam-avatar-uploader__action-label text--center mt-10 cursor--pointer"
+        @click="resetAvatar">
+        ��������
+      </div>
+
   </div>
 </template>
 
 <script lang="ts">
+  import { Vue, Component, Prop, PropSync } from 'nuxt-property-decorator';
+
   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';
+
+  import myConsultantService from '~/shared/services/my-consultant.service';
 
   @Component
   export default class editConsultantAvatar extends Vue {
+
     @Prop({type:String, default:""})
     agentNo!:string;
 
     @PropSync('photoBase64',{type:String, default:""})
     syncPhotoBase64!:string;
 
-    imgSrc:string='';
+    _imgSrc: string = '';
+    imgSrc: string='';
 
     //////////////////////////////////////////////////////////////////////
 
@@ -39,26 +54,30 @@
       if(this.agentNo) this.initConsultantAvatar()
     }
 
-    //////////////////////////////////////////////////////////////////////
-
-    initConsultantAvatar():void{
+    private initConsultantAvatar(): void {
       myConsultantService.getConsultantAvatar(this.agentNo)
       .then(base64=>
-       this.splitbase64WithCommon(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);
-      });
     }
 
     //////////////////////////////////////////////////////////////////////
+
+    resetAvatar(): void {
+      this.imgSrc = this._imgSrc;
+    }
+
+    handleAvatarUploaded(file:any): void {
+      const isFollowUploadRule =_.includes(file.raw.type,'image/');
+      isFollowUploadRule ? this.getImgSrc(file) : this.showFileUploadErrorMsg()
+    }
+
+    private 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) => {
@@ -70,13 +89,18 @@
       });
     }
 
-    private splitbase64WithCommon(base64:string):void{
-      const splitBase64=_.split(base64, ','); // �鈭�� data:image , base64 閫������;
+    private splitBase64WithCommon(base64: string): void {
+      const splitBase64= _.split(base64, ','); // �鈭�� data:image , base64 閫������;
       this.syncPhotoBase64 = splitBase64[1];
+      // NOTE: �����誑 agentNO ���� avatar ��仃����
+      // ����迨��靘蝭���＊蝷�'������'���瘜�� [Tomas, 2022/1/3]
+      if (!this._imgSrc) {
+        this._imgSrc = base64;
+      }
       this.imgSrc = base64;
     }
 
-    private showErrorMsg():Promise<MessageBoxData>{
+    private showFileUploadErrorMsg():Promise<MessageBoxData>{
        return MessageBox({
           message:`<div class="message-header">銝�撘�炊</div>
                     <div class="message-content">隢�甇�蝣箏���</div>`,
@@ -88,6 +112,13 @@
           closeOnClickModal:false,
         });
     }
+
+    get showResetAvatarBtn(): boolean {
+      // NOTE: �����誑 agentNO ���� avatar ��仃����
+      // ����迨��靘蝭���＊蝷�'������'���瘜�� [Tomas, 2022/1/3]
+      if (!this._imgSrc && !this.imgSrc) return false;
+      return this._imgSrc !== this.imgSrc;
+    }
   }
 </script>
 

--
Gitblit v1.8.0