yshop-pro-uniapp/components/Header/index.vue

<!--
    @name: index
    @author: kahu4
    @date: 2023-11-09 10:56
    @description：index
    @update: 2023-11-09 10:56
-->
<script setup>
import { computed, defineProps, ref, toRefs, unref, watch } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { useRouter } from "@/hooks/useRouter";
import { createAnimation } from "@/utils/utils";
import { useScroll } from "@/hooks/useScroll";

const HEADER_HEIGHT = 60 // header高度

const {goBack} = useRouter()
/**
 * @property {String} systemBarAreaBg 系统导航条区域背景颜色
 * @property {String} headerAreaBg header区域背景颜色
 * @property {String} headerAreaTextColor header区域字体
 * @property {Boolean} showReturn 是否展示返回按钮
 * @property {String} returnColor 返回按钮的颜色
 * @property {Number} returnSize 返回按钮的大小
 * @property {Boolean||String} textShadow 字体阴影
 * @property {Boolean} bgChangeByScroll 是否随着页面滚动增加header背景（包括system-bar-area）
 * @property {String} bgChangeColor 滚动时候变换的颜色
 * @property {Number} scrollTop 当前页面高度
 * @property {Boolean} showRight 是否需要右边
 * @property {number} leftWidth 左侧（返回）宽度（设置了此属性title将不再居中）
 *
 */
const props = defineProps({
  scrollTop: {
    type: Number,
    default: () => 0
  },
  systemBarAreaBg: {
    type: String,
    default: () => '#FFFFFF00' // 透明 #FFFFFF00
  },
  headerAreaBg: {
    type: String,
    default: () => '#FFFFFF00' // 透明 #FFFFFF00
  },
  headerAreaTextColor: {
    type: String,
    default: () => '#000000'
  },
  showReturn: {
    type: Boolean,
    default: () => true
  },
  returnColor: {
    type: String,
    default: () => '#000'
  },
  returnSize: {
    type: Number,
    default: () => 16
  },
  textShadow: {
    type: [Boolean, String],
    default: () => false
  },
  bgChangeByScroll: {
    type: Boolean,
    default: () => true
  },
  bgChangeColor: {
    type: String,
    default: () => '#fff'
  },
  propUp: {
    type: Boolean,
    default: () => true
  },
  showRight: {
    type: Boolean,
    default: () => true
  },
  leftWidth: {
    type: Number,
    default: () => 0
  },
  circleBack: {
    type: Boolean,
    default: false
  }
})

const {
  systemBarAreaBg,
  headerAreaBg,
  headerAreaTextColor,
  showReturn,
  returnColor,
  returnSize,
  textShadow,
  bgChangeByScroll,
  bgChangeColor,
  propUp,
  showRight,
  leftWidth,
  scrollTop,
  circleBack
} = toRefs(props)

const emits = defineEmits(['getSystemInfo', 'animation'])


// 高度信息 单位px
const heightInfo = ref({
  safeAreaInsets: {bottom: 0, top: 0, left: 0, right: 0}, // 安全区信息
  statusBarHeight: 0, // 状态栏高度
  screenWidth: 0, // 屏幕内部宽度
  screenHeight: 0, // 屏幕内部高度
})

/**
 * 获取系统信息，设置导航条
 */
function getSystemInfo() {
  const res = uni.getSystemInfoSync();
  const heightObj = unref(heightInfo)
  console.log(heightObj)
  heightObj.safeAreaInsets = res.safeAreaInsets
  heightObj.statusBarHeight = res.statusBarHeight
  heightObj.screenWidth = res.screenWidth || res.windowWidth
  heightObj.screenHeight = res.screenHeight || res.windowHeight
}

// 胶囊信息 单位px
const menuInfo = ref({
  bottom: 0,
  height: 0,
  left: 0,
  right: 0,
  top: 0,
  width: 0
})

/**
 * 获取小程序右上角信息
 */
function getMenuInfo() {
  const menuButtonBoundingClientRect = uni.getMenuButtonBoundingClientRect();
  if (menuButtonBoundingClientRect) {
    menuInfo.value = {...menuButtonBoundingClientRect}
    console.log(menuInfo.value)
  }
}

// scss全局变量
const scssVarStyle = computed(() => {
  return {
    '--header-height': `${ HEADER_HEIGHT }px`
  }
})

// 系统导航条区域样式
const systemBarAreaStyle = computed(() => {
  return {
    width: '100%',
    height: `${ unref(heightInfo).statusBarHeight }px`,
    background: unref(systemBarAreaBg)
  }
})

// header区域样式
const headerAreaStyle = computed(() => {
  // 计算margin top
  // margin-top (导航条高度 - 胶囊高度) / 2 永远确保胶囊在header中央
  let marginTop = 0
  if (unref(menuInfo).height > 0) {
    // buttonMarginTopDiff 此处 胶囊和statusBar是由一个距离的
    const buttonMarginTopDiff = unref(menuInfo).top - unref(heightInfo).statusBarHeight
    marginTop = `${ (-1 * ((HEADER_HEIGHT - unref(menuInfo).height) / 2)) + buttonMarginTopDiff }px`
  }
  return {
    width: '100%',
    background: unref(headerAreaBg),
    color: unref(headerAreaTextColor),
    marginTop
  }
})

