chat-app/src/pages/chatSettings/index.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">
            <customInput :disabled="true"></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 && dialogueParams.type === 2
              "
            >
              <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
              "
            >
              <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',
      })
    } 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 +
        '&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: 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()
    }
  }
}
</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>