vue-ptc/src/components/nav-bar/index.vue

<template>
  <div :class="['nav-bar', { 'nav-bar--fixed': fixed }]">
    <div class="nav-bar-left">
      <div class="nav-icons">
        <i v-if="showNavIcons" class="icon-menu" @click="showMenu = true"></i>
        <router-link class="icon-logo" to="/"></router-link>
        <i v-if="showNavIcons" class="icon-mine" @click.stop="onClickMine"></i>
      </div>
      <transition
        v-if="showNavIcons"
        enter-active-class="fadeIn"
        leave-active-class="fadeOut"
      >
        <div v-show="showMenu" class="nav-menu nav-links">
          <div class="nav-menu-header">
            <i class="logo"></i>
            <i class="close" @click="showMenu = false"></i>
          </div>
          <div class="nav-menu-body">
            <ul class="nav-links-inner">
              <!-- <li class="nav-link">
                <router-link to="/repair/appointment"
                  >REPAIR BOOKING</router-link
                >
              </li> -->
              <li class="nav-link">
                <router-link to="/fill-order">ONLINE SHOP</router-link>
              </li>
              <li class="nav-link">PTC Care Plus</li>
              <li class="nav-link">SOTRE LOCATION</li>
              <li class="nav-link">CONTACT US</li>
            </ul>
          </div>
        </div>
      </transition>
    </div>
    <div v-if="showNavIcons" class="nav-bar-right">
      <div class="user pointer flex-ac" @click.stop="onClickMine">
        <template v-if="state.userInfo">
          <i class="icon-mine"></i>
          <span class="user-name ellipsis">{{
            state.userInfo ? state.userInfo.name : 'Sign in'
          }}</span>
        </template>
        <span v-else class="u-no">LOGIN</span>
      </div>
      <div class="contact">
        <i class="icon-phone"></i>
        <div>
          <p class="tel">400-100-100</p>
          <p class="time">Mon-Fri &nbsp;9:00-17:00</p>
        </div>
      </div>
    </div>
    <transition enter-active-class="fadeIn" leave-active-class="fadeOut">
      <div
        v-if="state.userInfo"
        v-show="showMine"
        class="nav-menu nav-dropdown"
      >
        <div class="nav-menu-header">
          <i class="logo"></i>
          <i class="close" @click="showMine = false"></i>
        </div>
        <div
          class="nav-menu-body user-panel"
          :class="{ 'is-member': state.userInfo.orders.length }"
        >
          <div class="info" @click.stop>
            <div class="p1">
              <p class="name ellipsis">Hi, {{ state.userInfo.name }}</p>
              <p class="intro">
                {{ state.userInfo.orders.length ? 'Pro' : 'Ordinary' }} member
              </p>
            </div>
            <div v-if="!state.userInfo.orders.length" class="p2">
              <p class="txt">You have not purchased a member</p>
              <button class="btn" @click="$router.push('/fill-order')">
                BUY
              </button>
            </div>
            <div v-else class="p3">
              <div class="txt">
                $10 off for additional services |
                <strong class="primary">Buy now ></strong>
              </div>
              <div class="swiper">
                <div class="swiper-wrapper">
                  <div
                    v-for="(item, index) of state.userInfo.orders"
                    :key="index"
                    class="swiper-slide"
                    @click="$router.push(`/order/${item.id}`)"
                  >
                    <div class="service">
                      <div class="service-title">
                        <i class="service-icon icon-lite fls0"></i>
                        <div class="service-type ellipsis">
                          {{ item.product_name }}
                        </div>
                        <div class="service-period fls0">
                          {{ $util.formatDate(item.start_time) }} to
                          {{ $util.formatDate(item.end_time) }}
                        </div>
                      </div>
                      <div class="service-model tac ellipsis">
                        {{ item.phone_info }}
                      </div>
                      <div class="service-code tac">{{ item.phone_imei }}</div>
                    </div>
                  </div>
                </div>
              </div>
              <div v-if="state.userInfo.orders.length > 1" class="pagination">
                <i
                  v-for="n of state.userInfo.orders.length"
                  :key="n"
                  :class="['dot', { active: slideIdx === n - 1 }]"
                ></i>
              </div>
            </div>
          </div>
          <div class="role">
            <router-link to="/dashboard">
              {{
                state.userInfo.orders.length
                  ? 'Pro  Member >'
                  : 'Ordinary  Member >'
              }}
            </router-link>
          </div>
          <ul class="dropdown-list">
            <template v-if="state.userInfo.orders.length">
              <li class="dropdown-item i1">
                <router-link to="/repair/history"
                  >MY REPAIR REQUEST</router-link
                >
              </li>
              <li class="dropdown-item i2">
                <router-link to="/order">MY ORDER</router-link>
              </li>
            </template>
            <li class="dropdown-item i3">
              <router-link to="/gift-card">MY DISCOUNT COUPON</router-link>
            </li>
            <li class="dropdown-item i4">
              <router-link to="/invite"
                >INVITE FRIENDS
                <span v-if="state.coupon.coupon_amount" class="ptc-tag"
                  >Get a ${{ state.coupon.coupon_amount }} coupon</span
                ></router-link
              >
            </li>
            <li class="dropdown-item i5">
              <router-link to="/account">ACCOUNT INFORMATION</router-link>
            </li>
            <li class="dropdown-item i6" @click="signOut">SIGN OUT</li>
          </ul>
        </div>
      </div>
    </transition>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { state, logout } from '@/store'
