mailing

src/pages/mailing/index.vue

@@ -0,0 +1,107 @@
+<template>
+  <div class="p-mailing bg-gray">
+    <template v-if="action === 'fill'">
+      <h3 class="ptc-title">Fill in the mailing address</h3>
+      <div class="ptc-block">
+        <div class="title">Receive merchandise：Cleaning Kit (1)</div>
+        <div class="ptc-cell">
+          <p class="ptc-label">Name</p>
+          <p class="ptc-value">
+            <input
+              class="ptc-input"
+              placeholder="Please enter your real name"
+            />
+          </p>
+        </div>
+        <div class="ptc-cell">
+          <p class="ptc-label">Phone Number</p>
+          <p class="ptc-value">
+            <input
+              class="ptc-input"
+              placeholder="Please enter your phone number"
+            />
+          </p>
+        </div>
+        <div class="ptc-cell">
+          <p class="ptc-label">Address</p>
+          <p class="ptc-value">
+            <input class="ptc-input mb24" placeholder="Road" />
+            <input class="ptc-input mb24" placeholder="State" />
+            <input class="ptc-input" placeholder="Zip code" />
+          </p>
+        </div>
+      </div>
+      <div class="ptc-wrap mt48">
+        <button class="ptc-button mb36" @click="submit">SUBMIT</button>
+        <button class="ptc-button ptc-button--stroke" @click="$router.back()">
+          BACK
+        </button>
+      </div>
+    </template>
+    <template v-else>
+      <h3 class="ptc-title">Mailing information</h3>
+      <div class="ptc-block">
+        <div class="title">Merchandise：Cleaning Kit (1)</div>
+        <div class="info">
+          <div class="cell">
+            <span class="cell__label">Name:</span>
+            <span class="cell__value">Rebecca</span>
+          </div>
+          <div class="cell">
+            <span class="cell__label">Phone Number:</span>
+            <span class="cell__value">6668888</span>
+          </div>
+          <div class="cell">
+            <span class="cell__label">Address:</span>
+            <span class="cell__value">Rebeccalafeoxxx,xxxxx,xxxxx</span>
+          </div>
+        </div>
+      </div>
+      <div class="ptc-wrap mt48">
+        <button class="ptc-button ptc-button--stroke" @click="$router.back()">
+          BACK
+        </button>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+
+defineProps<{ action: 'fill' | 'view' }>()
+
+const router = useRouter()
+
+function submit() {
+  router.push('/mailing/view')
+}
+</script>
+
+<style lang="scss">
+.p-mailing {
+  .title {
+    margin-bottom: 48px;
+    font-size: 32px;
+    color: #333;
+  }
+  .mb24 {
+    margin-bottom: 24px;
+  }
+  .mb36 {
+    margin-bottom: 36px;
+  }
+  .cell {
+    display: flex;
+    font-size: 32px;
+    line-height: 64px;
+    &__label {
+      margin-right: 8px;
+      color: #999;
+    }
+    &__value {
+      color: #333;
+    }
+  }
+}
+</style>

src/router.ts

@@ -45,5 +45,10 @@ export default createRouter({
       path: '/benefits',
       component: () => import('./pages/benefits/index.vue'),
     },
+    {
+      path: '/mailing/:action',
+      component: () => import('./pages/mailing/index.vue'),
+      props: true,
+    },
   ],
 })