...
This commit is contained in:
163
pages/im/components/conversationList.vue
Normal file
163
pages/im/components/conversationList.vue
Normal file
@@ -0,0 +1,163 @@
|
||||
<template>
|
||||
<view>
|
||||
<view v-for="(item, index) in conversations" :key="index" :class="['message', { 'is-top': item.isTop }]"
|
||||
:data-item="item" @longpress="onLongPress" @click="toDetail(item)">
|
||||
<message-cell :item="item" />
|
||||
</view>
|
||||
|
||||
<view class="shade" @click="hidePop" v-show="showPop">
|
||||
<view class="pop" :style="popStyle" :class="{'show':showPop}">
|
||||
<view v-for="(item, index) in popButton" :key="index" @click="pickerMenu" :data-index="index">
|
||||
{{item}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
|
||||
import im from '@/utils/im/index.js'
|
||||
import messageCell from './messageCell'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
conversations: {
|
||||
type: Array,
|
||||
default: function() {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
messageCell
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
/* 窗口尺寸 */
|
||||
winSize: {},
|
||||
/* 显示操作弹窗 */
|
||||
showPop: false,
|
||||
/* 弹窗按钮列表 */
|
||||
popButton: ['置顶聊天', '删除该聊天'],
|
||||
/* 弹窗定位样式 */
|
||||
popStyle: "",
|
||||
pickedItem: {},
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 隐藏功能菜单
|
||||
hidePop() {
|
||||
this.showPop = false
|
||||
this.pickedItem = {}
|
||||
setTimeout(() => {
|
||||
this.showShade = false
|
||||
}, 250)
|
||||
},
|
||||
// 点击会话功能菜单
|
||||
pickerMenu(e) {
|
||||
const index = Number(e.currentTarget.dataset.index)
|
||||
|
||||
if (index == 0) {
|
||||
RongIMLib.setConversationToTop(this.pickedItem.conversationType, this.pickedItem.targetId, !this
|
||||
.pickedItem.isTop)
|
||||
} else {
|
||||
RongIMLib.removeConversation(this.pickedItem.conversationType, this.pickedItem.targetId)
|
||||
RongIMLib.deleteMessages(this.pickedItem.conversationType, this.pickedItem.targetId)
|
||||
}
|
||||
this.$emit('refresh')
|
||||
im.setNotifyBadge()
|
||||
this.hidePop()
|
||||
},
|
||||
// 长按会话，展示功能菜单
|
||||
onLongPress(e) {
|
||||
let [touches, style, item] = [e.touches[0], "", e.currentTarget.dataset.item]
|
||||
|
||||
if (touches.clientY > (this.winSize.height / 2)) {
|
||||
style = `bottom:${this.winSize.height-touches.clientY}px;`
|
||||
} else {
|
||||
style = `top:${touches.clientY}px;`
|
||||
}
|
||||
if (touches.clientX > (this.winSize.witdh / 2)) {
|
||||
style += `right:${this.winSize.witdh-touches.clientX}px`
|
||||
} else {
|
||||
style += `left:${touches.clientX}px`
|
||||
}
|
||||
|
||||
this.popButton[0] = item.isTop ? '取消置顶' : '置顶聊天'
|
||||
this.popStyle = style
|
||||
this.pickedItem = item
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
this.showPop = true;
|
||||
}, 10)
|
||||
})
|
||||
},
|
||||
toDetail(item) {
|
||||
if (item.conversationType == 1) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/im/private/chat?targetId=' + item.targetId
|
||||
})
|
||||
} else if (item.conversationType == 3) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/im/group/chat?targetId=' + item.targetId
|
||||
})
|
||||
}
|
||||
|
||||
this.hidePop()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.message {
|
||||
background: white;
|
||||
|
||||
&.is-top {
|
||||
background: $window-color;
|
||||
}
|
||||
}
|
||||
|
||||
/* 遮罩 */
|
||||
.shade {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.pop {
|
||||
position: fixed;
|
||||
z-index: 101;
|
||||
width: 200rpx;
|
||||
box-sizing: border-box;
|
||||
font-size: 28rpx;
|
||||
text-align: left;
|
||||
color: #333;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
|
||||
line-height: 80rpx;
|
||||
transition: transform 0.15s ease-in-out 0s;
|
||||
user-select: none;
|
||||
-webkit-touch-callout: none;
|
||||
transform: scale(0, 0);
|
||||
|
||||
&.show {
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
|
||||
&>view {
|
||||
padding: 0 20rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
user-select: none;
|
||||
-webkit-touch-callout: none;
|
||||
|
||||
&:active {
|
||||
background-color: #f3f3f3;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
112
pages/im/components/friendApplyCell.vue
Normal file
112
pages/im/components/friendApplyCell.vue
Normal file
@@ -0,0 +1,112 @@
|
||||
<template>
|
||||
<view class="apply--cell u-border-bottom">
|
||||
<view class="avatar">
|
||||
<u-avatar :src="user.portraitUrl" shape="square" size="46" />
|
||||
</view>
|
||||
<view class="info">
|
||||
<view class="name">
|
||||
{{ user.name }}
|
||||
</view>
|
||||
<view class="message">
|
||||
{{ message.message }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="action">
|
||||
<u-button type="success" size="mini" @click="resolve">通过</u-button>
|
||||
<u-button type="warning" size="mini" @click="reject">拒绝</u-button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
|
||||
import {
|
||||
resolveFriend,
|
||||
rejectFriend
|
||||
} from '@/apis/interfaces/im.js'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
message: {
|
||||
type: Object,
|
||||
default: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
user() {
|
||||
return JSON.parse(this.message.extra)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
resolve() {
|
||||
resolveFriend(this.message.sourceUserId).then(res => {
|
||||
this.clearMessages()
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '通过好友申请'
|
||||
})
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: err.message
|
||||
})
|
||||
})
|
||||
},
|
||||
reject() {
|
||||
uni.showModal({
|
||||
title: '拒绝申请',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
rejectFriend(this.message.sourceUserId).then(res => {
|
||||
this.clearMessages()
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: err.message
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
// 不管是通过还是拒绝，都要把相关的信息清理
|
||||
clearMessages() {
|
||||
RongIMLib.deleteMessages(RongIMLib.ConversationType.SYSTEM, this.message.sourceUserId)
|
||||
this.$emit('success')
|
||||
uni.$emit('onContactNotification')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.apply--cell {
|
||||
display: flex;
|
||||
padding: $padding;
|
||||
align-items: center;
|
||||
|
||||
.info {
|
||||
flex: 1;
|
||||
margin-left: $padding;
|
||||
|
||||
.name {
|
||||
font-size: $title-size + 2;
|
||||
}
|
||||
|
||||
.message {
|
||||
color: $text-gray-m;
|
||||
font-size: $title-size-m;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.action {
|
||||
justify-content: space-between;
|
||||
|
||||
.u-button+.u-button {
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
125
pages/im/components/friendApplyList.vue
Normal file
125
pages/im/components/friendApplyList.vue
Normal file
@@ -0,0 +1,125 @@
|
||||
<template>
|
||||
<view class="friend-apply">
|
||||
<block v-for="(item, index) in lists" v-if="lists.length > 0" :key="index">
|
||||
<view class="lists">
|
||||
<view class="" style="width: 100rpx;height: 100rpx;">
|
||||
<u-avatar :src="JSON.parse(item.latestMessage.extra).portraitUrl" shape="square" size="44" />
|
||||
</view>
|
||||
<view class="right">
|
||||
<view class="title">
|
||||
<view class="name">{{ item.name }}</view>
|
||||
<view class="des">{{ item.latestMessage.message }}</view>
|
||||
</view>
|
||||
<view class="agress-btn">
|
||||
<span v-if="isAgree" @click="action('agree', item)">通过</span>
|
||||
<span v-if="isAgree" @click="action('reject', item)">拒绝</span>
|
||||
<span v-if="isApply && !item.is_friend" @click="action('apply', item)">查看</span>
|
||||
<span class="isFri" v-if="isApply && item.is_friend" @click="action('isFriend', item)">已是好友</span>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'friend-apply-reject-agree',
|
||||
props: {
|
||||
lists: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
isAgree: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
isReject: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
isApply: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
created() {
|
||||
console.log(this.lists);
|
||||
},
|
||||
methods: {
|
||||
action(type, item) {
|
||||
if (type === 'isFriend') {
|
||||
// ，后期可以跳转到信息介绍页面，先留在这里
|
||||
return uni.showToast({ title: '已是好友，无需重复添加', icon: 'none', duration:2000});
|
||||
}
|
||||
this.$emit('action', { type, item });
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.lists {
|
||||
padding: 0 $padding;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
box-sizing: border-box;
|
||||
font-size: $title-size;
|
||||
color: $text-gray;
|
||||
|
||||
.cover {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.right {
|
||||
width: 570rpx;
|
||||
margin-left: $margin - 10;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: $padding 0;
|
||||
border-bottom: solid 1rpx #f9f9f9;
|
||||
.title {
|
||||
width: 370rpx;
|
||||
.name {
|
||||
width: 100%;
|
||||
color: $text-color;
|
||||
font-size: $title-size + 2;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.des {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: $title-size-m;
|
||||
margin-top: $margin - 10;
|
||||
color: $text-gray-m;
|
||||
}
|
||||
}
|
||||
.agress-btn {
|
||||
display: flex;
|
||||
color: #fff;
|
||||
span {
|
||||
display: inline-block;
|
||||
padding: 6rpx 14rpx;
|
||||
background-color: $text-price;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
span:nth-child(1) {
|
||||
background-color: $main-color;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
.isFri {
|
||||
background-color: #f9f9f9 !important;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
85
pages/im/components/messageCell.vue
Normal file
85
pages/im/components/messageCell.vue
Normal file
@@ -0,0 +1,85 @@
|
||||
<template>
|
||||
<view class="message--cell">
|
||||
<view class="avatar">
|
||||
<u-badge max="99" shape="horn" absolute :offset="[-5, -8]" :value="item.unreadMessageCount" />
|
||||
<u-avatar :src="contact(item.targetId).portraitUrl" shape="square" size="44" />
|
||||
</view>
|
||||
<view class="content">
|
||||
<view class="header">
|
||||
<view class="name">{{ contact(item.targetId).name }}</view>
|
||||
<view class="time">{{ item.sentTime|timeCustomCN }}</view>
|
||||
</view>
|
||||
<message-preview class="preview" :msg="item.latestMessage" :conversationType="item.conversationType"
|
||||
:user="item.latestMessage.userInfo" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import messagePreview from './messagePreview'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
default: function() {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
contact() {
|
||||
return function(targetId) {
|
||||
return this.$store.getters.contactInfo(targetId)
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
messagePreview
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.message--cell {
|
||||
display: flex;
|
||||
padding: 20rpx 0 0 20rpx;
|
||||
|
||||
.avatar {
|
||||
position: relative;
|
||||
|
||||
.u-badge {
|
||||
z-index: 998;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
margin-left: 30rpx;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
flex: 1;
|
||||
|
||||
border-bottom-width: 0.5px !important;
|
||||
border-color: $u-border-color !important;
|
||||
border-bottom-style: solid;
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.name {
|
||||
font-size: $title-size + 2;
|
||||
color: #454545;
|
||||
color: #454545;
|
||||
}
|
||||
|
||||
.time {
|
||||
font-size: $title-size-sm;
|
||||
color: $text-gray-m;
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
65
pages/im/components/messagePreview.nvue
Normal file
65
pages/im/components/messagePreview.nvue
Normal file
@@ -0,0 +1,65 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="preview" v-if="msg.objectName=='RC:TxtMsg'">
|
||||
<text v-if="conversationType == 3">{{ user.name }}: </text>{{ msg.content || '' }}
|
||||
</view>
|
||||
<view class="preview" v-if="msg.objectName=='RC:HQVCMsg'">
|
||||
<text v-if="conversationType == 3">{{ user.name }}: </text>[语音]
|
||||
</view>
|
||||
<view class="preview" v-if="msg.objectName=='RC:ImgMsg'">
|
||||
<text v-if="conversationType == 3">{{ user.name }}: </text>[图片]
|
||||
</view>
|
||||
<view class="preview" v-if="msg.objectName=='RC:GIFMsg'">
|
||||
<text v-if="conversationType == 3">{{ user.name }}: </text>[表情]
|
||||
</view>
|
||||
<view class="preview" v-if="msg.objectName=='RC:FileMsg'">
|
||||
<text v-if="conversationType == 3">{{ user.name }}: </text>[文件]
|
||||
</view>
|
||||
<view class="preview" v-if="msg.objectName=='RC:LBSMsg'">
|
||||
<text v-if="conversationType == 3">{{ user.name }}: </text>[位置]
|
||||
</view>
|
||||
<view class="preview" v-if="msg.objectName=='RC:AudioMsg'">
|
||||
<text v-if="conversationType == 3">{{ user.name }}: </text>[语音通话]
|
||||
</view>
|
||||
<view class="preview" v-if="msg.objectName=='RC:VideoMsg'">
|
||||
<text v-if="conversationType == 3">{{ user.name }}: </text>[视频通话]
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
msg: {
|
||||
type: Object,
|
||||
default: {}
|
||||
},
|
||||
conversationType: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
user: {
|
||||
type: Object,
|
||||
default: function() {
|
||||
return {
|
||||
name: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.preview {
|
||||
word-break: break-all;
|
||||
color: $text-gray-m;
|
||||
padding-top: $padding - 20;
|
||||
padding-bottom: $padding;
|
||||
font-size: $title-size-m;
|
||||
height: 32rpx;
|
||||
line-height: 32rpx;
|
||||
width: 520rpx;
|
||||
@extend .nowrap;
|
||||
}
|
||||
</style>
|
||||
83
pages/im/components/sentMessageBar.nvue
Normal file
83
pages/im/components/sentMessageBar.nvue
Normal file
@@ -0,0 +1,83 @@
|
||||
<template>
|
||||
<view class="">
|
||||
<!-- footer -->
|
||||
<view class="footer">
|
||||
<view class="msg-type" @click="changeMessageType">
|
||||
<image class="icon" src="@/static/icon/key-icon.png" v-if="chatType === 0" mode="widthFix">
|
||||
</image>
|
||||
<image class="icon" src="@/static/icon/msg-icon.png" v-if="chatType === 1" mode="widthFix">
|
||||
</image>
|
||||
</view>
|
||||
<sent-voice v-if="chatType === 0" :conversationType="conversationType" :targetId="targetId"
|
||||
@success="onSuccess" />
|
||||
<sent-text v-if="chatType === 1" :conversationType="conversationType" :targetId="targetId"
|
||||
@success="onSuccess" />
|
||||
<view class="msg-type msg-popups" @click="showPopups = !showPopups">
|
||||
<image class="icon" src="@/static/icon/popups-icon.png"></image>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 弹出层 -->
|
||||
<sent-popups :show="showPopups" :conversationType="conversationType" :targetId="targetId"
|
||||
@success="() => {showPopups = false, onSuccess()}"></sent-popups>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import sentText from '../components/sentText'
|
||||
import sentVoice from '../components/sentVoice'
|
||||
import sentPopups from '../components/sentPopups'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
conversationType: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
targetId: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
components: {
|
||||
sentText,
|
||||
sentVoice,
|
||||
sentPopups
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chatType: 1, // 0 语音，1 文本
|
||||
showPopups: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 切换聊天类型，语音/文本
|
||||
changeMessageType() {
|
||||
this.chatType = this.chatType === 1 ? 0 : 1
|
||||
},
|
||||
onSuccess() {
|
||||
this.$emit('onSuccess')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.footer {
|
||||
background: white;
|
||||
padding: 20rpx 30rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: row;
|
||||
|
||||
.msg-type {
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
|
||||
.icon {
|
||||
margin: 5rpx;
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
173
pages/im/components/sentPopups.nvue
Normal file
173
pages/im/components/sentPopups.nvue
Normal file
@@ -0,0 +1,173 @@
|
||||
<template>
|
||||
<view class="sent--popups u-border-top" v-if="show">
|
||||
<view class="item" @click="onPopupsItem('picture')">
|
||||
<image class="icon" src="@/static/icon/popups-icon-00.png" mode="widthFix"></image>
|
||||
<text class="text">相册</text>
|
||||
</view>
|
||||
<view class="item" @click="onPopupsItem('camera')">
|
||||
<image class="icon" src="@/static/icon/popups-icon-01.png" mode="widthFix"></image>
|
||||
<text class="text">拍摄</text>
|
||||
</view>
|
||||
<view class="item" @click="onPopupsItem('video')">
|
||||
<image class="icon" src="@/static/icon/popups-icon-02.png" mode="widthFix"></image>
|
||||
<text class="text">视频通话</text>
|
||||
</view>
|
||||
<view class="item" @click="onPopupsItem('location')">
|
||||
<image class="icon" src="@/static/icon/popups-icon-03.png" mode="widthFix"></image>
|
||||
<text class="text">位置</text>
|
||||
</view>
|
||||
<view class="item" @click="onPopupsItem('redpacket')">
|
||||
<image class="icon" src="@/static/icon/popups-icon-04.png" mode="widthFix"></image>
|
||||
<text class="text">红包</text>
|
||||
</view>
|
||||
<view class="item" @click="onPopupsItem('file')">
|
||||
<image class="icon" src="@/static/icon/popups-icon-05.png" mode="widthFix"></image>
|
||||
<text class="text">文件</text>
|
||||
</view>
|
||||
|
||||
<u-action-sheet :actions="callActions" cancelText="取消" @close="callShow = false" @select="singleCall"
|
||||
:show="callShow">
|
||||
</u-action-sheet>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import im from '@/utils/im/index.js'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
callActions: [{
|
||||
type: 0,
|
||||
name: '语音通话'
|
||||
},
|
||||
{
|
||||
type: 1,
|
||||
name: '视频通话'
|
||||
}
|
||||
],
|
||||
callShow: false
|
||||
}
|
||||
},
|
||||
props: {
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
conversationType: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
targetId: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
user() {
|
||||
return this.$store.getters.sender
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
singleCall(e) {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '功能正在开发中'
|
||||
})
|
||||
// CallLib.startSingleCall(this.targetId, e.type, '');
|
||||
// uni.redirectTo({
|
||||
// url: '/pages/im/private/call?targetId=' + this.targetId + '&mediaType=' + e.type
|
||||
// })
|
||||
},
|
||||
onPopupsItem(type) {
|
||||
switch (type) {
|
||||
case 'picture':
|
||||
uni.chooseImage({
|
||||
count: 9,
|
||||
sourceType: ['album'],
|
||||
success: res => {
|
||||
im.sentImage(this.conversationType, this.targetId, res.tempFilePaths[0],
|
||||
this.user, (
|
||||
res) => {
|
||||
this.success()
|
||||
})
|
||||
}
|
||||
})
|
||||
break;
|
||||
case 'camera':
|
||||
uni.chooseImage({
|
||||
sourceType: ['camera'],
|
||||
success: res => {
|
||||
im.sentImage(this.conversationType, this.targetId, res.tempFilePaths[0],
|
||||
this.user, (
|
||||
res) => {
|
||||
this.success()
|
||||
})
|
||||
}
|
||||
})
|
||||
break;
|
||||
case 'video':
|
||||
this.callShow = true
|
||||
break;
|
||||
case 'location':
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '功能正在开发中'
|
||||
})
|
||||
// uni.chooseLocation({
|
||||
// success: res => {
|
||||
// console.log(res);
|
||||
// this.success()
|
||||
// }
|
||||
// })
|
||||
break;
|
||||
case 'redpacket':
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '功能正在开发中'
|
||||
})
|
||||
break;
|
||||
case 'file':
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '功能正在开发中'
|
||||
})
|
||||
break;
|
||||
}
|
||||
},
|
||||
// 处理返回
|
||||
success() {
|
||||
this.$emit('success')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.sent--popups {
|
||||
background: white;
|
||||
padding: 30rpx 15rpx;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
|
||||
.item {
|
||||
width: 150rpx;
|
||||
margin: 15rpx;
|
||||
}
|
||||
|
||||
.text {
|
||||
text-align: center;
|
||||
font-size: 26rpx;
|
||||
color: #555;
|
||||
padding-top: 15rpx;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 110rpx;
|
||||
height: 110rpx;
|
||||
margin: 0 20rpx;
|
||||
border-radius: 20rpx;
|
||||
background: #F3F6FB;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
84
pages/im/components/sentText.nvue
Normal file
84
pages/im/components/sentText.nvue
Normal file
@@ -0,0 +1,84 @@
|
||||
<template>
|
||||
<view class="sent--text">
|
||||
<input class="input" type="text" @focus="focus" @blur="blur" v-model="inputTxt" confirm-type="send"
|
||||
@confirm="sent" cursor-spacing="10" />
|
||||
<!-- <button class="button" size="mini" :disabled="disabled" @click="sent">发送</button> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import im from '@/utils/im/index.js'
|
||||
import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
conversationType: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
targetId: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
inputTxt: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
disabled() {
|
||||
return this.inputTxt.length === 0
|
||||
},
|
||||
user() {
|
||||
return this.$store.getters.sender
|
||||
}
|
||||
},
|
||||
created() {
|
||||
RongIMLib.getTextMessageDraft(this.conversationType, this.targetId, ({
|
||||
draft
|
||||
}) => {
|
||||
draft ? this.inputTxt = draft : ''
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
RongIMLib.saveTextMessageDraft(this.conversationType, this.targetId, this.inputTxt, (res) => {
|
||||
console.log('销毁组件之前，保存草稿信息，但是没有执行', res);
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
// 发送文本消息
|
||||
sent() {
|
||||
if (!this.disabled) {
|
||||
RongIMLib.clearTextMessageDraft(this.conversationType, this.targetId)
|
||||
im.sentText(this.conversationType, this.targetId, this.inputTxt, this.user, () => {
|
||||
this.$emit('success')
|
||||
this.inputTxt = ''
|
||||
})
|
||||
}
|
||||
},
|
||||
focus() {
|
||||
this.$emit('focus')
|
||||
},
|
||||
blur() {
|
||||
this.$emit('blur')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.sent--text {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
|
||||
.input {
|
||||
background: #F3F6FB;
|
||||
height: 70rpx;
|
||||
width: 500rpx;
|
||||
border-radius: 10rpx;
|
||||
margin-right: 15rpx;
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
144
pages/im/components/sentVoice.nvue
Normal file
144
pages/im/components/sentVoice.nvue
Normal file
@@ -0,0 +1,144 @@
|
||||
<template>
|
||||
<view class="send--voice">
|
||||
<view class="voice" hover-class="chat-hover" @touchstart="startRecord" @touchend="stopRecord">
|
||||
<text class="button">按住说话</text>
|
||||
</view>
|
||||
<!-- 录音中提示 -->
|
||||
<view class="modal" v-if="showRecordTip">
|
||||
<image class="icon" src="@/static/icon/record-icon.png" mode="widthFix"></image>
|
||||
<text class="text">录音中 {{recordTime}} s</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import im from '@/utils/im/index.js'
|
||||
import permision from '@/utils/permission.js'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
conversationType: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
targetId: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showRecordTip: false,
|
||||
recordTime: 60,
|
||||
interval: 0,
|
||||
maxRecordTime: 60,
|
||||
recorderManager: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
user() {
|
||||
return this.$store.getters.sender
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.recorderManager = uni.getRecorderManager()
|
||||
},
|
||||
methods: {
|
||||
// 检查安卓录制权限
|
||||
async getAndroidPermission() {
|
||||
return await permision.requestAndroidPermission('android.permission.RECORD_AUDIO')
|
||||
},
|
||||
// 录制语音消息
|
||||
startRecord() {
|
||||
this.getAndroidPermission().then(code => {
|
||||
switch (code) {
|
||||
case 1:
|
||||
this.showRecordTip = true
|
||||
this.recorderManager.start()
|
||||
this.interval = setInterval(() => {
|
||||
this.recordTime -= 1
|
||||
if (this.recordTime === 0) {
|
||||
this.stopRecord()
|
||||
}
|
||||
}, 1000)
|
||||
break;
|
||||
case 0:
|
||||
uni.showToast({
|
||||
title: '暂无麦克风权限，请前往应用设置开启麦克风',
|
||||
icon: 'none'
|
||||
})
|
||||
break;
|
||||
case -1:
|
||||
uni.showToast({
|
||||
title: '应用权限错误',
|
||||
icon: 'none'
|
||||
})
|
||||
break;
|
||||
}
|
||||
})
|
||||
},
|
||||
// 结束录音
|
||||
stopRecord(e) {
|
||||
if (!this.showRecordTip) return
|
||||
this.recorderManager.stop()
|
||||
clearInterval(this.interval)
|
||||
// 监听录音结束
|
||||
this.recorderManager.onStop(res => {
|
||||
im.sentVoice(this.conversationType, this.targetId, res.tempFilePath, (this.maxRecordTime -
|
||||
this
|
||||
.recordTime), this.user, () => {
|
||||
setTimeout(() => {
|
||||
this.$emit('success')
|
||||
}, 500)
|
||||
})
|
||||
this.recordTime = this.maxRecordTime
|
||||
this.showRecordTip = false
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.send--voice {
|
||||
.voice {
|
||||
background: $window-color;
|
||||
height: 70rpx;
|
||||
line-height: 70rpx;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 500rpx;
|
||||
border-radius: 10rpx;
|
||||
margin-right: 15rpx;
|
||||
|
||||
.button {
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.modal {
|
||||
background: rgba(0, 0, 0, .6);
|
||||
position: fixed;
|
||||
height: 200rpx;
|
||||
width: 300rpx;
|
||||
border-radius: 10rpx;
|
||||
z-index: 99;
|
||||
top: 550rpx;
|
||||
left: 225rpx;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.icon {
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 28rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
73
pages/im/components/showImage.nvue
Normal file
73
pages/im/components/showImage.nvue
Normal file
@@ -0,0 +1,73 @@
|
||||
<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;
|
||||
line-height: 34rpx;
|
||||
color: $text-gray-m;
|
||||
}
|
||||
|
||||
.msg--image {
|
||||
padding: 20rpx;
|
||||
|
||||
&.left {
|
||||
border-radius: 0 20rpx 20rpx 20rpx;
|
||||
background: white;
|
||||
}
|
||||
|
||||
&.right {
|
||||
border-radius: 20rpx 0 20rpx 20rpx;
|
||||
background: #34CE98;
|
||||
}
|
||||
|
||||
.img {
|
||||
width: 150rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
54
pages/im/components/showText.nvue
Normal file
54
pages/im/components/showText.nvue
Normal file
@@ -0,0 +1,54 @@
|
||||
<template>
|
||||
<view class="msg--text">
|
||||
<text class="name" v-if="!guest && name">{{ name }}</text>
|
||||
<text class="im--text" :class="guest ? 'right': 'left'">{{ msg.content }}</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'showText',
|
||||
props: {
|
||||
msg: {
|
||||
type: Object,
|
||||
default: {}
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
guest: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.msg--text {
|
||||
.name {
|
||||
font-size: 24rpx;
|
||||
line-height: 34rpx;
|
||||
color: $text-gray-m;
|
||||
}
|
||||
|
||||
.im--text {
|
||||
max-width: 500rpx;
|
||||
padding: 20rpx;
|
||||
line-height: 44rpx;
|
||||
font-size: 32rpx;
|
||||
|
||||
&.left {
|
||||
border-radius: 0 20rpx 20rpx 20rpx;
|
||||
background: white;
|
||||
}
|
||||
|
||||
&.right {
|
||||
border-radius: 20rpx 0 20rpx 20rpx;
|
||||
background: $main-color;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
106
pages/im/components/showVoice.nvue
Normal file
106
pages/im/components/showVoice.nvue
Normal file
@@ -0,0 +1,106 @@
|
||||
<template>
|
||||
<view class="">
|
||||
<text class="name" v-if="!guest && name">{{ 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">{{msg.duration}}"</text>
|
||||
<image v-if="guest" class="icon" src="@/static/icon/audio_white.png" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'showVoice',
|
||||
props: {
|
||||
msg: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {
|
||||
local: '',
|
||||
remote: '',
|
||||
objectName: '',
|
||||
duration: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
guest: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 播放语音消息
|
||||
onPlayMsg() {
|
||||
uni.downloadFile({
|
||||
url: this.msg.remote,
|
||||
success: (res) => {
|
||||
if (res.statusCode === 200) {
|
||||
let innerAudioContext = uni.createInnerAudioContext()
|
||||
innerAudioContext.src = res.tempFilePath
|
||||
if (this.audioContextPaused) {
|
||||
innerAudioContext.play()
|
||||
this.audioContextPaused = false
|
||||
return
|
||||
}
|
||||
innerAudioContext.stop()
|
||||
innerAudioContext.onStop(resStop => {
|
||||
this.audioContextPaused = true
|
||||
})
|
||||
innerAudioContext.onError(err => {
|
||||
console.log(err);
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.name {
|
||||
font-size: 24rpx;
|
||||
line-height: 34rpx;
|
||||
color: $text-gray-m;
|
||||
}
|
||||
|
||||
.msg--voice {
|
||||
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;
|
||||
}
|
||||
|
||||
&.left {
|
||||
border-radius: 0 20rpx 20rpx 20rpx;
|
||||
background: white;
|
||||
|
||||
.duration {
|
||||
color: #333;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&.right {
|
||||
border-radius: 20rpx 0 20rpx 20rpx;
|
||||
background: $main-color;
|
||||
|
||||
.duration {
|
||||
color: white;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user