From 6fa4bba623713c396432ba8b863846883d6a1906 Mon Sep 17 00:00:00 2001
From: wayne <wayne8692wayne8692@gmail.com>
Date: 星期三, 26 一月 2022 10:52:23 +0800
Subject: [PATCH] Merge branch 'pollex-dev' into sit

---
 PAMapp/components/Consultant/ConsultantCard.vue |  214 +++++++++++++++++++++++++++++++---------------------
 1 files changed, 127 insertions(+), 87 deletions(-)

diff --git a/PAMapp/components/Consultant/ConsultantCard.vue b/PAMapp/components/Consultant/ConsultantCard.vue
index 1a9d104..b154bf8 100644
--- a/PAMapp/components/Consultant/ConsultantCard.vue
+++ b/PAMapp/components/Consultant/ConsultantCard.vue
@@ -1,70 +1,64 @@
 <template>
     <div>
         <el-row type="flex" class="rowStyle" :class="{'new': !agentInfo.customerViewTime }">
-
-            <el-col :xs="2" :sm="1"></el-col>
-            <el-col :xs="22" :sm="23">
-                <el-row type="flex">
-                    <el-col class="flex_column" :xs="5" :sm="3">
-                        <UiAvatar
-                            :size="50"
-                            :fileName="avatarFileName"
-                            @click.native="showAgentDetail(agentInfo.agentNo)"
-                        ></UiAvatar>
-                        <!-- TODO:���遛��漲 -->
-                        <div v-if="!hideReviews">
-                            <i class="icon-star pam-icon icon--yellow satisfaction"  v-if="notScoreAppointmentYet"></i>
-                            <span v-if="notScoreAppointmentYet">
-                                {{ agentInfo.satisfactionScore }}
-                            </span>
-                            <div class="unfilled text--center "
-                                style="display:flex"
-                                v-if="notScoreAppointmentYet">�憛�<br />皛踵�漲</div>
-                            <span v-if="agentInfo.contactStatus !== 'contacted'">{{ agentInfo.avgScore }}</span>
-                        </div>
-                    </el-col>
-                    <el-col :xs="10" :sm="15">
-                        <div class="smTxt_bold name">{{agentInfo.name}}</div>
-                        <div class="professionals">
-                            <span
-                                class="professionalsTxt"
-                                v-for="(expertise, index) in agentInfo.expertise"
-                                :key="index"
-                            >#{{expertise}}</span>
-                        </div>
-                        <div
-                            class="delete"
-                            v-if="showRemoveBtn"
-                            @click="removeAgent"
-                        >蝘駁</div>
-                    </el-col>
-                    <el-col class="flex_column" :xs="9" :sm="6">
-                        <el-button
-                            class="smTxt_bold outline_btn"
-                            @click="reserveCommunication"
-                            :class="actionBtnStyle"
-                        >{{ actionBtnLabel }}</el-button>
-                        <div
-                          v-if="notScoreAppointmentYet"
-                          class="text--primary mt-10 text--center text--underline cursor--pointer"
-                          @click="reviewsBtn = true">蝯虫�遛��漲閰��</div>
-                        <div class="updateTime mt-10">
-                            {{ agentInfo.updateTime | formatDate }}
-                        </div>
-                    </el-col>
-                </el-row>
+            <el-col class="flex_column pl-5" :xs="5" :sm="3">
+                <UiAvatar
+                    :size="50"
+                    :agentNo="agentInfo.agentNo"
+                    @click.native="showAgentDetail(agentInfo.agentNo)"
+                ></UiAvatar>
+                <!-- TODO:���遛��漲 -->
+                <div v-if="!hideReviews">
+                    <i class="icon-star pam-icon icon--yellow satisfaction"  v-if="notScoreAppointmentYet"></i>
+                    <span v-if="notScoreAppointmentYet">
+                        {{ agentInfo.satisfactionScore }}
+                    </span>
+                    <div class="unfilled text--center "
+                        style="display:flex"
+                        v-if="notScoreAppointmentYet">�憛�<br />皛踵�漲</div>
+                    <span v-if="agentInfo.contactStatus !== 'contacted'">{{ agentInfo.avgScore }}</span>
+                </div>
+            </el-col>
+            <el-col :xs="10" :sm="15">
+                <div class="smTxt_bold name">{{agentInfo.name}}</div>
+                <div class="professionals">
+                    <span
+                        class="professionalsTxt"
+                        v-for="(expertise, index) in agentInfo.expertise"
+                        :key="index"
+                    >#{{expertise}}</span>
+                </div>
+                <div
+                    class="delete"
+                    v-if="showRemoveBtn"
+                    @click="isRemoveAgentPopup = true"
+                >蝘駁</div>
+                <div
+                    v-if="notScoreAppointmentYet"
+                    class="text--primary text--underline cursor--pointer xsTxt text--bold"
+                    @click="reviewsBtn = true">蝯虫�遛��漲閰��</div>
+            </el-col>
+            <el-col class="flex_column" :xs="9" :sm="6">
+                <el-button
+                    class="smTxt_bold outline_btn"
+                    @click="reservedOrShowAppointmentInfo"
+                    :class="actionBtnStyle"
+                >{{ actionBtnLabel }}</el-button>
+                <div class="updateTime mt-10">
+                    {{ agentInfo.updateTime | formatDate }}
+                </div>
             </el-col>
         </el-row>
 
         <Ui-Dialog
             :isVisible.sync="isVisibleDialog"
             :width="width"
