dz-app/pages/voluntary/index/components/recommend-score-range.vue

<template>
    <slider-range v-if="sliderAvailable" :min="scoreLimit.availableRange[0]" :max="scoreLimit.availableRange[1]"
                  :value="scoreRange" :activeColor="$u.color.primary" @change="confirmScoreRange"></slider-range>
    <view v-else class="fx-1">
        <u-divider text="无最佳推荐分数范围" :text-size="13" :custom-style="{margin: '0'}"/>
    </view>
</template>

<script>
import SliderRange from '@/components/primewind-sliderrange/components/primewind-sliderrange/index.vue'

export default {
    name: 'RecommendScoreRange',
    components: {
        SliderRange
    },
    inject: ['fetchScoreBatchRange', 'fetchVoluntaryData'],
    props: {
        formSubject: {
            type: Object,
            default: () => ({})
        }
    },
    data() {
        return {
            scoreRange: [0, 100],
        }
    },
    computed: {
        voluntaryData() {
            // noinspection JSUnresolvedFunction
            return this.fetchVoluntaryData()
        },
        scoreBatchRange() {
            // noinspection JSUnresolvedFunction
            return this.fetchScoreBatchRange()
        },
        scoreLimit() {
            const emptyDefault = {
                defaultRange: [],
                availableRange: []
            }
            if (!this.scoreBatchRange[0] || !this.scoreBatchRange[1]) return emptyDefault
            const min = this.scoreBatchRange[0] * 1
            const max = this.voluntaryData.maxScore * 1 // requirements change: no need to limit top score
            const current = this.formSubject.score * 1
            const expectMax = current + 20
            const expectMin = current - 30
            const defaultRange = [Math.max(expectMin, min), Math.min(expectMax, max)]
            const availableMax = expectMax + 10
            const availableMin = expectMin - 20
            const availableRange = [Math.max(availableMin, min), Math.min(availableMax, max)]
            return {
                defaultRange,
                availableRange
            }
        },
        sliderAvailable() {
            return this.scoreLimit.defaultRange[1] > this.scoreLimit.defaultRange[0]
        }
    },
    watch: {
        scoreLimit: {
            handler() {
                console.log('calculate score limit', this.scoreLimit)
                this.resetScoreRange()
            },
            immediate: true
        },
    },
    methods: {
        resetScoreRange() {
            if (this.scoreLimit.defaultRange.length != 2) return
            this.scoreRange = this.scoreLimit.defaultRange
        },
        confirmScoreRange(e) {
            // NOTE: ext.debounce do not support arguments in uni-app, but it works fine in pc.
            this.$u.debounce(() => {
                if (this.scoreRange.toString() === e.toString()) return
                this.scoreRange = e
                this.$emit('change', e)
            }, 1000)
        }
    }
}
</script>

<style scoped lang="scss">
.slider-range ::v-deep {
  padding-top: 0;

  .slider-range-inner {
    height: 24px !important;
  }

  .slider-handle-block {
    width: 32px !important;
    border-radius: 10px;
    background-color: $uni-color-primary !important;
  }

  .range-tip {
    color: #FFFFFF;
    top: 20px;
    z-index: 99;
    pointer-events: none;
  }
}
</style>