heshanApp/pages_im/pages/common/createGroup/index.vue

<template>
  <view class="create_group_container">
    <custom-nav-bar title="发起群聊" />
    <u-toast ref="uToast"></u-toast>
    <view class="main">
      <view class="member_row">
        <view class="desc_title">
          群名称
        </view>
        <view class="member_list">
          <my-avatar @click="chooseImage" :isGroup="true" :src="groupFaceUrl" size="48" />
          <image class="edit_img" src="/pages_im/static/images/chat/icon_edit.png" alt="" />
          <u-input v-model="groupName" disabledColor="transparent" maxlength="16" placeholder="取个群名方便后续搜索" clearable
            :border="false">
          </u-input>
        </view>
      </view>
      <view class="member_row" @click="toChooseMember">
        <view class="desc_title">
          <text>群成员</text>
          <text class="number" v-if="checkedMemberList.length">{{ `${checkedMemberList.length}人` }}</text>
        </view>
        <view class="member_list">
          <image class="add_img" src="/pages_im/static/images/group_setting_invite.png" alt="" />
          <view v-for="member in checkedMemberList.slice(0, 5)" :key="member.userID" class="member_item">
            <my-avatar :src="member.faceURL" :desc="member.nickname" size="36" />
          </view>
        </view>
      </view>
    </view>
    <view class="action_bar">
      <u-button :loading="createLoading" :disabled="disabledCreate" @click="complateCreate" text="完成创建">
      </u-button>
    </view>

  </view>
</template>

<script>
import { ContactChooseTypes } from "../../../constant";
import IMSDK, {
  GroupType,
  IMMethods,
  SessionType,
} from "openim-uniapp-polyfill";
import CustomNavBar from "../../../components/CustomNavBar/index.vue";
import MyAvatar from "../../../components/MyAvatar/index.vue";
import { navigateToDesignatedConversation } from "../../../util/imCommon";
import { getPurePath, toastWithCallback } from "../../../util/common";
export default {
  components: {
    CustomNavBar,
    MyAvatar,
  },
  data() {
    return {
      groupName: "",
      groupFaceUrl: "",
      checkedMemberList: [],
      fileList: [],
      createLoading: false,
    };
  },
  computed: {
    disabledCreate() {
      return !this.groupName || this.checkedMemberList.length === 0;
    },
  },
  onLoad(options) {
    const { checkedMemberList } = options;
    this.checkedMemberList = checkedMemberList
      ? JSON.parse(checkedMemberList)
      : [];
    console.log(this.checkedMemberList,"-------1111-----");
  },
  methods: {
    toChooseMember() {
      uni.navigateTo({
        url: `/pages_im/pages/common/contactChoose/index?type=${ContactChooseTypes.GetList
          }&checkedUserInfoList=${encodeURIComponent(JSON.stringify(this.checkedMemberList))}`,
      });
    },
    complateCreate() {
      console.log(this.checkedMemberList,"-------2222-----", this.checkedMemberList.map((member) => member.userID));
      this.createLoading = true;
      const options = {
        adminUserIDs: [],
        memberUserIDs: this.checkedMemberList.map((member) => member.userID),
        groupInfo: {
          groupType: GroupType.WorkingGroup,
          groupName: this.groupName,
          faceURL: this.groupFaceUrl,
        },
      };

      IMSDK.asyncApi(IMSDK.IMMethods.CreateGroup, IMSDK.uuid(), options)
        .then(({ data }) => {
          toastWithCallback("创建成功", () =>
            navigateToDesignatedConversation(
              data.groupID,
              SessionType.WorkingGroup,
              true,
            ),
          );
        })
        .catch((err) => {
          console.log(err);
          uni.$u.toast("创建失败");
        })
        .finally(() => (this.createLoading = false));
    },
    getCheckedUsers(list) {
      this.checkedMemberList = [...list];
    },
    chooseImage() {
      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(),
            });
            this.groupFaceUrl = url;
          } catch (error) {
            uni.$u.toast("上传失败");
          }
        },
        fail: function (err) {
          console.log(err)
          if (err.errMsg === 'chooseImage:fail cancel') return
          uni.$u.toast("上传失败");
        },
      });
    },
  },
};
</script>

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

  .edit_img {
    width: 36rpx;
    height: 36rpx;
    margin-left: 24rpx;
    margin-right: 10rpx;
  }

  .add_img {
    width: 36px;
    height: 36px;
    margin-right: 10rpx
  }

  .main {
    display: flex;
    flex-direction: column;
    flex: 1;
  }



  .member_row {

    padding: 24rpx 28rpx;
    margin: 0 24rpx;
    margin-top: 24rpx;
    border-radius: 16rpx;
    background-color: #fff;
    color: #999;

    .desc_title {
      @include vCenterBox();
      justify-content: space-between;
      font-weight: 400;
      font-size: 16px;
      color: #222222;

      .number {
        color: #757575;
      }
    }

    .member_list {
      display: flex;
      flex-wrap: wrap;
      margin-top: 24rpx;
      align-items: center;

      .member_item {
        @include colBox(false);
        align-items: center;
        margin-right: 12rpx;

        .member_name {
          @include nomalEllipsis();
          max-width: 42px;
          margin-top: 12rpx;
        }
      }
    }
  }

  .action_bar {
    background-color: #fff;
    padding: 20rpx 24rpx;
    font-weight: 400;
    font-size: 16px;

    uni-button {
      border-radius: 16rpx !important;
      background-color: #FF5030 !important;
      color: #fff !important;
    }
  }
}
</style>