图片消息发送

This commit is contained in:
2022-02-07 17:22:09 +08:00
parent d27e8c4f58
commit 9b6cb99541
9 changed files with 221 additions and 162 deletions

View File

@@ -1,119 +1,166 @@
<template>
<view class="sent--popups" v-if="show">
<view class="sent--popups--item" @click="onPopupsItem('picture')">
<image class="sent--popups--icon" src="@/static/icon/popups-icon-00.png" mode="widthFix"></image>
<text class="sent--popups--text">相册</text>
</view>
<view class="sent--popups--item" @click="onPopupsItem('film')">
<image class="sent--popups--icon" src="@/static/icon/popups-icon-01.png" mode="widthFix"></image>
<text class="sent--popups--text">拍摄</text>
</view>
<view class="sent--popups--item" @click="onPopupsItem('video')">
<image class="sent--popups--icon" src="@/static/icon/popups-icon-02.png" mode="widthFix"></image>
<text class="sent--popups--text">视频通话</text>
</view>
<view class="sent--popups--item" @click="onPopupsItem('location')">
<image class="sent--popups--icon" src="@/static/icon/popups-icon-03.png" mode="widthFix"></image>
<text class="sent--popups--text">位置</text>
</view>
<view class="sent--popups--item" @click="onPopupsItem('redpacket')">
<image class="sent--popups--icon" src="@/static/icon/popups-icon-04.png" mode="widthFix"></image>
<text class="sent--popups--text">红包</text>
</view>
<view class="sent--popups--item" @click="onPopupsItem('file')">
<image class="sent--popups--icon" src="@/static/icon/popups-icon-05.png" mode="widthFix"></image>
<text class="sent--popups--text">文件</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
};
},
props:{
show: {
type: Boolean,
default: false
}
},
methods:{
onPopupsItem(type){
switch (type){
case 'picture':
uni.chooseImage({
count: 9,
sourceType: ['album'],
success: res => {
this.onSentValue(type, res.tempFilePaths)
}
})
break;
case 'film':
uni.chooseImage({
sourceType: ['camera'],
success: res => {
this.onSentValue(type, res.tempFilePaths)
}
})
break;
case 'video':
this.onSentValue(type, {})
break;
case 'location':
uni.chooseLocation({
success: res=> {
this.onSentValue(type, {
address: res.address,
longitude: res.longitude,
latitude: res.latitude,
name: res.name
})
}
})
break;
case 'redpacket':
console.log('红包')
break;
case 'file':
console.log('文件选择')
break;
}
},
// 处理返回
onSentValue(type, value){
this.$emit('onVlaue', { type, value })
this.show = false
}
}
}
</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;
}
}
<template>
<view class="sent--popups u-border-top" v-if="show">
<view class="sent--popups--item" @click="onPopupsItem('picture')">
<image class="sent--popups--icon" src="@/static/icon/popups-icon-00.png" mode="widthFix"></image>
<text class="sent--popups--text">相册</text>
</view>
<view class="sent--popups--item" @click="onPopupsItem('camera')">
<image class="sent--popups--icon" src="@/static/icon/popups-icon-01.png" mode="widthFix"></image>
<text class="sent--popups--text">拍摄</text>
</view>
<view class="sent--popups--item" @click="onPopupsItem('video')">
<image class="sent--popups--icon" src="@/static/icon/popups-icon-02.png" mode="widthFix"></image>
<text class="sent--popups--text">视频通话</text>
</view>
<view class="sent--popups--item" @click="onPopupsItem('location')">
<image class="sent--popups--icon" src="@/static/icon/popups-icon-03.png" mode="widthFix"></image>
<text class="sent--popups--text">位置</text>
</view>
<view class="sent--popups--item" @click="onPopupsItem('redpacket')">
<image class="sent--popups--icon" src="@/static/icon/popups-icon-04.png" mode="widthFix"></image>
<text class="sent--popups--text">红包</text>
</view>
<view class="sent--popups--item" @click="onPopupsItem('file')">
<image class="sent--popups--icon" src="@/static/icon/popups-icon-05.png" mode="widthFix"></image>
<text class="sent--popups--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: ''
}
},
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], (
res) => {
this.success()
})
}
})
break;
case 'camera':
uni.chooseImage({
sourceType: ['camera'],
success: res => {
im.sentImage(this.conversationType, this.targetId, res.tempFilePaths[0], (
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>

View File

@@ -7,7 +7,7 @@
<script>
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 {
props: {

View File

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

View File

@@ -1,6 +1,6 @@
<template>
<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>
</template>
@@ -9,8 +9,8 @@
name: 'showImage',
props: {
msg: {
type: String,
default: 'https://images.pexels.com/photos/9024609/pexels-photo-9024609.jpeg'
type: Object,
default: {}
},
guest: {
type: Boolean,
@@ -18,9 +18,11 @@
}
},
methods: {
openImg() {
previewImage() {
uni.previewImage({
urls: [this.msg],
urls: [
this.msg.remote
],
current: 1
})
}

View File

@@ -1,6 +1,6 @@
<template>
<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>
</template>
@@ -14,8 +14,8 @@
},
props: {
msg: {
type: String,
default: ''
type: Object,
default: {}
},
guest: {
type: Boolean,