保誠-保戶業務員媒合平台
wayne
2022-02-17 a3716f72066d25d745f4d5103ff23a553c3e102b
PAMapp/components/BackActionBar.vue
@@ -1,22 +1,40 @@
<template>
    <nav class="pam-back-action-bar fix-chrome-click--issue">
        <a @click="pushRouterByLoginRole" v-if="questionnaireState">
          <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;
  questionnaireState: boolean = true;
  @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];
@@ -35,7 +53,10 @@
          featureLabel = '我的顧問清單';
          break;
        case 'agentInfo':
          featureLabel = _.isEqual(this.currentRole,Role.ADMIN) ? '查看帳號資訊' : '業務員資訊'
          const agentFeatureLabel = this.$route.name.includes('edit') ? '編輯帳號資訊' : '查看帳號資訊';
          featureLabel = _.isEqual(this.currentRole,Role.ADMIN)
                  ? agentFeatureLabel
                  : '業務員資訊'
          break;
        default:
          featureLabel = '回首頁';
@@ -46,6 +67,7 @@
        case 'notification':
          featureLabel = '通知';
          break;
        case 'userReviewsRecord':
        case 'record':
          featureLabel = '查看紀錄';
          break;
@@ -55,6 +77,29 @@
        case 'consultantAccountSetting':
          featureLabel = '查看帳號資訊';
          break;
        case 'faq':
          featureLabel = 'F&Q 常見問題';
          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 {
@@ -62,44 +107,43 @@
    }
  }
  pushRouterByLoginRole():void{
    const pathName = this.$route.name;
    pathName?.includes('myConsultantList') ? this.$router.push('/') : this.$router.go(-1);
  }
  set label(value) {
    this.questionnaireState = value === '進行預約' ? this.currentRole === Role.USER : true;
  }
}
</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%;
  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;
    top      : $DESKTOP_NAV_BAR;
    font-size: 24px;
  }
}
</style>