From 609b93dd64c5c52f0fb3cf20a9550300a6331e1f Mon Sep 17 00:00:00 2001
From: liuyalei <liuyl@ydool.com>
Date: Thu, 7 Dec 2023 14:36:10 +0800
Subject: [PATCH] addd

---
 src/views/IndexChat.vue | 182 ++++++++++++++++++++++++++++++----------
 1 file changed, 139 insertions(+), 43 deletions(-)

diff --git a/src/views/IndexChat.vue b/src/views/IndexChat.vue
index 626a557..54fe5b8 100644
--- a/src/views/IndexChat.vue
+++ b/src/views/IndexChat.vue
@@ -1,12 +1,43 @@
 <template>
     <div class="c_body">
-        <div class="message-container">
+        <!--  <div class="message-container">
             <div class="Left">
                 <div class="Left_mesg">
                     <h4>嘿，你好呀</h4>
                     <h4>我是你的智能生活助手~</h4> 您可以点击下方快捷方式选择问题，或直接编辑问题发送给我哟
                 </div>
             </div>
+            <div class="Left">
+                <div class="card">
+                    <div class="main_card">
+                        <div class="card_top">
+                            <img src="../assets/5.png" alt="">
+                            <div class="desc">
+                                <div class="name">象山县中医医院（新院区）</div>
+                                <div class="addr">宁波市象山县南部新城新洋路...</div>
+                                <div class="tag_wrp">
+                                    <div class="tag">医保定点</div>
+                                    <div style="width: 4px;"></div>
+                                    <div class="tag">医保定点</div>
+                                </div>
+                                <div class="detail"> 象山中医院建于1985年3月，是一所集中医、中西医结合，医疗、预防、康复于一体的非...</div>
+                            </div>
+                        </div>
+                        <div class="card_botm">
+                            <div class="card_bt">换一家医院</div>
+                            <div class="split_line"></div>
+                            <div class="card_bt">帮我预约该医院</div>
+                        </div>
+                    </div>
+                    <div class="prise_wrp">
+                        <div class="prise">
+                            <img src="../assets/1.png" alt="">
+                            <div class="spl_line"></div>
+                            <img src="../assets/2.png" alt="">
+                        </div>
+                    </div>
+                </div>
+            </div>
             <div class="Right">
                 <div class="Right_mesg">
                     骨折去哪家医院
@@ -20,10 +51,7 @@
                     基于您目前的地理位置、时间、医院号源等多种因素为您推荐如下结果。您还可根据自身偏好重新选择，继续为您推荐；如偏好因素不在其列，可继续提出您的需求。
                 </div>
             </div>
-            <!--            
-            <div class="Left_mesg"> 基于您目前的地理位置、时间、医院号源等多种因素为您推荐如下结果。您还可根据自身偏好重新选择，继续为您推荐；如偏好因素不在其列，可继续提出您的需求。</div> -->
-
-            <div class="card">
+             <div class="card">
                 <div class="main_card">
                     <div class="card_top">
                         <img src="../assets/5.png" alt="">
@@ -52,10 +80,54 @@
                     </div>
                 </div>
             </div>
-
-
+        </div> -->
+        <div class="message-container">
+            <div class="message" v-for="(message, index) in messages" :key="message.id">
+                <div class="Left" v-if="!message.isMe">
+                    <div class="Left_mesg">
+                        <div v-if="message.type == 'txt'" class="txt txt_l"> {{ message.text }}</div>
+                        <div v-else-if="message.type == 'card'" class="card">
+                            <div class="main_card">
+                                <div class="card_top">
+                                    <img src="../assets/5.png" alt="">
+                                    <div class="desc">
+                                        <div class="name">象山县中医医院（新院区）</div>
+                                        <div class="addr">宁波市象山县南部新城新洋路...</div>
+                                        <div class="tag_wrp">
+                                            <div class="tag">医保定点</div>
+                                            <div style="width: 4px;"></div>
+                                            <div class="tag">医保定点</div>
+                                        </div>
+                                        <div class="detail"> 象山中医院建于1985年3月，是一所集中医、中西医结合，医疗、预防、康复于一体的非...</div>
+                                    </div>
+                                </div>
+                                <div class="card_botm">
+                                    <div class="card_bt">换一家医院</div>
+                                    <div class="split_line"></div>
+                                    <div class="card_bt">帮我预约该医院</div>
+                                </div>
+                            </div>
+                            <div class="prise_wrp">
+                                <div class="prise">
+                                    <img src="../assets/1.png" alt="">
+                                    <div class="spl_line"></div>
+                                    <img src="../assets/2.png" alt="">
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="Right" v-else>
+                    <div class="Right_mesg">
+                        <div v-if="message.type == 'txt'" class="txt txt_r"> {{ message.text }}</div>
+                    </div>
+                </div>
+            </div>
         </div>
