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>
          <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
                class="base-info-tag"
                :style="{
                  borderColor:
                    groupTypeMapping[state?.groupInfo?.group_type]
                      ?.result_type_color,
                }"
              >
                <span
                  class="text-[24rpx] font-medium"
                  :style="{
                    color:
                      groupTypeMapping[state?.groupInfo?.group_type]
                        ?.result_type_color,
                  }"
                >
                  {{ groupType }}
                </span>
              </div>
            </div>
            <div class="base-info-edit" @click="toEditGroupInfoPage">
              <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
                :memberList="state?.memberList"
                :memberListsLimit="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"
              ></settingFormItem>
            </div>
          </div>
          <div class="chat-records-search chat-settings-card">
            <tm-input
              class="searchRoot_input"
              :placeholder="$t('search.chat.record')"
              color="#F9F9FD"
              :round="1"
              prefix="tmicon-search"
              prefixColor="#46299D"
            ></tm-input>
            <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">
            <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 class="clear-chat-record-btn-each">
              <span class="text-[32rpx] font-regular">
                {{ $t('chat.settings.clearChatRecord') }}
              </span>
            </div>
            <div class="clear-chat-record-btn-each">
              <span class="text-[32rpx] font-regular">
                {{ $t('group.disband.btn') }}
              </span>
            </div>
            <div class="clear-chat-record-btn-each">
              <span class="text-[32rpx] font-regular">
                {{ $t('group.quit.btn') }}
              </span>
            </div>
          </div>
        </div>
      </ZPaging>
    </div>
  </div>
</template>
<script setup>
import zu4992 from '@/static/image/chatList/zu4992@2x.png'
import zu4991 from '@/static/image/chatList/zu4991@2x.png'
import zu4989 from '@/static/image/chatList/zu4989@2x.png'
import zu5296 from '@/static/image/chatList/zu5296@2x.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 } 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()
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
  chatGroupInfos: [], //群聊信息
  recordSearchTypeList: [], //聊天记录搜索类型
  chatSettings: [], //群聊设置
  chatManagement: [], //群聊管理
  groupId: '', //群id
  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(() => {
  updateGroupInfos()
  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',
    },
  ]
  state.chatManagement = [
    {
      label: t('chat.settings.groupGag'),
      hasPointer: true,
      value: '',
      subValue: '',
      customInfo: '',
    },
    {
      label: t('chat.settings.groupAdmin'),
      hasPointer: true,
      value: '',
      subValue: '总经理室-总经理，苏州站-出纳，常熟站…',
      customInfo: '',
    },
  ]
})

//群头像
const groupAvatar = computed(() => {
  return (
    state?.groupInfo?.avatar ||
    groupTypeMapping[state?.groupInfo?.group_type]?.defaultImg
  )
})

//群名称
const groupName = computed(() => {
  return state?.groupInfo?.group_name
})

//群人数
const groupNum = computed(() => {
  return state?.groupInfo?.group_num || 0
})

// 映射表-根据groupType设置对应值
const groupTypeMapping = {
  0: {
    defaultImg: 'textImg',
  },
  1: {
    defaultImg: zu4992,
  },
  2: {
    result_type: t('index.mine.department'),
    result_type_color: '#377EC6',
    defaultImg: zu4989,
  },
  3: {
    result_type: t('index.mine.project'),
    result_type_color: '#C1681C',
    defaultImg: zu4991,
  },
  4: {
    result_type: t('index.type.company'),
    result_type_color: '#7A58DE',
    defaultImg: zu5296,
  },
}

//群类型
const groupType = computed(() => {
  return groupTypeMapping[state?.groupInfo?.group_type]?.result_type || ''
})

//查询群信息
const getGroupInfo = () => {
  let params = {
    group_id: state.groupId,
  }
  const resp = ServeQueryGroupInfo(params)
  console.log(resp)
  resp.then(({ code, data }) => {
    console.log(data)
    if (code == 200) {
      state.groupInfo = data
      updateGroupInfos()
    } else {
    }
  })

  resp.catch(() => {})
}

//查看群成员
const getGroupMembers = () => {
  let params = {
    group_id: state.groupId,
  }
  const resp = ServeQueryGroupMembers(params)
  console.log(resp)
  resp.then(({ code, data }) => {
    console.log(data)
    if (code == 200) {
      state.memberList = data.items
    } else {
    }
  })

  resp.catch(() => {})
}

//群公告查询
const getGroupNotice = () => {
  let params = {
    group_id: state.groupId,
  }
  const resp = ServeQueryGroupNotice(params)
  console.log(resp)
  resp.then(({ code, data }) => {
    console.log(data)
    if (code == 200) {
      state.groupNotice = data.items
      updateGroupInfos()
    } else {
    }
  })

  resp.catch(() => {})
}

//更新群信息
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: state.groupNotice[0],
      customInfo: '',
    },
    {
      label: t('chat.settings.groupType'),
      hasPointer: false,
      value: groupType.value + '群',
      subValue: '',
      customInfo: '',
    },
  ]
}

//点击跳转到修改群信息页面
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) {
    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',
      })
    }
  }
}

//点击跳转到按条件搜索页
const toSearchByConditionPage = (flag) => {
  let condition = ''
  if (flag == 1) {
    condition = 'date'
  }
  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 = 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 {
  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>