const circleBackStyle = computed(() => {
  return {
    height: menuInfo.value.height > 0 ? menuInfo.value.height + 'px' : '32px'
  }
})

// 文本样式
const textShadowStyle = computed(() => {
  return {
    textShadow: unref(textShadow) ? unref(textShadow) : 'none',
  }
})

const titleStyle = computed(() => {
  let width = unref(leftWidth) <= 0 ? '' : `calc( 100vw - var(--side-distance) - var(--side-distance) - ${ leftWidth.value }rpx )`
  // #ifdef MP-WEIXIN
  width = unref(leftWidth) <= 0 ? '' : `calc( 100vw - var(--side-distance) - var(--side-distance) - ${ leftWidth.value }rpx - ${ menuInfo.value.width }px )`
  // #endif
  return {
    width,
    left: unref(leftWidth) <= 0 ? '50%' : `calc( var(--side-distance) + ${ leftWidth.value }rpx )`,
    textShadow: unref(textShadow) ? unref(textShadow) : 'none',
    transform: unref(leftWidth) <= 0 ? 'translateX(-50%) translateY(-50%)' : 'translateX(0) translateY(-50%)'
  }
})

const rightStyle = computed(() => {
  if (menuInfo.value.left > 0) {
    return {
      right: `${ (heightInfo.value.screenWidth - menuInfo.value.right) + menuInfo.value.width + 5 }px`
    }
  }
  return {}
})

// 滚动后背景样式
const scrollMaskStyle = computed(() => {
  return {
    background: unref(bgChangeColor),
    opacity: unref(scrollTransparency)
  }
})

// 总高度
const containerHeight = computed(() => {
  const marginTop = unref(menuInfo).height > 0 ? `${ ((HEADER_HEIGHT - unref(menuInfo).height)) / 2 }` : 0
  return (unref(heightInfo).statusBarHeight + HEADER_HEIGHT - marginTop)
})

let animation
const scrollTransparency = ref(0) // 滚动透明度
function doCreateAnimation() {
  const scrollEnd = heightInfo.value.safeAreaInsets.bottom + HEADER_HEIGHT + 100
  animation = createAnimation(0, scrollEnd, 0, 1)
}

watch(scrollTop, () => {
  if (!bgChangeByScroll.value) return
  if (!animation) doCreateAnimation()
  scrollTransparency.value = animation(unref(scrollTop));
  emits('animation', scrollTransparency.value)
})


defineExpose({containerHeight, heightInfo, menuInfo})

onLoad(() => {
  getSystemInfo()
  doCreateAnimation()
  // #ifdef MP-WEIXIN
  getMenuInfo()
  // #endif
})
</script>

<template>
  <view
      class="container"
      :style="scssVarStyle"
  >
    <view class="header-container">
      <!-- 头部系统导航条区域 -->
      <view
          class="system-bar-area"
          :style="systemBarAreaStyle"
      >

      </view>
      <!-- header -->
      <view
          class="header-row"
          :style="headerAreaStyle"
      >
        <view
            class="left"
            :style="textShadowStyle"
            v-if="showReturn"
        >
          <slot name="left">
            <view
                v-if="circleBack"
                class="circle-back"
                :style="circleBackStyle">
              <uv-icon
                  name="arrow-left"
                  :color="returnColor"
                  :size="returnSize"
                  @click="goBack"
              />
            </view>
            <uv-icon
                v-else
                name="arrow-left"
                :color="returnColor"
                :size="returnSize"
                @click="goBack"
            />
          </slot>
        </view>
        <view
            class="title"
            :style="titleStyle"
        >
          <slot>
          </slot>
        </view>
        <view
            class="right"
            :style="rightStyle"
            v-if="showRight"
        >
          <slot name="right">
          </slot>
        </view>
      </view>

      <!-- 背景 mask -->
      <view
          class="bg-mask"
          :style="scrollMaskStyle"
      ></view>

    </view>
    <!-- 撑起 -->
    <view
        class="prop-up"
        :style="{height:`${containerHeight}px`}"
        v-if="propUp"
    ></view>
  </view>
</template>

<style
    scoped
    lang="scss"
>

.container {
  --header-height: 0rpx;
  --side-distance: 30rpx;
  $side-distance: var(--side-distance); // 侧边距
  $header-height: var(--header-height); // header高度
  .header-container {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;

    .system-bar-area {
      width: 100%;
      z-index: 1;
    }

    .header-row {
      z-index: 1;
      width: 100%;
      height: $header-height;
      position: relative;

      .left, .right, .title {
        position: absolute;
        top: 50%;
        height: 100%;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
      }

      .left {
        left: $side-distance;
      }

      .right {
        right: $side-distance;
      }

      .title {
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        color: #333;
      }
    }

    .bg-mask {
      z-index: 0;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      box-shadow: 0 0 15rpx rgba(162, 162, 162, 0.5);
    }
  }

  .prop-up {
    width: 100%;
    height: $header-height;
  }
}

.circle-back {
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  box-shadow: 0 0 10rpx rgba(225, 225, 225, 0.48);
  border: 1rpx solid rgba(225, 225, 225, 0.8);
}

</style>