final

yongDataScince · May 13, 2021 · e7b54e4 · e7b54e4
1 parent f507845
commit e7b54e4
Show file tree

Hide file tree

Showing 10 changed files with 222 additions and 37 deletions.
diff --git a/assets/css/_colors.scss b/assets/css/_colors.scss
@@ -2,6 +2,7 @@ $grey-text: #59606D;
 $disable-test: #959DAD;
 $placeholder: linear-gradient(-30deg, #bdbdbd, #f8f8f8, #bdbdbd, #f8f8f8, #bdbdbd);
 $hover-text: #59606D;
+$input-bg: #F8F8F8;
 $count-background: #959DAD;
 $dark-text: #1F1F1F;
 $yellow-text: #F2C94C;
diff --git a/assets/css/main.scss b/assets/css/main.scss
@@ -2,6 +2,57 @@
 @import "colors";
 @import "icons";
 
+/* MIXINS */ 
+@mixin input {
+  width: 100%;
+  height: 50px;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  padding: 14px;
+  background: $input-bg;
+  border-radius: 8px;
+  border: none;
+  margin-bottom: 16px;
+
+  &::placeholder {
+    font-size: 16px;
+    line-height: 21px;
+    color: $disable-test;
+  }
+
+  &:focus {
+    outline: none;
+  }
+}
+
+@mixin button {
+  height: 50px;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 16px;
+  line-height: 21px;
+  color: #fff;
+  background: $dark-text;
+  border-radius: 8px;
+  cursor: pointer;
+  border: none;
+
+  &:focus {
+    outline: none;
+  }
+
+  &:active {
+    background: #000;
+  }
+
+  &:disabled {
+    background: $hover-text;
+  }
+}
+
 /* STYLES */
 * {
   box-sizing: border-box;

diff --git a/components/Cart.vue b/components/Cart.vue
@@ -3,15 +3,15 @@
     <div class="cart--container">
       <div class="cart--container-header">
         <div class="title">Корзина</div>
-        <i class="icon icon-close" @click="toggle"/>
+        <i class="icon icon-close" @click="close"/>
       </div>
 
       <div class="no-products" v-if="count == 0">
         <div class="text">
           Пока что вы ничего не добавили <br>
           в корзину.
         </div>
-        <div class="go-btn" @click="toggle">
+        <div class="go-btn" @click="close">
           Перейти к выбору
         </div>
       </div>
@@ -35,8 +35,28 @@
               </li>
             </ul>
           </div>
+
+          <form @submit.prevent="submit" class="cart__form">
+            <div class="cart__form-title">Оформить заказ</div>
+            <input type="text" placeholder="Ваше имя" v-model="name">
+            <input type="text" placeholder="Телефон" v-model="phone" v-mask="'+7###-###-##-##'">
+            <input type="text" placeholder="Адрес" v-model="addr">
+
+            <button class="submit" :disabled="disable">
+              Отправить
+            </button>
+          </form>
       </div>
 
+      <div class="cart__success" :class="{ done }">
+        <div class="ok">👌🏻</div>
+        <div class="cart__success-title">
+          Заявка успешно отправлена
+        </div>
+        <div class="cart__success-text">
+          Вскоре наш менеджер свяжется с Вами
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -45,25 +65,53 @@
 import { mapState, mapMutations, mapActions } from 'vuex'
 
 export default {
+  data: () => ({
+    name: '',
+    phone: '',
+    addr: ''
+  }),
+
   computed: {
     ...mapState({
       open: state => state.cart.open,
       count: state => state.cart.count,
-      products: state => state.cart.products
-    })
+      products: state => state.cart.products,
+      done: state => state.cart.done
+    }),
+
+    disable () {
+      const conditional = this.name !== '' && this.phone !== '' && this.addr !== '' && this.phone.length === 15 // validation all fields
+      return !conditional
+    }
   },
 
   methods: {
     ...mapMutations({
-      toggle: 'cart/TOGGLE'
+      toggle: 'cart/TOGGLE',
+      close: 'cart/CLOSE'
     }),
-    ...mapActions(['removeProduct'])
+    ...mapActions(['removeProduct', 'clearCart']),
+
+    submit () {
+      this.clearCart()
+      this.name = ''
+      this.phone = ''
+      this.addr = ''
+    }
+  },
+
+  watch: {
+    name (e) {
+      this.name = e.replace(/[0-9]/g, '') // validation name -> can't write numbers
+    }
   }
 }
 </script>
 
 <style lang="scss">
   @import "@/assets/css/colors.scss";
