From f6a21bf37ef56ecab88652b1449da63f73b9648a Mon Sep 17 00:00:00 2001
From: Mila <Mila@pollex.com.tw>
Date: 星期二, 16 十一月 2021 20:59:28 +0800
Subject: [PATCH] update 我的顧問清單: 使用 store 存放 consultantList 以及新增顧問、移除顧問的狀態控制
---
PAMapp/components/Consultant/ConsultantCard.vue | 13 +
PAMapp/store/index.ts | 97 +++++++++++++++
PAMapp/pages/index.vue | 56 ++-------
PAMapp/pages/myConsultantList/consultantList.vue | 7 -
PAMapp/assets/ts/api/consultant.ts | 26 +---
PAMapp/pages/myConsultantList.vue | 53 ++------
PAMapp/assets/ts/models/AppointmentDetail.ts | 18 +++
PAMapp/components/Consultant/ConsultantList.vue | 6
PAMapp/components/AddAndReservedBtns.vue | 43 ++----
9 files changed, 169 insertions(+), 150 deletions(-)
diff --git a/PAMapp/assets/ts/api/consultant.ts b/PAMapp/assets/ts/api/consultant.ts
index a07653b..eaef4a5 100644
--- a/PAMapp/assets/ts/api/consultant.ts
+++ b/PAMapp/assets/ts/api/consultant.ts
@@ -1,5 +1,6 @@
import { service } from '~/assets/ts/api/share';
import { AxiosResponse } from 'axios';
+import { AppointmentDetail } from '../models/AppointmentDetail';
// 憿批恥��(TODO: OTP隤����� ���蝙�)
export function login(user: any) {
@@ -8,15 +9,17 @@
// ��靽憿批��
export function recommend() {
- return service.get('/consultant/recommend')
+ return service.get<Consultants[]>('/consultant/recommend')
+ .then(res => res.data);
}
// ���“���
-export function getFavoriteConsultant():Promise<AxiosResponse<Consultants[]>> {
+export function getFavoriteConsultant() {
const headers = {
Authorization: 'Bearer ' + localStorage.getItem('id_token')
}
- return service.get('/consultant/favorite', {headers});
+ return service.get<Consultants[]>('/consultant/favorite', {headers})
+ .then(res => res.data);
}
// 敹恍�祟�
@@ -152,20 +155,3 @@
new: boolean;
}
-export interface AppointmentDetail {
- id: number,
- phone: string,
- email: string,
- contactType: string,
- gender: string,
- age: string,
- job: string,
- requirement: string,
- communicateStatus: string,
- hopeContactTime: string,
- otherRequirement: string,
- appointmentDate: Date,
- agentNo: string,
- customerId: number,
- name: string
-}
\ No newline at end of file
diff --git a/PAMapp/assets/ts/models/AppointmentDetail.ts b/PAMapp/assets/ts/models/AppointmentDetail.ts
new file mode 100644
index 0000000..c13f9a8
--- /dev/null
+++ b/PAMapp/assets/ts/models/AppointmentDetail.ts
@@ -0,0 +1,18 @@
+
+export interface AppointmentDetail {
+ id: number;
+ phone: string;
+ email: string;
+ contactType: string;
+ gender: string;
+ age: string;
+ job: string;
+ requirement: string;
+ communicateStatus: string;
+ hopeContactTime: string;
+ otherRequirement: string;
+ appointmentDate: Date;
+ agentNo: string;
+ customerId: number;
+ name: string;
+}
diff --git a/PAMapp/components/AddAndReservedBtns.vue b/PAMapp/components/AddAndReservedBtns.vue
index 3e57ce8..fe0f2e7 100644
--- a/PAMapp/components/AddAndReservedBtns.vue
+++ b/PAMapp/components/AddAndReservedBtns.vue
@@ -1,6 +1,6 @@
<template>
<el-row type="flex" justify="center" :class="cusClass">
- <el-button @click="addConsultant(agentInfo)">
+ <el-button @click="addConsultant(agentInfo)" :disabled="isAdded">
<span> + 憿批��</span>
</el-button>
<el-button
@@ -11,42 +11,22 @@
</template>
<script lang="ts">
-import { Vue, Component, Prop, Emit } from 'nuxt-property-decorator';
-import { addFavoriteConsultant, Consultants } from '~/assets/ts/api/consultant';
+import { Vue, Component, Prop, Emit, Action, State } from 'nuxt-property-decorator';
+import { Consultants } from '~/assets/ts/api/consultant';
import { isLogin } from '~/assets/ts/auth';
-import { getFavoriteFromStorage, setFavoriteToStorage } from '~/assets/ts/storageConsultant';
@Component
export default class AddAndReservedBtns extends Vue {
+ @Action addToMyConsultantList!: (consultantToAdd: Consultants) => Promise<boolean>
+ @State('myConsultantList') myConsultantList!: Consultants[];
+
@Prop() agentInfo!: Consultants;
@Prop() cusClass!: string;
isVisiblePopUp = false;
addConsultant(item: Consultants) {
- if (isLogin()) {
- addFavoriteConsultant([item.agentNo]).then(res => this.openPopUp())
- } else {
- this.addConsultantToStorage(item);
- }
- }
-
- addConsultantToStorage(item: Consultants) {
- let agentList = [item];
- const consultantList = getFavoriteFromStorage();
-
- if (consultantList) {
- const isRepeat = consultantList.findIndex(i => i.agentNo === item.agentNo) === -1;
- isRepeat
- ? this.storageFavoriteAndPopUp(consultantList.concat(agentList))
- : this.openPopUp('撌脩��憿批��');
-
- } else {
- this.storageFavoriteAndPopUp(agentList);
- }
- }
-
- storageFavoriteAndPopUp(item: Consultants[]) {
- setFavoriteToStorage(item);
- this.openPopUp();
+ this.addToMyConsultantList(item).then(addOk => {
+ addOk && this.openPopUp();
+ });
}
reserveCommunication() {
@@ -56,5 +36,10 @@
@Emit('openPopUp') openPopUp(popUpTxt: string = '����憿批��') {
return popUpTxt
}
+
+ get isAdded() {
+ return this.myConsultantList.find(item => item.agentNo === this.agentInfo.agentNo)
+ ? true : false
+ }
}
</script>
\ No newline at end of file
diff --git a/PAMapp/components/Consultant/ConsultantCard.vue b/PAMapp/components/Consultant/ConsultantCard.vue
index 8ff803e..c5ac775 100644
--- a/PAMapp/components/Consultant/ConsultantCard.vue
+++ b/PAMapp/components/Consultant/ConsultantCard.vue
@@ -69,8 +69,9 @@
</template>
<script lang="ts">
-import { Vue, Component, Prop, Emit } from 'nuxt-property-decorator';
-import { AppointmentDetail, Consultants, getAppointmentDetail } from '~/assets/ts/api/consultant';
+import { Vue, Component, Prop, Emit, Action } from 'nuxt-property-decorator';
+import { Consultants, getAppointmentDetail } from '~/assets/ts/api/consultant';
+import { AppointmentDetail } from '~/assets/ts/models/AppointmentDetail';
import { isLogin } from '~/assets/ts/auth';
import { isMobileDevice } from '~/assets/ts/device';
@@ -85,6 +86,8 @@
}
})
export default class ConsultantCard extends Vue {
+ @Action removeFromMyConsultantList!: (agentNo: string) => Promise<boolean>;
+
@Prop() agentInfo!: Consultants;
isVisibleDialog = false;
width: string = '';
@@ -157,8 +160,10 @@
});
}
- @Emit('removeAgent') removeAgent() {
- return this.agentInfo.agentNo;
+ removeAgent() {
+ this.removeFromMyConsultantList(this.agentInfo.agentNo).then((removeOk) => {
+ console.log('removeOk?', removeOk);
+ });
}
showAgentDetail(agentNo: string): void {
diff --git a/PAMapp/components/Consultant/ConsultantList.vue b/PAMapp/components/Consultant/ConsultantList.vue
index 3297855..130fbcf 100644
--- a/PAMapp/components/Consultant/ConsultantList.vue
+++ b/PAMapp/components/Consultant/ConsultantList.vue
@@ -6,7 +6,6 @@
v-for="(agent, index) in agents"
:key="index"
:agentInfo="agent"
- @removeAgent="removeAgent"
></ConsultantCard>
</template>
<template v-if="isLogin && agents.length === 0">
@@ -24,7 +23,7 @@
</template>
<script lang="ts">
-import { Vue, Component, Prop, Emit } from 'nuxt-property-decorator';
+import { Vue, Component, Prop } from 'nuxt-property-decorator';
import { Consultants } from '~/assets/ts/api/consultant';
import { isLogin } from '~/assets/ts/auth';
@@ -36,9 +35,6 @@
return isLogin();
}
- @Emit('removeAgent') removeAgent(agentId: number) {
- return agentId;
- }
}
</script>
diff --git a/PAMapp/pages/index.vue b/PAMapp/pages/index.vue
index a77e07b..9ec3c7c 100644
--- a/PAMapp/pages/index.vue
+++ b/PAMapp/pages/index.vue
@@ -28,7 +28,6 @@
</el-row>
<ConsultantList
:agents="consultantList.slice(0, 3)"
- @removeAgent="removeAgent"
></ConsultantList>
<div class='pam-recommend pb-30 pt-30'>
<h5 class="mdTxt">��靽憿批��</h5>
@@ -40,11 +39,8 @@
</template>
<script lang="ts">
-import { Vue, Component, State, Action } from 'nuxt-property-decorator';
-import { getFavoriteFromStorage, setFavoriteToStorage } from '~/assets/ts/storageConsultant';
-import { addFavoriteConsultant, Consultants, deleteConsultant } from '~/assets/ts/api/consultant';
-import { login, getFavoriteConsultant } from '~/assets/ts/api/consultant';
-import { isLogin } from '~/assets/ts/auth';
+import { Vue, Component, State, Action, Watch } from 'nuxt-property-decorator';
+import { Consultants } from '~/assets/ts/api/consultant';
@Component({
layout: 'home'
@@ -55,52 +51,28 @@
@State('recommendList') recommendList!: Consultants[];
@Action storeRecommendList!: any;
+ @State('myConsultantList') myConsultantList!: Consultants[];
+ @Action storeConsultantList!: any;
+
+ @Watch('myConsultantList')
+ onMyConsultantListChange() {
+ this.consultantList = (this.myConsultantList || [])
+ .filter(item => item.contactStatus !== 'contacted')
+ .sort((a, b) => a.updateTime > b.updateTime ? -1 : 1)
+ }
+
mounted() {
- if (!this.recommendList) {
+ if (!this.recommendList?.length) {
this.storeRecommendList();
}
- if (isLogin()) {
- this.addFavoriteFromStorageToApi();
- } else {
- this.consultantList = getFavoriteFromStorage();
- }
- }
-
- getMyConsutant() {
- getFavoriteConsultant().then((response) => {
- this.consultantList = response.data
- .filter(item => item.contactStatus !== 'contacted')
- .sort((a, b) => a.updateTime > b.updateTime ? -1 : 1)
- });
- }
-
- addFavoriteFromStorageToApi() {
- const agentNoList = getFavoriteFromStorage().map(i => i.agentNo)
- if (agentNoList.length > 0) {
- addFavoriteConsultant(agentNoList).then(res => this.getMyConsutant());
- localStorage.removeItem('favoriteConsultant');
- return;
- }
- this.getMyConsutant();
+ this.storeConsultantList();
}
routerPush(path: string) {
this.$router.push(path);
}
- removeAgent(agentNo: string) {
-
- if (!isLogin()) {
- const findIndex = this.consultantList.findIndex((item, i) => {
- return item.agentNo === agentNo;
- })
- this.consultantList.splice(findIndex, 1);
- setFavoriteToStorage(this.consultantList)
- } else {
- deleteConsultant(agentNo).then(res => this.$router.go(0))
- }
- }
}
</script>
diff --git a/PAMapp/pages/myConsultantList.vue b/PAMapp/pages/myConsultantList.vue
index 3b770b2..d935c8d 100644
--- a/PAMapp/pages/myConsultantList.vue
+++ b/PAMapp/pages/myConsultantList.vue
@@ -20,17 +20,14 @@
<NuxtChild
:contactedList="contactedList"
:consultantList="consultantList"
- @remove="removeAgent"
></NuxtChild>
</div>
</template>
<script lang='ts'>
-import { Vue, Component, Watch } from 'vue-property-decorator';
+import { Vue, Component, Watch, State, Action } from 'nuxt-property-decorator';
import { Route } from 'vue-router/types/router.d'
-import { getFavoriteFromStorage, setFavoriteToStorage } from '~/assets/ts/storageConsultant';
-import { addFavoriteConsultant, Consultants, deleteConsultant, getFavoriteConsultant } from '~/assets/ts/api/consultant';
-import { isLogin } from '~/assets/ts/auth';
+import { Consultants } from '~/assets/ts/api/consultant';
@Component
export default class myConsultantList extends Vue {
@@ -39,54 +36,30 @@
contactedList: Consultants[] = [];
consultantList: Consultants[] = [];
+ @State('myConsultantList') myConsultantList!: Consultants[];
+ @Action storeConsultantList!: any;
+
+ @Watch('myConsultantList')
+ onMyConsultantListChange() {
+ this.filterContactedList();
+ }
+
tabClick(path: string) {
this.activeTabName = path;
this.$router.push('/myConsultantList/' + this.activeTabName)
}
mounted() {
- if (isLogin()) {
- this.addFavoriteFromStorageToApi();
- } else {
- this.agents = getFavoriteFromStorage();
- this.filterContactedList()
- }
- }
-
- addFavoriteFromStorageToApi() {
- const agentNoList = getFavoriteFromStorage().map(i => i.agentNo)
- if (agentNoList.length > 0) {
- addFavoriteConsultant(agentNoList).then(res => this.getMyConsutant());
- localStorage.removeItem('favoriteConsultant');
- return;
- }
- this.getMyConsutant();
- }
-
- getMyConsutant() {
- getFavoriteConsultant().then((response) => {
- this.agents = response.data;
- this.filterContactedList();
- });
+ this.storeConsultantList();
}
filterContactedList() {
- this.consultantList = this.agents
+ this.consultantList = (this.myConsultantList || [])
.filter(item => item.contactStatus !== 'contacted')
.sort((a, b) => a.updateTime > b.updateTime ? -1 : 1);
- this.contactedList = this.agents
+ this.contactedList = (this.myConsultantList || [])
.filter(item => item.contactStatus === 'contacted')
.sort((a, b) => a.updateTime > b.updateTime ? -1 : 1);
- }
-
- removeAgent(agentNo: string) {
- if (!isLogin()) {
- const fintIndex = this.consultantList.findIndex(item => item.agentNo === agentNo);
- this.consultantList.splice(fintIndex, 1);
- setFavoriteToStorage(this.consultantList);
- } else {
- deleteConsultant(agentNo).then(res => this.$router.go(0))
- }
}
@Watch('$route') watchRouter(currentRoute: Route) {
diff --git a/PAMapp/pages/myConsultantList/consultantList.vue b/PAMapp/pages/myConsultantList/consultantList.vue
index ba32b8c..10433d4 100644
--- a/PAMapp/pages/myConsultantList/consultantList.vue
+++ b/PAMapp/pages/myConsultantList/consultantList.vue
@@ -2,7 +2,6 @@
<div>
<ConsultantList
:agents="pageList"
- @removeAgent="removeAgent"
></ConsultantList>
<UiPagination
@@ -13,7 +12,7 @@
</template>
<script lang="ts">
-import { Vue, Component, Prop, Emit, Getter } from 'nuxt-property-decorator';
+import { Vue, Component, Prop, Getter } from 'nuxt-property-decorator';
import { Consultants } from '~/assets/ts/api/consultant';
@Component
@@ -21,10 +20,6 @@
@Prop() consultantList!: Consultants[];
@Getter isLogin!: boolean;
pageList: Consultants[] = [];
-
- @Emit('remove') removeAgent(agentNo: number) {
- return agentNo;
- }
changePage(pageList: Consultants[]) {
this.pageList = pageList;
diff --git a/PAMapp/store/index.ts b/PAMapp/store/index.ts
index cc3a13b..3bedc57 100644
--- a/PAMapp/store/index.ts
+++ b/PAMapp/store/index.ts
@@ -1,23 +1,112 @@
import { Module, VuexModule, Mutation, Action } from 'vuex-module-decorators'
-import { Consultants,recommend,AgentOfStrictQuery} from '~/assets/ts/api/consultant';
+import { ClientInfo, getMyAppointmentList } from '~/assets/ts/api/appointment';
+// import * as consultant from '~/assets/ts/api/consultant';
+import { Consultants,recommend,AgentOfStrictQuery, getFavoriteConsultant, addFavoriteConsultant, deleteConsultant } from '~/assets/ts/api/consultant';
+import { isLogin } from '~/assets/ts/auth';
+import { getFavoriteFromStorage, setFavoriteToStorage } from '~/assets/ts/storageConsultant';
@Module
export default class Store extends VuexModule {
- recommendList: Consultants[] | null = null;
+ recommendList: Consultants[] = [];
strictQueryList: AgentOfStrictQuery[] = [];
+ myConsultantList: Consultants[] = [];
+
+ myAppointmentList: ClientInfo[] = [];
@Mutation updateRecommend(data: Consultants[]) {
this.recommendList = data;
+ }
+
+ @Mutation updateConsultantList(data: Consultants[]) {
+ this.myConsultantList = data;
}
@Mutation updateStrictQueryList(data: AgentOfStrictQuery[]) {
this.strictQueryList = data;
}
+ @Mutation updateMyAppointmentList(data: ClientInfo[]) {
+ this.myAppointmentList = data;
+ }
+
@Action storeRecommendList() {
- recommend().then(res => {
- this.context.commit('updateRecommend', res.data)
+ recommend().then(data => {
+ this.context.commit('updateRecommend', data)
})
}
+ @Action
+ async storeConsultantList() {
+ const localData = getFavoriteFromStorage();
+ if (!isLogin()) {
+ this.context.commit('updateConsultantList', localData)
+ return;
+ };
+
+
+ if (localData?.length) {
+ const agentNoList = localData.map(i => i.agentNo)
+ await addFavoriteConsultant(agentNoList).then(res => {
+ localStorage.removeItem('favoriteConsultant')
+ })
+ }
+
+ getFavoriteConsultant().then(data => {
+ this.context.commit('updateConsultantList', data)
+ })
+ }
+
+ @Action
+ async removeFromMyConsultantList(agentNo: string) {
+ const left = this.myConsultantList.filter(item => item.agentNo !== agentNo);
+
+ // no agent was removed
+ if (left.length === this.myConsultantList.length) return false;
+
+ if (!isLogin()) {
+ setFavoriteToStorage(left);
+ } else {
+ await deleteConsultant(agentNo)
+ }
+
+ this.context.commit('updateConsultantList', left)
+
+ return true
+ }
+
+ @Action
+ async addToMyConsultantList(consultantToAdd: Consultants) {
+ if (consultantToAdd) {
+ const found = this.myConsultantList.find(item => item.agentNo === consultantToAdd.agentNo);
+ if (!found) {
+ const newData = [consultantToAdd].concat(this.myConsultantList);
+
+ if (isLogin()) {
+ await addFavoriteConsultant([consultantToAdd.agentNo])
+ } else {
+ setFavoriteToStorage(newData);
+ }
+
+ this.context.commit('updateConsultantList', newData)
+
+ return true;
+ }
+ }
+
+ return false;
+ }
+
+ @Action
+ storeMyAppointmentList() {
+ getMyAppointmentList().then((data) => {
+ this.context.commit('updateMyAppointmentList', data)
+ });
+ }
+
+ @Action updateMyAppointment(myAppointment: ClientInfo) {
+ const data = this.myAppointmentList.filter(item => item.id !== myAppointment.id);
+ data.unshift(myAppointment);
+ this.context.commit('updateMyAppointmentList', data)
+ }
+
}
\ No newline at end of file
--
Gitblit v1.8.0