-            class="pam-myDemand-dialog"
+            class="pam-myDemand-dialog pam-dialog-reserved"
         >
             <div v-if="appointmentDetail">
                 <h5 class="subTitle text--center mb-30">������</h5>
                 <p class="smTxt">{{appointmentDetail.appointmentDate | formatDate}}</p>
-                <div class="dialogInfo">
+                <div class="reserved-info">
                     <p>憪��{appointmentDetail.name}}</p>
                     <p>�閰梧�{appointmentDetail.phone}}</p>
                     <p>Email嚗{appointmentDetail.email}}</p>
@@ -86,7 +80,7 @@
                     </div>
                 </div>
 
-                <div v-if="notScoreAppointmentYet" class="dialogInfo-btn">
+                <div v-if="notScoreAppointmentYet" class="reserved-btn">
                     <el-button type="primary"
                         @click.native="reviewsBtn = true">蝯虫�遛��漲閰��</el-button>
                 </div>
@@ -97,14 +91,24 @@
                 </div>
             </div>
         </Ui-Dialog>
-        <PopUpFrame :isOpen.sync="reviewsBtn">
-            <div class="mdTxt">
+
+        <PopUpFrame :isOpen.sync="reviewsBtn" class="reviewDialog-content">
+            <div class="mdTxt pam-dialog-review">
                 靽憿批�遛��漲
                 <span class="hint">������</span>
-                <div class="dialogInfo-score">
-                    <el-rate v-model="inputScore" class="pam-quickFilter-rate"></el-rate>
+                <div class="mt-30 review-content">
+                    <UiAvatar :size="80" :agentNo="agentInfo.agentNo"></UiAvatar>
+                    <div class="review-text">撠憿批��
+                        <span class="text--primary">{{agentInfo.name}}</span>
+                        ��擃���蝯虫�嗾憿��嚗�
+                    </div>
                 </div>
-                <div class="dialogInfo-btn">
+
+                <div class="review-score">
+                    <el-rate v-model="inputScore" class="pam-rate mt-30"></el-rate>
+                </div>
+
+                <div class="review-btn">
                     <el-button
                         type="primary"
                         :disabled="!inputScore"
@@ -121,10 +125,18 @@
             </div>
         </PopUpFrame>
 
-        <PopUpFrame :isOpen.sync="isConfirmPopup">
-            <div class="text--center mdTxt">撌脫����迨蝑���</div>
+        <PopUpFrame  :isOpen.sync="isConfirmPopup">
+            <div class="text--center mdTxt">撌脫��{confirmTxt}}</div>
             <div class="text--center mt-30">
                 <el-button @click="isConfirmPopup = false" type="primary">蝣箏��</el-button>
+            </div>
+        </PopUpFrame>
+
+        <PopUpFrame :isOpen.sync="isRemoveAgentPopup">
+            <div class="text--center mdTxt">��蝘駁憿批�� <span class="text--primary">{{agentInfo.name}}</span>嚗�</div>
+            <div class="text--center mt-30">
+                <el-button @click="isRemoveAgentPopup = false">�</el-button>
+                <el-button @click="removeAgent" type="primary">�</el-button>
             </div>
         </PopUpFrame>
     </div>
@@ -177,7 +189,8 @@
     isCancelPopup = false;
     hideReviews = hideReviews;
     isConfirmPopup = false;
