sound-chain/pages/index/user.vue

<!-- 个人中心：支持装修 -->
<template>
  <s-layout
    title=""
	navbar="inner"
    tabbar="/pages/index/user"
    :bgStyle="state.page"
    :navbarStyle="state.navigationBar"
	showLogoutButton
  >
    <view class="user_page">
		<view class="ai_box">
			<view class="ai_name">我的外呼智能体</view>
			<view class="ai_cont">
				<!-- <view class="ai_audio">
					
					<image v-if="state.play" class="play_icon" src="/static/play_icon.png"></image>
					<image v-else class="pause_icon" src="/static/pause_icon.png"></image>
					<image class="play_img" src="/static/play_img.png"></image>
				</view> -->
				<view class="progress-box">
					<progress :percent="20" stroke-width="20rpx" />
					<view class="progress_bottom">
						<view class="label">训练中…</view>
						<view class="percent">20%</view>
					</view>
				</view>
			</view>
			<view class="training_btn" @tap="openTrainingAuthModal">训练</view>
		</view>
		<!-- <view class="ai_no">
			<image class="ai_no_img" src="/static/ai_no_img.png"></image>
			<view class="dsc">外呼智能体尚未学习您的声音</view>
			<image class="training_img" src="/static/training_img.png"></image>
		</view> -->
	</view>
	 <su-popup :show="state.showTraining" round="20" :showClose="true" @close="closeTrainingAuthModal">
		<view class="training_wrap">
			<view class="training_cont">
				<view class="label">请朗读（1/3）</view>
				<view class="cont">您好，我是您的五萎汽车官方服务顾问，恭喜您成功注册五菱汽车App，您可参与新用户专属 现金抽奖活动，最高获得10元现金红包，100%中奖，提交【五菱天选座驾】表单即可参与!更有请问您有华为手机香薰机等好礼!您提交一下，领个现金红包呗?</view>
			</view>
			<view
				class="record_btn"
				:class="{'recording_btn':state.isRecording,'touched_btn':state.isTouched}"
				@touchstart="startRecording"
				@touchmove="moveRecording"
				@touchend="stopRecording"  
				@touchcancel="stopRecording"
			>
				<view v-show="state.isRecording" class="optimize_tip">
					<span class="recording_text" :style="{'color': state.isTouched ? '#FF4E4E' : '#666666'}">{{state.isTouched ? '松开取消' : '松开发送，上滑取消'}}</span>
				</view>
				{{state.audioLoading ? '录音校验中，请稍等…' : state.isRecording?'':'按住录制'}} 
				<view v-if="state.isRecording" class="recording_loading">
					<view class="dot1"></view>
					<view class="dot2"></view>  
					<view class="dot3"></view> 
				</view>
			</view>
		</view>
	 </su-popup>
	 <su-popup :show="state.showClone" round="20" type="center" :isMaskClick="false" :showClose="false" @close="state.showClone=false">
		<view class="tips_wrap">
			<view class="tips_cont">
				<view class="label">声音克隆中</view>
				<view class="cont">预计需要30分钟，克隆完成后会通知您</view>
			</view>
			<view class="group_btn">
				<!-- <view class="item_btn cancel_btn">取消</view> -->
				<view class="item_btn confirm_btn" @tap="state.showClone=false">确认</view>
			</view>
		</view>
	 </su-popup>
  </s-layout>
</template>

<script setup>
  import { onShow } from '@dcloudio/uni-app';
  import AuthUtil from '@/common/api/member/auth';
  import { reactive } from 'vue';
  import sheep from '@/common';
  const state = reactive({
    navigationBar: {},
    page: {
  		backgroundColor: '#FAFAFA',
  		backgroundImage: '/static/homeTopBg.png'
  	},
	play:false,
	showTraining: false,
	isRecording: false,
	isTouched: false,
	startY: 0,
	audioLoading: false,
	recorderManager: null,
	showClone: true
  })
  
  // 隐藏原生tabBar
  uni.hideTabBar({
    fail: () => {},
  })


  onShow(() => {
  })
  function openTrainingAuthModal(){
	  state.showTraining = true
	  initH5Record()
  }
  function closeTrainingAuthModal(){
	  state.showTraining = false
  }
	async function initH5Record(){
		if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
		    //sheep.$helper.toast('您的浏览器不支持录音功能')
		    return
		}
		navigator.mediaDevices.getUserMedia({ audio: true }).then(stream => {
		  state.recorderManager = new MediaRecorder(stream)
		  const audioChunks = []
		  
		  state.recorderManager.ondataavailable = e => {
			audioChunks.push(e.data)
		  }
		  
		  state.recorderManager.onstop = () => {
			let audioBlob = new Blob(audioChunks)
			let audioSrc = URL.createObjectURL(audioBlob)
			stream.getTracks().forEach(track => track.stop())
			state.isRecording = false
			if (!state.isTouched) {
				console.log(audioBlob,audioSrc)
			} else {
				sheep.$helper.toast("取消录音")
				console.log("取消录音")
			}
		  }
		}).catch(err => {
		  console.error('录音权限获取失败:', err)
		  sheep.$helper.toast('请允许麦克风权限')
		})
	}
  function initRecord(){
	  // 初始化录音管理器
	  state.recorderManager = uni.getRecorderManager()
  
	  // 监听录音结束事件
	  state.recorderManager.onStop((res) => {
		console.log('录音结束', res)
		state.isRecording = false
		if (!state.isTouched) {
		    console.log(res.tempFilePath)
		} else {
			sheep.$helper.toast("取消录音")
		    console.log("取消录音")
		}
	  })
  }
  function startRecord() {
	  sheep.$helper.toast(state.recorderManager)
	if (!state.isRecording) {
	  state.isRecording = true
	  state.recorderManager.start()
	  
	}
  }
  function pauseRecord() {
	if (state.isRecording) {
	  state.recorderManager.pause()
	}
  }
  function stopRecord() {
	if (state.isRecording) {
	  state.recorderManager.stop()
	}
  }
  // 按住按钮
  function startRecording(event) {
	console.log('startRecording')
    if (state.audioLoading) {
      sheep.$helper.toast("录音校验中…")
      return
    }
	startRecord()
    // 获取触摸开始的坐标
    state.startY = event.touches[0].clientY;
    state.isTouched = false; 
  }
  // 移动手指
  function moveRecording(event) {
  	console.log('moveRecording')
    const currentY = event.touches[0].clientY;
    const deltaY = state.startY - currentY;
    // 判断垂直滑动，并且滑动距离是否足够
    if (deltaY > 10) {
      // 按到了取消按钮
      state.isTouched = true;
    } else {
      state.isTouched = false
    }
  }
  // 松开按钮
  function stopRecording() {
	stopRecord()
  }
