fill-order

src/pages/fill-order/StepOne.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="step-one">
+  <div class="step-1">
     <div class="ptc-block">
       <p class="ptc-label">Choose a version</p>
       <PtcRadioGroup v-model="state.product" style="display: flex">
@@ -57,7 +57,9 @@
       <p>total<strong>$99</strong></p>
       <p class="highlight">($10 discounted)</p>
     </div>
-    <button class="ptc-button block-button">NEXT</button>
+    <div class="ptc-wrap">
+      <button class="ptc-button" @click="$emit('next')">NEXT</button>
+    </div>
   </div>
 </template>
 
@@ -66,6 +68,10 @@ import { ref } from 'vue'
 import { PtcRadioGroup, PtcRadio } from '@/components/radio'
 import { state } from './store'
 
+defineEmits<{
+  (e: 'next'): void
+}>()
+
 const showCoupon = ref(false)
 </script>
 
@@ -157,11 +163,6 @@ const showCoupon = ref(false)
     font-size: 40px;
   }
 }
-.block-button {
-  display: block;
-  margin: auto;
-  width: 678px;
-}
 
 .coupon {
   @include icon('@img/coupon-s.png', 488px, 224px);

src/pages/fill-order/StepThree.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="step-3">
+    <div class="ptc-block mb48">
+      <p class="text">
+        Please enter a valid email address, we will send you the latest status
+        of the order through this contact method。
+      </p>
+      <input class="ptc-input" placeholder="email address" />
+    </div>
+    <div class="ptc-wrap">
+      <button class="ptc-button">$89 NEXT</button>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.text {
+  margin-bottom: 48px;
+  line-height: 44px;
+  font-size: 32px;
+  color: #333;
+}
+</style>

src/pages/fill-order/StepTwo.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="step-2">
+    <div class="ptc-block">
+      <p class="ptc-label">Choose a mobile phone brand</p>
+      <PtcRadioGroup v-model="state.brand" class="device-list">
+        <PtcRadio
+          v-for="brand of brandList"
+          :key="brand.name"
+          class="device-item"
+          :value="brand.name"
+        >
+          <img class="device-img" />
+          <p class="device-name">{{ brand.name }}</p>
+        </PtcRadio>
+      </PtcRadioGroup>
+    </div>
+    <template v-if="state.brand">
+      <div class="ptc-block mb48">
+        <p class="ptc-label">Choose phone model</p>
+        <PtcRadioGroup v-model="state.model" class="device-list">
+          <PtcRadio
+            v-for="model of modelList"
+            :key="model.name"
+            class="device-item"
+            :value="model.name"
+          >
+            <img class="device-img" />
+            <p class="device-name">{{ model.name }}</p>
+          </PtcRadio>
+        </PtcRadioGroup>
+      </div>
+      <div class="ptc-wrap">
+        <button class="ptc-button" @click="$emit('next')">$89 NEXT</button>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PtcRadioGroup, PtcRadio } from '@/components/radio'
+import { state } from './store'
+
+defineEmits<{
+  (e: 'next'): void
+}>()
+
+const brandList = [
+  { name: 'iPhone', img: '' },
+  { name: 'iPad', img: '' },
+  { name: 'Samsung', img: '' },
+  { name: 'Xiaomi', img: '' },
+]
+const modelList = [
+  { name: 'iPhone13 Pro', img: '' },
+  { name: 'iPhone13', img: '' },
+  { name: 'iPhone12', img: '' },
+  { name: 'iPhoneSE', img: '' },
+]
+</script>
+
+<style lang="scss">
+.device {
+  &-list {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  &-item {
+    padding-top: 24px;
+    width: 322px;
+    height: 322px;
+    text-align: center;
+    font-size: 40px;
+    font-weight: bold;
+    &:nth-child(2n + 1) {
+      margin-right: 34px;
+    }
+    &:nth-child(n + 3) {
+      margin-top: 36px;
+    }
+  }
+
+  &-img {
+    margin-bottom: 18px;
+    width: 200px;
+    height: 200px;
+    background: teal;
+  }
+}
+</style>

src/pages/fill-order/index.vue

@@ -1,12 +1,28 @@
 <template>
   <div class="p-fill-order">
     <h3 class="ptc-title">Fill Order</h3>
-    <StepOne />
+    <component :is="Component" @next="next" />
   </div>
 </template>
 
 <script setup lang="ts">
+import { useRoute, useRouter } from 'vue-router'
 import StepOne from './StepOne.vue'
+import StepTwo from './StepTwo.vue'
+import StepThree from './StepThree.vue'
+
+const router = useRouter()
+const step = +((useRoute().query.step || '0') as string)
+const Component = [StepOne, StepTwo, StepThree][step]
+
+function next() {
+  router.push({
+    path: '',
+    query: {
+      step: step + 1,
+    },
+  })
+}
 </script>
 
 <style lang="scss">

src/pages/fill-order/store.ts

@@ -1,13 +1,9 @@
 import { reactive } from 'vue'
 
-interface State {
-  product: string
-  type: number
-  couponCode: string
-}
-
-export const state = reactive<State>({
+export const state = reactive({
   product: '',
   type: -1,
   couponCode: '',
+  brand: '',
+  model: '',
 })

src/style/atom.scss

@@ -13,3 +13,10 @@
 .flex {
   display: flex;
 }
+
+.mb48 {
+  margin-bottom: 48px !important;
+}
+.mt48 {
+  margin-top: 48px !important;
+}

src/style/components.scss

@@ -1,5 +1,6 @@
 .ptc-button {
-  width: 598px;
+  display: block;
+  width: 100%;
   height: 92px;
   background: $primary-color;
   border-radius: 8px;
@@ -17,6 +18,10 @@
   }
 }
 
+.ptc-wrap {
+  padding: 0 36px;
+}
+
 .ptc-text {
   color: $primary-color;
 }