| | |
| | | <template> |
| | | <nav class="pam-back-action-bar fix-chrome-click--issue"> |
| | | <a @click="$router.push('/')"> |
| | | <i class="icon-left "></i>{{ label }} |
| | | <a @click="pushRouterByLoginRole"> |
| | | <i class="icon-left "></i> |
| | | </a> |
| | | <div class="label">{{ label }}</div> |
| | | </nav> |
| | | </template> |
| | | |
| | | <script lang="ts"> |
| | | import { Vue, Component } from 'vue-property-decorator'; |
| | | import { namespace } from 'nuxt-property-decorator'; |
| | | import { Vue, Component,} from 'vue-property-decorator'; |
| | | import * as _ from 'lodash'; |
| | | import { Role } from '~/shared/models/enum/Role'; |
| | | |
| | | const roleStorage = namespace('localStorage'); |
| | | @Component |
| | | export default class UiCarousel extends Vue { |
| | | |
| | | @roleStorage.Getter currentRole!:string; |
| | | get label(): string { |
| | | |
| | | if (this.$route.name) { |
| | | const routeName = this.$route.name.split('-')[0]; |
| | | let featureLabel = ''; |
| | | switch(routeName) { |
| | | case 'login': |
| | | featureLabel = '登入'; |
| | | featureLabel = '登入 | 註冊'; |
| | | break; |
| | | case 'recommendConsultant': |
| | | featureLabel = '嚴選配對'; |
| | |
| | | featureLabel = '我的顧問清單'; |
| | | break; |
| | | case 'agentInfo': |
| | | featureLabel = '業務員資訊' |
| | | featureLabel = _.isEqual(this.currentRole,Role.ADMIN) ? '查看帳號資訊' : '業務員資訊' |
| | | break; |
| | | default: |
| | | featureLabel = '回首頁'; |
| | | break; |
| | | case 'questionnaire': |
| | | featureLabel = '進行預約'; |
| | | break; |
| | | case 'notification': |
| | | featureLabel = '通知'; |
| | | break; |
| | | case 'userReviewsRecord': |
| | | case 'record': |
| | | featureLabel = '查看紀錄'; |
| | | break; |
| | | case 'accountSetting': |
| | | featureLabel = '個人帳號設定'; |
| | | break; |
| | | case 'consultantAccountSetting': |
| | | featureLabel = '查看帳號資訊'; |
| | | break; |
| | | case 'faq': |
| | | featureLabel = 'F&Q 常見問題'; |
| | | break; |
| | | } |
| | | return featureLabel; |
| | |
| | | } |
| | | } |
| | | |
| | | pushRouterByLoginRole():void{ |
| | | const pathName = this.$route.name; |
| | | pathName?.includes('myConsultantList') ? this.$router.push('/') : this.$router.go(-1); |
| | | } |
| | | |
| | | } |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | | .pam-back-action-bar { |
| | | height: 53px; |
| | | height: $MOB_NAV_BAR; |
| | | border: 1px solid #CCCCCC; |
| | | display: flex; |
| | | align-items: center; |
| | | position: fixed; |
| | | top: $MOB_NAV_BAR; |
| | | left: 0; |
| | | width: 100%; |
| | | background-color: $PRIMARY_WHITE; |
| | | z-index: 6; |
| | | font-size: 20px; |
| | | font-weight: bold; |
| | | i { |
| | | font-size: 20px; |
| | | display: block; |
| | | padding-right: 14px; |
| | | } |
| | | a { |
| | | cursor: pointer; |
| | | font-size: 24px; |
| | | font-weight: bold; |
| | | padding: 20px; |
| | | padding: 0 20px; |
| | | width: 26px; |
| | | } |
| | | .label { |
| | | margin: 0 auto; |
| | | transform: translateX(-33px); |
| | | } |
| | | } |
| | | |
| | | @include desktop { |
| | | .pam-back-action-bar { |
| | | top: $DESKTOP_NAV_BAR; |
| | | font-size: 24px; |
| | | } |
| | | } |
| | | |
| | | </style> |