MedSmartApp/pages/chat/index.vue

<template>
  <view class="chat-container">
    <scroll-view 
      class="messages" 
      scroll-y="true" 
      :scroll-top="scrollTop" 
      @scrolltolower="onScrollToLower"
    >
      <view 
        v-for="(msg, index) in messages"
        :key="index"
        :class="['message', msg.role === 'user' ? 'user-message' : 'ai-message']"
      >
        <text>{{ msg.content }}</text>
      </view>
      <view v-if="loading" class="message ai-message">
        <text class="loading-dots"></text>
      </view>
    </scroll-view>
    <view class="input-area">
      <input
        v-model="inputMessage"
        @confirm="sendMessage"
        placeholder="和小智聊天吧～"
        :disabled="loading"
        placeholder-class="input-placeholder"
      />
      <button @click="sendMessage" :disabled="!inputMessage || loading">
        {{ loading ? '思考中' : '发送' }}
      </button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      messages: [],
      inputMessage: '',
      loading: false,
      scrollTop: 0
    }
  },
  methods: {
    async sendMessage() {
      if (!this.inputMessage.trim() || this.loading) return;

      const userMessage = this.inputMessage;
      this.messages.push({ role: 'user', content: userMessage });
      this.inputMessage = '';
      this.loading = true;
      
      // 滚动到底部
      this.$nextTick(() => {
        this.scrollTop = 99999;
      });

      try {
        // 使用 uni-app 的网络请求 API
        const response = await uni.request({
          url: 'http://localhost:8080/ai/chat',
          method: 'GET',
          data: {
            message: userMessage
          }
        });
        
        // 处理返回数据
        const text = response.data || '抱歉，小智暂时无法回答';
        this.messages.push({ role: 'assistant', content: text });
      } catch (error) {
        console.error('请求出错:', error);
        this.messages.push({
          role: 'assistant',
          content: '哎呀，小智暂时无法连接，请稍后再试～'
        });
      } finally {
        this.loading = false;
        // 确保回复后滚动到底部
        this.$nextTick(() => {
          this.scrollTop = 99999;
        });
      }
    },
    onScrollToLower() {
      // 处理滚动到底部事件
    }
  },
  onReady() {
    // 初始欢迎语
    this.messages.push({
      role: 'assistant',
      content: '你好！我是小智，有什么可以帮您的？'
    });
    
    // 滚动到底部
    this.$nextTick(() => {
      this.scrollTop = 99999;
    });
  }
}
</script>

<style scoped>
/* 现代聊天界面样式 */
:root {
  --primary: #4CAF50;
  --bg: #f5f5f5;
  --user-bg: #e3f2fd;
  --ai-bg: #ffffff;
  --tabbar-height: 50px;
}

.chat-container {
  max-width: 800px;
  margin: 0 auto;
  background: white;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.message {
  max-width: 70%;
  padding: 12px 16px;
  border-radius: 18px;
  animation: fadeIn 0.3s ease;
}

.user-message {
  background: var(--user-bg);
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}

.ai-message {
  background: var(--ai-bg);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.loading-dots {
  display: inline-block;
  font-size: 24px;
}
.loading-dots::after {
  content: '...';
  animation: dots 1.5s infinite;
}

.input-area {
  padding: 20px;
  border-top: 1px solid #eee;
  display: flex;
  gap: 10px;
}

input {
  flex: 1;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 25px;
  font-size: 16px;
  outline: none;
  transition: 0.3s;
}
input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(76,175,80,0.1);
}

button {
  padding: 12px 24px;
  background: var(--primary);
  border: none;
  border-radius: 25px;
  color: white;
  cursor: pointer;
  transition: 0.3s;
}
button:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.input-placeholder {
  color: #999;
}

/* 动画 */
@keyframes dots {
  0%, 20% { content: '.'; }
  40% { content: '..'; }
  60%, 100% { content: '...'; }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
</style>