import Dialog from '@/components/dialog'
import Swiper from 'swiper'
import 'swiper/css'
import { lockScroll } from '@/utils/dom'

interface Props {
  showNavIcons?: boolean
  fixed?: boolean
}

defineProps<Props>()

const router = useRouter()
const route = useRoute()
const showMenu = ref(false)
const showMine = ref(false)
const slideIdx = ref(0)

document.addEventListener('click', () => (showMine.value = false))

onMounted(() => {
  new Swiper('.swiper', {
    slidesPerView: 1.08,
    spaceBetween: 15,
    on: {
      slideChange(swiper) {
        slideIdx.value = swiper.realIndex
      },
    },
  })
})

watch(
  () => route.fullPath,
  () => {
    showMenu.value = showMine.value = false
  }
)
watch(showMenu, toggleLock)
watch(showMine, toggleLock)

function toggleLock(show: boolean) {
  if (show) {
    window.innerWidth < 768 && lockScroll(true)
  } else {
    lockScroll(false)
  }
}

function onClickMine() {
  if (state.userInfo) {
    showMine.value = !showMine.value
  } else {
    router.push('/login')
  }
}

async function signOut() {
  await Dialog.confirm('TIPS', 'Are you sure you want to sign out?', {
    confirmText: 'YES',
  })
  await logout()
  router.push('/')
}
</script>

<style lang="scss">
:root {
  --nav-bar-height: 118px;
  @include media-breakpoint-up(md) {
    --nav-bar-height: 148px;
  }
  @include media-breakpoint-up(lg) {
    --nav-bar-height: 168px;
  }
}

