| | |
| | | <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> |
| | |
| | | <span class="mdTxt">我的顧問清單</span> |
| | | <span class="smTxt_bold amount">共 {{consultantList.length}} 筆</span> |
| | | </el-col> |
| | | <el-col :span="8" class="mdTxt readMore" |
| | | <el-col |
| | | :span="8" |
| | | class="mdTxt readMore" |
| | | v-if="consultantList.length > 3" |
| | | @click.native="routerPush('/myConsultantList/consultantList')">查看更多</el-col> |
| | | </el-row> |
| | | <ConsultantList |
| | |
| | | <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 { getFavoriteFromStorage, setFavoriteToStorage } from '~/assets/ts/storageConsultant'; |
| | | import { addFavoriteConsultant, Consultants } from '~/assets/ts/api/consultant'; |
| | | import { login, 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() { |
| | | if (!this.recommendList) { |
| | | this.storeRecommendList(); |
| | | } |
| | | |
| | | consultantList = agents.filter(item => item.contactStatus !== 'contacted'); |
| | | if (isLogin()) { |
| | | this.addFavoriteFromStorageToApi(); |
| | | getFavoriteConsultant().then((response) => this.consultantList = response.data); |
| | | } else { |
| | | this.consultantList = getFavoriteFromStorage(); |
| | | } |
| | | } |
| | | |
| | | return { |
| | | agents, |
| | | consultantList |
| | | addFavoriteFromStorageToApi() { |
| | | const agentNoList = getFavoriteFromStorage().map(i => i.agentNo) |
| | | if (agentNoList.length > 0) { |
| | | addFavoriteConsultant(agentNoList).then(res => res); |
| | | localStorage.removeItem('favoriteConsultant'); |
| | | } |
| | | } |
| | | |
| | |
| | | this.$router.push(path); |
| | | } |
| | | |
| | | removeAgent(agentNo: number) { |
| | | removeAgent(agentNo: string) { |
| | | const findIndex = this.consultantList.findIndex((item, i) => { |
| | | return item.agentNo === agentNo; |
| | | }) |
| | | this.consultantList.splice(findIndex, 1) |
| | | this.consultantList.splice(findIndex, 1); |
| | | if (!isLogin()) { |
| | | setFavoriteToStorage(this.consultantList) |
| | | } |
| | | } |
| | | |
| | | // 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> |