front/pages/homepages/puppy_chat/puppy_chat.vue

<template>
  <!-- 背景图片-->
  <image class="background" src="@/static/homepages/puppy_chat/pictures/chat_image.png"></image>
  <scroll-view scroll-y="true" id="chat_scroll" :scroll-top="scrollTop" scroll-with-animation="true">
    <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 :class="['message_content', message.sender === 'user' ? 'user_message_content' : 'ai_message_content']">
          <!-- <text>{{ message.message }}</text> -->
          <zero-markdown-view :markdown="message.message"></zero-markdown-view>
        </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>
    </view>
  </scroll-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 {
      token:uni.getStorageSync("access_token"),
      input_message: '',
      send_message:'',
      send_messages: [],  // 存储消息的数组
      conversation_id: 'e97ec0f2-2a94-42e7-b6db-b04883d349e8',//默认的聊天回话id
      answer: '',  // AI的回答
      scrollTop : 0,	//滚动的高度
      totalHeight:0,
      scrollViewHeight:0,
    };
  },
  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': this.token
      },
      data: {

      },
      success: (res) => {
        console.log("请求成功！请求数据是", res);
        this.conversation_id= res.data.data.conversation_id;
      },
      error: (res) => {
        console.log("请求失败！请求数据是", res);
      }
    });
    this.send_messages.push({
      sender: 'ai',  // 标记为用户消息
      message:"我是fit journey的专属AI小助手，有什么问题都可以问我哦~"
    });
  },

  mounted() {
    //获取滚动区域的大小
    const that = this
    const query = uni.createSelectorQuery().in(that)
    query.select('#chat_scroll').boundingClientRect()
    query.exec((res)=>{
      that.scrollViewHeight = res[0].height
    })
  },

  methods: {
    setScrollTop(){
      //设置滚动高度，滚动到新的回答
      setTimeout(()=>{	//防止元素还没有渲染
        const that = this
        const query = uni.createSelectorQuery().in(that)
        query.selectAll('.chat_area').boundingClientRect()
        query.exec((res)=>{
          res[0].forEach((item)=>{
            that.totalHeight = that.totalHeight+item.height
          })
          if (that.totalHeight > that.scrollViewHeight) { //判断子元素高度是否大于显示高度
            that.scrollTop = that.totalHeight - that.scrollViewHeight
          }
        })
      },100)
    },
    handleSendMessage() {
      // 获取发送消息的用户的消息数量
      const userMessageCount = this.send_messages.filter(msg => msg.sender === 'user').length;

      if (userMessageCount >= 1) {
        // 如果用户已经发送了2条消息，提示用户不能再发送
        uni.showToast({
          title: "AI 可是要交钱的哦,最多发送1条消息,刷新之后再试试吧~",
          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 = "";  // 清空输入框

          this.setScrollTop() //滚动条滚动

          // 模拟向后端请求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: app.globalData.fit_journey_ai_address + '/ai/chat-with-no-stream',//TODO:后期这里改成服务器地址！
        method: 'POST',
        header: {
          'content-type': 'application/x-www-form-urlencoded',
          'Authorization': this.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
          });
          this.setScrollTop()	//滚动条滚动
        },
        error: (res) => {
          console.log("请求失败！请求数据是", res);
        }
      });
    }
  }
}
</script>

<style lang="scss">
@import "@/static/homepages/puppy_chat/css/puppy_chat.scss";
</style>