2025.03.10 工作代码提交
This commit is contained in:
parent
fc83ac9e06
commit
c27827a337
|
|
@ -1522,13 +1522,28 @@ const util = {
|
|||
* @param {Object} option.type 聊天类型 C2C单聊 GROUP群聊
|
||||
*/
|
||||
toChat(option) {
|
||||
uni.navigateTo({
|
||||
url: util.setUrl('/pages/news/chat/chat', {
|
||||
name: option.name,
|
||||
msgId: option.msgId,
|
||||
type: option.type,
|
||||
num: option.num,
|
||||
// 跳转目标页面路由
|
||||
let target = 'pages/news/chat/chat'
|
||||
// 跳转路径
|
||||
let url = util.setUrl(`/${target}`, {
|
||||
name: option.name,
|
||||
msgId: option.msgId,
|
||||
type: option.type,
|
||||
num: option.num,
|
||||
})
|
||||
// 获取当前页面栈
|
||||
let pages = getCurrentPages();
|
||||
let find_index = pages.findIndex(node => node.route == target)
|
||||
|
||||
if (find_index > -1) {
|
||||
uni.navigateBack({
|
||||
delta: find_index,
|
||||
})
|
||||
uni.redirectTo({
|
||||
url,
|
||||
})
|
||||
} else uni.navigateTo({
|
||||
url,
|
||||
})
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@
|
|||
"name" : "九亿",
|
||||
"appid" : "__UNI__08B31BC",
|
||||
"description" : "",
|
||||
"versionName" : "1.0.13",
|
||||
"versionCode" : 1013,
|
||||
"versionName" : "1.0.14",
|
||||
"versionCode" : 1014,
|
||||
"transformPx" : false,
|
||||
/* 5+App特有相关 */
|
||||
"app-plus" : {
|
||||
|
|
|
|||
|
|
@ -776,6 +776,20 @@
|
|||
{
|
||||
"navigationBarTitleText" : "邀请加群"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/news/group/remove",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : "移除群成员"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/news/detail/user",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : "聊天信息"
|
||||
}
|
||||
}
|
||||
],
|
||||
|
||||
|
|
|
|||
|
|
@ -461,7 +461,6 @@
|
|||
dom.scrollToElement(element, {
|
||||
animated: true
|
||||
})
|
||||
console.log('current', current[tab_index])
|
||||
|
||||
// 如果视频切换
|
||||
if (current[tab_index] != currentLast[tab_index]) {
|
||||
|
|
|
|||
|
|
@ -1,192 +1,192 @@
|
|||
<script setup>
|
||||
/**
|
||||
* 视频举报
|
||||
*/
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
computed,
|
||||
getCurrentInstance
|
||||
} from 'vue'
|
||||
import {
|
||||
onLoad,
|
||||
} from '@dcloudio/uni-app'
|
||||
// 工具库
|
||||
import util from '@/common/js/util';
|
||||
// api
|
||||
import api from '@/api/index.js'
|
||||
// 视频菜单
|
||||
import videoMenu from '@/components/index/videoMenu.vue';
|
||||
/**
|
||||
* 视频举报
|
||||
*/
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
computed,
|
||||
getCurrentInstance
|
||||
} from 'vue'
|
||||
import {
|
||||
onLoad,
|
||||
} from '@dcloudio/uni-app'
|
||||
// 工具库
|
||||
import util from '@/common/js/util';
|
||||
// api
|
||||
import api from '@/api/index.js'
|
||||
// 视频菜单
|
||||
import videoMenu from '@/components/index/videoMenu.vue';
|
||||
|
||||
const {
|
||||
proxy
|
||||
} = getCurrentInstance()
|
||||
// 举报列表
|
||||
const reportList = reactive([{
|
||||
name: '发布不正当的内容或信息',
|
||||
},
|
||||
{
|
||||
name: '传播涩情资源',
|
||||
},
|
||||
{
|
||||
name: '冒充他人',
|
||||
},
|
||||
{
|
||||
name: '涉嫌诈骗',
|
||||
},
|
||||
{
|
||||
name: '侵犯权益',
|
||||
},
|
||||
{
|
||||
name: '其他',
|
||||
}
|
||||
])
|
||||
// 举报下标
|
||||
const reportIndex = ref('')
|
||||
// 表单
|
||||
const form = reactive({
|
||||
userId: '',
|
||||
videoId: '',
|
||||
reasonForReporting: '',
|
||||
particulars: '',
|
||||
videoPictureUrl: '',
|
||||
coverUrl: ''
|
||||
})
|
||||
// 列表数据
|
||||
const list = reactive({
|
||||
data: [],
|
||||
pageSize: 10,
|
||||
pageNum: 1,
|
||||
total: 0,
|
||||
})
|
||||
// 已选择的视频列表
|
||||
const videos = computed(() => {
|
||||
let result = form.videoId.map(item => {
|
||||
return list.data.find(node => node.videoId == item) || {}
|
||||
const {
|
||||
proxy
|
||||
} = getCurrentInstance()
|
||||
// 举报列表
|
||||
const reportList = reactive([{
|
||||
name: '发布不正当的内容或信息',
|
||||
},
|
||||
{
|
||||
name: '传播涩情资源',
|
||||
},
|
||||
{
|
||||
name: '冒充他人',
|
||||
},
|
||||
{
|
||||
name: '涉嫌诈骗',
|
||||
},
|
||||
{
|
||||
name: '侵犯权益',
|
||||
},
|
||||
{
|
||||
name: '其他',
|
||||
}
|
||||
])
|
||||
// 举报下标
|
||||
const reportIndex = ref('')
|
||||
// 表单
|
||||
const form = reactive({
|
||||
userId: '',
|
||||
videoId: '',
|
||||
reasonForReporting: '',
|
||||
particulars: '',
|
||||
videoPictureUrl: '',
|
||||
coverUrl: ''
|
||||
})
|
||||
// 列表数据
|
||||
const list = reactive({
|
||||
data: [],
|
||||
pageSize: 10,
|
||||
pageNum: 1,
|
||||
total: 0,
|
||||
})
|
||||
// 已选择的视频列表
|
||||
const videos = computed(() => {
|
||||
let result = form.videoId.map(item => {
|
||||
return list.data.find(node => node.videoId == item) || {}
|
||||
})
|
||||
return result
|
||||
})
|
||||
return result
|
||||
})
|
||||
|
||||
onLoad((option) => {
|
||||
// 被举报的用户id
|
||||
if (option.userId) form.userId = option.userId
|
||||
onLoad((option) => {
|
||||
// 被举报的用户id
|
||||
if (option.userId) form.userId = option.userId
|
||||
// 获取列表
|
||||
getList()
|
||||
})
|
||||
|
||||
/**
|
||||
* 选择举报列表
|
||||
* @param {Object} ev 携带参数
|
||||
*/
|
||||
function handleReportList(ev) {
|
||||
const index = ev.detail.value
|
||||
if (reportIndex.value === index) return
|
||||
reportIndex.value = index
|
||||
}
|
||||
|
||||
// 刷新列表
|
||||
function refreshList() {
|
||||
list.pageNum = 1
|
||||
list.total = 0
|
||||
getList()
|
||||
}
|
||||
|
||||
// 获取列表
|
||||
getList()
|
||||
})
|
||||
function getList() {
|
||||
//
|
||||
api.video.myWorks({
|
||||
query: {
|
||||
userId: form.userId,
|
||||
pageSize: list.pageSize,
|
||||
pageNum: list.pageNum,
|
||||
}
|
||||
}).then(rs => {
|
||||
if (rs.code == 200) {
|
||||
if (list.pageNum == 1) list.data.length = []
|
||||
list.data.push(...rs.rows)
|
||||
list.total = rs.total
|
||||
return
|
||||
}
|
||||
return
|
||||
util.alert({
|
||||
content: rs.msg,
|
||||
showCancel: false,
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 选择举报列表
|
||||
* @param {Object} ev 携带参数
|
||||
*/
|
||||
function handleReportList(ev) {
|
||||
const index = ev.detail.value
|
||||
if (reportIndex.value === index) return
|
||||
reportIndex.value = index
|
||||
}
|
||||
// 上传图片
|
||||
function uploadImg() {
|
||||
util.upload_image({
|
||||
type: 1,
|
||||
success: rs => {
|
||||
form.videoPictureUrl = rs.value
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 刷新列表
|
||||
function refreshList() {
|
||||
list.pageNum = 1
|
||||
list.total = 0
|
||||
getList()
|
||||
}
|
||||
/**
|
||||
* 删除多媒体
|
||||
* @param {Number} index 列表下标
|
||||
* @param {String} key 操作的键
|
||||
*/
|
||||
function removeMedia(key) {
|
||||
util.alert({
|
||||
content: '确认要删除吗？',
|
||||
}).then(rs => {
|
||||
if (key == 'videoId') {
|
||||
form.videoId = null
|
||||
form.coverUrl = null
|
||||
}
|
||||
if (key == 'videoPictureUrl') form.videoPictureUrl = null
|
||||
})
|
||||
}
|
||||
|
||||
// 获取列表
|
||||
function getList() {
|
||||
//
|
||||
api.video.myWorks({
|
||||
query: {
|
||||
userId: form.userId,
|
||||
pageSize: list.pageSize,
|
||||
pageNum: list.pageNum,
|
||||
// 视频举报
|
||||
function handleSubmit() {
|
||||
//
|
||||
const data = {
|
||||
...form
|
||||
}
|
||||
}).then(rs => {
|
||||
if (rs.code == 200) {
|
||||
if (list.pageNum == 1) list.data.length = []
|
||||
list.data.push(...rs.rows)
|
||||
list.total = rs.total
|
||||
|
||||
// 验证必填项
|
||||
if (reportIndex == '') {
|
||||
util.alert('请选择举报理由')
|
||||
return
|
||||
}
|
||||
util.alert({
|
||||
content: rs.msg,
|
||||
showCancel: false,
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// 上传图片
|
||||
function uploadImg() {
|
||||
util.upload_image({
|
||||
type: 1,
|
||||
success: rs => {
|
||||
form.videoPictureUrl = rs.value
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除多媒体
|
||||
* @param {Number} index 列表下标
|
||||
* @param {String} key 操作的键
|
||||
*/
|
||||
function removeMedia(key) {
|
||||
util.alert({
|
||||
content: '确认要删除吗？',
|
||||
}).then(rs => {
|
||||
if (key == 'videoId') {
|
||||
form.videoId = null
|
||||
form.coverUrl = null
|
||||
}
|
||||
if (key == 'videoPictureUrl') form.videoPictureUrl = null
|
||||
})
|
||||
}
|
||||
|
||||
// 视频举报
|
||||
function handleSubmit() {
|
||||
//
|
||||
const data = {
|
||||
...form
|
||||
}
|
||||
|
||||
// 验证必填项
|
||||
if (reportIndex == '') {
|
||||
util.alert('请选择举报理由')
|
||||
return
|
||||
}
|
||||
if (!data.particulars) {
|
||||
util.alert('详细描述不能为空')
|
||||
return
|
||||
}
|
||||
if (data.particulars.length > 500) {
|
||||
util.alert('详细描述自述超过500')
|
||||
return
|
||||
}
|
||||
|
||||
data.reasonForReporting = reportList[reportIndex.value].name
|
||||
|
||||
api.video.reportVideo({
|
||||
data: data,
|
||||
}).then(rs => {
|
||||
if (rs.code == 200) {
|
||||
util.alert('举报成功，请等待后台审核')
|
||||
setTimeout(() => {
|
||||
uni.navigateBack()
|
||||
}, 500)
|
||||
if (!data.particulars) {
|
||||
util.alert('详细描述不能为空')
|
||||
return
|
||||
}
|
||||
if (data.particulars.length > 500) {
|
||||
util.alert('详细描述自述超过500')
|
||||
return
|
||||
}
|
||||
util.alert({
|
||||
content: rs.msg,
|
||||
showCancel: false,
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// 选中视频信息
|
||||
function videoInfo(param) {
|
||||
console.log('选中视频信息', param);
|
||||
form.videoId = param.videoId;
|
||||
form.coverUrl = param.coverUrl;
|
||||
}
|
||||
data.reasonForReporting = reportList[reportIndex.value].name
|
||||
|
||||
api.video.reportVideo({
|
||||
data: data,
|
||||
}).then(rs => {
|
||||
if (rs.code == 200) {
|
||||
util.alert('举报成功，请等待后台审核')
|
||||
setTimeout(() => {
|
||||
uni.navigateBack()
|
||||
}, 500)
|
||||
return
|
||||
}
|
||||
util.alert({
|
||||
content: rs.msg,
|
||||
showCancel: false,
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// 选中视频信息
|
||||
function videoInfo(param) {
|
||||
form.videoId = param.videoId;
|
||||
form.coverUrl = param.coverUrl;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -290,66 +290,66 @@ function videoInfo(param) {
|
|||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
// 表单
|
||||
.form {
|
||||
|
||||
.hint {
|
||||
color: #a7a7a7;
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// 上传图片
|
||||
.uploadBox {
|
||||
// 表单
|
||||
.form {
|
||||
|
||||
//
|
||||
.uploads {
|
||||
.cartoon {
|
||||
top: 0;
|
||||
right: -100rpx;
|
||||
width: 530rpx;
|
||||
height: 249rpx;
|
||||
.hint {
|
||||
color: #a7a7a7;
|
||||
}
|
||||
}
|
||||
|
||||
// 上传图片
|
||||
.images .item {
|
||||
width: 150rpx;
|
||||
height: 150rpx;
|
||||
background-color: #F3F3F5;
|
||||
}
|
||||
.uploadBox {
|
||||
|
||||
// 列表
|
||||
.list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-gap: 20rpx;
|
||||
//
|
||||
.uploads {
|
||||
.cartoon {
|
||||
top: 0;
|
||||
right: -100rpx;
|
||||
width: 530rpx;
|
||||
height: 249rpx;
|
||||
}
|
||||
}
|
||||
|
||||
// 上传图片
|
||||
.images .item {
|
||||
width: 150rpx;
|
||||
height: 150rpx;
|
||||
background-color: #F3F3F5;
|
||||
}
|
||||
|
||||
// 列表
|
||||
.item {
|
||||
height: 290rpx;
|
||||
background-color: #F1F1F1;
|
||||
.list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-gap: 20rpx;
|
||||
|
||||
// 关闭
|
||||
.close {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
transform: translate(50%, -50%);
|
||||
z-index: 1;
|
||||
// 列表
|
||||
.item {
|
||||
height: 290rpx;
|
||||
background-color: #F1F1F1;
|
||||
|
||||
// 关闭
|
||||
.close {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
transform: translate(50%, -50%);
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 作品数量
|
||||
.product {
|
||||
.scroll {
|
||||
height: 80vh;
|
||||
// 作品数量
|
||||
.product {
|
||||
.scroll {
|
||||
height: 80vh;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,748 @@
|
|||
<script setup>
|
||||
/**
|
||||
* 聊天页面
|
||||
*/
|
||||
// 腾讯云聊天
|
||||
import TencentCloudChat from '@tencentcloud/chat';
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
nextTick,
|
||||
onUnmounted,
|
||||
onMounted,
|
||||
computed,
|
||||
getCurrentInstance,
|
||||
watch,
|
||||
} from 'vue'
|
||||
// api
|
||||
import api from '@/api/index.js'
|
||||
// 工具库
|
||||
import util from '@/common/js/util.js'
|
||||
import {
|
||||
onLoad,
|
||||
onReady,
|
||||
onPageScroll,
|
||||
onUnload
|
||||
} from "@dcloudio/uni-app"
|
||||
|
||||
// 单条消息
|
||||
import newsTemplate from './components/news-temp'
|
||||
// 表情
|
||||
import emoji from './emoji.vue'
|
||||
// 语音条
|
||||
import JyVoice from './jy-voice.vue'
|
||||
// 加号菜单
|
||||
import JyPlus from './jy-plus.vue'
|
||||
// 顶部
|
||||
import apex from '@/components/header/apex.vue'
|
||||
|
||||
import {
|
||||
useStore
|
||||
} from 'vuex'
|
||||
const {
|
||||
proxy
|
||||
} = getCurrentInstance()
|
||||
const store = useStore()
|
||||
|
||||
// 聊天对象
|
||||
const msg = reactive({
|
||||
// 聊天对象
|
||||
id: '',
|
||||
// 聊天类型 C2C单聊 GROUP群聊
|
||||
type: '',
|
||||
// 群人数
|
||||
num: '',
|
||||
// 是否客服聊天
|
||||
isCustomer: false,
|
||||
})
|
||||
// 输入的内容
|
||||
const content = ref('')
|
||||
// 加载
|
||||
const loading = ref(false)
|
||||
// 用户信息
|
||||
const userinfo = computed(() => {
|
||||
let result = store.state.userinfo
|
||||
return result
|
||||
})
|
||||
// 列表数据
|
||||
const list = reactive({
|
||||
// 列表条数
|
||||
limit: 20,
|
||||
//显示的数据
|
||||
data: [],
|
||||
//
|
||||
total: 0,
|
||||
})
|
||||
// 页面标题
|
||||
const pageTitle = ref('')
|
||||
// 滚动条位置
|
||||
const top = ref(0)
|
||||
// 工具条的高度
|
||||
const toolHeight = ref(0)
|
||||
// 当前操作的元素
|
||||
const messageItem = ref({})
|
||||
// 工具栏状态 voice录音 input输入框 emoji表情 plus加号菜单
|
||||
const toolStatus = ref('input')
|
||||
// video路径
|
||||
const videoUrl = ref('')
|
||||
// 视频上下文
|
||||
const videoContext = ref(null)
|
||||
// 红包对象
|
||||
const redPacket = reactive({})
|
||||
// 输入框聚焦
|
||||
const inputFocus = ref(false)
|
||||
|
||||
onLoad(option => {
|
||||
// 标题
|
||||
let title = ''
|
||||
// 标题
|
||||
if (option.name) title = option.name
|
||||
// 聊天对象id
|
||||
if (option.msgId) msg.id = option.msgId
|
||||
// 聊天类型
|
||||
if (option.type) {
|
||||
msg.type = option.type
|
||||
// 如果是群组
|
||||
if (option.type == 'GROUP') {
|
||||
msg.num = option.num
|
||||
title = `(${option.num})${option.name}`
|
||||
}
|
||||
}
|
||||
// 标题
|
||||
if (title) pageTitle.value = title
|
||||
// 是否客服
|
||||
if (option.isCustomer) msg.isCustomer = option.isCustomer
|
||||
|
||||
// 开启消息监听
|
||||
addListener()
|
||||
// 获取历史消息
|
||||
getHistory({
|
||||
callback: scrollToBottom
|
||||
})
|
||||
// #ifdef APP
|
||||
uni.onKeyboardHeightChange((rs) => {
|
||||
ghostBox.value.height = rs.height + 'px'
|
||||
nextTick(() => {
|
||||
scrollToBottom()
|
||||
})
|
||||
})
|
||||
// #endif
|
||||
})
|
||||
|
||||
onReady(() => {
|
||||
uni.createSelectorQuery().in(proxy).select('#tool').boundingClientRect((rect) => {
|
||||
toolHeight.value = rect.height
|
||||
}).exec();
|
||||
//
|
||||
videoContext.value = uni.createVideoContext('video')
|
||||
})
|
||||
|
||||
onPageScroll((ev) => {
|
||||
onContentScroll(ev)
|
||||
})
|
||||
|
||||
onUnload(() => {
|
||||
// #ifdef APP
|
||||
uni.offKeyboardHeightChange(() => {})
|
||||
// #endif
|
||||
videoContext.value.stop()
|
||||
})
|
||||
|
||||
// 开启监听消息
|
||||
function addListener() {
|
||||
let onMessageReceived = function(event) {
|
||||
console.log('TencentCloudChat.EVENT.MESSAGE_RECEIVED', event)
|
||||
setTimeout(() => {
|
||||
// 获取历史记录
|
||||
getHistory({
|
||||
msgId: '',
|
||||
limit: 1,
|
||||
})
|
||||
}, 200)
|
||||
}
|
||||
|
||||
uni.$chat.on(TencentCloudChat.EVENT.MESSAGE_RECEIVED, onMessageReceived);
|
||||
}
|
||||
|
||||
// 监听内容滚动
|
||||
function onContentScroll(ev) {
|
||||
if (ev.scrollTop == 50) getMoreHistroy()
|
||||
debounce(() => {
|
||||
top.value = ev.detail.scrollTop
|
||||
})
|
||||
}
|
||||
|
||||
// 点击发送
|
||||
function handleSend() {
|
||||
inputFocus.value = false
|
||||
|
||||
// 发送消息
|
||||
sendMsg({
|
||||
query: {
|
||||
formId: userinfo.value.id,
|
||||
toUserId: msg.id,
|
||||
msgType: TencentCloudChat.TYPES.MSG_TEXT,
|
||||
},
|
||||
data: {
|
||||
text: content.value
|
||||
},
|
||||
success: () => {
|
||||
// 清空已发送的消息
|
||||
content.value = ''
|
||||
inputFocus.value = true
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 加号菜单发送
|
||||
* @param {Object} message 消息对象
|
||||
*/
|
||||
function handlePlusSend(message) {
|
||||
sendMsg(message)
|
||||
}
|
||||
|
||||
/**
|
||||
* 发送消息
|
||||
* @param {Object} param
|
||||
*/
|
||||
function sendMsg(param) {
|
||||
//
|
||||
let request = api.news.sendUserMsg
|
||||
//
|
||||
if (msg.type == 'GROUP') request = api.news.sendGroupMsg
|
||||
// if (msg.isCustomer) request = api.news.sendCusomterService
|
||||
|
||||
// 发送消息
|
||||
request({
|
||||
query: param.query,
|
||||
data: param.data,
|
||||
}).then((rs) => {
|
||||
if (rs.code == 200) {
|
||||
// getHistory({
|
||||
// msgId: '',
|
||||
// limit: 1,
|
||||
// })
|
||||
param.success ? param.success() : ''
|
||||
return
|
||||
}
|
||||
util.alert({
|
||||
content: rs.msg,
|
||||
showCancel: false,
|
||||
})
|
||||
}).catch((rs) => {
|
||||
console.log('sendMsg error:', rs);
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 打开红包详情
|
||||
* @param {Object} ev
|
||||
*/
|
||||
function handleRedPacket(ev) {
|
||||
messageItem.value = ev
|
||||
api.news.getRedPacketInfo({
|
||||
query: {
|
||||
// 红包id
|
||||
redPacketId: ev.callbackData.callback_json[0].businessId
|
||||
}
|
||||
}).then(rs => {
|
||||
if (rs.code == 200) {
|
||||
proxy.$refs.RedPacketRef.open()
|
||||
Object.assign(redPacket, rs.data)
|
||||
return
|
||||
}
|
||||
util.alert({
|
||||
content: rs.msg,
|
||||
showCancel: false,
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// 领取红包
|
||||
function handleOpenReadPacket() {
|
||||
// 如果不能领取
|
||||
if (redPacket.redStatus == false) return
|
||||
// 红包过期
|
||||
// if (redPacket.isStale == 1) return
|
||||
|
||||
// 抢红包
|
||||
api.news.getRedPacket({
|
||||
query: {
|
||||
// 红包id
|
||||
redPacketId: redPacket.id,
|
||||
// 领取人id
|
||||
userId: userinfo.value.id,
|
||||
// 群聊类型
|
||||
sendType: {
|
||||
'C2C': '1',
|
||||
'GROUP': '2',
|
||||
} [msg.type],
|
||||
}
|
||||
}).then(rs => {
|
||||
if (rs.code == 200) {
|
||||
// 修改领取状态
|
||||
redPacket.redStatus = false
|
||||
// 获取金额
|
||||
redPacket.amount = rs.data
|
||||
return
|
||||
}
|
||||
util.alert({
|
||||
content: rs.msg,
|
||||
showCancel: false,
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// 选择的emoji
|
||||
function emojiTap(val) {
|
||||
content.value = content.value + val
|
||||
}
|
||||
|
||||
// 点击工具栏
|
||||
function handleTool(val) {
|
||||
if (toolStatus.value === val) toolStatus.value = 'input'
|
||||
else toolStatus.value = val
|
||||
}
|
||||
|
||||
// 获取更多消息记录
|
||||
function getMoreHistroy() {
|
||||
// 获取第一条消息记录
|
||||
if (list.total <= list.data.length) return
|
||||
getHistory({
|
||||
msgId: list.data[0].id
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取历史记录
|
||||
* @param {Object} param
|
||||
*/
|
||||
function getHistory(param = {}) {
|
||||
// 验证sdk是否准备完毕
|
||||
// let isReady = uni.$chat.isReady();
|
||||
// if (!isReady && userinfo.value.id) {
|
||||
// setTimeout(function() {
|
||||
// getHistory()
|
||||
// }, 200);
|
||||
// return
|
||||
// }
|
||||
loading.value = true
|
||||
|
||||
// 获取单聊聊天记录
|
||||
let request = api.news.getUserMsgHistory
|
||||
// 如果是群聊 获取群聊聊天记录
|
||||
if (msg.type == 'GROUP') request = api.news.getGroupMsgHistory
|
||||
|
||||
// 获取历史记录
|
||||
request({
|
||||
query: {
|
||||
msgId: param.msgId || '',
|
||||
fromId: userinfo.value.id,
|
||||
toId: msg.id,
|
||||
groupId: msg.id,
|
||||
limit: param.limit || list.limit,
|
||||
},
|
||||
}).then(res => {
|
||||
if (res.code === 200) {
|
||||
// 结果
|
||||
const result = res.data
|
||||
// 头像路径
|
||||
list.faceUrl = result.faceUrl
|
||||
|
||||
// 如果是最新消息
|
||||
if (param.limit == 1) {
|
||||
list.data.push(...result.list.map(item => {
|
||||
item.callbackData = JSON.parse(item.callbackJson)
|
||||
return item
|
||||
}))
|
||||
} else {
|
||||
// 追加
|
||||
list.data.unshift(...result.list.map(item => {
|
||||
item.callbackData = JSON.parse(item.callbackJson)
|
||||
return item
|
||||
}))
|
||||
}
|
||||
console.log('getHostory', list.data)
|
||||
// 总数
|
||||
list.total = result.total
|
||||
nextTick(() => {
|
||||
param.callback && param.callback()
|
||||
})
|
||||
return
|
||||
}
|
||||
util.alert({
|
||||
content: res.msg,
|
||||
showCancel: false,
|
||||
})
|
||||
}).catch(rs => {
|
||||
console.log('err', rs)
|
||||
}).finally(() => {
|
||||
loading.value = false
|
||||
})
|
||||
}
|
||||
|
||||
// 滚动至底部
|
||||
function scrollToBottom() {
|
||||
uni.createSelectorQuery().in(proxy).select('#scroll-content').boundingClientRect((res) => {
|
||||
top.value = res.height
|
||||
|
||||
uni.pageScrollTo({
|
||||
scrollTop: top.value,
|
||||
duration: 0
|
||||
})
|
||||
// console.log('top.value', top.value)
|
||||
}).exec();
|
||||
}
|
||||
|
||||
// 防抖
|
||||
function debounce(func, wait = 500) {
|
||||
let timeout = null;
|
||||
return function(...args) {
|
||||
clearTimeout(timeout)
|
||||
timeout = setTimeout(() => {
|
||||
func.apply(this, args)
|
||||
}, wait);
|
||||
}
|
||||
}
|
||||
|
||||
// 输入框聚焦
|
||||
function onFocus() {
|
||||
handleTool('input')
|
||||
}
|
||||
|
||||
// 输入语音
|
||||
function voiceSend(message) {
|
||||
console.log('handlePlusSend', message)
|
||||
sendMsg(message)
|
||||
}
|
||||
|
||||
// 监听滚动
|
||||
const handleScroll = (e) => {
|
||||
if (e.detail.scrollTop === 0) {
|
||||
getHistory()
|
||||
}
|
||||
}
|
||||
|
||||
// 撑起键盘的高度 打开该元素
|
||||
const showGhost = ref(false)
|
||||
// 给元素加高度
|
||||
const ghostBox = ref({
|
||||
height: '0px',
|
||||
duration: '0.25s'
|
||||
})
|
||||
|
||||
// 监听键盘高度变化
|
||||
function keyboardheightchange(res) {
|
||||
ghostBox.value = res.detail
|
||||
nextTick(() => {
|
||||
showGhost.value = res.detail.height > 0 ? true : false
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 看视频
|
||||
* @param {Object} item 聊天消息对象
|
||||
*/
|
||||
function handleViewVideo(item) {
|
||||
videoUrl.value = item.payload.videoUrl
|
||||
// 进入全屏
|
||||
videoContext.value.requestFullScreen()
|
||||
}
|
||||
|
||||
// 监听视频是否全屏
|
||||
function onScreenChange(ev) {
|
||||
if (!ev.fullScreen) videoContext.value.pause()
|
||||
}
|
||||
|
||||
/**
|
||||
* 更多
|
||||
* @param {Object} ev
|
||||
*/
|
||||
function handleMore(ev) {
|
||||
// 配置
|
||||
const url = {
|
||||
'GROUP': util.setUrl('/pages/news/detail/group', {
|
||||
groupId: msg.id,
|
||||
}),
|
||||
'C2C': util.setUrl('/pages/index/videoHome', {
|
||||
userId: msg.id,
|
||||
})
|
||||
} [msg.type]
|
||||
|
||||
// 跳转详情
|
||||
uni.navigateTo({
|
||||
url,
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<apex :title="pageTitle">
|
||||
<template #right>
|
||||
<view>
|
||||
<uni-icons type="more-filled" size="40rpx" @click="handleMore" />
|
||||
</view>
|
||||
</template>
|
||||
</apex>
|
||||
|
||||
<view class="app">
|
||||
<scroll-view class="scroll-view" scroll-y :scroll-with-animation="true" :scroll-top="top"
|
||||
@scroll="onContentScroll" @scrolltoupper="getMoreHistroy">
|
||||
<view id="scroll-content" style="padding: 30rpx 30rpx">
|
||||
<view v-for="(item, index) in list.data" :key="index">
|
||||
<!-- 普通消息 -->
|
||||
<view class="message"
|
||||
:class="[(item.From_Account || item.fromId) == userinfo.id ? 'self' : 'friend']">
|
||||
<template v-if="msg.type == 'C2C'">
|
||||
<!-- 如果是我自己 -->
|
||||
<template v-if="(item.From_Account || item.fromId) == userinfo.id">
|
||||
<image :src="userinfo.avatar" class="avatar wh80" mode="aspectFill" />
|
||||
</template>
|
||||
<template v-else>
|
||||
<image :src="list.faceUrl" class="avatar wh80" mode="aspectFill" />
|
||||
</template>
|
||||
</template>
|
||||
<template v-else>
|
||||
<image :src="item.fromFaceUrl" class="avatar wh80" mode="aspectFill" />
|
||||
</template>
|
||||
|
||||
<view class="df fdc mlr20">
|
||||
<!-- 昵称 -->
|
||||
<view class="df fdc" v-if="item.from != userinfo.userId">
|
||||
<view class="name">{{ item.callbackData.from_name }}</view>
|
||||
</view>
|
||||
<!-- 消息 -->
|
||||
<newsTemplate :item="item" :msg="msg" @openRedBag="handleRedPacket"
|
||||
@viewVideo="handleViewVideo" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="showGhost" :style="{ height: `${ghostBox.height}px`, transition: `${ghostBox.duration}s` }">
|
||||
</view>
|
||||
<view class="ghost" :style="{ height: toolHeight + 'px' }"></view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<view class="tool" id="tool">
|
||||
<view class="tool-group" style="background: #F6F6F6;">
|
||||
<!-- 语音 -->
|
||||
<image src="/static/news-voice.png" mode="widthFix" class="thumb" @click="handleTool('voice')"></image>
|
||||
<!-- 摁住说话 -->
|
||||
<template v-if="toolStatus == 'voice'">
|
||||
<JyVoice @send="voiceSend" :msg="msg" />
|
||||
</template>
|
||||
<!-- 输入框 -->
|
||||
<template v-if="toolStatus != 'voice'">
|
||||
<uni-easyinput @focus="onFocus" type="text" v-model="content" :clearable="false" class="input"
|
||||
:adjust-position="false" @keyboardheightchange="keyboardheightchange" placeholder="请输入你的问题"
|
||||
confirmType="发送" :focus="inputFocus" />
|
||||
</template>
|
||||
<!-- 表情 -->
|
||||
<image src="/static/news-emoji.png" mode="widthFix" class="thumb" @click="handleTool('emoji')"></image>
|
||||
<!-- 加号 -->
|
||||
<template v-if="!content">
|
||||
<image src="/static/news-plus.png" mode="widthFix" class="thumb" @click="handleTool('plus')" />
|
||||
</template>
|
||||
<!-- 文本发送按钮 -->
|
||||
<template v-else>
|
||||
<view class="send" @click="handleSend">发送</view>
|
||||
</template>
|
||||
</view>
|
||||
<view v-if="showGhost" :style="{ height: `${ghostBox.height}px`, transition: `${ghostBox.duration}s` }"></view>
|
||||
<!-- 表情 -->
|
||||
<template v-if="toolStatus == 'emoji'">
|
||||
<emoji @setEmoj="emojiTap"></emoji>
|
||||
</template>
|
||||
<!-- 加号 -->
|
||||
<template v-if="toolStatus == 'plus'">
|
||||
<JyPlus @send="handlePlusSend" :msg="msg"></JyPlus>
|
||||
</template>
|
||||
</view>
|
||||
|
||||
<!-- 视频 -->
|
||||
<video :src="videoUrl" id="video" @fullscreenchange="onScreenChange" />
|
||||
|
||||
<!-- 红包封面 -->
|
||||
<uni-popup ref="RedPacketRef" type="center">
|
||||
<view class="red-bag br20" @touchmove.stop.prevent="">
|
||||
<view class="rbag_top">
|
||||
<view class="user fmid">
|
||||
<view class="avatar">
|
||||
<image class="wh80 cir" :src="redPacket.fromUrl" mode="scaleToFill" />
|
||||
</view>
|
||||
<view class="ml15 f32">{{ redPacket.fromName }}的红包</view>
|
||||
</view>
|
||||
<view class="app_name mt15 mlr30 tac f40">{{ redPacket.blessing }}</view>
|
||||
<!-- -->
|
||||
<view class="cfff f32 tac mt50" v-if="redPacket.isStale == 1">红包已过期</view>
|
||||
<view class="cfff f32 tac mt50" v-else-if="redPacket.remainingCount == 0">来晚啦，红包已被抢完</view>
|
||||
|
||||
<!-- redPacket.redStatus true可以领取 false不可领取 -->
|
||||
<view class="amount f32" v-if="!redPacket.redStatus">
|
||||
<text class="">已领取</text>
|
||||
<text class="value">{{ redPacket.amount }}</text>
|
||||
<text class="unit" v-if="redPacket.payType == 1">余额</text>
|
||||
<text class="unit" v-else-if="redPacket.payType == 2">积分</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="open_rbag_btn pr fmid" @click="handleOpenReadPacket">
|
||||
<text v-if="redPacket.amount">已</text>
|
||||
<text>开</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="tac mt35" @click.stop="$refs.RedPacketRef.close()">
|
||||
<uni-icons type="close" color="#fbd977" size="32" />
|
||||
</view>
|
||||
</uni-popup>
|
||||
</template>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './index.scss';
|
||||
|
||||
//
|
||||
#video {
|
||||
position: fixed;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
//
|
||||
.red-bag {
|
||||
position: relative;
|
||||
width: 528rpx;
|
||||
height: 60vh;
|
||||
color: #ECCD97;
|
||||
background-color: #e0534a;
|
||||
box-shadow: 0 0 20rpx #00000033;
|
||||
|
||||
.rbag_top {
|
||||
padding-top: 60rpx;
|
||||
height: 70%;
|
||||
background-color: #e0534a;
|
||||
border-radius: 0 0 500rpx 500rpx / 0 0 200rpx 200rpx;
|
||||
box-shadow: 0 5rpx 5rpx rgba(0, 0, 0, 0.2);
|
||||
|
||||
.amount {
|
||||
margin-top: 120rpx;
|
||||
text-align: center;
|
||||
letter-spacing: 1rpx;
|
||||
|
||||
.value {
|
||||
font-size: 60rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.open_rbag_btn {
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
margin: -90rpx auto 0;
|
||||
color: #fef5e8;
|
||||
font-size: 74rpx;
|
||||
font-weight: bold;
|
||||
background-color: #ffd287;
|
||||
box-shadow: 2rpx 2rpx 6rpx rgba(0, 0, 0, 0.2);
|
||||
border-radius: 50%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
// 打开红包
|
||||
.open_rbag_model {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
z-index: 1000;
|
||||
|
||||
.rbag_conbg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 80%;
|
||||
height: 840rpx;
|
||||
margin: auto;
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
.open_rbag_con {
|
||||
z-index: 1002;
|
||||
|
||||
.open_title {
|
||||
height: 120rpx;
|
||||
line-height: 120rpx;
|
||||
text-align: center;
|
||||
font-size: 38rpx;
|
||||
letter-spacing: 2rpx;
|
||||
color: #e46965;
|
||||
}
|
||||
|
||||
.rbag_detail {
|
||||
margin-top: 90rpx;
|
||||
|
||||
.open_money {
|
||||
text-align: center;
|
||||
font-size: 80rpx;
|
||||
color: #c95948;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.danwei {
|
||||
font-size: 30rpx;
|
||||
margin-left: 16rpx;
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.open_tips {
|
||||
text-align: center;
|
||||
font-size: 30rpx;
|
||||
color: #d26762;
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.lookbag_box {
|
||||
margin-top: 300rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.lookbag_btn {
|
||||
width: 70%;
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
text-align: center;
|
||||
font-size: 32rpx;
|
||||
color: #c95948;
|
||||
letter-spacing: 2rpx;
|
||||
background-color: #ffd356;
|
||||
border-radius: 50rpx;
|
||||
box-shadow: 0rpx 0rpx 4rpx rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.hide_btn {
|
||||
position: absolute;
|
||||
bottom: -110rpx;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -24,6 +24,9 @@
|
|||
onPageScroll,
|
||||
onUnload
|
||||
} from "@dcloudio/uni-app"
|
||||
import {
|
||||
getHistoryMsg
|
||||
} from './fn.js'
|
||||
|
||||
// 单条消息
|
||||
import newsTemplate from './components/news-temp'
|
||||
|
|
@ -66,12 +69,12 @@
|
|||
})
|
||||
// 列表数据
|
||||
const list = reactive({
|
||||
// 列表条数
|
||||
limit: 20,
|
||||
//显示的数据
|
||||
data: [],
|
||||
//
|
||||
total: 0,
|
||||
// 消息列表
|
||||
messageList: [],
|
||||
// 用于续拉，分页续拉时需传入该字段
|
||||
nextReqMessageID: undefined,
|
||||
// 表示是否已经拉完所有消息
|
||||
isCompleted: false,
|
||||
})
|
||||
// 页面标题
|
||||
const pageTitle = ref('')
|
||||
|
|
@ -89,6 +92,8 @@
|
|||
const videoContext = ref(null)
|
||||
// 红包对象
|
||||
const redPacket = reactive({})
|
||||
// 输入框聚焦
|
||||
const inputFocus = ref(false)
|
||||
|
||||
onLoad(option => {
|
||||
// 标题
|
||||
|
|
@ -172,6 +177,8 @@
|
|||
|
||||
// 点击发送
|
||||
function handleSend() {
|
||||
inputFocus.value = false
|
||||
|
||||
// 发送消息
|
||||
sendMsg({
|
||||
query: {
|
||||
|
|
@ -185,6 +192,7 @@
|
|||
success: () => {
|
||||
// 清空已发送的消息
|
||||
content.value = ''
|
||||
inputFocus.value = true
|
||||
}
|
||||
})
|
||||
}
|
||||
|
|
@ -315,54 +323,35 @@
|
|||
*/
|
||||
function getHistory(param = {}) {
|
||||
// 验证sdk是否准备完毕
|
||||
// #ifdef APP
|
||||
let isReady = uni.$chat.isReady();
|
||||
if (!isReady && userinfo.value.id) {
|
||||
setTimeout(function() {
|
||||
getHistory()
|
||||
}, 200);
|
||||
return
|
||||
}
|
||||
// #endif
|
||||
// let isReady = uni.$chat.isReady();
|
||||
// if (!isReady && userinfo.value.id) {
|
||||
// setTimeout(function() {
|
||||
// getHistory()
|
||||
// }, 200);
|
||||
// return
|
||||
// }
|
||||
loading.value = true
|
||||
|
||||
// 获取单聊聊天记录
|
||||
let request = api.news.getUserMsgHistory
|
||||
// 如果是群聊 获取群聊聊天记录
|
||||
if (msg.type == 'GROUP') request = api.news.getGroupMsgHistory
|
||||
console.log('getHistory', msg, `${msg.type}${msg.id}`)
|
||||
|
||||
// 获取历史记录
|
||||
request({
|
||||
query: {
|
||||
msgId: param.msgId || '',
|
||||
fromId: userinfo.value.id,
|
||||
toId: msg.id,
|
||||
groupId: msg.id,
|
||||
limit: param.limit || list.limit,
|
||||
},
|
||||
getHistoryMsg({
|
||||
conversationID: `${msg.type}${msg.id}`,
|
||||
}).then(res => {
|
||||
if (res.code === 200) {
|
||||
console.log('getHistoryMsg', res)
|
||||
if (res.code === 0) {
|
||||
// 结果
|
||||
const result = res.data
|
||||
// 头像路径
|
||||
list.faceUrl = result.faceUrl
|
||||
if (!list.nextReqMessageID) list.messageList.length = 0
|
||||
// 下次拉取的消息id
|
||||
list.nextReqMessageID = result.nextReqMessageID
|
||||
// 是否拉取完毕
|
||||
list.isCompleted = result.isCompleted
|
||||
// 消息体
|
||||
list.messageList = result.messageList.map(item => {
|
||||
console.log('msg item', item)
|
||||
return item
|
||||
})
|
||||
|
||||
// 如果是最新消息
|
||||
if (param.limit == 1) {
|
||||
list.data.push(...result.list.map(item => {
|
||||
item.callbackData = JSON.parse(item.callbackJson)
|
||||
return item
|
||||
}))
|
||||
} else {
|
||||
// 追加
|
||||
list.data.unshift(...result.list.map(item => {
|
||||
item.callbackData = JSON.parse(item.callbackJson)
|
||||
return item
|
||||
}))
|
||||
}
|
||||
console.log('getHostory', list.data)
|
||||
// 总数
|
||||
list.total = result.total
|
||||
nextTick(() => {
|
||||
param.callback && param.callback()
|
||||
})
|
||||
|
|
@ -459,35 +448,18 @@
|
|||
function handleMore(ev) {
|
||||
// 配置
|
||||
const url = {
|
||||
'GROUP': util.setUrl('/pages/news/detail/group',{
|
||||
'GROUP': util.setUrl('/pages/news/detail/group', {
|
||||
groupId: msg.id,
|
||||
}),
|
||||
'C2C': util.setUrl('/')
|
||||
'C2C': util.setUrl('/pages/index/videoHome', {
|
||||
userId: msg.id,
|
||||
})
|
||||
} [msg.type]
|
||||
|
||||
// 跳转详情
|
||||
uni.navigateTo({
|
||||
url,
|
||||
})
|
||||
return
|
||||
const config = [{
|
||||
name: '举报',
|
||||
callback: rs => {
|
||||
uni.navigateTo({
|
||||
url: util.setUrl('/pages/index/report', {
|
||||
userId: msg.id,
|
||||
})
|
||||
})
|
||||
}
|
||||
}]
|
||||
|
||||
//
|
||||
uni.showActionSheet({
|
||||
itemList: config.map(node => node.name),
|
||||
success: rs => {
|
||||
config[rs.tapIndex].callback()
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -504,33 +476,78 @@
|
|||
<scroll-view class="scroll-view" scroll-y :scroll-with-animation="true" :scroll-top="top"
|
||||
@scroll="onContentScroll" @scrolltoupper="getMoreHistroy">
|
||||
<view id="scroll-content" style="padding: 30rpx 30rpx">
|
||||
<view v-for="(item, index) in list.data" :key="index">
|
||||
<!-- 普通消息 -->
|
||||
<view class="message"
|
||||
:class="[(item.From_Account || item.fromId) == userinfo.id ? 'self' : 'friend']">
|
||||
<template v-if="msg.type == 'C2C'">
|
||||
<!-- 如果是我自己 -->
|
||||
<template v-if="(item.From_Account || item.fromId) == userinfo.id">
|
||||
<image :src="userinfo.avatar" class="avatar wh80" mode="aspectFill" />
|
||||
<view v-for="(item, index) in list.messageList" :key="index">
|
||||
<!-- 系统消息 -->
|
||||
<template v-if="item.from == 'administrator'"></template>
|
||||
<!-- 群提示消息 -->
|
||||
<template v-else-if="TencentCloudChat.TYPES.MSG_GRP_TIP == item.type">
|
||||
<template v-if="item.payload.operationType == 1">
|
||||
<template v-if="item.payload.memberList">
|
||||
<view class="systemMsg">
|
||||
<text>{{item.payload.operatorInfo.nick}} 邀请</text>
|
||||
<text class="ml10"
|
||||
v-for="(user,index) in item.payload.memberList">{{user.nick}}</text>
|
||||
<text class="ml10">加入群聊</text>
|
||||
</view>
|
||||
</template>
|
||||
<template v-else>
|
||||
<image :src="list.faceUrl" class="avatar wh80" mode="aspectFill" />
|
||||
<view class="systemMsg">{{item.payload.operatorInfo.nick}} 加入了群聊</view>
|
||||
</template>
|
||||
</template>
|
||||
<template v-else>
|
||||
<image :src="item.fromFaceUrl" class="avatar wh80" mode="aspectFill" />
|
||||
<template v-else-if="item.payload.operationType == 2">
|
||||
<view class="systemMsg">{{item.payload.operatorInfo.nick}} 退出了群聊</view>
|
||||
</template>
|
||||
|
||||
<view class="df fdc mlr20">
|
||||
<!-- 昵称 -->
|
||||
<view class="df fdc" v-if="item.from != userinfo.userId">
|
||||
<view class="name">{{ item.callbackData.from_name }}</view>
|
||||
<template v-else-if="item.payload.operationType == 3">
|
||||
<view class="systemMsg">
|
||||
<text>{{item.payload.operatorInfo.nick}} 已将</text>
|
||||
<text class="ml10" v-for="(user,index) in item.payload.memberList">{{user.nick}}</text>
|
||||
<text class="ml10">移出群聊</text>
|
||||
</view>
|
||||
</template>
|
||||
<template v-else-if="item.payload.operationType == 4">
|
||||
<view class="systemMsg">有群成员被设为管理员</view>
|
||||
</template>
|
||||
<template v-else-if="item.payload.operationType == 5">
|
||||
<view class="systemMsg">有群成员被撤销管理员</view>
|
||||
</template>
|
||||
<template v-else-if="item.payload.operationType == 6">
|
||||
<view class="systemMsg">
|
||||
<text>{{item.payload.operatorInfo.nick}} 修改了群</text>
|
||||
<template v-if="item.payload.newGroupProfile.avatar">
|
||||
<text>头像</text>
|
||||
</template>
|
||||
<template v-else-if="item.payload.newGroupProfile.groupName">
|
||||
<text>名称为 {{item.payload.newGroupProfile.groupName}}</text>
|
||||
</template>
|
||||
<template v-else>
|
||||
<text>资料</text>
|
||||
</template>
|
||||
<text></text>
|
||||
</view>
|
||||
</template>
|
||||
<template v-else-if="item.payload.operationType == 7">
|
||||
<view class="systemMsg">群成员禁言</view>
|
||||
</template>
|
||||
</template>
|
||||
<!-- 群系统通知消息 -->
|
||||
<template v-else-if="TencentCloudChat.TYPES.MSG_GRP_SYS_NOTICE == item.type">
|
||||
</template>
|
||||
<!-- 普通消息 -->
|
||||
<template v-else>
|
||||
<view class="message" :class="[item.from == userinfo.id ? 'self' : 'friend']">
|
||||
<image :src="item.avatar" class="avatar wh80" mode="aspectFill" />
|
||||
|
||||
<view class="df fdc mlr20">
|
||||
<!-- 昵称 -->
|
||||
<view class="df fdc c999 f20" v-if="item.from != userinfo.id && msg.type == 'GROUP'">
|
||||
<view class="name">{{ item.nick }}</view>
|
||||
</view>
|
||||
<!-- 消息 -->
|
||||
<newsTemplate :item="item" :msg="msg" @openRedBag="handleRedPacket"
|
||||
@viewVideo="handleViewVideo" />
|
||||
</view>
|
||||
<!-- 消息 -->
|
||||
<newsTemplate :item="item" :msg="msg" @openRedBag="handleRedPacket"
|
||||
@viewVideo="handleViewVideo" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
<view v-if="showGhost" :style="{ height: `${ghostBox.height}px`, transition: `${ghostBox.duration}s` }">
|
||||
</view>
|
||||
|
|
@ -539,8 +556,8 @@
|
|||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<view class="tool" id="tool">
|
||||
<view class="tool-group" style="background: #F6F6F6;">
|
||||
<view class="tool bfff" id="tool">
|
||||
<view class="tool-group">
|
||||
<!-- 语音 -->
|
||||
<image src="/static/news-voice.png" mode="widthFix" class="thumb" @click="handleTool('voice')"></image>
|
||||
<!-- 摁住说话 -->
|
||||
|
|
@ -551,7 +568,7 @@
|
|||
<template v-if="toolStatus != 'voice'">
|
||||
<uni-easyinput @focus="onFocus" type="text" v-model="content" :clearable="false" class="input"
|
||||
:adjust-position="false" @keyboardheightchange="keyboardheightchange" placeholder="请输入你的问题"
|
||||
confirmType="发送" />
|
||||
confirmType="发送" :focus="inputFocus" />
|
||||
</template>
|
||||
<!-- 表情 -->
|
||||
<image src="/static/news-emoji.png" mode="widthFix" class="thumb" @click="handleTool('emoji')"></image>
|
||||
|
|
@ -625,6 +642,14 @@
|
|||
left: 0;
|
||||
}
|
||||
|
||||
// 系统消息
|
||||
.systemMsg {
|
||||
margin: 30rpx 0;
|
||||
text-align: center;
|
||||
color: #999;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
//
|
||||
.red-bag {
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
const store = useStore()
|
||||
const emit = defineEmits(['openRedBag', 'viewVideo'])
|
||||
// 格式化
|
||||
const formatData = computed(() => props.item.callbackData.callback_json[0])
|
||||
const formatData = computed(() => props.item)
|
||||
//音频
|
||||
const innerAudioContext = uni.createInnerAudioContext();
|
||||
// 播放语音
|
||||
|
|
@ -70,17 +70,17 @@
|
|||
<template>
|
||||
<view class="content pr">
|
||||
<!-- 图片 -->
|
||||
<template v-if="item.callbackData.MsgType === TencentCloudChat.TYPES.MSG_IMAGE">
|
||||
<template v-if="item.type === TencentCloudChat.TYPES.MSG_IMAGE">
|
||||
<image class="br10" :src="formatData.MsgContent.ImageInfoArray[0].URL" mode="widthFix" />
|
||||
</template>
|
||||
<!-- 文字 -->
|
||||
<template v-else-if="item.callbackData.MsgType === TencentCloudChat.TYPES.MSG_TEXT">
|
||||
<template v-else-if="item.type === TencentCloudChat.TYPES.MSG_TEXT">
|
||||
<view class="p25">
|
||||
{{ formatData.MsgContent.Text }}
|
||||
{{ item.payload.text }}
|
||||
</view>
|
||||
</template>
|
||||
<!-- 自定义消息 -->
|
||||
<template v-else-if="item.callbackData.MsgType === TencentCloudChat.TYPES.MSG_CUSTOM">
|
||||
<template v-else-if="item.type === TencentCloudChat.TYPES.MSG_CUSTOM">
|
||||
<!-- 判断业务字段 -->
|
||||
<template v-if="formatData.businessType">
|
||||
<!-- 音视频通话 -->
|
||||
|
|
@ -153,7 +153,7 @@
|
|||
</template>
|
||||
|
||||
<!-- 音频文件 -->
|
||||
<template v-if="item.callbackData.MsgType == TencentCloudChat.TYPES.MSG_AUDIO">
|
||||
<template v-if="item.type == TencentCloudChat.TYPES.MSG_AUDIO">
|
||||
<div class="df aic p25" style="width: 100rpx" @click="payAudio(item)">
|
||||
<image class="mr20" style="width: 30rpx;height: 30rpx;z-index: 1;" :src="NewsAudio" />
|
||||
<text>{{ item.payload.downloadFlag }}''</text>
|
||||
|
|
@ -161,7 +161,7 @@
|
|||
</template>
|
||||
|
||||
<!-- 视频消息 -->
|
||||
<template v-if="item.callbackData.MsgType == TencentCloudChat.TYPES.MSG_VIDEO">
|
||||
<template v-if="item.type == TencentCloudChat.TYPES.MSG_VIDEO">
|
||||
<image :src="item.payload.snapshotUrl" mode="widthFix" />
|
||||
<view class="window pfull" @click="handleViewVideo(item)">
|
||||
<image class="pause pmid wh40" src="/static/pause.png" mode="aspectFit" />
|
||||
|
|
@ -169,11 +169,11 @@
|
|||
</template>
|
||||
|
||||
<!-- 咨询订单 -->
|
||||
<template v-if="item.callbackData.MsgType === 'order'">
|
||||
<template v-if="item.type === 'order'">
|
||||
<JyCommodityInformation :showType="4" :right="false"></JyCommodityInformation>
|
||||
</template>
|
||||
<!-- 咨询商品-->
|
||||
<template v-if="item.callbackData.MsgType === 'shop'">
|
||||
<template v-if="item.type === 'shop'">
|
||||
<JyCommodityInformation :showType="3"></JyCommodityInformation>
|
||||
</template>
|
||||
</view>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
export const getHistoryMsg = async (option) => {
|
||||
let options = {
|
||||
// 对方的用户 ID 或者群组 ID 或聊天室 ID。
|
||||
conversationID: `${option.chatType}${option.msgId}`,
|
||||
conversationID: option.conversationID,
|
||||
nextReqMessageID: option.nextReqMessageID,
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
|
||||
|
||||
.scroll-view {
|
||||
box-sizing: border-box;
|
||||
flex: 1;
|
||||
|
|
@ -54,6 +53,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
// 工具
|
||||
.tool {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
|
|
@ -62,6 +62,7 @@
|
|||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: calc(0 + env(safe-area-inset-bottom));
|
||||
z-index: 1;
|
||||
box-shadow: 0 0 30rpx rgba(0,0,0,.05);
|
||||
|
||||
.tool-group {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -17,11 +17,14 @@
|
|||
import util from '@/common/js/util.js'
|
||||
import {
|
||||
onLoad,
|
||||
onReady,
|
||||
onShow,
|
||||
onPageScroll,
|
||||
onUnload
|
||||
} from "@dcloudio/uni-app"
|
||||
|
||||
const {
|
||||
proxy
|
||||
} = getCurrentInstance()
|
||||
// 群聊id
|
||||
const groupId = ref('')
|
||||
// 群聊详情
|
||||
|
|
@ -34,9 +37,30 @@
|
|||
const memberList = reactive([])
|
||||
// 当前成员在群聊中的身份
|
||||
const role = computed(() => detail?.selfInfo?.role)
|
||||
// 群邀请菜单
|
||||
const inviteMenu = reactive([{
|
||||
id: 'FreeAccess',
|
||||
name: '邀请无需审批',
|
||||
},
|
||||
// {
|
||||
// id: 'NeedPermission',
|
||||
// name: '需要验证',
|
||||
// },
|
||||
{
|
||||
id: 'DisableInvite',
|
||||
name: '禁止邀请',
|
||||
},
|
||||
])
|
||||
// 邀请下标
|
||||
const inviteIndex = ref('')
|
||||
// 新群聊名称
|
||||
const newGroupName = ref('')
|
||||
|
||||
onLoad((option) => {
|
||||
if (option.groupId) groupId.value = option.groupId
|
||||
})
|
||||
|
||||
onShow(() => {
|
||||
// 获取详情
|
||||
getDetail()
|
||||
// 获取群成员列表
|
||||
|
|
@ -53,6 +77,7 @@
|
|||
}).then((rs) => {
|
||||
if (rs.code == 0) {
|
||||
Object.assign(detail, rs.data.group)
|
||||
inviteIndex.value = inviteMenu.findIndex(item => item.id == detail.inviteOption)
|
||||
}
|
||||
}).catch(function(imError) {
|
||||
console.warn('getGroupProfile error:', imError); // 获取群详细资料失败的相关信息
|
||||
|
|
@ -82,6 +107,92 @@
|
|||
url,
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 修改群资料
|
||||
* @param {Object} param 需要修改的群资料
|
||||
* https://web.sdk.qcloud.com/im/doc/v3/zh-cn/SDK.html#updateGroupProfile
|
||||
*/
|
||||
function updateGroupProfile(param) {
|
||||
uni.$chat.updateGroupProfile({
|
||||
groupID: groupId.value,
|
||||
...param,
|
||||
}).then((rs) => {
|
||||
console.log('updateGroupProfile then', rs)
|
||||
Object.assign(detail, rs.data.group)
|
||||
}).catch((imError) => {
|
||||
console.log('updateGroupProfile fail', imError)
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置群邀请方式
|
||||
* @param {Object} event
|
||||
*/
|
||||
function handleInvite(event) {
|
||||
const index = event.detail.value
|
||||
if (inviteIndex.value === index) return
|
||||
inviteIndex.value = index
|
||||
|
||||
//
|
||||
updateGroupProfile({
|
||||
inviteOption: inviteMenu[inviteIndex.value].id,
|
||||
})
|
||||
}
|
||||
|
||||
// 上传群头像
|
||||
function handleGroupAvatar() {
|
||||
if(role.value !== 'Owner') return
|
||||
//
|
||||
util.upload_image({
|
||||
type: 1,
|
||||
success: (res) => {
|
||||
//
|
||||
updateGroupProfile({
|
||||
avatar: res.value
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 点击群聊名称
|
||||
function handleGroupName() {
|
||||
if(role.value !== 'Owner') return
|
||||
//
|
||||
newGroupName.value = detail.name
|
||||
//
|
||||
proxy.$refs.groupName.open()
|
||||
}
|
||||
|
||||
// 修改群聊名称
|
||||
function handleGroupNameConfim() {
|
||||
// 新群名是否为空
|
||||
if (newGroupName.value === '') return
|
||||
//
|
||||
updateGroupProfile({
|
||||
name: newGroupName.value
|
||||
})
|
||||
proxy.$refs.groupName.close()
|
||||
}
|
||||
|
||||
/**
|
||||
* 退出群聊
|
||||
* https://web.sdk.qcloud.com/im/doc/v3/zh-cn/SDK.html#quitGroup
|
||||
*/
|
||||
function handleExit() {
|
||||
util.alert({
|
||||
content: '确认退出群聊？',
|
||||
}).then(rs => {
|
||||
if (!rs.confirm) return
|
||||
uni.$chat.quitGroup(groupId.value).then((imResponse) => {
|
||||
uni.navigateBack({
|
||||
delta: 2,
|
||||
})
|
||||
}).catch(function(imError) {
|
||||
console.warn('quitGroup error:', imError); // 退出群组失败的相关信息
|
||||
});
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -106,7 +217,8 @@
|
|||
<view class="name thd mt10 c999 f26">邀请</view>
|
||||
</view>
|
||||
|
||||
<view class="item ver" v-if="role == 'Owner'">
|
||||
<view class="item ver" v-if="role == 'Owner'"
|
||||
@click="link(util.setUrl('/pages/news/group/remove',{'groupId': groupId}))">
|
||||
<view class="add fmid wh80 br10">
|
||||
<uni-icons type="minus" color="#999" size="80rpx" />
|
||||
</view>
|
||||
|
|
@ -118,29 +230,41 @@
|
|||
<!-- 群信息 -->
|
||||
<view class="container plr20 c333 f34 bfff">
|
||||
|
||||
<view class="line rows ptb30">
|
||||
<view class="line rows ptb30" @click="handleGroupAvatar">
|
||||
<view class="key">群聊头像</view>
|
||||
<view class="value c333">
|
||||
<image :src="detail.avatar" mode="aspectFill" class="wh120" />
|
||||
<image :src="detail.avatar" mode="aspectFill" class="wh120 br10" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="line rows ptb30">
|
||||
<view class="line rows ptb30" @click="handleGroupName">
|
||||
<view class="key">群聊名称</view>
|
||||
<view class="value c666">{{detail.name}}</view>
|
||||
</view>
|
||||
|
||||
<view class="line ptb30">
|
||||
<view class="key">群聊公告</view>
|
||||
<view class="value c666">{{detail.notification}}</view>
|
||||
<template v-if="0">
|
||||
<view class="line ptb30">
|
||||
<view class="key">群聊公告</view>
|
||||
<view class="value c666">{{detail.notification}}</view>
|
||||
</view>
|
||||
|
||||
<view class="line ptb30">
|
||||
<view class="key">群聊介绍</view>
|
||||
<view class="value c666">{{detail.introduction}}</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<view class="line ptb30" v-if="inviteIndex !== ''">
|
||||
<picker :range="inviteMenu" range-key="name" :value="inviteIndex" @change="handleInvite"
|
||||
:disabled="role !== 'Owner'">
|
||||
<view class="rows">
|
||||
<view class="key">群邀请</view>
|
||||
<view class="value f1 tar c666">{{inviteMenu[inviteIndex].name}}</view>
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
|
||||
<view class="line ptb30">
|
||||
<view class="key">群聊介绍</view>
|
||||
<view class="value c666">{{detail.introduction}}</view>
|
||||
</view>
|
||||
|
||||
<view class="line rows ptb30">
|
||||
<view class="line rows ptb30" @click="link(util.setUrl('/pages/index/report', {userId: groupId,}))">
|
||||
<view class="key">举报</view>
|
||||
<view class="value c666">
|
||||
<uni-icons type="right" color="#999" />
|
||||
|
|
@ -149,7 +273,21 @@
|
|||
</view>
|
||||
|
||||
<!-- 退出群聊 -->
|
||||
<view class="mtb20 ptb20 tac f34 cFF4242 bfff">退出群聊</view>
|
||||
<view class="mtb20 ptb20 tac f34 cFF4242 bfff" @click="handleExit">退出群聊</view>
|
||||
|
||||
<!-- 修改名称 -->
|
||||
<uni-popup ref="groupName" type="center">
|
||||
<view class="groupNameAlt popMid plr30 bfff">
|
||||
<view class="header rows mtb20">
|
||||
<view class="title f34 c333">修改群聊名称</view>
|
||||
<uni-icons type="closeempty" color="#999" size="30rpx" />
|
||||
</view>
|
||||
<view class="editBox mtb30 ptb10 plr20 bf8f8f8 br10">
|
||||
<input type="text" v-model="newGroupName" />
|
||||
</view>
|
||||
<view class="btn black mtb20" @click="handleGroupNameConfim">确认</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
|
@ -176,4 +314,11 @@
|
|||
border-top: 1rpx solid #eee;
|
||||
}
|
||||
}
|
||||
|
||||
// 编辑群名称
|
||||
.groupNameAlt {
|
||||
.editBox {
|
||||
background-color: #eee;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
<template>
|
||||
<view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
|
@ -62,19 +62,17 @@
|
|||
uni.$chat.off(TencentCloudChat.EVENT.GROUP_LIST_UPDATED,()=>{});
|
||||
}
|
||||
|
||||
// 获取群组列表
|
||||
/**
|
||||
* 获取群组列表
|
||||
* https://web.sdk.qcloud.com/im/doc/v3/zh-cn/SDK.html#getGroupList
|
||||
*/
|
||||
function getGroupList() {
|
||||
api.news.myGroups().then(rs => {
|
||||
if (rs.code == 200) {
|
||||
uni.$chat.getGroupList().then(rs => {
|
||||
if (rs.code == 0) {
|
||||
list.length = 0
|
||||
list.push(...rs.data)
|
||||
console.log('group list', list)
|
||||
list.push(...rs.data.groupList)
|
||||
return
|
||||
}
|
||||
util.alert({
|
||||
content: rs.msg,
|
||||
showCancel: false
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
|
|
@ -86,7 +84,7 @@
|
|||
console.log('group item', item)
|
||||
util.toChat({
|
||||
name: `${item.name}`,
|
||||
msgId: item.groupId,
|
||||
msgId: item.groupID,
|
||||
type: 'GROUP',
|
||||
num: item.memberCount,
|
||||
})
|
||||
|
|
@ -127,7 +125,7 @@
|
|||
<view class="item" v-for="(item, index) in list" :key="index">
|
||||
<uni-swipe-action-item :right-options="rightOption" @click="handleMenu($event,item)">
|
||||
<view class="item rows ptb30" @click="handleGroupItem(item)">
|
||||
<image class="wh120 fs0 avatar br10" :src="item.groupFaceUrl" mode="aspectFill" />
|
||||
<image class="wh120 fs0 avatar br10" :src="item.avatar" mode="aspectFill" />
|
||||
|
||||
<view class="f1 oh ml30">
|
||||
<view class="name thd f1 c333 f34">{{item.name}}</view>
|
||||
|
|
|
|||
|
|
@ -120,6 +120,8 @@
|
|||
groupID: data.groupId,
|
||||
// 群头像
|
||||
avatar: data.groupFaceUrl,
|
||||
// 邀请进群处理方式
|
||||
inviteOption: TencentCloudChat.TYPES.INVITE_OPTIONS_FREE_ACCESS,
|
||||
}).then(function(rs) {
|
||||
// 创建后的群聊信息
|
||||
const group = rs.data.group
|
||||
|
|
|
|||
|
|
@ -27,15 +27,17 @@
|
|||
const groupId = ref('')
|
||||
// 好友列表
|
||||
const friendList = reactive([])
|
||||
// 群聊成员列表
|
||||
const groupMember = reactive([])
|
||||
// 群成员列表
|
||||
const memberList = reactive([])
|
||||
// 新增成员
|
||||
const newMemberIds = reactive([])
|
||||
|
||||
onLoad((option) => {
|
||||
if (option.groupId) groupId.value = option.groupId
|
||||
// 获取好友列表
|
||||
getFriendList()
|
||||
// 获取群成员列表
|
||||
getGroupMemberList()
|
||||
})
|
||||
|
||||
// 获取好友列表
|
||||
|
|
@ -66,16 +68,59 @@
|
|||
}).then(function(rs) {
|
||||
memberList.length = 0
|
||||
memberList.push(...rs.data.memberList)
|
||||
console.log('memberList', memberList)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 是否群成员
|
||||
* @param {Object} userId 用户id
|
||||
*/
|
||||
function hasMamber(userId) {
|
||||
let result = memberList.find(node => node.userID == userId)
|
||||
return Boolean(result)
|
||||
}
|
||||
|
||||
/**
|
||||
* 选择人员
|
||||
* @param {Object} item 人员信息
|
||||
*/
|
||||
function handleUser(item) {
|
||||
if (hasMamber(item.userId)) return
|
||||
let find_index = newMemberIds.findIndex(node => node === item.userId)
|
||||
if (find_index >= 0) newMemberIds.splice(find_index, 1)
|
||||
else newMemberIds.push(item.userId)
|
||||
}
|
||||
|
||||
/**
|
||||
* 添加群成员
|
||||
* https://web.sdk.qcloud.com/im/doc/v3/zh-cn/SDK.html#addGroupMember
|
||||
*/
|
||||
function handleSubmit() {
|
||||
uni.$chat.addGroupMember({
|
||||
groupID: groupId.value,
|
||||
userIDList: newMemberIds,
|
||||
}).then((rs) => {
|
||||
uni.navigateBack()
|
||||
}).catch((imError) => {
|
||||
console.warn('addGroupMember error:', imError); // 错误信息
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="appbw">
|
||||
<view class="list pb30">
|
||||
<view class="item rows mlr20" v-for="(item, index) in friendList" :key="item.userId" :id="item.userId">
|
||||
<view class="item rows mlr20" v-for="(item, index) in friendList" :key="item.userId" :id="item.userId"
|
||||
@click="handleUser(item)">
|
||||
<view class="checkBox">
|
||||
<template>
|
||||
<template v-if="hasMamber(item.userId)">
|
||||
<uni-icons type="checkbox-filled" size="40rpx" color="#37B11166" />
|
||||
</template>
|
||||
<template v-else-if="newMemberIds.includes(item.userId)">
|
||||
<uni-icons type="checkbox-filled" size="40rpx" color="#37B111" />
|
||||
</template>
|
||||
<template v-else>
|
||||
<uni-icons type="circle" size="40rpx" color="#999" />
|
||||
</template>
|
||||
</view>
|
||||
|
|
@ -92,11 +137,10 @@
|
|||
</view>
|
||||
|
||||
<view class="footer plr30 bfff">
|
||||
<view class="btn colourful">添加</view>
|
||||
<view class="btn colourful" @click="handleSubmit">添加</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
|
||||
<style lang="scss">
|
||||
</style>
|
||||
|
|
@ -0,0 +1,123 @@
|
|||
<script setup>
|
||||
// 移除群成员
|
||||
|
||||
// 腾讯云聊天
|
||||
import TencentCloudChat from '@tencentcloud/chat';
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
nextTick,
|
||||
onUnmounted,
|
||||
onMounted,
|
||||
computed,
|
||||
getCurrentInstance,
|
||||
watch,
|
||||
} from 'vue'
|
||||
// api
|
||||
import api from '@/api/index.js'
|
||||
// 工具库
|
||||
import util from '@/common/js/util.js'
|
||||
import {
|
||||
onLoad,
|
||||
onReady,
|
||||
onPageScroll,
|
||||
onUnload
|
||||
} from "@dcloudio/uni-app"
|
||||
import {
|
||||
useStore
|
||||
} from 'vuex'
|
||||
import { filter } from 'lodash';
|
||||
// 群组id
|
||||
const groupId = ref('')
|
||||
// 好友列表
|
||||
const friendList = reactive([])
|
||||
// 群成员列表
|
||||
const memberList = reactive([])
|
||||
// 新增成员
|
||||
const newMemberIds = reactive([])
|
||||
const store = useStore()
|
||||
// 用户信息
|
||||
const userinfo = computed(() => store.state.userinfo)
|
||||
|
||||
onLoad((option) => {
|
||||
if (option.groupId) groupId.value = option.groupId
|
||||
// 获取群成员列表
|
||||
getGroupMemberList()
|
||||
})
|
||||
|
||||
/**
|
||||
* 获取群成员列表
|
||||
* https://web.sdk.qcloud.com/im/doc/v3/zh-cn/SDK.html#getGroupMemberList
|
||||
*/
|
||||
function getGroupMemberList() {
|
||||
uni.$chat.getGroupMemberList({
|
||||
groupID: groupId.value,
|
||||
count: 100,
|
||||
}).then(function(rs) {
|
||||
memberList.length = 0
|
||||
memberList.push(...rs.data.memberList.filter(item => {
|
||||
return item.userID !== userinfo.value.id
|
||||
}))
|
||||
console.log('memberList', memberList)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 选择人员
|
||||
* @param {String} id 群成员id
|
||||
*/
|
||||
function handleUser(id) {
|
||||
let find_index = newMemberIds.findIndex(node => node === id)
|
||||
if (find_index >= 0) newMemberIds.splice(find_index, 1)
|
||||
else newMemberIds.push(id)
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除群成员
|
||||
* https://web.sdk.qcloud.com/im/doc/v3/zh-cn/SDK.html#deleteGroupMember
|
||||
*/
|
||||
function handleSubmit() {
|
||||
uni.$chat.deleteGroupMember({
|
||||
groupID: groupId.value,
|
||||
userIDList: newMemberIds,
|
||||
}).then((rs) => {
|
||||
uni.navigateBack()
|
||||
}).catch((imError) => {
|
||||
console.warn('addGroupMember error:', imError); // 错误信息
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="appbw">
|
||||
<view class="list pb30">
|
||||
<view class="item rows mlr20" v-for="(item, index) in memberList" :key="item.userID" :id="item.userID"
|
||||
@click="handleUser(item.userID)">
|
||||
<view class="checkBox">
|
||||
<template v-if="newMemberIds.includes(item.userID)">
|
||||
<uni-icons type="checkbox-filled" size="40rpx" color="#37B111" />
|
||||
</template>
|
||||
<template v-else>
|
||||
<uni-icons type="circle" size="40rpx" color="#999" />
|
||||
</template>
|
||||
</view>
|
||||
|
||||
<view class="child pl30 pr50 f1">
|
||||
<view class="item rows ptb20">
|
||||
<image class="wh80 avatar cir" :src="item.avatar" mode="aspectFill" />
|
||||
<view class="name thd f1 ml20 c333 f32">{{ item.nameCard || item.nick }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="mtb20 nomore">到底啦~</view>
|
||||
</view>
|
||||
|
||||
<view class="footer plr30 bfff">
|
||||
<view class="btn colourful" @click="handleSubmit">移除</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
</style>
|
||||
Loading…
Reference in New Issue