2 лет назад · 612e0c29fc
--- a/index.html
+++ b/index.html
@@ -6,7 +6,7 @@
 
				     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
			
 
				     <title>Vite App</title>
			
 
				   </head>
			
 
				-  <body>
			
 
				+  <body ontouchstart="">
			
 
				     <div id="app"></div>
			
 
				     <script type="module" src="/src/main.ts"></script>
			
 
				   </body>
			
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
 
				   "name": "ptc",
			
 
				   "version": "0.0.0",
			
 
				   "scripts": {
			
 
				-    "dev": "vite",
			
 
				+    "dev": "vite --host",
			
 
				     "build": "vue-tsc --noEmit && vite build",
			
 
				     "preview": "vite preview"
			
 
				   },
			
--- a/src/assets/a-apple.png
+++ b/src/assets/a-apple.png
--- a/src/assets/a-facebook.png
+++ b/src/assets/a-facebook.png
--- a/src/assets/a-google.png
+++ b/src/assets/a-google.png
--- a/src/components/nav-bar/index.vue
+++ b/src/components/nav-bar/index.vue
@@ -13,7 +13,9 @@
 
				         </div>
			
 
				         <div class="body">
			
 
				           <ul class="menu">
			
 
				-            <li class="menu-item">REPAIR BOOKING</li>
			
 
				+            <li class="menu-item" @click="$router.push('/appointment')">
			
 
				+              REPAIR BOOKING
			
 
				+            </li>
			
 
				             <li class="menu-item">ONLINE SHOP</li>
			
 
				             <li class="menu-item">PTC Care Plus</li>
			
 
				             <li class="menu-item">SOTRE LOCATION</li>
			
@@ -84,7 +86,8 @@
 
				 </template>
			
 
				 
			
 
				 <script setup lang="ts">
			
 
				-import { ref } from 'vue'
			
 
				+import { ref, watch } from 'vue'
			
 
				+import { useRoute } from 'vue-router'
			
 
				 
			
 
				 interface Props {
			
 
				   showNavIcons?: boolean
			
@@ -93,8 +96,16 @@ interface Props {
 
				 
			
 
				 defineProps<Props>()
			
 
				 
			
 
				+const route = useRoute()
			
 
				 const showMenu = ref(false)
			
 
				 const showMine = ref(false)
			
 
				+
			
 
				+watch(
			
 
				+  () => route.fullPath,
			
 
				+  () => {
			
 
				+    showMenu.value = showMine.value = false
			
 
				+  }
			
 
				+)
			
 
				 </script>
			
 
				 
			
 
				 <style lang="scss">
			
@@ -189,8 +200,10 @@ const showMine = ref(false)
 
				 
			
 
				     &-item {
			
 
				       padding-left: 196px;
			
 
				+      background-color: $primary-color;
			
 
				+      transition: background-color 0.3s ease;
			
 
				       &:active {
			
 
				-        background: $primary-color-lighten;
			
 
				+        background-color: $primary-color-lighten;
			
 
				       }
			
 
				     }
			
 
				   }
			
--- a/src/components/radio/Radio.vue
+++ b/src/components/radio/Radio.vue
@@ -40,8 +40,8 @@ function onClick() {
 
				     &::after {
			
 
				       content: '';
			
 
				       position: absolute;
			
 
				-      right: 0;
			
 
				-      bottom: 0;
			
 
				+      right: -1px;
			
 
				+      bottom: -1px;
			
 
				       @include icon('@img/check.png', 68px, 72px);
			
 
				     }
			
 
				   }
			
--- a/src/pages/account/index.vue
+++ b/src/pages/account/index.vue
@@ -24,7 +24,10 @@
 
				       <div class="ptc-cell">
			
 
				         <p class="ptc-label">Account</p>
			
 
				         <p class="ptc-value flex-ac">
			
 
				-          Rebecca123@gmail.com<i class="account-icon"></i>
			
 
				+          Rebecca123@gmail.com<i
			
 
				+            class="account-icon"
			
 
				+            :class="1 ? 'a-google' : 2 ? 'a-apple' : 'a-facebook'"
			
 
				+          ></i>
			
 
				         </p>
			
 
				       </div>
			
 
				     </div>
			
@@ -79,7 +82,15 @@
 
				     width: 56px;
			
 
				     height: 56px;
			
 
				     background-size: contain;
			
 
				-    background: #eee;
			
 
				+  }
			
 
				+  .a-google {
			
 
				+    background-image: url(@img/a-google.png);
			
 
				+  }
			
 
				+  .a-apple {
			
 
				+    background-image: url(@img/a-apple.png);
			
 
				+  }
			
 
				+  .a-facebook {
			
 
				+    background-image: url(@img/a-facebook.png);
			
 
				   }
			
 
				 }
			
 
				 </style>
			
