|
|
|
|
@ -8,106 +8,263 @@ |
|
|
|
|
</u-navbar> |
|
|
|
|
</view> |
|
|
|
|
<view class="chat-hd" v-if="list.length>0"> |
|
|
|
|
<u-notice-bar :volume-icon="false" mode="horizontal" :list="list"></u-notice-bar> |
|
|
|
|
<u-notice-bar style="width: 100%;" :volume-icon="false" mode="horizontal" :list="list"></u-notice-bar> |
|
|
|
|
</view> |
|
|
|
|
<scroll-view class="chat-bd" scroll-y :class="list.length==0?(isOpen?'chat-bd-active1':'chat-bd-active'):(isOpen?'chat-bd-on':'')"> |
|
|
|
|
<view class="item"> |
|
|
|
|
<view class="fl"><image src="@/static/nv.png"></image></view> |
|
|
|
|
<view class="item" :class="userId != a.rightUserId?'item-on':''" v-for="(a,index) in chatList" :key="index"> |
|
|
|
|
<template v-if="userId != a.rightUserId"> |
|
|
|
|
<view class="fr"> |
|
|
|
|
<view class="desc">{{a.message}}</view> |
|
|
|
|
</view> |
|
|
|
|
<view class="fl"><image :src="a.leftFaceImage"></image></view> |
|
|
|
|
</template> |
|
|
|
|
<template v-else> |
|
|
|
|
<view class="fl"><image :src="a.rightFaceImage"></image></view> |
|
|
|
|
<view class="fr"> |
|
|
|
|
<view class="name">李大花<text>陪玩师</text></view> |
|
|
|
|
<view class="desc">世间无敌，舍我其谁。霸气长存，风云变色</view> |
|
|
|
|
<view class="gift">送出礼物<image mode="widthFix" src="/static/logo.png"></image>棒棒糖<text>X3</text></view> |
|
|
|
|
<view class="yinping"> |
|
|
|
|
<view class="desc" v-if="a.type == 6 || a.type==3">{{a.message}}</view> |
|
|
|
|
<view class="gift" v-if="a.type == 5">送出礼物<image mode="widthFix" src="/static/logo.png"></image>棒棒糖<text>X3</text></view> |
|
|
|
|
<view class="yinping" v-if="a.type == 1"> |
|
|
|
|
<image src="@/static/chat-03.png"></image> 8” |
|
|
|
|
</view> |
|
|
|
|
<view class="video"> |
|
|
|
|
<view class="video" v-if="a.type == 2"> |
|
|
|
|
<video src=""></video> |
|
|
|
|
</view> |
|
|
|
|
<view class="img"> |
|
|
|
|
<view class="img" v-if="a.type == 4"> |
|
|
|
|
<image src="/static/pic.jpg"></image> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
<view class="item item-on"> |
|
|
|
|
<view class="fr"> |
|
|
|
|
<view class="desc">天天忙的要死，好久没联系了哈，你最近咋样啊？</view> |
|
|
|
|
</view> |
|
|
|
|
<view class="fl"><image src="@/static/nv.png"></image></view> |
|
|
|
|
</template> |
|
|
|
|
</view> |
|
|
|
|
</scroll-view> |
|
|
|
|
<view class="chat-fd"> |
|
|
|
|
<view class="a"> |
|
|
|
|
<view class="luyin"> |
|
|
|
|
<image src="/static/chat-01.png"></image> |
|
|
|
|
<view class="luyin" @click="toToggle()"> |
|
|
|
|
<image v-if="isToggle" src="/static/chat-01.png"></image> |
|
|
|
|
<image v-else src="/static/chat-05.png"></image> |
|
|
|
|
</view> |
|
|
|
|
<view class="input"> |
|
|
|
|
<!-- <editor placeholder="单行输入" @input="inputValue"></editor> --> |
|
|
|
|
<input type="text" v-model="keyword" placeholder="单行输入" /> |
|
|
|
|
<view class="input" v-if="isToggle"> |
|
|
|
|
<input type="text" v-model="content" placeholder="单行输入" /> |
|
|
|
|
<view class="more" @click="isOpen = !isOpen"> |
|
|
|
|
<u-icon name="more-dot-fill" color="#000000" size="30"></u-icon> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
<view class="btn"> |
|
|
|
|
<view class="input" v-else> |
|
|
|
|
<view class="star" v-if="isPlay">开始录音</view> |
|
|
|
|
<view class="star" v-else>停止录音</view> |
|
|
|
|
</view> |
|
|
|
|
<view class="btn" @click="toSend()"> |
|
|
|
|
发送 |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
<view class="b" v-if="isOpen"> |
|
|
|
|
<image src="@/static/chat-zhaopian.png"></image> |
|
|
|
|
<image src="@/static/chat-xiangji.png"></image> |
|
|
|
|
<image @click="uploadImg()" src="@/static/chat-zhaopian.png"></image> |
|
|
|
|
<image @click="uploadVideo()" src="@/static/chat-xiangji.png"></image> |
|
|
|
|
<image src="@/static/chat-yinshipin.png"></image> |
|
|
|
|
<image src="@/static/chat-liwu.png"></image> |
|
|
|
|
<image @click="openGift()" src="@/static/chat-liwu.png"></image> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
<u-popup v-model="show" mode="top" :mask-close-able='false' :zIndex="5"> |
|
|
|
|
<view class="permissions_box"> |
|
|
|
|
当您使用APP时，为了使用录音的功能，我们需要申请麦克风权限。 |
|
|
|
|
</view> |
|
|
|
|
</u-popup> |
|
|
|
|
</view> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
|
import ZIM from '@/js_sdk/zego-ZIMUniplugin-JS/lib/index.js'; |
|
|
|
|
ZIM.create({ appID: 267111980, appSign: 'afcaa90a7750ee556e450ca62287c5f9a362e9ed711789717cda0e18f088858e' }); |
|
|
|
|
const zim = ZIM.getInstance(); |
|
|
|
|
import permision from "@/js_sdk/wa-permission/permission.js" |
|
|
|
|
const recorderManager = uni.getRecorderManager(); |
|
|
|
|
const innerAudioContext = uni.createInnerAudioContext(); |
|
|
|
|
innerAudioContext.autoplay = true; |
|
|
|
|
let timer = 0; |
|
|
|
|
// import ZIM from '@/js_sdk/zego-ZIMUniplugin-JS/lib/index.js'; |
|
|
|
|
// ZIM.create({ appID: 267111980, appSign: 'afcaa90a7750ee556e450ca62287c5f9a362e9ed711789717cda0e18f088858e' }); |
|
|
|
|
// const zim = ZIM.getInstance(); |
|
|
|
|
export default { |
|
|
|
|
data() { |
|
|
|
|
return { |
|
|
|
|
id: "", |
|
|
|
|
isToggle: true, |
|
|
|
|
isOpen: false, |
|
|
|
|
title: "", |
|
|
|
|
keyword: "", |
|
|
|
|
content: "", |
|
|
|
|
userInfo: {}, |
|
|
|
|
list: [], |
|
|
|
|
itemList: [], |
|
|
|
|
chatList: [] |
|
|
|
|
chatList: [], |
|
|
|
|
userId: "", |
|
|
|
|
img: "", |
|
|
|
|
show: false, |
|
|
|
|
isPlay: true, |
|
|
|
|
|
|
|
|
|
}; |
|
|
|
|
}, |
|
|
|
|
onLoad(o) { |
|
|
|
|
this.userId = uni.getStorageSync("userInfo").id; |
|
|
|
|
this.id = o.id; |
|
|
|
|
this.getUserInfo(); |
|
|
|
|
this.getChatList(); |
|
|
|
|
}, |
|
|
|
|
onReady() { |
|
|
|
|
const that = this; |
|
|
|
|
this.toImLogin() |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 注册监听“收到单聊消息”的回调 |
|
|
|
|
zim.on('receivePeerMessage', function (zim, { messageList, fromConversationID }) { |
|
|
|
|
console.log('receivePeerMessage', messageList, fromConversationID); |
|
|
|
|
recorderManager.onStop(function (res) { |
|
|
|
|
that.uploadVideo(res.tempFilePath); |
|
|
|
|
clearInterval(timer); |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
innerAudioContext.onEnded(res=>{ |
|
|
|
|
that.isPlay = false |
|
|
|
|
}) |
|
|
|
|
// 注册监听“收到单聊消息”的回调 |
|
|
|
|
// zim.on('receivePeerMessage', function (zim, { messageList, fromConversationID }) { |
|
|
|
|
// console.log('receivePeerMessage', messageList, fromConversationID); |
|
|
|
|
// }); |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
toImLogin() { |
|
|
|
|
zim.login(uni.getStorageSync("userInfo").id, { |
|
|
|
|
userName: uni.getStorageSync("userInfo").nickname, |
|
|
|
|
token: uni.getStorageSync("chatToken"), |
|
|
|
|
}) |
|
|
|
|
.then(function (res) { |
|
|
|
|
// 登录成功 |
|
|
|
|
console.log(res,"登录成功") |
|
|
|
|
toToggle() { |
|
|
|
|
this.isToggle = !this.isToggle |
|
|
|
|
}, |
|
|
|
|
toOpen(){ |
|
|
|
|
// APP检查权限 |
|
|
|
|
if(uni.getSystemInfoSync().platform == 'android') { |
|
|
|
|
plus.android.checkPermission( |
|
|
|
|
'android.permission.RECORD_AUDIO', |
|
|
|
|
granted => { |
|
|
|
|
if (granted.checkResult==-1){ |
|
|
|
|
that.show=true |
|
|
|
|
}else{ |
|
|
|
|
that.show=false |
|
|
|
|
if(that.isPlay){ |
|
|
|
|
innerAudioContext.pause(); |
|
|
|
|
that.isPlay = false |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
error => { |
|
|
|
|
console.error('Error checking permission:', error.message); |
|
|
|
|
} |
|
|
|
|
); |
|
|
|
|
that.requestAndroidPermission('android.permission.RECORD_AUDIO') |
|
|
|
|
return ; |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
recorderAuthModal: function () { |
|
|
|
|
const that = this; |
|
|
|
|
uni.showModal({ |
|
|
|
|
title: '温馨提示', |
|
|
|
|
content: '为了麦克风的功能，我们需要申请麦克风权限，请您确认授权，否则无法使用该功能~', |
|
|
|
|
cancelText: '关闭', |
|
|
|
|
confirmText: '去授权', |
|
|
|
|
success(res) { |
|
|
|
|
that.show=false |
|
|
|
|
if (res.confirm) { |
|
|
|
|
permision.gotoAppPermissionSetting() |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
.catch(function (err) { |
|
|
|
|
// 登录失败 |
|
|
|
|
}, |
|
|
|
|
async requestAndroidPermission(permisionID) { |
|
|
|
|
const that = this; |
|
|
|
|
var result = await permision.requestAndroidPermission(permisionID); |
|
|
|
|
if(result != 1){ |
|
|
|
|
that.recorderAuthModal(); |
|
|
|
|
}else{ |
|
|
|
|
that.show =false |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
//上传语音 |
|
|
|
|
uploadVideo(filePath) { |
|
|
|
|
const that = this |
|
|
|
|
uni.uploadFile({ |
|
|
|
|
name: 'file', |
|
|
|
|
url: that.$baseUrl+'/prod-api/common/upload', |
|
|
|
|
filePath, |
|
|
|
|
success: (res) => { |
|
|
|
|
const {code, fileName, url, msg} = JSON.parse(res.data); |
|
|
|
|
if(code == 200){ |
|
|
|
|
that.img = url |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
fail: (err) => { |
|
|
|
|
console.log(err) |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
//上传视频 |
|
|
|
|
uploadVideo() { |
|
|
|
|
const that = this |
|
|
|
|
uni.chooseVideo({ |
|
|
|
|
count: 1, |
|
|
|
|
sourceType: ["album", "camera"], |
|
|
|
|
success: (res1) => { |
|
|
|
|
console.log(res1) |
|
|
|
|
uni.uploadFile({ |
|
|
|
|
name: 'file', |
|
|
|
|
url: that.$baseUrl+'/prod-api/common/upload', |
|
|
|
|
filePath: res1.tempFilePath, |
|
|
|
|
success: (res) => { |
|
|
|
|
const {code, fileName, url, msg} = JSON.parse(res.data); |
|
|
|
|
if(code == 200){ |
|
|
|
|
that.img = url |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
fail: (err) => { |
|
|
|
|
console.log(err) |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
fail(err){ |
|
|
|
|
console.log("fail",err) |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
//上传图片 |
|
|
|
|
uploadImg() { |
|
|
|
|
const that = this |
|
|
|
|
uni.chooseImage({ |
|
|
|
|
count: 1, |
|
|
|
|
sizeType: ["original"], //可以指定是原图还是压缩图，默认二者都有 |
|
|
|
|
sourceType: ["album", "camera"], |
|
|
|
|
success: (res1) => { |
|
|
|
|
console.log(res1) |
|
|
|
|
uni.uploadFile({ |
|
|
|
|
name: 'file', |
|
|
|
|
url: that.$baseUrl+'/prod-api/common/upload', |
|
|
|
|
filePath: res1.tempFilePath, |
|
|
|
|
success: (res) => { |
|
|
|
|
const {code, fileName, url, msg} = JSON.parse(res.data); |
|
|
|
|
if(code == 200){ |
|
|
|
|
that.img = url |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
fail: (err) => { |
|
|
|
|
console.log(err) |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
fail(err){ |
|
|
|
|
console.log("fail",err) |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
toSend() {}, |
|
|
|
|
//登录房间 |
|
|
|
|
toImLogin() { |
|
|
|
|
// zim.login(uni.getStorageSync("userInfo").id, { |
|
|
|
|
// userName: uni.getStorageSync("userInfo").nickname, |
|
|
|
|
// token: uni.getStorageSync("chatToken"), |
|
|
|
|
// }) |
|
|
|
|
// .then(function (res) { |
|
|
|
|
// // 登录成功 |
|
|
|
|
// console.log(res,"登录成功") |
|
|
|
|
// }) |
|
|
|
|
// .catch(function (err) { |
|
|
|
|
// // 登录失败 |
|
|
|
|
// console.log(err) |
|
|
|
|
// }); |
|
|
|
|
}, |
|
|
|
|
async getChatList(){ |
|
|
|
|
const { code, data , msg } = await this.$api.findChatList({formUserId: uni.getStorageSync("userInfo").id,toUserId: this.id}); |
|
|
|
|
if(code == 200){ |
|
|
|
|
@ -119,7 +276,7 @@ |
|
|
|
|
if(code == 200){ |
|
|
|
|
this.userInfo = data; |
|
|
|
|
this.itemList = ["查看TA的主页", (data.isCare == 0?"关注":"取消关注"), "举报", (data.isBlack == 0?"加入黑名单":"移除黑名单")]; |
|
|
|
|
this.title = data.nickname; |
|
|
|
|
this.title = data.nickname+(data.isOnline == 1?"_(在线)":"_(离线)"); |
|
|
|
|
this.getConfigData(); |
|
|
|
|
}else{ |
|
|
|
|
uni.showToast({ |
|
|
|
|
@ -133,9 +290,7 @@ |
|
|
|
|
async getConfigData() { |
|
|
|
|
const that = this; |
|
|
|
|
let res1 = await that.$api.getConfigData({dictType: 'CONFIG_MESSAGE_NOTICE'}); |
|
|
|
|
if(res1.data && res1.data.length > 0){ |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
that.list = [res1.data.content] |
|
|
|
|
}, |
|
|
|
|
//加入黑名单 |
|
|
|
|
async toYichu(type) { |
|
|
|
|
@ -174,6 +329,7 @@ |
|
|
|
|
<style scoped lang="scss"> |
|
|
|
|
.chat{ |
|
|
|
|
&-navbar{ |
|
|
|
|
width: 100%; |
|
|
|
|
.slot-wrap{ |
|
|
|
|
margin-right: 30rpx; |
|
|
|
|
} |
|
|
|
|
@ -356,6 +512,13 @@ |
|
|
|
|
justify-content: space-between; |
|
|
|
|
margin-left: 20rpx; |
|
|
|
|
margin-right: 20rpx; |
|
|
|
|
font-size: 30rpx; |
|
|
|
|
.star{ |
|
|
|
|
flex: 1; |
|
|
|
|
line-height: 80rpx; |
|
|
|
|
text-align: center; |
|
|
|
|
background: #FFFFFF; |
|
|
|
|
} |
|
|
|
|
editor,input{ |
|
|
|
|
flex: 1; |
|
|
|
|
height: 50rpx; |
|
|
|
|
|
