OA体制内聊天新增群名称修改、头像修改、新增群公告、群内禁言管理等页面，并接入置顶会话和消息免打扰设置接口功能

src/api/chatSettings/index.js

@@ -27,3 +27,21 @@ export const ServeQueryGroupNotice = (data) => {
     data,
   })
 }
+
+// 置顶聊天会话
+export const ServeTopTalk = (data) => {
+  return request({
+    url: '/api/v1/talk/topping',
+    method: 'POST',
+    data,
+  })
+}
+
+// 免打扰聊天会话
+export const ServeDisturbTalk = (data) => {
+  return request({
+    url: '/api/v1/talk/disturb',
+    method: 'POST',
+    data,
+  })
+}

src/components/custom-btn/custom-btn.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="custom-btn" :class="props.isBottom ? 'custom-btn-bottom' : ''">
+    <wd-button custom-class="custom-btn-class" @click="clickBtn">{{ props.btnText }}</wd-button>
+  </div>
+</template>
+<script setup>
+import { reactive } from 'vue'
+import { defineProps, defineEmits } from 'vue'
+const state = reactive({})
+const emits = defineEmits(['clickBtn'])
+const props = defineProps({
+  isBottom: false, //是否底部按钮
+  btnText: '', //按钮文字
+})
+
+//点击
+const clickBtn = () => {
+  emits('clickBtn')
+}
+</script>
+<style scoped lang="scss">
+.custom-btn {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  .custom-btn-class {
+    background-color: $theme-primary;
+    padding: 18rpx 185rpx;
+    border-radius: 8rpx;
+    box-shadow: 0 6px 12px 2px rgba(188, 188, 188, 0.08);
+    font-size: 28rpx;
+    font-weight: 500;
+    line-height: 40rpx;
+  }
+}
+.custom-btn-bottom {
+  width: 100%;
+  background-color: #fff;
+  padding: 14rpx 0 72rpx;
+}
+</style>

src/pages.json

@@ -106,6 +106,38 @@
         "navigationStyle": "custom",
         "enablePullDownRefresh": false
       }
+    },
+    {
+      "path": "pages/chatSettings/groupManage/editGroupName",
+      "type": "page",
+      "style": {
+        "navigationStyle": "custom",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/chatSettings/groupManage/editAvatar",
+      "type": "page",
+      "style": {
+        "navigationStyle": "custom",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/chatSettings/groupManage/manageGroupMembers",
+      "type": "page",
+      "style": {
+        "navigationStyle": "custom",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/chatSettings/groupManage/manageGroupSilence",
+      "type": "page",
+      "style": {
+        "navigationStyle": "custom",
+        "enablePullDownRefresh": false
+      }
     }
   ],
   "globalStyle": {

src/pages/chatSettings/components/groupMembersList.vue

@@ -0,0 +1,117 @@
+<template>
+  <div class="group-member-list">
+    <div
+      class="group-member-list-each"
+      v-for="(memberItem, memberIndex) in props?.memberList"
+    >
+      <div
+        class="group-member-each"
+        v-if="
+          props.memberListsLimit ? memberIndex < props.memberListsLimit : true
+        "
+      >
+        <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>
+</template>
+<script setup>
+import { defineProps } from 'vue'
+const props = defineProps({
+  memberList: Array, //人员列表
+  memberListsLimit: Number, //人员列表数量限制
+})
+</script>
+<style scoped lang="scss">
+.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 {
+      padding: 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;
+        bottom: 34rpx;
+        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;
+        padding: 8rpx 0 0;
+        width: 100%;
+        span {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          line-height: 34rpx;
+          color: #919191;
+          white-space: nowrap;
+        }
+      }
+    }
+  }
+}
+</style>

src/pages/chatSettings/components/settingFormItem.vue

@@ -2,33 +2,39 @@
   <div class="setting-form-item">
     <div class="item-main">
       <div class="item-main-label">
-        <span class="text-[32rpx] font-regular">{{ item.label }}</span>
+        <span class="text-[32rpx] font-regular">{{ props?.item?.label }}</span>
       </div>
