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">
              <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">
              <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"></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>
            </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"></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"></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 { computed, onMounted, reactive } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import {
  ServeQueryGroupInfo,
  ServeQueryGroupMembers,
  ServeQueryGroupNotice,
} 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 state = reactive({
  chatGroupMembers: [], //群成员form-item
  chatGroupInfos: [], //群聊信息
  recordSearchTypeList: [], //聊天记录搜索类型
  chatSettings: [], //群聊设置
  chatManagement: [], //群聊管理
  groupId: '', //群id
  groupInfo: null, //群信息
  memberList: [], //群成员列表
  groupNotice: [], //群公告
})

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 toManagePage = (label) => {
  console.log(label)
  if (label && label === t('chat.settings.groupNotice')) {
    uni.navigateTo({
      url: '/pages/chatSettings/groupManage/manageNotice',
    })
  }
}

//点击跳转到按条件搜索页
const toSearchByConditionPage = (flag) => {
  let condition = ''
  if (flag == 1) {
    condition = 'date'
  }
  uni.navigateTo({
    url:
      '/pages/search/searchByCondition/index?condition=' +
      condition +
      '&receiver_id=' +
      state.groupId,
  })
}
</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 {
      .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 {
      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>