Browse Source

feat: pc端金额筛选组件操作逻辑调整3

cuiyalong 1 year ago
parent
commit
760b54a60f
1 changed files with 19 additions and 15 deletions
  1. 19 15
      apps/bigmember_pc/src/components/selector-cascader/MoneySelection.vue

+ 19 - 15
apps/bigmember_pc/src/components/selector-cascader/MoneySelection.vue

@@ -20,6 +20,7 @@
                     class="min-input"
                     class="min-input"
                     name="minprice"
                     name="minprice"
                     maxlength="9"
                     maxlength="9"
+                    oninput="value=value.replace(/[^\d]/g, '')"
                     v-model.number="inputGroupCache.min"
                     v-model.number="inputGroupCache.min"
                   />
                   />
                   <span class="unit">万元</span>
                   <span class="unit">万元</span>
@@ -31,6 +32,7 @@
                     class="max-input"
                     class="max-input"
                     name="maxprice"
                     name="maxprice"
                     maxlength="9"
                     maxlength="9"
+                    oninput="value=value.replace(/[^\d]/g, '')"
                     v-model.number="inputGroupCache.max"
                     v-model.number="inputGroupCache.max"
                   />
                   />
                   <span class="unit">万元</span>
                   <span class="unit">万元</span>
@@ -69,7 +71,7 @@ export default {
   },
   },
   data() {
   data() {
     return {
     return {
-      value: '',
+      checkedAll: true,
       inputGroupCache: {
       inputGroupCache: {
         min: '',
         min: '',
         max: ''
         max: ''
@@ -88,24 +90,19 @@ export default {
       } else {
       } else {
         return `${this.placeholder}`
         return `${this.placeholder}`
       }
       }
-    },
-    checkedAll() {
-      const exact = this.price.min || this.price.max
-      return !exact
     }
     }
   },
   },
   methods: {
   methods: {
     resetStatePrice() {
     resetStatePrice() {
-      this.price.min = ''
-      this.price.max = ''
-    },
-    resetPrice() {
+      this.checkedAll = true
       this.inputGroupCache.min = ''
       this.inputGroupCache.min = ''
       this.inputGroupCache.max = ''
       this.inputGroupCache.max = ''
+      this.price.min = ''
+      this.price.max = ''
     },
     },
     clickAll() {
     clickAll() {
       this.resetStatePrice()
       this.resetStatePrice()
-      this.onChange()
+      // this.onChange()
     },
     },
     compareMinMax() {
     compareMinMax() {
       const { min, max } = this.inputGroupCache
       const { min, max } = this.inputGroupCache
@@ -119,9 +116,11 @@ export default {
       this.price.min = min
       this.price.min = min
       this.price.max = max
       this.price.max = max
       if (min !== '') {
       if (min !== '') {
+        this.checkedAll = false
         this.inputGroupCache.min = min
         this.inputGroupCache.min = min
       }
       }
       if (max !== '') {
       if (max !== '') {
+        this.checkedAll = false
         this.inputGroupCache.max = max
         this.inputGroupCache.max = max
       }
       }
       if (min !== '' && max !== '') {
       if (min !== '' && max !== '') {
@@ -130,18 +129,25 @@ export default {
       }
       }
 
 
       if (min === '' && max === '') {
       if (min === '' && max === '') {
-        this.resetPrice()
-        this.onChange()
+        this.resetStatePrice()
       }
       }
     },
     },
     getState() {
     getState() {
-      return this.price
+      if (this.checkedAll) {
+        return { min: '', max: '' }
+      } else {
+        return this.inputGroupCache
+      }
     },
     },
     syncToPrice() {
     syncToPrice() {
       Object.assign(this.price, this.inputGroupCache)
       Object.assign(this.price, this.inputGroupCache)
     },
     },
     onConfirm() {
     onConfirm() {
       this.compareMinMax()
       this.compareMinMax()
+      const { min, max } = this.inputGroupCache
+      if (min || max) {
+        this.checkedAll = false
+      }
       this.$nextTick(() => {
       this.$nextTick(() => {
         this.$refs.selectprice.blur()
         this.$refs.selectprice.blur()
         this.syncToPrice()
         this.syncToPrice()
@@ -155,8 +161,6 @@ export default {
         if (min === '' || max === '') {
         if (min === '' || max === '') {
           return this.$toast('最小值和最大值均为必填')
           return this.$toast('最小值和最大值均为必填')
         }
         }
-      } else {
-        if (min === '' && max === '') return
       }
       }
       this.$emit('change', state)
       this.$emit('change', state)
     }
     }