bug 修复

src/App.vue

@@ -10,7 +10,6 @@
     :style="$route.path === '/' ? 'min-height: auto; padding-bottom: 0;' : ''"
   >
     <router-view
-      :key="$route.path"
       :class="[
         'main-wrapper',
         { 'main-wrapper-fluid': $route.path === '/invite' },

src/components/nav-bar/index.vue

@@ -164,6 +164,7 @@ 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
@@ -198,6 +199,16 @@ watch(
     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) {

src/pages/benefits/index.vue

@@ -71,6 +71,9 @@ export default defineComponent({
     const { results } = await getOrderInfo(to.params.id)
     next(vm => (vm.info = results))
   },
+  async beforeRouteUpdate(to) {
+    this.info = (await getOrderInfo(to.params.id)).results
+  },
   data() {
     return {
       /** @type {any} */

src/pages/dashboard/index.vue

@@ -21,7 +21,10 @@
             <strong class="primary">Buy now ></strong>
           </div>
           <div class="swiper">
-            <div class="swiper-wrapper">
+            <div
+              class="swiper-wrapper"
+              :class="{ 'one-child': state.userInfo.orders.length === 1 }"
+            >
               <div
                 v-for="(item, index) of state.userInfo.orders"
                 :key="index"
@@ -91,16 +94,35 @@ async function signOut() {
 
 <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;
-      justify-content: center;
       overflow-x: auto;
       padding-bottom: 34px;
+      &.one-child {
+        justify-content: center;
+      }
     }
     .swiper-slide {
       flex-shrink: 0;

src/pages/gift-card/index.vue

@@ -29,8 +29,10 @@
             :key="index"
             class="card"
             :class="{
-              'card-a': item.status == 0,
-              'card-c': item.status == 1,
+              'card-a': item.status == 0 && !item.gift_card_threshold,
+              'card-b': item.status == 0 && item.gift_card_threshold,
+              'card-c': item.status == 1 && !item.gift_card_threshold,
+              'card-d': item.status == 1 && item.gift_card_threshold,
               'card-e': item.status == 2,
             }"
           >
@@ -38,21 +40,14 @@
             <p class="card-period">
               Validity: {{ item.used_at }}-{{ item.expired_at }}
             </p>
-            <p class="card-value">- {{ item.gift_card_amount }}</p>
-            <p class="card-desc">PTC offline store use</p>
-          </div>
-          <!-- <div class="card card-b">
-            <p class="card-title">Pull new reward gift card</p>
-            <p class="card-period">Validity: 2020/12/01-2020/05/01</p>
-            <p class="card-value">- $10 <span class="sub">100 available</span></p>
+            <p class="card-value">
+              - {{ item.gift_card_amount }}
+              <span v-if="item.gift_card_threshold" class="sub"
+                >{{ item.gift_card_threshold }} available</span
+              >
+            </p>
             <p class="card-desc">PTC offline store use</p>
           </div>
-          <div class="card card-d">
-            <p class="card-title">Pull new reward gift card</p>
-            <p class="card-period">Validity: 2020/12/01-2020/05/01</p>
-            <p class="card-value">- $10 <span class="sub">100 available</span></p>
-            <p class="card-desc">PTC offline store use</p>
-          </div> -->
         </div>
       </div>
     </div>
@@ -67,7 +62,11 @@ export default defineComponent({
   async beforeRouteEnter(to, from, next) {
     const { results } = await getGiftCardList(0)
     next(vm => {
-      vm.list = results.items
+      vm.list = results.items.map(item => {
+        const threshold = item.gift_card_threshold
+        item.gift_card_threshold = threshold ? +threshold : 0
+        return item
+      })
       vm.stat = results.stat
     })
   },
@@ -115,6 +114,7 @@ export default defineComponent({
     font-size: 32px;
     font-weight: 500;
     color: #666;
+    cursor: pointer;
     @include media-breakpoint-up(md) {
       margin-left: 140px;
     }

src/pages/my-order/index.vue

@@ -12,7 +12,7 @@
       :class="{ pb24: item.status != 1 }"
     >
       <div
-        class="pointer"
+        :class="{ pointer: item.status == 1 }"
         @click="item.status == 1 && $router.push(`/order/${item.id}`)"
       >
         <div class="cell-group border-bottom">
@@ -81,7 +81,7 @@
       <div v-if="item.status != 1" class="button-group">
         <template v-if="item.status == 0">
           <button class="ptc-button" @click="handlePay(item.stripe_pay_link)">
-            Pay 14:40
+            Pay {{ item.left_pay_time }}
           </button>
           <button
             class="ptc-button ptc-button--stroke"

src/utils/dom.ts

@@ -0,0 +1,6 @@
+export function lockScroll(lock: boolean) {
+  const className = 'lock-scroll'
+  lock
+    ? document.body.classList.add(className)
+    : document.body.classList.remove(className)
+}

vite.config.ts

@@ -20,7 +20,7 @@ export default defineConfig(({ command }) => ({
       },
     },
   },
-  base: '/spa/',
+  base: '/ptc/',
   server: {
     proxy: {
       '/api/': {