From 7c9f9647fbc4ebb671cb297743b21322eda0fde3 Mon Sep 17 00:00:00 2001
From: Mila <Mila@pollex.com.tw>
Date: 星期四, 04 十一月 2021 14:08:00 +0800
Subject: [PATCH] TODO#129071 顧問-客戶預約 畫面刻版
---
PAMapp/assets/scss/_common.scss | 20 ++
PAMapp/components/Client/ClientList.vue | 43 +++++
PAMapp/plugins/api/home.ts | 83 +++++++++-
PAMapp/components/Client/ClientCard.vue | 166 ++++++++++++++++++++
PAMapp/pages/clientReservedList/reservedList.vue | 28 +++
PAMapp/pages/clientReservedList/contactedList.vue | 28 +++
PAMapp/components/Ui/UiPagination.vue | 7
PAMapp/pages/clientReservedList.vue | 74 +++++++++
PAMapp/pages/myConsultantList.vue | 27 ---
9 files changed, 442 insertions(+), 34 deletions(-)
diff --git a/PAMapp/assets/scss/_common.scss b/PAMapp/assets/scss/_common.scss
index 4ae1ece..cba0aaf 100644
--- a/PAMapp/assets/scss/_common.scss
+++ b/PAMapp/assets/scss/_common.scss
@@ -41,4 +41,24 @@
&:disabled {
background-color: $LIGHT_GREY;
}
+}
+
+.pam-cus-tabs {
+ display: flex;
+ width: 100%;
+ height: 45px;
+
+ .cus-tab-item {
+ width: 50%;
+ text-align: center;
+ font-size: 24px;
+ border-bottom: solid 3px $LIGHT_GREY;
+ cursor: pointer;
+ }
+
+ .is-active {
+ font-weight: bold;
+ border-bottom: solid 3px $PRIMARY_BLACK;
+
+ }
}
\ No newline at end of file
diff --git a/PAMapp/components/Client/ClientCard.vue b/PAMapp/components/Client/ClientCard.vue
new file mode 100644
index 0000000..5594a0e
--- /dev/null
+++ b/PAMapp/components/Client/ClientCard.vue
@@ -0,0 +1,166 @@
+<template>
+ <div>
+ <el-row type="flex" class="rowStyle">
+ <el-col :xs="5" :sm="3">
+ <el-avatar
+ :size="50"
+ src=""
+ class="cursor--pointer"
+ ></el-avatar>
+ <div class="satisfaction">
+ <i class="icon-star pam-icon icon--yellow satisfaction"></i>
+ <span>{{'1'}}</span>
+ </div>
+ </el-col>
+ <el-col :xs="14" :sm="15">
+ <div class="smTxt_bold name">{{client.name}}</div>
+ <div class="message">������</div>
+ <div class="professionals">
+ <template v-if="client.requirements.length > 0">
+ <span
+ v-for="(item, index) in client.requirements"
+ :key="index"
+ class="professionalsTxt"
+ >#{{item}}</span>
+ </template>
+ <template v-else>
+ <span class="professionalsTxt noProfessionalsTxt"
+ >(摰Ｘ�����瘙�)</span>
+ </template>
+ </div>
+ </el-col>
+ <el-col class="flex-column contactInfo" :xs="5" :sm="6">
+ <div class="smTxt_bold cursor--pointer"
+ :class="client.communicateStatus"
+ @click="openDetail"
+ >{{isReserved ? '撌脤���' : '撌脰蝯�'}}
+ </div>
+ <div class="date xsTxt text--mid_grey">{{date}}</div>
+ <div class="xsTxt text--mid_grey">{{time}}</div>
+ </el-col>
+ </el-row>
+
+ <Ui-Dialog
+ :isVisible.sync="isVisibleDialog"
+ :width="width"
+ >
+ <h5 class="subTitle text--center mb-30"
+ >{{isReserved ? '������' : '撌脰蝯∟���'}}</h5>
+ <p class="smTxt text-right">隞予 10:00</p>
+ <div class="dialogTxt">
+ <p>憪��{client.name}}</p>
+ <p>�閰梧��0912345678</p>
+ <p>Email嚗�</p>
+ <p>�批嚗{client.gender === 'male' ? '���' : '憟單��'}}</p>
+ <p>撟湧翩嚗{client.age}}</p>
+ <p>�璆哨����璆�</p>
+ <p>��瘙�{client.requirements}}</p>
+ <p>��蝯⊥�挾銝�嚗���,��� 18:00~21:00</p>
+ <div class="mt-30 text--center">
+ <el-button>{{isReserved ? '璅酉�撌脤��蝯�' : '��遛��漲'}}</el-button>
+ </div>
+ </div>
+ </Ui-Dialog>
+ </div>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop } from 'nuxt-property-decorator';
+import { isMobileDevice } from '~/assets/ts/device';
+import { Clients } from '~/pages/clientReservedList.vue';
+
+@Component
+export default class ClientList extends Vue {
+ @Prop() client!: Clients;
+ isVisibleDialog = false;
+ width = '';
+
+ get time() {
+ const hours = this.client.time.getHours();
+ const minutes = this.client.time.getMinutes();
+ return `${hours} : ${minutes}`
+ }
+
+ get date() {
+ const month = this.client.time.getMonth();
+ const date = this.client.time.getDate();
+ return `${month} / ${date}`
+ }
+
+ get isReserved() {
+ return this.client.communicateStatus === 'reserved';
+ }
+
+ openDetail() {
+ this.width = isMobileDevice() ? '80%' : '';
+ this.isVisibleDialog = true;
+ }
+
+}
+</script>
+
+<style lang="scss" scoped>
+ .rowStyle {
+ padding: 10px;
+ background-color: $PRIMARY_WHITE;
+ margin-bottom: 10px;
+ display: flex;
+ justify-content: space-between;
+
+ .satisfaction {
+ font-size: 12px;
+ font-weight: bold;
+ margin-top: 5px;
+ }
+
+ .message {
+ margin:10px 0;
+ }
+
+ .professionals {
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+
+ .professionalsTxt {
+ font-size: 12px;
+ font-weight: bold;
+ margin-right: 5px;
+ }
+
+ .noProfessionalsTxt {
+ color: $PRUDENTIAL_GREY;
+ font-weight: lighter;
+ }
+ }
+
+ .contactInfo {
+ text-align: right;
+ .date {
+ font-size: 12px;
+ }
+ }
+
+ .reserved {
+ @extend .text--primary;
+ }
+
+ .contacted {
+ color: $SKY_BLUE;
+ }
+ }
+
+ .flex-column {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ }
+
+ .dialogTxt {
+ font-size: 20px;
+ }
+
+ .text-right {
+ text-align: right;
+ }
+</style>
\ No newline at end of file
diff --git a/PAMapp/components/Client/ClientList.vue b/PAMapp/components/Client/ClientList.vue
new file mode 100644
index 0000000..8669ca7
--- /dev/null
+++ b/PAMapp/components/Client/ClientList.vue
@@ -0,0 +1,43 @@
+<template>
+ <div>
+ <template v-if="clients.length > 0">
+ <ClientCard
+ v-for="(client, index) in clients"
+ :key="index"
+ :client="client"
+ ></ClientCard>
+ </template>
+ <template v-else>
+ <div class="emptyRowStyle">
+ <div class="smTxt txt">{{title === 'reservedList' ? '����撌脤��恥�' : '����撌脰蝯∪恥�'}}</div>
+ </div>
+ </template>
+ </div>
+</template>
+
+<script lang='ts'>
+import { Vue, Component, Prop } from 'nuxt-property-decorator';
+import { Clients } from '~/pages/clientReservedList.vue';
+
+@Component
+export default class ClientList extends Vue {
+ @Prop() clients!: Clients[];
+ @Prop() title!: string;
+}
+</script>
+
+<style lang="scss" scoped>
+ .emptyRowStyle {
+ background-color: $PRIMARY_WHITE;
+ width: 100%;
+ height: 100px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ .txt {
+ color: $PRUDENTIAL_GREY;
+ margin-left: 17px;
+ }
+ }
+</style>
\ No newline at end of file
diff --git a/PAMapp/components/Ui/UiPagination.vue b/PAMapp/components/Ui/UiPagination.vue
index b2128a7..0229097 100644
--- a/PAMapp/components/Ui/UiPagination.vue
+++ b/PAMapp/components/Ui/UiPagination.vue
@@ -1,9 +1,11 @@
<template>
<el-pagination
+ :current-page.sync="currentPage"
layout="prev, pager, next"
:total="totalList.length"
:page-size="pageSize"
@current-change="handleCurrentChange"
+ class="mt-10"
>
</el-pagination>
</template>
@@ -28,6 +30,11 @@
}
handleCurrentChange(currentPage: number) {
+
+ if (this.totalList.length <= this.pageSize && currentPage !== 1) {
+ currentPage -= 1;
+ }
+
if (this.totalList) {
this.pageList = this.totalList.slice(this.pageSize * currentPage - this.pageSize, this.pageSize * currentPage)
this.chagnePage();
diff --git a/PAMapp/pages/clientReservedList.vue b/PAMapp/pages/clientReservedList.vue
new file mode 100644
index 0000000..df10ac4
--- /dev/null
+++ b/PAMapp/pages/clientReservedList.vue
@@ -0,0 +1,74 @@
+<template>
+ <div>
+ <div class="pam-cus-tabs mb-30">
+ <div
+ class="cus-tab-item"
+ :class="{'is-active': activeTabName === 'reservedList'}"
+ @click="tabClick('reservedList')"
+ >摰Ｘ����
+ <span class="p">({{reservedList.length}})</span>
+ </div>
+ <div
+ class="cus-tab-item"
+ :class="{'is-active': activeTabName === 'contactedList'}"
+ @click="tabClick('contactedList')"
+ >撌脰蝯�
+ <span class="p">({{contactedList.length}})</span>
+ </div>
+ </div>
+
+ <NuxtChild
+ :contactedList="contactedList"
+ :reservedList="reservedList"
+ ></NuxtChild>
+ </div>
+</template>
+
+<script lang="ts">
+import { Context } from '@nuxt/types';
+import { Vue, Component } from 'nuxt-property-decorator';
+
+@Component
+export default class ClientReservedList extends Vue {
+ activeTabName = 'reservedList';
+ reservedList: Clients[] = [];
+ contactedList: Clients[] = [];
+ clients: Clients[] = [];
+
+ async asyncData(context: Context) {
+ let reservedList: Clients[] = [];
+ let contactedList: Clients[] = [];
+ let clients: Clients[] = [];
+
+ await context.$service.home.clientReservedList().then((result: Clients[]) => {
+ clients = result;
+ })
+
+ contactedList = clients.filter(item => item.communicateStatus === 'contacted');
+ reservedList = clients.filter(item => item.communicateStatus === 'reserved');
+
+ return {
+ clients,
+ contactedList,
+ reservedList
+ }
+ }
+
+ tabClick(path: string) {
+ this.activeTabName = path;
+ this.$router.push('/clientReservedList/' + this.activeTabName)
+ }
+}
+
+export interface Clients {
+ name: string,
+ clientId: string,
+ phone: string,
+ time: Date,
+ gender: string,
+ age: string,
+ job: string,
+ requirements: string[],
+ communicateStatus: string
+}
+</script>
\ No newline at end of file
diff --git a/PAMapp/pages/clientReservedList/contactedList.vue b/PAMapp/pages/clientReservedList/contactedList.vue
new file mode 100644
index 0000000..f47a1a2
--- /dev/null
+++ b/PAMapp/pages/clientReservedList/contactedList.vue
@@ -0,0 +1,28 @@
+<template>
+ <div>
+ <ClientList
+ :clients="pageList"
+ :title="'contactedList'"
+ ></ClientList>
+
+ <UiPagination
+ :totalList="contactedList"
+ @changePage="changePage"
+ ></UiPagination>
+ </div>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop } from 'nuxt-property-decorator';
+import { Clients } from '../clientReservedList.vue';
+
+@Component
+export default class ClientContactedList extends Vue {
+ @Prop() contactedList!: Clients[];
+ pageList: Clients[] = [];
+
+ changePage(pageList: Clients[]) {
+ this.pageList = pageList;
+ }
+}
+</script>
\ No newline at end of file
diff --git a/PAMapp/pages/clientReservedList/reservedList.vue b/PAMapp/pages/clientReservedList/reservedList.vue
new file mode 100644
index 0000000..e1c8e86
--- /dev/null
+++ b/PAMapp/pages/clientReservedList/reservedList.vue
@@ -0,0 +1,28 @@
+<template>
+ <div>
+ <ClientList
+ :clients="pageList"
+ :title="'reservedList'"
+ ></ClientList>
+
+ <UiPagination
+ :totalList="reservedList"
+ @changePage="changePage"
+ ></UiPagination>
+ </div>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop } from 'nuxt-property-decorator';
+import { Clients } from '../clientReservedList.vue';
+
+@Component
+export default class ClientReservedList extends Vue {
+ @Prop() reservedList!: Clients[];
+ pageList: Clients[] = [];
+
+ changePage(pageList: Clients[]) {
+ this.pageList = pageList;
+ }
+}
+</script>
\ No newline at end of file
diff --git a/PAMapp/pages/myConsultantList.vue b/PAMapp/pages/myConsultantList.vue
index b8e1ba4..d85e127 100644
--- a/PAMapp/pages/myConsultantList.vue
+++ b/PAMapp/pages/myConsultantList.vue
@@ -1,6 +1,6 @@
<template>
<div>
- <div class="flex mb-30">
+ <div class="pam-cus-tabs mb-30">
<div
class="cus-tab-item"
:class="{'is-active': activeTabName === 'consultantList'}"
@@ -73,27 +73,4 @@
}
}
-</script>
-
-<style lang="scss" scoped>
- .flex {
- display: flex;
- width: 100%;
- height: 45px;
-
- .cus-tab-item {
- width: 50%;
- text-align: center;
- font-size: 24px;
- border-bottom: solid 3px $LIGHT_GREY;
- cursor: pointer;
- }
-
- .is-active {
- font-weight: bold;
- border-bottom: solid 3px $PRIMARY_BLACK;
-
- }
- }
-
-</style>
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/PAMapp/plugins/api/home.ts b/PAMapp/plugins/api/home.ts
index 854f0ff..2e98ab2 100644
--- a/PAMapp/plugins/api/home.ts
+++ b/PAMapp/plugins/api/home.ts
@@ -8,7 +8,7 @@
new: true,
agentNo: 0,
name: '撘萄���',
- img: 'https://randomuser.me/api/portraits/women/31.jpg',
+ img: '',
professionals: ['鞎∪����', '鞈頧宏'],
satisfaction: 4.8,
contactStatus: 'reserved',
@@ -18,7 +18,7 @@
new: true,
agentNo: 1,
name: '�撣亙',
- img: 'https://randomuser.me/api/portraits/men/32.jpg',
+ img: '',
professionals: [],
satisfaction: 4,
contactStatus: 'contacted',
@@ -28,7 +28,7 @@
new: false,
agentNo: 2,
name: '���戊',
- img: 'https://randomuser.me/api/portraits/women/33.jpg',
+ img: '',
professionals: ['鞎∪����', '鞈頧宏'],
satisfaction: 5,
contactStatus: 'picked',
@@ -38,7 +38,7 @@
new: false,
agentNo: 3,
name: '�蝢��',
- img: 'https://randomuser.me/api/portraits/women/34.jpg',
+ img: '',
professionals: ['鞎∪����', '鞈頧宏'],
satisfaction: 4.3,
contactStatus: 'picked',
@@ -48,7 +48,7 @@
new: true,
agentNo: 4,
name: '撘萄���',
- img: 'https://randomuser.me/api/portraits/women/35.jpg',
+ img: '',
professionals: [],
satisfaction: 4.8,
contactStatus: 'picked',
@@ -58,7 +58,7 @@
new: true,
agentNo: 5,
name: '�撣亙',
- img: 'https://randomuser.me/api/portraits/men/36.jpg',
+ img: '',
professionals: ['鞎∪����', '鞈頧宏'],
satisfaction: 4.8,
contactStatus: 'reserved',
@@ -68,7 +68,7 @@
new: false,
agentNo: 6,
name: '���戊',
- img: 'https://randomuser.me/api/portraits/women/37.jpg',
+ img: '',
professionals: ['鞎∪����', '鞈蝘餉��', '蝭�蝔�', '璅暑��隡�'],
satisfaction: 4.8,
contactStatus: 'picked',
@@ -78,14 +78,79 @@
new: false,
agentNo: 7,
name: '�蝢��',
- img: 'https://randomuser.me/api/portraits/women/38.jpg',
+ img: '',
professionals: ['鞎∪����', '蝭�蝔�', '璅暑��隡�'],
satisfaction: 4.8,
contactStatus: 'picked',
updateTime: 'Tue Sep 02 2021 09:40:02 GMT+0800 (��������)'
}
]
- return CommonService.prototype.withDebugData(debugData, 'https://randomuser.me/api/')
+ return CommonService.prototype.withDebugData(debugData, '')
+ },
+ clientReservedList() {
+ const debugData = [{
+ name: '�����',
+ clientId: '1',
+ phone: '091234567',
+ time: new Date('Tue Nov 02 2021 11:23:14 GMT+0800 (��������)'),
+ gender: 'male',
+ age: '26-30',
+ job: 'general',
+ requirements: ['靽�瑼�/閬��', '��靽����'],
+ communicateStatus: 'reserved'
+ },{
+ name: 'Ariel',
+ clientId: '2',
+ phone: '091234567',
+ time: new Date('Tue Oct 15 2020 11:23:14 GMT+0800 (��������)'),
+ gender: 'female',
+ age: '30-40',
+ job: 'general',
+ requirements: ['靽�瑼�/閬��', '鞈頧宏', '��靽����'],
+ communicateStatus: 'contacted'
+ },{
+ name: 'Donna',
+ clientId: '3',
+ phone: '091234567',
+ time: new Date('Tue Oct 31 2021 10:23:14 GMT+0800 (��������)'),
+ gender: 'female',
+ age: '10-20',
+ job: 'general',
+ requirements: ['��靽����'],
+ communicateStatus: 'reserved'
+ },{
+ name: '���',
+ clientId: '4',
+ phone: '091234567',
+ time: new Date('Tue Dec 31 2020 19:23:14 GMT+0800 (��������)'),
+ gender: 'female',
+ age: '50-60',
+ job: 'general',
+ requirements: ['鞈頧宏', '蝭�蝔�'],
+ communicateStatus: 'reserved'
+ },{
+ name: '��摩隡�',
+ clientId: '5',
+ phone: '091234567',
+ time: new Date('Tue Oct 15 2020 11:23:14 GMT+0800 (��������)'),
+ gender: 'male',
+ age: '60-70',
+ job: 'general',
+ requirements: ['蝭�蝔�', '鞈頧宏', '��靽����'],
+ communicateStatus: 'contacted'
+ },{
+ name: '�慦賢直',
+ clientId: '6',
+ phone: '091234567',
+ time: new Date('Tue Dec 31 2020 19:23:14 GMT+0800 (��������)'),
+ gender: 'female',
+ age: '50-60',
+ job: 'general',
+ requirements: [],
+ communicateStatus: 'reserved'
+ }]
+
+ return CommonService.prototype.withDebugData(debugData, '')
}
})
--
Gitblit v1.8.0