baiyuApp/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>

      <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="toGroupAnnouncement"
          title="群公告"
          :border="false"
        />
        <setting-item
          v-if="isOwner || isAdmin"
          @click="toGroupManage"
          title="群管理"
          :border="false"
        />
        <setting-item
          v-if="isOwner"
          @click="toSetMute"
          title="禁言成员"
          :border="false"
        />
        <setting-item
          v-if="isOwner"
          @click="toSetAdmin"
          title="设置管理员"
          :border="false"
        />
      </view>

      <view v-if="isJoinGroup" class="setting_row">
        <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
          title="聊天置顶"
          :loading="switchLoading.pin"
          @switch="changePin"
          :switchValue="storeCurrentConversation.isPinned"
          :is_switch="true"
          :border="false"
        />
       <!-- <setting-item
          title="消息免打扰"
          :loading="switchLoading.opt"
          @switch="changeOpt($event, 2)"
          :switchValue="storeCurrentConversation.recvMsgOpt === 2"
          :is_switch="true"
          :border="false"
        /> -->
      </view>

      <view class="setting_row">
        <setting-item
          danger
          @click="() => (confirmType = 'Clear')"
          title="清空聊天记录"
          :border="false"
        />
        <setting-item
          v-if="isJoinGroup"
          danger
          @click="() => (confirmType = isOwner ? 'Dismiss' : 'Quit')"
          :title="isOwner ? '解散群聊' : '退出群聊'"
          :border="false"
        />
      </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: {
    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) {
      this.switchLoading.pin = true;
      IMSDK.asyncApi(IMSDK.IMMethods.PinConversation, IMSDK.uuid(), {
        conversationID: this.storeCurrentConversation.conversationID,
        isPinned,
      })
        .then(() => uni.$u.toast("操作成功"))
        .catch(() => uni.$u.toast("操作失败"))
        .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;
  }

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

    .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: #999;
      }
    }
  }
}
</style>