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">
                <span class="text-[24rpx] font-medium">{{ 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 item?.memberList"
                >
                  <div class="group-member-each" v-if="memberIndex < 15">
                    <div class="group-member-avatar">
                      <img />
                      <span class="text-[24rpx] font-bold">
                        {{ memberItem.avatar }}
                      </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.name }}
                      </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"></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"
              >
                <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 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 } 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()
  }
})

const state = reactive({
  chatGroupMembers: [], //群成员
  chatGroupInfos: [], //群聊信息
  recordSearchTypeList: [], //聊天记录搜索类型
  chatSettings: [], //群聊设置
  chatManagement: [], //群聊管理
  groupId: '', //群id
  groupInfo: null, //群信息
})

onMounted(() => {
  let memberList = []
  for (let i = 0; i < 18; i++) {
    memberList.push({
      name: '姜雪辞',
      avatar: '雪辞',
    })
  }
  state.chatGroupMembers = [
    {
      label: t('chat.settings.groupMember'),
      hasPointer: true,
      value: '全部（' + groupNum.value + '）',
      subValue: '',
      customInfo: '',
      memberList: memberList,
    },
  ]
  state.chatGroupInfos = [
    {
      label: t('chat.settings.groupName'),
      hasPointer: true,
      value: groupName,
      subValue: '',
      customInfo: '',
    },
    {
      label: t('chat.settings.groupNotice'),
      hasPointer: true,
      value: '',
      subValue: '数字科技中心啊撒salads阿萨达撒的啊撒…',
      customInfo: '',
    },
    {
      label: t('chat.settings.groupType'),
      hasPointer: false,
      value: '公司群',
      subValue: '',
      customInfo: '',
    },
  ]
  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 ''
})

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

//群人数
const groupNum = computed(() => {
  return 600
})

//群类型
const groupType = computed(() => {
  return '公司'
})

//查询群信息
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
    } 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 {
      .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;
            .group-member-avatar {
              width: 72rpx;
              height: 72rpx;
              border-radius: 50%;
              background: linear-gradient(to right, #674bbc, #46299d);
              display: flex;
              flex-direction: row;
              align-items: center;
              justify-content: center;
              img {
              }
              span {
                line-height: 34rpx;
                color: #fff;
              }
            }
            .group-member-tag {
              position: absolute;
              top: 58rpx;
              left: 0;
              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;
              span {
                line-height: 34rpx;
                color: #919191;
              }
            }
          }
        }
      }
    }

    .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>