From 647946725fdb607c8dbcabf30e4a5a94eab2561c Mon Sep 17 00:00:00 2001 From: wayne <wayne8692wayne8692@gmail.com> Date: 星期二, 16 十一月 2021 18:17:53 +0800 Subject: [PATCH] Merge remote-tracking branch 'origin/master' --- PAMapp/components/Consultant/ConsultantCard.vue | 144 ++++++++++++++++++++++++++++++++++------------- 1 files changed, 104 insertions(+), 40 deletions(-) diff --git a/PAMapp/components/Consultant/ConsultantCard.vue b/PAMapp/components/Consultant/ConsultantCard.vue index 88b44c4..8ff803e 100644 --- a/PAMapp/components/Consultant/ConsultantCard.vue +++ b/PAMapp/components/Consultant/ConsultantCard.vue @@ -5,15 +5,14 @@ <el-col :xs="22" :sm="23"> <el-row type="flex"> <el-col class="flex_column" :xs="5" :sm="3"> - <el-avatar + <UiAvatar :size="50" - :src="agentInfo.img" - class="cursor--pointer" - @click.native="$router.push('/agentInfo')" - ></el-avatar> + :fileName="avatarFileName" + @click.native="showAgentDetail(agentInfo.agentNo)" + ></UiAvatar> <div class="satisfaction"> <i class="icon-star pam-icon icon--yellow satisfaction"></i> - <span>{{agentInfo.satisfaction}}</span> + <span>{{agentInfo.avgScore }}</span> </div> </el-col> <el-col :xs="10" :sm="15"> @@ -21,13 +20,14 @@ <div class="professionals"> <span class="professionalsTxt" - v-for="(professional, index) in agentInfo.professionals" + v-for="(expertise, index) in expertises" :key="index" - >#{{professional}}</span> + >#{{expertise}}</span> </div> <div class="delete" - v-if="agentInfo.contactStatus === 'picked'" + v-if="agentInfo.contactStatus === 'picked' + || !agentInfo.contactStatus" @click="removeAgent" >蝘駁</div> </el-col> @@ -37,24 +37,32 @@ @click="reserveCommunication" :class="agentInfo.contactStatus + 'Btn'" >{{ contactTxt }}</el-button> - <div class="updateTime">{{updateTime}}</div> + <div class="updateTime" v-if="updateTime">{{updateTime | formatDate}}</div> </el-col> </el-row> </el-col> </el-row> - <Ui-Dialog :isVisible.sync="isVisibleDialog"> - <h5 class="subTitle text--center mb-30">������</h5> - <p class="smTxt">隞予 10:00</p> - <div class="dialogInfo"> - <p>憪������</p> - <p>�閰梧��0912345678</p> - <p>Email嚗�</p> - <p>�批 嚗��</p> - <p>撟湧翩嚗�26-30</p> - <p>�璆哨����璆�</p> - <p>��瘙���瑼�/閬���靽����</p> - <p>��蝯⊥�挾銝�嚗���,��� 18:00~21:00</p> + <Ui-Dialog + :isVisible.sync="isVisibleDialog" + :width="width" + > + <div v-if="appointmentDetail"> + <h5 class="subTitle text--center mb-30">������</h5> + <p class="smTxt">{{appointmentDetail.appointmentDate | formatDate}}</p> + <div class="dialogInfo"> + <p>憪��{appointmentDetail.name}}</p> + <p>�閰梧�{appointmentDetail.phone}}</p> + <p>Email嚗{appointmentDetail.email}}</p> + <p>�批嚗{gender}}</p> + <p>撟湧翩嚗{appointmentDetail.age}}</p> + <p>�璆哨�{appointmentDetail.job}}</p> + <p>��瘙�{appointmentDetail.requirement.replace(',', '��')}}</p> + <p + v-for="(item, index) in hopeContactTime" + :key="index" + >��蝯⊥�挾{{index + 1 | formatNumber}}嚗{item}}</p> + </div> </div> </Ui-Dialog> </div> @@ -62,43 +70,99 @@ <script lang="ts"> import { Vue, Component, Prop, Emit } from 'nuxt-property-decorator'; -import { Agents } from '~/plugins/api/home'; +import { AppointmentDetail, Consultants, getAppointmentDetail } from '~/assets/ts/api/consultant'; +import { isLogin } from '~/assets/ts/auth'; +import { isMobileDevice } from '~/assets/ts/device'; -@Component +@Component({ + filters: { + formatNumber(index: number) { + if (index) { + const upperNumber = ['�', '銝�', '鈭�', '銝�', '���', '鈭�', '�', '銝�', '�', '銋�', '���'] + return upperNumber[index]; + } + } + } +}) export default class ConsultantCard extends Vue { - @Prop() agentInfo!: Agents; + @Prop() agentInfo!: Consultants; isVisibleDialog = false; + width: string = ''; + appointmentDetail: AppointmentDetail = { + id: 0, + phone: '', + email: '', + contactType: '', + gender: '', + age: '', + job: '', + requirement: '', + communicateStatus: '', + hopeContactTime: '', + otherRequirement: '', + appointmentDate: new Date(), + agentNo: '', + customerId: 0, + name: '' + }; + get avatarFileName() { + return this.agentInfo.img ? this.agentInfo.img : this.agentInfo.image; + } + + get expertises() { + return this.agentInfo.expertise ? this.agentInfo.expertise : this.agentInfo.expertises; + } + get gender() { + if (this.appointmentDetail.gender) { + return this.appointmentDetail.gender === 'male' ? '���' : '憟單��'; + } + return '' + } get contactTxt() { if (this.agentInfo.contactStatus === 'contacted') { return '撌脰蝯�' - } else if (this.agentInfo.contactStatus === 'reserved') { - return '撌脤���' - } else { - return '�脰����' } + if (this.agentInfo.contactStatus === 'reserved') { + return '撌脤���' + } + return '�脰����' } get updateTime() { - const newDate = new Date(this.agentInfo.updateTime); - let year = newDate.getFullYear(); - let month = newDate.getMonth() + 1; - let date = newDate.getDate(); - let hours = newDate.getHours(); - let minutes = newDate.getMinutes(); - return `${year}/${month}/${date} ${hours} : ${minutes}` + return isLogin() ? this.agentInfo.updateTime : ''; } + get hopeContactTime() { + const contactList = this.appointmentDetail.hopeContactTime + .split("'").map(item => item.slice(0, item.length)); + return contactList.filter(item => !!item) + } reserveCommunication() { - if (this.agentInfo.contactStatus === 'picked') { - this.$router.push('/communication/myDemand') + const contactStatus = this.agentInfo.contactStatus; + if (!contactStatus || contactStatus === 'picked') { + isLogin() + ? this.$router.push(`/questionnaire/${this.agentInfo.agentNo}`) + : this.$router.push('/login'); } else { - this.isVisibleDialog = true; + this.openPopUp(); } + } + + openPopUp() { + getAppointmentDetail(this.agentInfo.latestAppointmentId).then(res => { + this.appointmentDetail = res.data; + this.width = isMobileDevice() ? '80%' : ''; + this.isVisibleDialog = true; + }); } @Emit('removeAgent') removeAgent() { return this.agentInfo.agentNo; + } + + showAgentDetail(agentNo: string): void { + this.$router.push(`/agentInfo/${agentNo}`); } } </script> @@ -186,4 +250,4 @@ font-size: 20px; } -</style> +</style> \ No newline at end of file -- Gitblit v1.8.0