130 lines
3.2 KiB
Vue
130 lines
3.2 KiB
Vue
|
<script lang="ts" setup>
|
||
|
|
import { ref, onMounted } from 'vue'
|
||
|
|
import { ServeGetForwardRecords } from '@/api/chat'
|
||
|
|
import { MessageComponents } from '@/constant/message'
|
||
|
|
import { ITalkRecord } from '@/types/chat'
|
||
|
|
import WdLoading from "@/uni_modules/wot-design-uni/components/wd-loading/wd-loading.vue";
|
||
|
|
import { useInject } from '@/hooks'
|
||
|
|
|
||
|
|
const emit = defineEmits(['close'])
|
||
|
|
|
||
|
|
const msgId = ref(null)
|
||
|
|
const { showUserInfoModal } = useInject()
|
||
|
|
const isShow = ref(true)
|
||
|
|
const items = ref<ITalkRecord[]>([])
|
||
|
|
const title = ref('会话记录')
|
||
|
|
|
||
|
|
const onMaskClick = () => {
|
||
|
|
emit('close')
|
||
|
|
}
|
||
|
|
|
||
|
|
const onLoadData = () => {
|
||
|
|
ServeGetForwardRecords({
|
||
|
|
msg_id: msgId.value
|
||
|
|
}).then((res) => {
|
||
|
|
if (res.code == 200) {
|
||
|
|
items.value = res.data.items || []
|
||
|
|
|
||
|
|
title.value = [...new Set(items.value.map((v) => v.nickname))].join('、')
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
onMounted(() => {
|
||
|
|
const pages = getCurrentPages()
|
||
|
|
const page = pages[pages.length - 1]
|
||
|
|
const options = page.$page.options
|
||
|
|
msgId.value = options.msgId
|
||
|
|
console.log(msgId.value,'msgId.value');
|
||
|
|
|
||
|
|
onLoadData()
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div class="outer-layer">
|
||
|
|
<div>
|
||
|
|
<tm-navbar :hideBack="false" hideHome :title="`${title}的会话记录`" >
|
||
|
|
</tm-navbar>
|
||
|
|
</div>
|
||
|
|
<div class="main-box">
|
||
|
|
<div v-if="items.length === 0" class="flex justify-center items-center w-full mt-[200rpx]">
|
||
|
|
<wd-loading />
|
||
|
|
</div>
|
||
|
|
<div v-else v-for="item in items" :key="item.msg_id" class="message-item">
|
||
|
|
<div class="left-box" @click="showUserInfoModal(item.user_id)">
|
||
|
|
<tm-image v-if="item.avatar !==''" :width="80" :height="80" :round="12" :src="item.avatar"></tm-image>
|
||
|
|
<div v-else class="w-[80rpx] h-[80rpx] text-[28rpx] text-[#fff] bg-[#46299D] leading-[40rpx] rounded-[40rpx] flex justify-center items-center">{{ item.nickname.slice(-2) }}</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="right-box">
|
||
|
|
<div class="msg-header">
|
||
|
|
<span class="name">{{ item.nickname }}</span>
|
||
|
|
<span class="time"> {{ item.created_at }}</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<component
|
||
|
|
:is="MessageComponents[item.msg_type] || 'unknown-message'"
|
||
|
|
:extra="item.extra"
|
||
|
|
:data="item"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style lang="less" scoped>
|
||
|
|
.outer-layer {
|
||
|
|
overflow-y: auto;
|
||
|
|
flex: 1;
|
||
|
|
background-image: url("@/static/image/clockIn/z3280@3x.png");
|
||
|
|
background-size: cover;
|
||
|
|
padding: 0 66rpx 20rpx 50rpx;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
}
|
||
|
|
.main-box {
|
||
|
|
flex:1;
|
||
|
|
width: 100%;
|
||
|
|
overflow-y: auto;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
overflow: auto;
|
||
|
|
padding-top: 28rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.message-item {
|
||
|
|
min-height: 60rpx;
|
||
|
|
display: flex;
|
||
|
|
margin-bottom: 44rpx;
|
||
|
|
|
||
|
|
.left-box {
|
||
|
|
width: 80rpx;
|
||
|
|
display: flex;
|
||
|
|
user-select: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.right-box {
|
||
|
|
width: 100%;
|
||
|
|
overflow-x: auto;
|
||
|
|
padding-left: 22rpx;
|
||
|
|
box-sizing: border-box;
|
||
|
|
height: fit-content;
|
||
|
|
|
||
|
|
.msg-header {
|
||
|
|
height: 34rpx;
|
||
|
|
line-height: 34rpx;
|
||
|
|
width: 526rpx;
|
||
|
|
font-size: 24rpx;
|
||
|
|
color: #999999;
|
||
|
|
position: relative;
|
||
|
|
user-select: none;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
margin-bottom: 6rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|