</script>

<style lang="scss" scoped>
	.user_page{
		.ai_box{
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 232rpx 40rpx 0;
			.ai_name{
				font-weight: bold;
				font-size: 40rpx;
				color: #222222;
				line-height: 80rpx;
				margin-bottom: 29rpx;
			}
			.ai_cont{
				width: 670rpx;
				height: 260rpx;
				background: url('/static/aiBg.png') no-repeat center/100% 100%;
				position: relative;
				.ai_audio{
					width: 300rpx;
					height: 100rpx;
					background: #E2F5ED;
					box-shadow: inset 0rpx 4rpx 6rpx 2rpx rgba(0,0,0,0.05);
					border-radius: 60rpx;
					border: 1rpx solid #FFFFFF;
					position: absolute;
					bottom: 40rpx;
					right: 60rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					.pause_icon,
					.play_icon{
						width: 60rpx;
						height: 60rpx;
						margin-right: 16rpx;
					}
					.play_img{
						width: 148rpx;
						height: 40rpx;
					}
				}
				.progress-box{
					width: 320rpx;
					position: absolute;
					bottom: 40rpx;
					right: 40rpx;
					:deep(.uni-progress){
						.uni-progress-bar{
							border-radius: 10rpx;
							box-shadow: inset 0rpx 4rpx 6rpx 2rpx rgba(0,0,0,0.05);
							background: #CAF2E0 !important;
							border: 1rpx solid #FFFFFF;
							.uni-progress-inner-bar{
								border-radius: 10rpx;
								background: linear-gradient( 90deg, #35E89A 0%, #00EBB0 100%) !important;
							}
						}
					}
					.progress_bottom{
						display: flex;
						justify-content: space-between;
						font-weight: 400;
						font-size: 24rpx;
						color: #222222;
						line-height: 34rpx;
						padding-top: 12rpx;
					}
				}
			}
			.training_btn{
				width: 630rpx;
				height: 104rpx;
				background: #222222;
				border-radius: 40rpx;
				font-weight: bold;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 104rpx;
				text-align: center;
				margin: 80rpx auto 126rpx;
			}
		}
		.ai_no{
			padding: 360rpx 40rpx 0;
			display: flex;
			flex-direction: column;
			align-items: center;
			.ai_no_img{
				width: 290rpx;
				height: 260rpx;
				margin-bottom: 40rpx;
			}
			.dsc{
				font-weight: 400;
				font-size: 28rpx;
				color: #999999;
				line-height: 40rpx;
				margin-bottom: 80rpx;
			}
			.training_img{
				width: 250rpx;
				height: 82rpx;
			}
		}
	}
	.training_wrap{
		padding: 118rpx 40rpx 40rpx;
		height: 1132rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		.training_cont{
			.label{
				font-weight: bold;
				font-size: 40rpx;
				color: #222222;
				line-height: 58rpx;
				text-align: center;
				margin-bottom: 120rpx;
			}
			.cont{
				font-weight: 500;
				font-size: 32rpx;
				color: #222222;
				line-height: 56rpx;
			}
		}
		.record_btn{
			width: 630rpx;
			height: 104rpx;
			background: #35E89A;
			border-radius: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0 auto;
			position: relative;
			.optimize_tip{
				position: absolute;
				top: -60rpx;
				left: 0;
				width: 100%;
				display: flex;
				align-items: center;
				.recording_text {
				  width: 100%;
				  font-weight: 400;
				  font-size: 24rpx;
				  text-align: center;
				}
			}
			.recording_loading {
				display: flex;  
				align-items: center;  
				justify-content: space-around;
				width: 76rpx;
				height: 100rpx;
				.dot1, .dot2, .dot3 {  
				  width: 8rpx;  
				  height: 8rpx;  
				  background-color: #333;  
				  border-radius: 50%;  
				  animation: scaleAnimation 3s infinite;
				}  
				  
				.dot1 {  
				  animation: jump 1.6s -0.32s linear infinite;
				  background: #FFFFFF;
				}  
				  
				.dot2 {  
				  animation: jump 1.6s -0.16s linear infinite;
				  background: #FFFFFF;
				}  
				  
				.dot3 {  
				  animation: jump 1.6s linear infinite;
				  background: #FFFFFF;
				}  
				  
				@keyframes jump {
					0%, 80%, 100% {
						-webkit-transform: scale(0);
						transform: scale(0);
					} 
					40% {
						-webkit-transform: scale(2.0);
						transform: scale(2.0);
					}
				}
			}
		}
		.recording_btn{
			width: 630rpx;
			background: #CCCCCC;
		}
		.recording_btn.touched_btn{
			background: #FF4E4E;
		}
	}
</style>