vue-ptc/src/pages/dashboard/index.vue

<template>
  <div v-if="state.userInfo" class="p-dashboard ptc-block">
    <div
      class="user-panel ptc-inner-md"
      :class="{ 'is-member': state.userInfo.orders.length }"
    >
      <div class="info">
        <div class="p1">
          <p class="name">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"
              :class="{ 'one-child': state.userInfo.orders.length === 1 }"
            >
              <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 fls0">
                      {{ item.product_name }}
                    </div>
                    <div class="service-period">
                      {{ item.start_time }} to {{ item.end_time }}
                    </div>
                  </div>
                  <div class="service-model tac">{{ item.phone_info }}</div>
                  <div class="service-code tac">{{ item.phone_imei }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </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 class="ptc-tag">Get a $10 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>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { state, logout } from '@/store'
import Dialog from '@/components/dialog'

const router = useRouter()

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">
.p-dashboard {
  @include media-breakpoint-down(md) {
    padding: 0 !important;
    .user-panel {
      .swiper-wrapper {
        display: flex;
        overflow-x: auto;
        padding-bottom: 34px;
      }
      .swiper-slide {
        flex-shrink: 0;
        width: 526px;
        + .swiper-slide {
          margin-left: 28px;
        }
      }
    }
  }

  @include media-breakpoint-up(lg) {
    margin-top: 64px;
  }
  @include media-breakpoint-up(md) {
    .swiper-wrapper {
      display: flex;
      overflow-x: auto;
      padding-bottom: 34px;
      &.one-child {
        justify-content: center;
      }
    }
    .swiper-slide {
      flex-shrink: 0;
      width: 526px;
      cursor: pointer;
      + .swiper-slide {
        margin-left: 28px;
      }
    }
    .dropdown-list {
      padding-left: 16px;
    }
  }
}
</style>