heshanApp/pages_im/pages/conversation/groupSettings/index.vue

<template>
  <view class="group_settings_container">
    <custom-nav-bar title="我的群聊" />
    <view class="group_settings_content">
      <!-- <view class="setting_row info_row">
        <view class="group_avatar" @click="updateGroupAvatar">
          <my-avatar :src="storeCurrentConversation.faceURL" :isGroup="true" size="46" />
          <image v-if="isOwner" class="edit_icon" src="../../../static/images/group_setting_edit.png" alt="" />
        </view>
        <view class="group_info">
          <view class="group_info_name">
            <text class="group_name">{{ storeCurrentConversation.showName }}({{
              storeCurrentGroup.memberCount
            }})</text>
            <image v-if="isOwner || isAdmin" @click="toUpdateGroupName" style="width: 24rpx; height: 24rpx"
              src="../../../static/images/group_edit.png" alt="" />
          </view>

          <text @click="copyGroupID" class="sub_title">{{
            storeCurrentConversation.groupID
          }}</text>
        </view>
        <image @click="toGroupQr" style="margin-right: 6rpx; width: 18px; height: 18px"
          src="../../../static/images/group_setting_qrcode.png" alt="" />
      </view> -->
      <view class="setting_row">
        <setting-item @click="isOwner || isAdmin ? toUpdateGroupName() : ''" title="群名称">
          <text class="sub_title">{{ storeCurrentConversation.showName }}</text>
        </setting-item>
        <setting-item title="群头像">
          <view class="group_avatar" @click="updateGroupAvatar">
            <my-avatar :src="storeCurrentConversation.faceURL" :isGroup="true" size="30" />
            <image v-if="isOwner" class="edit_icon" src="../../../static/images/group_setting_edit.png" alt="" />
          </view>
        </setting-item>
        <setting-item title="群ID">
          <text @click="copyGroupID" class="sub_title">{{ storeCurrentConversation.groupID }}</text>
        </setting-item>
        <setting-item title="群邀请码" :border="false">
          <image @click="toGroupQr" style="margin-right: 6rpx; width: 18px; height: 18px"
            src="../../../static/images/group_setting_qrcode.png" alt="" />
        </setting-item>
      </view>
      <group-member-row v-if="isJoinGroup" :isNomal="!isAdmin && !isOwner" :groupID="storeCurrentConversation.groupID"
        :memberCount="storeCurrentGroup.memberCount" :groupMemberList="groupMemberList" />
      <!-- <view class="setting_row">
        <search-action-row />
      </view> -->
      <view v-if="isJoinGroup" class="setting_row">
        <setting-item @click="handleHistory" title="历史记录"></setting-item>
        <setting-item title="聊天置顶" :loading="switchLoading.pin" @switch="changePin"
          :switchValue="storeCurrentConversation.isPinned" :is_switch="true" />
        <!-- <setting-item
			  title="消息免打扰"
			  :loading="switchLoading.opt"
			  @switch="changeOpt($event, 2)"
			  :switchValue="storeCurrentConversation.recvMsgOpt === 2"
			  :is_switch="true"
			  :border="false"
           /> -->
        <setting-item @click="toUpdatePage" title="我在群里的昵称" :border="false">
          <text class="sub_title">{{ storeCurrentMemberInGroup.nickname }}</text>
        </setting-item>
      </view>
      <view v-if="isJoinGroup" class="setting_row">
        <setting-item v-if="isOwner || isAdmin" @click="toGroupManage" title="群管理" />
        <setting-item v-if="isOwner" @click="toSetMute" title="禁言成员"  />
        <setting-item v-if="isOwner" @click="toSetAdmin" title="设置管理员" />
        <setting-item @click="toGroupAnnouncement" title="群公告" :border="false"/>
      </view>
      <view class="group_row" @click="() => (confirmType = 'Clear')"> 清空聊天记录 </view>
      <view class="group_row" v-if="isJoinGroup" @click="() => (confirmType = isOwner ? 'Dismiss' : 'Quit')">
        {{ isOwner ? '解散群聊' : '退出群聊' }}
      </view>

      <u-modal :content="getConfirmContent" asyncClose :show="confirmType !== null" showCancelButton @confirm="confirm"
        @cancel="() => (confirmType = null)"></u-modal>
    </view>

    <u-toast ref="uToast"></u-toast>
    <action-sheet :groupID="storeCurrentConversation.groupID" :visible.sync="actionSheetVisible" />
  </view>