-      <div class="item-main-value" @click="toManagePage(item)">
+      <div class="item-main-value" @click="toManagePage(props?.item)">
-        <span class="text-[32rpx] font-regular" v-if="item.value">
+        <span class="text-[32rpx] font-regular" v-if="props?.item?.value">
-          {{ item.value }}
+          {{ props?.item?.value }}
         </span>
         <img
-          v-if="item.hasPointer"
+          v-if="props?.item?.hasPointer"
           src="/src/static/image/chatSettings/pointer.png"
         />
         <tm-switch
           :width="88"
           :height="48"
-          v-if="item.customInfo && item.customInfo === 'switch'"
+          v-if="props?.item?.customInfo && props?.item?.customInfo === 'switch'"
           barIcon=""
           color="#46299D"
           unCheckedColor="#EEEEEE"
+          :defaultValue="defaultValue"
+          @change="changeSwitch($event, props?.item)"
         ></tm-switch>
       </div>
     </div>
-    <div class="item-sub" v-if="item.subValue">
+    <div class="item-sub" v-if="props?.item?.subValue">
-      <span class="text-[32rpx] font-regular">{{ item.subValue }}</span>
+      <span class="text-[32rpx] font-regular">{{ props?.item?.subValue }}</span>
     </div>
   </div>
 </template>
 <script setup>
