peiwan-uniapp/pages/clerk/apply/components/formVoice.vue

<template>
	<view class="form-bg">
		<view class="form-item">
			<view class="label">录音</view>
			<view class="bubble-box">
				<u-input @click="topBubble" input-align="right" type="select" :placeholder="voice.name" />
				<tui-bubble-popup :show="show" :mask="false" position="absolute" direction="right" triangleRight="-22rpx" triangleTop="30rpx" @close="topBubble" :flexEnd="false">
				 	<view @click="change(item)" class="tui-menu-item" v-for="(item,index) in list">{{item.name}}</view>
				</tui-bubble-popup>
			</view>
		</view>
		<view>
			<view class="voice-box" v-if="voice.type == 'voice'">
				<view v-if="voiceUrl" @click="playAudio" class="upload-btn-box">
					<view class="icon">
						<u-icon v-if="play" name="pause" color="#fff" size="70"></u-icon>
						<u-icon v-else name="play-right-fill" color="#fff" size="70"></u-icon>
					</view>
					<view class="upload-btn" v-if="play">停止播放</view>
					<view class="upload-btn" v-else>播放录音</view>
				</view>
				<view v-else>
					<all-speech ref="speech" @okClick="voiceOk"></all-speech>
				</view>
				<view v-if="voiceUrl" @click="reloadBtn" class="reload-btn">
					<u-icon name="reload" size="30"></u-icon>
					<text class="text">重录</text>
				</view>
			</view>
			<view class="voice-box" v-if="voice.type == 'upload'">
				<view v-if="voiceUrl" @click="playAudio" class="upload-btn-box">
					<view class="icon">
						<u-icon v-if="play" name="pause" color="#fff" size="70"></u-icon>
						<u-icon v-else name="play-right-fill" color="#fff" size="70"></u-icon>
					</view>
					<view class="upload-btn" v-if="play">停止播放</view>
					<view class="upload-btn" v-else>播放录音</view>
				</view>
				<view v-else @click="chooseVoice" class="upload-btn-box">
					<view class="icon">
						<u-icon name="plus" color="#fff" size="70"></u-icon>
					</view>
					<view class="upload-btn">上传录音文件</view>
				</view>
				<view v-if="voiceUrl" @click="reloadBtn" class="reload-btn">
					<u-icon name="reload" size="30"></u-icon>
					<text class="text">重录</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import FileApi from '@/sheep/api/infra/file';
	import tuiBubblePopup from "@/components/thorui/tui-bubble-popup/tui-bubble-popup.vue"
	const audio = uni.createInnerAudioContext();
	export default {
		components: {
			tuiBubblePopup,
		},
		props: {
			modelValue: {
			  type: String,
			  default: ''
			},
		},
		data() {
			return {
				voice: {
					
				},
				list: [
					{
						name: '直接录音',
						type: 'voice',
					},
				],
				current: 0,
				voicePath: '',
				show: false,
				play: false,
			}
		},
		created() {
			this.voice = this.list[this.current];
			
			// #ifndef MP-WEIXIN
			var voiceType = {
				name: '上传手机音频',
				type: 'upload',
			};
			this.list.push(voiceType);
			// #endif
		},
		computed: {
			voiceUrl(){
				return this.modelValue;
			}
		},
		methods: {
			topBubble() {
				this.show = !this.show;
			},
			change(e) {
				this.reloadBtn();
				this.topBubble();
				this.voice = e;
			},
			reloadBtn() {
				this.play = false;
				this.$emit('update:modelValue', ""); 
				this.$emit('sec', ""); 
			},
			playAudio() {
				if(this.play){
					this.play = false;
					audio.stop();
				}else{
					this.play = true;
					//语音自然播放结束
					audio.onEnded((res) => {
						this.play = false;
					});
					audio.src = this.modelValue;
					audio.play();
				}
			},
			chooseVoice() {
				var that = this;
				uni.chooseFile({
				  count: 1, //默认100
				  extension:['.mp3','.mp4','.m4a'],
					success: function (res) {
						var fileSize = res.tempFiles[0].size;
						if (fileSize > 1024 * 1024 * 10) { // 假设设置的文件大小限制为5MB
						  uni.showToast({
							title: '文件大小限制为10MB',
							icon: 'none'
						  });
						  return;
						}
						
						that.voicePath = res.tempFilePaths[0];
						console.log(JSON.stringify(res.tempFilePaths));
						that.uploadVoice(that.voicePath);
					}
				});
			},
			uploadVoice(path) {
				FileApi.uploadFile(path).then((res) => {
					this.$emit('update:modelValue', res.data); 
				});
			},
			voiceOk(e) {
				this.voicePath = e.path;
				this.uploadVoice(this.voicePath);
				this.$emit('sec', e.sec); 
			},
		}
	}
</script>

<style lang="scss" scoped>
	.form-bg {
		padding: 0 15px;
	}
	
	.form-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px 0;
		
		.label {
			font-size: 30rpx;
			min-width: 200rpx;
		}
	}
	
	.bubble-box {
		position: relative;
		
		.tui-menu-item {
			width: 100%;
			padding: 30rpx 20rpx;
			text-align: center;
			position: relative;
		}
		
		.tui-menu-item:after {
			    position: absolute;
			    box-sizing: border-box;
			    content: " ";
			    pointer-events: none;
			    top: 0%;
			    right: 10%;
			    bottom: 0%;
			    left: 10%;
			    border: 0 solid #ebedf0;
				border-color: #646566;
				border-bottom-width: 1px;
		}
		
		.tui-menu-item:last-child:after {
				border-bottom-width: 0;
		}
	}
	
	.voice-box {
		height: 400rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: relative;
		
		.icon {
			display: flex;
			background-color: #3cc9a4;
			border-radius: 100%;
			width: 170rpx;
			height: 170rpx;
			justify-content: center;
			align-items: center;
		}
		
		.upload-btn-box {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}
		
		.upload-btn {
			font-size: 34rpx;
			color: #aaa;
			margin-top: 10px;
		}
		
		.reload-btn {
			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			right: 0px;
			font-size: 30rpx;
			color: #3cc9a4;
			
			.text {
				margin-left: 4px;
			}
		}
	}
</style>