web/apps/mobile/src/components/selector/money-input-group/index.vue

<template>
  <div class="custom-money-tag">
    <van-field
      type="number"
      v-model="inputMap.start"
      :maxlength="maxLength.start"
      :placeholder="placeholder.start"
      :class="{ focus: focus.start && hoverBorderHighlight }"
      @click.stop="onClick('start')"
      @input="onInput('start')"
      @focus="onFocus('start')"
      @blur="onBlur('start')"
    >
      <template #extra>
        <span class="extra-text-tip">{{ extra }}</span>
      </template>
    </van-field>
    <div class="line"></div>
    <van-field
      type="number"
      :maxlength="maxLength.end"
      v-model="inputMap.end"
      :placeholder="placeholder.end"
      :class="{ focus: focus.end && hoverBorderHighlight }"
      @click.stop="onClick('end')"
      @input="onInput('end')"
      @focus="onFocus('end')"
      @blur="onBlur('end')"
    >
      <template #extra>
        <span class="extra-text-tip">{{ extra }}</span>
      </template>
    </van-field>
  </div>
</template>

<script>
import { Field } from 'vant'
export default {
  name: 'customMoney',
  components: {
    [Field.name]: Field
  },
  props: {
    hoverBorderHighlight: {
      type: Boolean,
      default: true
    },
    extra: {
      type: String,
      default: '万'
    },
    placeholder: {
      type: Object,
      default: () => ({
        start: '请输入金额',
        end: '请输入金额'
      })
    },
    maxLength: {
      type: Object,
      default: () => ({
        start: 10,
        end: 10
      })
    }
  },
  data() {
    return {
      focus: {
        start: false,
        end: false
      },
      inputMap: {
        start: '',
        end: ''
      }
    }
  },
  methods: {
    onClick(type) {
      this.$emit('onClick', { type })
    },
    onInput(type) {
      const data = this.getState()
      const payload = {
        ...data,
        type
      }
      this.$emit('onInput', payload)
    },
    onFocus(type) {
      this.focus[type] = true
    },
    onBlur(type) {
      this.focus[type] = false
      this.formatInput()
      this.onBlurEmitter()
    },
    onBlurEmitter() {
      const { start, end } = this.inputMap
      if (String(start).length && String(end).length) {
        this.$emit('onBlur', this.getState())
      }
    },
    formatInput() {
      const { start, end } = this.inputMap
      if (String(start).length && String(end).length) {
        const isEndMax = Number(start) < Number(end)
        if (!isEndMax) {
          this.inputMap.start = end
          this.inputMap.end = start
        }
      }
    },
    getState() {
      return this.inputMap
    },
    setState(data) {
      if (!data || Object.keys(data).length === 0) return
      const { start, end } = data
      this.inputMap.start = start
      this.inputMap.end = end
    }
  }
}
</script>

<style lang="scss" scoped>
.custom-money-tag {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .line {
    width: 12px;
    height: 1px;
    margin: 0 4px;
    background: #acacad;
  }
  .van-cell.van-field {
    flex: 1;
    height: 36px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    align-items: center;
    &.focus {
      border-color: $main;
    }
  }
  .extra-text-tip {
    color: #9b9ca3;
  }
}
</style>