TODO#130015/130016 [推薦保險顧問/我的顧問清單] api 串接

Mila

2021-11-10 391d7db141245798c64aa8acb0f143ab4152aa79

TODO#130015/130016 [推薦保險顧問/我的顧問清單] api 串接

 PAMapp/assets/ts/api/consultant.ts

¤ñ¹ï·sÀÉ®×
@@ -0,0 +1,48 @@
import axios from 'axios';
import { AxiosRequestConfig, AxiosError, AxiosResponse } from 'axios'

export const service = axios.create({
    baseURL: 'http://localhost:8080/api',
    headers: {
        Authorization: 'Bearer ' + localStorage.getItem('id_token')
    }
})

service.interceptors.request.use(function (config: AxiosRequestConfig) {
    return config;
}, function (error: AxiosError) {
    return Promise.reject(error);
});

service.interceptors.response.use(function (response: AxiosResponse) {
    return response;
}, function (error: AxiosError) {
    return Promise.reject(error);
});

// é¡§å®¢ç™»å…¥(TODO: OTP認證開發前 æš«æ™‚使用)
export function login(user: any) {
    return service.post('/authenticate', user)
}

// æŽ¨è–¦ä¿éšªé¡§å•
export function recommend() {
    return service.get('/consultant/recommend')
}

// æˆ‘的顧問清單
export function getFavoriteConsultant() {
    return service.get('/consultant/favorite');
}

export interface Consultants {
    agentNo: number,
    name: string,
    img: string,
    new: boolean,
    avgScore: number,
    expertise: string[],
    updateTime: Date,
    seniority: string,
    contactStatus?: string;
}

 PAMapp/assets/ts/auth.ts

¤ñ¹ï·sÀÉ®×
@@ -0,0 +1,3 @@
export function isLogin() {
    return !!localStorage.getItem('id_token')
}

 PAMapp/components/Consultant/ConsultantCard.vue

@@ -9,11 +9,11 @@
                            :size="50"
                            :src="agentInfo.img"
                            class="cursor--pointer"
                            @click.native="$router.push('/agentInfo')"
                            @click.native="$router.push(`/agentInfo`)"
                        ></el-avatar>
                        <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,9 +21,9 @@
                        <div class="professionals">
                            <span
                                class="professionalsTxt"
                                v-for="(professional, index) in agentInfo.professionals"
                                v-for="(expertise, index) in agentInfo.expertise"
                                :key="index"
                            >#{{professional}}</span>
                            >#{{expertise}}</span>
                        </div>
                        <div
                            class="delete"
@@ -65,12 +65,12 @@

<script lang="ts">
import { Vue, Component, Prop, Emit } from 'nuxt-property-decorator';
import { Agents } from '~/plugins/api/home';
import { Consultants } from '~/assets/ts/api/consultant';
import { isMobileDevice } from '~/assets/ts/device';

@Component
export default class ConsultantCard extends Vue {
    @Prop() agentInfo!: Agents;
    @Prop() agentInfo!: Consultants;
    isVisibleDialog = false;
    width: string = '';


 PAMapp/components/Consultant/ConsultantList.vue

@@ -1,6 +1,6 @@
<template>
    <div>
        <template v-if="agents.length > 0 && noLogin">
        <template v-if="agents.length > 0">
            <ConsultantCard
                v-for="(agent, index) in agents"
                :key="index"
@@ -8,15 +8,15 @@
                @removeAgent="removeAgent"
            ></ConsultantCard>
        </template>
        <template v-else-if="agents.length === 0">
        <template v-else-if="!isLogin && agents.length === 0">
            <div class="emptyRowStyle">
                <div class="smTxt txt">您目前無已選顧問</div>
                <div class="mdTxt login" @click="$router.push('/login')">登入</div>
                <div class="smTxt txt">查看更多已選顧問</div>
            </div>
        </template>
        <template v-else>
            <div class="emptyRowStyle">
                <div class="mdTxt login" @click="$router.push('/login')">登入</div>
                <div class="smTxt txt">查看更多已選顧問</div>
                <div class="smTxt txt">您目前無已選顧問</div>
            </div>
        </template>
    </div>
@@ -24,13 +24,16 @@

<script lang="ts">
import { Vue, Component, Prop, Emit } from 'nuxt-property-decorator';
import { Agents } from '~/plugins/api/home';
import { Consultants } from '~/assets/ts/api/consultant';
import { isLogin } from '~/assets/ts/auth';

@Component
export default class ConsultantList extends Vue {
    @Prop() agents!: Agents[];
    @Prop() agents!: Consultants[];

    noLogin = true;
    get isLogin() {
        return isLogin();
    }

