TmOct5/ZhHealth
1
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

图片消息发送

Browse Source
This commit is contained in:
Jason.Chen
2022-02-07 17:22:09 +08:00
parent d27e8c4f58
commit 9b6cb99541
9 changed files with 221 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
App.vue
View File

@@ -5,7 +5,7 @@
export default { export default {
onLaunch: function() { onLaunch: function() {
im.initIm('lmxuhwaglu76d') im.initIm('lmxuhwaglu76d')
// return return
//#ifdef APP-PLUS //#ifdef APP-PLUS
// 获取系统版本号 // 获取系统版本号
getVersions({ getVersions({

16
manifest.json
View File

@@ -22,7 +22,9 @@
"Payment" : {}, "Payment" : {},
"Share" : {}, "Share" : {},
"SQLite" : {}, "SQLite" : {},
"VideoPlayer" : {} "VideoPlayer" : {},
"Geolocation" : {},
"Fingerprint" : {}
}, },
/* 应用发布信息 */ /* 应用发布信息 */
"distribute" : { "distribute" : {
@@ -78,7 +80,17 @@
} }
}, },
"ad" : {}, "ad" : {},
"push" : {} "push" : {},
"geolocation" : {
"amap" : {
"__platform__" : [ "android" ],
"appkey_ios" : "",
"appkey_android" : "05b7f32ca9c897c8b63c505d92cd654b"
},
"system" : {
"__platform__" : [ "android" ]
}
}
}, },
"icons" : { "icons" : {
"android" : { "android" : {

283
pages/im/components/sentPopups.nvue
View File

@@ -1,119 +1,166 @@
<template> <template>
<view class="sent--popups" v-if="show"> <view class="sent--popups u-border-top" v-if="show">
<view class="sent--popups--item" @click="onPopupsItem('picture')"> <view class="sent--popups--item" @click="onPopupsItem('picture')">
<image class="sent--popups--icon" src="@/static/icon/popups-icon-00.png" mode="widthFix"></image> <image class="sent--popups--icon" src="@/static/icon/popups-icon-00.png" mode="widthFix"></image>
<text class="sent--popups--text">相册</text> <text class="sent--popups--text">相册</text>
</view> </view>
<view class="sent--popups--item" @click="onPopupsItem('film')"> <view class="sent--popups--item" @click="onPopupsItem('camera')">
<image class="sent--popups--icon" src="@/static/icon/popups-icon-01.png" mode="widthFix"></image> <image class="sent--popups--icon" src="@/static/icon/popups-icon-01.png" mode="widthFix"></image>
<text class="sent--popups--text">拍摄</text> <text class="sent--popups--text">拍摄</text>
</view> </view>
<view class="sent--popups--item" @click="onPopupsItem('video')"> <view class="sent--popups--item" @click="onPopupsItem('video')">
<image class="sent--popups--icon" src="@/static/icon/popups-icon-02.png" mode="widthFix"></image> <image class="sent--popups--icon" src="@/static/icon/popups-icon-02.png" mode="widthFix"></image>
<text class="sent--popups--text">视频通话</text> <text class="sent--popups--text">视频通话</text>
</view> </view>
<view class="sent--popups--item" @click="onPopupsItem('location')"> <view class="sent--popups--item" @click="onPopupsItem('location')">
<image class="sent--popups--icon" src="@/static/icon/popups-icon-03.png" mode="widthFix"></image> <image class="sent--popups--icon" src="@/static/icon/popups-icon-03.png" mode="widthFix"></image>
<text class="sent--popups--text">位置</text> <text class="sent--popups--text">位置</text>
</view> </view>
<view class="sent--popups--item" @click="onPopupsItem('redpacket')"> <view class="sent--popups--item" @click="onPopupsItem('redpacket')">
<image class="sent--popups--icon" src="@/static/icon/popups-icon-04.png" mode="widthFix"></image> <image class="sent--popups--icon" src="@/static/icon/popups-icon-04.png" mode="widthFix"></image>
<text class="sent--popups--text">红包</text> <text class="sent--popups--text">红包</text>
</view> </view>
<view class="sent--popups--item" @click="onPopupsItem('file')"> <view class="sent--popups--item" @click="onPopupsItem('file')">
<image class="sent--popups--icon" src="@/static/icon/popups-icon-05.png" mode="widthFix"></image> <image class="sent--popups--icon" src="@/static/icon/popups-icon-05.png" mode="widthFix"></image>
<text class="sent--popups--text">文件</text> <text class="sent--popups--text">文件</text>
</view> </view>
</view>
</template> <u-action-sheet :actions="callActions" cancelText="取消" @close="callShow = false" @select="singleCall"
:show="callShow">
<script> </u-action-sheet>
export default { </view>
data() { </template>
return {
<script>
}; import im from '@/utils/im/index.js'
},
props:{ export default {
show: { data() {
type: Boolean, return {
default: false callActions: [{
} type: 0,
}, name: '语音通话'
methods:{ },
onPopupsItem(type){ {
switch (type){ type: 1,
case 'picture': name: '视频通话'
uni.chooseImage({ }
count: 9, ],
sourceType: ['album'], callShow: false
success: res => { }
this.onSentValue(type, res.tempFilePaths) },
} props: {
}) show: {
break; type: Boolean,
case 'film': default: false
uni.chooseImage({ },
sourceType: ['camera'], conversationType: {
success: res => { type: Number,
this.onSentValue(type, res.tempFilePaths) default: 0
} },
}) targetId: {
break; type: String,
case 'video': default: ''
this.onSentValue(type, {}) }
break; },
case 'location': methods: {
uni.chooseLocation({ singleCall(e) {
success: res=> { uni.showToast({
this.onSentValue(type, { icon: 'none',
address: res.address, title: '功能正在开发中'
longitude: res.longitude, })
latitude: res.latitude, // CallLib.startSingleCall(this.targetId, e.type, '');
name: res.name // uni.redirectTo({
}) // url: '/pages/im/private/call?targetId=' + this.targetId + '&mediaType=' + e.type
} // })
}) },
break; onPopupsItem(type) {
case 'redpacket': switch (type) {
console.log('红包') case 'picture':
break; uni.chooseImage({
case 'file': count: 9,
console.log('文件选择') sourceType: ['album'],
break; success: res => {
} im.sentImage(this.conversationType, this.targetId, res.tempFilePaths[0], (
}, res) => {
// 处理返回 this.success()
onSentValue(type, value){ })
this.$emit('onVlaue', { type, value }) }
this.show = false })
} break;
} case 'camera':
} uni.chooseImage({
</script> sourceType: ['camera'],
success: res => {
<style lang="scss" scoped> im.sentImage(this.conversationType, this.targetId, res.tempFilePaths[0], (
.sent--popups{ res) => {
background: white; this.success()
padding: 30rpx 15rpx; })
flex-wrap: wrap; }
flex-direction: row; })
&--item{ break;
width: 150rpx; case 'video':
margin: 15rpx; this.callShow = true
} break;
&--text{ case 'location':
text-align: center; uni.showToast({
font-size: 26rpx; icon: 'none',
color: #555; title: '功能正在开发中'
padding-top: 15rpx; })
} // uni.chooseLocation({
&--icon{ // success: res => {
width: 110rpx; // console.log(res);
height: 110rpx; // this.success()
margin: 0 20rpx; // }
border-radius: 20rpx; // })
background: #F3F6FB; 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> </style>

2
pages/im/components/sentText.nvue
View File

@@ -7,7 +7,7 @@
<script> <script>
import im from '@/utils/im/index.js' import im from '@/utils/im/index.js'
import * as RongIMLib from "@/uni_modules/RongCloud-IMWrapper/js_sdk/index" import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
export default { export default {
props: { props: {

2
pages/im/components/sentVoice.nvue
View File

@@ -13,7 +13,7 @@
<script> <script>
import im from '@/utils/im/index.js' import im from '@/utils/im/index.js'
import permision from "@/utils/permission.js" import permision from '@/utils/permission.js'
export default { export default {
props: { props: {

12
pages/im/components/showImage.nvue
View File

@@ -1,6 +1,6 @@
<template> <template>
<view class="im--img" :class="guest ? 'right': 'left'"> <view class="im--img" :class="guest ? 'right': 'left'">
<image class="src" :src="msg" @click="openImg" mode="widthFix"></image> <image class="src" :src="msg.thumbnail" @click="previewImage" mode="widthFix"></image>
</view> </view>
</template> </template>
@@ -9,8 +9,8 @@
name: 'showImage', name: 'showImage',
props: { props: {
msg: { msg: {
type: String, type: Object,
default: 'https://images.pexels.com/photos/9024609/pexels-photo-9024609.jpeg' default: {}
}, },
guest: { guest: {
type: Boolean, type: Boolean,
@@ -18,9 +18,11 @@
} }
}, },
methods: { methods: {
openImg() { previewImage() {
uni.previewImage({ uni.previewImage({
urls: [this.msg], urls: [
this.msg.remote
],
current: 1 current: 1
}) })
} }

6
pages/im/components/showText.nvue
View File

@@ -1,6 +1,6 @@
<template> <template>
<view class="im--box"> <view class="im--box">
<text class="im--text" :class="guest ? 'right': 'left'">{{msg}}</text> <text class="im--text" :class="guest ? 'right': 'left'">{{ msg.content }}</text>
</view> </view>
</template> </template>
@@ -14,8 +14,8 @@
}, },
props: { props: {
msg: { msg: {
type: String, type: Object,
default: '' default: {}
}, },
guest: { guest: {
type: Boolean, type: Boolean,

55
pages/im/private/chat.nvue
View File

@@ -13,9 +13,9 @@
<show-voice v-if="item.objectName === 'RC:HQVCMsg'" :guest="item.messageDirection == 1" <show-voice v-if="item.objectName === 'RC:HQVCMsg'" :guest="item.messageDirection == 1"
:msg="item.content" /> :msg="item.content" />
<show-image v-if="item.objectName === 'RC:ImgMsg'" :guest="item.messageDirection == 1" <show-image v-if="item.objectName === 'RC:ImgMsg'" :guest="item.messageDirection == 1"
:msg="item.content.content" /> :msg="item.content" />
<show-text v-if="item.objectName === 'RC:TxtMsg'" :guest="item.messageDirection == 1" <show-text v-if="item.objectName === 'RC:TxtMsg'" :guest="item.messageDirection == 1"
:msg="item.content.content" /> :msg="item.content" />
<view class="state" v-if="item.messageDirection == 1"> <view class="state" v-if="item.messageDirection == 1">
<text class="state-text">{{ item.sentStatus == 50 ? '已读': '未读'}}</text> <text class="state-text">{{ item.sentStatus == 50 ? '已读': '未读'}}</text>
</view> </view>
@@ -24,7 +24,7 @@
</cell> </cell>
<cell class="cell-footer" ref="chatBottom"></cell> <cell class="cell-footer" ref="chatBottom"></cell>
</list> </list>
<!-- footer --> <!-- footer -->
<view class="chat-footer"> <view class="chat-footer">
<view class="msg-type" @click="changeMessageType"> <view class="msg-type" @click="changeMessageType">
<image class="msg-type-icon" src="@/static/icon/key-icon.png" v-if="chatType === 0" mode="widthFix"> <image class="msg-type-icon" src="@/static/icon/key-icon.png" v-if="chatType === 0" mode="widthFix">
@@ -32,30 +32,34 @@
<image class="msg-type-icon" src="@/static/icon/msg-icon.png" v-if="chatType === 1" mode="widthFix"> <image class="msg-type-icon" src="@/static/icon/msg-icon.png" v-if="chatType === 1" mode="widthFix">
</image> </image>
</view> </view>
<sent-voice v-if="chatType === 0" :conversationType="conversationType" :targetId="targetId" @success="getMessageList" /> <sent-voice v-if="chatType === 0" :conversationType="conversationType" :targetId="targetId"
<sent-text v-if="chatType === 1" :conversationType="conversationType" :targetId="targetId" @success="getMessageList" /> @success="getMessageList" />
<view class="msg-type msg-push" @click="showPopups = !showPopups"> <sent-text v-if="chatType === 1" :conversationType="conversationType" :targetId="targetId"
<image class="msg-type-icon" src="@/static/icon/popups-icon.png"></image> @success="getMessageList" />
<view class="msg-type msg-push" @click="showPopups = !showPopups">
<image class="msg-type-icon" src="@/static/icon/popups-icon.png"></image>
</view> </view>
</view> </view>
<!-- 弹出层 --> <!-- 弹出层 -->
<u-line v-if="showPopups" color="#f5f5f5"></u-line> <sent-popups :show="showPopups" :conversationType="conversationType" :targetId="targetId"
<sent-popups :show="showPopups" @onVlaue="onValue"></sent-popups> @success="() => {showPopups = false, getMessageList()}"></sent-popups>
</view> </view>
</template> </template>
<script> <script>
import { timeCustomCN } from '@/utils/filters.js' import {
import * as RongIMLib from "@/uni_modules/RongCloud-IMWrapper/js_sdk/index" timeCustomCN
} from '@/utils/filters.js'
import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
import im from '@/utils/im/index.js' import im from '@/utils/im/index.js'
import showVoice from '../components/showVoice' import showVoice from '../components/showVoice'
import showImage from '../components/showImage' import showImage from '../components/showImage'
import showText from '../components/showText' import showText from '../components/showText'
import sentText from '../components/sentText' import sentText from '../components/sentText'
import sentVoice from '../components/sentVoice' import sentVoice from '../components/sentVoice'
import sentPopups from '../components/sentPopups' import sentPopups from '../components/sentPopups'
const ChatList = uni.requireNativePlugin('dom') const ChatList = uni.requireNativePlugin('dom')
export default { export default {
data() { data() {
@@ -68,7 +72,7 @@
userId: '', userId: '',
portraitUrl: '' portraitUrl: ''
}, },
chatType: 1 ,// 0 语音，1 文本 chatType: 1, // 0 语音，1 文本
showPopups: false showPopups: false
} }
}, },
@@ -77,7 +81,7 @@
showImage, showImage,
showText, showText,
sentText, sentText,
sentVoice, sentVoice,
sentPopups sentPopups
}, },
onLoad(e) { onLoad(e) {
@@ -125,15 +129,15 @@
this.chatType = this.chatType === 1 ? 0 : 1 this.chatType = this.chatType === 1 ? 0 : 1
}, },
// 获取消息列表 // 获取消息列表
getMessageList() { getMessageList() {
im.getMessageList( im.getMessageList(
this.conversationType, this.conversationType,
this.targetId, this.targetId,
new Date().getTime(), new Date().getTime(),
10, 10,
true, true,
(messages) => { (messages) => {
console.log(messages); console.log('获取到的消息', messages);
this.messages = messages.reverse() this.messages = messages.reverse()
this.scrollBottom() this.scrollBottom()
}) })
@@ -153,11 +157,6 @@
animated: false animated: false
}) })
}, 50) }, 50)
},
// 上传文件信息
onValue(e){
this.showPopups = false
console.log(e)
} }
} }
} }

5
utils/im/message.js
View File

@@ -107,14 +107,13 @@ const sentVoice = (conversationType, targetId, voiceUrl, time, callback) => {
}) })
} }
const sentImage = (conversationType, targetId, imageUrl, time, callback) => { const sentImage = (conversationType, targetId, imageUrl, callback) => {
const msg = { const msg = {
conversationType: conversationType, conversationType: conversationType,
targetId: String(targetId), targetId: String(targetId),
content: { content: {
objectName: 'RC:ImgMsg', objectName: 'RC:ImgMsg',
local: 'file:///' + plus.io.convertLocalFileSystemURL(imageUrl), local: 'file:///' + plus.io.convertLocalFileSystemURL(imageUrl)
duration: time
} }
} }
RongIMLib.sendMediaMessage(msg, { RongIMLib.sendMediaMessage(msg, {