im-uniapp/pages/conversation/chating/components/ChatingHeader.vue

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