orchestra-music-score/src/pages/detail/speed.tsx

import { defineComponent, reactive, ref, toRefs, watch } from 'vue'
import { Button, Slider } from 'vant'
import classnames from 'classnames'
import detailState from '/src/pages/detail/state'
import styles from './speed.module.less'

import iconMinus from './icons/icon-minus.svg'
import iconPlus from './icons/icon-plus.svg'
import iconresetMinus from './icons/icon-resetMinus.svg'
import runtime, * as RuntimeUtils from '/src/pages/detail/runtime'

const state = reactive({
  speed: 90,
  showHint: false,
  maxSpeed: 315,
  firstExceedEcho: false, // 第一次超出速度范围，显示的速度默认不回退到270或者45
})

export default defineComponent({
  name: 'speed',
  props: {
    changed: {
      type: Function,
      default: (speed: number) => {},
    },
    updateSpeed: {
      type: Function,
      default: (speed: number) => {},
    },
    mode: {
      type: String,
    },
    changeMode: {
      type: Function,
      default: (val: string) => {},
    },
    lib: {
      type: Object,
    },
  },
  setup(props) {
    const { lib } = toRefs(props)
    state.speed = lib.value?.speed
    const onDragStart = () => {
      state.showHint = true
    }

    const onDragEnd = () => {
      state.showHint = false
    }

    const changeSpeed = (speed: number) => {
      state.speed = speed
      props.changed(state.speed)
    }

    const updateSpeed = (speed: number) => {
      state.speed = speed
      if (state.firstExceedEcho) {
        state.speed = Math.min(state.speed, 270)
        state.speed = Math.max(state.speed, 45)
      }
      if (!state.firstExceedEcho) state.firstExceedEcho = true
      props.updateSpeed(state.speed)
    }

    const minusSpeed = () => {
      state.speed = Math.max(state.speed - 1, 45)
      state.speed = Math.min(state.speed, 270)
      props.changed(state.speed)
    }

    const plusSpeed = () => {
      state.speed = Math.min(state.speed + 1, 270)
      props.changed(state.speed)
    }

    watch(
      () => runtime.speed,
      (val) => {
        if (val) {
          state.maxSpeed = runtime.speed > 270 ? runtime.speed + 45 : 315;
          //console.log('速度123456',state.maxSpeed,runtime.speed,runtime.playIngSpeed)
        }
      },
      { immediate: true }
    )

    return () => (
      <div class={styles['speed-change']}>
        <div class={styles.speed}>
          {/* <span>速度</span> */}
          <div>
            <Button
              color="#01C1B5"
              icon={iconPlus}
              type="primary"
              size="mini"
              round
              disabled={state.speed >= 270}
              onClick={plusSpeed}
            />
            <Slider
              class={styles.slider}
              max={runtime.playIngSpeed > 270 ? runtime.playIngSpeed : 270}
              min={45}
              barHeight="3px"
              buttonSize="18px"
              modelValue={state.maxSpeed - state.speed}
              onUpdate:modelValue={(speed: number) => {
                const currentSpeed = (runtime.playIngSpeed > 270 ? runtime.playIngSpeed + 45 : state.maxSpeed) - speed
                // console.log('速度123',state.maxSpeed,speed,runtime.playIngSpeed,runtime.speed,'设置的:',currentSpeed)
                updateSpeed(currentSpeed)
              }}
              step="1"
              vertical
              activeColor="#ebedf0"
              onChange={(speed: number) => changeSpeed(state.maxSpeed - speed)}
              onDragStart={onDragStart}
              onDragEnd={onDragEnd}
              vSlots={{
                button: () => (
                  <div class={styles['custom-button']}>
                    <span>{state.speed}</span>
                    <div class={classnames(styles.title)}>
                      <span class={styles.strong}>{state.speed}</span>
                    </div>
                  </div>
                ),
              }}
            />
            <Button
              class={styles.min}
              color="#01C1B5"
              icon={iconMinus}
              type="primary"
              size="mini"
              round
              disabled={state.speed <= 45}
              onClick={minusSpeed}
            />
            <Button
              class={styles.reset}
              color="#01C1B5"
              icon={iconresetMinus}
              type="primary"
              size="mini"
              round
              onClick={() => {
                const currentItem: any = detailState.times[runtime.activeIndex];
                const currentSpeed = currentItem?.measureSpeed ? currentItem.measureSpeed : detailState.baseSpeed;
                changeSpeed(currentSpeed)
              }}
            />
          </div>
        </div>
      </div>
    )
  },
  methods: {
    resetSpeed() {
      state.speed = this.lib?.speed
      this.changed(this.lib?.speed)
    },
    refUpdateSpeed(speed: number) {
      state.speed = speed
      this.updateSpeed(state.speed)
    },
  },
})