jiapuapp/components/genealogy/RegionPickerSheet.vue

<template>
  <view v-if="visible" class="region-sheet">
    <view class="region-sheet__mask" @click="requestMaskClose" />
    <view class="region-sheet__panel">
      <view class="region-sheet__intro">
        <text class="region-sheet__title">选择地区</text>
      </view>
      <view class="region-sheet__picker">
        <view class="region-sheet__column-headings">
          <text
            v-for="label in columnLabels"
            :key="label"
            class="region-sheet__column-heading"
          >
            {{ label }}
          </text>
        </view>
        <picker-view
          class="region-sheet__picker-view"
          :indicator-style="indicatorStyle"
          :value="indexes"
          @change="$emit('change', $event)"
        >
          <picker-view-column
            v-for="(column, columnIndex) in columns"
            :key="columnIndex"
          >
            <view
              v-for="(option, optionIndex) in column"
              :key="option.regionCode"
              class="region-sheet__picker-item"
              :class="{
                'region-sheet__picker-item--selected':
                  indexes[columnIndex] === optionIndex,
              }"
            >
              {{ option.label }}
            </view>
          </picker-view-column>
        </picker-view>
      </view>
      <view class="region-sheet__footer">
        <view class="region-sheet__cancel" @click="$emit('cancel')">取消</view>
        <button class="region-sheet__confirm" @click="$emit('confirm')">
          确认选择
        </button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { computed } from "vue";

const props = defineProps({
  visible: { type: Boolean, default: false },
  columns: { type: Array, default: () => [] },
  indexes: { type: Array, default: () => [] },
  indicatorStyle: { type: String, required: true },
  closeOnMask: { type: Boolean, default: false },
});

const emit = defineEmits(["change", "cancel", "confirm"]);

const regionLevelLabels = Object.freeze([
  "省份",
  "城市",
  "区县",
  "乡镇街道",
  "村社区",
]);
const columnLabels = computed(() =>
  regionLevelLabels.slice(0, props.columns.length),
);

const requestMaskClose = () => {
  if (props.closeOnMask) emit("cancel");
};
</script>

<style scoped lang="scss">
.region-sheet {
  position: fixed;
  z-index: 10;
  inset: 0;
  display: flex;
  align-items: flex-end;
}
.region-sheet__mask {
  position: absolute;
  inset: 0;
  background: rgba(43, 30, 20, 0.42);
}
.region-sheet__panel {
  position: relative;
  width: 100%;
  padding: 22rpx 28rpx calc(24rpx + env(safe-area-inset-bottom));
  border-radius: 30rpx 30rpx 0 0;
  background: #fdf9ef;
  box-shadow: 0 -12rpx 36rpx rgba(43, 30, 20, 0.2);
}
.region-sheet__intro {
  padding: 0 10rpx 16rpx;
  text-align: center;
}
.region-sheet__title {
  display: block;
  color: $ink;
  font-family: STKaiti, KaiTi, serif;
  font-size: clamp(19px, 36rpx, 24px);
  font-weight: 700;
}
.region-sheet__picker {
  overflow: hidden;
  border: 1rpx solid rgba(128, 89, 49, 0.28);
  border-radius: 16rpx;
  background: rgba(255, 252, 245, 0.8);
}
.region-sheet__column-headings {
  display: flex;
  height: 84rpx;
  border-bottom: 1rpx solid rgba(128, 89, 49, 0.18);
}
.region-sheet__column-heading {
  box-sizing: border-box;
  width: 33.333%;
  padding: 24rpx 12rpx;
  color: $ink-muted;
  font-size: clamp(16px, 26rpx, 20px);
  text-align: center;
}
.region-sheet__column-heading + .region-sheet__column-heading {
  border-left: 1rpx solid rgba(128, 89, 49, 0.16);
}
.region-sheet__picker-view {
  width: 100%;
  height: 520rpx;
}
.region-sheet__picker-item {
  box-sizing: border-box;
  height: 104rpx;
  overflow: hidden;
  padding: 0 6rpx;
  color: $ink;
  font-size: clamp(16px, 28rpx, 20px);
  line-height: 104rpx;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.region-sheet__picker-item--selected {
  color: $brand-red;
  font-weight: 700;
}
.region-sheet__footer {
  display: flex;
  align-items: center;
  margin-top: 22rpx;
  gap: 12rpx;
}
.region-sheet__cancel {
  min-width: 116rpx;
  padding: 20rpx 10rpx;
  color: $ink-muted;
  font-size: clamp(16px, 28rpx, 20px);
  text-align: center;
}
.region-sheet__confirm {
  display: flex;
  min-height: 82rpx;
  flex: 1;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 10rpx;
  background: $brand-red;
  color: #fff;
  font-size: clamp(16px, 29rpx, 20px);
  font-weight: 700;
  line-height: 1.4;
}
.region-sheet__confirm::after {
  display: none;
}
</style>