chat-app/src/pages/chatSettings/index.vue

729 lines
20 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<div class="outer-layer chat-settings-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('index.chat.settings') }}
</span>
</div>
</tm-navbar>
</template>
<div class="chat-settings">
<div class="chat-group-base-infos chat-settings-card">
<div class="base-info-avatar" @click="toEditAvatarPage">
<img :src="groupAvatar" />
</div>
<div class="base-info">
<div class="base-info-name">
<span class="text-[32rpx] font-medium">{{ groupName }}</span>
<span class="base-info_num text-[32rpx] font-medium">
{{ '' + groupNum + '' }}
</span>
</div>
<div
v-if="groupParams?.groupInfo?.group_type !== 1"
class="base-info-tag"
:style="{
borderColor:
groupTypeMapping[groupParams?.groupInfo?.group_type]
?.result_type_color,
}"
>
<span
class="text-[24rpx] font-medium"
:style="{
color:
groupTypeMapping[groupParams?.groupInfo?.group_type]
?.result_type_color,
}"
>
{{ groupType }}
</span>
</div>
</div>
<div
class="base-info-edit"
@click="toEditGroupInfoPage"
v-if="groupParams?.groupInfo?.is_manager"
>
<img src="/src/static/image/chatSettings/edit-btn.png" />
</div>
</div>
<div class="chat-group-members chat-group-infos chat-settings-card">
<div
class="chat-group-infos-each"
v-for="(item, index) in state.chatGroupMembers"
:key="index"
>
<settingFormItem
:item="item"
@toManagePage="toManagePage"
></settingFormItem>
<groupMemberList
:groupType="groupParams?.groupInfo?.group_type"
:is_manager="groupParams?.groupInfo?.is_manager"
:memberList="dialogueParams?.memberList"
:memberListsLimit="
groupParams?.groupInfo?.group_type == 1 ||
groupParams?.groupInfo?.group_type == 3
? groupParams?.groupInfo?.is_manager
? 13
: 14
: 15
"
></groupMemberList>
</div>
</div>
<div class="chat-group-infos chat-settings-card">
<div
class="chat-group-infos-each"
v-for="(item, index) in state.chatGroupInfos"
:key="index"
>
<settingFormItem
:item="item"
@toManagePage="toManagePage"
:isManager="groupParams?.groupInfo?.is_manager"
></settingFormItem>
</div>
</div>
<div class="chat-records-search chat-settings-card">
<customInput></customInput>
<div class="record-search-types">
<div
class="record-search-types-each"
v-for="(item, index) in state.recordSearchTypeList"
:key="index"
@click="toSearchByConditionPage(index)"
>
<img class="record-search-types-icon" :src="item.typeIcon" />
<span class="text-[24rpx] font-regular">{{ item.value }}</span>
</div>
</div>
</div>
<div class="chat-group-infos chat-settings-card">
<div
class="chat-group-infos-each"
v-for="(item, index) in state.chatSettings"
:key="index"
>
<settingFormItem
:item="item"
@toManagePage="toManagePage"
:sessionInfo="state?.sessionInfo"
@changeSwitch="changeSwitch"
></settingFormItem>
</div>
</div>
<div
class="chat-group-infos chat-settings-card"
v-if="groupParams?.groupInfo?.is_manager"
>
<div
class="chat-group-infos-each"
v-for="(item, index) in state.chatManagement"
:key="index"
>
<settingFormItem
:item="item"
@toManagePage="toManagePage"
></settingFormItem>
</div>
</div>
<div class="clear-chat-record-btn chat-settings-card">
<div
@click="showConfirmPrompt(1)"
class="clear-chat-record-btn-each"
>
<span class="text-[32rpx] font-regular">
{{ $t('chat.settings.clearChatRecord') }}
</span>
</div>
<div
@click="showConfirmPrompt(2)"
class="clear-chat-record-btn-each"
v-if="groupParams?.groupInfo?.is_manager"
>
<span class="text-[32rpx] font-regular">
{{ $t('group.disband.btn') }}
</span>
</div>
<div
@click="showConfirmPrompt(3)"
class="clear-chat-record-btn-each"
v-if="groupParams?.groupInfo?.is_manager"
>
<span class="text-[32rpx] font-regular">
{{ $t('group.quit.btn') }}
</span>
</div>
</div>
</div>
</ZPaging>
</div>
</div>
</template>
<script setup>
import useConfirm from '@/components/x-confirm/useConfirm.js'
import groupDepartment from '@/static/image/chatList/groupDepartment.png'
import groupProject from '@/static/image/chatList/groupProject.png'
import groupNormal from '@/static/image/chatList/groupNormal.png'
import groupCompany from '@/static/image/chatList/groupCompany.png'
import recordSearchTypeIcon_groupMember from '@/static/image/chatSettings/recordSearchTypeGroupMembers.png'
import recordSearchTypeIcon_date from '@/static/image/chatSettings/recordSearchTypeDate.png'
import recordSearchTypeIcon_imgAndVideo from '@/static/image/chatSettings/recordSearchTypeImgAndVideo.png'
import recordSearchTypeIcon_files from '@/static/image/chatSettings/recordSearchTypeFiles.png'
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, watch } from 'vue'
import {
useUserStore,
useTalkStore,
useDialogueStore,
useGroupStore,
} from '@/store'
import { onLoad } from '@dcloudio/uni-app'
import { ServeTopTalkList, ServeSetNotDisturb } from '@/api/chat/index'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
import customInput from '@/components/custom-input/custom-input.vue'
const { showConfirm } = useConfirm()
const userStore = useUserStore()
const talkStore = useTalkStore()
const dialogueStore = useDialogueStore()
const dialogueParams = 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),
memberList: computed(() => dialogueStore.members),
})
const talkParams = reactive({
topItems: computed(() => talkStore.topItems),
disturbItems: computed(() => talkStore.disturbItems),
})
const groupStore = useGroupStore()
const groupParams = reactive({
groupInfo: computed(() => groupStore.groupInfo),
groupNotice: computed(() => groupStore.groupNotice),
})
const state = reactive({
chatGroupMembers: [], //群成员form-item
chatGroupInfos: [], //群聊信息
recordSearchTypeList: [], //聊天记录搜索类型
chatSettings: [], //群聊设置
chatManagement: [], //群聊管理
groupId: '', //群id
sessionId: '', //会话id
})
watch(
[() => groupParams.groupInfo, () => groupParams.groupNotice],
([newGroupInfo, newGroupNotice]) => {
updateGroupInfos()
},
{ deep: true },
)
onLoad(async (options) => {
console.log(dialogueParams)
if (options.groupId) {
console.log(options.groupId)
state.groupId = Number(options.groupId)
await groupStore.ServeGroupDetail()
await groupStore.ServeGetGroupNotices()
}
if (options.sessionId) {
state.sessionId = Number(options.sessionId)
if (talkParams.topItems.length > 0) {
talkParams.topItems.forEach((item) => {
if (item.id == options.sessionId) {
state.sessionInfo = item
}
})
}
if (talkParams.disturbItems.length > 0) {
talkParams.disturbItems.forEach((item) => {
if (item.id == options.sessionId) {
state.sessionInfo = item
}
})
}
}
})
onMounted(() => {
state.recordSearchTypeList = [
{
value: t('chat.settings.groupMember'),
typeIcon: recordSearchTypeIcon_groupMember,
},
{
value: t('record.searchType.date'),
typeIcon: recordSearchTypeIcon_date,
},
{
value: t('record.searchType.imgAndVideo'),
typeIcon: recordSearchTypeIcon_imgAndVideo,
},
{
value: t('record.searchType.files'),
typeIcon: recordSearchTypeIcon_files,
},
{
value: t('record.searchType.link'),
typeIcon: recordSearchTypeIcon_link,
},
]
state.chatSettings = [
{
label: t('chat.settings.topSession'),
hasPointer: false,
value: '',
subValue: '',
customInfo: 'switch',
},
{
label: t('chat.settings.messageNoDisturb'),
hasPointer: false,
value: '',
subValue: '',
customInfo: 'switch',
},
]
})
//群头像
const groupAvatar = computed(() => {
return (
groupParams?.groupInfo?.avatar ||
groupTypeMapping[groupParams?.groupInfo?.group_type]?.defaultImg
)
})
//群名称
const groupName = computed(() => {
return groupParams?.groupInfo?.group_name
})
//群人数
const groupNum = computed(() => {
return groupParams?.groupInfo?.group_num || 0
})
// 映射表-根据groupType设置对应值
const groupTypeMapping = {
0: {
defaultImg: 'textImg',
},
1: {
result_type: t('index.mine.normal'),
defaultImg: groupNormal,
},
2: {
result_type: t('index.mine.department'),
result_type_color: '#377EC6',
defaultImg: groupDepartment,
},
3: {
result_type: t('index.mine.project'),
result_type_color: '#C1681C',
defaultImg: groupProject,
},
4: {
result_type: t('index.type.company'),
result_type_color: '#7A58DE',
defaultImg: groupCompany,
},
}
//群类型
const groupType = computed(() => {
return groupTypeMapping[groupParams?.groupInfo?.group_type]?.result_type || ''
})
//更新群信息
const updateGroupInfos = () => {
state.chatGroupMembers = [
{
label: t('chat.settings.groupMember'),
hasPointer: true,
value: '全部(' + groupNum.value + '',
subValue: '',
customInfo: '',
},
]
state.chatGroupInfos = [
{
label: t('chat.settings.groupName'),
hasPointer: true,
value: groupName.value,
subValue: '',
customInfo: '',
},
{
label: t('chat.settings.groupNotice'),
hasPointer: true,
value: '',
subValue: groupParams?.groupNotice[0]?.content,
customInfo: '',
},
{
label: t('chat.settings.groupType'),
hasPointer: false,
value: groupType.value + '群',
subValue: '',
customInfo: '',
},
]
let groupAdmins = ''
if (groupParams?.groupInfo.groupAdminList?.length > 0) {
groupParams?.groupInfo.groupAdminList.forEach((item) => {
if (!groupAdmins) {
groupAdmins = item.deptPos
} else {
groupAdmins += '' + item.deptPos
}
})
}
state.chatManagement = [
{
label: t('chat.settings.groupGag'),
hasPointer: true,
value: '',
subValue: '',
customInfo: '',
},
{
label: t('chat.settings.groupAdmin'),
hasPointer: true,
value: '',
subValue: groupAdmins,
customInfo: '',
},
]
}
//点击跳转到修改群信息页面
const toEditGroupInfoPage = () => {
uni.navigateTo({
url:
'/pages/chatSettings/groupManage/editGroupName?groupAvatar=' +
groupAvatar.value,
})
}
//点击跳转到修改头像页面
const toEditAvatarPage = () => {
if (!groupParams?.groupInfo?.is_manager) {
return
}
uni.navigateTo({
url:
'/pages/chatSettings/groupManage/editAvatar?groupAvatar=' +
groupAvatar.value,
})
}
//点击跳转到管理页面
const toManagePage = (label) => {
console.log(label)
if (label) {
if (label === t('chat.settings.groupName')) {
if (!groupParams?.groupInfo?.is_manager) {
return
}
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',
})
} else if (label === t('chat.settings.groupAdmin')) {
uni.navigateTo({
url: '/pages/chatSettings/groupManage/manageGroupAdmin',
})
}
}
}
//点击跳转到按条件搜索页
const toSearchByConditionPage = (flag) => {
let condition = ''
if (flag == 0) {
uni.navigateTo({
url:
'/pages/chatSettings/groupManage/selectMembers?manageType=searchRecord',
})
} else {
if (flag == 1) {
condition = 'date'
} else if (flag == 2) {
condition = 'imgAndVideo'
} else if (flag == 3) {
condition = 'file'
} else if (flag == 4) {
condition = 'link'
}
uni.navigateTo({
url:
'/pages/search/searchByCondition/index?condition=' +
condition +
'&receiver_id=' +
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 = ServeTopTalkList(params)
} else if (label == t('chat.settings.messageNoDisturb')) {
params = {
talk_type: dialogueParams.type, //1私聊2群聊
receiver_id: dialogueParams.receiver_id, //接收人id或群id
is_disturb: switchStatus ? 1 : 0, //是否开启免打扰0不免打扰1免打扰
}
resp = ServeSetNotDisturb(params)
}
console.log(resp)
resp.then(({ code, data }) => {
console.log(data)
if (code == 200) {
if (label == t('chat.settings.topSession')) {
talkStore.updateItem({
index_name: dialogueParams.index_name,
is_top: switchStatus ? 1 : 2,
})
} else if (label == t('chat.settings.messageNoDisturb')) {
talkStore.updateItem({
index_name: dialogueParams.index_name,
is_disturb: switchStatus ? 1 : 0,
})
}
} else {
}
})
resp.catch(() => {})
}
//点击显示确认提示悬窗
const showConfirmPrompt = (flag) => {
let confirmContent = ''
let subContent = ''
let subContentColor = ''
if (flag === 1) {
confirmContent = t('ok') + t('chat.settings.clearChatRecord')
} else if (flag === 2) {
confirmContent = t('ok') + t('group.quit.btn')
subContent = t('groupManage.disband.hint')
subContentColor = '#CF3050'
} else if (flag === 3) {
confirmContent = t('ok') + t('group.quit.btn')
subContent = t('groupManage.quit.hint')
subContentColor = '#B4B4B4'
}
showConfirm({
subContent: subContent,
subContentColor: subContentColor,
confirmColor: '#CF3050',
content: confirmContent,
contentText: t('ok'),
confirmText: t('ok'),
cancelText: t('cancel'),
onConfirm: () => {},
onCancel: () => {},
})
}
</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;
}
.chat-settings-page {
.navBar-title {
span {
line-height: 48rpx;
}
}
.chat-settings {
padding: 0 32rpx 36rpx;
width: 100%;
.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);
}
.chat-group-base-infos {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 32rpx 40rpx 32rpx 20rpx;
.base-info-avatar {
width: 96rpx;
height: 96rpx;
flex-shrink: 0;
border-radius: 50%;
overflow: hidden;
img {
width: 100%;
height: 100%;
}
}
.base-info {
width: 100%;
margin: 0 30rpx;
.base-info-name {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
span {
line-height: 44rpx;
color: $theme-text;
}
.base-info_num {
line-height: 44rpx;
}
}
.base-info-tag {
border: 2rpx solid #7a58de;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 2rpx 14rpx;
margin: 10rpx 0 0;
border-radius: 8rpx;
width: 80rpx;
span {
flex-shrink: 0;
color: #7a58de;
line-height: 34rpx;
}
}
}
.base-info-edit {
width: 36rpx;
height: 36rpx;
flex-shrink: 0;
img {
width: 100%;
height: 100%;
}
}
}
.chat-group-members {
}
.chat-group-infos {
padding: 0 16rpx;
.chat-group-infos-each {
padding: 32rpx 14rpx;
border-bottom: 1px solid $theme-border-color;
}
.chat-group-infos-each:last-child {
border-bottom: 0;
}
}
.chat-records-search {
padding: 22rpx 16rpx;
.record-search-types {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
.record-search-types-each {
width: calc(100% / 4);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 36rpx 0 0;
.record-search-types-icon {
width: 106rpx;
height: 106rpx;
border-radius: 50%;
background-color: #f9f9f9;
}
span {
line-height: 34px;
color: #666666;
}
}
}
}
.clear-chat-record-btn {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.clear-chat-record-btn-each {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 32rpx 16rpx;
width: calc(100% - 32rpx);
border-bottom: 1px solid $theme-border-color;
span {
line-height: 44rpx;
color: #cf3050;
}
}
.clear-chat-record-btn-each:last-child {
border-bottom: 0;
}
}
}
}
</style>