.nav-bar {
  height: var(--nav-bar-height);
  background: #fff;
  border-bottom: 1px solid #d9d9d9;
  &--fixed {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 10;
  }

  &-left {
    @include media-breakpoint-up(md) {
      display: flex;
      align-items: center;
    }
  }
  &-right {
    display: none;
    flex-shrink: 0;
    @include media-breakpoint-up(md) {
      display: flex;
      align-items: center;
      margin-left: 100px;

      .user .icon-mine {
        display: block;
        margin-right: 8px;
        width: 32px;
        height: 32px;
      }
      .user-name {
        max-width: 300px;
        font-size: 32px;
        font-weight: 600;
        color: $primary-color;
      }
      .u-no {
        font-size: 32px;
        color: #193059;
      }
      .contact {
        position: relative;
        display: none;
        margin-left: 30px;
        padding-left: 32px;
        &::before {
          content: '';
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 2px;
          height: 72px;
          background: #dae1ef;
        }
      }
      .tel {
        line-height: 44px;
        font-size: 32px;
        font-weight: 600;
        color: $primary-color;
      }
      .time {
        line-height: 44px;
        font-size: 32px;
        font-weight: 500;
        color: #999;
      }
    }
    @media (min-width: 1400px) {
      .contact {
        display: flex;
        align-items: center;
      }
    }
  }

  .nav-icons {
    box-sizing: content-box;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 40px;
    height: var(--nav-bar-height);
  }
  .icon-menu {
    @include icon('@img/menu.png', 44px);
  }
  .icon-mine {
    @include icon('@img/user.png', 44px);
  }
  .icon-logo {
    @include icon('@img/logo.png', 130px, 70px);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .icon-phone {
    @include icon('@img/phone.png', 76px);
    margin-right: 26px;
  }

  @include media-breakpoint-up(md) {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 32px;
    .icon-menu,
    .icon-mine {
      display: none;
    }
    .icon-logo {
      position: static;
      margin-right: 32px;
      transform: none;
    }
  }
  @include media-breakpoint-up(lg) {
    padding: 0 120px;
    .icon-logo {
      margin-right: 126px;
      width: 207px;
      height: 99px;
    }
  }

  .nav-menu {
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;

    &-header {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      height: var(--nav-bar-height);

      .logo {
        @include icon('@img/logo.png', 130px, 70px);
      }
      .close {
        @include icon('@img/close.png', 44px);
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 40px;
      }
    }

    &-body {
      flex: 1;
      @include media-breakpoint-down(md) {
        overflow: auto;
      }
    }
  }
  .nav-links {
    background: $primary-color;
    @include media-breakpoint-up(md) {
      display: block !important;
      position: static;
      background: none;
      .nav-menu-header {
        display: none;
      }
    }
    .logo {
      background-image: url(@img/logo2.png);
      transform: scale(1.03);
    }
    .close {
      background-image: url(@img/close2.png);
    }
  }
  .nav-dropdown {
    background: #fff;

    @include media-breakpoint-up(md) {
      left: auto;
      right: 20px;
      bottom: auto;
      top: var(--nav-bar-height);
      margin-top: 2px;
      box-shadow: 0px 0px 28px 0px rgba(0, 0, 0, 0.08);
      z-index: 2;

      .nav-menu-header,
      .info,
      .ptc-tag {
        display: none;
      }
      .dropdown-list {
        margin-top: 0;
      }
    }
    @media (min-width: 1400px) {
      right: 520px;
    }
  }

  .nav-links-inner {
    margin-top: 36px;
    line-height: 144px;
    font-size: 40px;
    font-weight: 600;
    color: #fff;

    @include media-breakpoint-up(md) {
      display: flex;
      margin-top: 0;
      font-size: 28px;
      font-weight: 400;
      line-height: 44px;
      color: #193059;
    }
    @include media-breakpoint-up(lg) {
      font-size: 32px;
    }
  }
  .nav-link {
    padding-left: 196px;
    background-color: $primary-color;
    transition: background-color 0.3s ease;
    &:active {
      background-color: $primary-color-lighten;
    }
    @include media-breakpoint-up(md) {
      padding-left: 0;
      background-color: #fff !important;
      + .nav-link {
        margin-left: 48px;
      }
    }
    @include media-breakpoint-up(lg) {
      + .nav-link {
        margin-left: 64px;
      }
    }

    a {
      display: block;
      width: 100%;
    }
  }
}

.user-panel {
  .info {
    margin: 20px 36px 24px;
    @include media-breakpoint-up(md) {
      margin: 0 0 24px 0;
    }
  }
  .p1 {
    position: relative;
    padding: 48px 50px 0;
    height: 202px;
    color: $primary-color;
    background-color: #e9ebf0;
    border-radius: 8px 8px 0px 0px;
    overflow: hidden;
    &::after {
      content: '';
      @include icon('@img/user-lg.png', 190px);
      position: absolute;
      top: 46px;
      right: 42px;
    }

    .name {
      font-size: 48px;
      font-weight: 600;
    }
    .intro {
      margin-top: 16px;
      font-size: 32px;
    }
  }
  .p2 {
    padding: 48px;
    height: 224px;
    border-radius: 0 0 8px 8px;
    border: 2px solid #e9ebf0;

    .txt {
      line-height: 44px;
      font-size: 32px;
      color: #333;
    }

    .btn {
      display: block;
      margin-top: 24px;
      width: 144px;
      height: 60px;
      font-size: 32px;
      font-weight: 600;
      color: #fff;
      background: $primary-color;
      border-radius: 8px;
      &:active {
        background: $primary-color-lighten;
      }
    }
  }
  .p3 {
    padding-bottom: 32px;
    border-radius: 0 0 8px 8px;
    background: #e9ebf0;

    .txt {
      padding: 24px 36px 24px 48px;
      font-size: 30px;
      color: #333;
    }

    .swiper {
      padding-left: 44px;
      padding-right: 36px;
    }
    .service {
      padding: 26px 18px;
      // width: 526px;
      height: 266px;
      background: #ffffff;
      border-radius: 8px;
      &-title {
        display: flex;
        // align-items: center;
        font-size: 28px;
      }
      &-icon {
        margin-right: 10px;
        width: 36px;
        height: 36px;
      }
      &-type {
        margin-right: 30px;
        font-weight: bold;
        color: $primary-color;
      }
      &-period {
        color: #90a0c0;
      }
      &-model {
        margin-top: 48px;
        font-size: 40px;
        font-weight: 600;
        text-align: center;
      }
      &-code {
        margin-top: 8px;
        font-size: 28px;
        text-align: center;
        color: #999;
      }
    }

    .pagination {
      display: flex;
      justify-content: center;
      margin-top: 32px;

      .dot {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: rgba(26, 48, 89, 0.3);
        &.active {
          background: $primary-color;
        }
        + .dot {
          margin-left: 24px;
        }
      }
    }
  }

  &.is-member {
    .p1,
    .role {
      color: #fff;
      background-color: $primary-color;
    }
    .p1::after {
      background-image: url(@img/pro-lg.png);
      top: 64px;
    }
  }

  .role {
    display: none;
    line-height: 80px;
    text-align: center;
    font-size: 32px;
    font-weight: 600;
    color: #193059;
    background-color: #e9ebf0;

    @include media-breakpoint-up(md) {
      display: block;
    }
  }
  .dropdown-list {
    margin-top: 24px;
  }
  .dropdown-item {
    position: relative;
    display: flex;
    align-items: center;
    padding-left: 144px;
    line-height: 144px;
    font-size: 32px;
    color: #1a1a1a;
    background-color: #fff;
    background-position: 84px center;
    background-repeat: no-repeat;
    background-size: 32px 32px;
    transition: background-color 0.3s ease;
    cursor: pointer;
    @include media-breakpoint-up(md) {
      padding-left: 80px;
      padding-right: 24px;
      background-position: 24px center;
      font-size: 28px;
      line-height: 124px;
    }
    &:hover,
    &:active {
      background-color: #f2f5fb;
    }
    &.i1 {
      background-image: url(@img/m-repair.png);
    }
    &.i2 {
      background-image: url(@img/m-order.png);
    }
    &.i3 {
      background-image: url(@img/m-coupon.png);
    }
    &.i4 {
      background-image: url(@img/m-friend.png);
    }
    &.i5 {
      background-image: url(@img/m-info.png);
    }
    &.i6 {
      background-image: url(@img/m-exit.png);
    }

    a {
      display: block;
      width: 100%;
    }
  }
}
</style>