<template>
|
<nav class="pam-back-action-bar fix-chrome-click--issue">
|
<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 '~/shared/models/enum/Role';
|
|
const appointmentStore = namespace('appointment.store');
|
const roleStorage = namespace('localStorage');
|
|
@Component
|
export default class UiCarousel extends Vue {
|
|
@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];
|
let featureLabel = '';
|
switch(routeName) {
|
case 'login':
|
featureLabel = '登入 | 註冊';
|
break;
|
case 'recommendConsultant':
|
featureLabel = '嚴選配對';
|
break;
|
case 'quickFilter':
|
featureLabel = '快速篩選';
|
break;
|
case 'myConsultantList':
|
featureLabel = '我的顧問清單';
|
break;
|
case 'agentInfo':
|
const agentFeatureLabel = this.$route.name.includes('edit') ? '編輯帳號資訊' : '查看帳號資訊';
|
featureLabel = 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 '回首頁';
|
}
|
}
|
|
}
|
</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 : $MOB_NAV_BAR;
|
left : 0;
|
width : 100%;
|
background-color: $PRIMARY_WHITE;
|
z-index : 6;
|
font-size : 20px;
|
font-weight : bold;
|
i {
|
display : block;
|
padding-right: 14px;
|
}
|
a {
|
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>
|
