Initial commit

pages/common/contactChoose/index.vue

@@ -0,0 +1,281 @@
+<template>
+  <view class="contact_choose_container">
+    <custom-nav-bar title="联系人" />
+
+    <view class="search_bar_wrap">
+      <u-search
+        shape="square"
+        placeholder="搜索"
+        :showAction="false"
+        v-model="keyword"
+      />
+    </view>
+
+    <view class="tab_container">
+      <template v-if="activeTab === 0">
+        <setting-item
+          @click="tabChange(tabs[0].idx)"
+          :title="tabs[0].title"
+          :border="false"
+        />
+
+        <view class="tab_pane"></view>
+      </template>
+
+      <template v-else>
+        <view class="tab_pane" v-show="activeTab === 1">
+          <choose-index-list
+            @updateCheck="updateCheckedUser"
+            :indexList="getChooseData.indexList"
+            :itemArr="getChooseData.dataList"
+            :checkedIDList="checkedUserIDList"
+            :disabledIDList="disabledUserIDList"
+            :showCheck="true"
+          />
+        </view>
+      </template>
+    </view>
+    <choose-index-footer
+      :comfirmLoading="comfirmLoading"
+      @removeItem="updateCheckedUserOrGroup"
+      @confirm="confirm"
+      :choosedData="getCheckedInfo"
+    />
+  </view>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+import { ContactChooseTypes } from "@/constant";
+import { formatChooseData, toastWithCallback } from "@/util/common";
+import IMSDK from "openim-uniapp-polyfill";
+import CustomNavBar from "@/components/CustomNavBar/index.vue";
+import UserItem from "@/components/UserItem/index.vue";
+import ChooseIndexList from "@/components/ChooseIndexList/index.vue";
+import ChooseIndexFooter from "@/components/ChooseIndexFooter/index.vue";
+import SettingItem from "@/components/SettingItem/index.vue";
+
+export default {
+  components: {
+    CustomNavBar,
+    UserItem,
+    ChooseIndexList,
+    ChooseIndexFooter,
+    SettingItem,
+  },
+  data() {
+    return {
+      keyword: "",
+      type: ContactChooseTypes.Card,
+      activeTab: 0,
+      groupID: "",
+      checkedUserIDList: [],
+      disabledUserIDList: [],
+      comfirmLoading: false,
+      tabs: [
+        {
+          idx: 1,
+          title: "我的好友",
+        },
+      ],
+    };
+  },
+  computed: {
+    ...mapGetters([
+      "storeFriendList",
+      "storeCurrentConversation",
+      "storeCurrentUserID",
+      "storeConversationList",
+    ]),
+    getChooseData() {
+      if (this.keyword) {
+        return {
+          indexList: ["#"],
+          dataList: [
+            this.storeFriendList.filter(
+              (friend) =>
+                friend.nickname.includes(this.keyword) ||
+                friend.remark.includes(this.keyword)
+            ),
+          ],
+        };
+      }
+      return formatChooseData(this.storeFriendList);
+    },
+    getCheckedInfo() {
+      const tmpUserIDList = [...this.checkedUserIDList];
+      const checkedFriends = this.storeFriendList.filter((friend) => {
+        const idx = tmpUserIDList.findIndex(
+          (userID) => userID === friend.userID
+        );
+        if (idx > -1) {
+          tmpUserIDList.splice(idx, 1);
+        }
+        return idx > -1;
+      });
+      return [...checkedFriends];
+    },
+  },
+  onLoad(options) {
+    const {
+      groupID,
+      type,
+      checkedUserIDList,
+    } = options;
+    this.type = type;
+    this.groupID = groupID;
+    this.checkedUserIDList = checkedUserIDList
+      ? JSON.parse(checkedUserIDList)
+      : [];
+    if (this.type === ContactChooseTypes.Invite) {
+      this.checkDisabledUser();
+    }
+  },
+  methods: {
+    checkDisabledUser() {
+      const friendIDList = this.storeFriendList.map((friend) => friend.userID);
+      IMSDK.asyncApi("getUsersInGroup", IMSDK.uuid(), {
+        groupID: this.groupID,
+        userIDList: friendIDList,
+      }).then(({ data }) => {
+        this.disabledUserIDList = data;
+      });
+    },
+    tabChange(idx) {
+      this.keyword = "";
+      this.activeTab = idx;
+    },
+    updateCheckedUserOrGroup(item) {
+      if (item.userID) {
+        this.updateCheckedUser(item);
+      }
+    },
+    updateCheckedUser({ userID }) {
+      if (this.checkedUserIDList.includes(userID)) {
+        const idx = this.checkedUserIDList.findIndex((item) => item === userID);
+        const tmpArr = [...this.checkedUserIDList];
+        tmpArr.splice(idx, 1);
+        this.checkedUserIDList = [...tmpArr];
+      } else {
+        this.checkedUserIDList = [...this.checkedUserIDList, userID];
+      }
+    },
+    confirm() {
+      if (this.activeTab) {
+        this.activeTab = 0;
+        return;
+      }
+      this.comfirmLoading = true;
+      if (this.type === ContactChooseTypes.GetList) {
+        let pages = getCurrentPages();
+        let prevPage = pages[pages.length - 2];
+        prevPage.$vm.getCheckedUsers(this.getCheckedInfo);
+        this.comfirmLoading = false;
+
+        uni.navigateBack({
+          delta: 1,
+        });
+        return;
+      }
+
+      if (this.type === ContactChooseTypes.Invite) {
+        IMSDK.asyncApi(IMSDK.IMMethods.InviteUserToGroup, IMSDK.uuid(), {
+          groupID: this.groupID,
+          reason: "",
+          userIDList: this.getCheckedInfo.map((user) => user.userID),
+        })
+          .then(() => {
+            toastWithCallback("操作成功", () => uni.navigateBack());
+            this.comfirmLoading = false;
+          })
+          .catch(() => toastWithCallback("操作失败"));
+        return;
+      }
+
+      this.comfirmLoading = false;
+    },
+  },
+  onBackPress() {
+    if (this.activeTab) {
+      this.activeTab = 0;
+      return true;
+    }
+    return false;
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+/deep/.u-popup {
+  flex: none;
+}
+.contact_choose_container {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  .search_bar_wrap {
+    height: 34px;
+    padding: 12px 22px;
+  }
+
+  .tab_container {
+    @include colBox(false);
+    flex: 1;
+    overflow: hidden;
+
+    .setting_item {
+      padding: 32rpx 36rpx;
+    }
+
+    .title {
+      height: 60rpx;
+      display: flex;
+      justify-content: start;
+      align-items: center;
+      // padding: 16rpx 8rpx;
+      background: #f8f9fa;
+      color: #8e9ab0;
+      font-size: 24rpx;
+    }
+
+    .tabs_bar {
+      @include vCenterBox();
+      justify-content: space-evenly;
+
+      .tab_item {
+        @include colBox(false);
+        align-items: center;
+
+        image {
+          width: 50px;
+          height: 50px;
+        }
+      }
+    }
+
+    .tab_pane {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      overflow: hidden;
+
+      .member_list {
+        flex: 1;
+        height: 80% !important;
+        /deep/uni-scroll-view {
+          max-height: 100% !important;
+        }
+      }
+
+      .user_list {
+        height: 100% !important;
+      }
+
+      .member_anchor {
+        background-color: #f8f8f8 !important;
+        border: none !important;
+      }
+    }
+  }
+}
+</style>

pages/common/createGroup/index.vue

@@ -0,0 +1,213 @@
+<template>
+  <view class="create_group_container">
+    <custom-nav-bar title="发起群聊" />
+    <u-toast ref="uToast"></u-toast>
+    <view class="main">
+      <view class="group_base_info">
+        <my-avatar
+          @click="chooseImage"
+          :isGroup="true"
+          :src="groupFaceUrl"
+          size="44"
+        />
+        <u--input
+          placeholder="取个群名称方便后续搜索"
+          border="none"
+          maxlength="16"
+          v-model="groupName"
+        ></u--input>
+      </view>
+
+      <view class="member_row" @click="toChooseMember">
+        <view class="desc_title">
+          <text>群成员</text>
+          <text>{{ `${checkedMemberList.length}人` }}</text>
+        </view>
+        <view class="member_list">
+          <view
+            v-for="member in checkedMemberList.slice(0, 5)"
+            :key="member.userID"
+            class="member_item"
+          >
+            <my-avatar :src="member.userID" :desc="member.nickname" size="42" />
+          </view>
+        </view>
+      </view>
+    </view>
+    <view class="action_bar">
+      <u-button
+        :loading="createLoading"
+        :disabled="disabledCreate"
+        @click="complateCreate"
+        type="primary"
+        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)
+      : [];
+  },
+  methods: {
+    toChooseMember() {
+      const checkedIDList = this.checkedMemberList.map(
+        (member) => member.userID,
+      );
+      uni.navigateTo({
+        url: `/pages/common/contactChoose/index?type=${
+          ContactChooseTypes.GetList
+        }&checkedUserIDList=${JSON.stringify(checkedIDList)}`,
+      });
+    },
+    complateCreate() {
+      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,
+            ),
+          );
+        })
+        .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) {
+          uni.$u.toast("上传失败");
+        },
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.create_group_container {
+  @include colBox(false);
+  height: 100vh;
+  background-color: #f6f6f6;
+
+  .main {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+  }
+
+  .group_base_info {
+    @include vCenterBox();
+    padding: 44rpx;
+    background-color: #fff;
+    margin: 36rpx 0;
+
+    .u-input {
+      margin-left: 48rpx;
+    }
+  }
+
+  .member_row {
+    padding: 44rpx;
+    background-color: #fff;
+    color: #999;
+
+    .desc_title {
+      @include vCenterBox();
+      justify-content: space-between;
+    }
+
+    .member_list {
+      display: flex;
+      flex-wrap: wrap;
+      margin-top: 24rpx;
+
+      .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: 44rpx 44rpx;
+  }
+}
+</style>

pages/common/detailsFileds/index.vue

@@ -0,0 +1,94 @@
+<template>
+  <view class="details_container">
+    <custom-nav-bar title="个人资料" />
+
+    <view class="info_list">
+      <user-info-row-item class="info_item" lable="头像" arrow>
+        <my-avatar
+          :src="sourceInfo.faceURL"
+          :desc="sourceInfo.nickname"
+          size="26"
+        />
+      </user-info-row-item>
+      <user-info-row-item class="info_item" lable="昵称" arrow>
+        <text class="right_content">{{ sourceInfo.nickname }}</text>
+      </user-info-row-item>
+      <user-info-row-item class="info_item" lable="性别" arrow>
+        <text class="right_content">{{ getGender }}</text>
+      </user-info-row-item>
+      <user-info-row-item class="info_item" lable="生日" arrow>
+        <text class="right_content">{{ getBirthStr }}</text>
+      </user-info-row-item>
+    </view>
+
+    <view class="info_list">
+      <user-info-row-item class="info_item" lable="手机号码" arrow>
+        <text class="right_content">{{ sourceInfo.phoneNumber || "-" }}</text>
+      </user-info-row-item>
+      <user-info-row-item class="info_item" lable="邮箱" arrow>
+        <text class="right_content">{{ sourceInfo.email || "-" }}</text>
+      </user-info-row-item>
+    </view>
+  </view>
+</template>
+
+<script>
+import dayjs from "dayjs";
+import CustomNavBar from "@/components/CustomNavBar/index.vue";
+import MyAvatar from "@/components/MyAvatar/index.vue";
+import UserInfoRowItem from "../userCard/components/UserInfoRowItem.vue";
+export default {
+  components: {
+    CustomNavBar,
+    MyAvatar,
+    UserInfoRowItem,
+  },
+  data() {
+    return {
+      sourceInfo: {},
+    };
+  },
+  computed: {
+    getGender() {
+      if (this.sourceInfo.gender === 1) {
+        return "男";
+      }
+      if (this.sourceInfo.gender === 2) {
+        return "女";
+      }
+      return "保密";
+    },
+    getBirthStr() {
+      const birth = this.sourceInfo.birth ?? 0;
+      return dayjs(birth).format("YYYY-MM-DD");
+    },
+  },
+  onLoad(options) {
+    const { sourceInfo } = options;
+    this.sourceInfo = JSON.parse(sourceInfo);
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.details_container {
+  @include colBox(false);
+  height: 100vh;
+  background-color: #f6f6f6;
+
+  .info_list {
+    border-radius: 6px;
+    overflow: hidden;
+    margin: 24rpx;
+
+    .info_item {
+      background-color: #fff;
+      // border-bottom: 1px solid rgba(153, 153, 153, 0.3);
+
+      .right_content {
+        color: #999;
+      }
+    }
+  }
+}
+</style>

pages/common/groupCard/index.vue

@@ -0,0 +1,309 @@
+<template>
+  <view class="group_card_container">
+    <custom-nav-bar title="" />
+    <u-toast ref="uToast"></u-toast>
+
+    <view class="main">
+      <view class="base_info">
+        <my-avatar :src="sourceGroupInfo.faceURL" :isGroup="true" size="48" />
+        <view>
+          <view class="group_name">
+            <text>{{ sourceGroupInfo.groupName }}</text>
+            <text v-if="!!sourceGroupInfo.memberCount"
+              >（{{ sourceGroupInfo.memberCount }}）</text
+            >
+          </view>
+          <view class="create_time">
+            <u-icon name="clock" color="#999" size="14"></u-icon>
+            <text>{{ getCreateTime }}</text>
+          </view>
+        </view>
+      </view>
+
+      <view
+        v-if="!!sourceGroupInfo.memberCount"
+        @click="toMemberList"
+        class="member_row info_row"
+      >
+        <view class="member_desc">
+          <text>群成员</text>
+          <text class="member_count">{{
+            `${sourceGroupInfo.memberCount}人`
+          }}</text>
+          <u-icon name="arrow-right" color="#999" size="18"></u-icon>
+        </view>
+        <view class="member_list">
+          <my-avatar
+            v-for="member in getRenderMemberList"
+            :key="member.userID"
+            class="member_item"
+            size="42"
+            :src="member.faceURL"
+            :desc="member.nickname"
+          ></my-avatar>
+          <u-avatar
+            bgColor="#5496EB"
+            icon="more-dot-fill"
+            shape="square"
+            size="42"
+          ></u-avatar>
+        </view>
+      </view>
+
+      <view class="info_row">
+        <user-info-row-item lable="群ID号" :content="sourceGroupInfo.groupID" />
+      </view>
+    </view>
+
+    <view class="action_row">
+      <u-button type="primary" v-if="!isJoinedGroup" @click="joinGroup"
+        >申请加入该群</u-button
+      >
+      <u-button type="primary" v-else @click="chatingInGroup">发消息</u-button>
+    </view>
+  </view>
+</template>
+
+<script>
+import { GroupMemberListTypes } from "@/constant";
+import { navigateToDesignatedConversation } from "@/util/imCommon";
+import IMSDK, {
+  GroupVerificationType,
+  SessionType,
+} from "openim-uniapp-polyfill";
+import dayjs from "dayjs";
+import MyAvatar from "@/components/MyAvatar/index.vue";
+import CustomNavBar from "@/components/CustomNavBar/index.vue";
+import UserInfoRowItem from "../userCard/components/UserInfoRowItem.vue";
+
+import userIcon from "static/images/contact_my_friend.png";
+
+export default {
+  components: {
+    CustomNavBar,
+    MyAvatar,
+    UserInfoRowItem,
+  },
+  data() {
+    return {
+      sourceID: "",
+      isScan: false,
+      sourceGroupInfo: {},
+      groupMemberList: [],
+    };
+  },
+  computed: {
+    isJoinedGroup() {
+      return (
+        this.$store.getters.storeGroupList.findIndex(
+          (group) => group.groupID === this.sourceID,
+        ) !== -1
+      );
+    },
+    getCreateTime() {
+      return dayjs(this.sourceGroupInfo.createTime).format("YYYY-MM-DD");
+    },
+    getRenderMemberList() {
+      if (this.isJoinedGroup) {
+        this.groupMemberList;
+        return this.groupMemberList;
+      }
+      const memberCount = this.sourceGroupInfo.memberCount ?? 0;
+      return new Array(memberCount >= 6 ? 6 : memberCount)
+        .fill(1)
+        .map((item, idx) => ({
+          userID: idx,
+          src: userIcon,
+        }));
+    },
+  },
+  onLoad(options) {
+    const { sourceID, sourceInfo, isScan } = options;
+    this.isScan = !!isScan;
+    if (sourceID) {
+      this.sourceID = sourceID;
+      this.getSourceGroupInfo();
+    } else {
+      const info = JSON.parse(sourceInfo);
+      this.sourceID = info.groupID;
+      this.sourceGroupInfo = {
+        ...info,
+      };
+    }
+    this.getGroupMemberList();
+  },
+  methods: {
+    toMemberList() {
+      if (this.isJoinedGroup) {
+        this.$store.dispatch("conversation/getCurrentGroup", this.sourceID);
+        this.$store.dispatch(
+          "conversation/getCurrentMemberInGroup",
+          this.sourceID,
+        );
+        uni.navigateTo({
+          url: `/pages/conversation/groupMemberList/index?type=${GroupMemberListTypes.Preview}&groupID=${this.sourceID}`,
+        });
+      }
+    },
+    joinGroup() {
+      uni.$u.route("/pages/common/sendAddRequest/index", {
+        isGroup: true,
+        sourceID: this.sourceID,
+        isScan: this.isScan,
+        notNeedVerification:
+          this.sourceGroupInfo.needVerification ===
+          GroupVerificationType.AllNot,
+        sessionType: SessionType.WorkingGroup,
+      });
+    },
+    chatingInGroup() {
+      navigateToDesignatedConversation(
+        this.sourceID,
+        SessionType.WorkingGroup,
+      ).catch(() => this.showToast("获取会话信息失败"));
+    },
+    async getSourceGroupInfo() {
+      let info = null;
+      if (this.isJoinedGroup) {
+        info = this.$store.getters.storeGroupList.find(
+          (group) => group.groupID === this.sourceID,
+        );
+      } else {
+        try {
+          const { data } = await IMSDK.asyncApi(
+            IMSDK.IMMethods.GetSpecifiedGroupsInfo,
+            IMSDK.uuid(),
+            [this.sourceID],
+          );
+          info = data[0] ?? {};
+        } catch (e) {
+          info = {};
+        }
+      }
+      this.sourceGroupInfo = {
+        ...info,
+      };
+    },
+    getGroupMemberList() {
+      if (this.isJoinedGroup) {
+        IMSDK.asyncApi(IMSDK.IMMethods.GetGroupMemberList, IMSDK.uuid(), {
+          groupID: this.sourceID,
+          filter: 0,
+          offset: 0,
+          count: 6,
+        }).then(({ data }) => {
+          this.groupMemberList = [...data];
+        });
+      }
+    },
+    showToast(message) {
+      this.$refs.uToast.show({
+        message,
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.group_card_container {
+  @include colBox(false);
+  height: 100vh;
+  background-color: #f6f6f6;
+
+  .main {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+  }
+
+  .base_info {
+    @include vCenterBox();
+    background-color: #fff;
+    padding: 44rpx;
+    margin-bottom: 18rpx;
+
+    .u-avatar {
+      margin-right: 24rpx;
+    }
+
+    .group_name {
+      display: flex;
+      margin-bottom: 12rpx;
+    }
+
+    .create_time {
+      @include vCenterBox();
+      justify-content: center;
+      color: #adadad;
+      font-size: 26rpx;
+
+      .u-icon {
+        margin-right: 12rpx;
+      }
+    }
+  }
+
+  .member_row {
+    padding: 24rpx 44rpx;
+
+    .member_desc {
+      margin-bottom: 24rpx;
+      position: relative;
+
+      .member_count {
+        font-size: 28rpx;
+        color: #adadad;
+        margin-left: 24rpx;
+      }
+
+      .u-icon {
+        position: absolute;
+        right: 0;
+        top: 0;
+      }
+    }
+
+    .member_list {
+      display: flex;
+
+      .member_item {
+        margin-right: 12rpx;
+
+        &:nth-child(7) {
+          margin-right: 0;
+        }
+      }
+    }
+  }
+
+  .info_row {
+    background-color: #fff;
+    margin-bottom: 24rpx;
+
+    /deep/ .content {
+      color: #adadad;
+    }
+  }
+
+  .action_row {
+    background-color: #fff;
+    padding: 44rpx 44rpx;
+  }
+
+  .online_state {
+    @include vCenterBox();
+    margin-left: 24rpx;
+    font-size: 24rpx;
+    color: #999;
+
+    .dot {
+      background-color: #10cc64;
+      width: 12rpx;
+      height: 12rpx;
+      border-radius: 50%;
+      margin-right: 12rpx;
+    }
+  }
+}
+</style>

pages/common/markOrIDPage/index.vue

@@ -0,0 +1,139 @@
+<template>
+  <view class="mark_id_container">
+    <custom-nav-bar :title="getTitle">
+      <view class="nav_right_action" slot="more">
+        <text v-show="!loading" @click="saveOrCopy">{{ getConfirmText }}</text>
+        <u-loading-icon v-show="loading" />
+      </view>
+    </custom-nav-bar>
+
+    <view class="content_row">
+      <u-input
+        :disabled="!isRemark && !isSelfNickname"
+        v-model="content"
+        disabledColor="transparent"
+        maxlength="16"
+        placeholder="请输入内容"
+        clearable
+      >
+      </u-input>
+    </view>
+  </view>
+</template>
+
+<script>
+import IMSDK from "openim-uniapp-polyfill";
+
+import CustomNavBar from "@/components/CustomNavBar/index.vue";
+import { businessInfoUpdate } from "@/api/login";
+export default {
+  components: {
+    CustomNavBar,
+  },
+  props: {},
+  data() {
+    return {
+      content: "",
+      isRemark: false,
+      isSelfNickname: false,
+      sourceInfo: {},
+      loading: false,
+    };
+  },
+  computed: {
+    getTitle() {
+      if (this.isRemark) {
+        return "设置备注";
+      }
+      if (this.isSelfNickname) {
+        return "我的姓名";
+      }
+      return "ID号";
+    },
+    getConfirmText() {
+      return this.isRemark || this.isSelfNickname ? "保存" : "复制";
+    },
+  },
+  onLoad(options) {
+    const { isRemark, isSelfNickname, sourceInfo } = options;
+    this.sourceInfo = JSON.parse(sourceInfo);
+    this.isRemark = !!isRemark;
+    if (this.isRemark) {
+      this.content = this.sourceInfo.remark;
+    }
+    this.isSelfNickname = !!isSelfNickname;
+    if (this.isSelfNickname) {
+      this.content = this.sourceInfo.nickname;
+    }
+  },
+  methods: {
+    async saveOrCopy() {
+      if (this.isRemark) {
+        this.loading = true;
+        IMSDK.asyncApi(IMSDK.IMMethods.SetFriendRemark, IMSDK.uuid(), {
+          toUserID: this.sourceInfo.userID,
+          remark: this.content,
+        })
+          .then(() => {
+            uni.$u.toast("设置成功");
+            setTimeout(() => uni.navigateBack(), 1000);
+          })
+          .catch((error) => {
+            console.log(error);
+            uni.$u.toast("设置失败");
+          })
+          .finally(() => (this.loading = false));
+      } else if (this.isSelfNickname) {
+        this.loading = true;
+        try {
+          await businessInfoUpdate({
+            userID: this.sourceInfo.userID,
+            nickname: this.content,
+          });
+          await this.$store.dispatch("user/updateBusinessInfo");
+          uni.$u.toast("修改成功");
+          setTimeout(() => uni.navigateBack(), 1000);
+        } catch (e) {
+          console.log(e);
+          uni.$u.toast("修改失败");
+        }
+        this.loading = false;
+      } else {
+        uni.setClipboardData({
+          data: this.sourceInfo.userID,
+          success: () => {
+            uni.hideToast();
+            this.$nextTick(() => {
+              uni.$u.toast("复制成功");
+            });
+          },
+        });
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.mark_id_container {
+  @include colBox(false);
+  height: 100vh;
+
+  .nav_right_action {
+    margin-right: 36rpx;
+  }
+
+  .content_row {
+    margin-top: 96rpx;
+    margin: 72rpx 44rpx 0;
+
+    .u-input {
+      background-color: #e8eaef;
+    }
+
+    .u-button {
+      height: 60rpx;
+    }
+  }
+}
+</style>

pages/common/searchUserOrGroup/index.vue

@@ -0,0 +1,172 @@
+<template>
+  <view class="search_container">
+    <custom-nav-bar :route="false">
+      <view slot="left"> </view>
+      <view class="search_bar" slot="center">
+        <u-search
+          actionText="取消"
+          @change="keywordChange"
+          @custom="cancel"
+          @search="startSearch"
+          shape="square"
+          :placeholder="getPlaceholder"
+          v-model="keyword"
+        />
+      </view>
+    </custom-nav-bar>
+
+    <view v-show="!empty && !searching" @click="startSearch(keyword)" class="result_row">
+      <image class="icon" :src="getIcon" alt="" />
+      <view class="">
+        <text>查找：</text>
+        <text>{{ keyword }}</text>
+      </view>
+    </view>
+
+    <view v-show="searching && !empty" class="result_row result_row_empty">
+      <u-loading-icon></u-loading-icon>
+    </view>
+
+    <view v-show="empty" class="result_row result_row_empty">
+      <text>未搜索到相关结果</text>
+    </view>
+  </view>
+</template>
+
+<script>
+import IMSDK from "openim-uniapp-polyfill";
+import CustomNavBar from "@/components/CustomNavBar/index.vue";
+
+import searchGroup from "static/images/contact_add_join_group_fill.png";
+import searchUser from "static/images/contact_add_search_user_fill.png";
+import { businessSearchUserInfo } from "@/api/login";
+
+export default {
+  components: {
+    CustomNavBar,
+  },
+  data() {
+    return {
+      keyword: "",
+      searching: false,
+      empty: false,
+      isSearchGroup: false,
+    };
+  },
+  computed: {
+    getIcon() {
+      return this.isSearchGroup ? searchGroup : searchUser;
+    },
+    getPlaceholder() {
+      return this.isSearchGroup ? "请输入群聊ID" : "搜索ID或手机号添加好友";
+    },
+  },
+  onLoad(options) {
+    const { isSearchGroup } = options;
+    this.isSearchGroup = JSON.parse(isSearchGroup);
+  },
+  methods: {
+    cancel() {
+      console.log("cancel");
+      uni.navigateBack();
+    },
+    keywordChange() {
+      if (this.empty) {
+        this.empty = !this.empty;
+      }
+    },
+    async startSearch(value) {
+      if (!value) return;
+      this.searching = true;
+      try {
+        if (this.isSearchGroup) {
+          let info = this.$store.getters.storeGroupList.find(
+            (item) => item.groupID === value,
+          );
+          if (!info) {
+            const { data } = await IMSDK.asyncApi(
+              IMSDK.IMMethods.GetSpecifiedGroupsInfo,
+              IMSDK.uuid(),
+              [value],
+            );
+            info = data[0];
+          }
+          if (info) {
+            uni.navigateTo({
+              url: `/pages/common/groupCard/index?sourceInfo=${JSON.stringify(
+                info,
+              )}`,
+            });
+          } else {
+            this.empty = true;
+          }
+        } else {
+          let info = this.$store.getters.storeFriendList.find(
+            (item) => item.userID === value,
+          );
+          if (!info) {
+            const { total, users } = await businessSearchUserInfo(value);
+            if (total > 0) {
+              const { data } = await IMSDK.asyncApi(
+                IMSDK.IMMethods.GetUsersInfo,
+                IMSDK.uuid(),
+                [users[0].userID],
+              );
+              const imData = data[0];
+
+              info = {
+                ...imData,
+                ...users[0],
+              };
+            }
+          }
+          if (info) {
+            uni.navigateTo({
+              url: `/pages/common/userCard/index?sourceInfo=${JSON.stringify(
+                info,
+              )}`,
+            });
+          } else {
+            this.empty = true;
+          }
+        }
+      } catch (e) {
+        //TODO handle the exception
+      }
+      this.searching = false;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.search_container {
+  height: 100vh;
+  background-color: #f8f8f8;
+
+  .search_bar {
+    width: 100%;
+    padding: 0 44rpx;
+  }
+
+  .result_row {
+    @include vCenterBox();
+    padding: 24rpx 44rpx;
+    font-size: 28rpx;
+    color: $uni-text-color;
+    background-color: #fff;
+
+    .icon {
+      width: 20px;
+      height: 20px;
+      margin-right: 24rpx;
+    }
+
+    &_empty {
+      display: flex;
+      justify-content: center;
+      color: #999;
+    }
+  }
+}
+</style>

pages/common/sendAddRequest/index.vue

@@ -0,0 +1,125 @@
+<template>
+  <view class="request_join_container">
+    <custom-nav-bar :title="isGroup ? '群聊验证' : '好友验证'">
+      <view class="top_right_btn" slot="more">
+        <u-button @click="sendRequest" text="发送" type="primary"></u-button>
+      </view>
+    </custom-nav-bar>
+
+    <text class="title">{{ `发送${isGroup ? "入群" : "好友"}申请` }}</text>
+
+    <view class="input_container">
+      <u--textarea
+        height="120"
+        v-model="reason"
+        border="none"
+        placeholder="请输入内容"
+        maxlength="20"
+        count
+      >
+      </u--textarea>
+    </view>
+  </view>
+</template>
+
+<script>
+import IMSDK, { GroupJoinSource } from "openim-uniapp-polyfill";
+import CustomNavBar from "@/components/CustomNavBar/index.vue";
+import { navigateToDesignatedConversation } from "@/util/imCommon";
+
+export default {
+  components: {
+    CustomNavBar,
+  },
+  data() {
+    return {
+      reason: "",
+      sourceID: "",
+      isGroup: false,
+      isScan: false,
+      notNeedVerification: false,
+      sessionType: 0,
+    };
+  },
+  onLoad(options) {
+    const { isGroup, sourceID, isScan, notNeedVerification, sessionType } =
+      options;
+    this.isGroup = JSON.parse(isGroup);
+    this.isScan = JSON.parse(isScan);
+    this.sourceID = sourceID;
+    this.notNeedVerification = JSON.parse(notNeedVerification);
+    this.sessionType = sessionType ?? 0;
+  },
+  methods: {
+    sendRequest() {
+      let func;
+      if (this.isGroup) {
+        const joinSource = this.isScan
+          ? GroupJoinSource.QrCode
+          : GroupJoinSource.Search;
+        func = IMSDK.asyncApi(IMSDK.IMMethods.JoinGroup, IMSDK.uuid(), {
+          groupID: this.sourceID,
+          reqMsg: this.reason,
+          joinSource,
+        });
+      } else {
+        func = IMSDK.asyncApi(IMSDK.IMMethods.AddFriend, IMSDK.uuid(), {
+          toUserID: this.sourceID,
+          reqMsg: this.reason,
+        });
+      }
+      func
+        .then(() => {
+          uni.$u.toast(this.notNeedVerification ? "你已加入该群" : "发送成功");
+          setTimeout(() => {
+            if (this.notNeedVerification) {
+              navigateToDesignatedConversation(
+                this.sourceID,
+                Number(this.sessionType),
+              ).catch(() => this.showToast("获取会话信息失败"));
+            } else {
+              uni.navigateBack();
+            }
+          }, 1000);
+        })
+        .catch((err) => {
+          console.log(err);
+          uni.$u.toast("发送失败");
+        });
+    },
+    showToast(message) {
+      this.$refs.uToast.show({
+        message,
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.request_join_container {
+  @include colBox(false);
+  height: 100vh;
+  background-color: #f6f6f6;
+
+  .top_right_btn {
+    margin-right: 44rpx;
+
+    .u-button {
+      height: 48rpx;
+    }
+  }
+
+  .title {
+    font-size: 28rpx;
+    color: #999;
+    margin: 24rpx 44rpx;
+  }
+
+  .input_container {
+    /deep/.u-textarea {
+      padding: 24rpx 44rpx !important;
+    }
+  }
+}
+</style>

pages/common/userCard/components/UserInfoRowItem.vue

@@ -0,0 +1,51 @@
+<template>
+  <view @click="click" class="row_item" :class="{ arrow_right: arrow }">
+    <view class="title">
+      <text>{{ lable }}</text>
+    </view>
+    <view class="content">
+      <text>{{ content }}</text>
+    </view>
+    <slot>
+      <u-icon v-if="arrow" name="arrow-right" color="#999" size="20"></u-icon>
+    </slot>
+  </view>
+</template>
+
+<script>
+export default {
+  name: "",
+  components: {},
+  props: {
+    lable: String,
+    content: String,
+    arrow: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    click() {
+      this.$emit("click");
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.row_item {
+  @include vCenterBox();
+  padding: 24rpx 44rpx;
+}
+
+.title {
+  margin-right: 24rpx;
+}
+
+.arrow_right {
+  justify-content: space-between;
+}
+</style>

pages/common/userCard/index.vue

@@ -0,0 +1,298 @@
+<template>
+  <view class="user_card_container">
+    <u-loading-page :loading="isLoading" loading-text="loading..."></u-loading-page>
+    <custom-nav-bar title="" />
+
+    <view v-if="!isLoading" style="flex: 1;display: flex;flex-direction: column;">
+      <view class="base_info">
+        <my-avatar
+          :desc="sourceUserInfo.remark || sourceUserInfo.nickname"
+          :src="sourceUserInfo.faceURL"
+          size="46"
+        />
+        <view class="user_name">
+          <text class="text">{{ getShowName }}</text>
+          <text class="id" @click="copy(sourceUserInfo.userID)">{{
+            sourceUserInfo.userID
+          }}</text>
+        </view>
+        <view class="add_btn" @click="toAddFriend" v-if="trySendRequest">
+          <u-button type="primary" icon="man-add" text="添加"></u-button>
+        </view>
+      </view>
+
+      <view v-if="isFriend" class="info_row">
+        <user-info-row-item @click="toMoreInfo" lable="个人资料" arrow />
+      </view>
+
+      <view class="action_row" v-if="!isSelf">
+        <view @click="toDesignatedConversation" class="action_item">
+          <img src="static/images/user_card_message.png" alt="" />
+          <text>发消息</text>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+import { navigateToDesignatedConversation } from "@/util/imCommon";
+import IMSDK, {
+  SessionType,
+} from "openim-uniapp-polyfill";
+import MyAvatar from "@/components/MyAvatar/index.vue";
+import CustomNavBar from "@/components/CustomNavBar/index.vue";
+import UserInfoRowItem from "./components/UserInfoRowItem.vue";
+import { businessSearchUserInfo } from "@/api/login";
+
+export default {
+  components: {
+    CustomNavBar,
+    MyAvatar,
+    UserInfoRowItem,
+  },
+  data() {
+    return {
+      isLoading: false,
+      sourceID: "",
+      sourceUserInfo: {},
+      switchLoading: false,
+      showSetRole: false,
+    };
+  },
+  computed: {
+    ...mapGetters([
+      "storeFriendList",
+      "storeSelfInfo",
+    ]),
+    isFriend() {
+      return (
+        this.storeFriendList.findIndex(
+          (friend) => friend.userID === this.sourceID,
+        ) !== -1
+      );
+    },
+    trySendRequest() {
+      return !this.isFriend && !this.isSelf
+    },
+    isSelf() {
+      return this.sourceID === this.storeSelfInfo.userID;
+    },
+    getShowName() {
+      let suffix = "";
+      if (this.sourceUserInfo.remark) {
+        suffix = `(${this.sourceUserInfo.remark})`;
+      }
+      return this.sourceUserInfo.nickname + suffix;
+    },
+  },
+  onLoad(options) {
+    const { sourceID, sourceInfo } = options;
+    if (sourceID) {
+      this.sourceID = sourceID;
+    } else {
+      const info = JSON.parse(sourceInfo);
+      this.sourceID = info.userID;
+    }
+    this.getSourceUserInfo();
+  },
+  methods: {
+    copy(userID) {
+      uni.setClipboardData({
+        showToast: false,
+        data: userID,
+        success: function () {
+          uni.showToast({
+            icon: "none",
+            title: "复制成功",
+          });
+        },
+      });
+    },
+    async getSourceUserInfo() {
+      let info = {};
+      const friendInfo = this.storeFriendList.find((item) => item.userID === this.sourceID);
+      if (friendInfo) {
+        info = { ...friendInfo };
+      }
+      else {
+        const { data } = await IMSDK.asyncApi(
+          IMSDK.IMMethods.GetUsersInfo,
+          IMSDK.uuid(),
+          [this.sourceID],
+        );
+        info = { ...(data[0] ?? {}) };
+      }
+      this.isLoading = true
+      try {
+        const { total, users } = await businessSearchUserInfo(this.sourceID);
+        if (total > 0) {
+          const { data } = await IMSDK.asyncApi(
+            IMSDK.IMMethods.GetUsersInfo,
+            IMSDK.uuid(),
+            [this.sourceID],
+          );
+          const imData = data[0]?.friendInfo ?? data[0]?.publicInfo ?? {};
+          info = {
+            ...imData,
+            ...users[0],
+          };
+        }
+      } catch (e) {
+        info = {};
+      }
+      this.isLoading = false
+      this.sourceUserInfo = {
+        ...info,
+      };
+    },
+    toAddFriend() {
+      uni.$u.route("/pages/common/sendAddRequest/index", {
+        isGroup: false,
+        sourceID: this.sourceID,
+        isScan: false,
+        notNeedVerification: false,
+      });
+    },
+    toDesignatedConversation() {
+      navigateToDesignatedConversation(
+        this.sourceID,
+        SessionType.Single,
+        false,
+      ).catch(() => uni.$u.toast("获取会话信息失败"));
+    },
+    toMoreInfo() {
+      uni.navigateTo({
+        url: `/pages/common/userCardMore/index?sourceInfo=${JSON.stringify(
+          this.sourceUserInfo,
+        )}`,
+      });
+    }
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.user_card_container {
+  @include colBox(false);
+  height: 100vh;
+  background-color: #f6f6f6;
+  overflow-y: auto;
+  position: relative;
+
+  .base_info {
+    @include vCenterBox();
+    background-color: #fff;
+    padding: 44rpx;
+    margin-bottom: 18rpx;
+
+    .add_btn {
+      width: 140rpx;
+      height: 60rpx;
+      margin-left: auto;
+
+      .u-button {
+        width: 140rpx;
+        height: 60rpx;
+      }
+    }
+
+    .u-avatar {
+      margin-right: 24rpx;
+    }
+
+    .user_name {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      margin-bottom: 12rpx;
+      height: 46px;
+
+      .text {
+        @include nomalEllipsis();
+        max-width: 300rpx;
+      }
+    }
+
+    .company {
+      font-size: 28rpx;
+      color: $u-primary;
+    }
+  }
+
+  .info_row {
+    background-color: #fff;
+    margin-bottom: 24rpx;
+  }
+
+  .mute_right {
+    display: flex;
+    align-items: center;
+  }
+
+  .company_row {
+    padding: 20rpx 0;
+
+    .desc_title {
+      padding-left: 44rpx;
+    }
+
+    /deep/.title {
+      width: 200rpx;
+      color: #999 !important;
+    }
+  }
+
+  .action_row {
+    @include vCenterBox();
+    align-items: flex-end;
+    justify-content: space-around;
+    margin: 44rpx;
+    flex: 1;
+
+    .action_item {
+      width: 100%;
+      @include colBox(true);
+      flex-direction: row;
+      align-items: center;
+      justify-content: center;
+      padding: 22rpx 0;
+      background: $u-primary;
+      color: #fff;
+      border-radius: 12rpx;
+
+      img {
+        margin-right: 16rpx;
+        width: 40rpx;
+        height: 40rpx;
+      }
+    }
+  }
+
+  .id {
+    font-size: 24rpx;
+    color: #999;
+  }
+
+  .online_state {
+    @include vCenterBox();
+    margin-left: 24rpx;
+    font-size: 24rpx;
+    color: #999;
+
+    .dot {
+      background-color: #10cc64;
+      width: 12rpx;
+      height: 12rpx;
+      border-radius: 50%;
+      margin-right: 12rpx;
+    }
+
+    .online_str {
+      @include nomalEllipsis();
+      max-width: 280rpx;
+    }
+  }
+}
+</style>

pages/common/userCardMore/index.vue

@@ -0,0 +1,156 @@
+<template>
+  <view class="user_more_container">
+    <custom-nav-bar title="好友设置" />
+
+    <view class="info_row">
+      <user-info-row-item @click="toMark" lable="设置备注" arrow />
+      <user-info-row-item @click="toMore" lable="个人资料" arrow />
+    </view>
+
+    <view class="info_row">
+      <user-info-row-item lable="加入黑名单" arrow>
+        <u-switch
+          asyncChange
+          :loading="blackLoading"
+          size="20"
+          :value="isBlacked"
+          @change="change"
+        ></u-switch>
+      </user-info-row-item>
+    </view>
+
+    <view v-if="isFriend" class="info_row">
+      <u-button
+        @click="() => (showConfirm = true)"
+        type="error"
+        plain
+        text="解除好友关系"
+      ></u-button>
+    </view>
+    <u-toast ref="uToast"></u-toast>
+    <u-modal
+      :content="`确定要解除与${sourceInfo.nickname}的好友关系吗？`"
+      asyncClose
+      :show="showConfirm"
+      showCancelButton
+      @confirm="confirmRemove"
+      @cancel="() => (showConfirm = false)"
+    ></u-modal>
+  </view>
+</template>
+
+<script>
+import IMSDK from "openim-uniapp-polyfill";
+import CustomNavBar from "@/components/CustomNavBar/index.vue";
+import UserInfoRowItem from "../userCard/components/UserInfoRowItem.vue";
+import { ContactChooseTypes } from "@/constant";
+export default {
+  components: {
+    CustomNavBar,
+    UserInfoRowItem,
+  },
+  data() {
+    return {
+      blackLoading: false,
+      sourceInfo: {},
+      showConfirm: false,
+    };
+  },
+  computed: {
+    isFriend() {
+      return (
+        this.$store.getters.storeFriendList.findIndex(
+          (friend) => friend.userID === this.sourceInfo.userID,
+        ) !== -1
+      );
+    },
+    isBlacked() {
+      return (
+        this.$store.getters.storeBlackList.findIndex(
+          (black) => black.userID === this.sourceInfo.userID,
+        ) !== -1
+      );
+    },
+  },
+  onLoad(options) {
+    const { sourceInfo } = options;
+    this.sourceInfo = JSON.parse(sourceInfo);
+  },
+  methods: {
+    change(isBlack) {
+      this.blackLoading = true;
+      if (isBlack) {
+        IMSDK.asyncApi(IMSDK.IMMethods.AddBlack, IMSDK.uuid(), {
+          toUserID: this.sourceInfo.userID,
+          ex: "",
+        })
+          .catch(() => this.showToast("操作失败"))
+          .finally(() => (this.blackLoading = false));
+        return;
+      }
+      IMSDK.asyncApi(
+        IMSDK.IMMethods.RemoveBlack,
+        IMSDK.uuid(),
+        this.sourceInfo.userID
+      )
+        .catch(() => this.showToast("操作失败"))
+        .finally(() => (this.blackLoading = false));
+    },
+    confirmRemove() {
+      IMSDK.asyncApi(
+        IMSDK.IMMethods.DeleteFriend,
+        IMSDK.uuid(),
+        this.sourceInfo.userID,
+      )
+        .then(() => this.showToast("操作成功"))
+        .catch(() => this.showToast("操作失败"))
+        .finally(() => (this.showConfirm = false));
+    },
+    toMore() {
+      uni.navigateTo({
+        url: `/pages/common/detailsFileds/index?sourceInfo=${JSON.stringify(
+          this.sourceInfo,
+        )}`,
+      });
+    },
+    toMark() {
+      uni.navigateTo({
+        url: `/pages/common/markOrIDPage/index?isRemark=true&sourceInfo=${JSON.stringify(
+          this.sourceInfo,
+        )}`,
+      });
+    },
+    toShare() {
+      uni.navigateTo({
+        url: `/pages/common/contactChoose/index?type=${
+          ContactChooseTypes.ShareCard
+        }&cardInfo=${JSON.stringify(this.sourceInfo)}`,
+      });
+    },
+    showToast(message) {
+      this.$refs.uToast.show({
+        message,
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.user_more_container {
+  @include colBox(false);
+  height: 100vh;
+  background-color: #f6f6f6;
+
+  .info_row {
+    background-color: #fff;
+    margin: 24rpx;
+    border-radius: 6px;
+    overflow: hidden;
+
+    .u-button {
+      border: none;
+    }
+  }
+}
+</style>

pages/common/webviewWrapper/index.vue

@@ -0,0 +1,18 @@
+<template>
+  <web-view :src="url"></web-view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      url: "",
+    };
+  },
+  onLoad(options) {
+    this.url = decodeURIComponent(options.url);
+  },
+};
+</script>
+
+<style lang="scss"></style>

pages/contact/applicationDetails/index.vue

@@ -0,0 +1,256 @@
+<template>
+  <view class="page_container">
+    <custom-nav-bar :title="isGroupApplication ? '群通知' : '好友请求'" />
+
+    <view class="application_item">
+      <view class="base_info_row">
+        <view class="base_info_left" @click="toSourceDetails">
+          <my-avatar :src="getSourceFaceURL" :desc="getSourceName" />
+          <view class="base_info_details">
+            <text class="nickname">{{ getSourceName }}</text>
+          </view>
+        </view>
+
+        <u-icon name="arrow-right" size="18" color="#999"></u-icon>
+      </view>
+
+      <view class="request_message">
+        <view v-if="isGroupApplication" class="title">
+          <text>申请加入 </text>
+          <text class="group_name">{{ currentApplication.groupName }}</text>
+        </view>
+        <text v-else>{{ `${getSourceName}：` }}</text>
+        <text>{{ currentApplication.reqMsg }}</text>
+      </view>
+
+    </view>
+
+    <view class="action_row">
+      <u-button
+        :loading="loadingState.accept"
+        @click="acceptAplication"
+        type="primary"
+        :plain="true"
+        :text="`通过${isGroupApplication ? '入群' : '好友'}申请`"
+      ></u-button>
+    </view>
+
+    <view class="action_row">
+      <u-button
+        :loading="loadingState.refuse"
+        @click="refuseAplication"
+        type="primary"
+        :plain="true"
+        :text="`拒绝${isGroupApplication ? '入群' : '好友'}申请`"
+      ></u-button>
+    </view>
+  </view>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+import IMSDK, { GroupJoinSource } from "openim-uniapp-polyfill";
+import CustomNavBar from "@/components/CustomNavBar/index.vue";
+import MyAvatar from "@/components/MyAvatar/index.vue";
+export default {
+  components: {
+    CustomNavBar,
+    MyAvatar,
+  },
+  data() {
+    return {
+      currentApplication: {},
+      isOnline: false,
+      loadingState: {
+        accept: false,
+        refuse: false,
+      },
+    };
+  },
+  computed: {
+    ...mapGetters(["storeSelfInfo"]),
+    isGroupApplication() {
+      return this.currentApplication.groupID !== undefined;
+    },
+    getSourceID() {
+      return (
+        this.currentApplication.fromUserID ?? this.currentApplication.userID
+      );
+    },
+    getSourceName() {
+      return (
+        this.currentApplication.fromNickname ?? this.currentApplication.nickname
+      );
+    },
+    getSourceFaceURL() {
+      return (
+        this.currentApplication.fromFaceURL ?? this.currentApplication.faceURL
+      );
+    },
+  },
+  onLoad(options) {
+    const { application } = options;
+    this.currentApplication = JSON.parse(application);
+  },
+  methods: {
+    toSourceDetails() {
+      uni.navigateTo({
+        url: `/pages/common/userCard/index?sourceID=${this.getSourceID}`,
+      });
+    },
+    acceptAplication() {
+      this.loadingState.accept = true;
+      let func;
+      if (this.isGroupApplication) {
+        func = IMSDK.asyncApi(
+          IMSDK.IMMethods.AcceptGroupApplication,
+          IMSDK.uuid(),
+          {
+            groupID: this.currentApplication.groupID,
+            fromUserID: this.currentApplication.userID,
+            handleMsg: "",
+          },
+        );
+      } else {
+        console.log(this.currentApplication);
+        func = IMSDK.asyncApi(
+          IMSDK.IMMethods.AcceptFriendApplication,
+          IMSDK.uuid(),
+          {
+            toUserID: this.currentApplication.fromUserID,
+            handleMsg: "",
+          },
+        );
+      }
+      func
+        .then(() => {
+          uni.$u.toast("操作成功");
+          setTimeout(() => uni.navigateBack(), 500);
+        })
+        .catch((e) => {
+          console.log(e);
+          uni.$u.toast("操作失败");
+        })
+        .finally(() => (this.loadingState.accept = false));
+    },
+    refuseAplication() {
+      this.loadingState.refuse = true;
+      let func;
+      if (this.isGroupApplication) {
+        func = IMSDK.asyncApi(
+          IMSDK.IMMethods.RefuseGroupApplication,
+          IMSDK.uuid(),
+          {
+            groupID: this.currentApplication.groupID,
+            fromUserID: this.currentApplication.userID,
+            handleMsg: "",
+          },
+        );
+      } else {
+        func = IMSDK.asyncApi(
+          IMSDK.IMMethods.RefuseFriendApplication,
+          IMSDK.uuid(),
+          {
+            toUserID: this.currentApplication.fromUserID,
+            handleMsg: "",
+          },
+        );
+      }
+      func
+        .then(() => {
+          uni.$u.toast("操作成功");
+          setTimeout(() => uni.navigateBack(), 250);
+        })
+        .catch(() => uni.$u.toast("操作失败"))
+        .finally(() => (this.loadingState.refuse = false));
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.page_container {
+  background-color: #f8f8f8;
+
+  .application_item {
+    padding: 72rpx 44rpx 24rpx;
+    background-color: #fff;
+
+    .base_info_row {
+      @include btwBox();
+
+      .base_info_left {
+        @include vCenterBox();
+      }
+
+      .base_info_details {
+        margin-left: 24rpx;
+
+        .nickname {
+          @include nomalEllipsis();
+          max-width: 600rpx;
+        }
+
+        .online_state {
+          @include vCenterBox();
+          flex-direction: row;
+          font-size: 24rpx;
+          color: #999;
+          margin-top: 6rpx;
+
+          .dot {
+            background-color: #10cc64;
+            width: 12rpx;
+            height: 12rpx;
+            border-radius: 50%;
+            margin-right: 12rpx;
+          }
+        }
+      }
+    }
+
+    .request_message {
+      background-color: #eee;
+      margin-top: 48rpx;
+      padding: 24rpx 36rpx;
+      border-radius: 12rpx;
+      font-size: 28rpx;
+      color: #666;
+      min-height: 240rpx;
+
+      .title {
+        margin-bottom: 12rpx;
+        color: $uni-text-color;
+
+        .group_name {
+          @nomalEllipsis();
+          max-width: 400rpx;
+          color: $uni-color-primary;
+          margin-left: 12rpx;
+        }
+      }
+    }
+
+    .join_source {
+      margin-top: 20rpx;
+      font-size: 24rpx;
+      color: #666;
+      text-align: right;
+    }
+  }
+
+  .action_row {
+    margin-top: 24rpx;
+
+    .u-button {
+      border: none;
+    }
+
+    &:last-child {
+      .u-button {
+        color: #999 !important;
+      }
+    }
+  }
+}
+</style>

pages/contact/applicationList/ApplicationItem.vue

@@ -0,0 +1,246 @@
+<template>
+  <view @click="clickItem" class="application_item">
+    <my-avatar
+      :src="getAvatarUrl"
+      :isGroup="isGroupApplication"
+      :desc="application[isRecv ? 'fromNickname' : 'toNickname']"
+      size="42"
+    />
+    <view class="application_item_details">
+      <view class="content">
+        <text class="user_name">{{ getShowName }}</text>
+
+        <view v-if="isGroupApplication" class="title">
+          申请加入
+          <text class="group_name">{{ application.groupName }}</text>
+        </view>
+        <text class="req_message">{{ application.reqMsg }}</text>
+      </view>
+
+      <view class="application_action">
+        <text v-if="showStateStr" class="status_tip">{{ getStateStr }}</text>
+        <text v-if="showGreet" @tap.stop="greetToUser" class="status_tip greet"
+          >打招呼</text
+        >
+        <button
+          :loading="accessLoading"
+          v-if="showAccept"
+          class="access_btn"
+          @tap.stop="acceptApplication"
+          type="primary"
+          :plain="true"
+          size="mini"
+        >
+          {{ isGroupApplication ? "同意" : "接受" }}
+        </button>
+      </view>
+
+      <view class="bottom_line"> </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import { navigateToDesignatedConversation } from "@/util/imCommon";
+import IMSDK, { SessionType } from "openim-uniapp-polyfill";
+import MyAvatar from "@/components/MyAvatar/index.vue";
+export default {
+  name: "ApplicationItem",
+  components: {
+    MyAvatar,
+  },
+  props: {
+    application: Object,
+    isRecv: Boolean,
+  },
+  data() {
+    return {
+      accessLoading: false,
+    };
+  },
+  computed: {
+    isGroupApplication() {
+      return this.application.groupID !== undefined;
+    },
+    getShowName() {
+      if (this.isRecv) {
+        return this.application[
+          this.isGroupApplication ? "nickname" : "fromNickname"
+        ];
+      }
+      return this.application[
+        this.isGroupApplication ? "groupName" : "toNickname"
+      ];
+    },
+    showGreet() {
+      return !this.isGroupApplication && this.application.handleResult === 1;
+    },
+    showStateStr() {
+      if (
+        (this.isRecv && this.application.handleResult === 0) ||
+        this.showGreet
+      ) {
+        return false;
+      }
+      return true;
+    },
+    showAccept() {
+      return this.application.handleResult === 0 && this.isRecv;
+    },
+    getStateStr() {
+      if (this.application.handleResult === -1) {
+        return "已拒绝";
+      }
+      if (this.application.handleResult === 0) {
+        return "等待验证";
+      }
+      return "已同意";
+    },
+    getAvatarUrl() {
+      if (this.isGroupApplication) {
+        return this.application.groupFaceURL;
+      }
+      return this.application[this.isRecv ? "fromFaceURL" : "toFaceURL"];
+    },
+  },
+  methods: {
+    clickItem() {
+      if (this.showAccept) {
+        uni.navigateTo({
+          url: `/pages/contact/applicationDetails/index?application=${JSON.stringify(
+            this.application,
+          )}`,
+        });
+      } else {
+        let sourceID =
+          this.application.groupID ??
+          (this.isRecv
+            ? this.application.fromUserID
+            : this.application.toUserID);
+        let cardType = this.isGroupApplication ? "groupCard" : "userCard";
+        const url = `/pages/common/${cardType}/index?sourceID=${sourceID}`;
+        uni.navigateTo({
+          url,
+        });
+      }
+    },
+    acceptApplication() {
+      this.accessLoading = true;
+      let func;
+      if (this.isGroupApplication) {
+        func = IMSDK.asyncApi(
+          IMSDK.IMMethods.AcceptGroupApplication,
+          IMSDK.uuid(),
+          {
+            groupID: this.application.groupID,
+            fromUserID: this.application.userID,
+            handleMsg: "",
+          },
+        );
+      } else {
+        func = IMSDK.asyncApi(
+          IMSDK.IMMethods.AcceptFriendApplication,
+          IMSDK.uuid(),
+          {
+            toUserID: this.application.fromUserID,
+            handleMsg: "",
+          },
+        );
+      }
+      func
+        .then(() => uni.$u.toast("操作成功"))
+        .catch(() => uni.$u.toast("操作失败"))
+        .finally(() => (this.accessLoading = false));
+    },
+    greetToUser() {
+      navigateToDesignatedConversation(
+        this.application[this.isRecv ? "fromUserID" : "toUserID"],
+        SessionType.Single,
+      ).catch(() => uni.$u.toast("获取会话信息失败"));
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.application_item {
+  // @include vCenterBox();
+  display: flex;
+  justify-content: flex-start;
+  padding: 24rpx 44rpx;
+  color: $uni-text-color;
+  background-color: #fff;
+
+  &_details {
+    @include vCenterBox();
+    margin-left: 24rpx;
+    width: 100%;
+    position: relative;
+
+    .content {
+      @include colBox(false);
+      font-size: 26rpx;
+      width: 100%;
+
+      .user_name {
+        @include nomalEllipsis();
+        max-width: 400rpx;
+        font-size: 28rpx;
+        color: $uni-text-color;
+        margin-bottom: 10rpx;
+      }
+
+      .req_message {
+        @include ellipsisWithLine(2);
+        max-width: 80%;
+        color: #999;
+      }
+
+      .title {
+        margin-bottom: 20rpx;
+        word-break: break-all;
+        width: 75%;
+
+        .group_name {
+          margin-left: 12rpx;
+          color: $uni-color-primary;
+        }
+      }
+    }
+
+    .application_action {
+      position: absolute;
+      right: 0;
+
+      .status_tip {
+        font-size: 28rpx;
+        color: #666;
+      }
+
+      .access_btn {
+        padding: 0 12rpx;
+        height: 48rpx;
+        line-height: 48rpx;
+      }
+
+      .greet {
+        color: #418ae5;
+      }
+    }
+
+    .bottom_line {
+      height: 1px;
+      width: 100%;
+      background-color: #f0f0f0;
+      position: absolute;
+      bottom: -24rpx;
+    }
+  }
+}
+
+.u-list-item:last-child {
+  .bottom_line {
+    height: 0;
+  }
+}
+</style>

pages/contact/applicationList/index.vue

@@ -0,0 +1,173 @@
+<template>
+  <view class="application_list_container">
+    <custom-nav-bar :title="isGroupApplication ? '新的群聊' : '新的好友'" />
+    <view
+      class="pane_row"
+      :style="{ transform: `translateX(${isRecv ? '0' : '-100%'})` }"
+    >
+      <view class="pane_content">
+        <u-list v-if="getRecvRenderData.length > 0" class="application_list">
+          <u-list-item
+            v-for="application in getRecvRenderData"
+            :key="
+              application[!isGroupApplication ? 'fromUserID' : 'userID'] +
+              application.groupID
+            "
+          >
+            <application-item :isRecv="true" :application="application" />
+          </u-list-item>
+        </u-list>
+        <u-list
+          v-else-if="getSendRenderData.length > 0"
+          class="application_list"
+        >
+          <u-list-item
+            v-for="application in getSendRenderData"
+            :key="application[!isGroupApplication ? 'toUserID' : 'groupID']"
+          >
+            <application-item :application="application" />
+          </u-list-item>
+        </u-list>
+        <view v-else class="empty">
+          <image src="@/static/images/block_empty.png"></image>
+          <text class="empty_text">暂无数据</text>
+        </view>
+      </view>
+	  </view>
+  </view>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+import { ContactMenuTypes } from "@/constant";
+import CustomNavBar from "@/components/CustomNavBar/index.vue";
+import ApplicationItem from "./ApplicationItem.vue";
+export default {
+  components: {
+    CustomNavBar,
+    ApplicationItem,
+  },
+  data() {
+    return {
+      keyword: "",
+      isRecv: true,
+      isGroupApplication: false,
+    };
+  },
+  computed: {
+    ...mapGetters([
+      "storeRecvFriendApplications",
+      "storeSentFriendApplications",
+      "storeRecvGroupApplications",
+      "storeSentGroupApplications",
+    ]),
+    getRecvRenderData() {
+      const tmpList = this.isGroupApplication
+        ? this.storeRecvGroupApplications
+        : this.storeRecvFriendApplications;
+      tmpList.sort((a, b) => (a.handleResult === 0 ? -1 : 1));
+      return tmpList.slice(0, 4);
+    },
+    getSendRenderData() {
+      const tmpList = this.isGroupApplication
+        ? this.storeSentGroupApplications
+        : this.storeSentFriendApplications;
+      tmpList.sort((a, b) => (a.handleResult === 0 ? -1 : 1));
+      return tmpList.slice(0, 4);
+    },
+    tabList() {
+      return [
+        {
+          name: this.isGroupApplication ? "入群申请" : "好友请求",
+        },
+        {
+          name: "我的请求",
+        },
+      ];
+    },
+  },
+  onLoad(params) {
+    const { applicationType } = params;
+    this.isGroupApplication = applicationType === ContactMenuTypes.NewGroup;
+  },
+  methods: {
+    clickTab({ index }) {
+      this.isRecv = index === 0;
+    },
+    previewAll() {
+      uni.navigateTo({
+        url: `/pages/contact/applicationListDetails/index?isGroupApplication=${this.isGroupApplication}&isRecv=${this.isRecv}`,
+      });
+    },
+    toSearch() {
+      uni.navigateTo({
+        url: `/pages/common/searchUserOrGroup/index?isSearchGroup=${this.isGroupApplication}`,
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.empty {
+  @include centerBox();
+  flex-direction: column;
+  margin-top: 25vh !important;
+
+  &_text {
+    margin-top: 26rpx;
+    color: #8e9ab0;
+  }
+  image {
+    width: 237rpx;
+    height: 244rpx;
+  }
+}
+.application_list_container {
+  @include colBox(false);
+  height: 100vh;
+  background-color: #f8f9fa;
+  overflow-x: hidden;
+
+  .search_bar_wrap {
+    height: 34px;
+    padding: 12px 22px;
+    background-color: #fff;
+  }
+
+  .u-tabs {
+    background-color: #fff;
+  }
+
+  .pane_row {
+    display: flex;
+    flex: 1;
+    transition: all 0.3s ease 0s !important;
+    background-color: #fff;
+    margin-top: 20rpx;
+
+    .pane_content {
+      @include colBox(false);
+      height: 100%;
+      flex: 0 0 100%;
+
+      .pane_title {
+        font-size: 28rpx;
+        color: #999;
+        padding: 12rpx 44rpx;
+        background-color: #f8f8f8;
+      }
+
+      .application_list {
+        flex: 1;
+        height: 100% !important;
+      }
+    }
+  }
+
+  .view_all {
+    background-color: #fff;
+    padding: 44rpx 44rpx;
+  }
+}
+</style>

pages/contact/applicationListDetails/index.vue

@@ -0,0 +1,81 @@
+<template>
+  <view class="application_list_container">
+    <custom-nav-bar :title="getTitle" />
+
+    <u-list class="application_list">
+      <u-list-item
+        v-for="application in getRenderData"
+        :key="getKey(application)"
+      >
+        <application-item :isRecv="isRecv" :application="application" />
+      </u-list-item>
+    </u-list>
+  </view>
+</template>
+
+<script>
+import CustomNavBar from "@/components/CustomNavBar/index.vue";
+import ApplicationItem from "../applicationList/ApplicationItem.vue";
+export default {
+  components: {
+    CustomNavBar,
+    ApplicationItem,
+  },
+  data() {
+    return {
+      isGroupApplication: false,
+      isRecv: false,
+    };
+  },
+  computed: {
+    getRenderData() {
+      let getterKey = this.isRecv
+        ? "storeRecvFriendApplications"
+        : "storeSentFriendApplications";
+      if (this.isGroupApplication) {
+        getterKey = this.isRecv
+          ? "storeRecvGroupApplications"
+          : "storeSentGroupApplications";
+      }
+      return [...this.$store.getters[getterKey]].sort((a, b) =>
+        a.handleResult === 0 ? -1 : 1,
+      );
+    },
+    getKey() {
+      return (application) => {
+        if (this.isGroupApplication) {
+          return this.isRecv
+            ? application.userID + application.groupID
+            : application.groupID;
+        }
+        return application[this.isRecv ? "fromUserID" : "toUserID"];
+      };
+    },
+    getTitle() {
+      if (!this.isRecv) {
+        return "我的申请";
+      }
+      return this.isGroupApplication ? "群通知" : "好友请求";
+    },
+  },
+  onLoad(options) {
+    const { isGroupApplication, isRecv } = options;
+    this.isGroupApplication = JSON.parse(isGroupApplication);
+    this.isRecv = JSON.parse(isRecv);
+  },
+  methods: {},
+};
+</script>
+
+<style lang="scss" scoped>
+.application_list_container {
+  @include colBox(false);
+  height: 100vh;
+  background-color: #f8f8f8;
+
+  .application_list {
+    margin-top: 24rpx;
+    flex: 1;
+  }
+}
+</style>

pages/contact/contactAdd/ActionItem.vue

@@ -0,0 +1,74 @@
+<template>
+  <view class="action_item" @click="onClick">
+    <slot name="icon">
+      <view class="action_icon">
+        <image :src="action.icon" mode=""></image>
+      </view>
+    </slot>
+
+    <view class="action_details">
+      <text class="title">{{ action.title }}</text>
+      <text class="desc">{{ action.desc }}</text>
+      <view class="bottom_line"></view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: "",
+  props: {
+    action: Object,
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    onClick() {
+      this.$emit("click", this.action);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.action_item {
+  @include vCenterBox();
+  padding: 24rpx 44rpx;
+
+  .action_icon {
+    width: 30px;
+    height: 30px;
+
+    image {
+      max-width: 100%;
+      max-height: 100%;
+    }
+  }
+
+  .action_details {
+    @include colBox(false);
+    margin-left: 48rpx;
+    width: 100%;
+    position: relative;
+
+    .title {
+      font-weight: 500;
+      padding-bottom: 12rpx;
+    }
+
+    .desc {
+      font-size: 24rpx;
+      color: #999;
+    }
+
+    .bottom_line {
+      height: 1px;
+      width: 100%;
+      background-color: #f0f0f0;
+      position: absolute;
+      bottom: -24rpx;
+    }
+  }
+}
+</style>

pages/contact/contactAdd/index.vue

@@ -0,0 +1,101 @@
+<template>
+  <view class="contact_add_container">
+    <custom-nav-bar title="添加" />
+
+    <view class="action_row">
+      <action-item
+        @click="friendAction(item)"
+        v-for="item in friendActionMenus"
+        :action="item"
+        :key="item.idx"
+      />
+      <action-item
+        @click="groupAction(item)"
+        v-for="item in groupActionMenus"
+        :action="item"
+        :key="item.idx"
+      />
+    </view>
+  </view>
+</template>
+
+<script>
+import CustomNavBar from "@/components/CustomNavBar/index.vue";
+import ActionItem from "./ActionItem.vue";
+export default {
+  components: {
+    CustomNavBar,
+    ActionItem,
+  },
+  data() {
+    return {
+      groupActionMenus: [
+        {
+          idx: 0,
+          title: "创建群聊",
+          desc: "创建群聊，全面使用OpenIM",
+          icon: require("static/images/contact_add_create_group.png"),
+        },
+        {
+          idx: 1,
+          title: "添加群聊",
+          desc: "向管理员或团队成员询问ID",
+          icon: require("static/images/contact_add_join_group.png"),
+        },
+      ],
+      friendActionMenus: [
+        {
+          idx: 0,
+          title: "添加好友",
+          desc: "通过手机号/ID号/搜索添加",
+          icon: require("static/images/contact_add_search_user.png"),
+        },
+      ],
+    };
+  },
+  methods: {
+    groupAction({ idx }) {
+      if (idx === 0) {
+        uni.navigateTo({
+          url: `/pages/common/createGroup/index`,
+        });
+      } else {
+        uni.navigateTo({
+          url: "/pages/contact/switchJoinGroup/index",
+        });
+      }
+    },
+    friendAction({ idx }) {
+      if (!idx) {
+        uni.navigateTo({
+          url: "/pages/common/searchUserOrGroup/index?isSearchGroup=false",
+        });
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.contact_add_container {
+  height: 100vh;
+  background-color: #f8f8f8;
+
+  .desc_title {
+    font-size: 24rpx;
+    color: #999;
+    padding: 24rpx 44rpx;
+  }
+
+  .action_row {
+    margin-top: 24rpx;
+    background-color: #fff;
+
+    .action_item:last-child {
+      .bottom_line {
+        height: 0;
+      }
+    }
+  }
+}
+</style>

pages/contact/friendList/index.vue

@@ -0,0 +1,93 @@
+<template>
+  <view class="friend_list_container">
+    <custom-nav-bar title="我的好友" />
+    <view class="search_bar_wrap">
+      <u-search
+        class="search_bar"
+        shape="square"
+        placeholder="搜索"
+        :showAction="false"
+        disabled
+      />
+    </view>
+
+    <choose-index-list
+      v-if="getIndexData.dataList.length > 0"
+      @itemClick="userClick"
+      :height="`${listHeight}px`"
+      :indexList="getIndexData.indexList"
+      :itemArr="getIndexData.dataList"
+    />
+    <u-empty v-else mode="list" />
+  </view>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+import { formatChooseData } from "@/util/common";
+import CustomNavBar from "@/components/CustomNavBar/index.vue";
+import ChooseIndexList from "@/components/ChooseIndexList/index.vue";
+export default {
+  components: {
+    CustomNavBar,
+    ChooseIndexList,
+  },
+  data() {
+    return {
+      keyword: "",
+      listHeight: 0,
+    };
+  },
+  computed: {
+    ...mapGetters(["storeFriendList"]),
+    getIndexData() {
+      return formatChooseData(this.storeFriendList);
+    },
+  },
+  mounted() {
+    this.getListHeight();
+  },
+  methods: {
+    userClick(friend) {
+      uni.navigateTo({
+        url: `/pages/common/userCard/index?sourceID=${friend.userID}`,
+      });
+    },
+    async getListHeight() {
+      const windowInfo = uni.getWindowInfo();
+      const data = await this.getEl(".search_bar_wrap");
+      const searchBarHeight = Number(data.height.toFixed());
+      this.listHeight =
+        windowInfo.windowHeight -
+        windowInfo.statusBarHeight -
+        44 -
+        searchBarHeight;
+    },
+    getEl(el) {
+      return new Promise((resolve) => {
+        const query = uni.createSelectorQuery().in(this);
+        query
+          .select(el)
+          .boundingClientRect((data) => {
+            // 存在data，且存在宽和高，视为渲染完毕
+            resolve(data);
+          })
+          .exec();
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.friend_list_container {
+  .search_bar_wrap {
+    height: 34px;
+    padding: 12px 22px;
+  }
+
+  .u-empty {
+    margin-top: 25vh !important;
+  }
+}
+</style>

pages/contact/groupList/GroupItem.vue

@@ -0,0 +1,55 @@
+<template>
+  <view @click="toGroupCard" class="group_item">
+    <my-avatar :src="groupInfo.faceURL" :isGroup="true" size="42" />
+    <view class="group_info">
+      <text class="group_name">{{ groupInfo.groupName }}</text>
+      <view class="group_details">
+        <text>{{ `${groupInfo.memberCount}人` }}</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import MyAvatar from "@/components/MyAvatar/index.vue";
+export default {
+  name: "",
+  components: {
+    MyAvatar,
+  },
+  props: {
+    groupInfo: Object,
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    toGroupCard() {
+      uni.navigateTo({
+        url: `/pages/common/groupCard/index?sourceID=${this.groupInfo.groupID}`,
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.group_item {
+  @include vCenterBox();
+  padding: 24rpx 44rpx;
+
+  .group_info {
+    margin-left: 24rpx;
+
+    .group_name {
+      @include nomalEllipsis() max-width: 400rpx;
+    }
+
+    .group_details {
+      font-size: 28rpx;
+      color: #999;
+      margin-top: 8rpx;
+    }
+  }
+}
+</style>

pages/contact/groupList/index.vue

@@ -0,0 +1,157 @@
+<template>
+  <view class="group_list_container">
+    <custom-nav-bar title="我的群组">
+
+    </custom-nav-bar>
+    <view class="search_bar_wrap">
+      <u-search
+        class="search_bar"
+        shape="square"
+        placeholder="搜索"
+        disabled
+        :showAction="false"
+      />
+    </view>
+
+    <u-tabs :scrollable="false" :list="tabList" @click="clickTab"></u-tabs>
+
+    <view
+      class="pane_row"
+      :style="{ transform: `translateX(${isMyCreate ? '0' : '-100%'})` }"
+    >
+      <view class="pane_content">
+        <u-list
+          v-if="getMyCreateGroupList.length > 0"
+          class="group_list"
+          :height="`${getListHeight}px`"
+        >
+          <u-list-item
+            v-for="group in getMyCreateGroupList"
+            :key="group.groupID"
+          >
+            <group-item :groupInfo="group" />
+          </u-list-item>
+        </u-list>
+        <u-empty v-else mode="list" />
+      </view>
+
+      <view class="pane_content">
+        <u-list
+          v-if="getMyJoinedGroupList.length > 0"
+          class="group_list"
+          :height="`${getListHeight}px`"
+        >
+          <u-list-item
+            v-for="group in getMyJoinedGroupList"
+            :key="group.groupID"
+          >
+            <group-item :groupInfo="group" />
+          </u-list-item>
+        </u-list>
+        <u-empty v-else mode="list" />
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+import CustomNavBar from "@/components/CustomNavBar/index.vue";
+import GroupItem from "./GroupItem.vue";
+export default {
+  components: {
+    CustomNavBar,
+    GroupItem,
+  },
+  data() {
+    return {
+      keyword: "",
+      tabList: [
+        {
+          name: "我创建的",
+        },
+        {
+          name: "我加入的",
+        },
+      ],
+      isMyCreate: true,
+    };
+  },
+  computed: {
+    ...mapGetters(["storeGroupList", "storeCurrentUserID"]),
+    getMyCreateGroupList() {
+      return this.storeGroupList.filter(
+        (group) => group.ownerUserID === this.storeCurrentUserID,
+      );
+    },
+    getListHeight() {
+      const statusBar = uni.getWindowInfo().statusBarHeight;
+      const searchBar = 58;
+      const tabAndNavBar = 44 * 2;
+      const titleBar = 32;
+      return (
+        uni.getWindowInfo().safeArea.height -
+        statusBar -
+        searchBar -
+        tabAndNavBar -
+        titleBar
+      );
+    },
+    getMyJoinedGroupList() {
+      // console.log(this.storeGroupList.filter(group => group.ownerUserID !== this.storeCurrentUserID));
+      return this.storeGroupList.filter(
+        (group) => group.ownerUserID !== this.storeCurrentUserID,
+      );
+    },
+  },
+  mounted() {},
+  methods: {
+    clickTab({ index }) {
+      this.isMyCreate = index === 0;
+    },
+    toCreateGroup() {
+      uni.navigateTo({
+        url: `/pages/common/createGroup/index`,
+      });
+    }
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.group_list_container {
+  @include colBox(false);
+  height: 100vh;
+  overflow: hidden;
+
+  .nav_right_action {
+    padding-right: 44rpx;
+  }
+
+  .search_bar_wrap {
+    height: 34px;
+    padding: 12px 22px;
+  }
+
+  .pane_row {
+    display: flex;
+    flex: 1;
+    transition: all 0.3s ease 0s !important;
+    border-top: 2rpx solid #e8eaef;
+    // overflow-x: hidden;
+
+    .pane_content {
+      @include colBox(false);
+      height: 100%;
+      flex: 0 0 100%;
+
+      .pane_title {
+        font-size: 14px;
+        color: #999;
+        padding: 6px 22px;
+        background-color: #f8f8f8;
+      }
+    }
+  }
+}
+</style>

pages/contact/index/components/ContactMenus.vue

@@ -0,0 +1,151 @@
+<template>
+  <view class="">
+    <view class="menu_list">
+      <view
+        @click="menuClick(item)"
+        v-for="item in getMenus"
+        :key="item.idx"
+        class="menu_list_item"
+      >
+        <image class="menu_icon" :src="item.icon" mode=""></image>
+        <view class="item_content">
+          <text class="title">
+            {{ item.title }}
+          </text>
+          <view class="icon">
+            <u-icon name="arrow-right" color="#999" size="18" />
+          </view>
+        </view>
+      </view>
+    </view>
+    <view class="menu_list">
+      <view
+        @click="menuClick(item)"
+        v-for="item in getFriendsMenus"
+        :key="item.idx"
+        class="menu_list_item"
+      >
+        <image class="menu_icon" :src="item.icon" mode=""></image>
+        <view class="item_content">
+          <text class="title">
+            {{ item.title }}
+          </text>
+          <view class="icon">
+            <u-icon name="arrow-right" color="#999" size="18" />
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+import { ContactMenuTypes } from "@/constant";
+
+export default {
+  name: "",
+  props: {},
+  data() {
+    return {};
+  },
+  computed: {
+    getMenus() {
+      return [
+        {
+          idx: 0,
+          type: ContactMenuTypes.NewFriend,
+          title: "新的好友",
+          icon: require("static/images/contact_new_friend.png"),
+        },
+        {
+          idx: 1,
+          type: ContactMenuTypes.NewGroup,
+          title: "新的群组",
+          icon: require("static/images/contact_new_group.png"),
+        },
+      ];
+    },
+    getFriendsMenus() {
+      return [
+        {
+          idx: 2,
+          type: ContactMenuTypes.MyFriend,
+          title: "我的好友",
+          icon: require("static/images/contact_my_friend.png"),
+          badge: 0,
+        },
+        {
+          idx: 3,
+          type: ContactMenuTypes.MyGroup,
+          title: "我的群组",
+          icon: require("static/images/contact_my_group.png"),
+          badge: 0,
+        },
+      ];
+    },
+  },
+  methods: {
+    menuClick({ type }) {
+      switch (type) {
+        case ContactMenuTypes.NewFriend:
+        case ContactMenuTypes.NewGroup:
+          uni.navigateTo({
+            url: `/pages/contact/applicationList/index?applicationType=${type}`,
+          });
+          break;
+        case ContactMenuTypes.MyFriend:
+          uni.navigateTo({
+            url: "/pages/contact/friendList/index",
+          });
+          break;
+        case ContactMenuTypes.MyGroup:
+          uni.navigateTo({
+            url: "/pages/contact/groupList/index",
+          });
+          break;
+        default:
+          break;
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.menu_list {
+  margin-bottom: 24rpx;
+  background-color: #fff;
+
+  &_item {
+    @include vCenterBox();
+    margin: 0 44rpx;
+    padding: 24rpx 0;
+    color: #0c1c33;
+
+    .menu_icon {
+      width: 42px;
+      min-width: 42px;
+      height: 42px;
+      min-height: 42px;
+    }
+
+    .item_content {
+      @include btwBox();
+      margin-left: 24rpx;
+      width: 100%;
+      position: relative;
+
+      .icon {
+        display: flex;
+
+        .u-badge {
+          width: fit-content;
+          padding: 8rpx 12rpx;
+          line-height: 18rpx;
+        }
+      }
+    }
+  }
+}
+</style>

pages/contact/index/index.vue

@@ -0,0 +1,87 @@
+<template>
+  <view class="contact_container">
+    <custom-nav-bar>
+      <view class="contact_title" slot="left">
+        <text>通讯录</text>
+      </view>
+      <view class="contact_action" slot="more">
+        <view @click="contactAddClick" class="search_icon">
+          <image src="@/static/images/common_add.png" alt="" srcset="" />
+        </view>
+      </view>
+    </custom-nav-bar>
+
+    <contact-menus />
+  </view>
+</template>
+
+<script>
+import CustomNavBar from "@/components/CustomNavBar/index.vue";
+import ContactMenus from "./components/ContactMenus.vue";
+import UserItem from "@/components/UserItem/index.vue";
+export default {
+  components: {
+    CustomNavBar,
+    ContactMenus,
+    UserItem,
+  },
+  data() {
+    return {
+      frequentContacts: [],
+    };
+  },
+  methods: {
+    contactAddClick() {
+      uni.navigateTo({
+        url: "/pages/contact/contactAdd/index",
+      });
+    },
+    userClick(item) {
+      uni.navigateTo({
+        url: `/pages/common/userCard/index?sourceID=${item.userID}`,
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.contact_container {
+  @include colBox(false);
+  height: 100vh;
+  background-color: #f6f6f6;
+
+  .contact_title {
+    padding-left: 44rpx;
+    font-size: 40rpx;
+    font-weight: 600;
+    color: #0c1c33;
+  }
+
+  .contact_action {
+    padding-right: 36rpx;
+    display: flex;
+
+    .search_icon {
+      margin: 0 16rpx;
+
+      image {
+        width: 56rpx;
+        height: 56rpx;
+      }
+    }
+  }
+
+  .list_title {
+    font-size: 24rpx;
+    color: #999;
+    margin-left: 44rpx;
+  }
+
+  .user_list {
+    flex: 1;
+    margin-top: 24rpx;
+    background-color: #fff;
+  }
+}
+</style>

pages/contact/searchUserOrGroup/index.vue

@@ -0,0 +1,57 @@
+<template>
+  <view class="search_group_container">
+    <custom-nav-bar title="搜索群组" />
+    <view class="search_bar_wrap">
+      <u-search
+        class="search_bar"
+        shape="square"
+        placeholder="搜索群组"
+        :showAction="false"
+        v-model="keyword"
+      />
+    </view>
+
+    <view class="search_results">
+      <u-empty mode="search" />
+    </view>
+  </view>
+</template>
+
+<script>
+import CustomNavBar from "@/components/CustomNavBar/index.vue";
+import GroupItem from "../groupList/GroupItem.vue";
+export default {
+  components: {
+    CustomNavBar,
+    GroupItem,
+  },
+  data() {
+    return {
+      keyword: "",
+    };
+  },
+  mounted() {},
+  methods: {
+    userClick() {},
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.search_group_container {
+  @include colBox(false);
+  height: 100vh;
+
+  .search_bar_wrap {
+    height: 34px;
+    padding: 12px 22px;
+  }
+
+  .search_results {
+    flex: 1;
+    .group_list {
+      height: 100% !important;
+    }
+  }
+}
+</style>

pages/contact/switchJoinGroup/index.vue

@@ -0,0 +1,99 @@
+<template>
+  <view class="switch_join_container">
+    <custom-nav-bar title="加入群聊" />
+
+    <view class="action_row">
+      <action-item
+        @click="actionClick(item)"
+        v-for="item in joinGroupMenus"
+        :action="item"
+        :key="item.idx"
+      >
+        <view
+          class="custom_icon"
+          :class="{ custom_icon_id: item.idx === 1 }"
+          slot="icon"
+        >
+          <image :src="item.icon" mode=""> </image>
+        </view>
+      </action-item>
+    </view>
+  </view>
+</template>
+
+<script>
+import CustomNavBar from "@/components/CustomNavBar/index.vue";
+import ActionItem from "../contactAdd/ActionItem.vue";
+export default {
+  components: {
+    CustomNavBar,
+    ActionItem,
+  },
+  data() {
+    return {
+      joinGroupMenus: [
+        {
+          idx: 1,
+          title: "群ID号加入",
+          desc: "向管理员或团队成员询问ID",
+          icon: require("static/images/switch_join_id.png"),
+        },
+      ],
+    };
+  },
+  methods: {
+    actionClick({ idx }) {
+      if (idx) {
+        uni.navigateTo({
+          url: "/pages/common/searchUserOrGroup/index?isSearchGroup=true",
+        });
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.switch_join_container {
+  height: 100vh;
+  background-color: #f8f8f8;
+
+  .desc_title {
+    font-size: 24rpx;
+    color: #999;
+    padding: 24rpx 44rpx;
+  }
+
+  .action_row {
+    background-color: #fff;
+
+    .custom_icon {
+      @include centerBox();
+      width: 44px;
+      min-width: 44px;
+      height: 44px;
+      border-radius: 50%;
+      background-color: #5496eb;
+
+      image {
+        width: 20px;
+        height: 20px;
+      }
+
+      &_id {
+        background-color: #ffc563;
+      }
+    }
+
+    /deep/ .action_item {
+      align-items: start;
+    }
+
+    .action_item:last-child {
+      .bottom_line {
+        height: 0;
+      }
+    }
+  }
+}
+</style>

pages/conversation/chating/components/ChatingFooter/ChatingActionBar.vue

@@ -0,0 +1,88 @@
+<template>
+  <view class="chat_action_bar">
+    <u-row class="action_row">
+      <u-col
+        v-for="item in actionList"
+        :key="item.idx"
+        @click="actionClick(item)"
+        span="3"
+      >
+        <view class="action_item">
+          <image :src="item.icon" alt="" srcset="" />
+          <text class="action_item_title">{{ item.title }}</text>
+        </view>
+      </u-col>
+    </u-row>
+  </view>
+</template>
+
+<script>
+import {
+  ChatingFooterActionTypes,
+} from "@/constant";
+
+export default {
+  components: {},
+  data() {
+    return {
+      actionList: [
+        {
+          idx: 0,
+          type: ChatingFooterActionTypes.Album,
+          title: "相册",
+          icon: require("static/images/chating_action_image.png"),
+        },
+        {
+          idx: 1,
+          type: ChatingFooterActionTypes.File,
+          title: "文件",
+          icon: require("static/images/chating_action_file.png"),
+        }
+      ],
+    };
+  },
+  methods: {
+    async actionClick(action) {
+      switch (action.type) {
+        case ChatingFooterActionTypes.Album:
+          this.$emit("prepareMediaMessage", action.type);
+          break;
+        case ChatingFooterActionTypes.File:
+          this.$emit("prepareMediaMessage", action.type);
+        default:
+          break;
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.chat_action_bar {
+  position: relative;
+  background: #f0f2f6;
+  padding: 24rpx 36rpx;
+
+  .action_row {
+    flex-wrap: wrap;
+    margin-bottom: 24rpx;
+  }
+
+  .action_item {
+    @include centerBox();
+    flex-direction: column;
+    margin-top: 24rpx;
+
+    image {
+      width: 96rpx;
+      height: 96rpx;
+    }
+
+    &_title {
+      font-size: 24rpx;
+      color: #999;
+      margin-top: 6rpx;
+    }
+  }
+}
+</style>

pages/conversation/chating/components/ChatingFooter/CustomEditor.vue

@@ -0,0 +1,107 @@
+<template>
+  <view
+    class="editor_wrap"
+  >
+    <editor
+      :placeholder="placeholder"
+      id="editor2"
+      @ready="editorReady"
+      @focus="editorFocus"
+      @blur="editorBlur"
+      @input="editorInput"
+    />
+  </view>
+</template>
+
+<script>
+import { html2Text } from "@/util/common";
+export default {
+  props: {
+    placeholder: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      editorCtx: null,
+      lastStr: "",
+    };
+  },
+  methods: {
+    editorReady() {
+      uni
+        .createSelectorQuery()
+        .select("#editor2")
+        .context((res) => {
+          this.$emit("ready", res);
+          this.editorCtx = res.context;
+        })
+        .exec();
+    },
+    editorFocus() {
+      this.$emit("focus");
+    },
+    editorBlur() {
+      this.$emit("blur");
+    },
+    editorInput(e) {
+      let str = e.detail.html;
+      const oldArr = (this.lastStr ?? '').split("");
+      let contentStr = str;
+      oldArr.forEach((str) => {
+        contentStr = contentStr.replace(str, "");
+      });
+      contentStr = html2Text(contentStr);
+      this.$emit("input", e);
+      this.lastStr = e.detail.html;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.editor_wrap {
+  position: relative;
+}
+
+#editor2 {
+  background-color: #fff;
+  min-height: 30px;
+  max-height: 120px;
+  height: auto;
+  word-break: break-all;
+}
+
+/deep/.ql-editor {
+  img {
+    vertical-align: sub !important;
+  }
+
+  p {
+    padding: 4px;
+  }
+}
+
+.canvas_container {
+  position: fixed;
+  bottom: -99px;
+  z-index: -100;
+
+  &_name {
+    max-width: 480rpx;
+    display: inline-block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  #atCanvas {
+    height: 20px;
+  }
+
+  .convas_container_name {
+    font-size: 16px !important;
+  }
+}
+</style>

pages/conversation/chating/components/ChatingFooter/index.vue

@@ -0,0 +1,353 @@
+<template>
+  <view>
+    <view>
+      <view class="chat_footer">
+
+        <view class="footer_action_area">
+
+        <view class="input_content">
+          <CustomEditor
+            class="custom_editor"
+            ref="customEditor"
+            @ready="editorReady"
+            @focus="editorFocus"
+            @blur="editorBlur"
+            @input="editorInput"
+          />
+        </view>
+
+        <view class="footer_action_area">
+<!--          <image-->
+<!--            v-show="!hasContent"-->
+<!--            @click.prevent="updateActionBar"-->
+<!--            src="@/static/images/chating_footer_add.png"-->
+<!--            alt=""-->
+<!--            srcset=""-->
+<!--          />-->
+          <image
+            v-show="hasContent"
+            @touchend.prevent="sendTextMessage"
+            src="@/static/images/send_btn.png"
+            alt=""
+            srcset=""
+          />
+        </view>
+      </view>
+      <chating-action-bar
+        @sendMessage="sendMessage"
+        @prepareMediaMessage="prepareMediaMessage"
+        v-show="actionBarVisible"
+      />
+      <u-action-sheet
+        :safeAreaInsetBottom="true"
+        round="12"
+        :actions="actionSheetMenu"
+        @select="selectClick"
+        :closeOnClickOverlay="true"
+        :closeOnClickAction="true"
+        :show="showActionSheet"
+        @close="showActionSheet = false"
+      >
+      </u-action-sheet>
+    </view>
+  </view>
+</template>
+
+<script>
+import { mapGetters, mapActions } from "vuex";
+import { getPurePath, html2Text } from "@/util/common";
+import { offlinePushInfo } from "@/util/imCommon";
+import {
+  ChatingFooterActionTypes,
+  UpdateMessageTypes,
+} from "@/constant";
+import IMSDK, {
+  IMMethods,
+  MessageStatus,
+  MessageType,
+} from "openim-uniapp-polyfill";
+import UParse from "@/components/gaoyia-parse/parse.vue";
+import CustomEditor from "./CustomEditor.vue";
+import ChatingActionBar from "./ChatingActionBar.vue";
+
+const needClearTypes = [MessageType.TextMessage];
+
+const albumChoose = [
+  {
+    name: "图片",
+    type: ChatingFooterActionTypes.Album,
+    idx: 0,
+  },
+  {
+    name: "拍照",
+    type: ChatingFooterActionTypes.Camera,
+    idx: 1,
+  },
+];
+
+export default {
+  components: {
+    CustomEditor,
+    ChatingActionBar,
+    UParse,
+  },
+  props: {
+    footerOutsideFlag: Number,
+  },
+  data() {
+    return {
+      customEditorCtx: null,
+      inputHtml: "",
+      actionBarVisible: false,
+      isInputFocus: false,
+      actionSheetMenu: [],
+      showActionSheet: false,
+    };
+  },
+  computed: {
+    ...mapGetters([
+      "storeCurrentConversation",
+      "storeCurrentGroup",
+      "storeBlackList",
+    ]),
+    hasContent() {
+      return html2Text(this.inputHtml) !== "";
+    },
+  },
+  watch: {
+    footerOutsideFlag(newVal) {
+      this.onClickActionBarOutside();
+    },
+  },
+  mounted() {
+    this.setKeyboardListener();
+  },
+  beforeDestroy() {
+    this.disposeKeyboardListener();
+  },
+  methods: {
+    ...mapActions("message", ["pushNewMessage", "updateOneMessage"]),
+    async createTextMessage() {
+      let message = "";
+      const text = html2Text(this.inputHtml);
+      message = await IMSDK.asyncApi(
+            IMMethods.CreateTextMessage,
+            IMSDK.uuid(),
+            text
+          );
+          console.log(message);
+      return message;
+    },
+    async sendTextMessage() {
+      if (!this.hasContent) return;
+      const message = await this.createTextMessage();
+      this.sendMessage(message);
+    },
+    sendMessage(message) {
+      this.pushNewMessage(message);
+      if (needClearTypes.includes(message.contentType)) {
+        this.customEditorCtx.clear();
+      }
+      this.$emit("scrollToBottom");
+      IMSDK.asyncApi(IMMethods.SendMessage, IMSDK.uuid(), {
+        recvID: this.storeCurrentConversation.userID,
+        groupID: this.storeCurrentConversation.groupID,
+        message,
+        offlinePushInfo,
+      })
+        .then(({ data }) => {
+          this.updateOneMessage({
+            message: data,
+            isSuccess: true,
+          });
+        })
+        .catch(({ data, errCode, errMsg }) => {
+          this.updateOneMessage({
+            message: data,
+            type: UpdateMessageTypes.KeyWords,
+            keyWords: [
+              {
+                key: "status",
+                value: MessageStatus.Failed,
+              },
+              {
+                key: "errCode",
+                value: errCode,
+              },
+            ],
+          });
+        });
+    },
+
+    // action
+    onClickActionBarOutside() {
+      if (this.actionBarVisible) {
+        this.actionBarVisible = false;
+      }
+    },
+    updateActionBar() {
+      this.actionBarVisible = !this.actionBarVisible;
+    },
+    editorReady(e) {
+      this.customEditorCtx = e.context;
+      this.customEditorCtx.clear();
+    },
+    editorFocus() {
+      this.isInputFocus = true;
+      this.$emit("scrollToBottom");
+    },
+    editorBlur() {
+      this.isInputFocus = false;
+    },
+    editorInput(e) {
+      this.inputHtml = e.detail.html;
+    },
+    prepareMediaMessage(type) {
+      if (type === ChatingFooterActionTypes.Album) {
+        this.actionSheetMenu = [...albumChoose];
+      }
+      this.showActionSheet = true;
+    },
+
+    // from comp
+    batchCreateImageMesage(paths) {
+      paths.forEach(async (path) => {
+        const message = await IMSDK.asyncApi(
+          IMMethods.CreateImageMessageFromFullPath,
+          IMSDK.uuid(),
+          getPurePath(path)
+        );
+        this.sendMessage(message);
+      });
+    },
+    selectClick({ idx }) {
+      if (idx === 0) {
+        this.chooseOrShotImage(["album"]).then((paths) =>
+          this.batchCreateImageMesage(paths)
+        );
+      } else {
+        this.chooseOrShotImage(["camera"]).then((paths) =>
+          this.batchCreateImageMesage(paths)
+        );
+      }
+    },
+    chooseOrShotImage(sourceType) {
+      return new Promise((resolve, reject) => {
+        uni.chooseImage({
+          count: 9,
+          sizeType: ["compressed"],
+          sourceType,
+          success: function ({ tempFilePaths }) {
+            resolve(tempFilePaths);
+          },
+          fail: function (err) {
+            console.log(err);
+            reject(err);
+          },
+        });
+      });
+    },
+
+    // keyboard
+    keyboardChangeHander({ height }) {
+      if (height > 0) {
+        if (this.actionBarVisible) {
+          this.actionBarVisible = false;
+        }
+      }
+    },
+    setKeyboardListener() {
+      uni.onKeyboardHeightChange(this.keyboardChangeHander);
+    },
+    disposeKeyboardListener() {
+      uni.offKeyboardHeightChange(this.keyboardChangeHander);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.custom_editor {
+  img {
+    vertical-align: sub;
+  }
+}
+
+.forbidden_footer {
+  width: 100%;
+  height: 112rpx;
+  color: #8e9ab0;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  background: #f0f2f6;
+}
+
+.chat_footer {
+  display: flex;
+  align-items: center;
+  // background-color: #e9f4ff;
+  background: #f0f2f6;
+  // height: 50px;
+  max-height: 120px;
+  padding: 24rpx 20rpx;
+
+  .input_content {
+    flex: 1;
+    min-height: 30px;
+    max-height: 120px;
+    margin: 0 24rpx;
+    border-radius: 8rpx;
+    position: relative;
+
+    .record_btn {
+      // background-color: #3c9cff;
+      background: #fff;
+      color: black;
+      height: 30px;
+      font-size: 24rpx;
+    }
+  }
+
+  .quote_message {
+    @include vCenterBox();
+    justify-content: space-between;
+    margin-top: 12rpx;
+    padding: 8rpx;
+    // padding-top: 20rpx;
+    border-radius: 6rpx;
+    background-color: #fff;
+    color: #666;
+
+    .content {
+      /deep/ uni-view {
+        @include ellipsisWithLine(2);
+      }
+    }
+  }
+
+  .footer_action_area {
+    display: flex;
+    align-items: center;
+
+    .emoji_action {
+      margin-right: 24rpx;
+    }
+
+    image {
+      width: 26px;
+      height: 26px;
+    }
+  }
+
+  .send_btn {
+    height: 30px;
+    line-height: 30px;
+    background-color: #4a9cfc;
+    padding: 0 8px;
+    border-radius: 4px;
+    color: #fff;
+  }
+}
+</style>

pages/conversation/chating/components/ChatingHeader.vue

@@ -0,0 +1,294 @@
+<template>
+  <u-navbar @click="click" placeholder class="chating_header">
+    <view @click="routeBack" class="u-nav-slot" slot="left">
+      <img
+        class="back_icon"
+        width="12"
+        height="20"
+        src="static/images/common_left_arrow.png"
+        alt=""
+        srcset=""
+      />
+    </view>
+    <view class="u-nav-slot" slot="center">
+      <view class="chating_info" :class="{ chating_info_single: isSingle }">
+        <view class="conversation_info">
+          <view class="title">{{ storeCurrentConversation.showName }}</view>
+          <view v-if="!isSingle && !isNotify" class="sub_title"
+            >{{ groupMemberCount }}
+          </view>
+        </view>
+      </view>
+
+    </view>
+    <view class="u-nav-slot" slot="right">
+      <view class="right_action">
+        <u-icon
+          @click="goSetting"
+          class="action_item"
+          name="more-dot-fill"
+          size="23"
+          color="#0C1C33"
+        >
+        </u-icon>
+      </view>
+    </view>
+  </u-navbar>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+import { SessionType } from "openim-uniapp-polyfill";
+import MyAvatar from "@/components/MyAvatar/index.vue";
+
+export default {
+  name: "ChatingHeader",
+  components: {
+    MyAvatar,
+  },
+  props: {
+    
+  },
+  data() {
+    return {
+      showMoreMember: false,
+      joinLock: false,
+    };
+  },
+  computed: {
+    ...mapGetters([
+      "storeCurrentConversation",
+      "storeCurrentGroup",
+      "storeCurrentMemberInGroup",
+      "storeSelfInfo",
+    ]),
+    isSingle() {
+      return (
+        this.storeCurrentConversation.conversationType === SessionType.Single
+      );
+    },
+    isNotify() {
+      return (
+        this.storeCurrentConversation.conversationType ===
+        SessionType.Notification
+      );
+    },
+    groupMemberCount() {
+      return `(${this.storeCurrentGroup?.memberCount ?? 0})`;
+    },
+    canGoSetting() {
+      if (this.isSingle) {
+        return true;
+      }
+      return (
+        this.storeCurrentMemberInGroup.groupID ===
+        this.storeCurrentConversation.groupID
+      );
+    },
+  },
+  methods: {
+    click(e) {
+      this.$emit("click", e);
+    },
+    routeBack() {
+      uni.switchTab({
+        url: "/pages/conversation/conversationList/index",
+      });
+    },
+    goSetting() {
+      const url = this.isSingle
+        ? "/pages/conversation/singleSettings/index"
+        : "/pages/conversation/groupSettings/index";
+      uni.navigateTo({
+        url,
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.chating_header {
+  border: 2rpx solid #e8eaef;
+  /deep/ .u-navbar__content__left {
+    padding: 0;
+  }
+
+  .back_icon {
+    padding: 24rpx;
+    margin-left: 20rpx;
+  }
+
+  .chating_info {
+    @include vCenterBox();
+    flex-direction: column;
+
+    &_single {
+      margin-bottom: 24rpx;
+    }
+
+    .conversation_info {
+      flex-direction: row;
+      justify-content: center;
+      @include vCenterBox();
+
+      .title {
+        @include nomalEllipsis();
+        max-width: 280rpx;
+        font-size: 14px;
+        font-weight: 500;
+      }
+
+      .sub_title {
+        margin-left: 8rpx;
+      }
+    }
+
+    .online_state {
+      @include vCenterBox();
+      flex-direction: row;
+      margin-top: 6rpx;
+      // position: absolute;
+      // top: 2px;
+      // left: 50%;
+      // transform: translateX(-50%);
+      font-size: 20rpx;
+      color: #999;
+
+      .dot {
+        background-color: #10cc64;
+        width: 12rpx;
+        height: 12rpx;
+        border-radius: 50%;
+        margin-right: 12rpx;
+      }
+
+      .online_str {
+        @include nomalEllipsis();
+        max-width: 280rpx;
+      }
+    }
+  }
+
+  /deep/ .u-navbar__content__right {
+    padding: 0;
+  }
+
+  .right_action {
+    @include vCenterBox();
+    flex-direction: row;
+    margin-right: 24rpx;
+
+    .action_item {
+      padding: 12rpx;
+    }
+
+    .u-icon {
+      margin-left: 12rpx;
+    }
+  }
+}
+
+.group_announcement_tab {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 80%;
+  position: absolute;
+  left: 6%;
+  // bottom: -44px;
+  margin-top: 40rpx;
+  padding: 14rpx 32rpx;
+  background-color: #f0f6ff;
+  border-radius: 12rpx;
+
+  .announcement_header {
+    @include vCenterBox();
+    width: 100%;
+    flex-direction: row;
+    justify-content: space-between;
+    margin-bottom: 16rpx;
+
+    &_left {
+      @include vCenterBox();
+    }
+  }
+
+  .announcement_content {
+    @include ellipsisWithLine(2);
+    margin: 0 12rpx;
+    font-size: 24rpx;
+    color: #617183;
+  }
+
+  image {
+    width: 16px;
+    height: 16px;
+    min-width: 16px;
+  }
+}
+
+.group_calling_tab {
+  position: absolute;
+  left: 0;
+  width: 80%;
+  margin-top: 12px;
+  margin-left: 5%;
+  padding: 24rpx;
+  background-color: #f4f9ff;
+  border-radius: 8rpx;
+  color: #5496eb;
+  font-size: 24rpx;
+
+  .base_row {
+    display: flex;
+    align-items: center;
+
+    image {
+      width: 10px;
+      height: 10px;
+    }
+
+    text {
+      margin-left: 16rpx;
+    }
+
+    .arrow {
+      width: 9px;
+      height: 6px;
+      position: absolute;
+      right: 24rpx;
+    }
+  }
+
+  .member_row {
+    display: flex;
+    // justify-content: space-between;
+    flex-wrap: wrap;
+    padding: 24rpx 28rpx;
+    margin-top: 24rpx;
+    background-color: #fff;
+    border-bottom: 1px solid rgba(151, 151, 151, 0.16);
+    border-top-left-radius: 8rpx;
+    border-top-right-radius: 8rpx;
+
+    .u-avatar {
+      margin-bottom: 16rpx;
+
+      &:not(:nth-child(6n)) {
+        margin-right: calc(6% / 2);
+      }
+    }
+  }
+
+  .action_row {
+    display: flex;
+    justify-content: center;
+    padding: 24rpx;
+    background-color: #fff;
+    font-size: 28rpx;
+    border-bottom-left-radius: 8rpx;
+    border-bottom-right-radius: 8rpx;
+  }
+}
+</style>

pages/conversation/chating/components/ChatingList.vue

@@ -0,0 +1,256 @@
+<template>
+  <scroll-view
+    :scroll-with-animation="withAnimation"
+    @click="click"
+    id="scroll_view"
+    :style="{
+      height: '1px'
+    }"
+    @scroll="throttleScroll"
+    :scroll-top="scrollTop"
+    scroll-y
+    :scroll-into-view="scrollIntoView"
+    upper-threshold="250"
+    @scrolltoupper="scrolltoupper"
+  >
+    <view id="scroll_wrap">
+      <u-loadmore nomoreText="" :status="loadMoreStatus" />
+      <view
+        v-for="item in storeHistoryMessageList"
+        :key="item.clientMsgID"
+      >
+        <message-item-render
+          @messageItemRender="messageItemRender"
+          :source="item"
+          :isSender="item.sendID === storeCurrentUserID"
+        />
+      </view>
+      <view
+        style="visibility: hidden; height: 12px"
+        id="auchormessage_bottom_item"
+      ></view>
+    </view>
+  </scroll-view>
+</template>
+
+<script>
+import { mapGetters, mapActions } from "vuex";
+import MessageItemRender from "./MessageItem/index.vue";
+
+export default {
+  name: "",
+  components: {
+    MessageItemRender,
+  },
+  props: {},
+  data() {
+    return {
+      scrollIntoView: "",
+      scrollWithAnimation: false,
+      scrollTop: 0,
+      old: {
+      	scrollTop: 0
+      },
+      initFlag: true,
+      isOverflow: false,
+      needScoll: true,
+      withAnimation: false,
+      messageLoadState: {
+        loading: false,
+      },
+    };
+  },
+  computed: {
+    ...mapGetters([
+      "storeCurrentConversation",
+      "storeHistoryMessageList",
+      "storeHasMoreMessage",
+      "storeCurrentUserID",
+      "storeSelfInfo",
+    ]),
+    loadMoreStatus() {
+      if (!this.storeHasMoreMessage) {
+        return "nomore";
+      }
+      return this.messageLoadState.loading ? "loading" : "loadmore";
+    },
+  },
+  mounted() {
+    this.loadMessageList();
+  },
+  methods: {
+    ...mapActions("message", ["getHistoryMesageList"]),
+    messageItemRender(clientMsgID) {
+      if (
+        this.initFlag &&
+        clientMsgID ===
+          this.storeHistoryMessageList[this.storeHistoryMessageList.length - 1]
+            .clientMsgID
+      ) {
+        this.initFlag = false;
+        setTimeout(() => this.scrollToBottom(true), 200);
+        this.checkInitHeight();
+      }
+    },
+    async loadMessageList(isLoadMore = false) {
+      this.messageLoadState.loading = true;
+      const lastMsgID = this.storeHistoryMessageList[0]?.clientMsgID;
+      const options = {
+        conversationID: this.storeCurrentConversation.conversationID,
+        count: 20,
+        startClientMsgID: this.storeHistoryMessageList[0]?.clientMsgID ?? "",
+        viewType: 0,
+      };
+      try {
+        const { emptyFlag } =
+          await this.getHistoryMesageList(options);
+        if (emptyFlag) {
+          this.$emit("initSuccess");
+        }
+      } catch (e) {
+        console.log(e);
+        //TODO handle the exception
+      }
+      this.$nextTick(function () {
+        if (isLoadMore && lastMsgID) {
+          this.scrollToAnchor(`auchor${lastMsgID}`);
+        }
+        this.messageLoadState.loading = false;
+      });
+    },
+    click(e) {
+      this.$emit("click", e);
+    },
+    onScroll(event) {
+      const { scrollHeight, scrollTop } = event.target;
+      this.old.scrollTop = scrollTop
+      this.needScoll =
+        scrollHeight - scrollTop < uni.getWindowInfo().windowHeight * 1.2;
+    },
+    throttleScroll(event) {
+      uni.$u.throttle(() => this.onScroll(event), 150);
+    },
+    scrolltoupper() {
+      if (!this.messageLoadState.loading && this.storeHasMoreMessage) {
+        this.loadMessageList(true);
+      }
+    },
+    scrollToBottom(isInit = false, isRecv = false) {
+      if (isRecv && !this.needScoll) {
+        return;
+      }
+
+      if (!isInit) {
+        this.withAnimation = true;
+        setTimeout(() => (this.withAnimation = false), 100);
+      }
+
+      this.$nextTick(() => {
+        uni
+          .createSelectorQuery()
+          .in(this)
+          .select("#scroll_wrap")
+          .boundingClientRect((res) => {
+            // let top = res.height - this.scrollViewHeight;
+            // if (top > 0) {
+            this.scrollTop = this.old.scrollTop
+            this.$nextTick(() => this.scrollTop = res.height);
+            if (isInit) {
+              this.$emit("initSuccess");
+            }
+            // }
+          })
+          .exec();
+      });
+    },
+    scrollToAnchor(auchor) {
+      this.$nextTick(function () {
+        this.scrollIntoView = auchor;
+      });
+    },
+    checkInitHeight() {
+      this.getEl("#scroll_view").then(({ height }) => {
+        this.bgHeight = `${height}px`;
+      });
+    },
+    getEl(el) {
+      return new Promise((resolve) => {
+        const query = uni.createSelectorQuery().in(this);
+        query
+          .select(el)
+          .boundingClientRect((data) => {
+            resolve(data);
+          })
+          .exec();
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+#scroll_view {
+  flex: 1;
+  background-repeat: no-repeat;
+  position: relative;
+}
+
+.watermark-view {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+}
+
+.watermark {
+  font-size: 16px; /* 水印文字大小 */
+  color: #f0f2f6; /* 水印文字颜色，使用透明度控制可见度 */
+  position: absolute; /* 水印相对定位 */
+  transform: rotate(-45deg);
+  pointer-events: none; /* 防止水印文字干扰交互 */
+}
+
+.uni-scroll-view {
+  position: relative;
+}
+
+.new_message_flag {
+  position: sticky;
+  background: #ffffff;
+  box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.1);
+  border-radius: 14px;
+  padding: 4px 8px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  bottom: 12px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: fit-content;
+  font-size: 24rpx;
+  color: #006aff;
+}
+
+.time_gap_line {
+  position: relative;
+  padding: 0 10vw 12rpx;
+  text-align: center;
+  // font-size: 24rpx;
+  font-size: 0.93rem;
+  color: #999;
+}
+
+.fade-leave,
+.fade-enter-to {
+  opacity: 1;
+}
+
+.fade-leave-active,
+.fade-enter-active {
+  transition: all 0.3s;
+}
+
+.fade-leave-to,
+.fade-enter {
+  opacity: 0;
+}
+</style>

pages/conversation/chating/components/MessageItem/ErrorMessageRender.vue

@@ -0,0 +1,17 @@
+<template>
+  <view class="text_message_container bg_container">
+    <view> [暂未支持的消息类型] </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: "ErrorMessagegRender",
+  components: {},
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style lang="scss" scoped></style>

pages/conversation/chating/components/MessageItem/MediaMessageRender.vue

@@ -0,0 +1,81 @@
+<template>
+  <view class="media_message_container" @click="clickMediaItem">
+    <u--image
+      @load="onLoaded"
+      :showLoading="true"
+      width="120"
+      :height="maxHeight"
+      mode="widthFix"
+      :src="getImgUrl"
+      @click="clickMediaItem"
+    >
+      <template v-slot:loading>
+        <u-loading-icon color="red"></u-loading-icon>
+      </template>
+    </u--image>
+  </view>
+</template>
+
+<script>
+export default {
+  name: "",
+  props: {
+    message: Object,
+  },
+  data() {
+    return {
+      loadingWidth: "120px",
+    };
+  },
+  computed: {
+    getImgUrl() {
+      return (
+        this.message.pictureElem.snapshotPicture?.url ??
+        this.message.pictureElem.sourcePath
+      );
+    },
+    maxHeight() {
+      const imageHeight = this.message.pictureElem.sourcePicture.height;
+      const imageWidth = this.message.pictureElem.sourcePicture.width;
+      const aspectRatio = imageHeight / imageWidth;
+      return 120 * aspectRatio;
+    },
+  },
+  methods: {
+    clickMediaItem() {
+      uni.previewImage({
+        current: 0,
+        urls: [this.message.pictureElem.sourcePicture.url],
+        indicator: "none",
+      });
+    },
+    onLoaded() {
+      this.loadingWidth = "auto";
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.media_message_container {
+  position: relative;
+  border-radius: 16rpx;
+  overflow: hidden;
+
+  .play_icon {
+    width: 48px;
+    height: 48px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  .video_duration {
+    position: absolute;
+    bottom: 12rpx;
+    right: 24rpx;
+    color: #fff;
+  }
+}
+</style>

pages/conversation/chating/components/MessageItem/TextMessageRender.vue

@@ -0,0 +1,35 @@
+<template>
+  <view class="text_message_container bg_container">
+    <mp-html
+      :previewImg="false"
+      :showImgMenu="false"
+      :lazyLoad="false"
+      :content="getContent"
+    />
+  </view>
+</template>
+
+<script>
+import { parseBr } from "@/util/common";
+
+export default {
+  name: "TextMessageRender",
+  components: {},
+  props: {
+    message: Object,
+  },
+  computed: {
+    getContent() {
+      return parseBr(this.message.textElem?.content);
+    },
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    
+  },
+};
+</script>
+
+<style lang="scss" scoped></style>

pages/conversation/chating/components/MessageItem/index.vue

@@ -0,0 +1,311 @@
+<template>
+  <view
+    v-if="!getNoticeContent"
+    :id="`auchor${source.clientMsgID}`"
+    class="message_item"
+    :class="{ message_item_self: isSender, message_item_active: isActive }"
+  >
+    <my-avatar
+      size="42"
+      :desc="source.senderNickname"
+      :src="source.senderFaceUrl"
+    />
+    <view class="message_container">
+      <view
+        class="message_sender"
+        :style="{ 'flex-direction': !isSender ? 'row-reverse' : 'row' }"
+      >
+        <text>{{ formattedMessageTime }}</text>
+        <text style="margin-left: 2rpx; margin-right: 2rpx">{{ "" }}</text>
+        <text v-if="!isSingle">{{ source.senderNickname }}</text>
+      </view>
+      <view class="message_send_state_box">
+        <view
+          style="
+            height: 100%;
+            display: flex;
+            justify-items: center;
+            align-items: center;
+          "
+        >
+          <view class="message_send_state">
+            <u-loading-icon v-if="showSending && !isPreview" />
+            <image
+              v-if="isFailedMessage && !isPreview"
+              src="@/static/images/chating_message_failed.png"
+            />
+          </view>
+        </view>
+        <view class="message_content_wrap message_content_wrap_shadow">
+          <text-message-render
+            v-if="showTextRender"
+            :message="source"
+          />
+          <media-message-render v-else-if="showMediaRender" :message="source" />
+          <error-message-render v-else />
+        </view>
+      </view>
+    </view>
+  </view>
+
+  <view
+    v-else
+    class="notice_message_container"
+    :id="`auchor${source.clientMsgID}`"
+  >
+    <text>{{ getNoticeContent }}</text>
+  </view>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+import {
+  MessageStatus,
+  MessageType,
+  SessionType,
+} from "openim-uniapp-polyfill";
+import MyAvatar from "@/components/MyAvatar/index.vue";
+import TextMessageRender from "./TextMessageRender.vue";
+import MediaMessageRender from "./MediaMessageRender.vue";
+import ErrorMessageRender from "./ErrorMessageRender.vue";
+import { noticeMessageTypes } from "@/constant";
+import { tipMessaggeFormat, formatMessageTime } from "@/util/imCommon";
+
+const textRenderTypes = [MessageType.TextMessage];
+
+const mediaRenderTypes = [MessageType.PictureMessage];
+
+export default {
+  components: {
+    MyAvatar,
+    TextMessageRender,
+    MediaMessageRender,
+    ErrorMessageRender,
+  },
+  props: {
+    source: Object,
+    isSender: {
+      type: Boolean,
+      default: false,
+    },
+    isPreview: Boolean,
+    isActive: Boolean,
+  },
+  data() {
+    return {};
+  },
+  computed: {
+    ...mapGetters([
+      "storeCurrentConversation",
+      "storeSelfInfo",
+    ]),
+    isSingle() {
+      return (
+        this.storeCurrentConversation.conversationType === SessionType.Single
+      );
+    },
+    formattedMessageTime() {
+      return formatMessageTime(this.source.sendTime);
+    },
+    showTextRender() {
+      return textRenderTypes.includes(this.source.contentType);
+    },
+    showMediaRender() {
+      return mediaRenderTypes.includes(this.source.contentType);
+    },
+    getNoticeContent() {
+      const isNoticeMessage = noticeMessageTypes.includes(
+        this.source.contentType
+      );
+      return !isNoticeMessage
+        ? ""
+        : tipMessaggeFormat(
+            this.source,
+            this.$store.getters.storeCurrentUserID
+          );
+    },
+    isSuccessMessage() {
+      return this.source.status === MessageStatus.Succeed;
+    },
+    isFailedMessage() {
+      return this.source.status === MessageStatus.Failed;
+    },
+    showSending() {
+      return this.source.status === MessageStatus.Sending && !this.sendingDelay;
+    },
+  },
+  mounted() {
+    this.$emit("messageItemRender", this.source.clientMsgID);
+    this.setSendingDelay();
+  },
+  methods: {
+    setSendingDelay() {
+      if (this.source.status === MessageStatus.Sending) {
+        setTimeout(() => {
+          this.sendingDelay = false;
+        }, 2000);
+      }
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.message_item {
+  display: flex;
+  flex-direction: row;
+  padding: 16rpx 44rpx;
+  // padding-top: 48rpx;
+  position: relative;
+
+  .check_wrap {
+    @include centerBox();
+    box-sizing: border-box;
+    width: 40rpx;
+    min-width: 40rpx;
+    height: 40rpx;
+    min-height: 40rpx;
+    border: 2px solid #979797;
+    border-radius: 50%;
+    margin-top: 16rpx;
+    margin-right: 24rpx;
+
+    &_active {
+      background-color: #1d6bed;
+      border: none;
+    }
+
+    &_disabled {
+      background-color: #c8c9cc;
+    }
+  }
+
+  .message_container {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    margin-left: 20rpx;
+    // text-align: start;
+    max-width: 80%;
+    position: relative;
+
+    .message_sender {
+      @include nomalEllipsis();
+      display: flex;
+      max-width: 480rpx;
+      // font-size: 24rpx;
+      font-size: 0.85rem;
+      color: #666;
+      margin-bottom: 6rpx;
+    }
+
+    .message_content_wrap {
+      @include vCenterBox();
+      text-align: start;
+      // font-size: 14px;
+      color: $uni-text-color;
+      width: fit-content;
+      max-width: 100%;
+
+      .bg_container {
+        padding: 16rpx 24rpx;
+        border-radius: 0rpx 12rpx 12rpx 12rpx;
+        background-color: #f0f0f0;
+      }
+    }
+  }
+
+  .message_send_state_box {
+    display: flex;
+    flex-direction: row-reverse;
+  }
+
+  .message_send_state {
+    @include centerBox();
+    margin-left: 12rpx;
+    // margin-top: 48rpx;
+    width: 48rpx;
+    height: 48rpx;
+
+    .read_limit_count {
+      // font-size: 24rpx;
+      font-size: 0.85rem;
+      color: #999;
+    }
+
+    image {
+      width: 16px;
+      height: 16px;
+    }
+  }
+
+  /deep/.emoji_display {
+    width: 24px;
+    height: 18px;
+    vertical-align: sub;
+  }
+
+  &_self {
+    flex-direction: row-reverse;
+
+    .check_wrap {
+      margin-right: 0;
+      margin-left: 24rpx;
+    }
+
+    .message_container {
+      margin-left: 0;
+      margin-right: 20rpx;
+      // text-align: end;
+      align-items: flex-end;
+
+      .message_content_wrap {
+        flex-direction: row-reverse;
+
+        .bg_container {
+          border-radius: 12rpx 0 12rpx 12rpx;
+          background-color: #dcebfe !important;
+        }
+      }
+    }
+
+    .message_send_state_box {
+      flex-direction: row;
+    }
+
+    .message_send_state {
+      margin-left: 0rpx;
+      margin-right: 12rpx;
+    }
+  }
+
+  &_active {
+    background-color: #fdf5e9;
+  }
+}
+
+.notice_message_container {
+  @include ellipsisWithLine(2);
+  text-align: center;
+  margin: 24rpx 48rpx;
+  // font-size: 24rpx;
+  font-size: 0.85rem;
+  color: #999;
+  position: relative;
+}
+
+.fade-leave,
+.fade-enter-to {
+  opacity: 1;
+}
+
+.fade-leave-active,
+.fade-enter-active {
+  transition: all 0.5s;
+}
+
+.fade-leave-to,
+.fade-enter {
+  opacity: 0;
+}
+</style>

pages/conversation/chating/index.vue

@@ -0,0 +1,151 @@
+<template>
+  <view :style="{ backgroundColor: '#f8f8f8' }" class="chating_container">
+    <chating-header
+      @click="pageClick"
+      ref="chatingHeaderRef"
+    />
+    <chating-list
+      @click="pageClick"
+      ref="chatingListRef"
+      @initSuccess="initSuccess"
+    />
+    <chating-footer
+      ref="chatingFooterRef"
+      :footerOutsideFlag="footerOutsideFlag"
+      @scrollToBottom="scrollToBottom"
+    />
+    <u-loading-page :loading="initLoading"></u-loading-page>
+  </view>
+</template>
+
+<script>
+import { mapActions } from "vuex";
+import {
+  PageEvents,
+} from "@/constant";
+import ChatingHeader from "./components/ChatingHeader.vue";
+import ChatingFooter from "./components/ChatingFooter/index.vue";
+import ChatingList from "./components/ChatingList.vue";
+import { markConversationAsRead } from "@/util/imCommon";
+
+export default {
+  components: {
+    ChatingHeader,
+    ChatingFooter,
+    ChatingList,
+  },
+  data() {
+    return {
+      listHeight: 0,
+      footerOutsideFlag: 0,
+      initLoading: true,
+      back2Tab: false,
+    };
+  },
+  onLoad(options) {
+    console.log("onload");
+    this.setPageListener();
+    if (options?.back2Tab) {
+      this.back2Tab = JSON.parse(options.back2Tab);
+    }
+  },
+  onUnload() {
+    console.log("unload");
+    this.disposePageListener();
+    markConversationAsRead(
+      {
+        ...this.$store.getters.storeCurrentConversation,
+      },
+      true
+    );
+    this.resetConversationState();
+    this.resetMessageState();
+  },
+  methods: {
+    ...mapActions("message", ["resetMessageState", "deleteMessages"]),
+    ...mapActions("conversation", ["resetConversationState"]),
+    scrollToBottom(isRecv = false) {
+      this.$refs.chatingListRef.scrollToBottom(false, isRecv);
+    },
+    pageClick(e) {
+      this.footerOutsideFlag += 1;
+    },
+    initSuccess() {
+      console.log("initSuccess");
+      this.initLoading = false;
+    },
+
+    // page event
+    setPageListener() {
+      uni.$on(PageEvents.ScrollToBottom, this.scrollToBottom);
+    },
+    disposePageListener() {
+      uni.$off(PageEvents.ScrollToBottom, this.scrollToBottom);
+    },
+  },
+  onBackPress() {
+    uni.switchTab({
+      url: "/pages/conversation/conversationList/index",
+    });
+    return true;
+  },
+  beforeDestroy() {
+    uni.switchTab({
+      url: "/pages/conversation/conversationList/index",
+    });
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.chating_container {
+  @include colBox(false);
+  height: 100vh;
+  overflow: hidden;
+  background-color: #fff !important;
+  position: relative;
+
+  .watermark {
+    font-size: 16px; /* 水印文字大小 */
+    color: rgba(0, 0, 0, 0.2); /* 水印文字颜色，使用透明度控制可见度 */
+    position: absolute; /* 水印相对定位 */
+    transform: rotate(-45deg);
+    pointer-events: none; /* 防止水印文字干扰交互 */
+
+    /* 为不同的水印元素设置不同的偏移，以避免重叠 */
+    // transform-origin: top right;
+    // margin-top: 20px;
+    // margin-right: 20px;
+  }
+
+  // ::before {
+  //   content: "Your Watermark Text"; /* 替换为你想要的水印文字 */
+  //   font-size: 16px; /* 水印文字大小 */
+  //   color: rgba(0, 0, 0, 0.2); /* 水印文字颜色，使用透明度控制可见度 */
+  //   position: absolute; /* 水印相对定位 */
+  //   top: 20px; /* 距离顶部的距离 */
+  //   right: 20px; /* 距离右侧的距离 */
+  //   transform: rotate(-45deg); /* 将水印旋转为倾斜状态 */
+  //   pointer-events: none; /* 防止水印文字干扰交互 */
+  //   z-index: -1; /* 将水印置于底层 */
+  // }
+
+  .mutiple_action_container {
+    display: flex;
+    border-top: 1px solid #eaebed;
+    background: #f0f2f6;
+    justify-content: space-evenly;
+    padding: 12px 24px;
+
+    .action_item {
+      @include centerBox();
+      flex-direction: column;
+
+      image {
+        width: 48px;
+        height: 48px;
+      }
+    }
+  }
+}
+</style>

pages/conversation/conversationList/components/ChatHeader.vue

@@ -0,0 +1,329 @@
+<template>
+  <view class="chat_header">
+    <view class="self_info">
+      <my-avatar
+        :src="storeSelfInfo.faceURL"
+        :desc="storeSelfInfo.nickname"
+        size="46"
+      />
+      <view class="self_info_desc">
+        <view class="user_state">
+          <text class="nickname">{{ storeSelfInfo.nickname }}</text>
+          <view v-if="!storeReinstall">
+            <view class="tag" v-if="storeIsSyncing">
+              <img
+                class="loading"
+                style="height: 24rpx; width: 24rpx"
+                src="static/images/loading.png"
+                alt=""
+              />
+              <text class="status">同步中</text>
+            </view>
+            <view class="tag" v-if="connectStart == 0">
+              <img
+                class="loading"
+                style="height: 24rpx; width: 24rpx"
+                src="static/images/loading.png"
+                alt=""
+              />
+              <text class="status">连接中</text>
+            </view>
+            <view class="err-tag" v-if="connectStart == -1">
+              <img
+                style="height: 24rpx; width: 24rpx"
+                src="static/images/sync_error.png"
+                alt=""
+              />
+              <text class="status">连接失败</text>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+    <view class="right_action">
+      <view class="call_icon"> </view>
+      <view @click="showMore" class="more_icon">
+        <image src="@/static/images/common_circle_add.png"></image>
+      </view>
+      <u-overlay
+        :show="moreMenuVisible"
+        @click="moreMenuVisible = false"
+        opacity="0"
+      >
+        <view
+          :style="{ top: popMenuPosition.top, right: popMenuPosition.right }"
+          class="more_menu"
+        >
+          <view
+            @click="clickMenu(item)"
+            v-for="item in moreMenus"
+            :key="item.idx"
+            class="menu_item"
+          >
+            <image :src="item.icon" mode=""></image>
+            <text>{{ item.title }}</text>
+          </view>
+        </view>
+      </u-overlay>
+    </view>
+  </view>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+import MyAvatar from "@/components/MyAvatar/index.vue";
+import IMSDK from "openim-uniapp-polyfill";
+export default {
+  name: "ChatHeader",
+  components: {
+    MyAvatar,
+  },
+  props: {},
+  data() {
+    return {
+      connectStart: -2,
+      moreMenuVisible: false,
+      popMenuPosition: {
+        top: 0,
+        right: 0,
+      },
+      moreMenus: [
+        {
+          idx: 1,
+          title: "添加好友",
+          icon: require("static/images/more_add_friend.png"),
+        },
+        {
+          idx: 2,
+          title: "添加群聊",
+          icon: require("static/images/more_add_group.png"),
+        },
+        {
+          idx: 3,
+          title: "创建群聊",
+          icon: require("static/images/more_create_group.png"),
+        },
+      ],
+    };
+  },
+  computed: {
+    ...mapGetters(["storeSelfInfo", "storeIsSyncing", "storeReinstall"]),
+  },
+  mounted() {
+    this.subscribeAll();
+  },
+  beforeDestroy() {
+    this.unsubscribeAll();
+  },
+  methods: {
+    setStateStart() {
+      this.connectStart = 0;
+    },
+    setStateSuccess() {
+      this.connectStart = 1;
+    },
+    setStateError() {
+      this.connectStart = -1;
+    },
+    subscribeAll() {
+      IMSDK.subscribe(IMSDK.IMEvents.OnConnecting, this.setStateStart);
+      IMSDK.subscribe(IMSDK.IMEvents.OnConnectSuccess, this.setStateSuccess);
+      IMSDK.subscribe(IMSDK.IMEvents.OnConnectFailed, this.setStateError);
+    },
+    unsubscribeAll() {
+      IMSDK.unsubscribe(IMSDK.IMEvents.OnConnecting, this.setStateStart);
+      IMSDK.unsubscribe(IMSDK.IMEvents.OnConnectSuccess, this.setStateSuccess);
+      IMSDK.unsubscribe(IMSDK.IMEvents.OnConnectFailed, this.setStateError);
+    },
+    clickMenu({ idx }) {
+      switch (idx) {
+        case 1:
+        case 2:
+          uni.navigateTo({
+            url: `/pages/common/searchUserOrGroup/index?isSearchGroup=${
+              idx === 2
+            }`,
+          });
+          break;
+        case 3:
+          uni.navigateTo({
+            url: `/pages/common/createGroup/index`,
+          });
+          break;
+        default:
+          break;
+      }
+    },
+    async showMore() {
+      const { right, bottom } = await this.getEl(".more_icon");
+      this.popMenuPosition.right =
+        uni.getWindowInfo().windowWidth - right + "px";
+      this.popMenuPosition.top = bottom + "px";
+      this.moreMenuVisible = true;
+    },
+    getEl(el) {
+      return new Promise((resolve) => {
+        const query = uni.createSelectorQuery().in(this);
+        query
+          .select(el)
+          .boundingClientRect((data) => {
+            // 存在data，且存在宽和高，视为渲染完毕
+            resolve(data);
+          })
+          .exec();
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@keyframes loading {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.chat_header {
+  @include btwBox();
+  padding: 36rpx 44rpx;
+  margin-top: var(--status-bar-height);
+
+  .self_info {
+    @include btwBox();
+
+    &_desc {
+      @include colBox(true);
+      margin-left: 24rpx;
+      color: $uni-text-color;
+
+      .company {
+        @include nomalEllipsis();
+        font-size: 24rpx;
+        margin-bottom: 10rpx;
+        max-width: 300rpx;
+      }
+
+      .user_state {
+        @include vCenterBox();
+
+        .nickname {
+          @include nomalEllipsis();
+          font-size: 26rpx;
+          max-width: 240rpx;
+        }
+
+        .err-tag {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          width: 152rpx;
+          height: 44rpx;
+          background: #ffe1dd;
+          border-radius: 12rpx 12rpx 12rpx 12rpx;
+          margin-left: 8rpx;
+          .status {
+            font-size: 24rpx;
+            margin-left: 8rpx;
+            font-weight: 400;
+            color: #ff381f;
+          }
+        }
+
+        .tag {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          width: 152rpx;
+          height: 44rpx;
+          background: #f2f8ff;
+          border-radius: 12rpx 12rpx 12rpx 12rpx;
+          margin-left: 8rpx;
+
+          .loading {
+            animation: loading 1.5s infinite;
+          }
+
+          .status {
+            font-size: 24rpx;
+            margin-left: 8rpx;
+            font-weight: 400;
+            color: #0089ff;
+          }
+        }
+
+        .online_state {
+          @include vCenterBox();
+          margin-left: 24rpx;
+          font-size: 24rpx;
+
+          .dot {
+            background-color: #10cc64;
+            width: 12rpx;
+            height: 12rpx;
+            border-radius: 50%;
+            margin-right: 12rpx;
+          }
+        }
+      }
+    }
+  }
+
+  .right_action {
+    display: flex;
+    position: relative;
+
+    .call_icon {
+      margin-right: 24rpx;
+
+      image {
+        width: 56rpx;
+        height: 56rpx;
+      }
+    }
+
+    .more_icon {
+      image {
+        width: 56rpx;
+        height: 56rpx;
+      }
+    }
+
+    .more_menu {
+      position: absolute;
+      // bottom: 0;
+      // left: 100%;
+      z-index: 999;
+      // transform: translate(-100%, 100%);
+      box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.16);
+      width: max-content;
+      border-radius: 12rpx;
+      background-color: #fff;
+
+      .menu_item {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        padding: 20rpx 24rpx;
+        font-size: 28rpx;
+        color: $uni-text-color;
+        border-bottom: 1px solid #f0f0f0;
+
+        image {
+          width: 24px;
+          height: 24px;
+          margin-right: 24rpx;
+        }
+
+        &:last-child {
+          border: none;
+        }
+      }
+    }
+  }
+}
+</style>

pages/conversation/conversationList/components/ConversationItem.vue

@@ -0,0 +1,161 @@
+<template>
+  <view @tap.prevent="clickConversationItem" class="conversation_item">
+    <view class="pinned" v-if="source.isPinned"></view>
+    <view class="left_info">
+      <my-avatar
+        :isGroup="isGroup"
+        :isNotify="isNotify"
+        :src="source.faceURL"
+        :desc="source.showName"
+        size="46"
+      />
+      <view class="details">
+        <text class="conversation_name">{{ source.showName }}</text>
+        <view class="lastest_msg_wrap">
+          <text class="lastest_msg_content">{{ latestMessage }}</text>
+        </view>
+      </view>
+    </view>
+    <view class="right_desc">
+      <text class="send_time">{{ latestMessageTime }}</text>
+      <u-badge max="99" :value="source.unreadCount"></u-badge>
+    </view>
+  </view>
+</template>
+
+<script>
+import {
+  SessionType,
+} from "openim-uniapp-polyfill";
+import MyAvatar from "@/components/MyAvatar/index.vue";
+import UParse from "@/components/gaoyia-parse/parse.vue";
+import {
+  getConversationContent,
+  formatConversionTime,
+  prepareConversationState,
+} from "@/util/imCommon";
+
+export default {
+  components: {
+    MyAvatar,
+    UParse,
+  },
+  props: {
+    source: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  computed: {
+    latestMessage() {
+      if (this.source.latestMsg === "") return "";
+      let parsedMessage;
+      try {
+        parsedMessage = JSON.parse(this.source.latestMsg);
+      } catch (e) {}
+      if (!parsedMessage) return "";
+      return getConversationContent(parsedMessage);
+    },
+    latestMessageTime() {
+      return this.source.latestMsgSendTime
+        ? formatConversionTime(this.source.latestMsgSendTime)
+        : "";
+    },
+    isGroup() {
+      return this.source.conversationType === SessionType.WorkingGroup;
+    },
+    isNotify() {
+      return this.source.conversationType === SessionType.Notification;
+    },
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    clickConversationItem() {
+      console.log(this.source);
+      prepareConversationState(this.source);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.conversation_item {
+  @include btwBox();
+  flex-direction: row;
+  padding: 12rpx 44rpx 20rpx;
+  position: relative;
+
+  &_active {
+    background-color: #f3f3f3;
+  }
+
+  .left_info {
+    @include btwBox();
+
+    .details {
+      @include colBox(true);
+      margin-left: 24rpx;
+      height: 46px;
+      color: $uni-text-color;
+
+      .conversation_name {
+        @include nomalEllipsis();
+        max-width: 40vw;
+        font-size: 28rpx;
+      }
+
+      .lastest_msg_wrap {
+        display: flex;
+        font-size: 24rpx;
+        margin-top: 10rpx;
+        color: #666;
+
+        .lastest_msg_prefix {
+          margin-right: 6rpx;
+
+          &_active {
+            color: $u-primary;
+          }
+        }
+
+        .lastest_msg_content {
+          flex: 1;
+          margin-right: 160rpx;
+          // /deep/uni-view {
+          @include ellipsisWithLine(1);
+          // }
+        }
+      }
+    }
+  }
+
+  .right_desc {
+    @include colBox(true);
+    align-items: flex-end;
+    width: max-content;
+    justify-content: space-between;
+    height: 46px;
+
+    .send_time {
+      width: max-content;
+      font-size: 24rpx;
+      color: #999;
+    }
+
+    .u-badge {
+      width: fit-content;
+    }
+  }
+
+  .pinned {
+    position: absolute;
+    top: 0;
+    right: 24rpx;
+    width: 17rpx;
+    height: 17rpx;
+    background-image: linear-gradient(to bottom left, #314ffe 50%, white 50%);
+  }
+}
+</style>

pages/conversation/conversationList/index.vue

@@ -0,0 +1,132 @@
+<template>
+  <view class="conversation_container">
+    <chat-header ref="chatHeaderRef" />
+    <scroll-view
+      class="scroll-view"
+      scroll-y="true"
+      refresher-enabled="true"
+      :refresher-triggered="triggered"
+      :scroll-top="scrollTop"
+      :scroll-with-animation="true"
+      @scroll="scroll"
+      @refresherrefresh="onRefresh"
+      @refresherrestore="onRestore"
+      @scrolltolower="scrolltolower"
+    >
+      <conversation-item
+        v-for="item in storeConversationList"
+        :key="item.conversationID"
+        :source="item"
+        ref="conversationItem"
+      />
+    </scroll-view>
+    <view class="loading_wrap" v-if="storeProgress > 0 && storeProgress < 100">
+      <u-loading-icon
+        :vertical="true"
+        :text="storeProgress + '%'"
+      ></u-loading-icon>
+    </view>
+  </view>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+import ChatHeader from "./components/ChatHeader.vue";
+import ConversationItem from "./components/ConversationItem.vue";
+
+export default {
+  components: {
+    ChatHeader,
+    ConversationItem,
+  },
+  data() {
+    return {
+      scrollTop: 0,
+      old: {
+        scrollTop: 0,
+      },
+      doubleClick: 0,
+      triggered: false,
+      refreshing: false,
+    };
+  },
+  computed: {
+    ...mapGetters(["storeConversationList", "storeIsSyncing", "storeProgress"]),
+  },
+  onReady() {
+    this.$nextTick(() => plus.navigator.closeSplashscreen());
+  },
+  onLoad() {
+    this._freshing = false;
+    this.triggered = true;
+  },
+  methods: {
+    scroll(e) {
+      this.old.scrollTop = e.detail.scrollTop;
+    },
+    onRefresh() {
+      if (this._freshing) return;
+      this._freshing = true;
+      this.queryList(true);
+    },
+    onRestore() {
+      this.triggered = "restore";
+      console.log("onRestore");
+    },
+    scrolltolower() {
+      this.queryList();
+    },
+    async queryList(isFirstPage = false) {
+      await this.$store.dispatch(
+        "conversation/getConversationList",
+        isFirstPage
+      );
+      this.triggered = false;
+      this._freshing = false;
+    },
+    closeAllSwipe() {
+      this.$refs.swipeWrapperRef.closeAll();
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.conversation_container {
+  @include colBox(false);
+  height: 100vh;
+  overflow-y: hidden;
+}
+
+.conversation_search {
+  padding: 0 44rpx 24rpx;
+}
+
+.z-paging-content {
+  flex: 1;
+}
+
+.swipe_wrapper {
+  @include colBox(false);
+  flex: 1;
+  width: 100%;
+  overflow-y: auto;
+}
+
+.scroll-view {
+  height: 0;
+  flex: 1;
+}
+
+.loading_wrap {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+/deep/.u-swipe-action-item__right__button__wrapper__text {
+  -webkit-line-clamp: 2 !important;
+  max-width: 32px;
+}
+</style>

pages/conversation/groupManage/index.vue

@@ -0,0 +1,57 @@
+<template>
+  <view class="group_settings_container">
+    <custom-nav-bar title="群管理" />
+    <view class="setting_row">
+      <setting-item
+        @click="toTransfer"
+        title="群主管理权转让"
+        :border="false"
+      />
+    </view>
+  </view>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+import { GroupMemberListTypes } from "@/constant";
+import CustomNavBar from "@/components/CustomNavBar/index.vue";
+import SettingItem from "@/components/SettingItem/index.vue";
+export default {
+  components: {
+    CustomNavBar,
+    SettingItem,
+  },
+  data() {
+    return {};
+  },
+  computed: {
+    ...mapGetters([
+      "storeCurrentConversation",
+      "storeCurrentMemberInGroup",
+      "storeCurrentGroup",
+    ]),
+  },
+  methods: {
+    toTransfer() {
+      uni.navigateTo({
+        url: `/pages/conversation/groupMemberList/index?type=${GroupMemberListTypes.Transfer}&groupID=${this.storeCurrentGroup.groupID}`,
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.group_settings_container {
+  @include colBox(false);
+  height: 100vh;
+  background-color: #f6f6f6;
+
+  .setting_row {
+    background-color: #fff;
+    margin: 24rpx 24rpx 0;
+    border-radius: 6px;
+    overflow: hidden;
+  }
+}
+</style>

pages/conversation/groupMemberList/components/GroupMemberListHeader.vue

@@ -0,0 +1,126 @@
+<template>
+  <custom-nav-bar @leftClick="leftClick" :title="getTitle">
+  </custom-nav-bar>
+</template>
+
+<script>
+import CustomNavBar from "@/components/CustomNavBar/index.vue";
+import { ContactChooseTypes } from "@/constant";
+export default {
+  name: "",
+  components: {
+    CustomNavBar,
+  },
+  props: {
+    checkVisible: {
+      type: Boolean,
+      default: false,
+    },
+    isNomal: {
+      type: Boolean,
+      default: false,
+    },
+    isTransfer: {
+      type: Boolean,
+      default: false,
+    },
+    isAt: {
+      type: Boolean,
+      default: false,
+    },
+    isSetAdmin: {
+      type: Boolean,
+      default: false,
+    },
+    isMute: {
+      type: Boolean,
+      default: false,
+    },
+    isCall: {
+      type: Boolean,
+      default: false,
+    },
+    groupID: String,
+  },
+  data() {
+    return {
+      moreMenuVisible: false,
+    };
+  },
+  computed: {
+    getTitle() {
+      if (this.isCall) {
+        return "邀请成员";
+      }
+      if (this.isAt) {
+        return "选择提醒的人";
+      }
+      if (this.isSetAdmin) {
+        return "设置管理员";
+      }
+      if (this.isMute) {
+        return "禁言成员";
+      }
+      if (this.checkVisible) {
+        return "移除群成员";
+      }
+      return "群成员";
+    },
+  },
+  methods: {
+    leftClick() {
+      if (this.checkVisible) {
+        this.$emit("update:checkVisible", false);
+      }
+    },
+    rightClick() {
+      this.moreMenuVisible = true;
+    },
+    checkMenu() {
+      if (this.moreMenuVisible) {
+        this.moreMenuVisible = false;
+      }
+    },
+    inviteMember() {
+      uni.navigateTo({
+        url: `/pages/common/contactChoose/index?type=${ContactChooseTypes.Invite}&groupID=${this.groupID}`,
+      });
+    },
+    removeMember() {
+      this.$emit("removeMember");
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.more_container {
+  position: relative;
+
+  .more_dot {
+    padding: 24rpx;
+    margin-right: 20rpx;
+  }
+
+  .more_menu {
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    transform: translate(-100%, 100%);
+    box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.16);
+    width: max-content;
+    border-radius: 8rpx;
+    background-color: #fff;
+
+    .menu_item {
+      padding: 20rpx 48rpx;
+      font-size: 28rpx;
+      color: $uni-text-color;
+
+      // &:nth-child(1) {
+      // 	border-bottom: 1px solid #F0F0F0;
+      // }
+    }
+  }
+}
+</style>

pages/conversation/groupMemberList/index.vue

@@ -0,0 +1,314 @@
+<template>
+  <view @click="pageClick" class="group_members_container">
+    <group-member-list-header
+      ref="navHeaderRef"
+      :checkVisible.sync="showCheck"
+      :isTransfer="isTransfer"
+      :isNomal="!isOwner && !isAdmin"
+      :groupID="groupID"
+      @removeMember="showMemberCheck"
+    />
+
+    <view class="search_bar_wrap">
+      <u-search
+        disabled
+        class="search_bar"
+        shape="square"
+        placeholder="搜索"
+        :showAction="false"
+        v-model="keyword"
+      />
+    </view>
+
+    <u-list
+      class="member_list"
+      @scrolltolower="loadMore"
+      lowerThreshold="100"
+      height="1"
+    >
+      <u-list-item v-for="member in groupMemberList" :key="member.userID">
+        <user-item
+          @itemClick="userClick"
+          @updateCheck="updateCheck"
+          :checked="isChecked(member.userID)"
+          :checkVisible="showCheck"
+          :disabled="!canCheck(member) && showCheck"
+          :item="member"
+        />
+      </u-list-item>
+      <view
+        v-show="loadState.loading"
+        class="member_loading"
+      >
+        <u-loading-icon></u-loading-icon>
+      </view>
+    </u-list>
+
+    <choose-index-footer
+      v-if="showCheck"
+      :comfirmLoading="comfirmLoading"
+      @removeItem="updateCheck"
+      @confirm="confirm"
+      :choosedData="getChoosedData"
+      :isRemove="isRemove"
+      :maxLength="groupMemberLength"
+    />
+
+    <u-modal
+      :show="showConfirmModal"
+      asyncClose
+      showCancelButton
+      @confirm="modalConfirm"
+      @cancel="() => (showConfirmModal = false)"
+      :content="
+        isRemove
+          ? '确定移除已选群成员？'
+          : `确定要把群主转移给${choosedTransferMember.nickname}吗？`
+      "
+    />
+    <u-toast ref="uToast"></u-toast>
+  </view>
+</template>
+
+<script>
+let moreActionArea;
+import { GroupMemberListTypes } from "@/constant";
+import IMSDK, { GroupMemberRole } from "openim-uniapp-polyfill";
+import UserItem from "@/components/UserItem/index.vue";
+import GroupMemberListHeader from "./components/GroupMemberListHeader.vue";
+import ChooseIndexFooter from "@/components/ChooseIndexFooter/index.vue";
+export default {
+  components: {
+    GroupMemberListHeader,
+    ChooseIndexFooter,
+    UserItem,
+  },
+  data() {
+    return {
+      showCheck: false,
+      groupID: "",
+      keyword: "",
+      showConfirmModal: false,
+      comfirmLoading: false,
+      groupMemberList: [],
+      choosedMemberIDList: [],
+      choosedTransferMember: {},
+      type: GroupMemberListTypes.Preview,
+      isRightKick: true,
+      loadState: {
+        hasMore: true,
+        loading: false,
+      },
+    };
+  },
+  computed: {
+    getChoosedData() {
+      const tmpList = [...this.choosedMemberIDList];
+      return this.groupMemberList.filter(
+        (member) => {
+          const idx = tmpList.findIndex((item) => item === member.userID);
+          if (idx > -1) {
+            tmpList.splice(idx, 1);
+          }
+          return idx > -1;
+        },
+      );
+    },
+    isRemove() {
+      return this.type === GroupMemberListTypes.Kickout;
+    },
+    isTransfer() {
+      return this.type === GroupMemberListTypes.Transfer;
+    },
+    isChecked() {
+      return (userID) => this.choosedMemberIDList.includes(userID);
+    },
+    isOwner() {
+      return (
+        this.$store.getters.storeCurrentMemberInGroup.roleLevel ===
+        GroupMemberRole.Owner
+      );
+    },
+    isAdmin() {
+      return (
+        this.$store.getters.storeCurrentMemberInGroup.roleLevel ===
+        GroupMemberRole.Admin
+      );
+    },
+    canCheck() {
+      return ({ roleLevel, userID }) => {
+        if (this.type === GroupMemberListTypes.Kickout) {
+          return (
+            (this.isOwner ||
+              (this.isAdmin && roleLevel !== GroupMemberRole.Owner)) &&
+            userID !== this.$store.getters.storeCurrentUserID
+          );
+        }
+
+        return userID !== this.$store.getters.storeCurrentUserID;
+      };
+    },
+    groupMemberLength() {
+      return this.$store.getters.storeCurrentGroup?.memberCount ?? 0;
+    },
+  },
+  onLoad(options) {
+    const { groupID, type } = options;
+    this.loadMemberList(groupID);
+    this.type = type;
+    this.groupID = groupID;
+    this.isRightKick = type === GroupMemberListTypes.Kickout;
+    if (
+      this.isRightKick
+    ) {
+      this.showCheck = true;
+    }
+  },
+  methods: {
+    async pageClick(e) {
+      if (!moreActionArea) {
+        moreActionArea = await this.getEl(".more_container");
+      }
+      if (!moreActionArea) return;
+      if (
+        e.target.y < moreActionArea.top ||
+        e.target.y > moreActionArea.bottom ||
+        e.target.x < moreActionArea.left
+      ) {
+        this.$refs.navHeaderRef.checkMenu();
+      }
+    },
+    confirm() {
+      this.showConfirmModal = true;
+    },
+    modalConfirm() {
+      let func = () => {};
+      if (this.type === GroupMemberListTypes.Kickout) {
+        func = IMSDK.asyncApi(IMSDK.IMMethods.KickGroupMember, IMSDK.uuid(), {
+          groupID: this.getChoosedData[0].groupID,
+          reason: "",
+          userIDList: this.getChoosedData.map((member) => member.userID),
+        });
+      } else {
+        func = IMSDK.asyncApi(
+          IMSDK.IMMethods.TransferGroupOwner,
+          IMSDK.uuid(),
+          {
+            groupID: this.choosedTransferMember.groupID,
+            newOwnerUserID: this.choosedTransferMember.userID,
+          },
+        );
+      }
+      func
+        .then(() => this.showToast("操作成功", () => uni.navigateBack()))
+        .catch(() => this.showToast("操作失败"))
+        .finally(() => (this.showConfirmModal = false));
+    },
+    updateChoosedData(userID) {
+      if (this.choosedMemberIDList.includes(userID)) {
+        const idx = this.choosedMemberIDList.findIndex(
+          (item) => item === userID,
+        );
+        const tmpArr = [...this.choosedMemberIDList];
+        tmpArr.splice(idx, 1);
+        this.choosedMemberIDList = tmpArr;
+      } else {
+        this.choosedMemberIDList = [...this.choosedMemberIDList, userID];
+      }
+      console.log(this.choosedMemberIDList);
+    },
+    userClick(member) {
+      if (this.type === GroupMemberListTypes.Transfer) {
+        if (member.userID === this.$store.getters.storeCurrentUserID) return;
+        this.choosedTransferMember = member;
+        this.showConfirmModal = true;
+      } else {
+        uni.$u.route("/pages/common/userCard/index", {
+          sourceID: member.userID,
+          memberInfo: JSON.stringify(member),
+        });
+      }
+    },
+    updateCheck(member) {
+      this.updateChoosedData(member.userID);
+    },
+    showMemberCheck() {
+      this.type = GroupMemberListTypes.Kickout;
+      this.showCheck = true;
+    },
+    loadMore() {
+      const stateKey = "loadState";
+      const methodKey = "loadMemberList";
+      if (this[stateKey].hasMore && !this[stateKey].loading) {
+        this[methodKey]();
+      }
+    },
+    loadMemberList(groupID) {
+      this.loadState.loading = true;
+      IMSDK.asyncApi(IMSDK.IMMethods.GetGroupMemberList, IMSDK.uuid(), {
+        groupID: groupID ?? this.groupID,
+        filter: 0,
+        offset: this.groupMemberList.length,
+        count: 500,
+      })
+        .then(({ data }) => {
+          this.groupMemberList = [...this.groupMemberList, ...data];
+          this.loadState.hasMore = data.length === 500;
+        })
+        .finally(() => (this.loadState.loading = false));
+    },
+    showToast(message, complete = null) {
+      this.$refs.uToast.show({
+        message,
+        complete,
+      });
+    },
+    getEl(el) {
+      return new Promise((resolve) => {
+        const query = uni.createSelectorQuery().in(this);
+        query
+          .select(el)
+          .boundingClientRect((data) => {
+            // 存在data，且存在宽和高，视为渲染完毕
+            resolve(data);
+          })
+          .exec();
+      });
+    },
+  },
+  onBackPress(options) {
+    if (this.showCheck && this.isRightKick) {
+      this.showCheck = false;
+      this.type = GroupMemberListTypes.Preview;
+      return true;
+    }
+    return false;
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.group_members_container {
+  @include colBox(false);
+  height: 100vh;
+  overflow: hidden;
+
+  .search_bar_wrap {
+    height: 34px;
+    padding: 12px 22px;
+  }
+
+  .at_all_btn {
+    font-weight: 500;
+    padding: 24rpx 44rpx;
+  }
+
+  /deep/.u-popup {
+    flex: none;
+  }
+
+  .member_list {
+    flex: 1;
+  }
+}
+</style>

pages/conversation/groupSettings/components/ActionSheet.vue

@@ -0,0 +1,57 @@
+<template>
+  <u-action-sheet
+    safeAreaInsetBottom
+    closeOnClickOverlay
+    @close="onClose"
+    @select="onSelect"
+    round="24"
+    :actions="joinGroupActions"
+    :show="visible"
+    cancelText="取消"
+  />
+</template>
+
+<script>
+import IMSDK, { GroupVerificationType } from "openim-uniapp-polyfill";
+export default {
+  name: "",
+  components: {},
+  props: {
+    visible: Boolean,
+    groupID: String,
+  },
+  data() {
+    return {
+      joinGroupActions: [
+        {
+          name: "允许任何人加群",
+          type: GroupVerificationType.AllNot,
+        },
+        {
+          name: "群成员邀请无需验证",
+          type: GroupVerificationType.ApplyNeedInviteNot,
+        },
+        {
+          name: "需要发送验证消息",
+          type: GroupVerificationType.AllNeed,
+        },
+      ],
+    };
+  },
+  methods: {
+    onClose() {
+      this.$emit("update:visible", false);
+    },
+    onSelect({ type }) {
+      IMSDK.asyncApi(IMSDK.IMMethods.SetGroupVerification, IMSDK.uuid(), {
+        groupID: this.groupID,
+        verification: type,
+      })
+        .then(() => uni.$u.toast("操作成功"))
+        .catch(() => uni.$u.toast("操作失败"));
+    },
+  },
+};
+</script>
+
+<style lang="scss"></style>

pages/conversation/groupSettings/components/GroupMemberRow.vue

@@ -0,0 +1,171 @@
+<template>
+  <view @click="toMemberList" class="member_row">
+    <!-- <view class="member_title">
+      <text>群成员</text>
+      <view class="member_desc">
+        <text>{{ `${memberCount}人` }}</text>
+        <u-icon name="arrow-right" color="#999" size="16" />
+      </view>
+    </view> -->
+    <view class="member_list">
+      <view class="member_item" v-for="(member, index) in groupMemberList">
+        <my-avatar
+          :src="member.faceURL"
+          :desc="member.nickname"
+          :key="member.userID"
+          size="48"
+        />
+        <view class="ower" v-if="member.roleLevel === 100">群主</view>
+        <text class="member_item_name">{{ member.nickname }}</text>
+      </view>
+      <view class="member_item">
+        <image
+          style="width: 48px; height: 48px; min-width: 48px"
+          @click.stop="inviteMember"
+          src="@/static/images/group_setting_invite.png"
+          alt=""
+        />
+        <text class="member_item_name">增加</text>
+      </view>
+      <view class="member_item" v-if="isAdmin || isOwner">
+        <image
+          style="width: 48px; height: 48px; min-width: 48px"
+          @click.stop="kickMember"
+          src="@/static/images/group_setting_remove.png"
+          alt=""
+        />
+        <text class="member_item_name">移出</text>
+      </view>
+    </view>
+    <view @click="toMemberList" class="more">
+      <text>查看全部群成员({{ memberCount }})</text>
+      <view class="more_right">
+        <u-icon name="arrow-right" color="#999" size="18" />
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+import IMSDK, { GroupMemberRole } from "openim-uniapp-polyfill";
+import MyAvatar from "@/components/MyAvatar/index.vue";
+import SettingItem from "@/components/SettingItem/index.vue";
+import { ContactChooseTypes, GroupMemberListTypes } from "@/constant";
+export default {
+  name: "",
+  components: {
+    MyAvatar,
+    SettingItem,
+  },
+  props: {
+    isNomal: Boolean,
+    memberCount: Number,
+    groupID: String,
+    groupMemberList: Array,
+  },
+  data() {
+    return {};
+  },
+  computed: {
+    ...mapGetters([
+      "storeCurrentConversation",
+      "storeCurrentMemberInGroup",
+      "storeCurrentGroup",
+    ]),
+    isOwner() {
+      return this.storeCurrentMemberInGroup.roleLevel === GroupMemberRole.Owner;
+    },
+    isAdmin() {
+      return this.storeCurrentMemberInGroup.roleLevel === GroupMemberRole.Admin;
+    },
+  },
+  methods: {
+    toMemberList() {
+      uni.navigateTo({
+        url: `/pages/conversation/groupMemberList/index?type=${GroupMemberListTypes.Preview}&groupID=${this.groupID}`,
+      });
+    },
+    inviteMember() {
+      uni.navigateTo({
+        url: `/pages/common/contactChoose/index?type=${ContactChooseTypes.Invite}&groupID=${this.groupID}`,
+      });
+    },
+    kickMember() {
+      uni.navigateTo({
+        url: `/pages/conversation/groupMemberList/index?type=${GroupMemberListTypes.Kickout}&groupID=${this.groupID}`,
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.member_row {
+  @include colBox(false);
+  padding: 36rpx 36rpx 0;
+  margin: 24rpx;
+  background-color: #fff;
+  color: $uni-text-color;
+  border-radius: 6px;
+  overflow: hidden;
+
+  .member_title {
+    @include btwBox();
+
+    .member_desc {
+      @include vCenterBox();
+      font-size: 26rpx;
+    }
+  }
+
+  .member_list {
+    @include vCenterBox();
+    flex-wrap: wrap;
+
+    .member_item {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      margin: 8rpx 14rpx;
+
+      &_name {
+        margin-top: 8rpx;
+        font-size: 24rpx;
+        color: #8e9ab0;
+        max-width: 48px;
+        display: inline-block;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+  }
+
+  .ower{
+    width: 48px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    bottom: 34rpx;
+    font-size: 24rpx;
+    position: absolute;
+    color: #0089FF;
+    background: #E8EAEF;
+    border-radius: 12rpx 12rpx 12rpx 12rpx;
+  }
+
+  .more {
+    @include btwBox();
+    margin-top: 20rpx;
+    padding: 20rpx 0rpx 20rpx;
+    border-top: 1px solid rgba(153, 153, 153, 0.2);
+
+    .more_right {
+      @include vCenterBox();
+    }
+  }
+}
+</style>

pages/conversation/groupSettings/index.vue

@@ -0,0 +1,361 @@
+<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>
+      </view>
+
+      <group-member-row
+        v-if="isJoinGroup"
+        :isNomal="!isAdmin && !isOwner"
+        :groupID="storeCurrentConversation.groupID"
+        :memberCount="storeCurrentGroup.memberCount"
+        :groupMemberList="groupMemberList"
+      />
+      <view v-if="isJoinGroup" class="setting_row">
+        <setting-item
+          v-if="isOwner || isAdmin"
+          @click="toGroupManage"
+          title="群管理"
+          :border="false"
+        />
+      </view>
+
+      <view class="setting_row">
+        <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 { getPurePath } from "@/util/common";
+
+const ConfirmTypes = {
+  Dismiss: "Dismiss",
+  Quit: "Quit",
+};
+
+export default {
+  components: {
+    CustomNavBar,
+    MyAvatar,
+    SettingItem,
+    GroupMemberRow,
+    ActionSheet,
+  },
+  props: {},
+  data() {
+    return {
+      actionSheetVisible: false,
+      confirmType: null,
+      switchLoading: {
+        pin: false,
+        opt: false,
+        mute: false,
+      },
+      groupMemberList: [],
+      isJoinGroup: true
+    };
+  },
+  onShow() {
+    this.getGroupMemberList();
+    if (this.storeCurrentConversation.groupID) {
+      IMSDK.asyncApi(
+        IMMethods.IsJoinGroup,
+        IMSDK.uuid(),
+        this.storeCurrentConversation.groupID
+      ).then((res) => {
+        this.isJoinGroup = res.data
+      });
+    }
+  },
+  watch: {
+    "storeCurrentGroup.memberCount"() {
+      this.getGroupMemberList();
+    },
+  },
+  computed: {
+    ...mapGetters([
+      "storeCurrentConversation",
+      "storeCurrentMemberInGroup",
+      "storeCurrentGroup",
+    ]),
+    getConfirmContent() {
+      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 "需要发送验证消息";
+    },
+    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 }) => {
+          console.log(data);
+          this.groupMemberList = [...data];
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    },
+    toGroupManage() {
+      uni.navigateTo({
+        url: "/pages/conversation/groupManage/index",
+      });
+    },
+    toUpdateGroupName() {
+      if (!this.isAdmin && !this.isOwner) {
+        return;
+      }
+
+      uni.navigateTo({
+        url: `/pages/conversation/updateGroupOrNickname/index?sourceInfo=${JSON.stringify(
+          this.storeCurrentGroup,
+        )}`,
+      });
+    },
+    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;
+    },
+    updateGroupAvatar() {
+      if (!this.isAdmin && !this.isOwner) {
+        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("修改失败");
+          }
+        },
+      });
+    },
+    confirm() {
+      let funcName = "";
+      let sourceID = this.storeCurrentConversation.groupID;
+      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("操作成功");
+          setTimeout(
+            () =>
+              uni.switchTab({
+                url: "/pages/conversation/conversationList/index",
+              }),
+            250,
+          );
+        })
+        .catch(() => uni.$u.toast("操作失败"))
+        .finally(() => (this.confirmType = null));
+    },
+  },
+};
+</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>

pages/conversation/singleSettings/index.vue

@@ -0,0 +1,107 @@
+<template>
+  <view class="single_settings_container">
+    <custom-nav-bar title="好友设置" />
+
+    <view class="row_wrap">
+      <view class="setting_row info_row">
+        <view @click="toUserCard" class="user_info">
+          <my-avatar
+            :src="storeCurrentConversation.faceURL"
+            :desc="storeCurrentConversation.showName"
+            size="46"
+          />
+        </view>
+        <view @click="invite2group" class="action">
+          <image
+            style="width: 46px; height: 46px"
+            src="@/static/images/single_setting_add.png"
+            alt=""
+          />
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+import CustomNavBar from "@/components/CustomNavBar/index.vue";
+import MyAvatar from "@/components/MyAvatar/index.vue";
+import SettingItem from "@/components/SettingItem/index.vue";
+export default {
+  components: {
+    CustomNavBar,
+    MyAvatar,
+    SettingItem,
+  },
+  props: {},
+  data() {
+    return {
+      switchLoading: {
+        pin: false,
+        opt: false,
+        readLimit: false,
+      },
+      showConfirm: false,
+    };
+  },
+  computed: {
+    ...mapGetters(["storeCurrentConversation"]),
+  },
+  methods: {
+    toUserCard() {
+      uni.navigateTo({
+        url: `/pages/common/userCard/index?sourceID=${this.storeCurrentConversation.userID}`,
+      });
+    },
+    invite2group() {
+      const checkedMemberList = JSON.stringify([
+        {
+          userID: this.storeCurrentConversation.userID,
+          faceURL: this.storeCurrentConversation.faceURL,
+          nickname: this.storeCurrentConversation.showName,
+        },
+      ]);
+      uni.navigateTo({
+        url: `/pages/common/createGroup/index?checkedMemberList=${checkedMemberList}`,
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.single_settings_container {
+  @include colBox(false);
+  height: 100vh;
+  background-color: #f6f6f6;
+
+  .row_wrap {
+    flex: 1;
+    overflow-y: auto;
+  }
+
+  .setting_row {
+    margin: 24rpx 24rpx 0 24rpx;
+    background: #fff;
+    border-radius: 6px;
+    overflow: hidden;
+  }
+
+  .info_row {
+    display: flex;
+    align-items: center;
+    padding: 44rpx;
+
+    .user_info {
+      @include colBox(false);
+      margin-right: 36rpx;
+
+      .user_name {
+        margin-top: 20rpx;
+        color: #666;
+      }
+    }
+  }
+}
+</style>

pages/conversation/updateGroupOrNickname/index.vue

@@ -0,0 +1,92 @@
+<template>
+  <view class="page_container">
+    <custom-nav-bar :title="getTitle">
+      <view class="nav_right_action" slot="more">
+        <text v-show="!updateLoading" @click="comfirmUpdate">保存</text>
+        <u-loading-icon v-show="updateLoading" />
+      </view>
+    </custom-nav-bar>
+
+    <view class="content_row">
+      <u-input
+        v-model="content"
+        disabledColor="transparent"
+        maxlength="16"
+        placeholder="请输入内容"
+        clearable
+      >
+      </u-input>
+    </view>
+  </view>
+</template>
+
+<script>
+import IMSDK from "openim-uniapp-polyfill";
+import CustomNavBar from "@/components/CustomNavBar/index.vue";
+import MyAvatar from "@/components/MyAvatar/index.vue";
+export default {
+  components: {
+    CustomNavBar,
+    MyAvatar,
+  },
+  data() {
+    return {
+      sourceInfo: {},
+      content: "",
+      updateLoading: false,
+    };
+  },
+  computed: {
+    getTitle() {
+      return "修改群聊名称";
+    },
+    getSubTitle() {
+      return "修改群名称后，将在群内通知其他成员";
+    },
+  },
+  onLoad(options) {
+    const { sourceInfo } = options;
+    this.sourceInfo = JSON.parse(sourceInfo);
+    this.content = this.sourceInfo.groupName;
+  },
+  methods: {
+    comfirmUpdate() {
+      this.updateLoading = true;
+      IMSDK.asyncApi(IMSDK.IMMethods.SetGroupInfo, IMSDK.uuid(), {
+          groupID: this.sourceInfo.groupID,
+          groupName: this.content,
+        })
+        .then(() => {
+          uni.$u.toast("修改成功");
+          setTimeout(() => uni.navigateBack(), 250);
+        })
+        .catch(() => uni.$u.toast("修改失败"))
+        .finally(() => (this.updateLoading = false));
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.page_container {
+  @include colBox(false);
+  height: 100vh;
+
+  .nav_right_action {
+    margin-right: 36rpx;
+  }
+
+  .content_row {
+    margin-top: 96rpx;
+    margin: 72rpx 44rpx 0;
+
+    .u-input {
+      background-color: #e8eaef;
+    }
+
+    .u-button {
+      height: 60rpx;
+    }
+  }
+}
+</style>

pages/login/index.vue

@@ -0,0 +1,437 @@
+<template>
+  <view class="page_container">
+    <view class="login">
+      <view class="logo">
+        <img src="static/images/logo.png" alt="" />
+        <view class="title">欢迎使用福安德内部平台</view>
+      </view>
+      <u-tabs :list="list" @click="click"></u-tabs>
+      <u-form
+        class="loginForm"
+        labelPosition="top"
+        :model="loginInfo"
+        :labelStyle="{
+          fontSize: '14px',
+          marginTop: '20rpx',
+          width: 'max-content',
+        }"
+        ref="loginForm"
+      >
+        <u-form-item v-if="active === 0" label="" prop="phoneNumber">
+          <u-input
+            v-model="loginInfo.phoneNumber"
+            border="surround"
+            placeholder="请输入手机号码"
+            clearable
+          >
+            <view
+              slot="prefix"
+              class="phoneNumber_areacode"
+              @click="showPicker"
+            >
+              <text class="areacode_content">+{{ loginInfo.areaCode }}</text>
+              <u-icon class="arrow_down" name="arrow-down"></u-icon>
+            </view>
+          </u-input>
+        </u-form-item>
+        <u-form-item v-if="active === 1" label="" prop="email">
+          <u-input
+            v-model="loginInfo.email"
+            border="surround"
+            placeholder="请输入您的邮箱"
+            clearable
+          >
+          </u-input>
+        </u-form-item>
+        <u-form-item v-if="active > 1 || isPwdLogin" label="" prop="password">
+          <u-input
+            v-model="loginInfo.password"
+            border="surround"
+            placeholder="请输入密码"
+            :password="!eying"
+            clearable
+          >
+            <u-icon
+              @click="updateEye"
+              slot="suffix"
+              :name="eying ? 'eye-off' : 'eye'"
+            >
+            </u-icon>
+          </u-input>
+        </u-form-item>
+        <u-form-item
+          v-if="active <= 1 && !isPwdLogin"
+          label=""
+          prop="verificationCode"
+        >
+          <u-input
+            v-model="loginInfo.verificationCode"
+            border="surround"
+            placeholder="请输入验证码"
+          >
+            <view class="code_btn" slot="suffix" @click="getCode">
+              {{ count !== 0 ? `${count} s` : "获取验证码" }}
+            </view>
+          </u-input>
+        </u-form-item>
+      </u-form>
+      <view v-if="active <= 1" class="other">
+        <text @click="toRegisterOrForget(false)">忘记密码</text>
+        <text class="forget" @click="toggleLoginMethod">{{ isPwdLogin ? "验证码登录" : "密码登录" }}</text>
+      </view>
+      <view class="login-btn">
+        <u-button
+          :loading="loading"
+          type="primary"
+          @click="startLogin"
+          :disabled="!canLogin"
+        >
+          登录
+        </u-button>
+      </view>
+
+      <AreaPicker ref="AreaPicker" @chooseArea="chooseArea" />
+    </view>
+
+    <view class="action_bar">
+      <text>还没有账号？<text class="register" @click="toRegisterOrForget(true)">立即注册</text></text>
+      <text style="margin-bottom: 16rpx" @click="copy">{{ v }}</text>
+    </view>
+  </view>
+</template>
+
+<script>
+import { v4 as uuidv4 } from "uuid";
+import md5 from "md5";
+import { version } from '@/common/config'
+import { businessLogin, businessSendSms } from "@/api/login";
+import AreaPicker from "@/components/AreaPicker";
+import { checkLoginError } from "@/util/common";
+import { SmsUserFor } from "@/constant";
+import IMSDK from "openim-uniapp-polyfill";
+
+let timer;
+
+export default {
+  components: {
+    AreaPicker,
+  },
+  data() {
+    return {
+      list: [{
+          name: '手机号',
+      }, {
+          name: '邮箱',
+      }],
+      loginInfo: {
+        email: "",
+        phoneNumber: "",
+        password: "",
+        areaCode: "86",
+        verificationCode: "",
+      },
+      eying: false,
+      loading: false,
+      count: 0,
+      isPwdLogin: true,
+      active: 0,
+    };
+  },
+  computed: {
+    v() {
+      return version
+    },
+    canLogin() {
+      return (
+        (this.loginInfo.phoneNumber || this.loginInfo.email) && 
+        (this.loginInfo.password || this.loginInfo.verificationCode)
+      );
+    },
+  },
+  onLoad(options) {
+    // if(options.isRedirect){
+    // 	plus.navigator.closeSplashscreen();
+    // }
+    this.version = version
+    this.init();
+  },
+  methods: {
+    click({ index }) {
+      this.active = index;
+    },
+    copy() {
+      uni.setClipboardData({
+        showToast: false,
+        data: version,
+        success: function () {
+          uni.showToast({
+            icon: "none",
+            title: "复制成功",
+          });
+        },
+      });
+    },
+    init() {
+      this.loginInfo.areaCode = uni.getStorageSync("last_areaCode") || "86";
+      this.loginInfo.email = uni.getStorageSync("last_email") || "";
+      this.loginInfo.phoneNumber = uni.getStorageSync("last_phoneNumber") || "";
+    },
+    updateEye() {
+      this.eying = !this.eying;
+    },
+    toRegisterOrForget(isRegister) {
+      uni.$u.route("/pages/login/registerOrForget/index", {
+        isRegister,
+      });
+    },
+    async startLogin() {
+      // this.$refs.loginForm.validate().then(async (valid) => {
+        this.loading = true;
+        this.saveLoginInfo();
+        let data = {};
+       
+          data = await businessLogin({
+            phoneNumber: this.loginInfo.phoneNumber,
+            email: this.loginInfo.email,
+            areaCode: `+${this.loginInfo.areaCode}`,
+            password: this.isPwdLogin ? md5(this.loginInfo.password) : "",
+            platform: uni.$u.os() === "ios" ? 1 : 2,
+            verifyCode: this.loginInfo.verificationCode,
+          });
+		  console.log("data: " + JSON.stringify(data));
+          const { imToken, userID } = data;
+          await IMSDK.asyncApi(IMSDK.IMMethods.Login, uuidv4(), {
+            userID,
+            token: imToken,
+          });
+          this.saveLoginProfile(data);
+          this.$store.commit("user/SET_AUTH_DATA", data);
+          this.$store.dispatch("user/getSelfInfo");
+          this.$store.dispatch("conversation/getConversationList");
+          this.$store.dispatch("conversation/getUnReadCount");
+          // this.$store.dispatch("contact/getFriendList");
+          // this.$store.dispatch("contact/getGrouplist");
+          this.$store.dispatch("contact/getBlacklist");
+          this.$store.dispatch("contact/getRecvFriendApplications");
+          this.$store.dispatch("contact/getSentFriendApplications");
+          this.$store.dispatch("contact/getRecvGroupApplications");
+          this.$store.dispatch("contact/getSentGroupApplications");
+          uni.switchTab({
+            url: "/pages/conversation/conversationList/index",
+          });
+          this.loginInfo.password = "";
+       
+        this.loading = false;
+      // });
+    },
+    saveLoginProfile(data) {
+      const { imToken, chatToken, userID } = data;
+      uni.setStorage({
+        key: "IMUserID",
+        data: userID,
+      });
+      uni.setStorage({
+        key: "IMToken",
+        data: imToken,
+      });
+      uni.setStorage({
+        key: "BusinessToken",
+        data: chatToken,
+      });
+    },
+    saveLoginInfo() {
+      uni.setStorage({
+        key: "last_areaCode",
+        data: this.loginInfo.areaCode,
+      });
+      uni.setStorage({
+        key: "last_phoneNumber",
+        data: this.loginInfo.phoneNumber,
+      });
+      uni.setStorage({
+        key: "last_email",
+        data: this.loginInfo.email,
+      });
+    },
+    showPicker() {
+      this.$refs.AreaPicker.init();
+    },
+    chooseArea(areaCode) {
+      this.loginInfo.areaCode = areaCode;
+    },
+    toggleLoginMethod() {
+      this.isPwdLogin = !this.isPwdLogin;
+    },
+    getCode() {
+      if (!this.loginInfo.phoneNumber) {
+        uni.$u.toast("请先输入手机号！");
+        return;
+      }
+
+      if (this.count !== 0) {
+        return;
+      }
+
+      const options = {
+        phoneNumber: this.loginInfo.phoneNumber,
+        areaCode: `+${this.loginInfo.areaCode}`,
+        usedFor: SmsUserFor.Login,
+        operationID: Date.now() + "",
+      };
+      businessSendSms(options)
+        .then(() => {
+          uni.$u.toast("验证码已发送！");
+          this.startCount();
+        })
+        .catch((err) => {
+          console.error(err);
+          uni.$u.toast(checkLoginError(err));
+        });
+    },
+    startCount() {
+      if (timer) {
+        clearInterval(timer);
+      }
+      this.count = 60;
+      timer = setInterval(() => {
+        if (this.count > 0) {
+          this.count--;
+        }
+      }, 1000);
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.page_container {
+  justify-content: space-between;
+
+  .login {
+    color: #0c1c33;
+    padding: 10vh 80rpx 0;
+    background: linear-gradient(
+      180deg,
+      rgba(0, 137, 255, 0.1) 0%,
+      rgba(255, 255, 255, 0) 100%
+    );
+
+    .title {
+      font-size: 34rpx;
+      font-weight: 700;
+      margin-bottom: 64rpx;
+      // color: $u-primary;
+    }
+
+    .logo {
+      display: flex;
+      flex-direction: column;
+      justify-content: start;
+      align-items: start;
+
+      img {
+        width: 160rpx;
+        height: 160rpx;
+      }
+    }
+
+    .loginType {
+      margin-bottom: 36rpx;
+
+      &-item {
+        margin-right: 68rpx;
+        font-size: 28rpx;
+        font-weight: 400;
+        border-radius: 4rpx;
+        padding: 2rpx 0;
+      }
+
+      &-active {
+        color: $u-primary;
+        border-bottom: 4rpx solid $u-primary;
+      }
+    }
+
+    .loginForm {
+      .phoneNumber-code {
+        display: flex;
+        align-items: center;
+        font-size: 36rpx;
+        border-right: 2rpx solid #d8d8d8;
+        margin-right: 58rpx;
+
+        .code {
+          font-weight: 400;
+          margin-right: 20rpx;
+        }
+
+        .icon {
+          margin-right: 40rpx;
+        }
+      }
+
+      .eye {
+        .image {
+          width: 44rpx;
+          height: 32rpx;
+        }
+      }
+
+      .code_btn {
+        color: $u-primary;
+      }
+    }
+
+    .other {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      margin: 8rpx;
+      font-size: 24rpx;
+      font-weight: 400;
+      color: $u-tips-color;
+
+      .forget {
+        color: $u-primary;
+      }
+    }
+
+    .login-btn {
+      margin-top: 8vh;
+    }
+
+    .agreement {
+      display: flex;
+      align-items: flex-start;
+      margin-top: 36rpx;
+
+      .detail {
+        font-size: 24rpx;
+        font-weight: 400;
+        color: $u-primary;
+      }
+    }
+  }
+
+  .action_bar {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    text-align: center;
+    margin-bottom: 96rpx;
+    font-size: 24rpx;
+    font-weight: 400;
+    color: $u-tips-color;
+
+    .register {
+      color: $u-primary;
+    }
+
+    .tap_line {
+      width: 1px;
+      margin: 0 24rpx;
+      background-color: #999;
+      transform: scale(0.5, 0.8);
+    }
+  }
+}
+</style>

pages/login/registerOrForget/index.vue

@@ -0,0 +1,140 @@
+<template>
+  <view class="register_container content_with_back">
+    <view class="back_icon">
+      <u-icon name="arrow-left" bold size="22" @click="back" />
+    </view>
+    <view class="title" v-if="isRegister">新用户注册</view>
+    <view class="title" v-else>忘记密码</view>
+    <u-form
+      labelPosition="top"
+      :model="userInfo"
+      :rules="rules"
+      :labelStyle="{
+        fontSize: '14px',
+        marginTop: '20rpx',
+        minWidth: '200rpx',
+      }"
+      ref="registerForm"
+    >
+      <u-form-item prop="phoneNumber" label="手机号码">
+        <u-input
+          v-model="userInfo.phoneNumber"
+          border="surround"
+          placeholder="请输入手机号码"
+          clearable
+        >
+          <view slot="prefix" class="phoneNumber_areacode" @click="showPicker">
+            <text class="areacode_content">+{{ userInfo.areaCode }}</text>
+            <u-icon class="arrow_down" name="arrow-down"></u-icon>
+          </view>
+        </u-input>
+      </u-form-item>
+    </u-form>
+    <view class="action_btn">
+      <u-button
+        @click="sendSms"
+        type="primary"
+        :disabled="isRegister && !checked[0]"
+      >
+        {{ isRegister ? "下一步" : "获取验证码" }}
+      </u-button>
+    </view>
+    <AreaPicker ref="AreaPicker" @chooseArea="chooseArea" />
+  </view>
+</template>
+
+<script>
+import AreaPicker from "@/components/AreaPicker";
+import { businessSendSms } from "@/api/login";
+import { SmsUserFor } from "@/constant";
+import { checkLoginError } from "@/util/common";
+export default {
+  components: {
+    AreaPicker,
+  },
+  data() {
+    return {
+      userInfo: {
+        phoneNumber: "",
+        email: "",
+        areaCode: "86",
+        invitationCode: "",
+      },
+      checked: [true],
+      rules: {
+        phoneNumber: [
+          {
+            type: "string",
+            required: true,
+            message: "请输入手机号码",
+            trigger: ["blur", "change"],
+            pattern: /^\d{11}$/,
+          },
+        ],
+      },
+      isRegister: true,
+      pageStatus: "normal",
+    };
+  },
+  onLoad(param) {
+    this.isRegister = JSON.parse(param.isRegister);
+  },
+  methods: {
+    sendSms() {
+      this.$refs.registerForm.validate().then((valid) => {
+        const options = {
+          phoneNumber: this.userInfo.phoneNumber,
+          areaCode: `+${this.userInfo.areaCode}`,
+          usedFor: this.isRegister ? SmsUserFor.Register : SmsUserFor.Reset,
+          invitationCode: this.userInfo.invitationCode,
+        };
+        businessSendSms(options)
+          .then(() => {
+            uni.$u.toast("验证码已发送！");
+            setTimeout(
+              () =>
+                uni.$u.route("/pages/login/verifyCode/index", {
+                  userInfo: JSON.stringify(this.userInfo),
+                  isRegister: this.isRegister,
+                }),
+              1000,
+            );
+          })
+          .catch((err) => {
+            console.error(err);
+            uni.$u.toast(checkLoginError(err));
+          });
+      });
+    },
+    back() {
+      uni.$u.route("/pages/login/index");
+    },
+    showPicker() {
+      this.$refs.AreaPicker.init();
+    },
+    chooseArea(areaCode) {
+      this.userInfo.areaCode = areaCode;
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.register_container {
+  margin-top: var(--status-bar-height);
+  background: linear-gradient(
+    180deg,
+    rgba(0, 137, 255, 0.1) 0%,
+    rgba(255, 255, 255, 0) 100%
+  );
+
+  .title {
+    font-size: 44rpx;
+    font-weight: 600;
+    color: $u-primary;
+  }
+
+  .action_btn {
+    padding-top: 20vh;
+  }
+}
+</style>

pages/login/setPassword/index.vue

@@ -0,0 +1,174 @@
+<template>
+  <view class="set_password_container content_with_back">
+    <view class="title">重置密码</view>
+    <u-form
+      class="loginForm commonPage-form"
+      labelPosition="top"
+      :model="formData"
+      :rules="rules"
+      :labelStyle="{
+        fontSize: '14px',
+        marginTop: '20rpx',
+        minWidth: '200rpx',
+      }"
+      ref="loginForm"
+    >
+      <u-form-item label="密码" prop="password">
+        <u-input
+          v-model="formData.password"
+          border="surround"
+          placeholder="请输入密码"
+          :password="!passwordEying"
+        >
+          <u-icon
+            @click="updateEye('passwordEying')"
+            slot="suffix"
+            :name="passwordEying ? 'eye-off' : 'eye'"
+          ></u-icon>
+        </u-input>
+      </u-form-item>
+      <view class="feild_desc">6～20位，至少包含数字、字母</view>
+      <u-form-item label="确认密码" prop="confirmPassword">
+        <u-input
+          v-model="formData.confirmPassword"
+          border="surround"
+          placeholder="请输入密码"
+          :password="!comfirmEying"
+        >
+          <u-icon
+            @click="updateEye('comfirmEying')"
+            slot="suffix"
+            :name="comfirmEying ? 'eye-off' : 'eye'"
+          ></u-icon>
+        </u-input>
+      </u-form-item>
+    </u-form>
+    <view class="action_btn">
+      <u-button type="primary" @click="doNext">
+        确认修改
+      </u-button>
+    </view>
+  </view>
+</template>
+
+<script>
+import { businessReset } from "@/api/login";
+export default {
+  data() {
+    return {
+      isRegister: false,
+      codeValue: "",
+      userInfo: {
+        phoneNumber: "",
+        areaCode: "",
+      },
+      formData: {
+        password: "",
+        confirmPassword: "",
+      },
+      passwordEying: false,
+      comfirmEying: false,
+      rules: {
+        password: [
+          {
+            type: "string",
+            required: true,
+            message: "请输入密码",
+            trigger: ["blur", "change"],
+            pattern: /^(?=.*\d)(?=.*[a-zA-Z]).{7,}$/,
+          },
+          {
+            validator: (rule, value, callback) => {
+              return value.length >= 6;
+            },
+            message: "密码太短",
+            trigger: ["change", "blur"],
+          },
+        ],
+        confirmPassword: [
+          {
+            type: "string",
+            required: true,
+            message: "请输入确认密码",
+            trigger: ["blur", "change"],
+            pattern: /^(?=.*\d)(?=.*[a-zA-Z]).{7,}$/,
+          },
+          {
+            validator: (rule, value, callback) => {
+              return value === this.formData.password;
+            },
+            message: "两次密码不一致",
+            trigger: ["change", "blur"],
+          },
+        ],
+      },
+    };
+  },
+  onLoad(options) {
+    const { userInfo, isRegister, codeValue } = options;
+    this.userInfo = JSON.parse(userInfo);
+    this.isRegister = JSON.parse(isRegister);
+    this.codeValue = codeValue;
+  },
+  onBackPress() {
+    return true;
+  },
+  methods: {
+    doNext() {
+      this.$refs.loginForm.validate().then((valid) => {
+        if (valid) {
+          const options = {
+            phoneNumber: this.userInfo.phoneNumber,
+            areaCode: `+${this.userInfo.areaCode}`,
+            VerifyCode: this.codeValue,
+            password: this.formData.password,
+            platform: uni.$u.os() === "ios" ? 1 : 2,
+            operationID: Date.now() + "",
+          };
+          businessReset(options)
+            .then(() => {
+              uni.$u.toast("密码重置成功，请前往登录！");
+              setTimeout(() => uni.$u.route("/pages/login/index"), 1000);
+            })
+            .catch((err) => {
+              console.log('err', err)
+              uni.$u.toast("密码重置失败")
+            });
+        }
+      });
+    },
+    updateEye(key) {
+      this[key] = !this[key];
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.set_password_container {
+  margin-top: var(--status-bar-height);
+  background: linear-gradient(
+    180deg,
+    rgba(0, 137, 255, 0.1) 0%,
+    rgba(255, 255, 255, 0) 100%
+  );
+  padding-top: 150rpx;
+
+  .title {
+    font-size: 34rpx;
+    font-weight: 600;
+    margin-bottom: 116rpx;
+    padding-bottom: 8rpx;
+    color: $u-primary;
+  }
+
+  .feild_desc {
+    font-size: 24rpx;
+    color: $u-tips-color;
+    margin-top: 4rpx;
+  }
+
+  .action_btn {
+    margin-top: 12vh;
+  }
+}
+</style>

pages/login/setSelfInfo/index.vue

@@ -0,0 +1,217 @@
+<template>
+  <view class="set_info_container content_with_back">
+    <view class="title">设置信息</view>
+    <u-form
+      class="loginForm commonPage-form"
+      labelPosition="top"
+      :model="userInfo"
+      :rules="rules"
+      :labelStyle="{
+        fontSize: '14px',
+        marginTop: '20rpx',
+        minWidth: '200rpx',
+      }"
+      ref="loginForm"
+    >
+      <u-form-item label="昵称" prop="nickname">
+				<u-input
+				  v-model="userInfo.nickname"
+				  border="surround"
+				  placeholder="请输入您的昵称"
+					clearable
+				>
+				</u-input>
+      </u-form-item>
+      <u-form-item label="密码" prop="password">
+        <u-input
+          v-model="userInfo.password"
+          border="surround"
+          placeholder="请输入密码"
+          :password="!passwordEying"
+        >
+          <u-icon
+            @click="updateEye('passwordEying')"
+            slot="suffix"
+            :name="passwordEying ? 'eye-off' : 'eye'"
+          ></u-icon>
+        </u-input>
+      </u-form-item>
+      <view class="feild_desc">6～20位，至少包含数字、字母</view>
+      <u-form-item label="确认密码" prop="confirmPassword">
+        <u-input
+          v-model="userInfo.confirmPassword"
+          border="surround"
+          placeholder="请输入密码"
+          :password="!comfirmEying"
+        >
+          <u-icon
+            @click="updateEye('comfirmEying')"
+            slot="suffix"
+            :name="comfirmEying ? 'eye-off' : 'eye'"
+          ></u-icon>
+        </u-input>
+      </u-form-item>
+    </u-form>
+    <view class="btn">
+      <u-button :loading="loading" type="primary" @click="doNext">
+        进入OpenIM
+      </u-button>
+    </view>
+  </view>
+</template>
+
+<script>
+import md5 from "md5";
+import MyAvatar from "@/components/MyAvatar/index.vue";
+import { businessRegister } from "@/api/login";
+import { checkLoginError } from "@/util/common";
+export default {
+  components: {
+    MyAvatar,
+  },
+  data() {
+    return {
+      loading: false,
+      passwordEying: false,
+      comfirmEying: false,
+      codeValue: "",
+      userInfo: {
+        phoneNumber: "",
+        areaCode: "",
+        nickname: "",
+        password: "",
+        confirmPassword: "",
+      },
+      rules: {
+        nickname: [
+          {
+            type: "string",
+            required: true,
+            message: "请填写真实姓名",
+            trigger: ["blur", "change"],
+          },
+        ],
+        password: [
+          {
+            type: "string",
+            required: true,
+            message: "请输入密码",
+            trigger: ["blur", "change"],
+            pattern: /^(?=.*\d)(?=.*[a-zA-Z]).{7,}$/,
+          },
+          {
+            validator: (rule, value, callback) => {
+              return value.length >= 6;
+            },
+            message: "密码太短",
+            trigger: ["change", "blur"],
+          },
+        ],
+        confirmPassword: [
+          {
+            type: "string",
+            required: true,
+            message: "请输入确认密码",
+            trigger: ["blur", "change"],
+            pattern: /^(?=.*\d)(?=.*[a-zA-Z]).{7,}$/,
+          },
+          {
+            validator: (rule, value, callback) => {
+              return value === this.formData.password;
+            },
+            message: "两次密码不一致",
+            trigger: ["change", "blur"],
+          },
+        ],
+      },
+    };
+  },
+  onLoad(options) {
+    const { userInfo, codeValue } = options;
+    this.userInfo = {
+      ...this.userInfo,
+      ...JSON.parse(userInfo),
+    };
+    this.codeValue = codeValue;
+  },
+  onBackPress() {
+    return true;
+  },
+  methods: {
+    updateEye(key) {
+      this[key] = !this[key];
+    },
+    doNext() {
+      this.$refs.loginForm.validate().then((valid) => {
+        if (valid) {
+          this.doRegister();
+        }
+      });
+    },
+    async doRegister() {
+      this.loading = true;
+      const options = {
+        verifyCode: this.codeValue,
+        platform: uni.$u.os() === "ios" ? 1 : 2,
+        autoLogin: true,
+        user: {
+          ...this.userInfo,
+          areaCode: `+${this.userInfo.areaCode}`,
+          password: md5(this.userInfo.password),
+        },
+      };
+      try {
+        await businessRegister(options);
+        this.saveLoginInfo();
+        uni.$u.toast('注册成功')
+        uni.$u.route("/pages/login/index")
+      } catch (err) {
+        console.log(err);
+        uni.$u.toast(checkLoginError(err));
+        // uni.$u.toast('注册失败')
+      } finally {
+        this.loading = false;
+      }
+    },
+    saveLoginInfo() {
+      uni.setStorage({
+        key: "lastPhoneNumber",
+        data: this.userInfo.phoneNumber,
+      });
+      uni.setStorage({
+        key: "lastAreaCode",
+        data: this.userInfo.areaCode,
+      });
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.set_info_container {
+  margin-top: var(--status-bar-height);
+  background: linear-gradient(
+    180deg,
+    rgba(0, 137, 255, 0.1) 0%,
+    rgba(255, 255, 255, 0) 100%
+  );
+  padding-top: 150rpx;
+
+  .title {
+    font-size: 34rpx;
+    font-weight: 600;
+    margin-bottom: 116rpx;
+    padding-bottom: 8rpx;
+    color: $u-primary;
+  }
+
+  .feild_desc {
+    font-size: 24rpx;
+    color: $u-tips-color;
+    margin-top: 4rpx;
+  }
+
+  .btn {
+    margin-top: 200rpx;
+  }
+}
+</style>

pages/login/verifyCode/index.vue

@@ -0,0 +1,162 @@
+<template>
+  <view class="verify_code content_with_back">
+    <view class="back_icon">
+      <u-icon name="arrow-left" bold size="22" @click="back" />
+    </view>
+    <view class="title">验证码已发送至手机</view>
+    <view class="sub_title">
+      {{ `+${userInfo.areaCode} ${userInfo.phoneNumber}` }}
+    </view>
+    <view class="code_container">
+      <!-- <view class="code_title">请输入验证码</view> -->
+      <u-code-input
+        fontSize="24"
+        color="#000"
+        :focus="true"
+        v-model="codeValue"
+        hairline
+        space="16"
+        @finish="checkCode"
+      />
+      <view class="code_des">
+        <text>
+          {{ `${count}s` }}
+        </text>
+        后
+        <text @click="getSmsAgain"> 重发验证码 </text>
+      </view>
+    </view>
+  </view>
+</template>
+<script>
+import { businessSendSms, businessVerifyCode } from "@/api/login";
+import { SmsUserFor } from "@/constant";
+import { checkLoginError } from "@/util/common";
+let timer;
+export default {
+  data() {
+    return {
+      codeValue: "",
+      count: 60,
+      userInfo: {
+        phoneNumber: "",
+        areaCode: "",
+      },
+      isRegister: false,
+    };
+  },
+  onLoad(options) {
+    const { userInfo, isRegister } = options;
+    this.userInfo = JSON.parse(userInfo);
+    this.isRegister = JSON.parse(isRegister);
+    this.startCount();
+  },
+  onReady() {},
+  methods: {
+    back() {
+      uni.$u.route("/pages/login/registerOrForget/index", {
+        isRegister: this.isRegister,
+      });
+    },
+    checkCode(value) {
+      const options = {
+        phoneNumber: this.userInfo.phoneNumber,
+        areaCode: `+${this.userInfo.areaCode}`,
+        usedFor: this.isRegister ? SmsUserFor.Register : SmsUserFor.Reset,
+        verifyCode: value,
+      };
+      businessVerifyCode(options)
+        .then(() => {
+          if(this.isRegister){
+            uni.$u.route("/pages/login/setSelfInfo/index", {
+              userInfo: JSON.stringify(this.userInfo),
+              isRegister: this.isRegister,
+              codeValue: this.codeValue,
+            });
+          }else{
+            uni.$u.route("/pages/login/setPassword/index", {
+              userInfo: JSON.stringify(this.userInfo),
+              isRegister: !this.isRegister,
+              codeValue: this.codeValue,
+            });
+          }
+        })
+        .catch((err) => {
+          uni.$u.toast(checkLoginError(err));
+          // uni.$u.toast('验证失败')
+        });
+    },
+    startCount() {
+      if (timer) {
+        clearInterval(timer);
+      }
+      timer = setInterval(() => {
+        if (this.count > 0) {
+          this.count--;
+        }
+      }, 1000);
+    },
+    getSmsAgain() {
+      if (this.count === 0) {
+        const options = {
+          phoneNumber: this.userInfo.phoneNumber,
+          areaCode: `+${this.userInfo.areaCode}`,
+          usedFor: this.isRegister ? SmsUserFor.Register : SmsUserFor.Reset,
+        };
+        businessSendSms(options)
+          .then(() => {
+            this.count = 60;
+            this.startCount();
+            uni.$u.toast("验证码已发送！");
+          })
+          .catch((err) => uni.$u.toast("验证码发送失败"));
+      }
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.verify_code {
+  margin-top: var(--status-bar-height);
+  background: linear-gradient(
+    180deg,
+    rgba(0, 137, 255, 0.1) 0%,
+    rgba(255, 255, 255, 0) 100%
+  );
+
+  .title {
+    padding-bottom: 6rpx;
+    font-size: 44rpx;
+    font-weight: 600;
+    color: $u-primary;
+  }
+
+  .sub_title {
+    font-size: 24rpx;
+    color: $u-tips-color;
+    margin-top: 6rpx;
+  }
+
+  .code_container {
+    .code_title {
+      font-size: 28rpx;
+      margin-bottom: 24rpx;
+    }
+
+    .code_des {
+      margin-top: 24rpx;
+      font-size: 24rpx;
+      color: $u-tips-color;
+
+      .blue_text {
+        color: $u-primary;
+
+        &:nth-child(2) {
+          margin-left: 12rpx;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+}
+</style>

pages/profile/about/index.vue

@@ -0,0 +1,144 @@
+<template>
+  <view class="page_container">
+    <custom-nav-bar title="关于我们" />
+    <view class="logo_area">
+      <image src="@/static/images/about_logo.png" mode=""></image>
+      <view>{{ v }}</view>
+
+      <info-item
+        @click="show = true"
+        class="check"
+        title="上传调试日志"
+        content=""
+      />
+
+      <u-modal showCancelButton :show="show" title="上传日志" @confirm="uploadLog" @cancel="show = false" >
+        <view class="slot-content">
+          <u--input
+            placeholder="日志数量"
+            border="surround"
+            v-model="line"
+          ></u--input>
+        </view>
+      </u-modal>
+    </view>
+  </view>
+</template>
+
+<script>
+import IMSDK from "openim-uniapp-polyfill";
+import { version } from '@/common/config'
+import CustomNavBar from "@/components/CustomNavBar/index.vue";
+import { PageEvents } from "@/constant";
+import InfoItem from "../selfInfo/InfoItem.vue";
+export default {
+  components: {
+    CustomNavBar,
+    InfoItem,
+  },
+  data() {
+    return {
+      show: false,
+      line: 10000,
+      version: "",
+      loading: false,
+    };
+  },
+  computed: {
+    v(){
+      return version
+    }
+  },
+  onLoad() {
+    this.getAppVersion();
+    uni.$on(PageEvents.CheckForUpdateResp, this.checkRespHandler);
+  },
+  onUnload() {
+    uni.$off(PageEvents.CheckForUpdateResp, this.checkRespHandler);
+  },
+  mounted() {
+    IMSDK.subscribe('uploadLogsProgress', this.uploadHandler);
+  },
+  beforeDestroy() {
+    IMSDK.unsubscribe('uploadLogsProgress', this.uploadHandler);
+  },
+  methods: {
+    uploadLog() {
+      this.show = false
+      IMSDK.asyncApi(
+        'uploadLogs',
+        IMSDK.uuid(),
+        {
+          line: this.line,
+          ex: ""
+        }
+      )
+      uni.showLoading({
+        title: '上传中',
+        mask: true,
+      });
+    },
+    uploadHandler({
+      data: { current, size },
+    }) {
+      console.log('uploadHandler',current,size)
+      if (current >= size) {
+        uni.hideLoading();
+        uni.showToast({
+          title: "上传成功",
+          icon: "none",
+        });
+        return;
+      }
+    },
+    getAppVersion() {
+      plus.runtime.getProperty(
+        plus.runtime.appid,
+        ({ version }) => (this.appVersion = version),
+      );
+    },
+    updateCheck() {
+      this.loading = true;
+      uni.$emit(PageEvents.CheckForUpdate, true);
+    },
+    checkRespHandler() {
+      this.loading = false;
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.page_container {
+  background-color: #f8f8f8;
+
+  .logo_area {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 24rpx 24rpx 0 24rpx;
+    background: #fff;
+    border-radius: 6px;
+    padding: 48rpx 0 16rpx 0;
+    color: $uni-text-color;
+
+    image {
+      width: 72px;
+      height: 72px;
+      margin-bottom: 24rpx;
+    }
+  }
+
+  .check {
+    margin-top: 26rpx;
+    border-top: 1px #e8eaef solid;
+    padding: 20rpx;
+    padding-bottom: 0;
+    width: 90%;
+  }
+
+  .btn_row {
+    padding: 0 44rpx;
+  }
+}
+</style>

pages/profile/accountSetting/index.vue

@@ -0,0 +1,52 @@
+<template>
+  <view class="page_container">
+    <custom-nav-bar title="账号设置" />
+
+    <view class="info_wrap">
+      <setting-item @click="toBlockList" title="通讯录黑名单" :border="false" />
+    </view>
+
+  </view>
+</template>
+
+<script>
+import CustomNavBar from "@/components/CustomNavBar/index.vue";
+import MyAvatar from "@/components/MyAvatar/index.vue";
+import SettingItem from "@/components/SettingItem/index.vue";
+export default {
+  components: {
+    CustomNavBar,
+    MyAvatar,
+    SettingItem,
+  },
+  data() {
+    return {
+     
+    };
+  },
+  methods: {
+    toBlockList() {
+      uni.navigateTo({
+        url: "/pages/profile/blockList/index",
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.page_container {
+  background-color: #f8f8f8;
+
+  .info_wrap {
+    background-color: #fff;
+    margin: 24rpx 24rpx 0 24rpx;
+    border-radius: 6px;
+
+    .qr_icon {
+      width: 22px;
+      height: 23px;
+    }
+  }
+}
+</style>

pages/profile/blockList/index.vue

@@ -0,0 +1,117 @@
+<template>
+  <view class="page_container">
+    <custom-nav-bar title="通讯录黑名单" />
+
+    <u-list v-if="blockList.length > 0" class="block_list" height="1">
+      <u-list-item v-for="item in blockList" :key="item.userID">
+        <user-item :item="item">
+          <view @click="tryRemove(item)" class="user_action" slot="action">
+            移除
+          </view>
+        </user-item>
+      </u-list-item>
+    </u-list>
+
+    <view v-else class="empty">
+      <image src="@/static/images/block_empty.png"></image>
+      <text class="empty_text">暂无黑名单</text>
+    </view>
+    <!-- <u-empty icon="/static/images/block_empty.png" v-else text="暂无黑名单" iconSize="20" /> -->
+
+    <u-modal
+      width="500rpx"
+      showCancelButton
+      :show="showComfirm"
+      @confirm="confirm"
+      @cancel="closeModal"
+      content="确定将用户移除黑名单吗？"
+      :asyncClose="true"
+    ></u-modal>
+  </view>
+</template>
+
+<script>
+import IMSDK from "openim-uniapp-polyfill";
+import CustomNavBar from "@/components/CustomNavBar/index.vue";
+import MyAvatar from "@/components/MyAvatar/index.vue";
+import UserItem from "@/components/UserItem/index.vue";
+export default {
+  components: {
+    CustomNavBar,
+    MyAvatar,
+    UserItem,
+  },
+  data() {
+    return {
+      showComfirm: false,
+      selectedUser: {},
+    };
+  },
+  computed: {
+    blockList() {
+      return this.$store.getters.storeBlackList;
+    },
+  },
+  methods: {
+    tryRemove(item) {
+      this.selectedUser = {
+        ...item,
+      };
+      this.showComfirm = true;
+    },
+    confirm() {
+      IMSDK.asyncApi(
+        IMSDK.IMMethods.RemoveBlack,
+        IMSDK.uuid(),
+        this.selectedUser.userID,
+      )
+        .then(() => uni.$u.toast("移除成功"))
+        .catch(() => uni.$u.toast("移除失败"))
+        .finally(() => (this.showComfirm = false));
+    },
+    closeModal() {
+      this.showComfirm = false;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.page_container {
+  @include colBox(false);
+  height: 100vh;
+  background-color: #f8f8f8;
+
+  .block_list {
+    flex: 1;
+    margin-top: 24rpx;
+
+    .user_item {
+      background-color: #fff;
+    }
+
+    .user_action {
+      position: absolute;
+      right: 44rpx;
+      font-size: 28rpx;
+      color: $uni-color-primary;
+    }
+  }
+
+  .empty {
+    @include centerBox();
+    flex-direction: column;
+    margin-top: 25vh !important;
+
+    &_text {
+      margin-top: 26rpx;
+      color: #8e9ab0;
+    }
+
+    image {
+      width: 237rpx;
+      height: 244rpx;
+    }
+  }
+}
+</style>

pages/profile/index/index.vue

@@ -0,0 +1,238 @@
+<template>
+  <view class="page_container">
+    <view class="self_info_row"></view>
+
+    <view class="info_card">
+      <my-avatar :src="selfInfo.faceURL" :desc="selfInfo.nickname" size="46" />
+
+      <view class="id_row">
+        <text class="nickname">{{ selfInfo.nickname }}</text>
+        <view class="id_row_copy" @click="copy">
+          <text class="id">{{ selfInfo.userID }}</text>
+          <image
+            style="width: 32rpx; height: 32rpx"
+            src="@/static/images/id_copy.png"
+            mode=""
+          />
+        </view>
+      </view>
+
+      <view class="qr" @click="toSelfQr">
+        <img src="static/images/self_info_qr.png" alt="" />
+        <img src="static/images/common_right.png" alt="" />
+      </view>
+    </view>
+
+    <view class="action_box">
+      <view
+        @click="profileMenuClick(item)"
+        class="profile_menu_item"
+        v-for="item in profileMenus"
+        :key="item.idx"
+      >
+        <view class="menu_left">
+          <image style="width: 48rpx; height: 48rpx" :src="item.icon" mode="" />
+          <text>{{ item.title }}</text>
+        </view>
+        <u-icon name="arrow-right" size="16" color="#999"></u-icon>
+      </view>
+    </view>
+
+    <u-toast ref="uToast"></u-toast>
+  </view>
+</template>
+
+<script>
+import IMSDK from "openim-uniapp-polyfill";
+import MyAvatar from "@/components/MyAvatar/index.vue";
+export default {
+  components: {
+    MyAvatar,
+  },
+  data() {
+    return {
+      profileMenus: [
+        {
+          idx: 0,
+          title: "我的信息",
+          icon: require("static/images/profile_menu_info.png"),
+        },
+        {
+          idx: 2,
+          title: "账号设置",
+          icon: require("static/images/profile_menu_account.png"),
+        },
+        {
+          idx: 3,
+          title: "关于我们",
+          icon: require("static/images/profile_menu_about.png"),
+        },
+        {
+          idx: 4,
+          title: "退出登录",
+          icon: require("static/images/profile_menu_logout.png"),
+        },
+      ],
+    };
+  },
+  computed: {
+    selfInfo() {
+      return this.$store.getters.storeSelfInfo;
+    },
+  },
+  methods: {
+    copy() {
+      uni.setClipboardData({
+        showToast: false,
+        data: this.selfInfo.userID,
+        success: function () {
+          uni.showToast({
+            icon: "none",
+            title: "复制成功",
+          });
+        },
+      });
+    },
+    logoutConfirm() {
+      IMSDK.asyncApi(IMSDK.IMMethods.Logout, IMSDK.uuid())
+        .then(() => {
+          uni.removeStorage({
+            key: "IMToken",
+          });
+          uni.removeStorage({
+            key: "BusinessToken",
+          });
+        })
+        .catch((err) => console.log(err))
+        .finally(() => {
+          uni.$u.route("/pages/login/index");
+        });
+    },
+    profileMenuClick({ idx }) {
+      switch (idx) {
+        case 0:
+          uni.navigateTo({
+            url: "/pages/profile/selfInfo/index",
+          });
+          break;
+        case 1:
+          uni.navigateTo({
+            url: "/pages/profile/messageNotification/index",
+          });
+          break;
+        case 2:
+          uni.navigateTo({
+            url: "/pages/profile/accountSetting/index",
+          });
+          break;
+        case 3:
+          uni.navigateTo({
+            url: "/pages/profile/about/index",
+          });
+          break;
+        case 4:
+          uni.showModal({
+            title: "提示",
+            content: "确定要退出当前账号吗？",
+            confirmText: "确认",
+            cancelText: "取消",
+            success: (res) => {
+              if (res.confirm) {
+                this.logoutConfirm();
+              }
+            },
+          });
+          break;
+        default:
+          break;
+      }
+    },
+    toSelfQr() {
+      uni.navigateTo({
+        url: `/pages/common/userOrGroupQrCode/index`,
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.page_container {
+  background-color: #f8f9fa;
+
+  .self_info_row {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    align-items: center;
+    width: 100%;
+    height: 276rpx;
+    background-image: url("@/static/images/profile_top_bg.png");
+    background-repeat: round;
+  }
+
+  .info_card {
+    width: 640rpx;
+    height: 196rpx;
+    border-radius: 6px;
+    background: #fff;
+    margin: -120rpx auto 0 auto;
+    padding: 0 36rpx;
+    color: #0c1c33;
+    display: flex;
+    align-items: center;
+
+    .id_row {
+      @include vCenterBox();
+      display: flex;
+      height: 46px;
+      margin-left: 16rpx;
+      flex-direction: column;
+      align-items: flex-start;
+      justify-content: space-between;
+      flex: 1;
+      font-size: 28rpx;
+
+      &_copy {
+        @include vCenterBox();
+      }
+
+      .nickname {
+        @include nomalEllipsis();
+        max-width: 400rpx;
+        font-weight: 500;
+        font-size: 34rpx;
+      }
+
+      .id {
+        color: #8e9ab0;
+      }
+    }
+
+    img {
+      width: 18px;
+      height: 18px;
+    }
+  }
+
+  .action_box {
+    margin: 24rpx 24rpx 0 24rpx;
+    background: #fff;
+    border-radius: 6px;
+  }
+
+  .profile_menu_item {
+    @include btwBox();
+    padding: 24rpx 36rpx;
+
+    .menu_left {
+      @include vCenterBox();
+      color: $uni-text-color;
+
+      image {
+        margin-right: 24rpx;
+      }
+    }
+  }
+}
+</style>

pages/profile/selfInfo/InfoItem.vue

@@ -0,0 +1,74 @@
+<template>
+  <view @click="clickItem" class="info_item">
+    <view class="left_label">
+      <text>{{ title }}</text>
+    </view>
+    <view class="right_value">
+      <slot name="value">
+        <text class="content">{{ content }}</text>
+      </slot>
+      <u-icon
+        v-if="showArrow"
+        name="arrow-right"
+        size="16"
+        color="#999"
+      ></u-icon>
+    </view>
+    <u-loading-icon v-show="loading" class="loading_icon"></u-loading-icon>
+  </view>
+</template>
+
+<script>
+export default {
+  name: "",
+  props: {
+    title: String,
+    content: String,
+    showArrow: {
+      type: Boolean,
+      default: true,
+    },
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    clickItem() {
+      this.$emit("click");
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.info_item {
+  @include btwBox();
+  height: 82rpx;
+  padding: 0 44rpx;
+  color: $uni-text-color;
+  // border-bottom: 1px solid rgba(153,153,153,0.3);
+  position: relative;
+
+  .right_value {
+    @include vCenterBox();
+    .content {
+      font-size: 28rpx;
+      color: #999;
+    }
+    .u-icon {
+      margin-left: 12rpx;
+    }
+  }
+
+  .loading_icon {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
+}
+</style>

pages/profile/selfInfo/index.vue

@@ -0,0 +1,216 @@
+<template>
+  <view class="page_container">
+    <custom-nav-bar title="个人资料" />
+
+    <view class="info_wrap">
+      <info-item
+        :loading="loadingState.faceURL"
+        @click="updateAvatar"
+        title="头像"
+      >
+        <my-avatar
+          :src="selfInfo.faceURL"
+          :desc="selfInfo.nickname"
+          size="30"
+          slot="value"
+        />
+      </info-item>
+      <info-item
+        @click="updateNickname"
+        title="姓名"
+        :content="selfInfo.nickname"
+      />
+      <info-item
+        :loading="loadingState.gender"
+        @click="updateGender"
+        title="性别"
+        :content="getGender"
+      />
+      <info-item
+        :loading="loadingState.birth"
+        @click="() => (showDatePicker = true)"
+        title="生日"
+        :content="getBirth"
+      />
+    </view>
+
+    <view class="info_wrap">
+      <info-item
+        :showArrow="false"
+        title="手机号码"
+        :content="selfInfo.phoneNumber || '-'"
+      />
+      <info-item
+        :showArrow="false"
+        title="邮箱"
+        :content="selfInfo.email || '-'"
+      />
+    </view>
+
+    <u-datetime-picker
+      :minDate="0"
+      :maxDate="nowDate"
+      :show="showDatePicker"
+      @confirm="confirmDate"
+      @cancel="() => (showDatePicker = false)"
+      v-model="selfInfo.birth"
+      mode="date"
+    />
+  </view>
+</template>
+
+<script>
+import { businessInfoUpdate } from "@/api/login";
+import IMSDK from "openim-uniapp-polyfill";
+import CustomNavBar from "@/components/CustomNavBar/index.vue";
+import MyAvatar from "@/components/MyAvatar/index.vue";
+import dayjs from "dayjs";
+import InfoItem from "./InfoItem.vue";
+import { getPurePath } from "@/util/common";
+export default {
+  components: {
+    CustomNavBar,
+    MyAvatar,
+    InfoItem,
+  },
+  data() {
+    return {
+      showDatePicker: false,
+      loadingState: {
+        faceURL: false,
+        gender: false,
+        birth: false,
+      },
+      nowDate: Date.now(),
+    };
+  },
+  computed: {
+    selfInfo() {
+      return this.$store.getters.storeSelfInfo;
+    },
+    getGender() {
+      if (this.selfInfo.gender === 0) {
+        return "保密";
+      }
+      if (this.selfInfo.gender === 1) {
+        return "男";
+      }
+      return "女";
+    },
+    getBirth() {
+      const birth = this.selfInfo.birth ?? 0;
+      return dayjs(birth).format("YYYY-MM-DD");
+    },
+  },
+  methods: {
+    updateNickname() {
+      uni.navigateTo({
+        url: `/pages/common/markOrIDPage/index?isSelfNickname=true&sourceInfo=${JSON.stringify(
+          this.selfInfo,
+        )}`,
+      });
+    },
+    updateGender() {
+      uni.showActionSheet({
+        itemList: ["男", "女"],
+        success: async ({ tapIndex }) => {
+          this.loadingState.gender = true;
+          await this.updateSelfInfo(
+            {
+              gender: tapIndex + 1,
+            },
+            "gender",
+          );
+        },
+      });
+    },
+    updateAvatar() {
+      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);
+          this.loadingState.faceURL = true;
+          const {
+            data: { url },
+          } = await IMSDK.asyncApi(IMSDK.IMMethods.UploadFile, IMSDK.uuid(), {
+            filepath: getPurePath(tempFilePaths[0]),
+            name: fileName,
+            contentType: fileType,
+            uuid: IMSDK.uuid(),
+          });
+          console.log(url);
+          this.updateSelfInfo(
+            {
+              faceURL: url,
+            },
+            "faceURL",
+          );
+          this.loadingState.faceURL = false;
+        },
+      });
+    },
+    toQrCode() {
+      uni.navigateTo({
+        url: `/pages/common/userOrGroupQrCode/index`,
+      });
+    },
+    copyID() {
+      uni.setClipboardData({
+        data: this.selfInfo.userID,
+        success: () => {
+          uni.hideToast();
+          this.$nextTick(() => {
+            uni.$u.toast("复制成功");
+          });
+        },
+      });
+    },
+    async updateSelfInfo(data, key) {
+      try {
+        await businessInfoUpdate({
+          userID: this.selfInfo.userID,
+          ...data,
+        });
+        await this.$store.dispatch("user/updateBusinessInfo");
+        uni.$u.toast("修改成功");
+      } catch (e) {
+        console.log(e);
+        uni.$u.toast("修改失败");
+      }
+      this.loadingState[key] = false;
+    },
+    confirmDate({ value }) {
+      this.loadingState.birth = true;
+      this.updateSelfInfo(
+        {
+          birth: value,
+        },
+        "birth",
+      );
+      this.showDatePicker = false;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.page_container {
+  background-color: #f8f8f8;
+
+  .info_wrap {
+    margin: 24rpx 24rpx 0 24rpx;
+    background: #fff;
+    border-radius: 6px;
+
+    .qr_icon {
+      width: 22px;
+      height: 23px;
+    }
+  }
+}
+</style>

pages/workbench/index/index.vue

@@ -0,0 +1,31 @@
+<template>
+  <web-view :src="linkUrl"></web-view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      linkUrl: "",
+    };
+  },
+  onShow() {
+    this.linkUrl = 'https://doc.rentsoft.cn/'
+  },
+  onReady() {
+    // #ifdef APP-PLUS
+    setTimeout(() => {
+      this.$scope
+        .$getAppWebview()
+        .children()[0]
+        .setStyle({
+          top: uni.getWindowInfo().statusBarHeight,
+          height: uni.getWindowInfo().safeArea.height,
+        });
+    });
+    // #endif
+  },
+};
+</script>
+
+<style lang="scss"></style>