cxb-minapp-vue3/src/pages/home/components/header.vue

<script lang="ts" setup>
import {computed, PropType} from "vue";
import FSearch from "~/components/FSearch/FSearch.vue";
import type {UserInfoModel} from "~/apis/model/userInfoModel";
import {useUserStore} from "~/stores/userStore";
// import {useUserStore} from "~/stores/userStore";
const userStore = useUserStore()

const systemInfo = uni.getSystemInfoSync()
const statusBarHeight = systemInfo.statusBarHeight ?? 0
const menuButtonInfo = uni.getMenuButtonBoundingClientRect()

const navBarHeight = computed(() => {
  // const propsHeight = Number(props.height)
  let defaultHeight = 44
  // #ifdef MP
  // if (props.fixed) {
  const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
  const menuHeight = menuButtonInfo.height
  const menuTop = menuButtonInfo.top
  // console.log(menuButtonInfo)
  defaultHeight = (menuTop - statusBarHeight) * 2 + menuHeight
  // }
  // #endif
  // return propsHeight || defaultHeight
  return defaultHeight
})

const navBarStyle = computed(() => {
  return {
    paddingTop: `${statusBarHeight}px`,
  }
})

const props = defineProps({
  exClass: {
    type: String
  },
  // userInfo: {
  //   type: Object as PropType<UserInfoModel>,
  //   required: true
  // },
  yanglaojin: {
    type: Number,
    default: NaN
  }
})
function handleClick() {
  if (userStore.userInfo && userStore.uid) {
    uni.navigateTo({
      url: '/pages/annuity/index'
    })
  } else {
    uni.navigateTo({
      url: '/pages/user/login/index?key=30'
    })
  }
}

// function handleShowSearchPage() {
//
// }

function handleShowMessage() {
  uni.navigateTo({
    url: '/pages/message/index'
  })
}
</script>
<template>
  <div class="home-header fixed w-screen text-white z-10"
       :style="navBarStyle"
       :class="exClass"
  >
    <div class="flex">
      <div
          @click="handleClick"
          class="flex gap-2 mb-2 pl-2 flex-1"
      >
        <image v-if="userStore && userStore.userInfo && userStore.userInfo.avatar"
               :src="userStore.userInfo.avatar"
               mode="widthFix"
               class="w-9 h-9 rounded-full"
        />
        <image
            v-else
            src="https://app.bjtdba.com/uploads/logo.jpg"
            mode="widthFix"
            class="w-9 h-9 rounded-full"
        />
        <div class="flex flex-col ">
          <div class="text-sm" v-if="userStore.userInfo && userStore.userInfo.nickname">{{ userStore.userInfo.nickname ? userStore.userInfo.nickname : '登录'}}</div>
          <div class="text-sm" v-else>登录</div>
          <div class="text-xs" v-if="!isNaN(yanglaojin) && userStore.userInfo">{{ yanglaojin }}元养老金</div>
          <div v-else class="text-xs">
            领取养老金
          </div>
        </div>

      </div>
      <div class=" right-26 flex flex-col text-[10px] justify-center items-center " @tap.stop="handleShowMessage" :style="{marginRight: `${menuButtonInfo.width + 15}px`}">
        <image src="/static/icon/message-dark.png" mode="widthFix" class="w-4 h-4" v-if="exClass"></image>
        <image src="/static/icon/message.png" mode="widthFix" class="w-4 h-4" v-else></image>
        <div>消息</div>
      </div>


    </div>
    <div class="p-3">
      <FSearch />

    </div>

  </div>
</template>