CosScene/clients/components/city-picker/city-picker.vue

<script setup>
import cityData from "@/utils/city-data";

defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  currentCity: {
    type: String,
    default: "",
  },
});

const emit = defineEmits(["close", "select"]);

const hotCities = [
  "北京", "上海", "广州", "深圳",
  "成都", "杭州", "南京", "武汉",
  "重庆", "西安", "长沙", "厦门",
  "青岛", "大连", "苏州", "三亚",
];

const handleSelect = (city) => {
  emit("select", city);
  emit("close");
};

const handleMask = () => {
  emit("close");
};
</script>

<template>
  <view v-if="visible" class="city-picker">
    <view class="mask" @tap="handleMask" @touchmove.stop.prevent />
    <view class="panel">
      <view class="panel-header">
        <text class="panel-title">选择城市</text>
        <view class="close-btn" @tap="handleMask">
          <text class="close-icon">✕</text>
        </view>
      </view>

      <scroll-view scroll-y class="panel-body">
        <view
          class="city-item all-city"
          :class="{ active: currentCity === '全部城市' }"
          @tap="handleSelect('全部城市')"
        >
          <text class="city-text">全部城市</text>
        </view>

        <view class="section-label">
          <text class="section-label-text">热门城市</text>
        </view>

        <view class="city-grid">
          <view
            v-for="c in hotCities"
            :key="c"
            class="city-tag"
            :class="{ active: currentCity === c }"
            @tap="handleSelect(c)"
          >
            <text class="tag-text">{{ c }}</text>
          </view>
        </view>

        <view class="section-label all-section">
          <text class="section-label-text">全部城市</text>
        </view>

        <view
          v-for="province in cityData"
          :key="province.province"
          class="province-section"
        >
          <text class="province-title">{{ province.province }}</text>
          <view class="city-grid">
            <view
              v-for="c in province.cities"
              :key="`${province.province}-${c}`"
              class="city-tag"
              :class="{ active: currentCity === c || currentCity === c.replace('市', '') }"
              @tap="handleSelect(c)"
            >
              <text class="tag-text">{{ c }}</text>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<style scoped>
.city-picker {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
}

.mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.45);
}

.panel {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: #ffffff;
  border-radius: 32rpx 32rpx 0 0;
  height: 70vh;
  display: flex;
  flex-direction: column;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32rpx 32rpx 24rpx;
  border-bottom: 1rpx solid #f1f5f9;
}

.panel-title {
  font-size: 34rpx;
  font-weight: 700;
  color: #1e293b;
}

.close-btn {
  width: 56rpx;
  height: 56rpx;
  border-radius: 28rpx;
  background: #f5f6fa;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-icon {
  font-size: 26rpx;
  color: #64748b;
}

.panel-body {
  height: calc(70vh - 114rpx);
  padding: 24rpx 32rpx 48rpx;
  overflow: hidden;
  box-sizing: border-box;
}

.city-item {
  padding: 24rpx;
  border-radius: 12rpx;
  margin-bottom: 16rpx;
  background: #f5f6fa;
}

.city-item.active {
  background: rgba(99, 102, 241, 0.1);
}

.city-text {
  font-size: 30rpx;
  color: #1e293b;
  font-weight: 500;
}

.city-item.active .city-text {
  color: #6366f1;
  font-weight: 600;
}

.section-label {
  margin-bottom: 20rpx;
}

.all-section {
  margin-top: 24rpx;
}

.section-label-text {
  font-size: 26rpx;
  color: #94a3b8;
  font-weight: 500;
}

.city-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
  padding-bottom: 32rpx;
}

.province-section {
  margin-bottom: 12rpx;
}

.province-title {
  display: block;
  margin-bottom: 16rpx;
  font-size: 28rpx;
  font-weight: 600;
  color: #334155;
}

.city-tag {
  width: calc(25% - 12rpx);
  height: 72rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f6fa;
  border-radius: 12rpx;
}

.city-tag.active {
  background: #6366f1;
}

.tag-text {
  font-size: 26rpx;
  color: #475569;
}

.city-tag.active .tag-text {
  color: #ffffff;
  font-weight: 600;
}
</style>