From 304a920efe54968615208a580bff15bd013d730e Mon Sep 17 00:00:00 2001 From: HelenHuang <LinHuang@pollex.com.tw> Date: 星期五, 07 一月 2022 09:59:44 +0800 Subject: [PATCH] add: appointmentProgress.vue --- PAMapp/components/Client/ClientCard.vue | 120 +++++++++++++++++++++++++++++++++++++---------------------- 1 files changed, 75 insertions(+), 45 deletions(-) diff --git a/PAMapp/components/Client/ClientCard.vue b/PAMapp/components/Client/ClientCard.vue index 4cc5f65..c140e28 100644 --- a/PAMapp/components/Client/ClientCard.vue +++ b/PAMapp/components/Client/ClientCard.vue @@ -8,27 +8,14 @@ :class="{'new': newAppointment }" @click.native="openDetail" > - <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,46 @@ >(摰X�����瘙�)</span> </template> </div> - </el-col> - <el-col class="flex-column contactInfo" :xs="4" :sm="6"> - <div + <div class="unread" style="display:flex"> + <div class="circle"></div> + <div class="line"></div> + <div class="circle"></div> + <div class="line"></div> + <div class="circle"></div> + </div> + </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> + >{{ reservedTxt }}</div> --> + <div class="invite-msg smTxt_bold"> + ���赤� + </div> <div - class="date xsTxt text--mid_grey" + class="date xsTxt text--black" >{{ date }}</div> <div class="xsTxt text--mid_grey" >{{ time }}</div> - </el-col> + </div> </el-row> <Ui-Dialog @@ -87,12 +101,12 @@ :key="index" >��蝯⊥�挾{{index + 1 | formatNumber}}嚗�<span>{{ item | formatHopeContactTime}}</span></p> </div> - <div class="memoStyle"> - <div class="header"> + <div class="mt-30"> + <div class="memoTitleStyle"> <div class="mdTxt">�摰寞�膩</div> <div - class="smTxt text--bold text--primary edit cursor--pointer text--underline" - @click='isEdit = !isEdit' + class="smTxt text--bold text--primary cursor--pointer text--underline edit" + @click='editMemo' >蝺刻摩</div> </div> @@ -257,12 +271,7 @@ markAppointment() { myConsultantService.markAsContact(this.client.id).then(data => { - // TODO: 閬敺����� updated client 鞈�� - Ben 2021/11/16 - const updatedClient = {...this.client}; - updatedClient.communicateStatus = 'contacted'; - updatedClient.contactTime = new Date().toString(); - - this.updateMyAppointment(updatedClient); + this.updateMyAppointment(data); this.isVisibleDialog = false; }) } @@ -307,20 +316,26 @@ private createMemo(params) { appointmentService.createMemo(params).then(memoRes => { - this.updateStoreMemo(memoRes); + this.storeMemo(memoRes); }); } private updateMemo(params) { appointmentService.updateMemo(params).then(memoRes => { - this.updateStoreMemo(memoRes); + this.storeMemo(memoRes); }); } - private updateStoreMemo(memoRes) { + private storeMemo(memoRes) { this.memoInfo = memoRes; this.memo = this.memoInfo.content; + this.client.appointmentMemoList[0] = this.memoInfo; this.isEdit = false; + } + + editMemo() { + this.isEdit = !this.isEdit; + this.memo = this.memoInfo.content; } cancelEditMemo() { @@ -338,6 +353,7 @@ margin-bottom: 10px; display: flex; justify-content: space-between; + transition: background-color 0.5s; &.new { border-left: solid 4px $YELLOW; @@ -405,16 +421,30 @@ height: 400px; } } - .memoStyle { - margin-top: 30px; - .header { - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: flex-end; + .memoTitleStyle { + display: flex; + flex-direction: row; + justify-content: space-between; + + .edit { + align-self: flex-end; } } .fixed-Height { height: 16px; } + .test{ + display: flex; + } + .invite-msg{ + color: #ED1B2E; + border-bottom: 1px solid #ED1B2E; + width: 97px; + } + .line{ + height: 4px; + width: 10px; + background-color: $PRUDENTIAL_GREY; + + } </style> -- Gitblit v1.8.0