From 41daebaa3ffd0b99aac703208e4b6b2ec41c274e Mon Sep 17 00:00:00 2001
From: 劉鈞霖 <benson@gmail.com>
Date: 星期五, 19 十一月 2021 17:44:15 +0800
Subject: [PATCH] [ Update ] 修正可複選文案，將共用 css 先拉出，調整預約顧問 背景

---
 PAMapp/pages/agentInfo/_agentNo.vue |   77 +++++++++++++++++++++++++++++---------
 1 files changed, 58 insertions(+), 19 deletions(-)

diff --git a/PAMapp/pages/agentInfo/_agentNo.vue b/PAMapp/pages/agentInfo/_agentNo.vue
index 6ec15b5..5b1b045 100644
--- a/PAMapp/pages/agentInfo/_agentNo.vue
+++ b/PAMapp/pages/agentInfo/_agentNo.vue
@@ -28,9 +28,6 @@
         <UiField :span="12" icon="agent" label="����">
           {{ agentInfo.title }}
         </UiField>
-        <UiField :span="12" icon="phone" label="�閰�">
-          {{ agentInfo.phoneNumber }}
-        </UiField>
       </el-row>
 
       <el-row
@@ -62,13 +59,15 @@
 
       <el-row
         type="flex"
+        v-if="agentInfo.suitability"
         class="pam-paragraph">
         <el-col :span="24" class="pam-field">
           <div class="pam-field__label pam-progress__label">
             <div>
               <div class="pam-field__title">
-                <!-- TODO: 憒����憿批��脣嚗������漲 [Tomas, 2021/10/29] -->
-                <i class="pam-icon icon-puzzle"></i>���漲 <i class="text--primary icon-information"></i>
+                <i class="pam-icon icon-puzzle"
+                  ></i>���漲
+                  <i class="pl-5 text--primary icon-information" @click="alertFieldInfo('suitability')"></i>
               </div>
             </div>
             <div class="xsTxt">
@@ -80,7 +79,8 @@
               :show-text="false"
               :text-inside="true"
               :stroke-width="15"
-              :percentage="agentInfo.suitability"></el-progress>
+              :percentage="agentInfo.suitability">
+            </el-progress>
           </div>
         </el-col>
       </el-row>
@@ -92,7 +92,8 @@
           <div class="pam-field__label pam-progress__label">
             <div>
               <div class="pam-field__title">
-                <i class="pam-icon icon-thumbs-up"></i>隢株岷摨西”� <i class="text--primary icon-information"></i>
+                <i class="pam-icon icon-thumbs-up"
+                  ></i>隢株岷摨西”� <i class="pl-5 text--primary icon-information" @click="alertFieldInfo('evaluation')"></i>
               </div>
             </div>
             <div class="xsTxt">
@@ -100,7 +101,7 @@
             </div>
           </div>
           <div class="pam-field__content pam-field-evaluation pt-10">
-            <el-progress :show-text="false" :stroke-width="15" :percentage="agentInfo.evaluation"></el-progress>
+            <el-progress :show-text="false" :stroke-width="15" :percentage="agentInfo.evaluation * 2"></el-progress>
           </div>
         </el-col>
       </el-row>
@@ -146,15 +147,34 @@
       <AddAndReservedBtns
         :cusClass="'pam-paragraph'"
         :agentInfo="agentInfo"
-        @openPopUp="openPopUp"
+        @openPopUp="alertAddSuccess"
       ></AddAndReservedBtns>
 
-      <PopUpFrame :isOpen.sync="isVisiblePopUp"
-      >
+    <PopUpFrame :isOpen.sync="isAlertAddSuccess">
         <div class="text--center mdTxt">
-            <p class="mb-50">{{popUpTxt}}</p>
-            <p class="text--primary cursor--pointer"
-                @click="isVisiblePopUp = false">������</p>
+            <p class="mb-50">����憿批��</p>
+            <div class="text--center">
+              <el-button
+                type="primary"
+                @click="isAlertAddSuccess = false"
+              >������</el-button>
+            </div>
+        </div>
+    </PopUpFrame>
+
+    <PopUpFrame
+      drawerSize="40%"
+      :isOpen.sync="isAlertFieldInfo"
+      >
+        <div class="text--center mdTxt fs-18">
+            <p>{{ fieldInfoTitle }}</p>
+            <p class="mt-20 text--left text--regular">{{ fieldInfoDesc }}</p>
+            <div class="text--center mt-30">
+              <el-button
+                type="primary"
+                @click="isAlertFieldInfo = false"
+              >������</el-button>
+            </div>
         </div>
     </PopUpFrame>
     </div>
@@ -168,8 +188,11 @@
 @Component
 export default class AgentInfoComponent extends Vue {
   agentInfo!: AgentInfo;
-  isVisiblePopUp = false;
-  popUpTxt = '����憿批��';
+  isAlertAddSuccess = false;
+  isAlertFieldInfo = false;
+  fieldInfoTitle = '';
+  fieldInfoDesc = '';
+
   async asyncData(context: Context) {
     const agentNo = context.route.params.agentNo;
     let agentInfo = {};
@@ -183,10 +206,24 @@
     return `${this.agentInfo.name}(${this.agentInfo.role})`;
   }
 
-  openPopUp(txt: string) {
-        this.popUpTxt = txt;
-        this.isVisiblePopUp = true;
+  alertAddSuccess() {
+      this.isAlertAddSuccess = true;
+  }
+
+  alertFieldInfo(field: string): void {
+    this.isAlertFieldInfo = true;
+    console.log(field);
+    switch(field) {
+      case 'suitability':
+        this.fieldInfoTitle = '���漲';
+        this.fieldInfoDesc = '���漲��������翰�祟�敺����雿�憿批����脰�������蝯行�����潘��隞乩������“������潦��';
+        break;
+      case 'evaluation':
+        this.fieldInfoTitle = '隢株岷摨西”�';
+        this.fieldInfoDesc = '隢株岷摨西”��撠��雿�憿批�������垣閰Ｘ���脰�������蝯行�����潦��';
+        break;
     }
+  }
 }
 
 interface AgentInfo {
@@ -231,6 +268,8 @@
     .pam-field__title {
       font-size: 16px;
       font-weight: bold;
+      display: flex;
+      align-items: center;
     }
   }
 }

--
Gitblit v1.8.0