From 662e129cdf40dfebcfc0ab8c7a57cc17c6a4f08b Mon Sep 17 00:00:00 2001
From: ding <vimdingyiming@qq.com>
Date: Sun, 21 Nov 2021 17:42:04 +0800
Subject: [PATCH] feat: place form

---
 src/components/KlineTrade/Place.vue     | 133 +++----------------
 src/components/KlineTrade/PlaceForm.vue | 169 ++++++++++++++++++++++++
 2 files changed, 191 insertions(+), 111 deletions(-)
 create mode 100644 src/components/KlineTrade/PlaceForm.vue

diff --git a/src/components/KlineTrade/Place.vue b/src/components/KlineTrade/Place.vue
index b52b4928..2beb943a 100644
--- a/src/components/KlineTrade/Place.vue
+++ b/src/components/KlineTrade/Place.vue
@@ -1,63 +1,40 @@
 <template>
   <div class="ticker-place">
-    <b-tabs small class="nav-fill">
-      <b-tab title="BUY">
-        BUY
-      </b-tab>
-      <b-tab title="SELL">
-        SELL
-      </b-tab>
+    <b-tabs
+      v-model="tabIndex"
+      small
+      class="nav-fill"
+      pills
+      :nav-class="tabIndex === 0 ? 'nav-pill-success' : 'nav-pill-danger'"
+    >
+      <b-tab
+        title="BUY"
+        no-body
+      />
+      <b-tab
+        title="SELL"
+        no-body
+      />
     </b-tabs>
-    <div class="place-able">
-      <div>Available:</div>
-      <div>-- USDT</div>
-    </div>
-    <div class="place-input">
-      <div class="place-input-title">
-        Price
-      </div>
-      <b-form-input type="text" />
-      <div class="place-input-unit">
-        USDT
-      </div>
-    </div>
-    <div class="place-input">
-      <div class="place-input-title">
-        Amount
-      </div>
-      <b-form-input type="text" />
-      <div class="place-input-unit">
-        BTC
-      </div>
-    </div>
-    <div>
-      Slippage tolerance
-    </div>
-    <div class="place-percent">
-      <div>1%</div>
-      <div>3%</div>
-      <div>5%</div>
-    </div>
-    <div class="place-btn">
-      <BButton variant="success">
-        BUY
-      </BButton>
-    </div>
+    <PlaceForm :type="tabIndex" />
   </div>
 </template>
 
 <script>
 import {
-  BFormInput, BButton, BTabs, BTab,
+  BTabs, BTab,
 } from 'bootstrap-vue'
+import PlaceForm from './PlaceForm.vue'
 
 export default {
   components: {
-    BButton,
-    BFormInput,
     BTab,
     BTabs,
+    PlaceForm,
   },
+  data: () => ({
+    tabIndex: 0,
+  }),
 }
 </script>
 
@@ -68,70 +45,4 @@ export default {
   padding: 1rem 1.5rem 1.5rem 1.5rem;
   min-height: 44.5rem;
 }
-.place-percent {
-  display: flex;
-  margin-bottom: 2rem;
-  margin-top: 1rem;
-  div {
-    flex: 1;
-    text-align: center;
-    border: 1px solid #404656;
-    margin-right: 5px;
-    border-radius: 2px;
-    cursor: pointer;
-    &:last-child {
-      margin-right: 0;
-    }
-  }
-}
-.place-btn {
-  margin-bottom: 1rem;
-  button {
-    width: 100%;
-  }
-}
-.place-market {
-  display: flex;
-  height: 3rem;
-  align-items: center;
-  div {
-    margin-right: 2rem;
-    font-weight: bold;
-    color: #999;
-  }
-  div:first-of-type {
-    color: #fff;
-  }
-}
-.place-able {
-  display: flex;
-  height: 3rem;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 1rem;
-}
-.place-input {
-  display: flex;
-  align-items: center;
-  margin-bottom: 2rem;
-  border: 1px solid #404656;
-  border-radius: 0.3rem;
-  padding: 0 1rem;
-
-  &:focus-within {
-    border-color: #fff;
-  }
-  .place-input-title {
-    width: 7rem;
-  }
-  .place-input-unit {
-    width: 5rem;
-    text-align: right;
-  }
-  .form-control {
-    border-color: #2A3044 !important;
-    font-size: 20px;
-    font-weight: bold;
-  }
-}
 </style>
