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