bemarket/src/components/market/PricePickerModal.vue

<template>
  <div class="chain-price-modal" v-if="modalShow">
    <div class="modal-bg" @click="cancelSelect"></div>
    <div class="modal-content">
      <div class="modal-title">
        Please input or drag amount to deposit
      </div>
      <div class="modal-body">
        <el-slider
          v-model="value"
          :min="min"
          :max="max"
          show-input>
        </el-slider>
      </div>
      <div class="modal-footer">
        <button class="general-btn btn cancel-btn" @click="cancelSelect">Cancel</button>
        <button class="general-btn btn confirm-btn"  @click="confirmSelect">Confirm</button>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { EventBus } from '@/utils/event-bus'

export const ON_AMOUNT_SELECT = 'on-amount-select'
export const ON_AMOUNT_CANCEL = 'on-amount-cancel'
export const SHOW_AMOUNT_MODAL = 'show_amount_modal'
@Component({
  name: 'PricePickerModal',
  components: {
  }
})
export default class PricePickerModal extends Vue {
  value = 0
  min = 1
  max = 100
  title = 'Please input or drag amount to deposit'

  modalShow = false
  confirmFun: (id: number) => void
  cancelFun: (reason: any) => void

  mounted() {
    EventBus.$on(SHOW_AMOUNT_MODAL, this.showModal.bind(this))
  }

  unmounted() {
    EventBus.$off(SHOW_AMOUNT_MODAL, this.showModal.bind(this))
  }

  showModal({ max, min, current, title, confirmFun, cancelFun }:
              {
                max: number
                min: number
                current: number
                title: string
                confirmFun: (val: number)=>void
                cancelFun?: (val: number)=>void
              }) {
    this.value = current | 0
    this.min = min | 0
    this.max = max | 0
    this.title = title
    this.confirmFun = confirmFun
    this.cancelFun = cancelFun || this.cancelFun
    this.modalShow = true
  }

  cancelSelect() {
    this.$emit(ON_AMOUNT_CANCEL, this.value)
    this.cancelFun && this.cancelFun(this.value)
    this.hideModal()
  }

  confirmSelect() {
    this.$emit(ON_AMOUNT_SELECT, this.value)
    this.confirmFun && this.confirmFun(this.value)
    this.hideModal()
  }

  hideModal() {
    this.modalShow = false
    this.confirmFun = (id: number) => { console.log(id) }
    this.cancelFun = (reason: any) => { console.log(reason) }
  }
}
</script>
<style lang="scss" scoped>
.chain-price-modal{
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  margin: 0;
  box-sizing: border-box;
  .modal-bg{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: auto;
    margin: 0;
    background-color: #000000a3;
  }
  .modal-content{
    width: 500px;
    background-color: #291a61;
    max-height: 400px;
    position: relative;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 15vh auto 0;
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    .modal-title{
      color: white;
      padding: 15px 20px;
      border-bottom: 1px solid rgba(195, 195, 195, 0.14);
    }
    .modal-body {
      padding: 46px 20px 20px;;
    }
    .modal-footer {
      width: 100%;
      text-align: right;
      padding: 10px 20px 20px;
      box-sizing: border-box;
      display: flex;
      gap: 20px;
      justify-content: flex-end;
      .btn {
        padding: 0 30px;
        height: 45px;
        &.cancel-btn{
          background-color: gray;
        }
        &.confirm-btn {
          background-color: #009c4a;
        }
      }
    }
  }
}
</style>

<style lang="scss">
.el-slider {
  height: 62px;
  .el-slider__runway{
    background-color: #161C48;
    .el-slider__bar{
      background-color: #46E0F4;
    }
    .el-slider__stop{
      background-color: #46E0F4;
    }
    .el-slider__button-wrapper{
      .el-slider__button{
        background-color: #46E0F4;
        border: none;
      }
    }
  }
  .el-slider__input {
    .el-input .el-input__inner{
      border: 0.0625em solid #51529D;
    }
  }
}
</style>