[feat][ai生涯访谈][聊天接口调试]

src/views/xjc-integratedmachine/environment/ai_interview/ai_career_interview_chat.vue

@@ -101,8 +101,8 @@
                     <div @click="sendMessage" :disabled="isSending" type="primary">发送</div>
                 </div>
             </div>
-            <div class="iat-box">
-                <img>
+            <div class="iat-box-default" @click="iatRecognizeVoice">
+                <img class="recognize-img" :src="iatVoiceOpen? recognize:microphone">
             </div>
         </div>
     </div>
@@ -127,6 +127,8 @@
     import msgExpand from '@/assets/images/environment/ai-career-msg-expand.png'
     import mutePlayer from '@/assets/images/environment/ai-career-mute-player.png'
     import playingPlayer from '@/assets/images/environment/ai-career-playing-player.png'
+    import microphone from '@/assets/images/environment/ai-career-microphone.png'
+    import recognize from '@/assets/images/environment/ai-career-recognize.gif'
     const router = useRouter()
     const route = useRoute()
 
@@ -164,7 +166,6 @@
             pageSize: 10000,
             occupationId: param.occupationId,
         }
-        console.log("=======>"+JSON.stringify(queryForm))
         getCareerChatRecordList(queryForm).then(resp =>{
             chatRecordList.value = resp.rows;
             loadingHistoryRecord.value = false
@@ -314,9 +315,7 @@
 
     /* 语音识别 ↓*/
     // 语音识别按钮状态
-    let iatButtonFlag = ref(false)
-    // 控制录音弹窗
-    let iatVoiceOpen = false
+    let iatVoiceOpen = ref(false)
     // 是否开始录音
     let iatStartVoiceStatus = false
     // 识别中状态
@@ -366,15 +365,27 @@
             console.log('录音结束，停止定时器');
             clearInterval(iatCountdownInterval);
             iatStartVoiceStatus = false;
+            iatVoiceOpen.value = false;
         };
 
     }
 
+    function iatRecognizeVoice(){
+        if(iatVoiceOpen.value){
+            iatCloseVoiceOpen();
+        }else{
+            iatStartVoice();
+        }
+    }
+
+    /*
+    * 开始录音
+    * */
     async function iatStartVoice() {
         if (iatLoading) {
             return;
         }
-        iatVoiceOpen = true;
+        iatVoiceOpen.value = true;
         await iatPlayIatVoice();
     }
 
@@ -403,7 +414,7 @@
      * 关闭录音弹窗
      */
     function iatCloseVoiceOpen() {
-        iatVoiceOpen = false;
+        iatVoiceOpen.value = false;
         iatStartVoiceStatus = false;
         if (iatRecorder) {
             iatRecorder.stop();
@@ -988,5 +999,27 @@
             }
         }
     }
+    .iat-box-default{
+        position: absolute;
+        right: 10vw;
+        top:50vh;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+        width: 200px;
+        height: 200px;
+        background: linear-gradient( 180deg, #F8F8F8 0%, #EAEAEA 100%);
+        box-shadow: 0px 8px 20px 0px rgba(0,0,0,0.1);
+        border-radius: 227px 227px 227px 227px;
+        /*border: 1px solid;*/
+        border-image: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.13)) 1 1;
+        .recognize-img{
+            height: 150px;
+            width: 150px;
+        }
+    }
+    .iat-box-active{
 
+    }
 </style>