| | |
| | | <template> |
| | | <nav class="pam-back-action-bar fix-chrome-click--issue"> |
| | | <a @click="pushRouterByLoginRole"> |
| | | <i class="icon-left "></i>{{ label }} |
| | | <a @click="goBack"> |
| | | <i class="icon-left "></i> |
| | | </a> |
| | | <div class="label">{{ label }}</div> |
| | | </nav> |
| | | </template> |
| | | |
| | | <script lang="ts"> |
| | | import { namespace } from 'nuxt-property-decorator'; |
| | | import { Vue, Component,} from 'vue-property-decorator'; |
| | | import { Role } from '~/assets/ts/models/enum/Role'; |
| | | import * as _ from 'lodash'; |
| | | |
| | | const roleStorage = namespace('localStorage'); |
| | | import * as _ from 'lodash'; |
| | | import { Role } from '~/shared/models/enum/Role'; |
| | | |
| | | const appointmentStore = namespace('appointment.store'); |
| | | const roleStorage = namespace('localStorage'); |
| | | |
| | | @Component |
| | | export default class UiCarousel extends Vue { |
| | | @roleStorage.Getter currentRole!:string; |
| | | |
| | | @roleStorage.Getter |
| | | currentRole!:string; |
| | | |
| | | @appointmentStore.Getter |
| | | isCloseAppointment!: boolean; |
| | | |
| | | ////////////////////////////////////////////////////////////////////// |
| | | |
| | | goBack(): void { |
| | | const pathName = this.$route.name; |
| | | pathName?.includes('myConsultantList') |
| | | ? this.$router.push('/') |
| | | : this.$router.go(-1); |
| | | } |
| | | |
| | | get label(): string { |
| | | if (this.$route.name) { |
| | | const routeName = this.$route.name.split('-')[0]; |
| | |
| | | featureLabel = '我的顧問清單'; |
| | | break; |
| | | case 'agentInfo': |
| | | featureLabel = '業務員資訊' |
| | | const agentFeatureLabel = this.$route.name.includes('edit') ? '編輯帳號資訊' : '查看帳號資訊'; |
| | | featureLabel = _.isEqual(this.currentRole,Role.ADMIN) |
| | | ? agentFeatureLabel |
| | | : '業務員資訊' |
| | | 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 = 'FAQ 常見問題'; |
| | | break; |
| | | case 'appointment': |
| | | const appointmentFeatureLabel = this.$route.name.includes('close') |
| | | ? '結案' |
| | | : this.isCloseAppointment ? '結案明細' : '預約資訊'; |
| | | const inInterview = this.$route.name.includes('interview'); |
| | | const addNewInterview = this.$route.name.includes('new'); |
| | | const interviewList = this.$route.name.includes('interviewList'); |
| | | const recordList = this.$route.name.includes('recordList'); |
| | | if (interviewList) { |
| | | featureLabel = '約訪紀錄'; |
| | | } else if (recordList) { |
| | | featureLabel = '系統通知紀錄'; |
| | | } else if (inInterview) { |
| | | featureLabel = addNewInterview |
| | | ? '新增約訪紀錄' |
| | | : '編輯約訪紀錄'; |
| | | } else { |
| | | featureLabel = appointmentFeatureLabel; |
| | | } |
| | | break; |
| | | } |
| | | return featureLabel; |
| | | } else { |
| | | return '回首頁'; |
| | | } |
| | | } |
| | | pushRouterByLoginRole():void{ |
| | | const link = _.isEqual(this.currentRole,Role.ADMIN)? '/myAppointmentList/appointmentList':'/'; |
| | | this.$router.push(link); |
| | | } |
| | | |
| | | } |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | | .pam-back-action-bar { |
| | | height: $MOB_NAV_BAR; |
| | | border: 1px solid #CCCCCC; |
| | | display: flex; |
| | | align-items: center; |
| | | position: fixed; |
| | | top: 0; |
| | | left: 0; |
| | | width: 100%; |
| | | 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; |
| | | 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; |
| | | cursor : pointer; |
| | | 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> |