feat: 语音的弹窗封装到了组件内
This commit is contained in:
zoujing
106
components/Speech/RecordingPopup.vue
Normal file
106
components/Speech/RecordingPopup.vue
Normal file
@@ -0,0 +1,106 @@
|
||||
<template>
|
||||
<uni-popup position="center" :mask-click-able="false" ref="popupRef" type="center" :safe-area="false" :custom-style="{width: '100%', height: '100vh', borderRadius: 0, position: 'fixed', top: '0', left: '0', zIndex: 9999}">
|
||||
<view class="recording-popup">
|
||||
<view class="recording-wave">
|
||||
<!-- 波形动画 -->
|
||||
<view class="wave-animation"></view>
|
||||
</view>
|
||||
<view class="recording-text">
|
||||
{{ isSlideToText ? '松开发送 转文字' : '松开发送' }}
|
||||
</view>
|
||||
<view class="recording-cancel" @click="handleCancel">
|
||||
取消
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
isSlideToText: Boolean
|
||||
})
|
||||
|
||||
const emit = defineEmits(['cancel'])
|
||||
|
||||
const popupRef = ref(null)
|
||||
|
||||
// 打开弹窗
|
||||
const open = () => {
|
||||
if (popupRef.value) {
|
||||
popupRef.value.open()
|
||||
}
|
||||
}
|
||||
|
||||
// 关闭弹窗
|
||||
const close = () => {
|
||||
if (popupRef.value) {
|
||||
popupRef.value.close()
|
||||
}
|
||||
}
|
||||
|
||||
// 处理取消
|
||||
const handleCancel = () => {
|
||||
emit('cancel')
|
||||
close()
|
||||
}
|
||||
|
||||
// 暴露方法
|
||||
defineExpose({
|
||||
open,
|
||||
close
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
/* 录音弹窗样式 */
|
||||
.recording-popup {
|
||||
width: 100% !important;
|
||||
height: 100vh !important;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
border-radius: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: white;
|
||||
padding: 40px 0;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.recording-wave {
|
||||
width: 240px;
|
||||
height: 240px;
|
||||
border-radius: 50%;
|
||||
background-color: rgba(76, 217, 100, 0.3);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.wave-animation {
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
/* 这里可以添加波形动画 */
|
||||
background-image: url('/static/wave_icon.png');
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.recording-text {
|
||||
font-size: 20px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.recording-cancel {
|
||||
font-size: 18px;
|
||||
color: #CCCCCC;
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
123
components/Speech/VoiceResultPopup.vue
Normal file
123
components/Speech/VoiceResultPopup.vue
Normal file
@@ -0,0 +1,123 @@
|
||||
<template>
|
||||
<uni-popup position="center" :mask-click-able="false" ref="popupRef" type="center" :safe-area="false" :custom-style="{width: '100%', height: '100vh', borderRadius: 0, position: 'fixed', top: '0', left: '0', zIndex: 9999}">
|
||||
<view class="voice-result-popup">
|
||||
<view class="voice-result-bubble">
|
||||
{{ voiceText }}
|
||||
</view>
|
||||
<view class="voice-result-actions">
|
||||
<view class="action-button cancel" @click="handleCancel">取消</view>
|
||||
<view class="action-button voice" @click="handleSendVoice">发送原语音</view>
|
||||
<view class="action-button send" @click="handleSendText">发送</view>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
voiceText: String
|
||||
})
|
||||
|
||||
const emit = defineEmits(['cancel', 'sendVoice', 'sendText'])
|
||||
|
||||
const popupRef = ref(null)
|
||||
|
||||
// 打开弹窗
|
||||
const open = () => {
|
||||
if (popupRef.value) {
|
||||
popupRef.value.open()
|
||||
}
|
||||
}
|
||||
|
||||
// 关闭弹窗
|
||||
const close = () => {
|
||||
if (popupRef.value) {
|
||||
popupRef.value.close()
|
||||
}
|
||||
}
|
||||
|
||||
// 处理取消
|
||||
const handleCancel = () => {
|
||||
emit('cancel')
|
||||
close()
|
||||
}
|
||||
|
||||
// 处理发送原语音
|
||||
const handleSendVoice = () => {
|
||||
emit('sendVoice', { text: props.voiceText })
|
||||
close()
|
||||
}
|
||||
|
||||
// 处理发送文本
|
||||
const handleSendText = () => {
|
||||
emit('sendText', { text: props.voiceText })
|
||||
close()
|
||||
}
|
||||
|
||||
// 暴露方法
|
||||
defineExpose({
|
||||
open,
|
||||
close
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
/* 语音结果弹窗样式 */
|
||||
.voice-result-popup {
|
||||
width: 100% !important;
|
||||
height: 100vh !important;
|
||||
background-color: white;
|
||||
border-radius: 0;
|
||||
padding: 40px 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.voice-result-bubble {
|
||||
background-color: #4CD964;
|
||||
color: white;
|
||||
padding: 25px;
|
||||
border-radius: 18px;
|
||||
border-top-left-radius: 4px;
|
||||
margin-bottom: 40px;
|
||||
min-height: 100px;
|
||||
font-size: 20px;
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.voice-result-actions {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 20px;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
.action-button {
|
||||
padding: 12px 24px;
|
||||
border-radius: 30px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.cancel {
|
||||
color: #666666;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
.voice {
|
||||
color: #007AFF;
|
||||
background-color: #E8F0FE;
|
||||
}
|
||||
|
||||
.send {
|
||||
color: white;
|
||||
background-color: #007AFF;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user