jty/express-distribution-sys/src/components/Employee/CourierChat.vue

<script setup>
import { ref, onMounted } from 'vue'
import { userSendMsgToWho } from '@/api/user.js'
import { useRoute } from 'vue-router'
import { sendMessageService } from '@/api/employee.js'
import { ElMessage } from 'element-plus'
import router from '@/router'

defineOptions({
  name: 'CourierGetIndex',
})

const route = useRoute()
// 在 onMounted 中初始化 otherName，并调用 GON
onMounted(async () => {
  userName.value = route.params.userName // 初始化 otherName
  await GON() // 确保在初始化 otherName 后再调用 GON
})
const GON = async () => {
  let result = await userSendMsgToWho(userName.value) // 使用 otherName.value
  messages.value = result.data
}
const messages = ref([])
const userName = ref('')
const newMessage = ref('')

const sendMessage = async () => {
  const model = ref({
    toUserName: userName.value,
    content: newMessage.value,
  })
  let result = await sendMessageService(model.value)
  if (result.code == 200) {
    ElMessage({
      message: result.message,
      type: 'success',
      grouping: true,
    })
    clear()
    GON()
  }
}

const clear = () => {
  newMessage.value = ''
}

// 转换日期格式
const formatDate = cellValue => {
  const date = new Date(cellValue)
  return date.toLocaleString()
}
</script>

<template>
  <div class="chat-container">
    <div class="chat-header">
      <el-button
        class="back-button"
        type="primary"
        round
        style="background-color: black"
        @click="router.push('/emLogin')"
        >返回首页</el-button
      >
      <div style="flex-grow: 1; text-align: center">{{ userName }}</div>
    </div>

    <div class="chat-window">
      <div class="messages-container">
        <div v-for="message in messages" :key="message.id" class="sent">
          <div class="message-avatar me"></div>
          <div class="message-content">
            <div class="message-text">
              {{ message.content }}
              <hr />
              {{ formatDate(message.createTime) }}
            </div>
          </div>
        </div>
      </div>
      <div class="input-container">
        <input
          v-model="newMessage"
          @keyup.enter="sendMessage"
          placeholder="输入消息..."
          type="text"
        />
        <button @click="sendMessage">发送</button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.chat-container {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

.chat-header {
  display: flex; /* 使用 Flexbox */
  justify-content: center; /* 默认居中对齐 */
  align-items: center; /* 垂直居中对齐 */
  position: relative; /* 设置相对定位，以便绝对定位按钮 */
  padding: 20px;
  background-color: #007bff;
  color: white;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.back-button {
  position: absolute; /* 使用绝对定位使按钮在左侧 */
  left: 20px; /* 距离左边的距离 */
}

.chat-window {
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
}

.messages-container {
  padding: 10px;
  height: 600px; /* 增加高度 */
  overflow-y: auto;
  background-color: #f9f9f9;
}

.message {
  display: flex;
  margin-bottom: 10px;
}

.message-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #007bff;
  margin-right: 10px;
}
.message-avatar.me {
  order: 1;
  margin-left: 10px;
  margin-right: 0;
  background-color: #28a745;
}

.message-content {
  background-color: white;
  padding: 10px;
  border-radius: 8px;
  max-width: 80%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.message-content.sent {
  align-self: flex-end;
}

.message-text {
  word-wrap: break-word;
}

.message-timestamp {
  font-size: 0.875em;
  color: #888;
  margin-top: 5px;
}

.input-container {
  display: flex;
  padding: 10px;
  background-color: #f1f1f1;
  border-top: 1px solid #ddd;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  /* 可以根据需要调整 input-container 的 padding 或其他属性 */
}

input[type='text'] {
  flex: 1;
  padding: 10px;
  border: none;
  outline: none;
  font-size: 1em;
}

button {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 4px;
  margin-left: 10px;
}

button:hover {
  background-color: #0056b3;
}
</style>