完成AI聊天界面

App.vue

@@ -37,11 +37,13 @@ export default {
     fit_journey_admin_address: 'http://47.122.61.54:8085',//TODO:已完成
 
     // TODO: 后期需要把 token 更换成从 localStorage 中获取
-    token: 'eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiIxODUxOTgwMTI1O' +
-        'TYxMjMyMzg1IiwiaXNzIjoiZml0am91cm5leSIsInVzZXJuY' +
-        'W1lOiI6InRlc3QiLCJyb2xlczoiOiJ1c2VyIiwiaWQ6IjoxODUxOTgwM' +
-        'TI1OTYxMjMyMzg1LCJpYXQiOjE3MzA1NDEzMTksImV4cCI6MzE3' +
-        'MDkwNTQxMzE5fQ.tdP-uBa-oKVJjGJlN70tzxXCa4usXOev6xf_fgZhWD4'
+    token: 'eyJhbGciOiJIUzI1NiJ9.eyJzdW' +
+        'IiOiIxODU5MDU4ODM2NDQ3NDk4MjQyIiwiaXNz' +
+        'IjoiZml0am91cm5leSIsInVzZXJuYW1lOiI6InV' +
+        'zZXIiLCJyb2xlczoiOiJVU0VSX1JPTEUiLCJpZDoiOj' +
+        'E4NTkwNTg4MzY0NDc0OTgyNDIsImlhdCI6MTczMjA4NjA4Ny' +
+        'wiZXhwIjozMTcwOTIwODYwODd9.rxLV3cUtwUKwsdpNq2yf2O' +
+        '5Fte2hX4OqvcwN9mo6y9w'
   },
 
   components: {

components/tarbar_home/tarbar_home.vue

@@ -3,7 +3,6 @@
 
     <view class="bar_background"></view>
     <!-- Home 图标 -->
-
     <image class="pick_up_home"
            src="/static/components/tarbar/pictures/home_picked_up.png"
            @click="pick_up_home">

components/tarbar_puppy_chat/tarbar_puppy_chat.vue

@@ -109,7 +109,7 @@ export default {
   }
 }
 .bar_background{
-  position: absolute;
+  position: fixed;
   width: 95%; /* 宽度占95% */
   height: 10%; /* 高度 */
 
@@ -122,14 +122,14 @@ export default {
 }
 
 .home, .community, .assistant, .user {
-  position: absolute;
+  position: fixed;
   width: 15%;
   height: 6%;
   bottom: 2%;
   transition: opacity 1s ease; /* 添加渐变过渡 */
 }
 .pick_up_home, .pick_up_community, .pick_up_assistant, .pick_up_user {
-  position: absolute;
+  position: fixed;
   width: 17%;
   height: 10%;
   bottom: 2%;

pages.json

@@ -212,12 +212,12 @@
       }
     }*/
     /*-----------------------------------------------------------------------主界面----------------------------------------------------------*/
-    /* {
+     {
       "path": "pages/homepages/puppy_chat/puppy_chat",
       "style": {
         "navigationStyle": "custom"
       }
-    }*/
+    },
     /*----------------------------------------------------------------------聊天界面--------------------------------------------------------*/
     /* {
       "path": "pages/homepages/community/community",
@@ -226,12 +226,12 @@
       }
     },*/
     /*---------------------------------------------------------------------社区界面------------------------------------------------------*/