--- a/src/pages/appointment/StepFive.vue
+++ b/src/pages/appointment/StepFive.vue
@@ -38,18 +38,15 @@
 
				     </div>
			
 
				   </div>
			
 
				   <div class="ptc-wrap mt48">
			
 
				-    <button class="ptc-button mb36" @click="$emit('next')">
			
 
				+    <button class="ptc-button mb36" @click="state.step++">
			
 
				       Confirm appointment
			
 
				     </button>
			
 
				-    <button class="ptc-button ptc-button--stroke" @click="$emit('reselect')">
			
 
				+    <button class="ptc-button ptc-button--stroke" @click="state.step = 0">
			
 
				       Reselect
			
 
				     </button>
			
 
				   </div>
			
 
				 </template>
			
 
				 
			
 
				 <script setup lang="ts">
			
 
				-defineEmits<{
			
 
				-  (e: 'next'): void
			
 
				-  (e: 'reselect'): void
			
 
				-}>()
			
 
				+import { state } from './store'
			
 
				 </script>
			
--- a/src/pages/appointment/StepFour.vue
+++ b/src/pages/appointment/StepFour.vue
@@ -5,12 +5,10 @@
 
				     <textarea placeholder="Please enter, up to 1000 characters"></textarea>
			
 
				   </div>
			
 
				   <div class="ptc-wrap mt48">
			
 
				-    <button class="ptc-button" @click="$emit('next')">CONTINUE</button>
			
 
				+    <button class="ptc-button" @click="state.step++">CONTINUE</button>
			
 
				   </div>
			
 
				 </template>
			
 
				 
			
 
				 <script setup lang="ts">
			
 
				-defineEmits<{
			
 
				-  (e: 'next'): void
			
 
				-}>()
			
 
				+import { state } from './store'
			
 
				 </script>
			
--- a/src/pages/appointment/StepOne.vue
+++ b/src/pages/appointment/StepOne.vue
@@ -1,15 +1,15 @@
 
				 <template>
			
 
				   <h3 class="ptc-title">Choose a store</h3>
			
 
				   <div class="ptc-block">
			
 
				-    <div class="search-wrap">
			
 
				+    <form class="search-wrap" action="">
			
 
				       <input
			
 
				-        type="text"
			
 
				+        type="search"
			
 
				         class="search-input ptc-input"
			
 
				         placeholder="Search by zip code"
			
 
				         @input="autocomplete"
			
 
				       />
			
 
				       <div role="button" class="search-btn ptc-button"></div>
			
 
				-    </div>
			
 
				+    </form>
			
 
				     <div v-if="showSuggestions" class="search-suggestions">
			
 
				       <div class="suggestion">PTC Browns Plains Kiosk</div>
			
 
				       <div class="suggestion">PTC Browns Plains Kiosk</div>
			
@@ -17,7 +17,7 @@
 
				     <template v-else>
			
 
				       <div class="tip">Nearby shops</div>
			
 
				       <ul class="shop-list">
			
 
				-        <li class="shop-item border-bottom" @click="$emit('next')">
			
 
				+        <li class="shop-item border-bottom" @click="state.step++">
			
 
				           <div class="shop-name">
			
 
				             <span>PTC Browns Plains Kiosk</span>
			
 
				             <span>3.5KM</span>
			
@@ -50,10 +50,7 @@
 
				 
			
 
				 <script setup lang="ts">
			
 
				 import { ref } from 'vue'
			
 
				-
			
 
				-defineEmits<{
			
 
				-  (e: 'next'): void
			
 
				-}>()
			
 
				+import { state } from './store'
			
 
				 
			
 
				 const showSuggestions = ref(false)
			
 
				 
			
