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
101 lines
2.2 KiB
Vue
101 lines
2.2 KiB
Vue
<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>
|