[ Update ] 修正 chrome 開發者模式按下 有藍色背景的問題，修正 navbar 根據螢幕寬度進行改變和 fix 住

劉鈞霖

2021-11-16 98161c912dbcc05179391b41792a0c41a22d4e92

 PAMapp/pages/index.vue

@@ -1,7 +1,5 @@
<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>
@@ -24,7 +22,7 @@
                </el-col>
                <el-col
                    :span="8"
                    class="mdTxt readMore"
                    class="mdTxt readMore fix-chrome-click--issue"
                    v-if="consultantList.length > 3"
                    @click.native="routerPush('/myConsultantList/consultantList')">查看更多</el-col>
            </el-row>
@@ -44,7 +42,7 @@
<script lang="ts">
import { Vue, Component, State, Action } from 'nuxt-property-decorator';
import { getFavoriteFromStorage, setFavoriteToStorage } from '~/assets/ts/storageConsultant';
import { addFavoriteConsultant, Consultants } from '~/assets/ts/api/consultant';
import { addFavoriteConsultant, Consultants, deleteConsultant } from '~/assets/ts/api/consultant';
import { login, getFavoriteConsultant } from '~/assets/ts/api/consultant';
import { isLogin } from '~/assets/ts/auth';

@@ -64,18 +62,27 @@

        if (isLogin()) {
            this.addFavoriteFromStorageToApi();
            getFavoriteConsultant().then((response) => this.consultantList = response.data);
        } 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 => res);
            addFavoriteConsultant(agentNoList).then(res => this.getMyConsutant());
            localStorage.removeItem('favoriteConsultant');
            return;
        }
        this.getMyConsutant();
    }

    routerPush(path: string) {
@@ -83,33 +90,17 @@
    }

    removeAgent(agentNo: string) {
        const findIndex = this.consultantList.findIndex((item, i) => {
            return item.agentNo === agentNo;
        })
        this.consultantList.splice(findIndex, 1);

        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))
        }
    }

    // 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.removeItem('id_token');
        this.$router.go(0)
    }

}

</script>
@@ -157,7 +148,7 @@
        background-image: url('~/assets/images/recommendConsultant/banner_mob.svg');
    }

    @media (min-width: 576px) and (max-width: 1023px) {
    @media (min-width: 576px) and (max-width: 768px) {
        .quickFilter.el-button--default {
            background-image: url('~/assets/images/quickFilter/banner_web.svg');
        }