--- a/src/pages/appointment/StepSix.vue
+++ b/src/pages/appointment/StepSix.vue
@@ -48,8 +48,14 @@
 
				       </div>
			
 
				     </div>
			
 
				     <div class="mt48">
			
 
				-      <button class="ptc-button mb36">Reselect time</button>
			
 
				+      <button class="ptc-button mb36" @click="state.step = 1">
			
 
				+        Reselect time
			
 
				+      </button>
			
 
				       <button class="ptc-button ptc-button--stroke">Cancel appointment</button>
			
 
				     </div>
			
 
				   </div>
			
 
				 </template>
			
 
				+
			
 
				+<script setup lang="ts">
			
 
				+import { state } from './store'
			
 
				+</script>
			
--- a/src/pages/appointment/StepThree.vue
+++ b/src/pages/appointment/StepThree.vue
@@ -9,12 +9,10 @@
 
				     <input type="text" class="ptc-input" placeholder="Please enter" />
			
 
				   </div>
			
 
				   <div class="ptc-wrap mt48">
			
 
				-    <button class="ptc-button" @click="$emit('next')">CONTINUE</button>
			
 
				+    <button class="ptc-button" @click="state.step++">CONTINUE</button>
			
 
				   </div>
			
 
				 </template>
			
 
				 
			
 
				 <script setup lang="ts">
			
 
				-defineEmits<{
			
 
				-  (e: 'next'): void
			
 
				-}>()
			
 
				+import { state } from './store'
			
 
				 </script>
			
--- a/src/pages/appointment/StepTwo.vue
+++ b/src/pages/appointment/StepTwo.vue
@@ -35,15 +35,11 @@
 
				     </div>
			
 
				   </div>
			
 
				   <div class="ptc-wrap mt48">
			
 
				-    <button class="ptc-button" @click="$emit('next')">CONTINUE</button>
			
 
				+    <button class="ptc-button" @click="state.step++">CONTINUE</button>
			
 
				   </div>
			
 
				 </template>
			
 
				 
			
 
				 <script setup lang="ts">
			
 
				 import { PtcRadioGroup, PtcRadio } from '@/components/radio'
			
 
				 import { state } from './store'
			
 
				-
			
 
				-defineEmits<{
			
 
				-  (e: 'next'): void
			
 
				-}>()
			
 
				 </script>
			
