76 lines
2.0 KiB
Vue
76 lines
2.0 KiB
Vue
<template>
|
|
<view v-if="!isRemote">
|
|
<view class="state" v-if="isGroup">
|
|
<!-- 已发送 -->
|
|
<uni-icons class="sent" type="checkmarkempty" size="28rpx" :color="message.sentStatus >= 30 ? '#34CE98' : '#999999'" />
|
|
<text class="readers">{{ readers }}</text>
|
|
</view>
|
|
<view class="state" v-else>
|
|
<uni-icons class="sent" type="checkmarkempty" size="28rpx" :color="message.sentStatus >= 30 ? '#34CE98' : '#999999'" />
|
|
<uni-icons class="receive" type="checkmarkempty" size="28rpx" :color="message.sentStatus >= 50 ? '#34CE98' : '#999999'" />
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
|
|
import utils from '@/utils/index.js'
|
|
|
|
export default {
|
|
name: 'showText',
|
|
props: {
|
|
message: {
|
|
type: Object,
|
|
default: () => {
|
|
return {}
|
|
}
|
|
},
|
|
isGroup: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
isRemote: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
computed: {
|
|
iconSize() {
|
|
return utils.rpx2px(28)
|
|
},
|
|
readers() {
|
|
if (this.message.extra) {
|
|
return JSON.parse(this.message.extra).readers || 0
|
|
}
|
|
|
|
return 0
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.state {
|
|
padding: 10rpx;
|
|
border-radius: 30rpx;
|
|
background-color: #ddd;
|
|
display: flex;
|
|
margin-right: 10rpx;
|
|
|
|
.sent {
|
|
z-index: 2;
|
|
}
|
|
|
|
.receive {
|
|
z-index: 1;
|
|
margin-left: -20rpx;
|
|
}
|
|
|
|
.readers {
|
|
font-size: 20rpx;
|
|
margin-left: -6rpx;
|
|
color: $text-gray-m;
|
|
}
|
|
}
|
|
</style>
|