图片消息发送
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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: {
|
||||
|
||||
@@ -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: {
|
||||
|
||||
@@ -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
|
||||
})
|
||||
}
|
||||
|
||||
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user