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  v-if="isLocation&&address.cityId ">
		    <AreaPicker
			:defaultValue="{
				provinceId: address.provinceId,
				cityId: address.cityId,
				areaId:address.areaId
			  }"
		          ref="areaPicker3"
		          placeholder="请选择省市区"
				  :selectedText="selectedText"
		          @change="changeAddress"
		        >
				 <template v-slot="{ selectedText, placeholder, currentSelection }">
					 <view class="location-selector">
					 	
					 <text class="location-text">{{ selectedText }}</text>
					 <image
					   class="dropdown-icon"
					   src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEyIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xIDFMNiA2TDExIDEiIHN0cm9rZT0iIzk5OTk5OSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+"
					   mode="heightFix"
					 ></image>
					 </view>
					 </template>
				</AreaPicker>
        
      </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> -->
	  <uni-icons @click="handleBack" v-if="isBack" type="left" size="28"></uni-icons>
    </view>
    <view class="left-section" v-else></view>

    <!-- 中间：Logo -->
    <view class="logo">
    	<image
    	  class=""
    	  :src="showImg('/uploads/20250825/7ad541ebe1b7e1f82f78362978f627ff.png')"
    	  mode="heightFix"
    	></image>
    </view>

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

<script>
import AreaPicker from './AreaPicker.vue'

export default {
  components: {
    AreaPicker
  },
  props: {
    isSearch: {
      type: Boolean,
      default: true,
    },
	isBack: {
      type: Boolean,
      default: true,
    },
	address: {
      type: Object,
      default: () =>{},
    },
    type: {
      type: String,
      default: "",
    },
    fixed: {
      type: Boolean,
      default: false,
    },
    isLocation: {
      type: Boolean,
      default: false,
    },
    selectedText: {
      type: String,
      default: ''
    },
    // 新增：是否使用省市区选择组件
    isAreaPicker: {
      type: Boolean,
      default: true,
    },
    // 省市区选择器占位符
    areaPlaceholder: {
      type: String,
      default: '请选择地区'
    },
    // 省市区默认值
    defaultAreaValue: {
      type: Object,
      default: () => ({
        provinceId: null,
        cityId: null,
        areaId: null
      })
    }
  },
  name: "header",
  data() {
    return {
      // 导航栏参数
      height: 0,
      statusBarHeight: 0,
      // 地区选择
      areaPickerVisible: false,
      selectedAreaText: ''
    };
  },
  mounted() {
    this.initRectInfo();
  },
  methods: {
	  handleBack(){
		  uni.switchTab({
		  	url:'/pages/index/index'
		  })
	  },
    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.selectedText = locations[res.tapIndex];
          // 触发地区变更事件
          this.$emit("locationChange", this.selectedText);
        },
      });
    },
	changeAddress(e){
		this.$emit('change',e)
	},
    // 显示省市区选择弹窗
    showAreaPicker() {
      this.areaPickerVisible = true;
    },
    // 省市区选择变化事件
    onAreaChange(areaData) {
      this.selectedAreaText = areaData.fullText;
      // 触发省市区变更事件，传递完整的地区数据
      this.$emit('areaChange', areaData);
    },
    // 获取当前选中的省市区数据
    getAreaValue() {
      if (this.$refs.areaPicker) {
        return this.$refs.areaPicker.getValue();
      }
      return null;
    },
    // 重置省市区选择
    resetArea() {
      this.selectedAreaText = '';
      if (this.$refs.areaPicker) {
        this.$refs.areaPicker.reset();
      }
    },
    // 为了兼容 AreaPicker 组件中的数据请求，添加 Post 方法
    Post(data, url) {
      // 这里需要根据项目的实际请求方法来实现
      // 可以调用全局的请求方法或者通过 mixin 引入
      return this.$parent.Post ? this.$parent.Post(data, url) : Promise.reject('Post method not found');
    }
  },
};
</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;

  .area-picker-wrapper {
  margin-right: 20rpx;
  min-width: 200rpx;
  max-width: 300rpx;
}

.area-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8rpx 16rpx;
  border: 2rpx solid #e0e0e0;
  border-radius: 8rpx;
  background-color: #fff;
  min-height: 60rpx;
}

.area-text {
  font-size: 30rpx;
  color: #333;
  flex: 1;
  
  &.placeholder {
    color: #999;
  }
}

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



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

.logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
      flex-direction: column;
      align-items: center;
      color: #000000;
      font-weight: bold;
      font-size: 35rpx;
  image{
	  height: 29.16rpx;
  }
}

.right-section {
  flex: 1;
}
  .location-selector {
    display: flex;
    align-items: center;
    padding: 8rpx 0rpx;
    // 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;
    }
  }
</style>