完善speaking

components/speaking/speaking.vue

@@ -1,32 +1,29 @@
 <template>
-	<view class="speak-container">
-		{{ msgText }}
-		<view
-			ref="talkRef"
-			class="talk"
-			:class="{
-				normal: normalModel,
-				start: startModel,
-				startMouseover: startOverModel,
-			}"
-			@touchstart="handleTouchStart"
-			@touchend="handleTouchEnd"
-			>{{ talkText }}
-			<LottieRecording class="lottie" v-if="isShowLottieR" />
-			<text class="lottie-text" v-if="isShowLottieR">{{
-				lottieText
-			}}</text>
-			<yimo-AudioTrans
-				ref="yimoAudioTransRef"
-				:options="options"
-				@countDown="countDown"
-				@result="resultMsg"
-				@onStop="onStop"
-				@onOpen="onOpen"
-				@change="change"
-			></yimo-AudioTrans>
-		</view>
-	</view>
+  <view class="speak-container">
+    <view
+      ref="talkRef"
+      class="talk"
+      :class="{
+        normal: normalModel,
+        start: startModel,
+        startMouseover: startOverModel,
+      }"
+      @touchstart="handleTouchStart"
+      @touchend="handleTouchEnd"
+      >{{ talkText }}
+      <LottieRecording class="lottie" v-if="isShowLottieR" />
+      <text class="lottie-text" v-if="isShowLottieR">{{ lottieText }}</text>
+      <yimo-AudioTrans
+        ref="yimoAudioTransRef"
+        :options="options"
+        @countDown="countDown"
+        @result="resultMsg"
+        @onStop="onStop"
+        @onOpen="onOpen"
+        @change="change"
+      ></yimo-AudioTrans>
+    </view>
+  </view>
 </template>
 
 <script setup>
@@ -34,12 +31,12 @@ import { onMounted, ref } from "vue";
 import LottieRecording from "../../components/lottie/lottie-recording.vue";
 import noticeBar from "../../uni_modules/uview-plus/components/u-notice-bar/noticeBar";
 
-const msgText = ref("测试展示动画页面");
+const emits = defineEmits(["recordResult"]);
 
 // 动画相关
 const isShowLottieR = ref(false);
 const showLottieR = () => {
-	isShowLottieR.value = true;
+  isShowLottieR.value = true;
 };
 
 // 按住说话===================
