iboss_wx_app/components/dkbase/dk-number-input/dk-number-input.js

/*******************************************************************************
 * Copyright(c) 2022 dongke All rights reserved. / Confidential
 * 类的信息：
 *		1.程序名称：数字组件（支持千分位，金额符）
 *		2.功能描述：dk-number-input组件
 * 编辑履历：
 *		作者				日期					版本				修改内容
 *		周兴		  	2022-6-30  			1.00		   	  新建
 *******************************************************************************/
const common = require('../../../utils/common.js')
Component({

  options: {
    addGlobalClass: true,
  },

  properties: {
    titleValue: {
      type: String,
      value: ''
    },
    titleWidth: {
      type: String,
      value: '164rpx'
    },
    titleColor: {
      type: String,
      value: '#1B365D'
    },
    titleFontWeight: {
      type: String,
      value: 'normal'
    },
    inputColor: {
      type: String,
      value: '#1B365D'
    },
    readonly: {
      type: Boolean,
      value: false
    },
    // 内容是否居右，默认是false
    contentRight:{
      type: Boolean,
      value: false
    },
    /**
     * 输入的数据
     */
    inputValue: {
      type: Float32Array,
      value: 0,
    },
    /**
     * 是否支持千分位
     */
    formatThousandth: {
      type: Boolean,
      value: true
    },
    /**
     * 是否可用
     */
    disabled: {
      type: Boolean,
      value: false
    },
    /**
     * 金额符
     */
    sign: {
      type: String,
      value: '¥'
    },
    percent: {
      type: String,
      value: '%'
    },
    percentSignFlag: {
      type: Boolean,
      value: false
    },
    /**
     * 标识的大小
     */
    signSize: {
      type: String,
      value: ''
    },
    /**
     * 是否居中
     */
    center: {
      type: String,
      value: 'center'
    },
    /**
     * 小数位数
     */
    digits: {
      type: Number,
      value: 2
    },
    /**
     * 最大值
     */
    max: {
      type: Number,
      value: 10000000
    },
    /**
     * 字体大小
     */
    fontSize: {
      type: Number,
      value: 13
    },
    /**
     * 字体大小
     */
    fontWeight: {
      type: String,
      value: 'nomal'
    },
    /**
     * 是否是负数处理(输入整数，自动变为负数)
     */
    negative: {
      type: Boolean,
      value: false
    },
    /**
     * 提示信息
     */
    placeholder: {
      type: String,
      value: ''
    },
    maxFlag: {
      type: Boolean,
      value: true
    },
    dataIndex: {
      type: Number,
    },
    dataIndex2: {
      type: Number,
    },
    left: {
      type: String,
      value: '1rpx'
    },
    /**
     * 错误提示信息
     */
    errorMessage: {
      type: String,
    }
  },


  data: {
    focus: false,
    displayValue: '',
    clearFlag: false,
  },

  /**
   * 组件的方法列表
   */
  methods: {
    /**
    * @desc : 光标进入选中
    * @author : 周兴
    * @date : 2022/6/30 16:16
    */
    handleInput(e) {
      if (this.data.readonly) {
        return
      }
      setTimeout(() => {
        this.setData({
          inputValue: parseFloat(this.data.inputValue),
          displayValue: this.data.inputValue,
          focus: true
        })
      }, 30)
    },
    /**
    * @desc : 光标进入输入框
    * @author : 周兴
    * @date : 2022/6/30 16:16
    */
    bindFocus(e){
      if(isNaN(this.data.inputValue)){
        this.setData({
          inputValue:0
        })
      }
    },
    /**
    * @desc : 输入时数据的处理
    * @author : 周兴
    * @date : 2022/6/30 16:16
    */
    bindInput(e) {
      let flag = true;
      let values = e.detail.split('.')
      // 如果输入的是小数点，那么需要判断是否已经有小数点
      if (e.detail.endsWith('.')) {
        // 说明有多个小数点
        // console.log('zzz',values,this.data.inputValue,(this.data.inputValue + '').indexOf('.'));
        if (values && values.length > 2) {
          if ((this.data.inputValue + '').indexOf('.') >= 0) {
            return this.data.inputValue;
          } else {
            // 可能连续输入2个小数点
            return this.data.inputValue + '.';
          }
        }
        // 如果inputValue是空,那么当成0处理
        if (e.detail == '.') {
          return '0.';
        }
        flag = false;
      }
      //控制小数点后数字的输入
      let digits = this.data.digits
      if (values && values.length === 2 && values[1].length > digits) {
        flag = false;
        return this.data.inputValue;
      }

      if (flag) {
        let value = 0;
        // 判断是否超过最大值
        if (this.data.maxFlag) {
          if (e.detail > this.data.max) {
            value = this.data.max
          } else {
            value = e.detail
          }
        } else {
          value = e.detail
        }
        this.setData({
          clearFlag: false,
          inputValue: value,
        })
        this.handleData()
      }
    },
    /**
    * @desc : 光标离开处理数据的显示
    * @author : 周兴
    * @date : 2022/6/30 16:16
    */
    bindBlur() {
      if (this.data.clearFlag) {
        this.setData({
          inputValue: 0,
          displayValue: 0,
          clearFlag: false
        })
      }
      // 处理数据
      if (this.data.inputValue) {
        this.setData({
          inputValue: Number(this.data.inputValue)
        })
      }
      // 离开的时候进行数据处理
      // this.handleDisplayValue();
      this.triggerEvent('triggerBindBlur', {
        inputValue: this.data.inputValue,
        index: this.data.dataIndex,
        index2: this.data.dataIndex2,
      })
      this.setData({
        focus: false
      })
    },

    /**
    * @desc : 绑定值
    * @author : 周兴
    * @date : 2022/6/30 16:16
    */
    handleData() {
      let value = this.data.inputValue;

      if (value == null || value == '') {
        this.setData({
          clearFlag: true
        })
        value = 0
      }
      if (isNaN(value)) {
        value = 0
      }
      // 如果负数标识开启
      if (this.data.negative) {
        if (value > 0) {
          value = -1 * value;
        }
      } else {
        if (value < 0) {
          value = -1 * value;
        }
      }
      this.triggerEvent('triggerBindValue', {
        value: value
      })
    },

    /**
    * @desc : 处理数据的显示
    * @author : 周兴
    * @date : 2022/6/30 16:16
    */
    handleDisplayValue() {
      let inputValue = this.data.inputValue;
      let displayValue = ''
      // if(inputValue != undefined && inputValue != 0){
      //添加判断条件,当用户输入空数据问题会出现NaN  于继渤2022/06/30 
      if (inputValue != undefined && inputValue && inputValue != 0) {
        // 判断是否有千分位
        if (this.data.formatThousandth) {
          displayValue = common.toThousandCents(inputValue);
        }
        // 如果是负数显示
        if (this.data.negative && displayValue.indexOf("-") < 0) {
          // displayValue = this.data.sign + "-" + displayValue;
          displayValue = "-" + displayValue;
        } else {
          // 显示金额符号
          // displayValue = this.data.sign + displayValue;
        }
      } else {
        displayValue = inputValue;
      }
      this.setData({
        displayValue: displayValue
      })
    },
  },
  /**
    * 组件生命周期
    */
  lifetimes: {
    attached: function () {
      //处理数据的显示
      this.handleDisplayValue();
    },
    detached: function () {
      // 在组件实例被从页面节点树移除时执行
    },
  },
})