聊天内容，文本，图片，语音消息结构优化
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<view class="sent--text">
|
||||
<input class="input" type="text" :auto-blur="true" @focus="focus" @blur="blur" :focus="focusState" v-model="inputTxt" confirm-type="send"
|
||||
@confirm="sent" cursor-spacing="10" />
|
||||
<input class="input" type="text" :auto-blur="true" @focus="focus" @blur="blur" :focus="focusState"
|
||||
v-model="inputTxt" confirm-type="send" @confirm="sent" cursor-spacing="10" />
|
||||
<!-- <button class="button" size="mini" :disabled="disabled" @click="demo">{{focusState ? '失焦': '聚焦'}}</button> -->
|
||||
</view>
|
||||
</template>
|
||||
@@ -41,14 +41,13 @@
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
RongIMLib.saveTextMessageDraft(this.conversationType, this.targetId, this.inputTxt, (res) => {
|
||||
console.log('销毁组件之前，保存草稿信息，但是没有执行', res);
|
||||
})
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
focusState: false,
|
||||
}
|
||||
// 保存草稿
|
||||
RongIMLib.saveTextMessageDraft(this.conversationType, this.targetId, this.inputTxt)
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
focusState: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 发送文本消息
|
||||
@@ -60,16 +59,16 @@
|
||||
this.inputTxt = ''
|
||||
})
|
||||
}
|
||||
},
|
||||
demo(){
|
||||
console.log(this.focusState)
|
||||
|
||||
this.focusState = !this.focusState
|
||||
},
|
||||
focus() {
|
||||
this.$emit('focus')
|
||||
demo() {
|
||||
console.log(this.focusState)
|
||||
|
||||
this.focusState = !this.focusState
|
||||
},
|
||||
blur() {
|
||||
focus() {
|
||||
this.$emit('focus')
|
||||
},
|
||||
blur() {
|
||||
uni.hideKeyboard()
|
||||
this.$emit('blur')
|
||||
}
|
||||
|
||||
@@ -1,72 +1,110 @@
|
||||
<template>
|
||||
<view class="">
|
||||
<text class="name" v-if="!guest && name">{{ name }}</text>
|
||||
<view class="msg--image" :class="guest ? 'right': 'left'">
|
||||
<image class="img" :src="msg.thumbnail" @click="previewImage" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'showImage',
|
||||
props: {
|
||||
msg: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {
|
||||
local: '',
|
||||
remote: '',
|
||||
objectName: '',
|
||||
thumbnail: '',
|
||||
isFull: false
|
||||
}
|
||||
}
|
||||
},
|
||||
guest: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
previewImage() {
|
||||
uni.previewImage({
|
||||
urls: [
|
||||
this.msg.remote
|
||||
],
|
||||
current: 1
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.name {
|
||||
font-size: 24rpx;
|
||||
color: $text-gray-m;
|
||||
}
|
||||
|
||||
.msg--image {
|
||||
.img {
|
||||
width: 180rpx;
|
||||
}
|
||||
|
||||
&.left {
|
||||
.img {
|
||||
border-radius: 0 10rpx 10rpx 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&.right {
|
||||
.img {
|
||||
border-radius: 10rpx 0 10rpx 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
<template>
|
||||
<view class="">
|
||||
<view class="name" v-if="isGroup && isRemote">{{ contact(message.senderUserId).name }}</view>
|
||||
<view class="msg--image" :class="isRemote ? 'left': 'right'">
|
||||
<image class="img" :src="content.thumbnail" @click="previewImage" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
|
||||
|
||||
export default {
|
||||
name: 'showImage',
|
||||
props: {
|
||||
message: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
isGroup: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isRemote() {
|
||||
return this.message.messageDirection == 2
|
||||
},
|
||||
content() {
|
||||
return this.message.content
|
||||
},
|
||||
contact() {
|
||||
return function(targetId) {
|
||||
return this.$store.getters.contactInfo(targetId)
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
previewImage() {
|
||||
if (this.content.local) {
|
||||
uni.previewImage({
|
||||
urls: [
|
||||
this.content.local
|
||||
],
|
||||
success: (e) => {
|
||||
console.log(e);
|
||||
},
|
||||
fail: (er) => {
|
||||
console.log(er);
|
||||
}
|
||||
})
|
||||
} else {
|
||||
RongIMLib.downloadMediaMessage(this.messageId, {
|
||||
success: (path) => {
|
||||
this.content.local = path
|
||||
uni.previewImage({
|
||||
urls: [
|
||||
path
|
||||
],
|
||||
success: (e) => {
|
||||
console.log(e);
|
||||
},
|
||||
fail: (er) => {
|
||||
console.log(er);
|
||||
}
|
||||
})
|
||||
},
|
||||
progress: (progress, messageId) => {
|
||||
console.log('progress', progress);
|
||||
},
|
||||
cancel: (messageId) => {
|
||||
console.log('cancel', messageId);
|
||||
},
|
||||
error: (errorCode, messageId) => {
|
||||
console.log('errorCode', errorCode);
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.name {
|
||||
font-size: 24rpx;
|
||||
color: $text-gray-m;
|
||||
}
|
||||
|
||||
.msg--image {
|
||||
.img {
|
||||
width: 180rpx;
|
||||
}
|
||||
|
||||
&.left {
|
||||
.img {
|
||||
border-radius: 0 10rpx 10rpx 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&.right {
|
||||
.img {
|
||||
border-radius: 10rpx 0 10rpx 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<view class="msg--text">
|
||||
<text class="name" v-if="!guest && name">{{ name }}</text>
|
||||
<view class="msg--text">
|
||||
<view class="name" v-if="isGroup && isRemote">{{ contact(message.senderUserId).name }}</view>
|
||||
<view>
|
||||
<text class="im--text" :class="guest ? 'right': 'left'">{{ msg.content }}</text>
|
||||
<text class="im--text" :class="isRemote ? 'left': 'right'">{{ content }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
@@ -11,21 +11,30 @@
|
||||
export default {
|
||||
name: 'showText',
|
||||
props: {
|
||||
msg: {
|
||||
message: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
guest: {
|
||||
isGroup: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
default: false
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isRemote() {
|
||||
return this.message.messageDirection == 2
|
||||
},
|
||||
content() {
|
||||
return this.message.content.content
|
||||
},
|
||||
contact() {
|
||||
return function(targetId) {
|
||||
return this.$store.getters.contactInfo(targetId)
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@@ -1,12 +1,14 @@
|
||||
<template>
|
||||
<view class="">
|
||||
<text class="name" v-if="isGroup && guest">{{ contact(message.senderUserId).name }}</text>
|
||||
<view class="msg--voice" :class="guest ? 'right': 'left'" @click="onPlayMsg">
|
||||
<image v-if="!guest" class="icon" src="@/static/icon/audio_green.png" mode="widthFix"></image>
|
||||
<text class="duration">{{ duration }}"</text>
|
||||
<image v-if="guest" class="icon" src="@/static/icon/audio_white.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<!-- <view class="">这里显示个红点，根据message.content.local是否为空的时候判断</view> -->
|
||||
<template>
|
||||
<view class="">
|
||||
<view class="name" v-if="isGroup && isRemote">{{ contact(message.senderUserId).name }}</view>
|
||||
<view class="msg--voice">
|
||||
<view class="voice" :class="isRemote ? 'left': 'right'" @click="onPlayMsg">
|
||||
<image v-if="!isRemote" class="icon" src="@/static/icon/audio_green.png" mode="widthFix"></image>
|
||||
<text class="duration">{{ duration }}"</text>
|
||||
<image v-if="isRemote" class="icon" src="@/static/icon/audio_white.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<u-badge isDot :show="message.content.local =='' && isRemote" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -31,9 +33,8 @@
|
||||
duration() {
|
||||
return this.message.content.duration
|
||||
},
|
||||
guest() {
|
||||
return this.message.messageDirection == 2
|
||||
|
||||
isRemote() {
|
||||
return this.message.messageDirection == 2
|
||||
},
|
||||
contact() {
|
||||
return function(targetId) {
|
||||
@@ -61,10 +62,12 @@
|
||||
}
|
||||
},
|
||||
playMsg(path) {
|
||||
uni.$emit('onVideoMessagePlay')
|
||||
const innerAudioContext = uni.createInnerAudioContext()
|
||||
innerAudioContext.src = path
|
||||
innerAudioContext.autoplay = true
|
||||
innerAudioContext.onStop(resStop => {
|
||||
uni.$emit('onVideoMessageStop')
|
||||
innerAudioContext.destroy()
|
||||
})
|
||||
innerAudioContext.onError(err => {
|
||||
@@ -83,36 +86,45 @@
|
||||
|
||||
.msg--voice {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 79rpx;
|
||||
width: 170rpx;
|
||||
padding: 0 20rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.icon {
|
||||
width: 38rpx;
|
||||
height: 38rpx;
|
||||
.u-badge {
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
|
||||
&.left {
|
||||
border-radius: 0 20rpx 20rpx 20rpx;
|
||||
background: white;
|
||||
.voice {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 79rpx;
|
||||
width: 170rpx;
|
||||
padding: 0 20rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.duration {
|
||||
color: #333;
|
||||
font-size: 30rpx;
|
||||
.icon {
|
||||
width: 38rpx;
|
||||
height: 38rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&.right {
|
||||
border-radius: 20rpx 0 20rpx 20rpx;
|
||||
background: $main-color;
|
||||
&.left {
|
||||
border-radius: 0 20rpx 20rpx 20rpx;
|
||||
background: white;
|
||||
|
||||
.duration {
|
||||
color: white;
|
||||
font-size: 30rpx;
|
||||
.duration {
|
||||
color: #333;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&.right {
|
||||
border-radius: 20rpx 0 20rpx 20rpx;
|
||||
background: $main-color;
|
||||
|
||||
.duration {
|
||||
color: white;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -11,10 +11,8 @@
|
||||
:src="contact(item.senderUserId).portraitUrl" />
|
||||
<view class="msg">
|
||||
<show-voice v-if="item.objectName === 'RC:HQVCMsg'" :message="item" isGroup />
|
||||
<show-image v-if="item.objectName === 'RC:ImgMsg'" :guest="item.messageDirection == 1"
|
||||
:msg="item.content" :name="contact(item.senderUserId).name" />
|
||||
<show-text v-if="item.objectName === 'RC:TxtMsg'" :guest="item.messageDirection == 1"
|
||||
:msg="item.content" :name="contact(item.senderUserId).name" />
|
||||
<show-image v-if="item.objectName === 'RC:ImgMsg'" :message="item" isGroup />
|
||||
<show-text v-if="item.objectName === 'RC:TxtMsg'" :message="item" isGroup />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -12,16 +12,9 @@
|
||||
:src="contact(item.senderUserId).portraitUrl" />
|
||||
<view class="msg">
|
||||
<show-voice v-if="item.objectName === 'RC:HQVCMsg'" :message="item" />
|
||||
<show-image v-if="item.objectName === 'RC:ImgMsg'" :guest="item.messageDirection == 1"
|
||||
:msg="item.content" />
|
||||
<show-text v-if="item.objectName === 'RC:TxtMsg'" :guest="item.messageDirection == 1"
|
||||
:msg="item.content" />
|
||||
<show-call v-if="item.objectName === 'RC:InfoNtf'" :guest="item.messageDirection == 1"
|
||||
:msg="item.content" />
|
||||
<view class="state" v-if="item.messageDirection == 1">
|
||||
<text
|
||||
:class="item.sentStatus === 50?'state-text':'state-text-active'">{{ item.sentStatus == 50 ? '已读': '未读'}}</text>
|
||||
</view>
|
||||
<show-image v-if="item.objectName === 'RC:ImgMsg'" :message="item" />
|
||||
<show-text v-if="item.objectName === 'RC:TxtMsg'" :message="item" />
|
||||
<show-call v-if="item.objectName === 'RC:InfoNtf'" :message="item" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -36,9 +29,9 @@
|
||||
import showImage from '../components/showImage'
|
||||
import showText from '../components/showText'
|
||||
import showCall from '../components/showCall'
|
||||
import sentMessageBar from '../components/sentMessageBar'
|
||||
import utils from '@/utils/index.js'
|
||||
|
||||
import sentMessageBar from '../components/sentMessageBar'
|
||||
import utils from '@/utils/index.js'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
sentMessageBar,
|
||||
@@ -48,7 +41,7 @@
|
||||
showCall
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
return {
|
||||
avatarRpx: 84,
|
||||
targetId: '',
|
||||
messages: [],
|
||||
@@ -60,9 +53,9 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
avatarSize() {
|
||||
return utils.rpx2px(this.avatarRpx)
|
||||
computed: {
|
||||
avatarSize() {
|
||||
return utils.rpx2px(this.avatarRpx)
|
||||
},
|
||||
latestMessage() {
|
||||
if (this.messages.length) {
|
||||
@@ -100,7 +93,7 @@
|
||||
}
|
||||
})
|
||||
// 监听收到新消息，判断是否是当前会话，更新会话内容
|
||||
uni.$on('onReceiveMessage', (msg) => {
|
||||
uni.$on('onReceiveMessage', (msg) => {
|
||||
if (msg.targetId == this.targetId) {
|
||||
this.getNewMessage()
|
||||
}
|
||||
@@ -184,7 +177,7 @@
|
||||
.time {
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
color: #666;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
@@ -207,20 +200,19 @@
|
||||
|
||||
.msg {
|
||||
margin: 0 20rpx;
|
||||
// .state {
|
||||
// padding-top: 10rpx;
|
||||
|
||||
.state {
|
||||
padding-top: 10rpx;
|
||||
// .state-text {
|
||||
// font-size: $title-size-m - 2;
|
||||
// color: rgba($color: $main-color, $alpha: 0.3)
|
||||
// }
|
||||
|
||||
.state-text {
|
||||
font-size: $title-size-m - 2;
|
||||
color: rgba($color: $main-color, $alpha: 0.3)
|
||||
}
|
||||
|
||||
.state-text-active {
|
||||
font-size: $title-size-m - 2;
|
||||
color: #cecece;
|
||||
}
|
||||
}
|
||||
// .state-text-active {
|
||||
// font-size: $title-size-m - 2;
|
||||
// color: #cecece;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user