-import { defineProps, defineEmits } from 'vue'
+import { defineProps, defineEmits, computed } from 'vue'
+
+import { useI18n } from 'vue-i18n'
+const { t } = useI18n()
+
 const props = defineProps({
   item: {
     type: Object,
@@ -36,11 +42,38 @@ const props = defineProps({
       return {}
     },
   },
+  sessionInfo: {
+    type: Object,
+    default() {
+      return {}
+    },
+  },
 })
-const emits = defineEmits(['toManagePage'])
+const emits = defineEmits(['toManagePage', 'changeSwitch'])
 const toManagePage = (item) => {
   emits('toManagePage', item.label)
 }
+const defaultValue = computed(() => {
+  let switchStatus = false
+  if (
+    props?.item?.label === t('chat.settings.topSession') &&
+    props?.sessionInfo?.is_top == 1
+  ) {
+    switchStatus = true
+  }
+  if (
+    props?.item?.label === t('chat.settings.messageNoDisturb') &&
+    props?.sessionInfo?.is_disturb == 1
+  ) {
+    switchStatus = true
+  }
+  return switchStatus
+})
+
+//切换开关选择
+const changeSwitch = (e, item) => {
+  emits('changeSwitch', e, item.label)
+}
 </script>
 <style lang="scss" scoped>
 .setting-form-item {

src/pages/chatSettings/groupManage/editAvatar.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="outer-layer manage-group-info-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('chat.settings.editAvatar') }}
+              </span>
+            </div>
+          </tm-navbar>
+        </template>
+        <div class="edit-group-info">
+          <div class="group-avatar">
+            <img :src="state.groupAvatar" />
+          </div>
+        </div>
+        <customBtn :btnText="$t('button.text.edit')"></customBtn>
+        <template #bottom>
+          <div class="app-logo-icon">
+            <img src="/src/static/image/chatSettings/app-icon.png" />
+          </div>
+        </template>
+      </ZPaging>
+    </div>
+  </div>
+</template>
+<script setup>
+import customBtn from '@/components/custom-btn/custom-btn.vue'
+import ZPaging from '@/uni_modules/z-paging/components/z-paging/z-paging.vue'
+import { onLoad } from '@dcloudio/uni-app'
+import { reactive } from 'vue'
+
+const state = reactive({
+  pageTitle: '', //页面标题
+  groupAvatar: '', //群头像
+  groupName: '', //群名称
+})
+
+onLoad((options) => {
+  console.log(options)
+  if (options.groupAvatar) {
+    state.groupAvatar = options.groupAvatar
+  }
+})
+
+//点击清空群名称输入
+const clearGroupNameInput = () => {
+  state.groupName = ''
+}
+
+//点击确认修改
+const confirmEdit = () => {
+  console.log(state.groupName)
+}
+</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;
+}
+
+.edit-group-info {
+  margin: 158rpx 94rpx 100rpx;
+  background-color: #fff;
+  box-shadow: 0 6px 12px 2px rgba(0, 0, 0, 0.16);
+  padding: 50rpx;
+  border-radius: 16rpx;
+  .group-avatar {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    img {
+      width: 460rpx;
+      height: 460rpx;
+    }
+  }
+}
+
+.app-logo-icon {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  padding: 0 0 44rpx;
+  img {
+    width: 72rpx;
+    height: 72rpx;
+  }
+}
+</style>

src/pages/chatSettings/groupManage/editGroupName.vue

@@ -0,0 +1,127 @@
+<template>
+  <div class="outer-layer manage-group-info-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('chat.settings.editGroupName') }}
+              </span>
+            </div>
+          </tm-navbar>
+        </template>
+        <div class="edit-group-info">
+          <div class="group-avatar">
+            <img :src="state.groupAvatar" />
+          </div>
+          <div class="group-name">
+            <span class="text-[28rpx] font-medium">
+              {{ $t('chat.settings.groupName') }}
+            </span>
+            <div class="groupNameInputArea">
+              <input
+                class="groupNameInput"
+                :placeholder="$t('edit.groupName.placeholder')"
+                placeholder-style="color:#B4B4B4;font-size:28rpx;font-weight:500;line-height:40rpx;"
+                v-model="state.groupName"
+              />
+              <img
+                class="groupName-input-clearBtn"
+                src="/src/static/image/chatSettings/clear-btn.png"
+                @click="clearGroupNameInput"
+              />
+            </div>
+          </div>
+        </div>
+        <template #bottom>
+          <customBtn
+            :isBottom="true"
+            :btnText="$t('ok')"
+            @clickBtn="confirmEdit"
+          ></customBtn>
+        </template>
+      </ZPaging>
+    </div>
+  </div>
+</template>
+<script setup>
+import customBtn from '@/components/custom-btn/custom-btn.vue'
+import ZPaging from '@/uni_modules/z-paging/components/z-paging/z-paging.vue'
+import { onLoad } from '@dcloudio/uni-app'
+import { reactive } from 'vue'
+
+const state = reactive({
+  pageTitle: '', //页面标题
+  groupAvatar: '', //群头像
+  groupName: '', //群名称
+})
+
+onLoad((options) => {
+  console.log(options)
+  if (options.groupAvatar) {
+    state.groupAvatar = options.groupAvatar
+  }
+})
+
+//点击清空群名称输入
+const clearGroupNameInput = () => {
+  state.groupName = ''
+}
+
+//点击确认修改
+const confirmEdit = () => {
+  console.log(state.groupName)
+}
+</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;
+}
+
+.edit-group-info {
+  .group-avatar {
+    padding: 250rpx 0 88rpx;
+    border-radius: 50%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    img {
+      width: 192rpx;
+      height: 192rpx;
+    }
+  }
+  .group-name {
+    padding: 0 32rpx;
+    span {
+      display: inline-block;
+      padding: 0 32rpx 10rpx;
+      color: $theme-text;
+    }
+    .groupNameInputArea {
+      position: relative;
+      .groupNameInput {
+        background-color: #fff;
+        height: 110rpx;
+        box-shadow: 0 6px 12px 2px rgba(188, 188, 188, 0.08);
+        padding: 0 74rpx 0 32rpx;
+        color: #B747474;
+        font-size: 28rpx;
+        font-weight: 500;
+        line-height: 40rpx;
+      }
+      .groupName-input-clearBtn {
+        position: absolute;
+        right: 22rpx;
+        top: 40rpx;
+        width: 30rpx;
+        height: 30rpx;
+      }
+    }
+  }
+}
+</style>

