summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--iridescence/src/components/checkout/CheckoutForm.vue55
-rw-r--r--iridescence/src/views/Checkout.vue13
2 files changed, 66 insertions, 2 deletions
diff --git a/iridescence/src/components/checkout/CheckoutForm.vue b/iridescence/src/components/checkout/CheckoutForm.vue
new file mode 100644
index 0000000..a2ddfad
--- /dev/null
+++ b/iridescence/src/components/checkout/CheckoutForm.vue
@@ -0,0 +1,55 @@
+<template>
+ <div class="container">
+ <section class="section">
+ <h1 class="title">Customer Info</h1>
+ <hr />
+
+ <div class="field is-horizontal">
+ <div class="field-label">
+ <label class="label">Name</label>
+ </div>
+ <div class="field-body">
+ <div class="field">
+ <p class="control is-expanded ">
+ <input class="input" type="text" placeholder="given name" />
+ </p>
+ </div>
+ <div class="field">
+ <p class="control is-expanded">
+ <input class="input" type="text" placeholder="surname" />
+ </p>
+ </div>
+ </div>
+ </div>
+
+ <div class="field is-horizontal">
+ <div class="field-label">
+ <label class="label">E-mail Address</label>
+ </div>
+ <div class="field-body">
+ <div class="field">
+ <p class="control is-expanded">
+ <input class="input" type="email" placeholder="email address" />
+ </p>
+ </div>
+ </div>
+ </div>
+ </section>
+ <section class="section">
+ <h1 class="title">Payment</h1>
+ <hr />
+ </section>
+ <section class="section">
+ <h1 class="title">Delivery</h1>
+ <hr />
+ </section>
+ </div>
+</template>
+
+<script>
+export default {
+ name: "CheckoutForm",
+ computed: {},
+ methods: {}
+};
+</script>
diff --git a/iridescence/src/views/Checkout.vue b/iridescence/src/views/Checkout.vue
index ab28517..3b66fbf 100644
--- a/iridescence/src/views/Checkout.vue
+++ b/iridescence/src/views/Checkout.vue
@@ -1,12 +1,21 @@
<template>
<div id="checkout">
- checkout
+ <ul>
+ <li>get user info (name, address, email, phone)</li>
+ <li>payment option (mailed check, paypal, cash or check on delivery)</li>
+ <li>
+ pickup option (pick up at studio, pick up at simply vintage, ship to
+ address)
+ </li>
+ </ul>
+ <CheckoutForm></CheckoutForm>
</div>
</template>
<script>
+import CheckoutForm from "@/components/checkout/CheckoutForm.vue";
export default {
name: "Checkout",
- components: {}
+ components: { CheckoutForm }
};
</script>