|
@@ -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>
|