OA体制内聊天项目新增群管理员管理界面，并增加人员选择通用页面；去除部分重复请求方法，将群成员列表、群聊信息统一在全局维护；新增全局输入框组件封装
This commit is contained in:
parent
5382335a9c
commit
aadc4d9d43
@ -1,24 +1,6 @@
|
||||
import request from '@/service/index.js'
|
||||
import qs from 'qs'
|
||||
|
||||
// 群信息查询
|
||||
export const ServeQueryGroupInfo = (data) => {
|
||||
return request({
|
||||
url: '/api/v1/group/detail',
|
||||
method: 'GET',
|
||||
data,
|
||||
})
|
||||
}
|
||||
|
||||
// 查看群成员
|
||||
export const ServeQueryGroupMembers = (data) => {
|
||||
return request({
|
||||
url: '/api/v1/group/member/list',
|
||||
method: 'GET',
|
||||
data,
|
||||
})
|
||||
}
|
||||
|
||||
// 群公告查询
|
||||
export const ServeQueryGroupNotice = (data) => {
|
||||
return request({
|
||||
|
||||
@ -207,6 +207,7 @@ export const ServeGroupAssignAdmin = (data) => {
|
||||
})
|
||||
}
|
||||
|
||||
//指定人员禁言
|
||||
export const ServeGroupNoSpeak = (data) => {
|
||||
return request({
|
||||
url: '/api/v1/group/no-speak',
|
||||
@ -214,4 +215,3 @@ export const ServeGroupNoSpeak = (data) => {
|
||||
data,
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
58
src/components/custom-input/custom-input.vue
Normal file
58
src/components/custom-input/custom-input.vue
Normal file
@ -0,0 +1,58 @@
|
||||
<template>
|
||||
<div class="custom-search-input">
|
||||
<tm-input
|
||||
class="search-input"
|
||||
placeholder="请输入…"
|
||||
color="#F9F9FD"
|
||||
:round="1"
|
||||
prefix="tmicon-search"
|
||||
prefixColor="#46299D"
|
||||
:prefixLabel="props?.first_talk_record_infos?.receiver_name"
|
||||
v-model.lazy="state.searchText"
|
||||
@input="inputSearchText"
|
||||
:showClear="true"
|
||||
@clear="clearInput"
|
||||
></tm-input>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { defineProps, defineEmits, reactive, watch } from 'vue'
|
||||
const props = defineProps({
|
||||
searchText: String,
|
||||
first_talk_record_infos: Object,
|
||||
})
|
||||
const state = reactive({
|
||||
searchText: '', //搜索内容
|
||||
})
|
||||
const emits = defineEmits(['inputSearchText'])
|
||||
|
||||
watch(
|
||||
() => props.searchText,
|
||||
(newSearchText) => {
|
||||
state.searchText = newSearchText
|
||||
},
|
||||
)
|
||||
|
||||
//清除输入的搜索内容
|
||||
const clearInput = () => {
|
||||
inputSearchText('')
|
||||
}
|
||||
|
||||
//输入搜索文本
|
||||
const inputSearchText = (e) => {
|
||||
emits('inputSearchText', e)
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.custom-search-input {
|
||||
width: 100%;
|
||||
.search-input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.search-input::v-deep .tmicon-times-circle-fill::before {
|
||||
content: '\e82a';
|
||||
color: #d2d2d5;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -138,6 +138,22 @@
|
||||
"navigationStyle": "custom",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/chatSettings/groupManage/selectMembers",
|
||||
"type": "page",
|
||||
"style": {
|
||||
"navigationStyle": "custom",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/chatSettings/groupManage/manageGroupAdmin",
|
||||
"type": "page",
|
||||
"style": {
|
||||
"navigationStyle": "custom",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
}
|
||||
],
|
||||
"globalStyle": {
|
||||
|
||||
115
src/pages/chatSettings/components/select-member-item.vue
Normal file
115
src/pages/chatSettings/components/select-member-item.vue
Normal file
@ -0,0 +1,115 @@
|
||||
<template>
|
||||
<div class="select-member-item" @click="clickItem(props?.memberItem)">
|
||||
<div class="member-info">
|
||||
<slot name="left"></slot>
|
||||
<div class="select-member-item-avatar" v-if="props?.manageType === 'silence'">
|
||||
<img v-if="avatarImg !== 'textImg'" :src="avatarImg" />
|
||||
<span v-if="avatarImg === 'textImg'" class="text-[24rpx] font-bold">
|
||||
{{ imgText }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="select-member-item-name" v-if="props?.manageType === 'silence'">
|
||||
<span class="text-[28rpx] font-medium">{{ nameText }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="operate-btns">
|
||||
<div class="btn-undo-silence">
|
||||
<span v-if="props?.memberItem?.is_mute === 1">
|
||||
{{ $t('chatSettings.btn.undoSilence') }}
|
||||
</span>
|
||||
<span v-if="props?.memberItem?.is_mute === 1">
|
||||
{{ $t('silence.tag.hasDone') }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { computed, defineProps, defineEmits } from 'vue'
|
||||
import { onMounted, reactive } from 'vue'
|
||||
|
||||
const emits = defineEmits(['clickItem'])
|
||||
|
||||
const props = defineProps({
|
||||
memberItem: Object, //人员
|
||||
manageType: String, //管理类型
|
||||
})
|
||||
onMounted(() => {})
|
||||
|
||||
//头像
|
||||
const avatarImg = computed(() => {
|
||||
let avatar_img = props?.memberItem?.avatar
|
||||
if (!avatar_img) {
|
||||
avatar_img = 'textImg'
|
||||
}
|
||||
return avatar_img
|
||||
})
|
||||
|
||||
//名字
|
||||
const nameText = computed(() => {
|
||||
let name = props?.memberItem?.nickname
|
||||
return name
|
||||
})
|
||||
|
||||
//文字头像
|
||||
const imgText = computed(() => {
|
||||
return nameText.value.length >= 2 ? nameText.value.slice(-2) : nameText.value
|
||||
})
|
||||
|
||||
//点击item
|
||||
const clickItem = () => {
|
||||
emits('clickItem')
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.select-member-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 18rpx 34rpx;
|
||||
background-color: #fff;
|
||||
margin: 20rpx 0 0;
|
||||
box-shadow: 0 6px 12px 2px rgba(188, 188, 188, 0.08);
|
||||
border-radius: 8rpx;
|
||||
width: 100%;
|
||||
.member-info {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
.select-member-item-avatar {
|
||||
background: linear-gradient(to right, #674bbc, #46299d);
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 20rpx 0 0;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
span {
|
||||
color: #fff;
|
||||
line-height: 34rpx;
|
||||
}
|
||||
}
|
||||
.select-member-item-name {
|
||||
span {
|
||||
color: $theme-text;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.operate-btns {
|
||||
.btn-undo-silence {
|
||||
span {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
106
src/pages/chatSettings/groupManage/manageGroupAdmin.vue
Normal file
106
src/pages/chatSettings/groupManage/manageGroupAdmin.vue
Normal file
@ -0,0 +1,106 @@
|
||||
<template>
|
||||
<div class="outer-layer manage-group-silence-page">
|
||||
<div class="root">
|
||||
<ZPaging ref="zPaging" :show-scrollbar="false">
|
||||
<template #top>
|
||||
<tm-navbar :hideBack="false" hideHome title="" :leftWidth="220">
|
||||
<div class="navBar-title flex flex-col items-center justify-center">
|
||||
<span class="text-[34rpx] font-medium">
|
||||
{{ $t('chat.settings.groupAdmin') }}
|
||||
</span>
|
||||
</div>
|
||||
</tm-navbar>
|
||||
</template>
|
||||
<div class="manage-group-silence">
|
||||
<span class="manage-group-silence-title text-[28rpx] font-regular">
|
||||
{{ $t('chat.settings.groupAdmin') }}
|
||||
</span>
|
||||
<div
|
||||
class="add-silence-member-btn chat-settings-card"
|
||||
@click="toSelectMembersPage"
|
||||
>
|
||||
<img src="/src/static/image/chatSettings/add-btn.png" />
|
||||
<span class="text-[28rpx] font-medium">
|
||||
{{ $t('chat.manage.addAdmin') }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</ZPaging>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import ZPaging from '@/uni_modules/z-paging/components/z-paging/z-paging.vue'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import { computed, onMounted, reactive } from 'vue'
|
||||
|
||||
import { useGroupStore, useDialogueStore } from '@/store'
|
||||
|
||||
import { useI18n } from 'vue-i18n'
|
||||
const { t } = useI18n()
|
||||
|
||||
const groupStore = useGroupStore()
|
||||
const dialogueStore = useDialogueStore()
|
||||
|
||||
const dialogueParams = reactive({
|
||||
adminList: computed(() => dialogueStore.getSilenceMember),
|
||||
})
|
||||
|
||||
const state = reactive({
|
||||
silenceAllBtn: null, //全员禁言按钮
|
||||
})
|
||||
|
||||
onLoad((options) => {
|
||||
console.log(options)
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
console.log(dialogueParams.adminList)
|
||||
})
|
||||
|
||||
//点击跳转到添加禁言成员页面
|
||||
const toSelectMembersPage = () => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/chatSettings/groupManage/selectMembers?manageType=admin',
|
||||
})
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.outer-layer {
|
||||
flex: 1;
|
||||
background-image: url('@/static/image/clockIn/z3280@3x.png');
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.manage-group-silence {
|
||||
padding: 20rpx 32rpx;
|
||||
.manage-group-silence-title {
|
||||
line-height: 40rpx;
|
||||
color: #959598;
|
||||
}
|
||||
.add-silence-member-btn {
|
||||
padding: 32rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
img {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
margin: 0 22rpx 0 0;
|
||||
}
|
||||
span {
|
||||
line-height: 40rpx;
|
||||
color: $theme-text;
|
||||
}
|
||||
}
|
||||
.chat-settings-card {
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
margin: 20rpx 0 0;
|
||||
border-radius: 8rpx;
|
||||
box-shadow: 0 6px 12px 2px rgba(188, 188, 188, 0.08);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -6,8 +6,6 @@
|
||||
:show-scrollbar="false"
|
||||
:use-virtual-list="true"
|
||||
:virtual-list-col="5"
|
||||
v-model="state.memberList"
|
||||
@query="getGroupMembers"
|
||||
:auto="false"
|
||||
:refresher-enabled="false"
|
||||
:loading-more-enabled="false"
|
||||
@ -22,7 +20,9 @@
|
||||
</tm-navbar>
|
||||
</template>
|
||||
<div class="group-members-list">
|
||||
<groupMemberList :memberList="state?.memberList"></groupMemberList>
|
||||
<groupMemberList
|
||||
:memberList="talkParams?.memberList"
|
||||
></groupMemberList>
|
||||
</div>
|
||||
</ZPaging>
|
||||
</div>
|
||||
@ -32,43 +32,16 @@
|
||||
import groupMemberList from '../components/groupMembersList.vue'
|
||||
import ZPaging from '@/uni_modules/z-paging/components/z-paging/z-paging.vue'
|
||||
import useZPaging from '@/uni_modules/z-paging/components/z-paging/js/hooks/useZPaging.js'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import { ref, reactive } from 'vue'
|
||||
import { ServeQueryGroupMembers } from '@/api/chatSettings/index'
|
||||
import { ref, computed, reactive } from 'vue'
|
||||
import { useDialogueStore } from '@/store'
|
||||
|
||||
const state = reactive({
|
||||
memberList: [], //人员列表
|
||||
const dialogueStore = useDialogueStore()
|
||||
const talkParams = reactive({
|
||||
memberList: computed(() => dialogueStore.members),
|
||||
})
|
||||
|
||||
const zPaging = ref()
|
||||
useZPaging(zPaging)
|
||||
|
||||
onLoad((options) => {
|
||||
console.log(options)
|
||||
if (options.groupId) {
|
||||
state.groupId = Number(options.groupId)
|
||||
getGroupMembers()
|
||||
}
|
||||
})
|
||||
|
||||
//查看群成员
|
||||
const getGroupMembers = () => {
|
||||
let params = {
|
||||
group_id: state.groupId,
|
||||
}
|
||||
console.log(params)
|
||||
const resp = ServeQueryGroupMembers(params)
|
||||
console.log(resp)
|
||||
resp.then(({ code, data }) => {
|
||||
console.log(data)
|
||||
if (code == 200) {
|
||||
zPaging.value?.completeByNoMore(data.items, true)
|
||||
} else {
|
||||
}
|
||||
})
|
||||
|
||||
resp.catch(() => {})
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.outer-layer {
|
||||
|
||||
@ -15,7 +15,10 @@
|
||||
<span class="manage-group-silence-title text-[28rpx] font-regular">
|
||||
{{ $t('chat.manage.silenceMember') }}
|
||||
</span>
|
||||
<div class="add-silence-member-btn chat-settings-card">
|
||||
<div
|
||||
class="add-silence-member-btn chat-settings-card"
|
||||
@click="toSelectMembersPage"
|
||||
>
|
||||
<img src="/src/static/image/chatSettings/add-btn.png" />
|
||||
<span class="text-[28rpx] font-medium">
|
||||
{{ $t('chat.manage.addSilenceMember') }}
|
||||
@ -37,11 +40,20 @@
|
||||
import settingFormItem from '../components/settingFormItem.vue'
|
||||
import ZPaging from '@/uni_modules/z-paging/components/z-paging/z-paging.vue'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import { onMounted, reactive } from 'vue'
|
||||
import { computed, onMounted, reactive } from 'vue'
|
||||
|
||||
import { useGroupStore, useDialogueStore } from '@/store'
|
||||
|
||||
import { useI18n } from 'vue-i18n'
|
||||
const { t } = useI18n()
|
||||
|
||||
const groupStore = useGroupStore()
|
||||
const dialogueStore = useDialogueStore()
|
||||
|
||||
const dialogueParams = reactive({
|
||||
silenceMembersList: computed(() => dialogueStore.getAdminList),
|
||||
})
|
||||
|
||||
const state = reactive({
|
||||
silenceAllBtn: null, //全员禁言按钮
|
||||
})
|
||||
@ -51,6 +63,7 @@ onLoad((options) => {
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
console.log(dialogueParams.silenceMembersList)
|
||||
state.silenceAllBtn = {
|
||||
label: t('chat.manage.silenceAll'),
|
||||
hasPointer: false,
|
||||
@ -64,6 +77,13 @@ onMounted(() => {
|
||||
const changeSwitch = (switchStatus, label) => {
|
||||
console.log(switchStatus, label)
|
||||
}
|
||||
|
||||
//点击跳转到添加禁言成员页面
|
||||
const toSelectMembersPage = () => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/chatSettings/groupManage/selectMembers?manageType=silence',
|
||||
})
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.outer-layer {
|
||||
|
||||
159
src/pages/chatSettings/groupManage/selectMembers.vue
Normal file
159
src/pages/chatSettings/groupManage/selectMembers.vue
Normal file
@ -0,0 +1,159 @@
|
||||
<template>
|
||||
<div class="outer-layer select-members-page">
|
||||
<div class="root">
|
||||
<ZPaging ref="zPaging" :show-scrollbar="false">
|
||||
<template #top>
|
||||
<tm-navbar :hideBack="false" hideHome title="" :leftWidth="220">
|
||||
<div class="navBar-title flex flex-col items-center justify-center">
|
||||
<span
|
||||
class="text-[34rpx] font-medium"
|
||||
v-if="state.manageType === 'silence'"
|
||||
>
|
||||
{{ $t('chat.manage.addSilenceMember') }}
|
||||
</span>
|
||||
<span
|
||||
class="text-[34rpx] font-medium"
|
||||
v-if="state.manageType === 'admin'"
|
||||
>
|
||||
{{ $t('chat.manage.addAdmin') }}
|
||||
</span>
|
||||
</div>
|
||||
</tm-navbar>
|
||||
</template>
|
||||
<div class="select-members">
|
||||
<div class="search-member">
|
||||
<customInput
|
||||
:searchText="state.searchText"
|
||||
@inputSearchText="inputSearchText"
|
||||
></customInput>
|
||||
</div>
|
||||
<div class="member-list">
|
||||
<div
|
||||
class="member-list-each"
|
||||
v-for="(item, index) in dialogueParams?.memberList"
|
||||
:key="index"
|
||||
>
|
||||
<tm-checkbox-group v-model="item.checkArr">
|
||||
<selectMemberItem
|
||||
:memberItem="item"
|
||||
@clickItem="handleClickItem(item)"
|
||||
:manageType="state.manageType"
|
||||
>
|
||||
<template #left>
|
||||
<tm-checkbox
|
||||
:round="10"
|
||||
color="#46299d"
|
||||
:value="item.id"
|
||||
:disabled="item.is_mute === 1"
|
||||
></tm-checkbox>
|
||||
</template>
|
||||
</selectMemberItem>
|
||||
</tm-checkbox-group>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<template #bottom>
|
||||
<customBtn
|
||||
:isBottom="true"
|
||||
:btnText="$t('ok')"
|
||||
@clickBtn="confirmSilenceMember"
|
||||
></customBtn>
|
||||
</template>
|
||||
</ZPaging>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import customInput from '@/components/custom-input/custom-input.vue'
|
||||
import selectMemberItem from '../components/select-member-item.vue'
|
||||
import customBtn from '@/components/custom-btn/custom-btn.vue'
|
||||
import ZPaging from '@/uni_modules/z-paging/components/z-paging/z-paging.vue'
|
||||
import { computed, onMounted, reactive } from 'vue'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
|
||||
import { useDialogueStore } from '@/store'
|
||||
|
||||
const dialogueStore = useDialogueStore()
|
||||
const state = reactive({
|
||||
searchText: '', //搜索内容
|
||||
manageType: '', //管理类型
|
||||
})
|
||||
const dialogueParams = reactive({
|
||||
memberList: computed(() => {
|
||||
const lowerCaseSearchText = state?.searchText.toLowerCase()
|
||||
return dialogueStore.members.filter((item) =>
|
||||
state?.searchText
|
||||
? item.nickname.toLowerCase().includes(lowerCaseSearchText)
|
||||
: true,
|
||||
)
|
||||
}),
|
||||
receiverId: computed(() => dialogueStore.talk.receiver_id),
|
||||
})
|
||||
|
||||
onLoad((options) => {
|
||||
console.log(options)
|
||||
if (options.manageType) {
|
||||
state.manageType = options.manageType
|
||||
}
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
dialogueParams.memberList.forEach((ele) => {
|
||||
ele.checkArr = []
|
||||
})
|
||||
})
|
||||
|
||||
//输入搜索文本
|
||||
const inputSearchText = (e) => {
|
||||
console.log(e)
|
||||
state.searchText = e
|
||||
}
|
||||
|
||||
//点击item
|
||||
const handleClickItem = (item) => {
|
||||
dialogueParams.memberList.forEach((ele) => {
|
||||
if (ele.id == item.id) {
|
||||
ele.checkArr = ele.checkArr?.length > 0 ? [] : [item.id]
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
//点击确认要禁言的成员
|
||||
const confirmSilenceMember = () => {
|
||||
let selectedUserIds = ''
|
||||
dialogueParams.memberList.forEach((ele) => {
|
||||
if (ele.checkArr?.length > 0) {
|
||||
if (!selectedUserIds) {
|
||||
selectedUserIds = ele.checkArr[0]
|
||||
} else {
|
||||
selectedUserIds += ',' + ele.checkArr[0]
|
||||
}
|
||||
}
|
||||
})
|
||||
console.log(selectedUserIds)
|
||||
if (selectedUserIds) {
|
||||
let params = {
|
||||
mode: 1, //1禁言2解禁
|
||||
group_id: dialogueParams.receiverId, //群id
|
||||
user_ids: selectedUserIds, //用户ids
|
||||
}
|
||||
console.log(params)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.outer-layer {
|
||||
flex: 1;
|
||||
background-image: url('@/static/image/clockIn/z3280@3x.png');
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.select-members {
|
||||
padding: 20rpx 32rpx;
|
||||
.search-member {
|
||||
padding: 22rpx 16rpx;
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -27,7 +27,7 @@
|
||||
class="base-info-tag"
|
||||
:style="{
|
||||
borderColor:
|
||||
groupTypeMapping[state?.groupInfo?.group_type]
|
||||
groupTypeMapping[groupParams?.groupInfo?.group_type]
|
||||
?.result_type_color,
|
||||
}"
|
||||
>
|
||||
@ -35,7 +35,7 @@
|
||||
class="text-[24rpx] font-medium"
|
||||
:style="{
|
||||
color:
|
||||
groupTypeMapping[state?.groupInfo?.group_type]
|
||||
groupTypeMapping[groupParams?.groupInfo?.group_type]
|
||||
?.result_type_color,
|
||||
}"
|
||||
>
|
||||
@ -58,7 +58,7 @@
|
||||
@toManagePage="toManagePage"
|
||||
></settingFormItem>
|
||||
<groupMemberList
|
||||
:memberList="state?.memberList"
|
||||
:memberList="talkParams?.memberList"
|
||||
:memberListsLimit="15"
|
||||
></groupMemberList>
|
||||
</div>
|
||||
@ -76,14 +76,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="chat-records-search chat-settings-card">
|
||||
<tm-input
|
||||
class="searchRoot_input"
|
||||
:placeholder="$t('search.chat.record')"
|
||||
color="#F9F9FD"
|
||||
:round="1"
|
||||
prefix="tmicon-search"
|
||||
prefixColor="#46299D"
|
||||
></tm-input>
|
||||
<customInput></customInput>
|
||||
<div class="record-search-types">
|
||||
<div
|
||||
class="record-search-types-each"
|
||||
@ -158,17 +151,21 @@ import ZPaging from '@/uni_modules/z-paging/components/z-paging/z-paging.vue'
|
||||
import settingFormItem from './components/settingFormItem.vue'
|
||||
import groupMemberList from './components/groupMembersList.vue'
|
||||
import { computed, onMounted, reactive } from 'vue'
|
||||
import { useUserStore, useTalkStore, useDialogueStore } from '@/store'
|
||||
import {
|
||||
useUserStore,
|
||||
useTalkStore,
|
||||
useDialogueStore,
|
||||
useGroupStore,
|
||||
} from '@/store'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import {
|
||||
ServeQueryGroupInfo,
|
||||
ServeQueryGroupMembers,
|
||||
ServeQueryGroupNotice,
|
||||
ServeTopTalk,
|
||||
ServeDisturbTalk,
|
||||
} from '@/api/chatSettings/index'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
const { t } = useI18n()
|
||||
import customInput from '@/components/custom-input/custom-input.vue'
|
||||
const userStore = useUserStore()
|
||||
const talkStore = useTalkStore()
|
||||
const dialogueStore = useDialogueStore()
|
||||
@ -181,10 +178,14 @@ const talkParams = reactive({
|
||||
online: computed(() => dialogueStore.online),
|
||||
keyboard: computed(() => dialogueStore.keyboard),
|
||||
num: computed(() => dialogueStore.members.length),
|
||||
memberList: computed(() => dialogueStore.members),
|
||||
})
|
||||
const topItems = computed(() => talkStore.topItems)
|
||||
const disturbItems = computed(() => talkStore.disturbItems)
|
||||
|
||||
const groupStore = useGroupStore()
|
||||
const groupParams = reactive({
|
||||
groupInfo: computed(() => groupStore.groupInfo),
|
||||
})
|
||||
const state = reactive({
|
||||
chatGroupMembers: [], //群成员form-item
|
||||
chatGroupInfos: [], //群聊信息
|
||||
@ -192,19 +193,17 @@ const state = reactive({
|
||||
chatSettings: [], //群聊设置
|
||||
chatManagement: [], //群聊管理
|
||||
groupId: '', //群id
|
||||
groupInfo: null, //群信息
|
||||
memberList: [], //群成员列表
|
||||
groupNotice: [], //群公告
|
||||
sessionId: '', //会话id
|
||||
})
|
||||
|
||||
onLoad((options) => {
|
||||
onLoad(async (options) => {
|
||||
console.log(talkParams)
|
||||
if (options.groupId) {
|
||||
console.log(options.groupId)
|
||||
state.groupId = Number(options.groupId)
|
||||
getGroupInfo()
|
||||
getGroupMembers()
|
||||
await groupStore.setGroupInfo()
|
||||
updateGroupInfos()
|
||||
getGroupNotice()
|
||||
}
|
||||
if (options.sessionId) {
|
||||
@ -287,19 +286,19 @@ onMounted(() => {
|
||||
//群头像
|
||||
const groupAvatar = computed(() => {
|
||||
return (
|
||||
state?.groupInfo?.avatar ||
|
||||
groupTypeMapping[state?.groupInfo?.group_type]?.defaultImg
|
||||
groupParams?.groupInfo?.avatar ||
|
||||
groupTypeMapping[groupParams?.groupInfo?.group_type]?.defaultImg
|
||||
)
|
||||
})
|
||||
|
||||
//群名称
|
||||
const groupName = computed(() => {
|
||||
return state?.groupInfo?.group_name
|
||||
return groupParams?.groupInfo?.group_name
|
||||
})
|
||||
|
||||
//群人数
|
||||
const groupNum = computed(() => {
|
||||
return state?.groupInfo?.group_num || 0
|
||||
return groupParams?.groupInfo?.group_num || 0
|
||||
})
|
||||
|
||||
// 映射表-根据groupType设置对应值
|
||||
@ -329,46 +328,9 @@ const groupTypeMapping = {
|
||||
|
||||
//群类型
|
||||
const groupType = computed(() => {
|
||||
return groupTypeMapping[state?.groupInfo?.group_type]?.result_type || ''
|
||||
return groupTypeMapping[groupParams?.groupInfo?.group_type]?.result_type || ''
|
||||
})
|
||||
|
||||
//查询群信息
|
||||
const getGroupInfo = () => {
|
||||
let params = {
|
||||
group_id: state.groupId,
|
||||
}
|
||||
const resp = ServeQueryGroupInfo(params)
|
||||
console.log(resp)
|
||||
resp.then(({ code, data }) => {
|
||||
console.log(data)
|
||||
if (code == 200) {
|
||||
state.groupInfo = data
|
||||
updateGroupInfos()
|
||||
} else {
|
||||
}
|
||||
})
|
||||
|
||||
resp.catch(() => {})
|
||||
}
|
||||
|
||||
//查看群成员
|
||||
const getGroupMembers = () => {
|
||||
let params = {
|
||||
group_id: state.groupId,
|
||||
}
|
||||
const resp = ServeQueryGroupMembers(params)
|
||||
console.log(resp)
|
||||
resp.then(({ code, data }) => {
|
||||
console.log(data)
|
||||
if (code == 200) {
|
||||
state.memberList = data.items
|
||||
} else {
|
||||
}
|
||||
})
|
||||
|
||||
resp.catch(() => {})
|
||||
}
|
||||
|
||||
//群公告查询
|
||||
const getGroupNotice = () => {
|
||||
let params = {
|
||||
@ -466,6 +428,10 @@ const toManagePage = (label) => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/chatSettings/groupManage/manageGroupSilence',
|
||||
})
|
||||
} else if (label === t('chat.settings.groupAdmin')) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/chatSettings/groupManage/manageGroupAdmin',
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -22,19 +22,11 @@
|
||||
>
|
||||
<template #top>
|
||||
<div class="searchRoot">
|
||||
<tm-input
|
||||
class="searchRoot_input"
|
||||
placeholder="请输入…"
|
||||
color="#F9F9FD"
|
||||
:round="1"
|
||||
prefix="tmicon-search"
|
||||
prefixColor="#46299D"
|
||||
:prefixLabel="state?.first_talk_record_infos?.receiver_name"
|
||||
v-model.lazy="state.searchText"
|
||||
@input="inputSearchText"
|
||||
:showClear="true"
|
||||
@clear="clearInput"
|
||||
></tm-input>
|
||||
<customInput
|
||||
:searchText="state.searchText"
|
||||
:first_talk_record_infos="state.first_talk_record_infos"
|
||||
@inputSearchText="inputSearchText"
|
||||
></customInput>
|
||||
<span
|
||||
class="searchRoot_cancelBtn text-[32rpx] font-medium"
|
||||
@click="cancelSearch"
|
||||
@ -117,6 +109,7 @@
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import customInput from '@/components/custom-input/custom-input.vue'
|
||||
import ZPaging from '@/uni_modules/z-paging/components/z-paging/z-paging.vue'
|
||||
import useZPaging from '@/uni_modules/z-paging/components/z-paging/js/hooks/useZPaging.js'
|
||||
import searchItem from './searchItem.vue'
|
||||
@ -159,11 +152,6 @@ onMounted(() => {
|
||||
}
|
||||
})
|
||||
|
||||
//清除输入的搜索内容
|
||||
const clearInput = () => {
|
||||
inputSearchText('')
|
||||
}
|
||||
|
||||
//输入搜索文本
|
||||
const inputSearchText = (e) => {
|
||||
// console.log(e)
|
||||
@ -385,15 +373,6 @@ const clickSearchItem = (searchResultKey, searchItem) => {
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
|
||||
.searchRoot_input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.searchRoot_input::v-deep .tmicon-times-circle-fill::before {
|
||||
content: '\e82a';
|
||||
color: #d2d2d5;
|
||||
}
|
||||
|
||||
.searchRoot_cancelBtn {
|
||||
line-height: 44rpx;
|
||||
color: $theme-primary;
|
||||
|
||||
@ -7,3 +7,4 @@ export * from '@/store/modules/editor-draft'
|
||||
export * from '@/store/modules/uploads'
|
||||
export * from '@/store/modules/dialogueList'
|
||||
// export * from '@/store/modules/note'
|
||||
export * from '@/store/modules/group'
|
||||
|
||||
@ -3,7 +3,7 @@ import {
|
||||
ServeRemoveRecords,
|
||||
ServeRevokeRecords,
|
||||
ServePublishMessage,
|
||||
ServeCollectEmoticon
|
||||
ServeCollectEmoticon,
|
||||
} from '@/api/chat/index'
|
||||
import { ServeGetGroupMembers } from '@/api/group/index'
|
||||
import { useEditorStore } from './editor'
|
||||
@ -22,7 +22,7 @@ export const useDialogueStore = defineStore('dialogue', {
|
||||
talk: {
|
||||
username: '',
|
||||
talk_type: 0, // 对话来源[1:私聊;2:群聊]
|
||||
receiver_id: 0
|
||||
receiver_id: 0,
|
||||
},
|
||||
|
||||
// 好友是否正在输入文字
|
||||
@ -55,20 +55,26 @@ export const useDialogueStore = defineStore('dialogue', {
|
||||
talk_type: 1, // 对话类型
|
||||
receiver_id: 0, // 接收者ID
|
||||
read_sequence: 0, // 当前已读的最后一条记录
|
||||
records: []
|
||||
}
|
||||
records: [],
|
||||
},
|
||||
},
|
||||
// 转发消息类型
|
||||
forwardType: 1,
|
||||
// 合并转发消息
|
||||
forwardMessages: []
|
||||
forwardMessages: [],
|
||||
}
|
||||
},
|
||||
getters: {
|
||||
// 多选列表
|
||||
selectItems: (state) => state.records.filter((item) => item.isCheck),
|
||||
// 当前对话是否是群聊
|
||||
isGroupTalk: (state) => state.talk.talk_type === 2
|
||||
isGroupTalk: (state) => state.talk.talk_type === 2,
|
||||
//获取被禁言的成员列表
|
||||
getSilenceMember: (state) =>
|
||||
state.members.filter((item) => item.is_mute === 1),
|
||||
//获取群管理员
|
||||
getAdminList: (state) =>
|
||||
state.members.filter((item) => item.leader === 1),
|
||||
},
|
||||
actions: {
|
||||
// 更新在线状态
|
||||
@ -82,7 +88,7 @@ export const useDialogueStore = defineStore('dialogue', {
|
||||
this.talk = {
|
||||
username: data.remark || data.name,
|
||||
talk_type: data.talk_type,
|
||||
receiver_id: data.receiver_id
|
||||
receiver_id: data.receiver_id,
|
||||
}
|
||||
|
||||
this.index_name = `${data.talk_type}_${data.receiver_id}`
|
||||
@ -99,7 +105,7 @@ export const useDialogueStore = defineStore('dialogue', {
|
||||
// 更新提及列表
|
||||
async updateGroupMembers() {
|
||||
let { code, data } = await ServeGetGroupMembers({
|
||||
group_id: this.talk.receiver_id
|
||||
group_id: this.talk.receiver_id,
|
||||
})
|
||||
|
||||
if (code != 200) return
|
||||
@ -112,7 +118,7 @@ export const useDialogueStore = defineStore('dialogue', {
|
||||
leader: o.leader,
|
||||
remark: o.remark,
|
||||
online: false,
|
||||
value: o.nickname
|
||||
value: o.nickname,
|
||||
}))
|
||||
},
|
||||
|
||||
@ -191,7 +197,7 @@ export const useDialogueStore = defineStore('dialogue', {
|
||||
ServeRemoveRecords({
|
||||
talk_type: this.talk.talk_type,
|
||||
receiver_id: this.talk.receiver_id,
|
||||
msg_ids: msgIds
|
||||
msg_ids: msgIds,
|
||||
}).then((res) => {
|
||||
if (res.code == 200) {
|
||||
this.batchDelDialogueRecord(msgIds)
|
||||
@ -219,9 +225,9 @@ export const useDialogueStore = defineStore('dialogue', {
|
||||
type: 'forward',
|
||||
receiver: {
|
||||
talk_type: this.talk.talk_type,
|
||||
receiver_id: this.talk.receiver_id
|
||||
receiver_id: this.talk.receiver_id,
|
||||
},
|
||||
...options
|
||||
...options,
|
||||
}
|
||||
|
||||
ServePublishMessage(data).then((res) => {
|
||||
@ -247,6 +253,6 @@ export const useDialogueStore = defineStore('dialogue', {
|
||||
// 设置合并转发消息
|
||||
setForwardMessages(messages) {
|
||||
this.forwardMessages = messages
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
29
src/store/modules/group.js
Normal file
29
src/store/modules/group.js
Normal file
@ -0,0 +1,29 @@
|
||||
import { defineStore } from 'pinia'
|
||||
import { ServeGroupDetail, ServeGetGroupMembers } from '@/api/group/index'
|
||||
import { useDialogueStore } from '@/store'
|
||||
|
||||
export const useGroupStore = defineStore('group', {
|
||||
state: () => {
|
||||
return {
|
||||
groupInfo: '', //群聊信息
|
||||
memberList: [], //群成员列表
|
||||
}
|
||||
},
|
||||
getters: {
|
||||
//获取群聊信息
|
||||
getGroupInfo: (state) => state.groupInfo,
|
||||
},
|
||||
actions: {
|
||||
//获取群聊信息
|
||||
async setGroupInfo() {
|
||||
const dialogueStore = useDialogueStore()
|
||||
let { code, data } = await ServeGroupDetail({
|
||||
group_id: dialogueStore.talk.receiver_id,
|
||||
})
|
||||
if (code == 200) {
|
||||
console.log(data)
|
||||
this.groupInfo = data
|
||||
}
|
||||
},
|
||||
},
|
||||
})
|
||||
@ -112,5 +112,8 @@
|
||||
"chat.manage.silenceMember": "被禁言的成员",
|
||||
"chat.manage.silenceAll": "全员禁言",
|
||||
"chat.manage.silenceAllHint": "开启后，只允许群管理员发言",
|
||||
"chat.manage.addSilenceMember": "添加禁言成员"
|
||||
"chat.manage.addSilenceMember": "添加禁言成员",
|
||||
"chatSettings.btn.undoSilence": "解禁",
|
||||
"silence.tag.hasDone": "已禁言",
|
||||
"chat.manage.addAdmin": "添加管理员"
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user