802 lines
22 KiB
Vue
802 lines
22 KiB
Vue
<template>
|
||
<div class="outer-layer chat-settings-page">
|
||
<div class="root">
|
||
<ZPaging ref="zPaging" :show-scrollbar="false">
|
||
<template #top>
|
||
<customNavbar :title="$t('index.chat.settings')"></customNavbar>
|
||
</template>
|
||
<div class="chat-settings">
|
||
<div
|
||
class="chat-group-base-infos chat-settings-card"
|
||
v-if="dialogueParams.type === 2"
|
||
>
|
||
<div class="base-info-avatar" @click="toEditAvatarPage">
|
||
<avatarModule
|
||
:mode="2"
|
||
:avatar="groupParams?.groupInfo?.avatar"
|
||
:groupType="groupParams?.groupInfo?.group_type"
|
||
:customStyle="{ width: '96rpx', height: '96rpx' }"
|
||
></avatarModule>
|
||
</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"
|
||
v-if="groupNum"
|
||
>
|
||
{{ '（' + groupNum + '）' }}
|
||
</span>
|
||
</div>
|
||
<div
|
||
v-if="groupParams?.groupInfo?.group_type !== 1 && groupType"
|
||
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">
|
||
<div @click="toSearchPage">
|
||
<customInput :disabled="true"></customInput>
|
||
</div>
|
||
<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 &&
|
||
dialogueParams.type === 2 &&
|
||
(groupParams?.groupInfo?.group_type === 1 ||
|
||
groupParams?.groupInfo?.group_type === 3)
|
||
"
|
||
>
|
||
<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 &&
|
||
dialogueParams.type === 2 &&
|
||
(groupParams?.groupInfo?.group_type === 1 ||
|
||
groupParams?.groupInfo?.group_type === 3)
|
||
"
|
||
>
|
||
<span class="text-[32rpx] font-regular">
|
||
{{ $t('group.quit.btn') }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</ZPaging>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script setup>
|
||
import avatarModule from '@/components/avatar-module/index.vue'
|
||
import useConfirm from '@/components/x-confirm/useConfirm.js'
|
||
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,
|
||
useGroupTypeStore,
|
||
} from '@/store'
|
||
import { onLoad } from '@dcloudio/uni-app'
|
||
import {
|
||
ServeInviteGroup,
|
||
ServeDismissGroup,
|
||
ServeSecedeGroup,
|
||
} from '@/api/group/index'
|
||
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 },
|
||
)
|
||
|
||
watch(
|
||
() => useGroupTypeStore()?.allChooseMembers?.value,
|
||
(newMembers) => {
|
||
// console.log(newMembers)
|
||
inviteMembersInGroup(newMembers)
|
||
},
|
||
)
|
||
|
||
onLoad(async (options) => {
|
||
console.log(dialogueParams)
|
||
if (options.groupId) {
|
||
console.log(options.groupId)
|
||
state.groupId = Number(options.groupId)
|
||
await groupStore.ServeGroupDetail()
|
||
if (dialogueParams.type === 2) {
|
||
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('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,
|
||
// },
|
||
]
|
||
if (dialogueParams.type === 2) {
|
||
state.recordSearchTypeList.unshift({
|
||
value: t('chat.settings.groupMember'),
|
||
typeIcon: recordSearchTypeIcon_groupMember,
|
||
})
|
||
}
|
||
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 groupName = computed(() => {
|
||
return groupParams?.groupInfo?.group_name
|
||
})
|
||
|
||
//群人数
|
||
const groupNum = computed(() => {
|
||
return groupParams?.groupInfo?.group_num || 0
|
||
})
|
||
|
||
// 映射表-根据groupType设置对应值
|
||
const groupTypeMapping = {
|
||
0: {},
|
||
1: {
|
||
result_type: t('index.mine.normal'),
|
||
},
|
||
2: {
|
||
result_type: t('index.mine.department'),
|
||
result_type_color: '#377EC6',
|
||
},
|
||
3: {
|
||
result_type: t('index.mine.project'),
|
||
result_type_color: '#C1681C',
|
||
},
|
||
4: {
|
||
result_type: t('index.type.company'),
|
||
result_type_color: '#7A58DE',
|
||
},
|
||
}
|
||
|
||
//群类型
|
||
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',
|
||
})
|
||
}
|
||
|
||
//点击跳转到修改头像页面
|
||
const toEditAvatarPage = () => {
|
||
if (!groupParams?.groupInfo?.is_manager) {
|
||
return
|
||
}
|
||
uni.navigateTo({
|
||
url: '/pages/chatSettings/groupManage/editAvatar',
|
||
})
|
||
}
|
||
|
||
//点击跳转到管理页面
|
||
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',
|
||
})
|
||
} else if (label === t('chat.settings.groupNotice')) {
|
||
uni.navigateTo({
|
||
url: `/pages/chatSettings/groupManage/manageNotice?is_manager=${groupParams?.groupInfo?.is_manager}`,
|
||
})
|
||
} 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 = ''
|
||
let flagIndex = 0
|
||
if (dialogueParams.type === 1) {
|
||
flagIndex = -1
|
||
}
|
||
if (flag == flagIndex) {
|
||
uni.navigateTo({
|
||
url:
|
||
'/pages/chatSettings/groupManage/selectMembers?manageType=searchRecord',
|
||
})
|
||
} else {
|
||
if (flag == flagIndex + 1) {
|
||
condition = 'date'
|
||
} else if (flag == flagIndex + 2) {
|
||
condition = 'imgAndVideo'
|
||
} else if (flag == flagIndex + 3) {
|
||
condition = 'file'
|
||
} else if (flag == flagIndex + 4) {
|
||
condition = 'link'
|
||
}
|
||
uni.navigateTo({
|
||
url: '/pages/search/searchByCondition/index?condition=' + condition,
|
||
})
|
||
}
|
||
}
|
||
|
||
//切换开关选择
|
||
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: async () => {
|
||
if (flag === 1) {
|
||
dialogueStore.apiClearRecord()
|
||
} else if (flag === 2) {
|
||
let params = {
|
||
group_id: dialogueParams.receiver_id, //群id
|
||
}
|
||
console.log(params)
|
||
const res = await ServeDismissGroup(params)
|
||
if (res.code === 200) {
|
||
dialogueStore.updateGroupMembers()
|
||
groupStore.ServeGroupDetail()
|
||
uni.navigateBack({
|
||
delta: 2,
|
||
})
|
||
}
|
||
} else if (flag === 3) {
|
||
ServeSecedeGroup({
|
||
group_id: dialogueParams.receiver_id,
|
||
}).then(({ code, message }) => {
|
||
if (code == 200) {
|
||
// dialogueStore.apiClearRecord()
|
||
} else {
|
||
}
|
||
})
|
||
}
|
||
},
|
||
onCancel: () => {},
|
||
})
|
||
}
|
||
|
||
//普通群/项目群拉人
|
||
const inviteMembersInGroup = async (memberList) => {
|
||
if (memberList?.length > 0) {
|
||
let erp_ids = ''
|
||
memberList.forEach((item) => {
|
||
if (!erp_ids) {
|
||
erp_ids = item.ID
|
||
} else {
|
||
erp_ids += ',' + item.ID
|
||
}
|
||
})
|
||
let params = {
|
||
group_id: dialogueParams.receiver_id, //群id
|
||
erp_ids: String(erp_ids), //erp的用户id
|
||
}
|
||
console.log(params)
|
||
const res = await ServeInviteGroup(params)
|
||
if (res.code === 200) {
|
||
dialogueStore.updateGroupMembers()
|
||
groupStore.ServeGroupDetail()
|
||
useGroupTypeStore()?.resetGroupInfo()
|
||
}
|
||
}
|
||
}
|
||
|
||
//点击跳转到搜索页面
|
||
const toSearchPage = () => {
|
||
// uni.navigateTo({
|
||
// url:
|
||
// '/pages/search/searchByCondition/index?condition=text'
|
||
// })
|
||
uni.navigateTo({
|
||
url:
|
||
'/pages/search/moreResult/moreResultDetail?talk_type=' +
|
||
dialogueParams.type +
|
||
'&receiver_id=' +
|
||
dialogueParams.receiver_id +
|
||
'&hideFirstRecord=1',
|
||
})
|
||
}
|
||
</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 {
|
||
flex-shrink: 0;
|
||
}
|
||
.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>
|