OA体制内聊天新增群名称修改、头像修改、新增群公告、群内禁言管理等页面，并接入置顶会话和消息免打扰设置接口功能
This commit is contained in:
parent
85de077ae0
commit
5382335a9c
@ -27,3 +27,21 @@ export const ServeQueryGroupNotice = (data) => {
|
||||
data,
|
||||
})
|
||||
}
|
||||
|
||||
// 置顶聊天会话
|
||||
export const ServeTopTalk = (data) => {
|
||||
return request({
|
||||
url: '/api/v1/talk/topping',
|
||||
method: 'POST',
|
||||
data,
|
||||
})
|
||||
}
|
||||
|
||||
// 免打扰聊天会话
|
||||
export const ServeDisturbTalk = (data) => {
|
||||
return request({
|
||||
url: '/api/v1/talk/disturb',
|
||||
method: 'POST',
|
||||
data,
|
||||
})
|
||||
}
|
||||
|
||||
42
src/components/custom-btn/custom-btn.vue
Normal file
42
src/components/custom-btn/custom-btn.vue
Normal file
@ -0,0 +1,42 @@
|
||||
<template>
|
||||
<div class="custom-btn" :class="props.isBottom ? 'custom-btn-bottom' : ''">
|
||||
<wd-button custom-class="custom-btn-class" @click="clickBtn">{{ props.btnText }}</wd-button>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { reactive } from 'vue'
|
||||
import { defineProps, defineEmits } from 'vue'
|
||||
const state = reactive({})
|
||||
const emits = defineEmits(['clickBtn'])
|
||||
const props = defineProps({
|
||||
isBottom: false, //是否底部按钮
|
||||
btnText: '', //按钮文字
|
||||
})
|
||||
|
||||
//点击
|
||||
const clickBtn = () => {
|
||||
emits('clickBtn')
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.custom-btn {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.custom-btn-class {
|
||||
background-color: $theme-primary;
|
||||
padding: 18rpx 185rpx;
|
||||
border-radius: 8rpx;
|
||||
box-shadow: 0 6px 12px 2px rgba(188, 188, 188, 0.08);
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
}
|
||||
.custom-btn-bottom {
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
padding: 14rpx 0 72rpx;
|
||||
}
|
||||
</style>
|
||||
@ -106,6 +106,38 @@
|
||||
"navigationStyle": "custom",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/chatSettings/groupManage/editGroupName",
|
||||
"type": "page",
|
||||
"style": {
|
||||
"navigationStyle": "custom",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/chatSettings/groupManage/editAvatar",
|
||||
"type": "page",
|
||||
"style": {
|
||||
"navigationStyle": "custom",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/chatSettings/groupManage/manageGroupMembers",
|
||||
"type": "page",
|
||||
"style": {
|
||||
"navigationStyle": "custom",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/chatSettings/groupManage/manageGroupSilence",
|
||||
"type": "page",
|
||||
"style": {
|
||||
"navigationStyle": "custom",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
}
|
||||
],
|
||||
"globalStyle": {
|
||||
|
||||
117
src/pages/chatSettings/components/groupMembersList.vue
Normal file
117
src/pages/chatSettings/components/groupMembersList.vue
Normal file
@ -0,0 +1,117 @@
|
||||
<template>
|
||||
<div class="group-member-list">
|
||||
<div
|
||||
class="group-member-list-each"
|
||||
v-for="(memberItem, memberIndex) in props?.memberList"
|
||||
>
|
||||
<div
|
||||
class="group-member-each"
|
||||
v-if="
|
||||
props.memberListsLimit ? memberIndex < props.memberListsLimit : true
|
||||
"
|
||||
>
|
||||
<div class="group-member-avatar">
|
||||
<img v-if="memberItem.avatar" :src="memberItem.avatar" />
|
||||
<span v-if="!memberItem.avatar" class="text-[24rpx] font-bold">
|
||||
{{
|
||||
memberItem.nickname.length >= 2
|
||||
? memberItem.nickname.slice(-2)
|
||||
: memberItem.nickname
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
<div class="group-member-tag" v-if="memberIndex < 3">
|
||||
<span class="text-[16rpx] font-regular">
|
||||
{{ $t('group.identify.admin') }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="group-member-name">
|
||||
<span class="text-[24rpx] font-regular">
|
||||
{{ memberItem.nickname }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { defineProps } from 'vue'
|
||||
const props = defineProps({
|
||||
memberList: Array, //人员列表
|
||||
memberListsLimit: Number, //人员列表数量限制
|
||||
})
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.group-member-list {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
.group-member-list-each {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: calc(100% / 5);
|
||||
.group-member-each {
|
||||
padding: 32rpx 0 0;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
.group-member-avatar {
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(to right, #674bbc, #46299d);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
span {
|
||||
line-height: 34rpx;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.group-member-tag {
|
||||
position: absolute;
|
||||
bottom: 34rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #cf3050;
|
||||
border-radius: 16rpx;
|
||||
padding: 0 12rpx;
|
||||
span {
|
||||
line-height: 22rpx;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.group-member-name {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 8rpx 0 0;
|
||||
width: 100%;
|
||||
span {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
line-height: 34rpx;
|
||||
color: #919191;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -2,33 +2,39 @@
|
||||
<div class="setting-form-item">
|
||||
<div class="item-main">
|
||||
<div class="item-main-label">
|
||||
<span class="text-[32rpx] font-regular">{{ item.label }}</span>
|
||||
<span class="text-[32rpx] font-regular">{{ props?.item?.label }}</span>
|
||||
</div>
|
||||
<div class="item-main-value" @click="toManagePage(item)">
|
||||
<span class="text-[32rpx] font-regular" v-if="item.value">
|
||||
{{ item.value }}
|
||||
<div class="item-main-value" @click="toManagePage(props?.item)">
|
||||
<span class="text-[32rpx] font-regular" v-if="props?.item?.value">
|
||||
{{ props?.item?.value }}
|
||||
</span>
|
||||
<img
|
||||
v-if="item.hasPointer"
|
||||
v-if="props?.item?.hasPointer"
|
||||
src="/src/static/image/chatSettings/pointer.png"
|
||||
/>
|
||||
<tm-switch
|
||||
:width="88"
|
||||
:height="48"
|
||||
v-if="item.customInfo && item.customInfo === 'switch'"
|
||||
v-if="props?.item?.customInfo && props?.item?.customInfo === 'switch'"
|
||||
barIcon=""
|
||||
color="#46299D"
|
||||
unCheckedColor="#EEEEEE"
|
||||
:defaultValue="defaultValue"
|
||||
@change="changeSwitch($event, props?.item)"
|
||||
></tm-switch>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-sub" v-if="item.subValue">
|
||||
<span class="text-[32rpx] font-regular">{{ item.subValue }}</span>
|
||||
<div class="item-sub" v-if="props?.item?.subValue">
|
||||
<span class="text-[32rpx] font-regular">{{ props?.item?.subValue }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { defineProps, defineEmits } from 'vue'
|
||||
import { defineProps, defineEmits, computed } from 'vue'
|
||||
|
||||
import { useI18n } from 'vue-i18n'
|
||||
const { t } = useI18n()
|
||||
|
||||
const props = defineProps({
|
||||
item: {
|
||||
type: Object,
|
||||
@ -36,11 +42,38 @@ const props = defineProps({
|
||||
return {}
|
||||
},
|
||||
},
|
||||
sessionInfo: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {}
|
||||
},
|
||||
},
|
||||
})
|
||||
const emits = defineEmits(['toManagePage'])
|
||||
const emits = defineEmits(['toManagePage', 'changeSwitch'])
|
||||
const toManagePage = (item) => {
|
||||
emits('toManagePage', item.label)
|
||||
}
|
||||
const defaultValue = computed(() => {
|
||||
let switchStatus = false
|
||||
if (
|
||||
props?.item?.label === t('chat.settings.topSession') &&
|
||||
props?.sessionInfo?.is_top == 1
|
||||
) {
|
||||
switchStatus = true
|
||||
}
|
||||
if (
|
||||
props?.item?.label === t('chat.settings.messageNoDisturb') &&
|
||||
props?.sessionInfo?.is_disturb == 1
|
||||
) {
|
||||
switchStatus = true
|
||||
}
|
||||
return switchStatus
|
||||
})
|
||||
|
||||
//切换开关选择
|
||||
const changeSwitch = (e, item) => {
|
||||
emits('changeSwitch', e, item.label)
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.setting-form-item {
|
||||
|
||||
95
src/pages/chatSettings/groupManage/editAvatar.vue
Normal file
95
src/pages/chatSettings/groupManage/editAvatar.vue
Normal file
@ -0,0 +1,95 @@
|
||||
<template>
|
||||
<div class="outer-layer manage-group-info-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.editAvatar') }}
|
||||
</span>
|
||||
</div>
|
||||
</tm-navbar>
|
||||
</template>
|
||||
<div class="edit-group-info">
|
||||
<div class="group-avatar">
|
||||
<img :src="state.groupAvatar" />
|
||||
</div>
|
||||
</div>
|
||||
<customBtn :btnText="$t('button.text.edit')"></customBtn>
|
||||
<template #bottom>
|
||||
<div class="app-logo-icon">
|
||||
<img src="/src/static/image/chatSettings/app-icon.png" />
|
||||
</div>
|
||||
</template>
|
||||
</ZPaging>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import customBtn from '@/components/custom-btn/custom-btn.vue'
|
||||
import ZPaging from '@/uni_modules/z-paging/components/z-paging/z-paging.vue'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import { reactive } from 'vue'
|
||||
|
||||
const state = reactive({
|
||||
pageTitle: '', //页面标题
|
||||
groupAvatar: '', //群头像
|
||||
groupName: '', //群名称
|
||||
})
|
||||
|
||||
onLoad((options) => {
|
||||
console.log(options)
|
||||
if (options.groupAvatar) {
|
||||
state.groupAvatar = options.groupAvatar
|
||||
}
|
||||
})
|
||||
|
||||
//点击清空群名称输入
|
||||
const clearGroupNameInput = () => {
|
||||
state.groupName = ''
|
||||
}
|
||||
|
||||
//点击确认修改
|
||||
const confirmEdit = () => {
|
||||
console.log(state.groupName)
|
||||
}
|
||||
</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;
|
||||
}
|
||||
|
||||
.edit-group-info {
|
||||
margin: 158rpx 94rpx 100rpx;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 6px 12px 2px rgba(0, 0, 0, 0.16);
|
||||
padding: 50rpx;
|
||||
border-radius: 16rpx;
|
||||
.group-avatar {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
img {
|
||||
width: 460rpx;
|
||||
height: 460rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.app-logo-icon {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 0 44rpx;
|
||||
img {
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
127
src/pages/chatSettings/groupManage/editGroupName.vue
Normal file
127
src/pages/chatSettings/groupManage/editGroupName.vue
Normal file
@ -0,0 +1,127 @@
|
||||
<template>
|
||||
<div class="outer-layer manage-group-info-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.editGroupName') }}
|
||||
</span>
|
||||
</div>
|
||||
</tm-navbar>
|
||||
</template>
|
||||
<div class="edit-group-info">
|
||||
<div class="group-avatar">
|
||||
<img :src="state.groupAvatar" />
|
||||
</div>
|
||||
<div class="group-name">
|
||||
<span class="text-[28rpx] font-medium">
|
||||
{{ $t('chat.settings.groupName') }}
|
||||
</span>
|
||||
<div class="groupNameInputArea">
|
||||
<input
|
||||
class="groupNameInput"
|
||||
:placeholder="$t('edit.groupName.placeholder')"
|
||||
placeholder-style="color:#B4B4B4;font-size:28rpx;font-weight:500;line-height:40rpx;"
|
||||
v-model="state.groupName"
|
||||
/>
|
||||
<img
|
||||
class="groupName-input-clearBtn"
|
||||
src="/src/static/image/chatSettings/clear-btn.png"
|
||||
@click="clearGroupNameInput"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<template #bottom>
|
||||
<customBtn
|
||||
:isBottom="true"
|
||||
:btnText="$t('ok')"
|
||||
@clickBtn="confirmEdit"
|
||||
></customBtn>
|
||||
</template>
|
||||
</ZPaging>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import customBtn from '@/components/custom-btn/custom-btn.vue'
|
||||
import ZPaging from '@/uni_modules/z-paging/components/z-paging/z-paging.vue'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import { reactive } from 'vue'
|
||||
|
||||
const state = reactive({
|
||||
pageTitle: '', //页面标题
|
||||
groupAvatar: '', //群头像
|
||||
groupName: '', //群名称
|
||||
})
|
||||
|
||||
onLoad((options) => {
|
||||
console.log(options)
|
||||
if (options.groupAvatar) {
|
||||
state.groupAvatar = options.groupAvatar
|
||||
}
|
||||
})
|
||||
|
||||
//点击清空群名称输入
|
||||
const clearGroupNameInput = () => {
|
||||
state.groupName = ''
|
||||
}
|
||||
|
||||
//点击确认修改
|
||||
const confirmEdit = () => {
|
||||
console.log(state.groupName)
|
||||
}
|
||||
</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;
|
||||
}
|
||||
|
||||
.edit-group-info {
|
||||
.group-avatar {
|
||||
padding: 250rpx 0 88rpx;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
img {
|
||||
width: 192rpx;
|
||||
height: 192rpx;
|
||||
}
|
||||
}
|
||||
.group-name {
|
||||
padding: 0 32rpx;
|
||||
span {
|
||||
display: inline-block;
|
||||
padding: 0 32rpx 10rpx;
|
||||
color: $theme-text;
|
||||
}
|
||||
.groupNameInputArea {
|
||||
position: relative;
|
||||
.groupNameInput {
|
||||
background-color: #fff;
|
||||
height: 110rpx;
|
||||
box-shadow: 0 6px 12px 2px rgba(188, 188, 188, 0.08);
|
||||
padding: 0 74rpx 0 32rpx;
|
||||
color: #B747474;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
.groupName-input-clearBtn {
|
||||
position: absolute;
|
||||
right: 22rpx;
|
||||
top: 40rpx;
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
85
src/pages/chatSettings/groupManage/manageGroupMembers.vue
Normal file
85
src/pages/chatSettings/groupManage/manageGroupMembers.vue
Normal file
@ -0,0 +1,85 @@
|
||||
<template>
|
||||
<div class="outer-layer manage-group-members-page">
|
||||
<div class="root">
|
||||
<ZPaging
|
||||
ref="zPaging"
|
||||
: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"
|
||||
>
|
||||
<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.groupMember') }}
|
||||
</span>
|
||||
</div>
|
||||
</tm-navbar>
|
||||
</template>
|
||||
<div class="group-members-list">
|
||||
<groupMemberList :memberList="state?.memberList"></groupMemberList>
|
||||
</div>
|
||||
</ZPaging>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
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'
|
||||
|
||||
const state = reactive({
|
||||
memberList: [], //人员列表
|
||||
})
|
||||
|
||||
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 {
|
||||
flex: 1;
|
||||
background-image: url('@/static/image/clockIn/z3280@3x.png');
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.group-members-list {
|
||||
margin: 20rpx 32rpx;
|
||||
padding: 0 0 32rpx;
|
||||
background-color: #fff;
|
||||
}
|
||||
</style>
|
||||
109
src/pages/chatSettings/groupManage/manageGroupSilence.vue
Normal file
109
src/pages/chatSettings/groupManage/manageGroupSilence.vue
Normal file
@ -0,0 +1,109 @@
|
||||
<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.groupGag') }}
|
||||
</span>
|
||||
</div>
|
||||
</tm-navbar>
|
||||
</template>
|
||||
<div class="manage-group-silence">
|
||||
<span class="manage-group-silence-title text-[28rpx] font-regular">
|
||||
{{ $t('chat.manage.silenceMember') }}
|
||||
</span>
|
||||
<div class="add-silence-member-btn chat-settings-card">
|
||||
<img src="/src/static/image/chatSettings/add-btn.png" />
|
||||
<span class="text-[28rpx] font-medium">
|
||||
{{ $t('chat.manage.addSilenceMember') }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="silence-all-btn chat-settings-card">
|
||||
<settingFormItem
|
||||
:item="state.silenceAllBtn"
|
||||
:sessionInfo="state?.sessionInfo"
|
||||
@changeSwitch="changeSwitch"
|
||||
></settingFormItem>
|
||||
</div>
|
||||
</div>
|
||||
</ZPaging>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
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 { useI18n } from 'vue-i18n'
|
||||
const { t } = useI18n()
|
||||
|
||||
const state = reactive({
|
||||
silenceAllBtn: null, //全员禁言按钮
|
||||
})
|
||||
|
||||
onLoad((options) => {
|
||||
console.log(options)
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
state.silenceAllBtn = {
|
||||
label: t('chat.manage.silenceAll'),
|
||||
hasPointer: false,
|
||||
value: '',
|
||||
subValue: t('chat.manage.silenceAllHint'),
|
||||
customInfo: 'switch',
|
||||
}
|
||||
})
|
||||
|
||||
//切换开关选择
|
||||
const changeSwitch = (switchStatus, label) => {
|
||||
console.log(switchStatus, label)
|
||||
}
|
||||
</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;
|
||||
}
|
||||
}
|
||||
.silence-all-btn {
|
||||
padding: 32rpx;
|
||||
}
|
||||
.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>
|
||||
@ -17,7 +17,10 @@
|
||||
</span>
|
||||
</div>
|
||||
<template #right>
|
||||
<div class="nav-bar-done-btn">
|
||||
<div
|
||||
class="nav-bar-done-btn"
|
||||
:class="state.canDoComplete ? 'nav-bar-done-btn-can-do' : ''"
|
||||
>
|
||||
<span class="text-[34rpx] font-regular">
|
||||
{{ $t('button.text.done') }}
|
||||
</span>
|
||||
@ -27,6 +30,7 @@
|
||||
</template>
|
||||
<div class="notice-text-area">
|
||||
<wd-textarea
|
||||
style="height: 100%;"
|
||||
v-model="state.groupNotice"
|
||||
:placeholder="$t('input.placeholder.enter')"
|
||||
:maxlength="500"
|
||||
@ -44,6 +48,7 @@ import { reactive } from 'vue'
|
||||
|
||||
const state = reactive({
|
||||
groupNotice: '', //群公告
|
||||
canDoComplete: false, //是否可以点击完成按钮
|
||||
})
|
||||
|
||||
//点击返回上一页
|
||||
@ -56,6 +61,11 @@ const toPrevPage = () => {
|
||||
//输入群公告
|
||||
const inputGroupNotice = (e) => {
|
||||
state.groupNotice = e
|
||||
if (e.trim()) {
|
||||
state.canDoComplete = true
|
||||
} else {
|
||||
state.canDoComplete = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
@ -67,6 +77,9 @@ const inputGroupNotice = (e) => {
|
||||
}
|
||||
|
||||
.manage-notice-page {
|
||||
::v-deep .zp-paging-container-content {
|
||||
height: 100%;
|
||||
}
|
||||
.nav-bar-cancel-btn {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@ -91,5 +104,38 @@ const inputGroupNotice = (e) => {
|
||||
line-height: 40rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-bar-done-btn-can-do {
|
||||
background-color: $theme-primary;
|
||||
span {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.notice-text-area {
|
||||
padding: 20rpx 32rpx;
|
||||
height: 100%;
|
||||
|
||||
::v-deep .wd-textarea {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
::v-deep .wd-textarea__value {
|
||||
padding-right: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
::v-deep .wd-textarea__inner {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
::v-deep .uni-textarea-compute {
|
||||
div {
|
||||
font-size: 32rpx;
|
||||
font-weight: 400;
|
||||
line-height: 44rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
</template>
|
||||
<div class="chat-settings">
|
||||
<div class="chat-group-base-infos chat-settings-card">
|
||||
<div class="base-info-avatar">
|
||||
<div class="base-info-avatar" @click="toEditAvatarPage">
|
||||
<img :src="groupAvatar" />
|
||||
</div>
|
||||
<div class="base-info">
|
||||
@ -43,7 +43,7 @@
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="base-info-edit">
|
||||
<div class="base-info-edit" @click="toEditGroupInfoPage">
|
||||
<img src="/src/static/image/chatSettings/edit-btn.png" />
|
||||
</div>
|
||||
</div>
|
||||
@ -53,39 +53,14 @@
|
||||
v-for="(item, index) in state.chatGroupMembers"
|
||||
:key="index"
|
||||
>
|
||||
<settingFormItem :item="item"></settingFormItem>
|
||||
<div class="group-member-list">
|
||||
<div
|
||||
class="group-member-list-each"
|
||||
v-for="(memberItem, memberIndex) in state?.memberList"
|
||||
>
|
||||
<div class="group-member-each" v-if="memberIndex < 15">
|
||||
<div class="group-member-avatar">
|
||||
<img v-if="memberItem.avatar" :src="memberItem.avatar" />
|
||||
<span
|
||||
v-if="!memberItem.avatar"
|
||||
class="text-[24rpx] font-bold"
|
||||
>
|
||||
{{
|
||||
memberItem.nickname.length >= 2
|
||||
? memberItem.nickname.slice(-2)
|
||||
: memberItem.nickname
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
<div class="group-member-tag" v-if="memberIndex < 3">
|
||||
<span class="text-[16rpx] font-regular">
|
||||
{{ $t('group.identify.admin') }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="group-member-name">
|
||||
<span class="text-[24rpx] font-regular">
|
||||
{{ memberItem.nickname }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<settingFormItem
|
||||
:item="item"
|
||||
@toManagePage="toManagePage"
|
||||
></settingFormItem>
|
||||
<groupMemberList
|
||||
:memberList="state?.memberList"
|
||||
:memberListsLimit="15"
|
||||
></groupMemberList>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chat-group-infos chat-settings-card">
|
||||
@ -127,7 +102,12 @@
|
||||
v-for="(item, index) in state.chatSettings"
|
||||
:key="index"
|
||||
>
|
||||
<settingFormItem :item="item"></settingFormItem>
|
||||
<settingFormItem
|
||||
:item="item"
|
||||
@toManagePage="toManagePage"
|
||||
:sessionInfo="state?.sessionInfo"
|
||||
@changeSwitch="changeSwitch"
|
||||
></settingFormItem>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chat-group-infos chat-settings-card">
|
||||
@ -136,7 +116,10 @@
|
||||
v-for="(item, index) in state.chatManagement"
|
||||
:key="index"
|
||||
>
|
||||
<settingFormItem :item="item"></settingFormItem>
|
||||
<settingFormItem
|
||||
:item="item"
|
||||
@toManagePage="toManagePage"
|
||||
></settingFormItem>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clear-chat-record-btn chat-settings-card">
|
||||
@ -173,25 +156,34 @@ import recordSearchTypeIcon_files from '@/static/image/chatSettings/recordSearch
|
||||
import recordSearchTypeIcon_link from '@/static/image/chatSettings/recordSearchTypeLink.png'
|
||||
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 { onLoad } from '@dcloudio/uni-app'
|
||||
import {
|
||||
ServeQueryGroupInfo,
|
||||
ServeQueryGroupMembers,
|
||||
ServeQueryGroupNotice,
|
||||
ServeTopTalk,
|
||||
ServeDisturbTalk,
|
||||
} from '@/api/chatSettings/index'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
const { t } = useI18n()
|
||||
|
||||
onLoad((options) => {
|
||||
if (options.groupId) {
|
||||
console.log(options.groupId)
|
||||
state.groupId = Number(options.groupId)
|
||||
getGroupInfo()
|
||||
getGroupMembers()
|
||||
getGroupNotice()
|
||||
}
|
||||
const userStore = useUserStore()
|
||||
const talkStore = useTalkStore()
|
||||
const dialogueStore = useDialogueStore()
|
||||
const talkParams = reactive({
|
||||
uid: computed(() => userStore.uid),
|
||||
index_name: computed(() => dialogueStore.index_name),
|
||||
type: computed(() => dialogueStore.talk.talk_type),
|
||||
receiver_id: computed(() => dialogueStore.talk.receiver_id),
|
||||
username: computed(() => dialogueStore.talk.username),
|
||||
online: computed(() => dialogueStore.online),
|
||||
keyboard: computed(() => dialogueStore.keyboard),
|
||||
num: computed(() => dialogueStore.members.length),
|
||||
})
|
||||
const topItems = computed(() => talkStore.topItems)
|
||||
const disturbItems = computed(() => talkStore.disturbItems)
|
||||
|
||||
const state = reactive({
|
||||
chatGroupMembers: [], //群成员form-item
|
||||
@ -203,6 +195,35 @@ const state = reactive({
|
||||
groupInfo: null, //群信息
|
||||
memberList: [], //群成员列表
|
||||
groupNotice: [], //群公告
|
||||
sessionId: '', //会话id
|
||||
})
|
||||
|
||||
onLoad((options) => {
|
||||
console.log(talkParams)
|
||||
if (options.groupId) {
|
||||
console.log(options.groupId)
|
||||
state.groupId = Number(options.groupId)
|
||||
getGroupInfo()
|
||||
getGroupMembers()
|
||||
getGroupNotice()
|
||||
}
|
||||
if (options.sessionId) {
|
||||
state.sessionId = Number(options.sessionId)
|
||||
if (topItems.value.length > 0) {
|
||||
topItems.value.forEach((item) => {
|
||||
if (item.id == options.sessionId) {
|
||||
state.sessionInfo = item
|
||||
}
|
||||
})
|
||||
}
|
||||
if (disturbItems.value.length > 0) {
|
||||
disturbItems.value.forEach((item) => {
|
||||
if (item.id == options.sessionId) {
|
||||
state.sessionInfo = item
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
@ -403,13 +424,49 @@ const updateGroupInfos = () => {
|
||||
]
|
||||
}
|
||||
|
||||
//点击跳转到修改群信息页面
|
||||
const toEditGroupInfoPage = () => {
|
||||
uni.navigateTo({
|
||||
url:
|
||||
'/pages/chatSettings/groupManage/editGroupName?groupAvatar=' +
|
||||
groupAvatar.value,
|
||||
})
|
||||
}
|
||||
|
||||
//点击跳转到修改头像页面
|
||||
const toEditAvatarPage = () => {
|
||||
uni.navigateTo({
|
||||
url:
|
||||
'/pages/chatSettings/groupManage/editAvatar?groupAvatar=' +
|
||||
groupAvatar.value,
|
||||
})
|
||||
}
|
||||
|
||||
//点击跳转到管理页面
|
||||
const toManagePage = (label) => {
|
||||
console.log(label)
|
||||
if (label && label === t('chat.settings.groupNotice')) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/chatSettings/groupManage/manageNotice',
|
||||
})
|
||||
if (label) {
|
||||
if (label === t('chat.settings.groupName')) {
|
||||
uni.navigateTo({
|
||||
url:
|
||||
'/pages/chatSettings/groupManage/editGroupName?groupAvatar=' +
|
||||
groupAvatar.value,
|
||||
})
|
||||
} else if (label === t('chat.settings.groupNotice')) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/chatSettings/groupManage/manageNotice',
|
||||
})
|
||||
} else if (label === t('chat.settings.groupMember')) {
|
||||
uni.navigateTo({
|
||||
url:
|
||||
'/pages/chatSettings/groupManage/manageGroupMembers?groupId=' +
|
||||
state.groupId,
|
||||
})
|
||||
} else if (label === t('chat.settings.groupGag')) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/chatSettings/groupManage/manageGroupSilence',
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -427,6 +484,46 @@ const toSearchByConditionPage = (flag) => {
|
||||
state.groupId,
|
||||
})
|
||||
}
|
||||
|
||||
//切换开关选择
|
||||
const changeSwitch = (switchStatus, label) => {
|
||||
let params
|
||||
let resp
|
||||
if (label == t('chat.settings.topSession')) {
|
||||
params = {
|
||||
list_id: state.sessionId, //聊天会话的id
|
||||
type: switchStatus ? 1 : 2,
|
||||
}
|
||||
resp = ServeTopTalk(params)
|
||||
} else if (label == t('chat.settings.messageNoDisturb')) {
|
||||
params = {
|
||||
talk_type: talkParams.type, //1私聊；2群聊
|
||||
receiver_id: talkParams.receiver_id, //接收人id或群id
|
||||
is_disturb: switchStatus ? 1 : 0, //是否开启免打扰，0不免打扰，1免打扰
|
||||
}
|
||||
resp = ServeDisturbTalk(params)
|
||||
}
|
||||
console.log(resp)
|
||||
resp.then(({ code, data }) => {
|
||||
console.log(data)
|
||||
if (code == 200) {
|
||||
if (label == t('chat.settings.topSession')) {
|
||||
talkStore.updateItem({
|
||||
index_name: talkParams.index_name,
|
||||
is_top: switchStatus ? 1 : 2,
|
||||
})
|
||||
} else if (label == t('chat.settings.messageNoDisturb')) {
|
||||
talkStore.updateItem({
|
||||
index_name: talkParams.index_name,
|
||||
is_disturb: switchStatus ? 1 : 0,
|
||||
})
|
||||
}
|
||||
} else {
|
||||
}
|
||||
})
|
||||
|
||||
resp.catch(() => {})
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.outer-layer {
|
||||
@ -519,78 +616,6 @@ const toSearchByConditionPage = (flag) => {
|
||||
}
|
||||
|
||||
.chat-group-members {
|
||||
.group-member-list {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
.group-member-list-each {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: calc(100% / 5);
|
||||
.group-member-each {
|
||||
margin: 32rpx 0 0;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
.group-member-avatar {
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(to right, #674bbc, #46299d);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
span {
|
||||
line-height: 34rpx;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.group-member-tag {
|
||||
position: absolute;
|
||||
top: 58rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #cf3050;
|
||||
border-radius: 16rpx;
|
||||
padding: 0 12rpx;
|
||||
span {
|
||||
line-height: 22rpx;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.group-member-name {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 8rpx 0 0;
|
||||
width: 100%;
|
||||
span {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
line-height: 34rpx;
|
||||
color: #919191;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chat-group-infos {
|
||||
|
||||
@ -228,8 +228,7 @@ import zu6053 from "@/static/image/chatList/zu6053@2x.png"
|
||||
import deepBubble from "@/components/deep-bubble/deep-bubble.vue"
|
||||
import {isRevoke } from './menu'
|
||||
import useConfirm from '@/components/x-confirm/useConfirm.js'
|
||||
|
||||
|
||||
import { onLoad as uniOnload } from '@dcloudio/uni-app'
|
||||
|
||||
Quill.register('formats/emoji', EmojiBlot)
|
||||
|
||||
@ -260,6 +259,13 @@ const state = ref({
|
||||
isOpenFilePanel: false,
|
||||
showWin: false,
|
||||
onfocusItem: null,
|
||||
sessionId: ''
|
||||
})
|
||||
|
||||
uniOnload((options) => {
|
||||
if (options.sessionId) {
|
||||
state.sessionId = options.sessionId
|
||||
}
|
||||
})
|
||||
|
||||
const handleEmojiPanel = () => {
|
||||
@ -683,7 +689,7 @@ const initData = async () => {
|
||||
//点击跳转到聊天设置页面
|
||||
const toChatSettingsPage = () => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/chatSettings/index?groupId=' + talkParams?.receiver_id
|
||||
url: '/pages/chatSettings/index?groupId=' + talkParams?.receiver_id + '&sessionId=' + state.sessionId
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
@ -139,7 +139,7 @@ const cellClick = () => {
|
||||
});
|
||||
}
|
||||
uni.navigateTo({
|
||||
url: "/pages/dialog/index",
|
||||
url: '/pages/dialog/index?sessionId=' + props.data.id,
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
BIN
src/static/image/chatSettings/add-btn.png
Normal file
BIN
src/static/image/chatSettings/add-btn.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 795 B |
BIN
src/static/image/chatSettings/app-icon.png
Normal file
BIN
src/static/image/chatSettings/app-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
src/static/image/chatSettings/clear-btn.png
Normal file
BIN
src/static/image/chatSettings/clear-btn.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 297 B |
@ -18,6 +18,10 @@ export const useTalkStore = defineStore('talk', {
|
||||
topItems: (state) => {
|
||||
return state.items.filter((item) => item.is_top == 1)
|
||||
},
|
||||
// 过滤所有免打扰对话列表
|
||||
disturbItems: (state) => {
|
||||
return state.items.filter((item) => item.is_disturb == 1)
|
||||
},
|
||||
|
||||
// 对话列表
|
||||
talkItems: (state) => {
|
||||
|
||||
@ -104,5 +104,13 @@
|
||||
"search.condition.date": "按日期查找",
|
||||
"search.condition.date_pickerTitle": "请选择聊天日期",
|
||||
"button.text.done": "完成",
|
||||
"input.placeholder.enter": "请输入..."
|
||||
"input.placeholder.enter": "请输入...",
|
||||
"chat.settings.editGroupName": "修改群名称",
|
||||
"edit.groupName.placeholder": "请输入群名称（1~20个字）",
|
||||
"chat.settings.editAvatar": "修改头像",
|
||||
"button.text.edit": "修改",
|
||||
"chat.manage.silenceMember": "被禁言的成员",
|
||||
"chat.manage.silenceAll": "全员禁言",
|
||||
"chat.manage.silenceAllHint": "开启后，只允许群管理员发言",
|
||||
"chat.manage.addSilenceMember": "添加禁言成员"
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user