From f8858063c1daa9f9255206759bd11a30ee19980a Mon Sep 17 00:00:00 2001
From: Benson <benson@pollex.com>
Date: 星期四, 30 十二月 2021 17:53:51 +0800
Subject: [PATCH] [Update] : 顧問頭像編輯 測試
---
PAMapp/components/editConsultantAvatar.vue | 96 ++++++++++++++++++++++++++++++++
PAMapp/assets/scss/vendors/elementUI/_upload.scss | 16 +++++
PAMapp/assets/scss/vendors/_elementUI.scss | 1
PAMapp/pages/agentInfo/edit/_agentNo.vue | 20 ++----
PAMapp/shared/services/my-consultant.service.ts | 15 ++++
5 files changed, 134 insertions(+), 14 deletions(-)
diff --git a/PAMapp/assets/scss/vendors/_elementUI.scss b/PAMapp/assets/scss/vendors/_elementUI.scss
index 122f4c3..61a682f 100644
--- a/PAMapp/assets/scss/vendors/_elementUI.scss
+++ b/PAMapp/assets/scss/vendors/_elementUI.scss
@@ -13,3 +13,4 @@
@import './elementUI/messageBox';
@import './elementUI/input';
@import './elementUI/tree';
+@import './elementUI/upload'
diff --git a/PAMapp/assets/scss/vendors/elementUI/_upload.scss b/PAMapp/assets/scss/vendors/elementUI/_upload.scss
new file mode 100644
index 0000000..bb70033
--- /dev/null
+++ b/PAMapp/assets/scss/vendors/elementUI/_upload.scss
@@ -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;
+ }
+ }
+}
diff --git a/PAMapp/components/editConsultantAvatar.vue b/PAMapp/components/editConsultantAvatar.vue
new file mode 100644
index 0000000..ee4071f
--- /dev/null
+++ b/PAMapp/components/editConsultantAvatar.vue
@@ -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>
diff --git a/PAMapp/pages/agentInfo/edit/_agentNo.vue b/PAMapp/pages/agentInfo/edit/_agentNo.vue
index c1e9801..67235be 100644
--- a/PAMapp/pages/agentInfo/edit/_agentNo.vue
+++ b/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(" ");
diff --git a/PAMapp/shared/services/my-consultant.service.ts b/PAMapp/shared/services/my-consultant.service.ts
index ed06483..c48821a 100644
--- a/PAMapp/shared/services/my-consultant.service.ts
+++ b/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();
--
Gitblit v1.8.0