保誠-保戶業務員媒合平台
Tomas
2022-01-12 943b8dfc3fd82d76d46cde1834972270d4aa868a
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<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 * 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;
 
  //////////////////////////////////////////////////////////////////////
 
  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 = _.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 = 'F&Q 常見問題';
          break;
        case 'appointment':
          const appointmentFeatureLabel = this.$route.name.includes('close') ? '結案' : '預約資訊';
          const inInterview = this.$route.name.includes('interview');
          const addNewInterview = this.$route.name.includes('new');
          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>