283 lines
6.6 KiB
Vue
283 lines
6.6 KiB
Vue
<template>
|
||
<view v-if="isShow">
|
||
<view class="uni-im-control-mark" @touchstart="closeMe" @click="closeMe">
|
||
</view>
|
||
<view class="control" :style="{top:data.top,left:data.left,right:data.right}">
|
||
<template v-if="data.msg.type == 'text'">
|
||
<view class="control-item" @click="copyText">
|
||
<!-- <uni-icons custom-prefix="uni-im-font" type="uni-im-copy" size="16" color="#FFF"></uni-icons> -->
|
||
<text class="control-item-text">复制</text>
|
||
</view>
|
||
<view class="control-item" @click="answer">
|
||
<!-- #ifdef H5 -->
|
||
<!-- <uni-icons type="undo" size="18" color="#FFF"></uni-icons> -->
|
||
<!-- #endif -->
|
||
<text class="control-item-text">回复</text>
|
||
</view>
|
||
<view class="control-item" @click="revokeMsg" v-if="canRevoke()">
|
||
<!-- #ifdef H5 -->
|
||
<!-- <uni-icons type="undo" size="18" color="#FFF"></uni-icons> -->
|
||
<!-- #endif -->
|
||
<text class="control-item-text">撤回</text>
|
||
</view>
|
||
</template>
|
||
<view class="control-item" @click="deleteMsg">
|
||
<!-- <uni-icons custom-prefix="uni-im-font" type="uni-im-delete" size="16" color="#FFF"></uni-icons> -->
|
||
<text class="control-item-text">删除</text>
|
||
</view>
|
||
<view class="control-item" @click="other">
|
||
<!-- <uni-icons custom-prefix="uni-im-font" type="uni-im-share" size="16" color="#FFF"></uni-icons> -->
|
||
<text class="control-item-text">转发</text>
|
||
</view>
|
||
</view>
|
||
<!-- #ifdef APP-NVUE -->
|
||
<view class="icon-box" :class="{isInTop:data.isInTop}" :style="{top:data.top}">
|
||
<view class="icon" :style="{right:iconBoxRight,left:iconBoxLeft}"></view>
|
||
</view>
|
||
<!-- #endif -->
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import uniIm from '@/uni_modules/uni-im/lib/main.js';
|
||
let fn;
|
||
export default {
|
||
// #ifdef APP-NVUE
|
||
beforeCreate() {
|
||
// const domModule = uni.requireNativePlugin('dom')
|
||
// domModule.addRule('fontFace', {
|
||
// 'fontFamily': "uni-im-font",
|
||
// 'src': "url('https://at.alicdn.com/t/c/font_3726059_lz2adc1jfve.ttf')"
|
||
// });
|
||
},
|
||
// #endif
|
||
data(){
|
||
return {
|
||
isShow:false,
|
||
data: {
|
||
top:'',
|
||
left:'',
|
||
right:'',
|
||
width:'',
|
||
msg:{},
|
||
isInTop:false
|
||
}
|
||
}
|
||
},
|
||
computed: {
|
||
iconBoxLeft(){
|
||
let n = parseInt(this.data.left)
|
||
return n ? n*3/2+55+'px' : ''
|
||
},
|
||
iconBoxRight(){
|
||
let n = parseInt(this.data.right)
|
||
return n ? n*3/2+50+'px' : ''
|
||
}
|
||
},
|
||
watch: {
|
||
isShow(isShow) {
|
||
// #ifdef H5
|
||
// 当蒙版弹出，鼠标右键就关闭uni-im-control
|
||
window.addEventListener('contextmenu', (e)=>{
|
||
if(fn){
|
||
fn(e)
|
||
}
|
||
})
|
||
if(isShow){
|
||
setTimeout(()=> {
|
||
fn = (e)=> {
|
||
if(this.isShow){
|
||
if(uniIm.isWidescreen){
|
||
this.isShow = false
|
||
}
|
||
e.preventDefault()
|
||
}
|
||
}
|
||
}, 0);
|
||
}else{
|
||
fn = false
|
||
}
|
||
// #endif
|
||
}
|
||
},
|
||
mounted() {
|
||
// console.log('this.isShow',this.isShow);
|
||
},
|
||
methods:{
|
||
show(data){
|
||
this.data = data
|
||
this.isShow = true
|
||
},
|
||
copyText(){
|
||
// console.log('setClipboardData');
|
||
console.log('this.data',this.data);
|
||
uni.setClipboardData({
|
||
data:this.data.msg.body,
|
||
complete:(e)=> {
|
||
uni.hideToast()
|
||
console.log(e);
|
||
this.isShow = false
|
||
}
|
||
})
|
||
},
|
||
canRevoke() {
|
||
let current_uid = uniCloud.getCurrentUserInfo().uid
|
||
let {group_id,from_uid,conversation_id,create_time} = this.data.msg || {}
|
||
// console.log('create_time',create_time);
|
||
// console.log('from_uid current_uid',this.data.msg,from_uid,current_uid);
|
||
|
||
// 判断是不是群主
|
||
let isGroupAdmin = false
|
||
if(group_id){
|
||
let conversation = uniIm.conversation.dataList.find(i=>i.id == conversation_id)
|
||
isGroupAdmin = conversation.group_info.user_id == current_uid
|
||
}
|
||
|
||
// console.log('isGroupAdmin',isGroupAdmin);
|
||
|
||
//如果是群主
|
||
if(isGroupAdmin){
|
||
return true
|
||
}else{
|
||
// 消息发送者为“当前用户”，且时间小于2分钟
|
||
return from_uid == current_uid && ( Date.now() - create_time < 1000*60*2 )
|
||
}
|
||
},
|
||
async revokeMsg(){
|
||
// 再判断一遍防止，分钟在2分钟的时候右键了，然后到了第3分钟才点下的情况
|
||
if(this.canRevoke()){
|
||
await uniIm.conversation.revokeMsg(this.data.msg)
|
||
}else{
|
||
uni.showToast({
|
||
title: '已超过2分钟，不能撤回',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
this.isShow = false
|
||
// console.log('this.data.msg',this.data.msg);
|
||
},
|
||
async answer(){
|
||
// console.log('answer')
|
||
this.$emit('answer',this.data.msgIndex)
|
||
this.isShow = false
|
||
},
|
||
async deleteMsg(){
|
||
// #ifndef H5
|
||
return this.other()
|
||
// #endif
|
||
this.data.msg.is_delete = true
|
||
// 存到本地
|
||
let conversation = await uniIm.conversation.get(this.data.msg.conversation_id)
|
||
conversation.msgManager.localMsg.update(this.data.msg.unique_id,this.data.msg)
|
||
this.isShow = false
|
||
},
|
||
other(){
|
||
uni.showToast({
|
||
title: '暂不支持',
|
||
icon: 'none',
|
||
complete: () => {
|
||
this.isShow = false
|
||
}
|
||
});
|
||
},
|
||
closeMe(){
|
||
setTimeout(()=>{
|
||
this.isShow = false
|
||
// console.log('closeMe');
|
||
},300)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
/* #ifndef APP-NVUE */
|
||
view {
|
||
display: flex;
|
||
flex-direction: column;
|
||
box-sizing: border-box;
|
||
}
|
||
/* #endif */
|
||
.control{
|
||
background-color:#252a30;
|
||
height: 55px;
|
||
// width: 375rpx;
|
||
position:fixed;
|
||
top:0;
|
||
border-radius: 5px;
|
||
flex-direction: row;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
/* #ifndef APP-NVUE */
|
||
z-index: 9999;
|
||
/* #endif */
|
||
}
|
||
.control-item{
|
||
width: 100rpx;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
.control-item-text{
|
||
font-size: 12px;
|
||
color:#FFFFFF;
|
||
margin-top: 1px;
|
||
/* #ifdef H5 */
|
||
cursor: pointer;
|
||
/* #endif */
|
||
}
|
||
/* #ifdef H5 */
|
||
.control-item-text:hover{
|
||
color:#4CD964;
|
||
}
|
||
/* #endif */
|
||
.uni-im-control-mark{
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 750rpx;
|
||
flex: 1;
|
||
height: 9000px;
|
||
|
||
/* #ifndef APP-NVUE */
|
||
width: 100vw !important;
|
||
height: 100vh !important;
|
||
z-index: 9999;
|
||
/* #endif */
|
||
|
||
/* #ifdef H5 */
|
||
max-height:100vh !important;
|
||
max-width:100vw !important;
|
||
/* #endif */
|
||
background-color: rgba(0,0,0,0.1);
|
||
}
|
||
|
||
/* #ifdef H5 */
|
||
@media screen and (min-width:960px){
|
||
.uni-im-control-mark{
|
||
background-color: rgba(255,255,255,0.05);
|
||
}
|
||
}
|
||
/* #endif */
|
||
|
||
.icon-box{
|
||
width: 750rpx;
|
||
height: 20px;
|
||
position: fixed;
|
||
transform:translate(0,-10px);
|
||
justify-content: center;
|
||
align-items: center;
|
||
/* #ifndef APP-NVUE */
|
||
z-index: 9999;
|
||
/* #endif */
|
||
}
|
||
.icon{
|
||
position: absolute;
|
||
background-color: #252a30;
|
||
width: 10px;
|
||
height: 10px;
|
||
transform: rotate(45deg);
|
||
}
|
||
.isInTop{
|
||
transform:translate(0,45px);
|
||
}
|
||
</style> |