src/pages/chatSettings/groupManage/manageGroupMembers.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="outer-layer manage-group-members-page">
+    <div class="root">
+      <ZPaging
+        ref="zPaging"
+        :show-scrollbar="false"
+        :use-virtual-list="true"
+        :virtual-list-col="5"
+        v-model="state.memberList"
+        @query="getGroupMembers"
+        :auto="false"
+        :refresher-enabled="false"
+        :loading-more-enabled="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('chat.settings.groupMember') }}
+              </span>
+            </div>
+          </tm-navbar>
+        </template>
+        <div class="group-members-list">
+          <groupMemberList :memberList="state?.memberList"></groupMemberList>
+        </div>
+      </ZPaging>
+    </div>
+  </div>
+</template>
+<script setup>
+import groupMemberList from '../components/groupMembersList.vue'
+import ZPaging from '@/uni_modules/z-paging/components/z-paging/z-paging.vue'
+import useZPaging from '@/uni_modules/z-paging/components/z-paging/js/hooks/useZPaging.js'
+import { onLoad } from '@dcloudio/uni-app'
+import { ref, reactive } from 'vue'
+import { ServeQueryGroupMembers } from '@/api/chatSettings/index'
+
+const state = reactive({
+  memberList: [], //人员列表
+})
+
+const zPaging = ref()
+useZPaging(zPaging)
+
+onLoad((options) => {
+  console.log(options)
+  if (options.groupId) {
+    state.groupId = Number(options.groupId)
+    getGroupMembers()
+  }
+})
+
+//查看群成员
+const getGroupMembers = () => {
+  let params = {
+    group_id: state.groupId,
+  }
+  console.log(params)
+  const resp = ServeQueryGroupMembers(params)
+  console.log(resp)
+  resp.then(({ code, data }) => {
+    console.log(data)
+    if (code == 200) {
+      zPaging.value?.completeByNoMore(data.items, true)
+    } 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;
+}
+.group-members-list {
+  margin: 20rpx 32rpx;
+  padding: 0 0 32rpx;
+  background-color: #fff;
+}
+</style>

src/pages/chatSettings/groupManage/manageGroupSilence.vue

@@ -0,0 +1,109 @@
+<template>
+  <div class="outer-layer manage-group-silence-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('chat.settings.groupGag') }}
+              </span>
+            </div>
+          </tm-navbar>
+        </template>
+        <div class="manage-group-silence">
+          <span class="manage-group-silence-title text-[28rpx] font-regular">
+            {{ $t('chat.manage.silenceMember') }}
+          </span>
+          <div class="add-silence-member-btn chat-settings-card">
+            <img src="/src/static/image/chatSettings/add-btn.png" />
+            <span class="text-[28rpx] font-medium">
+              {{ $t('chat.manage.addSilenceMember') }}
+            </span>
+          </div>
+          <div class="silence-all-btn chat-settings-card">
+            <settingFormItem
+              :item="state.silenceAllBtn"
+              :sessionInfo="state?.sessionInfo"
+              @changeSwitch="changeSwitch"
+            ></settingFormItem>
+          </div>
+        </div>
+      </ZPaging>
+    </div>
+  </div>
+</template>
+<script setup>
+import settingFormItem from '../components/settingFormItem.vue'
+import ZPaging from '@/uni_modules/z-paging/components/z-paging/z-paging.vue'
+import { onLoad } from '@dcloudio/uni-app'
+import { onMounted, reactive } from 'vue'
+
+import { useI18n } from 'vue-i18n'
+const { t } = useI18n()
+
+const state = reactive({
+  silenceAllBtn: null, //全员禁言按钮
+})
+
+onLoad((options) => {
+  console.log(options)
+})
+
+onMounted(() => {
+  state.silenceAllBtn = {
+    label: t('chat.manage.silenceAll'),
+    hasPointer: false,
+    value: '',
+    subValue: t('chat.manage.silenceAllHint'),
+    customInfo: 'switch',
+  }
+})
+
+//切换开关选择
+const changeSwitch = (switchStatus, label) => {
+  console.log(switchStatus, label)
+}
+</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;
+}
+
+.manage-group-silence {
+  padding: 20rpx 32rpx;
+  .manage-group-silence-title {
+    line-height: 40rpx;
+    color: #959598;
+  }
+  .add-silence-member-btn {
+    padding: 32rpx;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    img {
+      width: 40rpx;
+      height: 40rpx;
+      margin: 0 22rpx 0 0;
+    }
+    span {
+      line-height: 40rpx;
+      color: $theme-text;
+    }
+  }
+  .silence-all-btn {
+    padding: 32rpx;
+  }
+  .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);
+  }
+}
+</style>

src/pages/chatSettings/groupManage/manageNotice.vue

@@ -17,7 +17,10 @@
               </span>
             </div>
             <template #right>
-              <div class="nav-bar-done-btn">
+              <div
+                class="nav-bar-done-btn"
+                :class="state.canDoComplete ? 'nav-bar-done-btn-can-do' : ''"
+              >
                 <span class="text-[34rpx] font-regular">
                   {{ $t('button.text.done') }}
                 </span>