@@ -61,156 +58,156 @@ const startOverModel = ref(false);
 
 // 相关方法
 const handleTouchStart = () => {
-	normalModel.value = false;
-	startModel.value = true;
+  normalModel.value = false;
+  startModel.value = true;
 
-	talkText.value = startText;
+  talkText.value = startText;
 
-	// 开始录音
-	yimoAudioTransRef.value && yimoAudioTransRef.value.start();
+  // 开始录音
+  yimoAudioTransRef.value && yimoAudioTransRef.value.start();
 };
 
 const handleTouchEnd = () => {
-	// 结束录音
-	yimoAudioTransRef.value && yimoAudioTransRef.value.end();
+  // 结束录音
+  yimoAudioTransRef.value && yimoAudioTransRef.value.end();
 
-	initTalkModel();
+  initTalkModel();
 };
 
 const handleTouchMove = (event) => {
-	if (!startModel.value) return;
-	const touch = event.touches[0];
-	const currentX = touch.clientX;
-	const currentY = touch.clientY;
-
-	console.log("handleTouchMove", talkRef.value);
-
-	const rect = talkRef.value.getBoundingClientRect();
-	const isInsideX = currentX >= rect.left && currentX <= rect.right;
-	const isInsideY = currentY >= rect.top && currentY <= rect.bottom;
-
-	if (!isInsideX || !isInsideY) {
-		// 超出范围
-		startModel.value = false;
-		startOverModel.value = true;
-		talkText.value = mouseOverText;
-	} else {
-		// 移动中
-		startModel.value = true;
-		startOverModel.value = false;
-		talkText.value = startText;
-	}
+  if (!startModel.value) return;
+  const touch = event.touches[0];
+  const currentX = touch.clientX;
+  const currentY = touch.clientY;
+
+  console.log("handleTouchMove", talkRef.value);
+
+  const rect = talkRef.value.getBoundingClientRect();
+  const isInsideX = currentX >= rect.left && currentX <= rect.right;
+  const isInsideY = currentY >= rect.top && currentY <= rect.bottom;
+
+  if (!isInsideX || !isInsideY) {
+    // 超出范围
+    startModel.value = false;
+    startOverModel.value = true;
+    talkText.value = mouseOverText;
+  } else {
+    // 移动中
+    startModel.value = true;
+    startOverModel.value = false;
+    talkText.value = startText;
+  }
 };
 
 const mouseOver = () => {
-	startModel.value = false;
-	startOverModel.value = true;
-	talkText.value = mouseOverText;
+  startModel.value = false;
+  startOverModel.value = true;
+  talkText.value = mouseOverText;
 };
 
 const mouseIn = () => {
-	startModel.value = true;
-	startOverModel.value = false;
-	talkText.value = startText;
+  startModel.value = true;
+  startOverModel.value = false;
+  talkText.value = startText;
 };
 
 const initTalkModel = () => {
-	normalModel.value = true;
-	startModel.value = false;
-	startOverModel.value = false;
-	talkText.value = normalText;
+  normalModel.value = true;
+  startModel.value = false;
+  startOverModel.value = false;
+  talkText.value = normalText;
 
-	isShowLottieR.value = false;
-	lottieText.value = lottieTextNormal;
+  isShowLottieR.value = false;
+  lottieText.value = lottieTextNormal;
 };
 
 // ==================== 语音相关 =
 const yimoAudioTransRef = ref(null);
 const options = ref({
-	receordingDuration: 20,
-	APPID: "d6d15e17",
-	API_SECRET: "NmIyZWFjYzMxNTEwMmRjZTE0YjcxNzIw",
-	API_KEY: "172b9f1528efa9442956f2f26f34ead0",
+  receordingDuration: 20,
+  APPID: "d6d15e17",
+  API_SECRET: "NmIyZWFjYzMxNTEwMmRjZTE0YjcxNzIw",
+  API_KEY: "172b9f1528efa9442956f2f26f34ead0",
 });
 
 const countDown = (duration) => {
-	console.log("countDown", duration);
+  console.log("countDown", duration);
 };
 
 const resultMsg = (msg) => {
-	console.log("resultMsg", msg);
-	msgText.value = msg;
+  console.log("resultMsg", msg);
+  emits("recordResult", msg);
 };
 
 const onStop = () => {
-	console.log("onStop");
+  console.log("onStop");
 };
 
 const onOpen = () => {
-	console.log("onOpen");
-	showLottieR();
+  console.log("onOpen");
+  showLottieR();
 };
 
 const change = (msg) => {
-	console.log("change", msg);
+  console.log("change", msg);
 };
 
 onMounted(() => {
-	initTalkModel();
+  initTalkModel();
 });
 </script>
 
 <style lang="scss" scoped>
 .speak-container {
-	width: 100%;
-	height: 30rpx;
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	align-items: center;
-	min-height: 300px;
-	background-color: lightgrey;
-
-	.talk {
-		margin-top: 100px;
-		width: 80%;
-		height: 40px;
-		line-height: 40px;
-		border-radius: 20px;
-		font-size: 20px;
-		text-align: center;
-		font-weight: bold;
-		position: relative;
-
-		.lottie {
-			position: absolute;
-			top: -85px;
-			left: 0;
-		}
-		.lottie-text {
-			width: 100%;
-			font-size: 14px;
-			color: #1f1f1f;
-			text-align: center;
-			position: absolute;
-			top: -35px;
-			left: 0;
-		}
-	}
-
-	.normal {
-		color: black;
-		background-color: white;
-	}
-
-	.start {
-		color: white;
-		background-color: blue;
-	}
-
-	.startMouseover {
-		color: black;
-		background-color: red;
-	}
+  width: 100%;
+  height: 30rpx;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  min-height: 300px;
+  background-color: lightgrey;
+
+  .talk {
+    margin-top: 100px;
+    width: 80%;
+    height: 40px;
+    line-height: 40px;
+    border-radius: 20px;
+    font-size: 20px;
+    text-align: center;
+    font-weight: bold;
+    position: relative;
+
+    .lottie {
+      position: absolute;
+      top: -85px;
+      left: 0;
+    }
+    .lottie-text {
+      width: 100%;
+      font-size: 14px;
+      color: #1f1f1f;
+      text-align: center;
+      position: absolute;
+      top: -35px;
+      left: 0;
+    }
+  }
+
+  .normal {
+    color: black;
+    background-color: white;
+  }
+
+  .start {
+    color: white;
+    background-color: blue;
+  }
+
+  .startMouseover {
+    color: black;
+    background-color: red;
+  }
 }
 </style>

pages/demo/test-uview.vue

@@ -4,10 +4,8 @@
       >是日也，天朗气清，惠风和畅，仰观宇宙之大，俯察品类之盛
       是日也，天朗气清，惠风和畅，仰观宇宙之大，俯察品类之盛</text
     >
-    <view class="up-border">
-      夫人之相与，俯仰一世，或取诸怀抱，悟言一室之内；或因寄所托，放浪形骸之外
-    </view>
-    <Speaking />
+    <view class="up-border"> 录音结束后：{{ msg }} </view>
+    <Speaking @recordResult="recordFinish" />
   </view>
 </template>
 
@@ -15,7 +13,12 @@
 import { onMounted, ref } from "vue";
 import Speaking from "../../components/speaking/speaking.vue";
 
-const msg = ref("模版");
+const msg = ref("");
+
+const recordFinish = (res) => {
+  console.log("record finish");
+  msg.value = res;
+};
 
 onMounted(() => {});
 </script>