</template>

<script>
import { mapGetters } from "vuex";
import { GroupMemberListTypes } from "../../../constant";
import IMSDK, {
  GroupMemberRole,
  GroupStatus,
  GroupVerificationType,
  IMMethods,
  MessageReceiveOptType,
} from "openim-uniapp-polyfill";
import CustomNavBar from "../../../components/CustomNavBar/index.vue";
import MyAvatar from "../../../components/MyAvatar/index.vue";
import SettingItem from "../../../components/SettingItem/index.vue";
import GroupMemberRow from "./components/GroupMemberRow.vue";
import ActionSheet from "./components/ActionSheet.vue";
import SearchActionRow from "../singleSettings/components/SearchActionRow.vue";
import { getPurePath } from "../../../util/common";
import { premissionCheck } from "@/js_sdk/wa-permission/permission.js"
const ConfirmTypes = {
  Clear: "Clear",
  Dismiss: "Dismiss",
  Quit: "Quit",
};

export default {
  components: {
    CustomNavBar,
    MyAvatar,
    SettingItem,
    GroupMemberRow,
    ActionSheet,
    SearchActionRow,
  },
  props: {},
  data() {
    return {
      actionSheetVisible: false,
      confirmType: null,
      switchLoading: {
        pin: false,
        opt: false,
        mute: false,
      },
      groupMemberList: [],
      isJoinGroup: true
    };
  },
  onLoad() {
    this.setIMListener();
    this.groupMemberDeletedHandler({ isInitail: true })
  },
  onUnload() {
    this.disposeIMListener();
  },
  watch: {
    "storeCurrentGroup.memberCount"() {
      this.getGroupMemberList();
    },
  },
  computed: {
    ...mapGetters([
      "storeCurrentConversation",
      "storeCurrentMemberInGroup",
      "storeCurrentGroup",
    ]),
    getConfirmContent() {
      if (this.confirmType === ConfirmTypes.Clear) {
        return "确定要清空聊天记录吗？";
      }
      if (this.confirmType === ConfirmTypes.Quit) {
        return "确定要退出当前群聊吗？";
      }
      if (this.confirmType === ConfirmTypes.Dismiss) {
        return "确定要解散当前群聊吗？";
      }
      return "";
    },
    isOwner() {
      return this.storeCurrentMemberInGroup.roleLevel === GroupMemberRole.Owner;
    },
    isAdmin() {
      return this.storeCurrentMemberInGroup.roleLevel === GroupMemberRole.Admin;
    },
    getGroupVerStr() {
      if (
        this.storeCurrentGroup.needVerification ===
        GroupVerificationType.ApplyNeedInviteNot
      ) {
        return "群成员邀请无需验证";
      }
      if (
        this.storeCurrentGroup.needVerification === GroupVerificationType.AllNot
      ) {
        return "允许所有人加群";
      }
      return "需要发送验证消息";
    },
    getGroupTypeStr() {
      return "工作群";
    },
    isAllMuted() {
      return this.storeCurrentGroup.status === GroupStatus.Muted;
    },
  },
  methods: {
    handleHistory() {
      uni.navigateTo({
        url: '/pages_im/pages/conversation/searchMessage/index'
      });
    },
    getGroupMemberList() {
      IMSDK.asyncApi(IMSDK.IMMethods.GetGroupMemberList, IMSDK.uuid(), {
        groupID: this.storeCurrentConversation.groupID,
        filter: 0,
        offset: 0,
        count: !this.isAdmin && !this.isOwner ? 9 : 8,
      }).then(({ data }) => {
        this.groupMemberList = [...data];
      }).catch((err) => {
        console.log(err);
      });
    },
    toGroupManage() {
      uni.navigateTo({
        url: "/pages_im/pages/conversation/groupManage/index",
      });
    },
    toMemberAuthority() {
      uni.navigateTo({
        url: "/pages_im/pages/conversation/memberAuthority/index",
      });
    },
    toSearchMessage() {
      uni.navigateTo({
        url: "/pages_im/pages/conversation/searchMessage/index",
      });
    },
    toGroupAnnouncement() {
      uni.navigateTo({
        url: `/pages_im/pages/conversation/groupAnnouncement/index`,
      });
    },
    toSetMute() {
      uni.navigateTo({
        url: `/pages_im/pages/conversation/groupMemberList/index?type=${GroupMemberListTypes.Mute}&groupID=${this.storeCurrentGroup.groupID}`,
      });
    },
    toSetAdmin() {
      uni.navigateTo({
        url: `/pages_im/pages/conversation/groupMemberList/index?type=${GroupMemberListTypes.SetAdmin}&groupID=${this.storeCurrentGroup.groupID}`,
      });
    },
    toUpdatePage() {
      uni.navigateTo({
        url: `/pages_im/pages/conversation/updateGroupOrNickname/index?sourceInfo=${JSON.stringify(
          this.storeCurrentMemberInGroup,
        )}`,
      });
    },
    toUpdateGroupName() {
      if (!this.isAdmin && !this.isOwner) {
        return;
      }

      uni.navigateTo({
        url: `/pages_im/pages/conversation/updateGroupOrNickname/index?sourceInfo=${JSON.stringify(
          this.storeCurrentGroup,
        )}`,
      });
    },
    toGroupQr() {
      uni.navigateTo({
        url: `/pages_im/pages/common/userOrGroupQrCode/index?sourceInfo=${JSON.stringify(
          this.storeCurrentGroup,
        )}`,
      });
    },
    toSetBg() {
      uni.$u.route("/pages_im/pages/conversation/setChatBackgroup/index");
    },
    toSetFontSize() {
      uni.$u.route("/pages_im/pages/conversation/setFontSize/index");
    },
    copyGroupID() {
      uni.setClipboardData({
        data: this.storeCurrentGroup.groupID,
        success: () => {
          uni.hideToast();
          this.$nextTick(() => {
            uni.$u.toast("复制成功");
          });
        },
      });
    },
    showActionSheet() {
      if (!this.isAdmin && !this.isOwner) {
        return;
      }

      this.actionSheetVisible = true;
    },
    async updateGroupAvatar() {
      if (!this.isAdmin && !this.isOwner) {
        return;
      }
      let result = await premissionCheck("EXTERNAL_STORAGE");
      if (result != 1) {
        return;
      }
      uni.chooseImage({
        count: 1,
        sizeType: ["compressed"],
        success: async ({ tempFilePaths }) => {
          const path = tempFilePaths[0];
          const nameIdx = path.lastIndexOf("/") + 1;
          const typeIdx = path.lastIndexOf(".") + 1;
          const fileName = path.slice(nameIdx);
          const fileType = path.slice(typeIdx);
          try {
            const {
              data: { url },
            } = await IMSDK.asyncApi(IMMethods.UploadFile, IMSDK.uuid(), {
              filepath: getPurePath(tempFilePaths[0]),
              name: fileName,
              contentType: fileType,
              uuid: IMSDK.uuid(),
            });
            await IMSDK.asyncApi(IMSDK.IMMethods.SetGroupInfo, IMSDK.uuid(), {
              groupID: this.storeCurrentConversation.groupID,
              faceURL: url,
            });
            uni.$u.toast("修改成功");
          } catch (error) {
            uni.$u.toast("修改失败");
          }
        },
      });
    },
    changePin(isPinned) {
      console.log("--聊天置顶--", isPinned);
      this.switchLoading.pin = true;
      IMSDK.asyncApi(IMSDK.IMMethods.PinConversation, IMSDK.uuid(), {
        conversationID: this.storeCurrentConversation.conversationID,
        isPinned,
      })
        .then(() => {
          uni.$u.toast("操作成功")
          this.storeCurrentConversation.isPinned = isPinned;
        })
        .catch(() => {
          uni.$u.toast("操作失败")
          this.storeCurrentConversation.isPinned = !isPinned;
        })
        .finally(() => (this.switchLoading.pin = false));
    },
    changeOpt(notNomal, type) {
      this.switchLoading.opt = true;
      IMSDK.asyncApi(
        IMSDK.IMMethods.SetConversationRecvMessageOpt,
        IMSDK.uuid(),
        {
          conversationID: this.storeCurrentConversation.conversationID,
          opt: notNomal ? type : MessageReceiveOptType.Nomal,
        },
      )
        .then(() => uni.$u.toast("操作成功"))
        .catch(() => uni.$u.toast("操作失败"))
        .finally(() => (this.switchLoading.opt = false));
    },
    changeMute(isMute) {
      this.switchLoading.mute = true;
      IMSDK.asyncApi(IMSDK.IMMethods.ChangeGroupMute, IMSDK.uuid(), {
        groupID: this.storeCurrentGroup.groupID,
        isMute,
      })
        .then(() => uni.$u.toast("禁言成功"))
        .catch(() => uni.$u.toast("禁言失败"))
        .finally(() => (this.switchLoading.mute = false));
    },
    confirm() {
      let funcName = "";
      let sourceID = this.storeCurrentConversation.groupID;
      if (this.confirmType === ConfirmTypes.Clear) {
        sourceID = this.storeCurrentConversation.conversationID;
        funcName = IMSDK.IMMethods.ClearConversationAndDeleteAllMsg;
      }
      if (this.confirmType === ConfirmTypes.Quit) {
        funcName = IMSDK.IMMethods.QuitGroup;
      }
      if (this.confirmType === ConfirmTypes.Dismiss) {
        funcName = IMSDK.IMMethods.DismissGroup;
      }
      IMSDK.asyncApi(funcName, IMSDK.uuid(), sourceID)
        .then(() => {
          uni.$u.toast("操作成功");
          if (this.confirmType === ConfirmTypes.Clear) {
            this.$store.commit("message/SET_HISTORY_MESSAGE_LIST", []);
            this.$store.commit("message/SET_PREVIEW_IMAGE_LIST", []);
          } else {
            setTimeout(
              () =>
                uni.switchTab({
                  url: "/pages/conversation/conversationList/index",
                }),
              250,
            );
          }
        })
        .catch(() => uni.$u.toast("操作失败"))
        .finally(() => (this.confirmType = null));
    },

    groupMemberInfoChangeHandler({ data }) {
      if (data.groupID === this.groupMemberList[0]?.groupID) {
        const idx = this.groupMemberList.findIndex(
          (member) => member.userID === data.userID,
        );
        if (idx > -1) {
          this.getGroupMemberList();
        }
      }
    },

    groupMemberDeletedHandler({ data, isInitail }) {
      if (isInitail || data?.groupID === this.groupMemberList[0]?.groupID) {
        const idx = this.groupMemberList.findIndex(
          (member) => member.userID === data?.userID,
        );
        if (isInitail || idx > -1) {
          this.getGroupMemberList();
          IMSDK.asyncApi(
            IMMethods.IsJoinGroup,
            IMSDK.uuid(),
            this.storeCurrentConversation.groupID
          ).then((res) => {
            this.isJoinGroup = res.data
          });
        }
      }
    },

    setIMListener() {
      uni.$on(IMSDK.IMEvents.OnGroupMemberInfoChanged, this.groupMemberInfoChangeHandler)
      IMSDK.subscribe(IMSDK.IMEvents.OnGroupMemberAdded, this.groupMemberInfoChangeHandler)
      IMSDK.subscribe(IMSDK.IMEvents.OnGroupMemberDeleted, this.groupMemberDeletedHandler)
    },
    disposeIMListener() {
      uni.$off(IMSDK.IMEvents.OnGroupMemberInfoChanged, this.groupMemberInfoChangeHandler)
      IMSDK.unsubscribe(IMSDK.IMEvents.OnGroupMemberAdded, this.groupMemberInfoChangeHandler)
      IMSDK.unsubscribe(IMSDK.IMEvents.OnGroupMemberDeleted, this.groupMemberDeletedHandler)
    },
  },
};
</script>

<style lang="scss" scoped>
.group_settings_container {
  @include colBox(false);
  height: 100vh;
  background-color: #f6f6f6;

  .group_settings_content {
    overflow-y: auto;
  }

  .setting_row {
    background-color: #fff;
    margin: 24rpx;
    border-radius: 6px;
    overflow: hidden;
  }

  .group_row {
    height: 44px;
    line-height: 44px;
    background-color: #fff;
    border-radius: 6px;
    text-align: center;
    margin: 24rpx;
    color: #D32414
  }

  .group_avatar {
    margin-right: 16rpx;
    position: relative;

    .edit_icon {
      position: absolute;
      right: -6rpx;
      bottom: -6rpx;
      width: 11px;
      height: 11px;
    }
  }

  .group_info {
    min-height: 46px;
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;

    &_name {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;

      .group_name {
        // @include nomalEllipsis();
        font-size: 34rpx;
        max-width: 380rpx;
        margin-right: 24rpx;
      }
    }


  }

  .sub_title {
    @include nomalEllipsis();
    margin-bottom: 0;
    font-size: 28rpx;
    color: #757575;
  }

  .info_row {
    @include vCenterBox();
    padding: 36rpx 44rpx;




  }
}
</style>