    @Emit('removeAgent') removeAgent(agentId: number) {
        return agentId;

 PAMapp/components/Consultant/ConsultantSwiper.vue

@@ -14,7 +14,7 @@
              <div class="name">{{agentInfo.name}}</div>
              <div>
                <i class="icon-star pam-icon icon--yellow"></i>
                <span class="satisfaction">{{agentInfo.satisfaction}}</span>
                <span class="satisfaction">{{agentInfo.avgScore}}</span>
              </div>
          </div>
        </swiper-slide>
@@ -28,11 +28,11 @@
<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';
import { SwiperOptions } from 'swiper';
import { Agents } from '~/plugins/api/home'
import { Consultants } from '~/assets/ts/api/consultant'

@Component
export default class UiSwiper extends Vue {
    @Prop() agents!: Agents[];
    @Prop() agents!: Consultants[];

    swiperOptions: SwiperOptions = {
        loop: true,

 PAMapp/components/Ui/UiPagination.vue

@@ -12,20 +12,20 @@

<script lang="ts">
import { Vue, Component, Prop, Emit, Watch } from 'nuxt-property-decorator';
import { Agents } from '~/plugins/api/home';
import { Consultants } from '~/assets/ts/api/consultant';

@Component
export default class UiPagination extends Vue {
    @Prop() totalList!: Agents[];
    @Prop() totalList!: Consultants[];
    pageSize = 5;
    currentPage = 1;
    pageList: Agents[] = [];
    pageList: Consultants[] = [];

    mounted() {
        this.handleCurrentChange(this.currentPage);
    }

    @Emit('changePage') chagnePage(): Agents[] {
    @Emit('changePage') chagnePage(): Consultants[] {
        return this.pageList
    }

@@ -41,7 +41,7 @@
        }
    }

    @Watch('totalList') watchtotalList(newValue: Agents[]) {
    @Watch('totalList') watchtotalList(newValue: Consultants[]) {
        if (newValue) {
            this.handleCurrentChange(this.currentPage);
        }

 PAMapp/pages/index.vue

@@ -1,5 +1,7 @@
<template>
    <div>
        <el-button @click="login">登入</el-button>
        <el-button @click="remove">登出</el-button>
        <Ui-Carousel></Ui-Carousel>
        <div class="page-container">
            <h5 class="mdTxt mb-30">預約保險顧問</h5>
@@ -31,36 +33,36 @@
                <h5 class="mdTxt">推薦保險顧問</h5>
                <img class="absulate img" src="~/assets/images/index_recommend.svg" alt="">
            </div>
            <ConsultantSwiper :agents="agents"></ConsultantSwiper>
            <ConsultantSwiper :agents="recommendList"></ConsultantSwiper>
        </div>
    </div>
</template>

<script lang="ts">
import { Vue, Component } from 'nuxt-property-decorator';
import { Agents } from '~/plugins/api/home';
import { Context } from '@nuxt/types/app';
import { Vue, Component, State, Action } from 'nuxt-property-decorator';
import { Consultants } from '~/assets/ts/api/consultant';
import { login, recommend, getFavoriteConsultant } from '~/assets/ts/api/consultant';
import { isLogin } from '~/assets/ts/auth';

@Component({
    layout: 'home'
})
export default class MainComponent extends Vue {
    agents: Agents[] = [];
    consultantList: Agents[] = [];
    consultantList: Consultants[] = [];
    agents: Consultants[] = [];
    @State('recommendList') recommendList!: Consultants[];
    @Action storeRecommendList!: any;

    async asyncData(context: Context) {
        let agents: Agents[] = [];
        let consultantList: Agents[] = [];
        await context.$service.home.recommendConsultantList().then((result: Agents[]) => {
            agents = result;
        })
    mounted() {

        consultantList = agents.filter(item => item.contactStatus !== 'contacted');

        return {
            agents,
            consultantList
        if (!this.recommendList) {
            this.storeRecommendList();
        }

        if (isLogin()) {
            getFavoriteConsultant().then((response) => this.consultantList = response.data);
        }

    }

    routerPush(path: string) {
@@ -73,6 +75,25 @@
        })
        this.consultantList.splice(findIndex, 1)
    }

    // TODO: åƒ…OTP認證開發前 æš«æ™‚使用
    login() {
        const user = {
            username: "user",
            password: "user"
        }
        login(user).then((res) => {
            localStorage.setItem('id_token', res.data.id_token);
            this.$router.go(0);
        })
    }

    // TODO: åƒ…OTP認證開發前 æš«æ™‚使用
    remove() {
        localStorage.clear();
        this.$router.go(0)
    }

}

</script>

 PAMapp/pages/myConsultantList.vue

@@ -29,14 +29,15 @@
import { Context } from '@nuxt/types';
import { Vue, Component, Watch } from 'vue-property-decorator';
import { Route } from 'vue-router/types/router.d'
import { Agents } from '~/plugins/api/home';
import { Consultants, getFavoriteConsultant } from '~/assets/ts/api/consultant';
import { isLogin } from '~/assets/ts/auth';

@Component
export default class myConsultantList extends Vue {
    activeTabName = 'consultantList';
    agents: Agents[] = [];
    contactedList: Agents[] = [];
    consultantList: Agents[] = [];
    agents: Consultants[] = [];
    contactedList: Consultants[] = [];
    consultantList: Consultants[] = [];

    tabClick(path: string) {
        this.activeTabName = path;
@@ -44,13 +45,13 @@
    }

    async asyncData(context: Context) {
        let agents: Agents[] = [];
        let contactedList: Agents[] = [];
        let consultantList: Agents[] = [];
        let agents: Consultants[] = [];
        let contactedList: Consultants[] = [];
        let consultantList: Consultants[] = [];

        await context.$service.home.recommendConsultantList().then((result: Agents[]) => {
            agents = result;
        })
        if (isLogin()) {
            await getFavoriteConsultant().then((response) => agents = response.data);
        }

        contactedList = agents.filter(item => item.contactStatus === 'contacted');
        consultantList = agents.filter(item => item.contactStatus !== 'contacted');

 PAMapp/pages/myConsultantList/consultantList.vue

@@ -13,24 +13,22 @@
</template>

<script lang="ts">
import { Vue, Component, Prop, Emit } from 'nuxt-property-decorator';
import { Agents } from '~/plugins/api/home';
import { Vue, Component, Prop, Emit, Getter } from 'nuxt-property-decorator';
import { Consultants } from '~/assets/ts/api/consultant';

@Component
export default class ConsultantPage extends Vue {
    @Prop() consultantList!: Agents[];
    pageList: Agents[] = [];
    @Prop() consultantList!: Consultants[];
    @Getter isLogin!: boolean;
    pageList: Consultants[] = [];

    @Emit('remove') remove(agentNo: number) {
    @Emit('remove') removeAgent(agentNo: number) {
        return agentNo;
    }

    changePage(pageList: Agents[]) {
    changePage(pageList: Consultants[]) {
        this.pageList = pageList;
    }

    removeAgent(agentNo: number) {
        this.remove(agentNo);
    }
}
</script>

 PAMapp/pages/myConsultantList/contactedList.vue

@@ -13,14 +13,14 @@

<script lang="ts">
import { Vue, Component, Prop } from 'nuxt-property-decorator' ;
import { Agents } from '~/plugins/api/home';
import { Consultants } from '~/assets/ts/api/consultant';

@Component
export default class ContactedList extends Vue {
    @Prop() contactedList!: Agents[];
    pageList: Agents[] = [];
    @Prop() contactedList!: Consultants[];
    pageList: Consultants[] = [];

    changePage(pageList: Agents[]) {
    changePage(pageList: Consultants[]) {
        this.pageList = pageList;
    }
}

 PAMapp/pages/quickFilter/index.vue

@@ -79,7 +79,7 @@
<script lang="ts">
import { Context } from '@nuxt/types';
import { Vue, Component } from 'nuxt-property-decorator';
import { Agents } from '~/plugins/api/home';
import { Consultants } from '~/assets/ts/api/consultant';
import { isMobileDevice } from '~/assets/ts/device';
import QuickFilterDrawer from '~/components/QuickFilter/QuickFilterSelector.vue';

@@ -123,9 +123,9 @@
    ];

    async asyncData(context: Context) {
        let consultantList: Agents[] = [];
        let consultantList: Consultants[] = [];

        await context.$service.home.recommendConsultantList().then((result: Agents[]) => {
        await context.$service.home.recommendConsultantList().then((result: Consultants[]) => {
            consultantList = result;
        })


 PAMapp/plugins/api/home.ts

@@ -152,15 +152,4 @@

        return CommonService.prototype.withDebugData(debugData, '')
    }
})

export interface Agents {
    agentNo: number,
    name: string,
    img: string,
    new: boolean,
    satisfaction: number,
    professionals: string[],
    contactStatus: string,
    updateTime: Date
  }
})

 PAMapp/store/index.ts

@@ -1,6 +1,18 @@
import { Module, VuexModule } from 'vuex-module-decorators'

import { Module, VuexModule, Mutation, Action } from 'vuex-module-decorators'
import { Consultants } from '~/assets/ts/api/consultant';
import { recommend } from '~/assets/ts/api/consultant'
@Module
export default class Store extends VuexModule {
    recommendList: Consultants[] | null = null;

    @Mutation updateRecommend(data: Consultants[]) {
        this.recommendList = data;
    }

    @Action storeRecommendList() {
        recommend().then(res => {
            this.context.commit('updateRecommend', res.data)
       })
    }

}