-
+        <!--  <div v-for="(message, index) in messages" :key="message.id" class="message">
+            <div v-if="message.isMe">{{ message.text }}</div>
+            <div v-else>{{ message.text }}</div>
+        </div> -->
         <div class="recomand">
             <div class="recomand_itm">公积金查询</div>
             <div class="recomand_itm">2024放假安排</div>
@@ -65,18 +137,44 @@
 
         <div class="c_bottom">
             <img src="../assets/3.png">
-
-            <Input type="text" placeholder="有问题尽管问我~" class="sendinput" />
-
+            <input v-model="inputText" type="text" placeholder="有问题尽管问我~" class="sendinput" />
             <div class="w_icon">
                 <img src="../assets/4.png" alt="">
             </div>
-            <div class="send">发送</div>
+            <div class="send" @click="sendMessage" @keyup.enter="sendMessage">发送</div>
         </div>
 
     </div>
 </template>
-  
+<script setup>
+import { ref, reactive } from 'vue'
+let inputText = ref('')
+let messages = reactive([
+    { id: 1, type: 'txt', text: '您可以点击下方快捷方式选择问题，或直接编辑问题发送给我哟', isMe: false },
+    { id: 2, type: 'txt', text: 'Hi', isMe: true },
+    { id: 3, type: 'card', text: 'Hi', isMe: true },
+]);
+let sendMessage = () => {
+    console.log("dddd", inputText.value)
+    /*  setTimeout(() => {
+         console.log("inputText.value:", inputText.value);
+     }, 0); */
+
+    if (inputText.value.trim()) {
+        console.log("sendMessage",inputText.value.trim())
+        messages.push({ id: Date.now(), text: inputText.value, isMe: true, type: 'txt' });
+        console.log("messages",messages)
+        scollToButtom();
+        inputText.value = '';
+    }
+}
+let scollToButtom = () => {
+    /*   $nextTick(() => {
+            let chatform= document.getElementById('chatform') // 获取对象
+            chatform.scrollTop = chatform.scrollHeight // 滚动高度
+          }) */
+}
+</script>
 <style lang="scss" scoped>
 ::-webkit-input-placeholder {
     color: #999999;
@@ -89,17 +187,14 @@
     border-radius: 21px;
     border: 0px;
     background: #F5F5FB;
-    // background: transparent;
     padding: 0px 12px;
     padding-left: 36px;
-    // margin-left: 60px;
     position: absolute;
     left: 60px;
     z-index: 1;
 }
 
 .sendinput:focus {
-    // outline: 1px solid #fff; 
     outline: 1px solid #4379FF;
 }
 
@@ -110,18 +205,7 @@
     padding-right: 59px;
 
     .Left_mesg {
-        min-height: 44px;
-        background: #fff;
-        border-radius: 0px 28px 28px 28px;
-        padding: 10px 16px;
-        font-size: 14px;
-        font-family: PingFang SC, PingFang SC;
-        font-weight: 400;
-        color: #333333;
-        box-sizing: border-box;
         margin-bottom: 16px;
-        // display: inline-block;
-        // float: left;
     }
 }
 
@@ -132,17 +216,7 @@
     padding-left: 59px;
 
     .Right_mesg {
-        min-height: 44px;
-        background: #4F82FF;
-        border-radius: 28px 0px 28px 28px;
-        padding: 10px 16px;
-        font-size: 14px;
-        font-family: PingFang SC, PingFang SC;
-        font-weight: 400;
-        color: #FFFFFF;
-        box-sizing: border-box;
         margin-bottom: 16px;
-        // display: inline-block;
     }
 }
 
@@ -180,7 +254,7 @@
     height: 216px;
     // margin: 0 auto;
     // padding-left: 16px;
-    margin-left: 16px;
+    // margin-left: 16px;
 
     .main_card {
         border-radius: 16px;
@@ -298,6 +372,28 @@
 
 }
 
+.txt {
+    min-height: 44px;
+    padding: 10px 16px;
+    font-size: 14px;
+    font-family: PingFang SC, PingFang SC;
+    box-sizing: border-box;
+    font-weight: 400;
+}
+
+.txt_l {
+    background: #fff;
+    border-radius: 0px 12px 12px 12px;
+    color: #333333;
+}
+
+.txt_r {
+    border-radius: 12px 12px 0px 12px;
+    background: #4F82FF;
+    color: #fff;
+
+}
+
 /*  @media (min-width: 1024px) {
     .about {
       min-height: 100vh;
@@ -306,11 +402,6 @@
     }
   } */
 .c_body {
-    // position: relative;
-    // background-color: rgb(245, 245, 251);
-    // width: 100vw;
-    // min-height: 100vh;
-
     .message-container {
         height: calc(100vh - 124px);
         overflow: auto;
@@ -319,6 +410,11 @@
         position: relative;
         padding-top: 20px;
         padding-bottom: 45px;
+
+        .message {
+            /* width: 100%;
+            height: 100%; */
+        }
     }
 
     .c_bottom {