|
<template>
|
<div class="volumeBlock">
|
<img
|
@click="volumeChange(speakerInfo.play_volume === 0 ? 100 : 0)"
|
:src="speakerInfo.play_volume !== 0 ? listVolumeImg : muteImg"
|
alt=""
|
/>
|
<van-slider
|
v-model="speakerInfo.play_volume"
|
@change="volumeChange(speakerInfo.play_volume)"
|
@update:model-value="delayedRecepAuto"
|
active-color="#1D6FE9"
|
>
|
<template #button>
|
<div class="custom-button">{{ speakerInfo.play_volume }}</div>
|
</template>
|
</van-slider>
|
</div>
|
</template>
|
|
<script setup>
|
import listVolumeImg from '@/assets/images/taskManagement/taskIntermediateContent/list-volume.svg'
|
import muteImg from '@/assets/images/taskManagement/taskIntermediateContent/mute.svg'
|
import { setVoiceVolumn } from '@/api/payload'
|
import { showToast } from 'vant'
|
|
const speakerInfo = inject('speakerInfo')
|
const delayedRecepAuto = inject('delayedRecepAuto')
|
const dockSn = inject('dockSn')
|
|
function volumeChange(volume) {
|
const data = {
|
play_volume: volume,
|
psdk_index: 2,
|
}
|
setVoiceVolumn({ sn: dockSn.value }, data).then(res => {
|
showToast('设置成功')
|
})
|
}
|
|
</script>
|
|
|
<style scoped lang="scss">
|
.volumeBlock {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
padding: half(0) half(30);
|
gap: 0 half(15);
|
|
.custom-button {
|
width: half(24);
|
color: #fff;
|
font-size: half(10);
|
text-align: center;
|
background-color: var(--van-primary-color);
|
border-radius: half(100);
|
}
|
}
|
</style>
|