diff --git a/src/components/KlineTrade/PlaceForm.vue b/src/components/KlineTrade/PlaceForm.vue
new file mode 100644
index 00000000..2981a9c9
--- /dev/null
+++ b/src/components/KlineTrade/PlaceForm.vue
@@ -0,0 +1,169 @@
+<template>
+  <div>
+    <div class="place-able">
+      <div>Available:</div>
+      <div>-- USDT</div>
+    </div>
+    <div class="place-price">
+      <div class="place-input-title">
+        Price
+      </div>
+      <div class="place-price-value">
+        59000
+      </div>
+      <div class="place-input-unit">
+        USDT
+      </div>
+    </div>
+    <div class="place-input">
+      <div class="place-input-title">
+        Amount
+      </div>
+      <b-form-input type="text" />
+      <div class="place-input-unit">
+        BTC
+      </div>
+    </div>
+    <div class="place-input">
+      <div class="place-input-title">
+        Value
+      </div>
+      <b-form-input type="text" />
+      <div class="place-input-unit">
+        USDT
+      </div>
+    </div>
+    <div class="place-value-money">
+      ≈ 213123 CNY
+    </div>
+    <div>
+      Slippage tolerance
+    </div>
+    <div class="place-percent">
+      <div>1%</div>
+      <div>3%</div>
+      <div>5%</div>
+    </div>
+    <div class="place-btn">
+      <BButton :variant="type === 0 ? 'success': 'danger'">
+        {{ type === 0 ? 'Buy' : 'Sell' }}
+      </BButton>
+    </div>
+    <b-alert
+      style="margin-top: 2rem"
+      variant="secondary"
+      show
+    >
+      <div class="alert-heading">
+        Note
+      </div>
+      <div class="alert-body">
+        If the execution price exceeds the 5% slippage protection, your order will be automatically cancelled
+      </div>
+    </b-alert>
+
+  </div>
+</template>
+
+<script>
+import {
+  BFormInput, BButton, BAlert,
+} from 'bootstrap-vue'
+
+export default {
+  components: {
+    BAlert,
+    BButton,
+    BFormInput,
+  },
+  props: {
+    type: {
+      type: String,
+      required: true,
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.place-percent {
+  display: flex;
+  margin-bottom: 2rem;
+  margin-top: 1rem;
+  div {
+    flex: 1;
+    text-align: center;
+    border: 1px solid #404656;
+    margin-right: 5px;
+    border-radius: 2px;
+    cursor: pointer;
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}
+.place-btn {
+  margin-bottom: 1rem;
+  button {
+    width: 100%;
+  }
+}
+.place-market {
+  display: flex;
+  height: 3rem;
+  align-items: center;
+  div {
+    margin-right: 2rem;
+    font-weight: bold;
+    color: #999;
+  }
+  div:first-of-type {
+    color: #fff;
+  }
+}
+.place-able {
+  display: flex;
+  height: 3rem;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 1rem;
+}
+.place-input {
+  display: flex;
+  align-items: center;
+  margin-bottom: 1rem;
+  border: 1px solid #404656;
+  border-radius: 0.3rem;
+  padding: 0 1rem;
+
+  &:focus-within {
+    border-color: #fff;
+  }
+  .place-input-title {
+    width: 7rem;
+  }
+  .place-input-unit {
+    width: 5rem;
+    text-align: right;
+  }
+  .form-control {
+    border-color: #2A3044 !important;
+    font-size: 20px;
+    font-weight: bold;
+    text-align: center;
+  }
+}
+.place-price {
+  display: flex;
+  align-items: center;
+  margin-bottom: 1rem;
+  .place-price-value {
+    font-size: 20px;
+    flex: 1;
+    text-align: center;
+  }
+}
+.place-value-money {
+  text-align: right;
+}
+</style>