96 lines
1.9 KiB
Vue
96 lines
1.9 KiB
Vue
|
<template>
|
||
|
|
<view>
|
||
|
|
<view class="body">
|
||
|
|
<view class="btn end" @click="stopPlay('re-play')">
|
||
|
|
重新播放
|
||
|
|
</view>
|
||
|
|
<view class="btn stop" @click="stopPlay('stop')">
|
||
|
|
停止播放
|
||
|
|
</view>
|
||
|
|
<view class="btn end" @click="play('play')">
|
||
|
|
继续播放
|
||
|
|
</view>
|
||
|
|
<view class="btn pause" @click="play('pause')">
|
||
|
|
暂停播放
|
||
|
|
</view>
|
||
|
|
<view class="btn clear" @click="clear">
|
||
|
|
清空对话
|
||
|
|
</view>
|
||
|
|
<view class="btn re" @click="reRecord">
|
||
|
|
重新录制
|
||
|
|
</view>
|
||
|
|
<view class="btn" :class="{end:recordStatus=='end'}" @click="startRecord">
|
||
|
|
{{recordStatus=='start'?'开始录音':'结束录音'}}
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { indexPush } from "@/api/api.js"
|
||
|
|
import { ref } from "vue"
|
||
|
|
|
||
|
|
const recordStatus = ref('start')
|
||
|
|
|
||
|
|
const startRecord = async ()=>{
|
||
|
|
await indexPush({name: recordStatus.value});
|
||
|
|
recordStatus.value=='start'? recordStatus.value= 'end':recordStatus.value='start';
|
||
|
|
}
|
||
|
|
|
||
|
|
const reRecord = async ()=>{
|
||
|
|
await indexPush({name: 're'});
|
||
|
|
}
|
||
|
|
|
||
|
|
const play = async (e)=>{
|
||
|
|
await indexPush({name: e});
|
||
|
|
}
|
||
|
|
|
||
|
|
const clear = async ()=>{
|
||
|
|
await indexPush({name: 'clear'});
|
||
|
|
}
|
||
|
|
|
||
|
|
const stopPlay = async (e)=>{
|
||
|
|
await indexPush({name: e});
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.body{
|
||
|
|
height: 80vh;
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
align-items: flex-end;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
.btn{
|
||
|
|
width: 200rpx;
|
||
|
|
height: 200rpx;
|
||
|
|
font-size: 32rpx;
|
||
|
|
margin: 50rpx;
|
||
|
|
color: #fff;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
background-color: #0f8ad6;
|
||
|
|
border-radius: 50%;
|
||
|
|
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
|
||
|
|
}
|
||
|
|
.end{
|
||
|
|
background-color: #1a9d34;
|
||
|
|
}
|
||
|
|
.re{
|
||
|
|
background-color: #f8c125;
|
||
|
|
}
|
||
|
|
.clear{
|
||
|
|
background-color: #ff4a40;
|
||
|
|
}
|
||
|
|
.pause{
|
||
|
|
background-color: #80b3ff;
|
||
|
|
}
|
||
|
|
.stop{
|
||
|
|
background-color: #f3405d;
|
||
|
|
}
|
||
|
|
</style>
|