chat-app/src/components/talk/message/ForwardMessage.vue
caiyx 1213ad9b98
Some checks failed
Check / lint (push) Has been cancelled
Check / typecheck (push) Has been cancelled
Check / build (build, 18.x, ubuntu-latest) (push) Has been cancelled
Check / build (build, 18.x, windows-latest) (push) Has been cancelled
Check / build (build:app, 18.x, ubuntu-latest) (push) Has been cancelled
Check / build (build:app, 18.x, windows-latest) (push) Has been cancelled
Check / build (build:mp-weixin, 18.x, ubuntu-latest) (push) Has been cancelled
Check / build (build:mp-weixin, 18.x, windows-latest) (push) Has been cancelled
fix
2024-12-20 16:59:58 +08:00

101 lines
2.2 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<script lang="ts" setup>
import { computed, ref } from 'vue'
import ForwardRecord from '../ForwardRecord.vue'
import { ITalkRecordExtraForward, ITalkRecord } from '@/types/chat'
const props = defineProps<{
extra: ITalkRecordExtraForward
data: ITalkRecord
maxWidth?: Boolean
}>()
const isShowRecord = ref(false)
const title = computed(() => {
return [...new Set(props.extra.records.map((v) => v.nickname))].join('、')
})
const onClick = () => {
// isShowRecord.value = true
uni.navigateTo({
url: '/pages/forwardRecord/index?msgId=' + props.data.msg_id
})
}
</script>
<template>
<section class="im-message-forward pointer" :class="{ left: data.float === 'left' }" @click="onClick">
<div class="title">{{ title }} 的会话记录</div>
<div class="list" v-for="(record, index) in extra.records" :key="index">
<p>
<span>{{ record.nickname }}: </span>
<span>{{ record.text }}</span>
</p>
</div>
<div class="divider"></div>
<div class="tips">
<span>转发聊天会话记录 ({{ extra.msg_ids.length }})</span>
</div>
<!-- <ForwardRecord v-if="isShowRecord" :msg-id="data.msg_id" @close="isShowRecord = false" /> -->
</section>
</template>
<style lang="less" scoped>
.im-message-forward {
width: 486rpx;
min-height: 180rpx;
max-height: 274rpx;
border-radius: 0;
background-color: #FFFFFF;
padding: 22rpx 28rpx 22rpx 30rpx;
&.left {
background-color: #fff;
border-radius: 0 16rpx 16rpx 16rpx;
}
&.right {
background-color: #fff;
border-radius: 16rpx 0 16rpx 16rpx;
}
.title {
height: 44rpx;
line-height: 44rpx;
font-size: 32rpx;
color: #1A1A1A;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 400;
margin-bottom: 8rpx;
}
.list p {
height: 34rpx;
line-height: 34rpx;
font-size: 24rpx;
color: #B4B4B4;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-bottom: 10rpx;
}
.tips {
height: 34rpx;
line-height: 34rpx;
color: #747474;
font-size: 24rpx;
margin-top: 10rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.divider {
height: 1rpx;
background-color: #E7E7E7;
}
</style>