123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165 |
- <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{{
- state.userInfo.num_order_expired > 0
- ? `, $${state.rebuyDiscount} off for additional services`
- : ''
- }}
- </p>
- <button class="btn" @click="$router.push('/fill-order')">BUY</button>
- </div>
- <div v-else class="p3">
- <div class="txt">
- ${{ state.rebuyDiscount }} off for additional services |
- <strong class="primary pointer" @click="$router.push('/fill-order')"
- >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 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">
- <router-link
- v-if="!item.phone_imei"
- class="primary bold"
- :to="`/imei/bind?id=${item.id}`"
- @click.stop
- >BIND IMEI ></router-link
- >
- <template v-else>{{ item.phone_imei }}</template>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <ul class="dropdown-list">
- <template v-if="state.userInfo.num_order > 0">
- <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 ${{
- state.coupon.coupon_amount * state.coupon.coupon_num
- }}
- 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>
|