【新增】 IM基础模块
This commit is contained in:
34
App.vue
34
App.vue
@@ -1,16 +1,20 @@
|
||||
|
||||
<script>
|
||||
import { getVersions } from './apis/interfaces/versions'
|
||||
import im from '@/public/im'
|
||||
import {
|
||||
getVersions
|
||||
} from './apis/interfaces/versions'
|
||||
import im from '@/utils/im/index.js'
|
||||
|
||||
export default {
|
||||
onLaunch: function() {
|
||||
im.initIm('lmxuhwaglu76d')
|
||||
|
||||
//#ifdef APP-PLUS
|
||||
// 获取系统版本号
|
||||
getVersions({
|
||||
platform: plus.os.name,
|
||||
version : plus.runtime.versionCode
|
||||
version: plus.runtime.versionCode
|
||||
}).then(res => {
|
||||
if(res.update){
|
||||
if (res.update) {
|
||||
uni.showModal({
|
||||
title: "更新提示",
|
||||
content: res.note || '版本更新信息',
|
||||
@@ -20,31 +24,33 @@
|
||||
if (plus.os.name == "Android") {
|
||||
uni.showToast({
|
||||
title: '新版本下载中，将在下载完成后自动为您安装更新包',
|
||||
icon : 'none'
|
||||
icon: 'none'
|
||||
})
|
||||
uni.downloadFile({
|
||||
url : res.info.download,
|
||||
success : apkPick=> {
|
||||
plus.runtime.install(apkPick.tempFilePath, '', installRES => {
|
||||
url: res.info.download,
|
||||
success: apkPick => {
|
||||
plus.runtime.install(apkPick
|
||||
.tempFilePath, '',
|
||||
installRES => {
|
||||
// 安装完成用于提示新版本引导，暂时无用
|
||||
}, installERR => {
|
||||
// 安装失败
|
||||
})
|
||||
},
|
||||
fail(err){
|
||||
fail(err) {
|
||||
uni.showToast({
|
||||
title: '安装包下载失败，请检查您的网络或稍后重试',
|
||||
icon : 'none'
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
// plus.runtime.openURL(res.info.download, err => {
|
||||
// console.log(err)
|
||||
// }, 'com.android.browser');
|
||||
} else{
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: 'IOS应用暂未上架，请打开测试(TestFlight)工具点击更新',
|
||||
icon : 'none'
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}
|
||||
@@ -54,7 +60,7 @@
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon : 'none'
|
||||
icon: 'none'
|
||||
})
|
||||
})
|
||||
//#endif
|
||||
|
||||
20
apis/interfaces/im.js
Normal file
20
apis/interfaces/im.js
Normal file
@@ -0,0 +1,20 @@
|
||||
import {
|
||||
request
|
||||
} from '../index'
|
||||
|
||||
const getFriends = () => {
|
||||
return request({
|
||||
url: 'im/friends',
|
||||
})
|
||||
}
|
||||
|
||||
const getUserInfo = async (targetId) => {
|
||||
const [err, res] = await request({
|
||||
url: 'im/userInfo/' + targetId,
|
||||
})
|
||||
return res
|
||||
}
|
||||
|
||||
export {
|
||||
getFriends
|
||||
}
|
||||
29
main.js
29
main.js
@@ -6,29 +6,28 @@
|
||||
* @LastEditTime: 2022-01-12 16:35:13
|
||||
*/
|
||||
import App from './App'
|
||||
|
||||
// #ifndef VUE3
|
||||
import Vue from 'vue'
|
||||
import store from './store'
|
||||
import uView from 'uview-ui';
|
||||
import { router, RouterMount } from 'router'
|
||||
import uView from 'uview-ui'
|
||||
import filters from './utils/filters.js'
|
||||
import {
|
||||
router,
|
||||
RouterMount
|
||||
} from 'router'
|
||||
|
||||
Object.keys(filters).forEach(key => {
|
||||
Vue.filter(key, filters[key])
|
||||
})
|
||||
|
||||
Vue.use(uView);
|
||||
Vue.use(router)
|
||||
|
||||
Vue.config.productionTip = false
|
||||
Vue.prototype.$store = store
|
||||
|
||||
App.mpType = 'app'
|
||||
const app = new Vue({
|
||||
store,
|
||||
...App
|
||||
})
|
||||
app.$mount()
|
||||
// #endif
|
||||
|
||||
// #ifdef VUE3
|
||||
import { createSSRApp } from 'vue'
|
||||
export function createApp() {
|
||||
const app = createSSRApp(App)
|
||||
return {
|
||||
app
|
||||
}
|
||||
}
|
||||
// #endif
|
||||
@@ -20,7 +20,8 @@
|
||||
"modules" : {
|
||||
"OAuth" : {},
|
||||
"Payment" : {},
|
||||
"Share" : {}
|
||||
"Share" : {},
|
||||
"SQLite" : {}
|
||||
},
|
||||
/* 应用发布信息 */
|
||||
"distribute" : {
|
||||
@@ -29,6 +30,7 @@
|
||||
"permissions" : [
|
||||
"<uses-feature android:name=\"android.hardware.camera\"/>",
|
||||
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
|
||||
@@ -36,12 +38,15 @@
|
||||
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
|
||||
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.INTERNET\"/>",
|
||||
"<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.USE_FINGERPRINT\"/>",
|
||||
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
|
||||
"<uses-permission android:name=\"android.permission.WRITE_EXTERNAL_STORAGE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
|
||||
],
|
||||
"autoSdkPermissions" : true
|
||||
@@ -63,8 +68,14 @@
|
||||
"__platform__" : [ "android" ]
|
||||
}
|
||||
},
|
||||
"share" : {},
|
||||
"ad" : {}
|
||||
"share" : {
|
||||
"weixin" : {
|
||||
"appid" : "wxb7e3c263a2a37ab9",
|
||||
"UniversalLinks" : ""
|
||||
}
|
||||
},
|
||||
"ad" : {},
|
||||
"push" : {}
|
||||
},
|
||||
"icons" : {
|
||||
"android" : {
|
||||
|
||||
16
pages.json
16
pages.json
@@ -374,6 +374,22 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/im/detail",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"app-plus": {
|
||||
"titleNView": {
|
||||
"type": "default",
|
||||
"buttons": [{
|
||||
"float": "right",
|
||||
"fontSrc": "/static/uniicons.ttf",
|
||||
"text": "\ue64d"
|
||||
}]
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/im/chum",
|
||||
"name": "ImChum",
|
||||
|
||||
276
pages/im/detail.vue
Normal file
276
pages/im/detail.vue
Normal file
@@ -0,0 +1,276 @@
|
||||
<template>
|
||||
<div>
|
||||
<scroll-view ref="scrollview" :scroll-y="true" class="scroll" :scroll-into-view="scrollIntoID"
|
||||
:scroll-with-animation="false">
|
||||
<view v-for="(item,index) in messages" :id="'chatId_'+index">
|
||||
<div :class="item.messageDirection == 1 ? 'right' : 'left'">
|
||||
<div class="avatar" v-if="item.messageDirection == 2">
|
||||
<u-avatar :src="userInfo.portraitUrl" @click="showFriend" shape="square" />
|
||||
</div>
|
||||
<div class="msg">
|
||||
{{ item.content.content }}
|
||||
<div class="status" v-if="item.messageDirection == 1">
|
||||
<u-icon v-if="item.sentStatus == 50" name="checkbox-mark" />
|
||||
<span v-else>未读</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="avatar" v-if="item.messageDirection == 1">
|
||||
<u-avatar text="Me" @click="showMine" shape="square" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="time">{{ item.sentTime|timeCustomCN }}</div>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<div class="footer">
|
||||
<div class="left">
|
||||
<u-icon name="volume" />
|
||||
</div>
|
||||
<div class="middle">
|
||||
<u--input autoBlur confirmHold confirmType="send" @confirm="send" v-model="inputTxt" />
|
||||
</div>
|
||||
<div class="right">
|
||||
<u-button type="primary" v-if="showSendButton" class="custom-style" text="发送" @click="send"></u-button>
|
||||
<u-icon v-else name="plus" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as RongIMLib from '@rongcloud/imlib-uni'
|
||||
import im from '@/utils/im/index.js'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
targetId: '',
|
||||
scrollIntoID: 'chatID_0',
|
||||
inputTxt: '',
|
||||
messages: [],
|
||||
conversationType: 1,
|
||||
totalCount: 0,
|
||||
userInfo: {
|
||||
name: '',
|
||||
userId: '',
|
||||
portraitUrl: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
onLoad(e) {
|
||||
this.targetId = e.targetId
|
||||
this.conversationType = e.conversationType // 会话类型
|
||||
// 消息总数量
|
||||
RongIMLib.getMessageCount(this.conversationType, this.targetId, ({
|
||||
code,
|
||||
count
|
||||
}) => {
|
||||
if (code == 0) {
|
||||
this.totalCount = count
|
||||
}
|
||||
})
|
||||
this.userInfo = this.$store.getters.userInfo(this.targetId)
|
||||
uni.setNavigationBarTitle({
|
||||
title: this.$store.getters.userInfo(this.targetId).name
|
||||
})
|
||||
|
||||
RongIMLib.clearMessagesUnreadStatus(this.conversationType, this.targetId, new Date().getTime())
|
||||
im.setNotifyBadge()
|
||||
RongIMLib.sendReadReceiptMessage(this.conversationType, this.targetId, new Date().getTime())
|
||||
|
||||
this.getMessageList()
|
||||
|
||||
// 监听消息回执
|
||||
RongIMLib.addReadReceiptReceivedListener((result) => {
|
||||
const res = result.data.message
|
||||
if (res.targetId == this.targetId) {
|
||||
this.getMessageList()
|
||||
}
|
||||
})
|
||||
},
|
||||
onUnload() {
|
||||
RongIMLib.clearReadReceiptReceivedListener()
|
||||
},
|
||||
computed: {
|
||||
showSendButton() {
|
||||
return this.inputTxt.length > 0
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$store.getters.newMessage': function(msg) {
|
||||
if (msg.targetId == this.targetId) {
|
||||
RongIMLib.clearMessagesUnreadStatus(msg.conversationType, msg.targetId, msg.sentTime)
|
||||
RongIMLib.sendReadReceiptMessage(msg.conversationType, msg.targetId, msg.sentTime)
|
||||
this.getMessageList()
|
||||
im.setNotifyBadge()
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getMessageList() {
|
||||
// 获取消息列表
|
||||
const objectNames = [
|
||||
'RC:TxtMsg',
|
||||
'RC:VcMsg',
|
||||
'RC:HQVCMsg',
|
||||
'RC:ImgMsg',
|
||||
'RC:GIFMsg',
|
||||
'RC:ImgTextMsg',
|
||||
'RC:FileMsg',
|
||||
'RC:LBSMsg',
|
||||
'RC:SightMsg',
|
||||
'RC:ReferenceMsg',
|
||||
'RC:CombineMsg'
|
||||
]
|
||||
const timeStamp = new Date().getTime()
|
||||
const count = 20 // 获取的消息数量
|
||||
const isForward = true // 是否向前获取
|
||||
RongIMLib.getHistoryMessagesByTimestamp(this.conversationType, this.targetId, objectNames, timeStamp,
|
||||
count,
|
||||
isForward,
|
||||
({
|
||||
code,
|
||||
messages
|
||||
}) => {
|
||||
if (code === 0) {
|
||||
this.messages = messages.reverse()
|
||||
this.scrollBottom()
|
||||
}
|
||||
}
|
||||
)
|
||||
},
|
||||
send() {
|
||||
im.sendMsg(this.conversationType, this.targetId, this.inputTxt, () => {
|
||||
this.getMessageList()
|
||||
this.inputTxt = ''
|
||||
})
|
||||
},
|
||||
showFriend() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/im/friends/info?targetId=' + this.targetId
|
||||
})
|
||||
},
|
||||
showMine() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/im/friends/mine'
|
||||
})
|
||||
},
|
||||
scrollBottom() {
|
||||
this.$nextTick(function() {
|
||||
setTimeout(() => {
|
||||
let len = this.messages.length
|
||||
if (len) {
|
||||
if (this.scrollIntoID == "chatId_" + (len - 1)) {
|
||||
this.scrollIntoID = "chatId_" + (len - 2)
|
||||
this.scrollBottom()
|
||||
} else if (this.scrollIntoID == "chatId_" + (len - 2)) {
|
||||
this.scrollIntoID = "chatId_" + (len - 1)
|
||||
} else {
|
||||
this.scrollIntoID = "chatId_" + (len - 1)
|
||||
}
|
||||
} else {
|
||||
this.scrollIntoID = "chatId_0";
|
||||
}
|
||||
}, 50)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$footer-height: 55px;
|
||||
|
||||
.scroll {
|
||||
height: calc(100vh - 55px);
|
||||
padding: 0 $uni-spacing-col-lg;
|
||||
}
|
||||
|
||||
.footer {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
align-items: center;
|
||||
height: $footer-height;
|
||||
background-color: $uni-bg-color-grey;
|
||||
|
||||
.u-icon {
|
||||
padding: $uni-spacing-col-sm;
|
||||
border: 1px solid $u-content-color;
|
||||
border-radius: $uni-border-radius-circle;
|
||||
}
|
||||
|
||||
.left {
|
||||
padding: 0 $uni-spacing-col-lg;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.middle {
|
||||
flex: 1;
|
||||
|
||||
.u-input {
|
||||
background-color: $uni-bg-color;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
padding: 0 $uni-spacing-col-lg;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-style {
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.time {
|
||||
text-align: center;
|
||||
font-size: $uni-font-size-sm;
|
||||
color: $u-light-color;
|
||||
}
|
||||
|
||||
.left,
|
||||
.right {
|
||||
display: flex;
|
||||
align-items: top;
|
||||
|
||||
.avatar {
|
||||
margin-top: $uni-spacing-col-base;
|
||||
}
|
||||
|
||||
.msg {
|
||||
font-size: $uni-font-size-lg;
|
||||
margin: $uni-spacing-col-base;
|
||||
padding: $uni-spacing-col-base + 5rpx;
|
||||
word-wrap: break-word;
|
||||
width: 70%;
|
||||
border-radius: $uni-border-radius-base;
|
||||
position: relative;
|
||||
|
||||
.status {
|
||||
position: absolute;
|
||||
right: 8rpx;
|
||||
bottom: 5rpx;
|
||||
font-size: $uni-font-size-base / 1.5;
|
||||
color: $uni-text-color-grey;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.left {
|
||||
.msg {
|
||||
background-color: $uni-bg-color-grey;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
justify-content: flex-end;
|
||||
|
||||
.msg {
|
||||
background-color: $u-primary-disabled;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,187 +1,130 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<block v-if="messageArr.length < 1">
|
||||
<view class="vertical null-list">
|
||||
<u-empty
|
||||
icon="http://cdn.uviewui.com/uview/empty/message.png"
|
||||
textColor="#999"
|
||||
text="暂无好友消息"
|
||||
>
|
||||
<template>
|
||||
<view class="null-list-btn" @click="openChum">开启聊天</view>
|
||||
</template>
|
||||
</u-empty>
|
||||
</view>
|
||||
</block>
|
||||
<block v-else>
|
||||
<view v-for="(item, index) in messageArr" :key="index" class="mssage-box">
|
||||
<view class="mssage-action" @click="openChum">
|
||||
<block v-if="item.cover === ''">
|
||||
<u-avatar
|
||||
clsss="mssage-action-cover"
|
||||
size="44"
|
||||
:text="item.text"
|
||||
font-size="14"
|
||||
randomBgColor
|
||||
></u-avatar>
|
||||
</block>
|
||||
<block v-else>
|
||||
<u-avatar
|
||||
clsss="mssage-action-cover"
|
||||
:src="item.cover"
|
||||
size="44"
|
||||
></u-avatar>
|
||||
</block>
|
||||
<view class="mssage-action-content">
|
||||
<view class="mssage-header">
|
||||
<view class="header-name">{{item.name}}</view>
|
||||
<view class="header-time">{{item.time}}</view>
|
||||
</view>
|
||||
<view class="mssage-msg">{{item.message}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
<div>
|
||||
<u-popup overlay mode="left" closeable closeOnClickOverlay :show="showLeft" @close="showLeft = false">
|
||||
<leftMenu></leftMenu>
|
||||
</u-popup>
|
||||
|
||||
<div class="container">
|
||||
<div class="msg-item u-border-bottom" v-for="(item, index) in conversations" @click="toDetail(item)">
|
||||
<div class="avatar">
|
||||
<u-badge numberType="ellipsis" max="99" shape="horn" absolute :offset="[-7, -7]"
|
||||
:value="item.unreadMessageCount" />
|
||||
<u-avatar shape="square" :src="friend(item.targetId).portraitUrl"></u-avatar>
|
||||
</div>
|
||||
<div class="content ">
|
||||
<div class="name">
|
||||
<h3>{{ friend(item.targetId).name }}</h3>
|
||||
<span class="time">{{ item.sentTime|timeCustomCN }}</span>
|
||||
</div>
|
||||
<div class="u-line-1">{{ item.latestMessage.content }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<u-loadmore status="nomore" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import { init, connect } from '@rongcloud/imlib-uni'
|
||||
import * as RongIMLib from '@rongcloud/imlib-uni'
|
||||
import im from '@/utils/im/index.js'
|
||||
import leftMenu from './components/left_menu.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
leftMenu
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
messageArr : [
|
||||
{
|
||||
cover: 'https://cdn.uviewui.com/uview/album/1.jpg',
|
||||
name: '班班五月',
|
||||
message: '咱们进直播间了吗？上课啦~今天教大家【拆解项目背后的逻辑】',
|
||||
time: '昨天'
|
||||
isShown: true, // 当前页面显示状态
|
||||
conversations: [], // 会话列表
|
||||
showLeft: false
|
||||
}
|
||||
},
|
||||
{
|
||||
cover: 'https://cdn.uviewui.com/uview/album/4.jpg',
|
||||
name: '周磊',
|
||||
message: '[语音]',
|
||||
time: '周一'
|
||||
},
|
||||
{
|
||||
cover: '',
|
||||
text: 'S',
|
||||
name: 'SKY',
|
||||
message: '谢谢',
|
||||
time: '2022/1/5'
|
||||
},
|
||||
{
|
||||
cover: 'https://cdn.uviewui.com/uview/album/5.jpg',
|
||||
name: '俊少',
|
||||
message: '[语音]',
|
||||
time: '2022/1/4'
|
||||
},
|
||||
],
|
||||
optionsAction: [
|
||||
{
|
||||
text: '删除',
|
||||
style: {
|
||||
backgroundColor: '#e6576b'
|
||||
computed: {
|
||||
friend() {
|
||||
return function(targetId) {
|
||||
return this.$store.getters.userInfo(targetId)
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
methods:{
|
||||
openChum(){
|
||||
uni.showToast({
|
||||
title: '聊聊系统正在开发中，敬请期待',
|
||||
icon : 'none'
|
||||
})
|
||||
}
|
||||
onLoad() {},
|
||||
onShow() {
|
||||
this.getConversationList()
|
||||
this.isShown = true
|
||||
},
|
||||
onHide() {
|
||||
this.isShown = false
|
||||
},
|
||||
onNavigationBarButtonTap(e) {
|
||||
|
||||
switch (e.index){
|
||||
case 1:
|
||||
uni.showToast({
|
||||
title: '聊聊好友系统正在开发中，敬请期待',
|
||||
icon : 'none'
|
||||
if (e.index == 0) {
|
||||
this.showLeft = true
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$store.getters.newMessage': function(n, o) {
|
||||
if (this.isShown) {
|
||||
this.getConversationList()
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getFriend(targetId) {
|
||||
return this.$store.getters.userInfo(targetId)
|
||||
},
|
||||
getConversationList() {
|
||||
const count = 1000
|
||||
const timestamp = 0 // 会话的时间戳（获取这个时间戳之前的会话列表，0 表示从最新开始获取）会话类型
|
||||
RongIMLib.getConversationList(undefined, count, timestamp, (res) => {
|
||||
if (res.code === 0 && res.conversations.length > 0) {
|
||||
this.conversations = res.conversations
|
||||
}
|
||||
})
|
||||
break;
|
||||
case 0:
|
||||
uni.showToast({
|
||||
title: '聊聊扫一扫系统正在开发中，敬请期待',
|
||||
icon : 'none'
|
||||
},
|
||||
// 进入聊天的详情页面，清理未读消息数量
|
||||
toDetail(item) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/im/detail?targetId=' + item.targetId +
|
||||
'&conversationType=' + item.conversationType
|
||||
})
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content{
|
||||
background-color: $window-color;
|
||||
min-height: 100vh;
|
||||
.null-list{
|
||||
height: 100vh;
|
||||
text-align: center;
|
||||
&-btn{
|
||||
margin-top: $margin * 2;
|
||||
line-height: 70rpx;
|
||||
color: $main-color;
|
||||
border:solid 1rpx $main-color;
|
||||
padding: 0 ($padding*3);
|
||||
font-size: $title-size-m;
|
||||
border-radius: 35rpx;
|
||||
box-sizing: border-box;
|
||||
<style scoped lang="scss">
|
||||
.container {
|
||||
padding: 0 $uni-spacing-col-lg $uni-spacing-col-lg $uni-spacing-col-lg;
|
||||
}
|
||||
}
|
||||
.mssage-box{
|
||||
background: white;
|
||||
.mssage-action{
|
||||
|
||||
.msg-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: $uni-spacing-col-lg 0;
|
||||
|
||||
.avatar {
|
||||
position: relative;
|
||||
padding: 20rpx $padding;
|
||||
&::after{
|
||||
position: absolute;
|
||||
left: $padding + 108;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
content: " ";
|
||||
height: 1rpx;
|
||||
background: $border-color;
|
||||
margin-right: $uni-spacing-col-lg;
|
||||
|
||||
.u-badge {
|
||||
z-index: 9;
|
||||
}
|
||||
&-content{
|
||||
position: absolute;
|
||||
top: 20rpx;
|
||||
height: 44px;
|
||||
left: $padding + 108;
|
||||
right: $margin;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
.mssage-header{
|
||||
display: flex;
|
||||
font-size: $title-size;
|
||||
line-height: 40rpx;
|
||||
justify-content: space-between;
|
||||
.header-name{
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
@extend .nowrap;
|
||||
}
|
||||
.header-time{
|
||||
padding-left: $padding;
|
||||
font-size: $title-size-sm - 2;
|
||||
color: $text-gray;
|
||||
|
||||
.name {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.time {
|
||||
font-size: $uni-font-size-sm;
|
||||
color: $uni-text-color-grey;
|
||||
}
|
||||
}
|
||||
.mssage-msg{
|
||||
font-size: $title-size-sm - 2;
|
||||
color: $text-gray;
|
||||
@extend .nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-item:last-child{
|
||||
.mssage-action::after{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.u-line-1 {
|
||||
color: $u-info;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
37
public/im.js
37
public/im.js
@@ -1,37 +0,0 @@
|
||||
|
||||
/**
|
||||
* Web唐明明
|
||||
* 匆匆数载恍如梦，岁月迢迢华发增。
|
||||
* 碌碌无为枉半生，一朝惊醒万事空。
|
||||
* moduleName: 融云im
|
||||
*/
|
||||
|
||||
|
||||
import {
|
||||
init,
|
||||
connect,
|
||||
addConnectionStatusListener,
|
||||
addReceiveMessageListener
|
||||
} from '@rongcloud/imlib-uni'
|
||||
|
||||
export default {
|
||||
// 初始化
|
||||
imInit(){
|
||||
init('lmxuhwaglu76d')
|
||||
connect('token', res => {
|
||||
console.log(res)
|
||||
})
|
||||
this.imMonitor()
|
||||
},
|
||||
// 监听器
|
||||
imMonitor(){
|
||||
// 添加连接状态监听函数
|
||||
addConnectionStatusListener(res => {
|
||||
console.log(res.data)
|
||||
})
|
||||
// 添加消息监听函数
|
||||
addReceiveMessageListener(res => {
|
||||
console.log(res)
|
||||
})
|
||||
}
|
||||
}
|
||||
@@ -1,4 +1,3 @@
|
||||
|
||||
/**
|
||||
* Web唐明明
|
||||
* 匆匆数载恍如梦，岁月迢迢华发增。
|
||||
@@ -7,14 +6,15 @@
|
||||
|
||||
import Vue from 'vue'
|
||||
import Vuex from 'vuex'
|
||||
import im from './modules/im.js'
|
||||
|
||||
Vue.use(Vuex)
|
||||
|
||||
export default new Vuex.Store({
|
||||
state: {
|
||||
token : uni.getStorageSync('token') || '',
|
||||
address : {},
|
||||
refresh : 0
|
||||
token: uni.getStorageSync('token') || '',
|
||||
address: {},
|
||||
refresh: 0
|
||||
},
|
||||
getters: {
|
||||
getToken: state => {
|
||||
@@ -38,5 +38,8 @@ export default new Vuex.Store({
|
||||
setRefresh(state, value) {
|
||||
state.refresh = value
|
||||
}
|
||||
},
|
||||
modules: {
|
||||
im
|
||||
}
|
||||
})
|
||||
|
||||
57
store/modules/im.js
Normal file
57
store/modules/im.js
Normal file
@@ -0,0 +1,57 @@
|
||||
import {
|
||||
getUserInfo
|
||||
} from "@/apis/interfaces/im.js"
|
||||
|
||||
export default {
|
||||
state: {
|
||||
newMsg: {},
|
||||
friends: [],
|
||||
sender: {}
|
||||
},
|
||||
getters: {
|
||||
newMessage(state) {
|
||||
return state.newMsg
|
||||
},
|
||||
friends(state) {
|
||||
return state.friends
|
||||
},
|
||||
userInfo: (state) => (targetId) => {
|
||||
if (state.friends.filter((item) => item.userId == targetId)[0]) {
|
||||
return state.friends.filter((item) => String(item.userId) == targetId)[0]
|
||||
} else {
|
||||
return getUserInfo()
|
||||
}
|
||||
},
|
||||
sender(state) {
|
||||
return state.sender
|
||||
}
|
||||
},
|
||||
mutations: {
|
||||
newMessage(state, msg) {
|
||||
Vue.set(state, 'newMsg', msg)
|
||||
},
|
||||
updateFriends(state, list) {
|
||||
state.friends = list
|
||||
},
|
||||
SET_state_sender(state, userInfo) {
|
||||
state.sender = userInfo
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
newMessage({
|
||||
commit
|
||||
}, msg) {
|
||||
commit('newMessage', msg)
|
||||
},
|
||||
updateFriends({
|
||||
commit
|
||||
}, list) {
|
||||
commit('updateFriends', list)
|
||||
},
|
||||
setSenderInfo({
|
||||
commit
|
||||
}, userInfo) {
|
||||
commit('SET_state_sender', userInfo)
|
||||
}
|
||||
}
|
||||
}
|
||||
89
utils/filters.js
Normal file
89
utils/filters.js
Normal file
@@ -0,0 +1,89 @@
|
||||
import store from '@/store/index.js'
|
||||
|
||||
/*
|
||||
* 截断hash
|
||||
*/
|
||||
const filterHash = (str, num) => {
|
||||
let length = num || 16
|
||||
return String(str).substr(0, length) + '...' + String(str).substr(-4)
|
||||
}
|
||||
|
||||
const timeCustomCN = (val) => {
|
||||
val = timeStamp(val, 'Y-m-d H:i:s')
|
||||
let currentDate = new Date();
|
||||
let currentD = currentDate.getDate();
|
||||
let currentYear = currentDate.getFullYear();
|
||||
let currentMonth = currentDate.getMonth() + 1;
|
||||
let date = val.substring(0, 19);
|
||||
date = date.replace(/-/g, '/');
|
||||
let valDate = new Date(date);
|
||||
let valD = valDate.getDate();
|
||||
let valYear = valDate.getFullYear();
|
||||
let valMonth = valDate.getMonth() + 1;
|
||||
// 判断是否属于今天，计算时分
|
||||
let difftime = (currentDate - valDate) / 1000;
|
||||
if (currentYear === valYear && currentMonth === valMonth && currentD === valD) {
|
||||
let minute = parseInt(difftime % 3600 / 60);
|
||||
if (minute <= 60) {
|
||||
return minute === 0 ? '刚刚' : minute + '分钟前';
|
||||
} else {
|
||||
return (minute * 60).toFixed(0) + '小时前';
|
||||
}
|
||||
} else {
|
||||
// 计算天
|
||||
if (currentYear === valYear && currentMonth === valMonth && currentD - 1 === valD) {
|
||||
return '昨天';
|
||||
} else {
|
||||
let days = Math.abs(currentDate.getTime() - valDate.getTime()) / (1000 * 60 * 60 * 24);
|
||||
return Math.ceil(days) + '天前';
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
const timeStamp = (timestamp, formats) => {
|
||||
/*
|
||||
** 时间戳转换成指定格式日期
|
||||
** eg.
|
||||
** dateFormat(11111111111111, 'Y年m月d日 H时i分')
|
||||
** → "2322年02月06日 03时45分"
|
||||
*/
|
||||
// formats格式包括
|
||||
// 1. Y-m-d
|
||||
// 2. Y-m-d H:i:s
|
||||
// 3. Y年m月d日
|
||||
// 4. Y年m月d日 H时i分
|
||||
formats = formats || 'Y-m-d';
|
||||
|
||||
var zero = function(value) {
|
||||
if (value < 10) {
|
||||
return '0' + value;
|
||||
}
|
||||
return value;
|
||||
};
|
||||
var myDate = timestamp ? new Date(timestamp) : new Date();
|
||||
|
||||
var year = myDate.getFullYear();
|
||||
var month = zero(myDate.getMonth() + 1);
|
||||
var day = zero(myDate.getDate());
|
||||
|
||||
var hour = zero(myDate.getHours());
|
||||
var minite = zero(myDate.getMinutes());
|
||||
var second = zero(myDate.getSeconds());
|
||||
|
||||
return formats.replace(/Y|m|d|H|i|s/ig, function(matches) {
|
||||
return ({
|
||||
Y: year,
|
||||
m: month,
|
||||
d: day,
|
||||
H: hour,
|
||||
i: minite,
|
||||
s: second
|
||||
})[matches];
|
||||
});
|
||||
}
|
||||
|
||||
export default {
|
||||
filterHash,
|
||||
timeCustomCN
|
||||
}
|
||||
44
utils/im/api.js
Normal file
44
utils/im/api.js
Normal file
@@ -0,0 +1,44 @@
|
||||
const api_url = 'http://api.zh.shangkelian.cn/api/im'
|
||||
|
||||
/**
|
||||
* 获取币种余额
|
||||
*/
|
||||
export const getToken = (uid) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.request({
|
||||
method: 'GET',
|
||||
url: api_url + '/token/' + uid,
|
||||
success: (res) => {
|
||||
if (res.statusCode === 200) {
|
||||
resolve(res.data.data)
|
||||
} else {
|
||||
reject(res.message)
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取好友列表
|
||||
*/
|
||||
export const getFriends = () => {
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.request({
|
||||
method: 'GET',
|
||||
url: api_url + '/friends',
|
||||
success: (res) => {
|
||||
if (res.statusCode === 200) {
|
||||
resolve(res.data.data)
|
||||
} else {
|
||||
reject(res.message)
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
export default {
|
||||
getToken,
|
||||
getFriends
|
||||
}
|
||||
142
utils/im/index.js
Normal file
142
utils/im/index.js
Normal file
@@ -0,0 +1,142 @@
|
||||
import * as RongIMLib from '@rongcloud/imlib-uni'
|
||||
import store from '@/store/index.js'
|
||||
import {
|
||||
getFriends
|
||||
} from '@/apis/interfaces/im.js'
|
||||
|
||||
const initIm = (KEY) => {
|
||||
RongIMLib.init(KEY)
|
||||
addListeners()
|
||||
}
|
||||
|
||||
const setNotifyBadge = (count) => {
|
||||
// 获取未读消息数量
|
||||
RongIMLib.getTotalUnreadCount(({
|
||||
code,
|
||||
count
|
||||
}) => {
|
||||
if (code === 0) {
|
||||
if (count > 0) {
|
||||
uni.setTabBarBadge({
|
||||
index: 2,
|
||||
text: String(count > 99 ? '99+' : count)
|
||||
})
|
||||
} else {
|
||||
uni.removeTabBarBadge({
|
||||
index: 2
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 连接IM服务
|
||||
* @param {string} token token
|
||||
* @param {object} userInfo {userId: string, name: string, portraitUrl: string}
|
||||
*/
|
||||
const connect = (token, userInfo) => {
|
||||
RongIMLib.connect(token, res => {
|
||||
console.log('连接结果', res);
|
||||
})
|
||||
|
||||
store.dispatch('setSenderInfo', userInfo)
|
||||
|
||||
setNotifyBadge()
|
||||
}
|
||||
|
||||
const addListeners = () => {
|
||||
// 添加连接状态监听函数
|
||||
RongIMLib.addConnectionStatusListener((res) => {
|
||||
console.log('连接状态监', res.data.status);
|
||||
})
|
||||
// 添加消息监听函数
|
||||
RongIMLib.addReceiveMessageListener((res) => {
|
||||
console.log('收到消息', res.data.message);
|
||||
newMessage(res.data.message)
|
||||
})
|
||||
}
|
||||
|
||||
// 维护消息列表
|
||||
const newMessage = (msg) => {
|
||||
RongIMLib.getConversationNotificationStatus(msg.conversationType, msg.targetId, ({
|
||||
code,
|
||||
status
|
||||
}) => {
|
||||
if (code === 0) {
|
||||
if (status) {
|
||||
triTone()
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
setNotifyBadge()
|
||||
|
||||
store.dispatch('newMessage', msg)
|
||||
}
|
||||
|
||||
// 播放状态
|
||||
let tipState = false
|
||||
|
||||
const triTone = () => {
|
||||
if (tipState == false) {
|
||||
const innerAudioContext = uni.createInnerAudioContext()
|
||||
innerAudioContext.autoplay = true
|
||||
innerAudioContext.src = '/static/tri-tone.mp3'
|
||||
innerAudioContext.onPlay(() => {
|
||||
tipState = true
|
||||
})
|
||||
innerAudioContext.onEnded(() => {
|
||||
tipState = false
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 发送消息
|
||||
* @param {number} conversationType 消息类型
|
||||
* @param {string} targetId 会话id
|
||||
* @param {string} content 消息内容
|
||||
* @param {function} callback 回调函数
|
||||
*/
|
||||
const sendMsg = (conversationType, targetId, content, callback) => {
|
||||
const msg = {
|
||||
conversationType: conversationType,
|
||||
targetId: String(targetId),
|
||||
content: {
|
||||
objectName: 'RC:TxtMsg',
|
||||
content: content,
|
||||
user: store.getters.sender
|
||||
}
|
||||
}
|
||||
RongIMLib.sendMessage(msg, ({
|
||||
code,
|
||||
messageId
|
||||
}) => {
|
||||
if (code === 0) {
|
||||
callback(messageId)
|
||||
} else {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '发送失败'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 同步好友信息，保存头像地址等
|
||||
*/
|
||||
const syncFriends = () => {
|
||||
getFriends().then(res => {
|
||||
store.dispatch('updateFriends', res)
|
||||
})
|
||||
}
|
||||
|
||||
export default {
|
||||
initIm,
|
||||
connect,
|
||||
sendMsg,
|
||||
setNotifyBadge,
|
||||
syncFriends
|
||||
}
|
||||
Reference in New Issue
Block a user