EpicSoul/components/header.vue

<template>
  <view>
    <!-- 占位区域，防止内容塌陷 -->
    <view v-if="fixed" class="header-placeholder" :style="{ height: height + 'px' }"></view>
    
    <view
      class="header"
      :class="{ 'header-fixed': fixed }"
      :style="{ height: height + 'px', 'padding-top': statusBarHeight + 'px' }"
    >
    <!-- 左侧：地区筛选和搜索 -->
    <view class="left-section" v-if="isSearch">
      <view class="location-selector" @click="showLocationPicker">
        <text class="location-text">{{ selectedLocation }}</text>
        <image
          class="dropdown-icon"
          src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEyIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xIDFMNiA2TDExIDEiIHN0cm9rZT0iIzk5OTk5OSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+"
          mode="heightFix"
        ></image>
      </view>
      <image
        class="search-icon"
        src="https://static.ticket.sz-trip.com/epicSoul/readingBody/search.png"
        mode="heightFix"
        @click="gotoPath('/subPackages/search/search?type=' + type)"
      ></image>
    </view>
    <view class="left-section" v-else></view>

    <!-- 中间：Logo -->
    <image
      class="logo"
      src="https://static.ticket.sz-trip.com/uploads/20250625/9bb05097e07570a934235983e1681a9f.png"
      mode="heightFix"
    ></image>

    <!-- 右侧：占位 -->
    <view class="right-section"></view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    isSearch: {
      type: Boolean,
      default: true,
    },
    type: {
      type: String,
      default: "",
    },
    fixed: {
      type: Boolean,
      default: false,
    },
  },
  name: "header",
  data() {
    return {
      // 导航栏参数
      height: 0,
      statusBarHeight: 0,
      // 地区选择
      selectedLocation: "苏州",
    };
  },
  mounted() {
    this.initRectInfo();
  },
  methods: {
    initRectInfo() {
      const sysInfo = uni.getSystemInfoSync();
      this.statusBarHeight = sysInfo.statusBarHeight;
      // 默认高度
      this.height = sysInfo.statusBarHeight + 40;
      console.log("sysInfo", sysInfo);
    },
    showLocationPicker() {
      // 显示地区选择器
      uni.showActionSheet({
        itemList: ["苏州", "上海", "杭州", "南京", "无锡"],
        success: (res) => {
          const locations = ["苏州", "上海", "杭州", "南京", "无锡"];
          this.selectedLocation = locations[res.tapIndex];
          // 触发地区变更事件
          this.$emit("locationChange", this.selectedLocation);
        },
      });
    },
  },
};
</script>

<style scoped lang="scss">
.header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20rpx;
  background-color: #fff;
  
  &.header-fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
  }
}

.header-placeholder {
  width: 100%;
}

.left-section {
  display: flex;
  align-items: center;
  flex: 1;

  .location-selector {
    display: flex;
    align-items: center;
    padding: 8rpx 16rpx;
    // border: 2rpx solid #e0e0e0;
    border-radius: 20rpx;
    background-color: #fff;
    min-width: 100rpx;
    margin-right: 20rpx;

    .location-text {
      font-size: 30rpx;
      color: #333;
      margin-right: 8rpx;
    }

    .dropdown-icon {
      width: 24rpx;
      height: 16rpx;
    }
  }

  .search-icon {
    height: 36.16rpx;
  }
}

.logo {
  height: 36.16rpx;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.right-section {
  flex: 1;
}
</style>