修改对话状态

src/components/pages/aiAddCourse/aiBox.vue

@@ -1,6 +1,6 @@
 <template>
-    <div class="ai_body" v-loading="loading">
-        <div class="ai_body_dialog">
+    <div class="ai_body">
+        <div class="ai_body_dialog" v-loading="loading">
             <div class="dialog_content" :class="{ right: item.role == 2 }" v-for="(item, index) in array" :key="index">
                 <div class="role">
                     <img src="../../../assets/icon/new/role1.png" v-if="item.role == 1">
@@ -51,9 +51,10 @@
             </span>
         </div>
         <div class="ai_body_input">
-            <textarea rows="5" class="binfo_input binfo_textarea" cols v-model="courseText" placeholder="在此输入您想了解的内容"
-                style="padding-right: 86px;"></textarea>
-            <div class="c_pub_button_confirm" @click="addContent">发送</div>
+            <textarea rows="3" @keyup.enter="addContent" class="binfo_input binfo_textarea" cols v-model.trim="courseText" placeholder="在此输入您想了解的内容"
+            ></textarea>
+            <div class="c_pub_button_confirm" v-if="!loading && courseText"  @click="addContent">发送</div>
+            <div class="c_pub_button_confirm" @click="promptTit" v-else>发送</div>
         </div>
     </div>
 </template>
@@ -99,10 +100,26 @@ export default {
         },
     },
     methods: {
+        promptTit(){
+            if (!this.loading && !this.courseText) {
+                this.$message({
+                    message: '请输入您想要了解的内容',
+                    type: 'warning'
+                });
+            }else{
+                this.$message({
+                    message: '请回答完毕后再次发送',
+                    type: 'warning'
+                });
+            }
+        },
         addContent() {
             if (this.courseText) {
+
                 this.loading = true
                 this.array.push({ text: this.courseText, role: 2 })
+                this.courseText = ''
+
                 setTimeout(() => {
                     this.loading = false
                     if (this.courseText == '请告诉我任务四该具体如何实施？') {
@@ -212,7 +229,6 @@ export default {
                         this.array.push({ text: '请输入正确的文案', role: 1 })
                     }
                     // this.array.push({text: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx', role: 1})
-                    this.courseText = ''
                 }, 5000);
             }
         },
@@ -319,15 +335,24 @@ export default {
 }
 
 .ai_body_input {
-    position: relative;
+    /* position: relative; */
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: end;
 }
 
 .c_pub_button_confirm {
-    position: absolute;
+    /* position: absolute;
     bottom: 13px;
-    right: 13px;
+    right: 13px; */
+    margin-top: 10px;
+    width: 80px;
+    display: flex;
+    justify-content: center;
 }
 
+
 .ai_body_dialog {
     padding: 10px 0;
     box-sizing: border-box;
@@ -343,7 +368,7 @@ export default {
 }
 
 .dialog_content+.dialog_content {
-    margin-top: 20px;
+    margin: 15px 0;
 }
 
 .dialog_content.right {
@@ -369,13 +394,14 @@ export default {
 }
 
 .dialog_content .content {
-    padding: 5px;
+    padding: 10px 5px;
     border-radius: 5px;
     width: 100%;
     word-break: break-word;
     box-sizing: border-box;
     white-space: pre-line;
     max-width: 100%;
+    background: #F7F7F7;
     overflow: hidden;
 }