feat: 金额选择组件完善

src/web/staticres/common-module/collection/js/money-mobile.js

@@ -1,7 +1,7 @@
 var tempMoneyStyleComponent = `<style>
 .money-component-group {
   padding: 0 .32rem;
-  min-height: 4rem;
+  min-height: 5rem;
 }
 
 .money-component-group .van-field__control {
@@ -12,7 +12,8 @@ var tempMoneyStyleComponent = `<style>
 
 .money-component-group .select-tag-group {
   display: flex;
-  padding: .32rem 0;
+  padding-top: 0.36rem;
+  padding-bottom: 0.12rem;
   flex-wrap: wrap;
 }
 
@@ -97,15 +98,15 @@ var tempMoneyStyleComponent = `<style>
 var moneyComponentTemplate = `<div class="j-container">
 <div class="money-component-group j-main">
     <div class="select-tag-group">
-        <div class="select-tag-item" :class="{active:item.selected==true}" v-for="(item, index) in timeSelectList" :key="index" @click="selectFixedDate(item)">{{item.name}}</div>
+        <div class="select-tag-item" :class="{active:item.selected==true}" v-for="(item, index) in selectTags" :key="index" @click="selectFixedTag(item)">{{item.name}}</div>
     </div>
-    <div class="select-picker-group" @click="dateShowEvent" :class="{'click-active':dateStyle==true}">
-      <van-field type="digit" v-model="dateTimePickerState.startPlaceHolder" placeholder="请输入金额">
-        <template #extra><span class="extra-text-tip">万</span></template>
+    <div class="select-picker-group" @click="selectInput(false)" :class="{'click-active':inputSelected==true}">
+      <van-field :formatter="formatterDigit" @blur="formatInput" @click.stop="selectInput(true)" type="digit" v-model.number="inputMap.start" :placeholder="placeholder">
+        <template #extra><span class="extra-text-tip">{{extra}}</span></template>
       </van-field>
       <div class="line"></div>
-      <van-field type="digit" v-model="dateTimePickerState.endPlaceHolder" placeholder="请输入金额">
-        <template #extra><span class="extra-text-tip">万</span></template>
+      <van-field :formatter="formatterDigit" @blur="formatInput" @click.stop="selectInput(true)" type="digit" v-model.number="inputMap.end" :placeholder="placeholder">
+        <template #extra><span class="extra-text-tip">{{extra}}</span></template>
       </van-field>
     </div>
 </div>