-    {
+   /* {
       "path": "pages/homepages/user/user/user",
       "style": {
         "navigationStyle": "custom"
       }
-    },
+    },*/
     /*---------------------------------------------------------------------个人信息界面以及跳转的几个界面----------------------------------------------------*/
     /*
     {

pages/homepages/puppy_chat/puppy_chat.vue

@@ -1,20 +1,152 @@
 <template>
-  <view>
-    <text>这个是puppy_chat界面</text>
-    <tarbar_puppy_chat></tarbar_puppy_chat>
-	
-	
+  <!-- 背景图片-->
+  <image class="background" src="@/static/homepages/puppy_chat/pictures/chat_image.png"></image>
+
+  <view class="chat">
+    <!-- 渲染聊天消息气泡 -->
+    <view v-for="(message, index) in send_messages" :key="index" :class="['chat_area', message.sender === 'user' ? 'user_message' : 'ai_message']">
+      <!-- 头像部分（放在气泡外部） -->
+      <view v-if="message.sender === 'ai'" class="avatar_container ai_avatar_container">
+        <image class="ai_avatar" src="@/static/homepages/puppy_chat/pictures/ai_avatar.png"></image>
+      </view>
+
+      <view v-if="message.sender === 'user'" class="avatar_container user_avatar_container">
+        <image class="user_avatar" src="@/static/homepages/puppy_chat/pictures/user_avatar.png"></image>
+      </view>
+
+      <!-- 消息内容 -->
+      <view class="message_content">
+        <text>{{ message.message }}</text>
+      </view>
+    </view>
+  </view>
+
+
+
+  <!-- 输入框部分 -->
+  <view class="input_box">
+    <image class="input_box_background" src="@/static/homepages/puppy_chat/pictures/input_box_background.png"></image>
+    <image class="send_button" src="@/static/homepages/puppy_chat/pictures/send_button.png" @click="handleSendMessage"></image>
+    <input class="input_words" type="text" placeholder="fit journey-Ai能回答你任何问题" v-model="input_message"></input>
   </view>
+
+  <!-- 底部菜单栏部分 -->
+  <tarbar_puppy_chat></tarbar_puppy_chat>
 </template>
 
 <script>
 export default {
   data() {
-    return {};
+    return {
+      input_message: '',
+      send_message:'',
+      send_messages: [],  // 存储消息的数组
+      conversation_id: 'e97ec0f2-2a94-42e7-b6db-b04883d349e8',
+      answer: '',  // AI的回答
+    };
+  },
+ /* onLoad() {
+    //向后端获取conversation_id
+    const app = getApp();
+    console.log(app.globalData.token);
+    console.log(app.globalData.fit_journey_ai_address);
+
+    // 向后端发送请求
+    uni.request({
+      url: app.globalData.fit_journey_ai_address + '/ai/create-conversation',
+      method: 'POST',
+      header: {
+        'content-type': 'application/x-www-form-urlencoded',
+        'Authorization': app.globalData.token // TODO：暂时写为临时的token 后期替换
+      },
+      data: {
+
+      },
+      success: (res) => {
+        console.log("请求成功！请求数据是", res);
+        this.conversation_id= res.data.data.conversation_id;
+      },
+      error: (res) => {
+        console.log("请求失败！请求数据是", res);
+      }
+    });
+  },*/
+  methods: {
+    handleSendMessage() {
+      // 获取发送消息的用户的消息数量
+      const userMessageCount = this.send_messages.filter(msg => msg.sender === 'user').length;
+
+      if (userMessageCount >= 2) {
+        // 如果用户已经发送了2条消息，提示用户不能再发送
+        uni.showToast({
+          title: "AI 可是要交钱的哦,最多发送两条消息",
+          icon: "none",
+        });
+      } else {
+        // 如果用户未发送2条消息，继续发送
+        if (this.input_message.trim() !== "") {
+          // 用户发送的消息
+          this.send_messages.push({
+            sender: 'user',  // 标记为用户消息
+            message: ":" + this.input_message
+          });
+          this.send_messages.push({
+            sender: 'ai',  // 标记为用户消息
+            message: ":正在分析您的问题，等待puppy一会呢"
+          });
+
+          this.send_message=this.input_message;
+          this.input_message = "";  // 清空输入框
+
+          // 模拟向后端请求AI回答
+          this.fetchAIResponse();
+        } else {
+          // 如果输入为空，提示用户
+          uni.showToast({
+            title: "请输入内容后发送",
+            icon: "none",
+          });
+        }
+      }
+    },
+    fetchAIResponse() {
+      const app = getApp();
+      console.log(app.globalData.token);
+      console.log(app.globalData.fit_journey_ai_address);
+
+      // 向后端发送请求
+      uni.request({
+        url: 'http://localhost:8081' + '/ai/chat-with-no-stream',//TODO:后期这里改成服务器地址！
+        method: 'POST',
+        header: {
+          'content-type': 'application/x-www-form-urlencoded',
+          'Authorization': app.globalData.token // TODO：暂时写为临时的token 后期替换
+        },
+        data: {
+          conversationId: this.conversation_id,
+          ask: this.send_message,
+        },
+        success: (res) => {
+
+          console.log("请求成功！请求数据是", res.data.data);
+          //这里请求数据成功！
+          this.answer = res.data.data;
+          // AI的消息
+          this.send_messages.pop();//弹出正在加载问题的字样  马上放入该问题
+          this.send_messages.push({
+            sender: 'ai',  // 标记为AI消息
+            message:':'+ this.answer
+          });
+        },
+        error: (res) => {
+          console.log("请求失败！请求数据是", res);
+        }
+      });
+    }
   }
 }
 </script>
 
 <style lang="scss">
