From 4c8c206207873073865bd2715ffb11fe139641b4 Mon Sep 17 00:00:00 2001 From: Mila <Mila@pollex.com.tw> Date: 星期一, 17 一月 2022 10:08:59 +0800 Subject: [PATCH] Merge branch 'Phase3' of https://192.168.0.10:8443/r/pcalife/PAM into Phase3 --- PAMapp/components/Client/ClientCard.vue | 119 +++++++++++++++++++++++++++++++++++++++++++---------------- 1 files changed, 87 insertions(+), 32 deletions(-) diff --git a/PAMapp/components/Client/ClientCard.vue b/PAMapp/components/Client/ClientCard.vue index 25c5423..8d3d7fd 100644 --- a/PAMapp/components/Client/ClientCard.vue +++ b/PAMapp/components/Client/ClientCard.vue @@ -6,29 +6,16 @@ class="rowStyle cursor--pointer" justify="space-between" :class="{'new': newAppointment }" - @click.native="openDetail" + @click.native="viewDetail" > - <el-col :xs="1" :sm="1" class="unread" align="middle" v-if="isReserved"> + <div class="test"> + <div class="unread" v-if="isReserved"> <div class="circle" v-if="!isRead"></div> - </el-col> - <el-col :xs="5" :sm="3" align="middle"> - <el-avatar - :size="50" - ></el-avatar> - <div class="satisfaction" v-if="!hideReviews"> - <template v-if="client.satisfactionScore"> - TODO:���遛��漲 - <i class="icon-star pam-icon icon--yellow satisfaction"></i> - <span>{{client.satisfactionScore}}</span> - </template> - <template v-else> - <div class="unfilled">�憛急遛��漲</div> - </template> - </div> - </el-col> - <el-col :xs="14" :sm="14" class="pl-10"> + </div> + + <div class="pl-10"> <div class="smTxt_bold name">{{ client.name }}</div> - <div class="my-10">������</div> + <div class="my-10 xsTxt">������</div> <div class="professionals"> <template v-if="client.requirement"> <span @@ -42,19 +29,55 @@ >(摰X�����瘙�)</span> </template> </div> - </el-col> - <el-col class="flex-column contactInfo" :xs="4" :sm="6"> + <AppointmentProgress + :currentStep="client.communicateStatus" + ></AppointmentProgress> + </div> + </div> + <!-- <el-col :xs="5" :sm="3" align="middle"> + <el-avatar + :size="50" + ></el-avatar> + <div class="satisfaction" v-if="!hideReviews"> + <template v-if="client.satisfactionScore"> + TODO:���遛��漲 + <i class="icon-star pam-icon icon--yellow satisfaction"></i> + <span>{{client.satisfactionScore}}</span> + </template> + <template v-else> + <div class="unfilled">�憛急遛��漲</div> + </template> + </div> + </el-col> --> + + <div class="flex-column contactInfo" :xs="4" :sm="6"> + <div - class="smTxt_bold fix-chrome-click--issue" - :class="{'unread-txt': reservedTxt === '�霈�', 'read-txt': reservedTxt !== '�霈�'}" - >{{ reservedTxt }}</div> + class="invite-msg smTxt_bold" + @click.stop="makeInterview" + v-if="client.communicateStatus === contactStatus.RESERVED"> + ���赤� + </div> <div - class="date xsTxt text--mid_grey" + class="invite-msg smTxt_bold" + @click.stop="closeAppointment" + v-else-if="client.communicateStatus === contactStatus.CONTACTED"> + 蝯�� + </div> + <div + class="invite-msg smTxt_bold" + @click.stop="inviteReview" + v-else> + ��遛��漲 + </div> + + <div + class="date xsTxt text--black" >{{ date }}</div> <div class="xsTxt text--mid_grey" >{{ time }}</div> - </el-col> + </div> </el-row> <Ui-Dialog @@ -118,6 +141,8 @@ <el-button @click="markAppointment">璅酉�撌脤��蝯�</el-button> </div> </Ui-Dialog> + + <InterviewMsg :isVisible.sync="isMsgDialog"></InterviewMsg> </div> </template> @@ -127,9 +152,10 @@ import appointmentService from '~/shared/services/appointment.service'; import UtilsService from '~/shared/services/utils.service'; import { hideReviews } from '~/shared/const/hide-reviews'; -import { AppointmentMemoInfo, ClientInfo } from '~/shared/models/client.model'; import myConsultantService from '~/shared/services/my-consultant.service'; import { ElRow } from 'element-ui/types/row'; +import { Appointment, AppointmentMemoInfo } from '~/shared/models/appointment.model'; +import { ContactStatus } from '~/shared/models/enum/contact-status'; const localStorage = namespace('localStorage'); @Component({ @@ -153,17 +179,21 @@ }) export default class ClientList extends Vue { @Action - updateMyAppointment!: (data: ClientInfo) => void; + updateMyAppointment!: (data: Appointment) => void; @Prop() - client!: ClientInfo; + client!: Appointment; @localStorage.Mutation storageClearAppointmentIdFromMsg!: () => void; isVisibleDialog = false; + isMsgDialog = false; dialogWidth = ''; hideReviews = hideReviews; + + contactStatus = ContactStatus; + // currentAppointmentStatus = this.contactStatus.RESERVED; isEdit = false; memoInfo: AppointmentMemoInfo = { @@ -190,6 +220,24 @@ ? JSON.parse(JSON.stringify(this.client.appointmentMemoList[0])) : {appointmentId: 0, content: '', id: 0}; this.memo = this.memoInfo.content; + } + + ////////////////////////////////////////////////////////////////////// + + viewDetail(): void { + this.$router.push(`/appointment/${this.client.id}`); + } + + makeInterview(): void { + this.isMsgDialog = true; + } + + closeAppointment(): void { + this.$router.push(`/appointment/${this.client.id}/close`); + } + + makeAppointment(): void { + alert('MAKE AN APPOINTMENT!'); } get newAppointment(): boolean { @@ -339,6 +387,7 @@ margin-bottom: 10px; display: flex; justify-content: space-between; + transition: background-color 0.5s; &.new { border-left: solid 4px $YELLOW; @@ -352,7 +401,7 @@ .circle { width: 10px; height: 10px; - border-radius: 50px; + border-radius: 50%; background-color: $PRIMARY_RED; margin: auto; } @@ -372,7 +421,6 @@ text-overflow: ellipsis; .professionalsTxt { font-size: 12px; - font-weight: bold; margin-right: 5px; } .noProfessionalsTxt { @@ -418,4 +466,11 @@ .fixed-Height { height: 16px; } + .test{ + display: flex; + } + .invite-msg{ + color: $PRIMARY_RED; + @extend .text--underline; + } </style> -- Gitblit v1.8.0