@@ -121,233 +122,120 @@ var moneyComponentTemplate = `<div class="j-container">
 var moneyComponent = {
   name: 'money-mobile',
   template: moneyComponentTemplate,
+  props: {
+    radio: {
+      type: Boolean,
+      default: true
+    },
+    tags: {
+      type: Array,
+      default: function () {
+        return [
+          {
+            name: '不限',
+            value: '-',
+            selected: true
+          }
+        ]
+      }
+    },
+    placeholder: {
+      type: String,
+      default: '请输入金额'
+    },
+    extra: {
+      type: String,
+      default: '万'
+    }
+  },
   data:function () {
     return {
       colDate: 0,
-      timeSelectList:[
-        {
-          name: '不限',
-          value: 'all',
-          selected: true
-        },
-        {
-          name: '100万以内',
-          value: 'lately7',
-          selected: false
-        },
-        {
-          name: '100-500万',
-          value: 'lately30',
-          selected: false
-        },
-        {
-          name: '500-1000万',
-          value: 'lastYear',
-          selected: false
-        }
-      ],
+      selectTags: this.tags,
       // 点击选择时间添加样式
-      dateStyle: false,
-      // 时间选择参数
-      datePicker:{
-        startshow: false,
-        endshow: false,
-        minDate: new Date(2020, 0, 1),
-        maxDate: new Date(2025, 10, 1),
-        currentDate: new Date(),
-      },
-      dateTimePickerState: {
+      inputSelected: false,
+      inputMap: {
         start: '',
-        end: '',
-        startPlaceHolder: '', // 开始日期
-        endPlaceHolder: '' // 结束日期
-      },
+        end: ''
+      }
     }
   },
   mounted () {
     $('head').append(tempMoneyStyleComponent)
   },
   methods: {
-    setState (data) {
-      // {
-      //   start: 1620230400000, // 2021-5-6
-      //   end: 1620489600000, // 2021-5-9
-      //   exact: 'all'
-      // }
-      if (!data || Object.keys(data).length === 0) {
-        this.setTimeSelectListState('all')
-      } else {
-        switch (data.exact) {
-          case 'all': {
-            this.setTimeSelectListState('all')
-            this.clearDateTimePicker()
-            break
-          }
-          case 'lately7': {
-            this.setTimeSelectListState('lately7')
-            this.clearDateTimePicker()
-            break
-          }
-          case 'lately30': {
-            this.setTimeSelectListState('lately30')
-            this.clearDateTimePicker()
-            break
-          }
-          case 'lastYear': {
-            this.setTimeSelectListState('lastYear')
-            this.clearDateTimePicker()
-            break
-          }
-          case 'exact': {
-            // if (!data.start || !data.end) break
-            if (data.start < data.end) {
-              this.dateTimePickerState.start = new Date(data.start)
-              this.dateTimePickerState.end = new Date(data.end)
-            }
-            break
-          }
-          default: {
-            console.warn('exact值为空')
-          }
+    formatInput () {
+      if (String(this.inputMap.start).length && String(this.inputMap.end).length) {
+        var isEndMax = this.inputMap.start < this.inputMap.end
+        var maxN = isEndMax ? this.inputMap.end : this.inputMap.start
+        var minN = isEndMax ? this.inputMap.start : this.inputMap.end
+
+        this.inputMap = {
+          start: minN,
+          end: maxN
         }
       }
     },
-    clearDateTimePicker () {
-      this.dateTimePickerState.start = ''
-      this.dateTimePickerState.end = ''
+    formatterDigit (value) {
+      return value.replace(/\D/g, '').replace(/^0+/g, '0')
     },
     getState () {
-      // timeState.exact: all/lately7/lately30/lastYear/exact5种状态
-      // 为true时候表示精确筛选，从时间选择器中获取值(其他为根据当前时间计算出的值)
-      const timeState = {
-        start: '',
-        end: '',
-        exact: 'exact'
-      }
-      const selectButton = this.timeSelectList.find(item => item.selected)
-      console.log(selectButton)
-      if (selectButton) {
-        timeState.exact = selectButton.value
-        Object.assign(timeState, this.calcNotExactTime(timeState.exact))
-      } else {
-        timeState.exact = 'exact'
-        if(this.dateTimePickerState.start !== '') {
-          timeState.start = this.dateTimePickerState.start.getTime()
+      if (this.radio) {
+        if (this.inputSelected) {
+          return this.inputMap.start + '-' + this.inputMap.end
         } else {
-          timeState.start = ''
+          return this.selectTags.filter(v => v.selected)[0].value
         }
-        console.log(this.dateTimePickerState.end == '')
-        if(this.dateTimePickerState.end != '') {
-          timeState.end = this.dateTimePickerState.end.getTime()
-        } else {
-          timeState.end = ''
+      } else {
+        var resultList = []
+        if (this.inputSelected) {
+          resultList.push(this.inputMap.start + '-' + this.inputMap.end)
         }
+        this.selectTags.filter(v => v.selected).forEach(v => {
+          resultList.push(v.value)
+        })
+        return resultList.join(',')
       }
-      return timeState
     },
-    // 计算lately7/lately30/lastYear的开始和结束时间
-    // endTime传入一个时间戳
-    calcNotExactTime (exact, endTime = Date.now()) {
-      const t = {
-        start: 0,
-        end: +new Date(endTime)
-      }
-      const durations = {
-        hour1: 60 * 60 * 1000,
-        day1: 60 * 60 * 1000 * 24 * 1,
-        day7: 60 * 60 * 1000 * 24 * 7,
-        day30: 60 * 60 * 1000 * 24 * 30
-      }
-      switch (exact) {
-        case 'lately7': {
-          t.start = t.end - durations.day7
-          break
-        }
-        case 'lately30': {
-          t.start = t.end - durations.day30
-          break
-        }
-        case 'lastYear': {
-          const year = new Date(t.end).getFullYear()
-          const lastYear = year - 1
-          t.start = +new Date(`${lastYear}`)
-          t.end = +new Date(`${year}`) - durations.hour1 * 8 - 1
-          break
-        }
-        default: {
-          t.start = 0
-          t.end = 0
-          break
-        }
+    selectInput (type) {
+      if (this.radio) {
+        this.resetSelected()
+        this.inputSelected = true
+      } else {
+        this.inputSelected = type ? type : !this.inputSelected
       }
-      return t
     },
-    selectFixedDate: function(item) {
-      if (item.selected) return
-      this.timeSelectList.forEach(v => (v.selected = false))
-      item.selected = true
-      this.dateStyle = false
-      this.clearDateTimePicker()
-    },
-    // 显示选择时间弹窗
-    dateShowEvent: function() {
-      this.timeSelectList.forEach(v => (v.selected = false))
-      this.dateStyle = true
-      this.datePicker.startshow = true
-    },
-    formatter: function(type, val) {
-      if (type === 'year') {
-        return val + '年';
-      }
-      if (type === 'month') {
-        return val + '月';
-      }
-      if (type === 'day') {
-        return val + '日';
+    selectFixedTag: function(item) {
+      if (this.radio) {
+        if (item.selected) return
+        this.selectTags.forEach(v => (v.selected = false))
+        this.inputSelected = false
+        item.selected = true
+      } else {
+        item.selected = !item.selected
       }
-      return val;
     },
-    // 结束时间获取焦点
-    getEndFocus: function(){
-      this.datePicker.endshow = true
+    resetSelected () {
+      this.selectTags.forEach(v => (v.selected = false))
+      this.inputSelected = false
     },
     resetAll:function() {
+      this.resetSelected()
       let params = {
-        name: 'dateItem',
+        name: 'select-tag',
         data: ''
       }
       this.$emit('cancel', params)
-    },
-    // 选择开始时间弹窗确认按钮
-    onStartConfirm:function() {
-      this.dateTimePickerState.start = new Date(this.$refs.getstartValues.value)
-      this.dateTimePickerState.startPlaceHolder = this.$refs.getstartValues.value.pattern('yyyy年MM月dd日')
-      this.datePicker.startshow = false
-      // 如果结束时间不为空 选择过开始时间不弹出结束时间弹窗
-      if(this.dateTimePickerState.end == '') {
-        this.datePicker.endshow = true
-      }else{
-        this.datePicker.endshow = false
-      }
-    },
-    // 选择结束时间弹窗确认按钮
-    onendConfirm: function(){
-      this.dateTimePickerState.end = new Date(this.$refs.getendValues.value)
-      this.dateTimePickerState.endPlaceHolder = this.$refs.getendValues.value.pattern('yyyy年MM月dd日')
-      this.datePicker.endshow = false
-    },
-    // 选择时间弹窗关闭按钮
-    pickerClose: function() {
-      this.datePicker.startshow = false
-      this.datePicker.endshow = false
+      return params
     },
     // 筛选条件确认按钮
     onConfirm: function(){
       let params = {
-        name: 'dateItem',
+        name: 'select-tag',
         data: this.getState()
       }
       this.$emit('confirm', params)
+      return params
     }
   }
 }