ai_telecontrol/pages/index/index.vue

<template>
	<view class="page">
    <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 reload" @click="reload">
        刷新页面
      </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});
}

const reload = async ()=>{
  await indexPush({name: 'reload'});
}

</script>

<style scoped lang="scss">
  page{
    background-color: #282c35;
  }
  .page{
    width: 100vw;
    height: 100vh;
    background-color: #282c35;
  }
.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;
}
.reload{
  background-color: #ff0000;
}
</style>