+  @import "@/assets/css/main.scss";
+
   .cart {
     position: fixed;
     z-index: 1000;
@@ -88,6 +136,9 @@ export default {
       animation-delay: .3s;
       transform: translateX(100%);
       overflow-y: scroll;
+      overflow-x: hidden;
+      position: relative;
+
       &::-webkit-scrollbar {
         display: none !important;
       }
@@ -199,6 +250,26 @@ export default {
       }
     }
 
+    &__form {
+      margin-top: 32px;
+      width: 100%;
+
+      &-title {
+        font-size: 18px;
+        line-height: 23px;
+        margin-bottom: 16px;
+        color: $hover-text;
+      }
+
+      .submit {
+        @include button
+      }
+
+      input {
+        @include input
+      }
+    }
+
     &.open {
       opacity: 1;
       visibility: visible;
@@ -208,6 +279,45 @@ export default {
         transform: translateX(0);
       }
     }
+
+    &__success {
+      position: absolute;
+      top: 100px;
+      width: calc(100% - 90px);
+      height: calc(100% - 41px);
+      background: #FFF;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      z-index: 1000;
+      transition: .2s;
+      transform: translateX(103%);
+
+      &.done {
+        transform: translateX(0);
+      }
+
+      &-title {
+        font-weight: bold;
+        font-size: 24px;
+        line-height: 31px;
+        color: #000;
+        margin-bottom: 2px;
+      }
+
+      &-text {
+        font-size: 16px;
+        line-height: 21px;
+        font-size: 16px;
+        line-height: 21px;
+      }
+
+      .ok {
+        font-size: 80px;
+        margin-bottom: 24px;
+      }
+    }
   }
 
   .no-products {
@@ -223,17 +333,7 @@ export default {
     }
 
     .go-btn {
-      height: 50px;
-      width: 100%;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      font-size: 16px;
-      line-height: 21px;
-      color: #fff;
-      background: $dark-text;
-      border-radius: 8px;
-      cursor: pointer;
+      @include button
     }
   }
 </style>
diff --git a/nuxt.config.js b/nuxt.config.js
@@ -19,7 +19,8 @@ export default {
 
   // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
   plugins: [
-    { src: "@/plugins/vClickOutside", ssr: false }
+    { src: "@/plugins/vClickOutside", ssr: false },
+    { src: "@/plugins/vMask", ssr: false }
   ],
 
   // Auto import components: https://go.nuxtjs.dev/config-components
@@ -28,7 +29,6 @@ export default {
   // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
   buildModules: [
     // https://go.nuxtjs.dev/eslint
-    '@nuxtjs/eslint-module'
   ],
 
   // Modules: https://go.nuxtjs.dev/config-modules

diff --git a/package.json b/package.json
@@ -18,7 +18,8 @@
     "nuxt": "^2.15.3",
     "sass": "^1.32.12",
     "sass-loader": "10",
-    "v-click-outside": "^3.1.2"
+    "v-click-outside": "^3.1.2",
+    "v-mask": "^2.2.4"
   },
   "devDependencies": {
     "@nuxtjs/eslint-config": "^6.0.0",

diff --git a/plugins/vClickOutside.js b/plugins/vClickOutside.js
@@ -1,4 +1,6 @@
+/* Plugin for phone mask */
+
 import Vue from "vue"
 import vClickOutside from "v-click-outside"
 
-Vue.use(vClickOutside)
+Vue.use(vClickOutside)
diff --git a/plugins/vMask.js b/plugins/vMask.js
@@ -0,0 +1,6 @@
+/* Plugin for phone mask */
+
+import Vue from 'vue';
+import VueMask from 'v-mask';
+
+Vue.use(VueMask);
diff --git a/store/cart.js b/store/cart.js
@@ -1,10 +1,11 @@
 export const state = () => ({
-  count: 0,
-  products: [],
-  open: false
+  count: 0,     // count of products in cart
+  products: [], // list of products in cart
+  open: false,  // conditional for open cart window
+  done: false   // conditional for submiting
 })
 
-export const actions = {
+export const actions = {  // add product in cart
   addProduct ({ commit }, payload) {
     commit('ADD_PRODUCT', payload)
   }
@@ -22,7 +23,18 @@ export const mutations = {
     state.count = state.products.length
   },
 
-  TOGGLE (state) {
+  TOGGLE (state) { // toggle cart window state
+    state.done = false
     state.open = !state.open
+  },
+
+  CLOSE (state) {
+    state.open = false
+  },
+
+  CLEAR_CART (state) {
+    state.products = []
+    state.count = state.products.length
+    state.done = true
   }
 }