1

src/components/frame/c-chat.vue

@@ -0,0 +1,187 @@
+<template>
+  <div id="c-chat">
+    <el-row>
+      <el-col :span="24" class="chat" v-loading="loading" id="chat">
+        <el-col :span="24" class="one" :style="{ height: height }">
+          <template v-for="(i, index) in list">
+            <template v-if="isSender(i)">
+              <el-col :span="24" class="senderTime" :key="`div${index}`">
+                <p class="p_1" :key="`senderTime${i._id}${index}`">
+                  <span>[{{ i.send_time }}]</span>
+                  <span> {{ i.sender_name }}</span>
+                </p>
+                <p class="p_2" :key="`senderContent${i.id}${index}`">
+                  <span v-html="i.content"></span>
+                </p>
+              </el-col>
+            </template>
+            <template v-else>
+              <el-col :span="24" class="receverTime" :key="`div${index}`">
+                <p class="p_1" :key="`senderTime${i._id}${index}`">
+                  <span>{{ i.sender_name }}</span>
+                  <span>[{{ i.send_time }}]</span>
+                </p>
+                <p class="p_2" :key="`receverContent${i.id}${index}`">
+                  <span v-html="i.content"></span>
+                </p>
+              </el-col>
+            </template>
+          </template>
+        </el-col>
+        <el-col :span="24" class="two">
+          <el-input v-model="content" placeholder="请输入信息内容">
+            <template #append>
+              <el-button type="primary" @click="toSend">发送</el-button>
+            </template>
+          </el-input>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script setup lang="ts">
+// 基础
+import moment from 'moment'
+import type { Ref } from 'vue'
+import { onMounted, ref, toRefs, watch } from 'vue'
+import { ElMessage } from 'element-plus'
+
+// 接口
+import { PersonChatStore } from '@common/src/stores/product/personChat'
+import type { IQueryResult } from '@/util/types.util'
+import store from '@/stores/counter'
+const personchatAxios = PersonChatStore()
+
+// 组件传值
+const props = defineProps({
+  room: { type: Object, default: () => {} },
+  height: { type: String, default: () => '70vh' }
+})
+const { room } = toRefs(props)
+const { height } = toRefs(props)
+
+// 加载中
+const loading: Ref<any> = ref(false)
+
+// 信息列表
+const list: Ref<any> = ref([])
+// 信息内容
+const content: Ref<any> = ref('')
+
+// 请求
+onMounted(async () => {
+  loading.value = true
+  loading.value = false
+})
+// 查询信息
+const search = async (e: { room_id: any }) => {
+  let res: IQueryResult = await personchatAxios.query(e)
+  if (res.errcode == '0') {
+    list.value = res.data
+    turnBottom()
+  }
+}
+// 发送信息
+const toSend = async () => {
+  let user: any = store.state.user
+  let rooms: any = room.value
+  if (content.value) {
+    let object: any = {
+      room_id: rooms && rooms._id ? rooms._id : '',
+      content: content.value,
+      sender_id: user._id,
+      sender_name: user.name,
+      send_time: moment().format('YYYY-MM-DD HH:mm:ss')
+    }
+    // 接收人
+    if (rooms.p1_id == user._id) {
+      object.receiver_id = rooms.p2_id
+      object.receiver_name = rooms.p2_name
+    } else {
+      object.receiver_id = rooms.p1_id
+      object.receiver_name = rooms.p1_name
+    }
+    let res: IQueryResult = await personchatAxios.create(object)
+    if (res.errcode == '0') {
+      ElMessage({ type: 'success', message: `信息发送成功` })
+      content.value = ''
+      search({ room_id: rooms._id })
+    } else {
+      ElMessage({ type: 'error', message: `${res.errmsg}` })
+    }
+  } else {
+    ElMessage({ type: 'warning', message: `请输入信息内容` })
+  }
+}
+const isSender = (data) => {
+  let user = store.state.user
+  return user._id !== data.sender_id
+}
+// 获取高度
+const turnBottom = () => {
+  let height = document.getElementById('#chat').scrollHeight
+  console.log(height)
+}
+watch(
+  room,
+  (newVal: any) => {
+    if (newVal && newVal._id) search({ room_id: newVal._id })
+  },
+  { deep: true, immediate: true }
+)
+</script>
+<style scoped lang="scss">
+.chat {
+  .one {
+    border: 1px solid #ff0000;
+    padding: 10px;
+    margin: 0 0 10px 0;
+    border-radius: 5px;
+    overflow-y: auto;
+    .senderTime {
+      text-align: left;
+      .p_1 {
+        margin: 0 0 10px 0;
+        span:nth-child(1) {
+          color: #ff0000;
+          padding: 0 5px 0 0;
+        }
+      }
+      .p_2 {
+        span {
+          background-color: #f5f5f5;
+          color: #000000;
+          padding: 5px;
+          border-radius: 5px;
+        }
+      }
+    }
+    .receverTime {
+      text-align: right;
+      margin: 0 0 10px 0;
+      .p_1 {
+        margin: 0 0 10px 0;
+        span:nth-child(2) {
+          color: #ff0000;
+          padding: 0 5px 0 0;
+        }
+      }
+
+      .p_2 {
+        span {
+          background-color: #95ec69;
+          padding: 5px;
+          border-radius: 5px;
+        }
+      }
+    }
+  }
+  .two {
+    border: 1px solid #000000;
+    padding: 10px;
+    border-radius: 5px;
+    margin: 0 0 10px 0;
+  }
+}
+</style>