hms/apps/miniprogram-uniapp/src/pages-sub/doctor/consultation/detail/index.vue

<template>
  <view :class="['chat-page', elderClass]">
    <!-- Header -->
    <view class="chat-header">
      <text class="chat-header__title">{{ session?.subject || '在线咨询' }}</text>
      <text v-if="isOpen" class="chat-header__close" @tap="handleClose">关闭会话</text>
    </view>

    <!-- Loading -->
    <Loading v-if="loading" text="加载中..." />

    <!-- Error -->
    <ErrorState v-else-if="error" :text="error" @retry="loadData" />

    <!-- 消息列表 -->
    <scroll-view v-else
      scroll-y
      class="chat-messages"
      :scroll-into-view="scrollInto"
      scroll-with-animation
    >
      <template v-if="messages.length > 0">
        <view
          v-for="(msg, idx) in messages"
          :key="msg.id"
          :id="`msg-${idx + 1}`"
          :class="['msg-row', msg.sender_role === 'doctor' ? 'msg-row--self' : '']"
        >
          <view :class="['msg-bubble', msg.sender_role === 'doctor' ? 'msg-bubble--self' : 'msg-bubble--other']">
            <text class="msg-text">{{ msg.content }}</text>
            <text class="msg-time">{{ formatTime(msg.created_at) }}</text>
          </view>
        </view>
      </template>
      <view v-else class="chat-empty">
        <text class="chat-empty__text">暂无消息，发送第一条消息开始对话</text>
      </view>
    </scroll-view>

    <!-- 输入栏（会话进行中） -->
    <view v-if="!loading && !error && isOpen" class="chat-input-bar">
      <input
        class="chat-input"
        placeholder="输入消息..."
        :value="inputText"
        @input="(e: any) => inputText = e.detail.value"
        confirm-type="send"
        @confirm="handleSend"
        :disabled="sending"
      />
      <view
        :class="['chat-send-btn', (!inputText.trim() || sending) ? 'chat-send-btn--disabled' : '']"
        @tap="handleSend"
      >
        <text class="chat-send-btn__text">{{ sending ? '...' : '发送' }}</text>
      </view>
    </view>

    <!-- 已关闭提示 -->
    <view v-else-if="!loading && !error" class="chat-closed-bar">
      <text class="chat-closed-bar__text">会话已关闭</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, nextTick } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import * as doctorApi from '@/services/doctor'
import { useElderClass } from '@/composables/useElderClass'
import Loading from '@/components/Loading.vue'
import ErrorState from '@/components/ErrorState.vue'

const { elderClass } = useElderClass()

const sessionId = ref('')
const session = ref<doctorApi.ConsultationSession | null>(null)
const messages = ref<doctorApi.ConsultationMessage[]>([])
const inputText = ref('')
const sending = ref(false)
const loading = ref(true)
const error = ref('')
const scrollInto = ref('')

const isOpen = computed(() => session.value?.status !== 'closed')

function formatTime(dateStr: string): string {
  const d = new Date(dateStr)
  const h = String(d.getHours()).padStart(2, '0')
  const m = String(d.getMinutes()).padStart(2, '0')
  return `${h}:${m}`
}

function scrollToBottom(count: number) {
  nextTick(() => {
    scrollInto.value = `msg-${count}`
  })
}

async function loadData() {
  if (!sessionId.value) return
  loading.value = true
  error.value = ''
  try {
    const [s, m] = await Promise.all([
      doctorApi.getSession(sessionId.value),
      doctorApi.listMessages(sessionId.value, { page: 1, page_size: 50 }),
    ])
    session.value = s
    messages.value = m.data || []
    scrollToBottom(messages.value.length)
  } catch {
    error.value = '加载失败，请重试'
  } finally {
    loading.value = false
  }
}

async function markRead() {
  if (!sessionId.value) return
  try {
    await doctorApi.markSessionRead(sessionId.value)
  } catch {
    // 静默忽略
  }
}

async function handleSend() {
  const text = inputText.value.trim()
  if (!text || sending.value) return
  sending.value = true
  inputText.value = ''
  try {
    const msg = await doctorApi.sendMessage(sessionId.value, text)
    messages.value = [...messages.value, msg]
    scrollToBottom(messages.value.length)
  } catch {
    uni.showToast({ title: '发送失败', icon: 'none' })
    inputText.value = text
  } finally {
    sending.value = false
  }
}

function handleClose() {
  uni.showModal({
    title: '确认关闭',
    content: '关闭后将无法继续对话，确认关闭？',
    success: async (res) => {
      if (res.confirm) {
        try {
          await doctorApi.closeSession(sessionId.value, session.value?.version ?? 0)
          uni.showToast({ title: '已关闭', icon: 'success' })
          loadData()
        } catch {
          uni.showToast({ title: '操作失败', icon: 'none' })
        }
      }
    },
  })
}

onLoad((query) => {
  sessionId.value = query?.id || ''
  if (sessionId.value) {
    loadData()
    markRead()
  }
})
</script>

<style lang="scss" scoped>
.chat-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: $bg;
}

.chat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 32px;
  background: $card;
  border-bottom: 1px solid $bd;

  &__title {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: var(--tk-font-h1);
    font-weight: 600;
    color: $tx;
  }

  &__close {
    font-size: var(--tk-font-body);
    color: $dan;
    padding: 8px 16px;
  }
}

.chat-messages {
  flex: 1;
  padding: 24px;
}

.msg-row {
  display: flex;
  margin-bottom: 20px;

  &--self {
    justify-content: flex-end;
  }
}

.msg-bubble {
  max-width: 70%;
  padding: 20px 24px;
  border-radius: $r-lg;
  position: relative;

  &--other {
    background: $card;
    border-top-left-radius: 4px;
  }

  &--self {
    background: $pri;
    border-top-right-radius: 4px;
  }
}

.msg-text {
  font-size: var(--tk-font-body-lg);
  color: $tx;
  display: block;
  line-height: 1.6;
  word-break: break-all;

  .msg-bubble--self & {
    color: $card;
  }
}

.msg-time {
  @include serif-number;
  font-size: var(--tk-font-body-sm);
  color: $tx3;
  display: block;
  margin-top: 8px;
  text-align: right;

  .msg-bubble--self & {
    color: rgba(255, 255, 255, 0.7);
  }
}

.chat-empty {
  text-align: center;
  padding: 120px 32px;

  &__text {
    font-size: var(--tk-font-body);
    color: $tx3;
  }
}

.chat-input-bar {
  display: flex;
  align-items: center;
  padding: 16px 24px;
  background: $card;
  border-top: 1px solid $bd;
  @include safe-bottom;
}

.chat-input {
  flex: 1;
  background: $bd-l;
  border-radius: $r;
  padding: 16px 20px;
  font-size: var(--tk-font-body-lg);
  margin-right: 16px;
}

.chat-send-btn {
  background: $pri;
  border-radius: $r;
  padding: 16px 28px;
  flex-shrink: 0;

  &--disabled {
    opacity: 0.5;
  }

  &__text {
    font-size: var(--tk-font-body-lg);
    color: $card;
    font-weight: 500;
  }
}

.chat-closed-bar {
  padding: 24px;
  text-align: center;
  background: $card;
  border-top: 1px solid $bd;

  &__text {
    font-size: var(--tk-font-body);
    color: $tx3;
  }
}
</style>