-
+    isRemoveAgentPopup = false;
+    confirmTxt = '';
 
     appointmentDetail: any = {
         age               : '',
@@ -205,16 +218,16 @@
     get notScoreAppointmentYet(): boolean {
       const isAppointment = !!this.agentInfo['appointmentStatus'];
       if (!isAppointment) return false;
-      return !this.agentInfo['appointmentScore'];
+      return this.agentInfo['appointmentStatus'] !== 'contacted' ? !this.agentInfo['appointmentScore'] : false;
     }
 
     get isAppointment(): boolean {
-      return !!this.agentInfo['appointmentStatus'];;
+      return !!this.agentInfo['appointmentStatus'];
     }
 
-    get latestReservedAppointment(): Appointment {
+    get latestNotClosedAppointment(): Appointment {
         return this.agentInfo.appointments!
-                .filter((appointment) => appointment.communicateStatus !== 'contacted')
+                .filter((appointment) => appointment.communicateStatus === 'reserved' || appointment.communicateStatus === 'contacted')
                 .map((reversedAppointment) => {
                     return {
                     ...reversedAppointment,
@@ -252,6 +265,12 @@
         if (this.agentInfo['appointmentStatus'] === 'reserved') {
             return '撌脤���';
         }
+        if (this.agentInfo['appointmentStatus'] === 'done') {
+            return '撌脫�漱';
+        }
+        if (this.agentInfo['appointmentStatus'] === 'closed') {
+            return '���漱';
+        }
       } else {
         if (this.agentInfo.contactStatus === 'contacted') {
             return '撌脰蝯�';
@@ -271,6 +290,12 @@
         }
         if (this.agentInfo['appointmentStatus'] === 'reserved') {
             return 'reservedBtn';
+        }
+        if (this.agentInfo['appointmentStatus'] === 'done') {
+            return 'doneBtn';
+        }
+        if (this.agentInfo['appointmentStatus'] === 'closed') {
+            return 'closedBtn';
         }
       } else {
         if (this.agentInfo.contactStatus === 'contacted') {
@@ -296,7 +321,7 @@
     @Action
     storeConsultantList!: () => void;
 
-    reserveCommunication() {
+    reservedOrShowAppointmentInfo() {
       const isAppointment = !!this.agentInfo['appointmentStatus'];
       const contactStatus = this.agentInfo.contactStatus;
         if (!isAppointment && (!contactStatus || contactStatus === 'picked')) {
@@ -310,7 +335,7 @@
       const isAppointment = !!this.agentInfo['appointmentStatus'];
       const appointmentId = isAppointment
                           ? this.agentInfo['appointmentId']
-                          : this.latestReservedAppointment.id;
+                          : this.latestNotClosedAppointment.id;
 
         appointmentService.getAppointmentDetail(appointmentId!).then(res => {
             this.appointmentDetail = {
@@ -324,6 +349,12 @@
 
     removeAgent() {
         this.removeFromMyConsultantList(this.agentInfo.agentNo).then((removeOk) => {
+            this.isRemoveAgentPopup = false;
+            setTimeout(() => {
+                this.confirmTxt = '蝘駁憿批��';
+                this.isConfirmPopup = true;
+            }, 300);
+
         });
     }
 
@@ -335,7 +366,7 @@
       const isAppointment = !!this.agentInfo['appointmentStatus'];
       const appointmentId = isAppointment
                           ? this.agentInfo['appointmentId']
-                          : this.latestReservedAppointment.id;
+                          : this.latestNotClosedAppointment.id;
 
         const reviewParams: UserReviewsConsultantsParams = {
             appointmentId: appointmentId,
@@ -350,12 +381,14 @@
     }
 
     cancel() {
-        appointmentService.cancelAppointment(this.latestReservedAppointment.id).then(res => {
+        appointmentService.cancelAppointment(this.latestNotClosedAppointment.id).then(res => {
             this.storeConsultantList();
             this.isVisibleDialog = false;
             this.isCancelPopup = false;
             setTimeout(() => {
+                this.confirmTxt = '���迨蝑���';
                 this.isConfirmPopup = true;
+
             }, 300);
         });
     }
@@ -407,6 +440,7 @@
         }
 
         .delete {
+            display: inline-block;
             color: $PRIMARY_RED;
             font-size: 14px;
             font-weight: bold;
@@ -435,6 +469,28 @@
             }
         }
 
+        .doneBtn {
+            color: $BEIGE;
+            border-color: $BEIGE;
+
+            &:focus {
+                color: $PRIMARY_WHITE;
+                background-color: $BEIGE;
+                opacity: 0.5;
+            }
+        }
+
+        .closedBtn {
+            color: $PRUDENTIAL_GREY;
+            border-color: $PRUDENTIAL_GREY;
+
+            &:focus {
+                color: $PRIMARY_WHITE;
+                background-color: $PRUDENTIAL_GREY;
+                opacity: 0.5;
+            }
+        }
+
         .updateTime {
             font-size: 12px;
             font-weight: bold;
@@ -448,20 +504,4 @@
         flex-direction: column;
         justify-content: space-between;
     }
-
-    .dialogInfo {
-        font-size: 20px;
-        overflow-y:scroll;
-        height: 400px;
-    }
-    .dialogInfo-btn{
-        display: flex;
-        justify-content: center;
-    }
-    .dialogInfo-score{
-        display: flex;
-        justify-content: center;
-        margin-bottom: 50px;
-    }
-
 </style>

--
Gitblit v1.8.0