@@ -27,6 +30,7 @@
         </template>
         <div class="notice-text-area">
           <wd-textarea
+            style="height: 100%;"
             v-model="state.groupNotice"
             :placeholder="$t('input.placeholder.enter')"
             :maxlength="500"
@@ -44,6 +48,7 @@ import { reactive } from 'vue'
 
 const state = reactive({
   groupNotice: '', //群公告
+  canDoComplete: false, //是否可以点击完成按钮
 })
 
 //点击返回上一页
@@ -56,6 +61,11 @@ const toPrevPage = () => {
 //输入群公告
 const inputGroupNotice = (e) => {
   state.groupNotice = e
+  if (e.trim()) {
+    state.canDoComplete = true
+  } else {
+    state.canDoComplete = false
+  }
 }
 </script>
 <style scoped lang="scss">
@@ -67,6 +77,9 @@ const inputGroupNotice = (e) => {
 }
 
 .manage-notice-page {
+  ::v-deep .zp-paging-container-content {
+    height: 100%;
+  }
   .nav-bar-cancel-btn {
     display: flex;
     flex-direction: row;
@@ -91,5 +104,38 @@ const inputGroupNotice = (e) => {
       line-height: 40rpx;
     }
   }
+
+  .nav-bar-done-btn-can-do {
+    background-color: $theme-primary;
+    span {
+      color: #fff;
+    }
+  }
+
+  .notice-text-area {
+    padding: 20rpx 32rpx;
+    height: 100%;
+
+    ::v-deep .wd-textarea {
+      height: 100%;
+    }
+
+    ::v-deep .wd-textarea__value {
+      padding-right: 0;
+      height: 100%;
+    }
+
+    ::v-deep .wd-textarea__inner {
+      height: 100%;
+    }
+
+    ::v-deep .uni-textarea-compute {
+      div {
+        font-size: 32rpx;
+        font-weight: 400;
+        line-height: 44rpx;
+      }
+    }
+  }
 }
 </style>

src/pages/chatSettings/index.vue

@@ -13,7 +13,7 @@
         </template>
         <div class="chat-settings">
           <div class="chat-group-base-infos chat-settings-card">
-            <div class="base-info-avatar">
+            <div class="base-info-avatar" @click="toEditAvatarPage">
               <img :src="groupAvatar" />
             </div>
             <div class="base-info">
@@ -43,7 +43,7 @@
                 </span>
               </div>
             </div>
-            <div class="base-info-edit">
+            <div class="base-info-edit" @click="toEditGroupInfoPage">
               <img src="/src/static/image/chatSettings/edit-btn.png" />
             </div>
           </div>
@@ -53,39 +53,14 @@
               v-for="(item, index) in state.chatGroupMembers"
               :key="index"
             >
-              <settingFormItem :item="item"></settingFormItem>
+              <settingFormItem
-              <div class="group-member-list">
+                :item="item"
-                <div
+                @toManagePage="toManagePage"
-                  class="group-member-list-each"
+              ></settingFormItem>
-                  v-for="(memberItem, memberIndex) in state?.memberList"
+              <groupMemberList
-                >
+                :memberList="state?.memberList"
-                  <div class="group-member-each" v-if="memberIndex < 15">
+                :memberListsLimit="15"
-                    <div class="group-member-avatar">
+              ></groupMemberList>
-                      <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">
@@ -127,7 +102,12 @@
               v-for="(item, index) in state.chatSettings"
               :key="index"
             >
-              <settingFormItem :item="item"></settingFormItem>
+              <settingFormItem
+                :item="item"
+                @toManagePage="toManagePage"
+                :sessionInfo="state?.sessionInfo"
+                @changeSwitch="changeSwitch"
+              ></settingFormItem>
             </div>
           </div>
           <div class="chat-group-infos chat-settings-card">
@@ -136,7 +116,10 @@
               v-for="(item, index) in state.chatManagement"
               :key="index"
             >
-              <settingFormItem :item="item"></settingFormItem>
+              <settingFormItem
+                :item="item"
+                @toManagePage="toManagePage"
+              ></settingFormItem>
             </div>
           </div>
           <div class="clear-chat-record-btn chat-settings-card">
@@ -173,25 +156,34 @@ import recordSearchTypeIcon_files from '@/static/image/chatSettings/recordSearch
 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()
-onLoad((options) => {
+const talkStore = useTalkStore()
-  if (options.groupId) {
+const dialogueStore = useDialogueStore()
-    console.log(options.groupId)
+const talkParams = reactive({
-    state.groupId = Number(options.groupId)
+  uid: computed(() => userStore.uid),
-    getGroupInfo()
+  index_name: computed(() => dialogueStore.index_name),
-    getGroupMembers()
+  type: computed(() => dialogueStore.talk.talk_type),
-    getGroupNotice()
+  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
@@ -203,6 +195,35 @@ const state = reactive({
   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(() => {
@@ -403,13 +424,49 @@ const updateGroupInfos = () => {
   ]
 }
 
+//点击跳转到修改群信息页面
+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 && label === t('chat.settings.groupNotice')) {
+  if (label) {
-    uni.navigateTo({
+    if (label === t('chat.settings.groupName')) {
-      url: '/pages/chatSettings/groupManage/manageNotice',
+      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',
+      })
+    }
   }
 }
 
@@ -427,6 +484,46 @@ const toSearchByConditionPage = (flag) => {
       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 {
@@ -519,78 +616,6 @@ const toSearchByConditionPage = (flag) => {
     }
 
     .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 {

src/pages/dialog/index.vue

@@ -228,8 +228,7 @@ import zu6053 from "@/static/image/chatList/zu6053@2x.png"
 import deepBubble from "@/components/deep-bubble/deep-bubble.vue"
 import {isRevoke } from './menu'
 import useConfirm from '@/components/x-confirm/useConfirm.js'
-
+import { onLoad as uniOnload } from '@dcloudio/uni-app'
-
 
 Quill.register('formats/emoji', EmojiBlot)
 
@@ -260,6 +259,13 @@ const state = ref({
   isOpenFilePanel: false,
   showWin: false,
   onfocusItem: null,
+  sessionId: ''
+})
+
+uniOnload((options) => {
+  if (options.sessionId) {
+    state.sessionId = options.sessionId
+  }
 })
 
 const handleEmojiPanel = () => {
@@ -683,7 +689,7 @@ const initData = async () => {
 //点击跳转到聊天设置页面
 const toChatSettingsPage = () => {
   uni.navigateTo({
-    url: '/pages/chatSettings/index?groupId=' + talkParams?.receiver_id
+    url: '/pages/chatSettings/index?groupId=' + talkParams?.receiver_id + '&sessionId=' + state.sessionId
   })
 }
 

src/pages/index/components/chatItem.vue

@@ -139,7 +139,7 @@ const cellClick = () => {
     });
   }
   uni.navigateTo({
-    url: "/pages/dialog/index",
+    url: '/pages/dialog/index?sessionId=' + props.data.id,
   });
 };
 

src/store/modules/talk.js

@@ -18,6 +18,10 @@ export const useTalkStore = defineStore('talk', {
     topItems: (state) => {
       return state.items.filter((item) => item.is_top == 1)
     },
+    // 过滤所有免打扰对话列表
+    disturbItems: (state) => {
+      return state.items.filter((item) => item.is_disturb == 1)
+    },
 
     // 对话列表
     talkItems: (state) => {

src/uni_modules/tmui/locale/zh-Hans.json

@@ -104,5 +104,13 @@
   "search.condition.date": "按日期查找",
   "search.condition.date_pickerTitle": "请选择聊天日期",
   "button.text.done": "完成",
-  "input.placeholder.enter": "请输入..."
+  "input.placeholder.enter": "请输入...",
+  "chat.settings.editGroupName": "修改群名称",
+  "edit.groupName.placeholder": "请输入群名称（1~20个字）",
+  "chat.settings.editAvatar": "修改头像",
+  "button.text.edit": "修改",
+  "chat.manage.silenceMember": "被禁言的成员",
+  "chat.manage.silenceAll": "全员禁言",
+  "chat.manage.silenceAllHint": "开启后，只允许群管理员发言",
+  "chat.manage.addSilenceMember": "添加禁言成员"
 }