refrector, swith pairs, place order panel

src/components/KlineTrade/PlaceForm.vue

@@ -1,169 +0,0 @@
-<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>

src/router/index.js

@@ -56,6 +56,7 @@ const router = new VueRouter({
     },
     {
       path: '/wallet/accounts',
+      alias: '/wallet',
       name: 'accounts',
       component: () => import('@/views/WalletAccounts.vue'),
       meta: {
@@ -294,7 +295,7 @@ const router = new VueRouter({
     },
     // 2. OSMOSIS
     {
-      path: '/:chain/osmosis/trade',
+      path: '/:chain/osmosis/trade/:base?/:target?',
       name: 'osmosis-trade',
       component: () => import('@/views/OsmosisTrade.vue'),
       meta: {

src/views/OsmosisTrade.vue

@@ -1,50 +1,136 @@
 <template>
   <div className="container-md">
-    <b-row>
+    <b-row class="match-height">
       <b-col
-        cols="8"
-        class="trade-left"
+        md="8"
+        sm="12"
       >
-        <Ticker />
-        <Kline />
+        <b-card>
+          <div class="d-flex justify-content-begin align-items-center mb-1">
+            <b-button
+              id="popover-button-3"
+              v-ripple.400="'rgba(113, 102, 240, 0.15)'"
+              variant="flat-primary"
+              class="mr-3"
+              @click="show = !show"
+            >
+              {{ base }} / {{ target }}
+            </b-button>
+
+            <b-popover
+              :show.sync="show"
+              target="popover-button-3"
+              placement="bottom"
+              triggers="click"
+              style="width:300px;"
+            >
+              <template #title>
+                Pairs
+              </template>
+              <b-table
+                striped
+                hover
+                :small="true"
+                :items="pairs"
+                class="m-0"
+              >
+
+                <template #cell(pair)="data">
+                  <router-link
+                    :to="`/osmosis/osmosis/trade/${data.item.pair}`"
+                  >
+                    {{ data.item.pair }}
+                  </router-link>
+                </template>
+              </b-table>
+            </b-popover>
+            <div class="mr-3">
+              59300
+            </div>
+            <div class="mr-3">
+              <small>24h Change</small>
+              <div>460 +0.78%</div>
+            </div>
+            <div class="mr-3">
+              <small>24h High</small>
+              <div>59000</div>
+            </div>
+            <div>
+              <small>24h Low</small>
+              <div>58000</div>
+            </div>
+          </div>
+          <Kline />
+        </b-card>
       </b-col>
-      <b-col cols="4">
-        <Place />
+      <b-col
+        md="4"
+        sm="12"
+      >
+        <b-card>
+          <Place />
+        </b-card>
       </b-col>
     </b-row>
   </div>
 </template>
 
 <script>
-import { BRow, BCol } from 'bootstrap-vue'
-import Ticker from '@/components/KlineTrade/Ticker.vue'
-import Place from '@/components/KlineTrade/Place.vue'
-import Kline from '@/components/kline/index.vue'
+import {
+  BRow, BCol, BCard, BButton, BPopover, BTable,
+} from 'bootstrap-vue'
+import Place from './components/KlineTrade/Place.vue'
+import Kline from './components/kline/index.vue'
 
 export default {
   components: {
     BRow,
     BCol,
+    BButton,
+    BPopover,
+    BTable,
     Kline,
-    Ticker,
     Place,
+    BCard,
+  },
+  data() {
+    return {
+      show: false,
+      base: 'ATOM',
+      target: 'OSMO',
+      pairs: [
+        { pair: 'ATOM/OSMO' },
+        { pair: 'IRIS/OSMO' },
+        { pair: 'AKT/OSMO' },
+        { pair: 'ATOM/OSMO' },
+        { pair: 'ATOM/OSMO' },
+      ],
+    }
   },
   created() {
+    const { base, target } = this.$route.params
+    this.init(base, target)
     // 所有方法添加到 $http.osmosis
     this.$http.osmosis.getOHCL4Pairs('cosmos', 'osmosis').then(data => {
       console.log(data)
     })
-    // this.$http.osmosis.getPools().then(res => {
-    //   this.pools = res
-    // })
+  },
+  beforeRouteUpdate(to, from, next) {
+    const { base, target } = to.params
+    this.init(base, target)
+    console.log(base, target)
+    next()
+    // }
+  },
+  methods: {
+    init(base, target) {
+      this.base = base || 'ATOM'
+      this.target = target || 'OSMO'
+    },
   },
 }
 </script>
 
 <style scoped>
-.trade-left {
-  background: #283046;
-  border-radius: 0.428rem;
-  padding: 0.5rem 1.5rem 2rem 1.5rem;
-}
+
 </style>

src/views/WalletAccounts.vue

@@ -215,7 +215,7 @@
       </b-tab>
     </b-tabs>
 
-    <router-link to="./import">
+    <router-link to="/wallet/import">
       <b-card class="addzone">
         <feather-icon icon="PlusIcon" />
         Connect Wallet

src/views/components/KlineTrade/Place.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="ticker-place">
+  <div>
     <b-tabs
       v-model="tabIndex"
       small
@@ -39,10 +39,5 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.ticker-place {
-  background: #283046;
-  border-radius: 0.428rem;
-  padding: 1rem 1.5rem 1.5rem 1.5rem;
-  min-height: 44.5rem;
-}
+
 </style>

src/views/components/KlineTrade/PlaceForm.vue

@@ -0,0 +1,154 @@
+<template>
+  <div>
+    <dl>
+      <dt>Available</dt>
+      <dd class="d-flex justify-content-between mt-1">
+        <feather-icon icon="PlusSquareIcon" /> <span> {{ 0 }} {{ type === 0 ? target: base }} </span>
+      </dd>
+    </dl>
+    <dl>
+      <dt>Price</dt>
+      <dd class="d-flex justify-content-end mt-1">
+        {{ price }} {{ target }}
+      </dd>
+    </dl>
+    <b-form-group>
+      <label for="amount">
+        Amount
+      </label>
+      <b-input-group class="input-group-merge">
+        <b-form-input
+          id="amount"
+          v-model="amount"
+          type="number"
+          placeholder="Amount"
+          @change="changeAmount()"
+        />
+        <b-input-group-append is-text>
+          {{ type === 0 ? target: base }}
+        </b-input-group-append>
+      </b-input-group>
+    </b-form-group>
+    <b-form-group>
+      <label for="total">
+        Total
+      </label>
+      <b-input-group class="input-group-merge">
+        <b-form-input
+          id="total"
+          v-model="total"
+          type="number"
+          placeholder="Total"
+          @change="changeTotal()"
+        />
+        <b-input-group-append is-text>
+          {{ type === 1 ? target: base }}
+        </b-input-group-append>
+      </b-input-group>
+      <b-alert
+        variant="danger"
+        :show="total > available"
+      >
+        <div class="alert-body">
+          Insufficient available amount
+        </div>
+      </b-alert>
+    </b-form-group>
+    <b-form-group>
+      <label>
+        Slippage tolerance
+      </label>
+      <div class="demo-inline-spacing">
+        <b-form-radio
+          v-model="slippage"
+          value="0.01"
+        >
+          1%
+        </b-form-radio>
+        <b-form-radio
+          v-model="slippage"
+          value="0.025"
+        >
+          2.5%
+        </b-form-radio>
+        <b-form-radio
+          v-model="slippage"
+          value="0.05"
+        >
+          5%
+        </b-form-radio>
+      </div>
+    </b-form-group>
+    <b-form-group>
+      <BButton
+        block
+        :variant="type === 0 ? 'success': 'danger'"
+      >
+        {{ type === 0 ? 'Buy' : 'Sell' }}
+      </BButton>
+    </b-form-group>
+    <b-alert
+      class="mt-2"
+      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, BFormGroup, BInputGroup, BInputGroupAppend, BFormRadio,
+} from 'bootstrap-vue'
+import FeatherIcon from '@/@core/components/feather-icon/FeatherIcon.vue'
+
+export default {
+  components: {
+    BAlert,
+    BButton,
+    BFormInput,
+    BFormRadio,
+    BFormGroup,
+    BInputGroup,
+    BInputGroupAppend,
+    FeatherIcon,
+  },
+  props: {
+    type: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      base: 'ATOM',
+      target: 'OSMO',
+      available: 0,
+      amount: 0,
+      total: 0,
+      price: 50000,
+      slippage: 0.05,
+      marks: [0, 0.01, 0.025, 0.05],
+    }
+  },
+  methods: {
+    changeAmount() {
+      this.total = this.amount * this.price
+    },
+    changeTotal() {
+      this.amount = this.total / this.price
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>