yijianbao_user_uniapp/pages_im/pages/moments/index/components/MomentsHeader.vue

<template>
  <view class="top_container">
    <u-navbar
      title="工作圈"
      placeholder
      :class="{ transparent_wrap: needTransparent }"
    >
      <view v-if="!showBack" class="action_bar" slot="right">
        <image :src="commentIcon" @click="showNotificatons" />
        <u-badge v-show="unreadCount > 0" isDot></u-badge>
        <image class="more_icon" :src="moreIcon" @click="showMore" />
      </view>
      <view slot="left">
        <u-icon
          @click="goBack"
          name="arrow-left"
          :color="needTransparent ? '#fff' : '#333'"
          size="24"
        ></u-icon>
        <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>
    </u-navbar>
    <view class="info_row">
      <my-avatar
        size="48"
        :src="
          showBack ? baseUserInfo.faceURL : $store.getters.storeSelfInfo.faceURL
        "
        :desc="
          showBack
            ? baseUserInfo.nickname
            : $store.getters.storeSelfInfo.nickname
        "
        @click="$emit('topbarClick')"
      />
      <view class="info_name" @click="$emit('topbarClick')">
        {{
          showBack
            ? baseUserInfo.nickname
            : $store.getters.storeSelfInfo.nickname
        }}
      </view>
    </view>
    <view
      v-show="unreadCount > 0 && !showBack"
      class="new_message_btn"
      @click="showNotificatons"
    >
      {{ `${unreadCount}条新消息` }}
    </view>
  </view>
</template>

<script>
import MyAvatar from "../../../../components/MyAvatar/index.vue";
import { PageEvents } from "../../../../constant";
import { getMomentUnreadCount, clearMomentUnreadCount } from "../../../../api/moments";

const moments_top_more = "https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/shop/image/moments_top_more.png";
const moments_top_more_black = "https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/shop/image/moments_top_more_black.png";
const moments_top_coments = "https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/shop/image/moments_top_coments.png";
const moments_top_coments_black = "https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/shop/image/moments_top_coments_black.png";
export default {
  components: {
    MyAvatar,
  },
  props: {
    needTransparent: Boolean,
    showBack: Boolean,
    baseUserInfo: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      moreMenuVisible: false,
      popMenuPosition: {
        top: 0,
        right: 0,
      },
      moreMenus: [
        {
          idx: 0,
          title: "发布图文",
          icon: "https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/shop/image/moments_more_pic.png",
        },
        {
          idx: 1,
          title: "发布视频",
          icon: "https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/shop/image/moments_more_video.png",
        },
      ],
      unreadCount: 0,
    };
  },
  computed: {
    moreIcon() {
      return this.needTransparent ? moments_top_more : moments_top_more_black;
    },
    commentIcon() {
      return this.needTransparent
        ? moments_top_coments
        : moments_top_coments_black;
    },
  },
  beforeMount() {
    this.getUnHandlerMessageCount();
    uni.$on(
      PageEvents.RefreshMomentsUnreadCount,
      this.getUnHandlerMessageCount,
    );
  },
  beforeDestroy() {
    uni.$off(
      PageEvents.RefreshMomentsUnreadCount,
      this.getUnHandlerMessageCount,
    );
  },
  methods: {
    clickMenu({ idx }) {
      uni.$u.route("/pages_im/pages/moments/momentsRelease/index", {
        momentsType: idx,
      });
    },
    goBack() {
      uni.navigateBack();
    },
    async showMore() {
      const { right, bottom } = await this.getEl(".more_icon");
      this.popMenuPosition.right = `${
        uni.getWindowInfo().windowWidth - right
      }px`;
      this.popMenuPosition.top = `${bottom + 12}px`;
      this.moreMenuVisible = true;
    },
    showNotificatons() {
      if (this.unreadCount > 0) {
        clearMomentUnreadCount(1);
      }
      uni.$u.route("/pages_im/pages/moments/interactiveMessage/index");
    },
    getEl(el) {
      return new Promise((resolve) => {
        const query = uni.createSelectorQuery().in(this);
        query
          .select(el)
          .boundingClientRect((data) => {
            resolve(data);
          })
          .exec();
      });
    },
    getUnHandlerMessageCount() {
      getMomentUnreadCount().then((data) => {
        console.log(data);
        this.unreadCount = data.total;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.top_container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: var(--status-bar-height);
  padding-bottom: 48rpx;
  height: 444rpx;
  background-image: url("https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/shop/image/moments_bg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-bottom: 24rpx;
  position: relative;

  .back_icon {
    margin-left: 12rpx;
  }

  /deep/.u-navbar__content {
    background-color: #f8f8f8 !important;

    .u-navbar__content__title {
      color: #000;
    }
  }

  /deep/.u-status-bar {
    background-color: #f8f8f8 !important;
  }

  .transparent_wrap {
    /deep/.u-status-bar {
      background-color: transparent !important;
    }

    /deep/.u-navbar__content {
      background-color: transparent !important;

      .u-navbar__content__title {
        color: #fff;
      }
    }
  }

  .action_bar {
    display: flex;
    position: absolute;
    right: 32rpx;

    image {
      width: 22px;
      height: 22px;

      &:last-child {
        margin-left: 32rpx;
      }
    }
  }

  .more_menu {
    position: absolute;
    z-index: 999;
    box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.16);
    width: max-content;
    border-radius: 12rpx;
    background-color: #fff;
    padding: 12rpx 0;

    .menu_item {
      display: flex;
      align-items: center;
      padding: 20rpx 48rpx;
      font-size: 28rpx;
      color: $uni-text-color;
      border-bottom: 1px solid #f0f0f0;

      image {
        width: 16px;
        height: 16px;
        margin-right: 24rpx;
      }

      &:last-child {
        border: none;
      }
    }
  }

  .info_row {
    display: flex;
    align-items: center;
    padding: 0 32rpx;

    .info_name {
      @include nomalEllipsis;
      margin-left: 24rpx;
      color: #fff;
      font-size: 36rpx;
      font-weight: 500;
    }
  }

  .new_message_btn {
    position: absolute;
    bottom: -32rpx;
    left: 50%;
    transform: translate(-50%, 100%);
    padding: 8rpx 28rpx;
    border-radius: 4px;
    background: rgba(22, 25, 28, 0.4);
    color: #fff;
  }
}
</style>