-
+@import "@/static/homepages/puppy_chat/css/puppy_chat.scss";
 </style>

static/homepages/puppy_chat/css/puppy_chat.scss

@@ -0,0 +1,109 @@
+.background {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 78%;
+  z-index: -3;
+}
+
+.chat {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 79%;
+  z-index: -1;
+  padding: 10px;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+  display: flex;
+  flex-direction: column;  /* 消息从上往下显示 */
+
+}
+
+.chat_area {
+  margin-bottom: 10px;
+  padding: 10px;
+  border-radius: 15px;
+  max-width: 75%;
+  word-wrap: break-word;
+  display: flex;
+  flex-direction: row;  /* 头像和消息水平排列 */
+  align-items: center;  /* 内容垂直居中 */
+}
+
+.user_message {
+  background-color: #7879F1; /* 用户消息气泡背景色 */
+
+  color: white;
+  margin-top: 22%;  /* 让用户的消息气泡靠右 */
+  margin-right: 5%;  /* AI消息靠左 */
+  margin-left: auto;  /* 让AI的消息气泡靠右 */
+  text-align: left;
+  word-break: break-word;  /* 自动换行 */
+}
+
+.ai_message {
+  background-color: #e5e5ea; /* AI消息气泡背景色 */
+  color: black;
+  margin-left: 2%;  /* 用户消息靠右 */
+  margin-right: auto;  /* 让用户的消息气泡靠左 */
+  text-align: left;
+  word-break: break-word;  /* 自动换行 */
+}
+
+.avatar_container {
+  display: flex;
+  right: 10%;
+  justify-content: center;
+  align-items: center;
+}
+
+.ai_avatar_container {
+  margin-right: 10px;  /* AI头像与气泡的间距 */
+}
+
+.user_avatar_container {
+  margin-left: 10px;  /* 用户头像与气泡的间距 */
+}
+
+.ai_avatar, .user_avatar {
+  right: 5%;
+  width: 40px;  /* 头像的大小 */
+  height: 40px;  /* 头像的大小 */
+  border-radius: 50%;  /* 头像圆形 */
+}
+
+.message_content {
+  max-width: 80%;  /* 限制消息气泡的最大宽度 */
+}
+
+.input_box {
+  position: absolute;
+  width: 100%;
+  height: 9%;
+  top: 79%;
+}
+
+.input_box_background {
+  position: absolute;
+  width: 98%;
+  height: 90%;
+  left: 1%;
+  top: 5%;
+}
+
+.input_words {
+  position: absolute;
+  width: 70%;
+  height: 80%;
+  left: 5%;
+  top: 10%;
+}
+
+.send_button {
+  position: absolute;
+  width: 12%;
+  height: 70%;
+  left: 84%;
+  top: 15%;
+}