ShenhaiH5/src/components/HySelectPopup.vue

<template>
  <view class="select-container">
    <!-- 下拉选择触发区域 -->
    <view class="custom-select" @tap="toggleDropdown">
      <text class="select-text">{{ selectedOptionText || placeholder }}</text>
      <image class="select-icon" :class="{ rotate: dropdownVisible }" :src="minioUrl + '/icon_bottom_arrow.png'" mode="aspectFill" />
    </view>

    <!-- 弹窗形式的下拉菜单 -->
    <u-popup v-model="dropdownVisible" mode="center" border-radius="12" :mask-close-able="true" @close="closeDropdown">
      <view class="popup-menu">
        <view class="popup-header">
          <text class="popup-title">选择服务区</text>
          <u-icon name="close" color="#999" size="32" @tap="closeDropdown"></u-icon>
        </view>
        <view class="popup-content">
          <view
            class="dropdown-item"
            v-for="item in parkList"
            :key="item.id"
            :class="{ selected: selectedValue === item.id }"
            @tap="selectItem(item)"
          >
            <text>{{ item.name }}</text>
            <u-icon v-if="selectedValue === item.id" name="checkmark" color="#2979ff" size="32"></u-icon>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { getParkWebAPI } from '@/api/system'
import { useGlobal } from '@/composables/index'
const { minioUrl } = useGlobal()

// 定义组件接收的props
const props = defineProps({
  // 当前选中的值
  modelValue: {
    type: String,
    default: ''
  },
  // 占位符文本
  placeholder: {
    type: String,
    default: '请选择'
  }
})

// 定义组件触发的事件
const emit = defineEmits(['update:modelValue', 'change'])

// 内部状态
const dropdownVisible = ref(false)
const selectedValue = ref(props.modelValue)

const parkList = ref([]) as any

// 计算当前选中的选项文本
const selectedOptionText = computed(() => {
  const selected = parkList.value.find((item: any) => item.id === selectedValue.value)
  return selected ? selected.name : ''
})

// 获取全部园区楼宇
const getParkWeb = async () => {
  const res = await getParkWebAPI()
  if (res.code === 200) {
    parkList.value = res.rows

    // 当数据加载完成且没有选中值时，默认选择第一项
    if (parkList.value.length > 0 && !selectedValue.value) {
      const firstItem = parkList.value[0]
      selectedValue.value = firstItem.id

      // 存储到本地缓存
      uni.setStorageSync('parkId', firstItem.id)

      // 触发事件通知父组件
      emit('update:modelValue', firstItem.id)
      emit('change', firstItem)
    }
  }
}

getParkWeb()

// 监听modelValue变化，同步内部状态
watch(
  () => props.modelValue,
  (newValue) => {
    selectedValue.value = newValue
  }
)

// 切换下拉菜单显示/隐藏
const toggleDropdown = () => {
  dropdownVisible.value = !dropdownVisible.value
}

// 关闭下拉菜单
const closeDropdown = () => {
  dropdownVisible.value = false
}

// 选择选项
const selectItem = (item: { id: string; name: string }) => {
  // 存储到本地缓存
  uni.setStorageSync('parkId', item.id)
  selectedValue.value = item.id
  dropdownVisible.value = false

  // 触发事件通知父组件
  emit('update:modelValue', item.id)
  emit('change', item)
}
</script>

<style lang="scss" scoped>
.select-container {
  position: relative;
  z-index: 100;
  .custom-select {
    width: 100%;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    // padding: 0 20rpx;
    cursor: pointer;
    transition: background-color 0.2s;

    .select-text {
      font-size: 30rpx;
      color: #3b3c3b;
      font-weight: 600;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      flex: 1;
    }

    .select-icon {
      width: 13rpx;
      height: 10rpx;
      margin-left: 10rpx;
      transition: transform 0.2s;
    }

    .select-icon.rotate {
      transform: rotate(180deg);
    }
  }
}

/* 弹窗样式 */
.popup-menu {
  width: 600rpx;
  background-color: #fff;
  border-radius: 12rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
  overflow: hidden;

  .popup-header {
    height: 80rpx;
    padding: 0 24rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1rpx solid #f0f0f0;

    .popup-title {
      font-size: 32rpx;
      color: #333;
      font-weight: 600;
    }
  }

  .popup-content {
    max-height: 500rpx;
    overflow-y: auto;
    padding: 15rpx;
    width: 100%;

    .dropdown-item {
      height: 80rpx;
      padding: 0 24rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;
      transition: background-color 0.2s;

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

      &.selected {
        background-color: #f0f7ff;
        color: #007aff;
        border-radius: 8rpx;
        text {
          color: #007aff;
          font-weight: 500;
        }
      }

      text {
        font-size: 26rpx;
        color: #1d2129;
      }

      .check-icon {
        width: 32rpx;
        height: 32rpx;
      }
    }
  }
}
</style>