front/pages/homepages/puppy_chat/puppy_chat.vue

<template>
  <!-- 背景图片-->
  <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 {
      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>