--- a/src/pages/appointment/index.scss
+++ b/src/pages/appointment/index.scss
@@ -174,9 +174,7 @@
 
				   }
			
 
				   .icon-calendar {
			
 
				     margin-right: 8px;
			
 
				-    width: 32px;
			
 
				-    height: 32px;
			
 
				-    background: #eee;
			
 
				+    @include icon('@img/calendar.png', 32px);
			
 
				   }
			
 
				   .action {
			
 
				     margin: 50px 0 48px;
			
--- a/src/pages/appointment/index.vue
+++ b/src/pages/appointment/index.vue
@@ -1,32 +1,33 @@
 
				 <template>
			
 
				-  <div class="p-appointment" :class="{ 'bg-gray': step < 5 }">
			
 
				-    <component :is="Component" @next="next" />
			
 
				+  <div class="p-appointment" :class="{ 'bg-gray': state.step < 5 }">
			
 
				+    <component :is="Component" />
			
 
				   </div>
			
 
				 </template>
			
 
				 
			
 
				 <script setup lang="ts">
			
 
				-import { useRoute, useRouter } from 'vue-router'
			
 
				+import { computed } from 'vue'
			
 
				+import { onBeforeRouteLeave, useRouter } from 'vue-router'
			
 
				 import StepOne from './StepOne.vue'
			
 
				 import StepTwo from './StepTwo.vue'
			
 
				 import StepThree from './StepThree.vue'
			
 
				 import StepFour from './StepFour.vue'
			
 
				 import StepFive from './StepFive.vue'
			
 
				 import StepSix from './StepSix.vue'
			
 
				+import { state } from './store'
			
 
				+;(window as any).router = useRouter()
			
 
				 
			
 
				-const router = useRouter()
			
 
				-const step = +((useRoute().query.step || '0') as string)
			
 
				-const Component = [StepOne, StepTwo, StepThree, StepFour, StepFive, StepSix][
			
 
				-  step
			
 
				-]
			
 
				+const Component = computed(
			
 
				+  () => [StepOne, StepTwo, StepThree, StepFour, StepFive, StepSix][state.step]
			
 
				+)
			
 
				 
			
 
				-function next() {
			
 
				-  router.push({
			
 
				-    path: '',
			
 
				-    query: {
			
 
				-      step: step + 1,
			
 
				-    },
			
 
				-  })
			
 
				-}
			
 
				+onBeforeRouteLeave((to, from) => {
			
 
				+  console.log(to)
			
 
				+  if (state.step > 0) {
			
 
				+    console.log(111)
			
 
				+    state.step--
			
 
				+    return false
			
 
				+  }
			
 
				+})
			
 
				 </script>
			
 
				 
			
 
				 <style lang="scss" src="./index.scss"></style>
			
--- a/src/pages/appointment/store.ts
+++ b/src/pages/appointment/store.ts
@@ -1,6 +1,7 @@
 
				 import { reactive } from 'vue'
			
 
				 
			
 
				 export const state = reactive({
			
 
				+  step: 0,
			
 
				   date: '',
			
 
				   period: '',
			
 
				 })
			
--- a/src/pages/login/index.vue
+++ b/src/pages/login/index.vue
@@ -28,9 +28,9 @@
 
				       <div class="alternative">
			
 
				         <div class="delimiter">Or sign in with</div>
			
 
				         <ul class="list">
			
 
				-          <li class="item"></li>
			
 
				-          <li class="item"></li>
			
 
				-          <li class="item"></li>
			
 
				+          <li class="item" name="google"></li>
			
 
				+          <li class="item" name="facebook"></li>
			
 
				+          <li class="item" name="apple"></li>
			
 
				         </ul>
			
 
				       </div>
			
 
				       <div class="policy">
			
--- a/src/pages/password/index.vue
+++ b/src/pages/password/index.vue
@@ -51,7 +51,9 @@
 
				     <div v-else-if="step === 3" class="step">
			
 
				       <i class="icon-success"></i>
			
 
				       <h3 class="title tac">Password reset successfully</h3>
			
 
				-      <button class="ptc-button mgt96">TO LOG IN</button>
			
 
				+      <button class="ptc-button mgt96" @click="$router.push('/login')">
			
 
				+        TO LOG IN
			
 
				+      </button>
			
 
				     </div>
			
 
				   </div>
			
 
				 </template>
			
@@ -97,9 +99,7 @@ function next() {
 
				   .icon-success {
			
 
				     display: block;
			
 
				     margin: 0 auto 32px;
			
 
				-    width: 96px;
			
 
				-    height: 96px;
			
 
				-    background: teal;
			
 
				+    @include icon('@img/success.png', 96px);
			
 
				   }
			
 
				 
			
 
				   .mgt96 {
			
--- a/src/style/login.scss
+++ b/src/style/login.scss
@@ -6,9 +6,7 @@
 
				   .logo {
			
 
				     display: block;
			
 
				     margin: 120px auto 60px;
			
 
				-    width: 300px;
			
 
				-    height: 100px;
			
 
				-    background: #efefef;
			
 
				+    @include icon('@img/logo2.png', 236px, 110px);
			
 
				   }
			
 
				 
			
 
				   .container {
			
@@ -70,7 +68,16 @@
 
				   .item {
			
 
				     width: 80px;
			
 
				     height: 80px;
			
 
				-    background: #efefef;
			
 
				+    background-size: 100% 100%;
			
 
				+    &:nth-child(1) {
			
 
				+      background-image: url(@img/google.png);
			
 
				+    }
			
 
				+    &:nth-child(2) {
			
 
				+      background-image: url(@img/facebook.png);
			
 
				+    }
			
 
				+    &:nth-child(3) {
			
 
				+      background-image: url(@img/apple.png);
			
 
				+    }
			
 
				     + .item {
			
 
				       margin-left: 60px;
			
 
				     }
			
--- a/src/style/normalize.scss
+++ b/src/style/normalize.scss
@@ -10,6 +10,8 @@ html {
 
				   font-family: Avenir, Helvetica, Arial, sans-serif;
			
 
				   -webkit-font-smoothing: antialiased;
			
 
				   -moz-osx-font-smoothing: grayscale;
			
 
				+  user-select: none;
			
 
				+  -webkit-user-select: none;
			
 
				 }
			
 
				 
			
 
				 body,
			
@@ -69,6 +71,10 @@ textarea {
 
				 textarea {
			
 
				   resize: none;
			
 
				 }
			
 
				+input,
			
 
				+textarea {
			
 
				+  -webkit-appearance: none;
			
 
				+}
			
 
				 
			
 
				 input::-webkit-outer-spin-button,
			
 
				 input::-webkit-inner-spin-button {