@ruixinkeji/prism-ui 1.0.0

package/components/PrismCitySelect/PrismCitySelect.vue

@@ -0,0 +1,435 @@
+<template>
+  <view class="prism-city-select" :class="{ 'dark-mode': appStore.isDarkMode }">
+    <!-- 触发器 -->
+    <view class="picker-trigger" @click="openPicker">
+      <slot>
+        <view class="prism-select-box">
+          <text :class="{ 'placeholder': !displayValue, 'select-text': displayValue }">
+            {{ displayValue || placeholder }}
+          </text>
+          <text class="select-arrow fa fa-map-marker-alt"></text>
+        </view>
+      </slot>
+    </view>
+
+    <!-- 全屏选择页面 -->
+    <view class="picker-page" v-if="showPicker">
+      <!-- 头部 -->
+      <view class="page-header">
+        <view class="header-back" @click="closePicker">
+          <text class="fa fa-arrow-left"></text>
+        </view>
+        <view class="header-title">{{ title }}</view>
+        <view class="header-right"></view>
+      </view>
+
+      <!-- 搜索框 -->
+      <view class="search-box">
+        <view class="search-input-wrap">
+          <text class="fa fa-search"></text>
+          <input
+            class="search-input"
+            type="text"
+            v-model="searchKeyword"
+            placeholder="搜索城市"
+            @input="onSearch"
+          />
+          <text class="fa fa-times-circle" v-if="searchKeyword" @click="clearSearch"></text>
+        </view>
+      </view>
+
+      <!-- 内容区域 -->
+      <view class="page-content">
+        <!-- 搜索结果 -->
+        <scroll-view class="search-results" scroll-y v-if="searchKeyword">
+          <view
+            v-for="item in searchResults"
+            :key="item.code"
+            class="result-item"
+            @click="selectCity(item)"
+          >
+            <text>{{ item.name }}</text>
+            <text class="result-province">{{ item.provinceName }}</text>
+          </view>
+          <view class="search-empty" v-if="!searchResults.length">
+            <text class="fa fa-search"></text>
+            <text>未找到相关城市</text>
+          </view>
+        </scroll-view>
+
+        <!-- 正常列表 -->
+        <view class="city-content" v-else>
+          <PrismGroupSticky
+            :indexList="indexList"
+            :showIndexBar="true"
+            height="100%"
+          >
+            <!-- 热门城市 -->
+            <view class="hot-section" v-if="showHotCities">
+              <view class="section-title">
+                <text class="fa fa-fire"></text>
+                <text>热门城市</text>
+              </view>
+              <view class="hot-cities-grid">
+                <view
+                  v-for="city in hotCities"
+                  :key="city.code"
+                  class="hot-city-item"
+                  @click="selectCity(city)"
+                >
+                  {{ city.name }}
+                </view>
+              </view>
+            </view>
+
+            <!-- 按字母分组的城市列表 -->
+            <template v-for="group in groupedCities" :key="group.letter">
+              <view class="group-index" :id="'group-' + group.letter">{{ group.letter }}</view>
+              <view
+                v-for="city in group.cities"
+                :key="city.code"
+                class="group-item"
+                @click="selectCity(city)"
+              >
+                {{ city.name }}
+              </view>
+            </template>
+          </PrismGroupSticky>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+import { useAppStore } from '@/store/app';
+import PrismGroupSticky from '@/components/PrismGroupSticky/PrismGroupSticky.vue';
+
+const props = defineProps({
+  modelValue: {
+    type: Object,
+    default: () => null
+  },
+  placeholder: {
+    type: String,
+    default: '请选择城市'
+  },
+  title: {
+    type: String,
+    default: '选择城市'
+  },
+  showHotCities: {
+    type: Boolean,
+    default: true
+  },
+  hotCities: {
+    type: Array,
+    default: () => [
+      { name: '北京', code: '110000', provinceName: '北京市' },
+      { name: '上海', code: '310000', provinceName: '上海市' },
+      { name: '广州', code: '440100', provinceName: '广东省' },
+      { name: '深圳', code: '440300', provinceName: '广东省' },
+      { name: '杭州', code: '330100', provinceName: '浙江省' },
+      { name: '成都', code: '510100', provinceName: '四川省' },
+      { name: '武汉', code: '420100', provinceName: '湖北省' },
+      { name: '南京', code: '320100', provinceName: '江苏省' }
+    ]
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const emit = defineEmits(['update:modelValue', 'change', 'confirm']);
+const appStore = useAppStore();
+
+const showPicker = ref(false);
+const searchKeyword = ref('');
+const searchResults = ref([]);
+
+// 城市数据（按拼音首字母分组）
+const cityData = [
+  { name: '北京', code: '110000', letter: 'B', provinceName: '北京市' },
+  { name: '天津', code: '120000', letter: 'T', provinceName: '天津市' },
+  { name: '上海', code: '310000', letter: 'S', provinceName: '上海市' },
+  { name: '重庆', code: '500000', letter: 'C', provinceName: '重庆市' },
+  { name: '广州', code: '440100', letter: 'G', provinceName: '广东省' },
+  { name: '深圳', code: '440300', letter: 'S', provinceName: '广东省' },
+  { name: '杭州', code: '330100', letter: 'H', provinceName: '浙江省' },
+  { name: '宁波', code: '330200', letter: 'N', provinceName: '浙江省' },
+  { name: '南京', code: '320100', letter: 'N', provinceName: '江苏省' },
+  { name: '苏州', code: '320500', letter: 'S', provinceName: '江苏省' },
+  { name: '成都', code: '510100', letter: 'C', provinceName: '四川省' },
+  { name: '武汉', code: '420100', letter: 'W', provinceName: '湖北省' },
+  { name: '长沙', code: '430100', letter: 'C', provinceName: '湖南省' },
+  { name: '西安', code: '610100', letter: 'X', provinceName: '陕西省' },
+  { name: '郑州', code: '410100', letter: 'Z', provinceName: '河南省' },
+  { name: '青岛', code: '370200', letter: 'Q', provinceName: '山东省' },
+  { name: '济南', code: '370100', letter: 'J', provinceName: '山东省' },
+  { name: '大连', code: '210200', letter: 'D', provinceName: '辽宁省' },
+  { name: '沈阳', code: '210100', letter: 'S', provinceName: '辽宁省' },
+  { name: '厦门', code: '350200', letter: 'X', provinceName: '福建省' },
+  { name: '福州', code: '350100', letter: 'F', provinceName: '福建省' },
+  { name: '合肥', code: '340100', letter: 'H', provinceName: '安徽省' },
+  { name: '昆明', code: '530100', letter: 'K', provinceName: '云南省' },
+  { name: '南昌', code: '360100', letter: 'N', provinceName: '江西省' },
+  { name: '南宁', code: '450100', letter: 'N', provinceName: '广西壮族自治区' },
+  { name: '贵阳', code: '520100', letter: 'G', provinceName: '贵州省' },
+  { name: '兰州', code: '620100', letter: 'L', provinceName: '甘肃省' },
+  { name: '太原', code: '140100', letter: 'T', provinceName: '山西省' },
+  { name: '石家庄', code: '130100', letter: 'S', provinceName: '河北省' },
+  { name: '哈尔滨', code: '230100', letter: 'H', provinceName: '黑龙江省' },
+  { name: '长春', code: '220100', letter: 'C', provinceName: '吉林省' }
+];
+
+// 显示值
+const displayValue = computed(() => {
+  if (!props.modelValue) return '';
+  return props.modelValue.name || '';
+});
+
+// 索引列表
+const indexList = computed(() => {
+  const letters = [...new Set(cityData.map(c => c.letter))];
+  return letters.sort();
+});
+
+// 按字母分组的城市
+const groupedCities = computed(() => {
+  const groups = {};
+  cityData.forEach(city => {
+    if (!groups[city.letter]) {
+      groups[city.letter] = [];
+    }
+    groups[city.letter].push(city);
+  });
+  return indexList.value.map(letter => ({
+    letter,
+    cities: groups[letter] || []
+  }));
+});
+
+// 打开选择器
+function openPicker() {
+  if (props.disabled) return;
+  showPicker.value = true;
+  searchKeyword.value = '';
+}
+
+// 关闭选择器
+function closePicker() {
+  showPicker.value = false;
+}
+
+// 选择城市
+function selectCity(city) {
+  const result = { code: city.code, name: city.name, provinceName: city.provinceName };
+  emit('update:modelValue', result);
+  emit('change', result);
+  emit('confirm', result);
+  showPicker.value = false;
+}
+
+// 搜索
+function onSearch() {
+  if (!searchKeyword.value.trim()) {
+    searchResults.value = [];
+    return;
+  }
+  const keyword = searchKeyword.value.trim().toLowerCase();
+  searchResults.value = cityData.filter(city =>
+    city.name.toLowerCase().includes(keyword)
+  );
+}
+
+// 清空搜索
+function clearSearch() {
+  searchKeyword.value = '';
+  searchResults.value = [];
+}
+</script>
+
+<style lang="scss">
+.prism-city-select {
+  .prism-select-box {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 24rpx;
+    background: var(--prism-input-bg, #F7F8FA);
+    border-radius: 12rpx;
+
+    .placeholder { color: var(--prism-text-placeholder, #C9CDD4); font-size: 28rpx; }
+    .select-text { color: var(--prism-text-primary, #1D2129); font-size: 28rpx; }
+    .select-arrow { color: var(--prism-text-secondary, #86909C); font-size: 28rpx; }
+  }
+
+  .picker-page {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: -100rpx; // 向下延伸覆盖底部
+    padding-bottom: 100rpx; // 补偿底部延伸
+    background: var(--prism-bg-color-page, #F5F6F7);
+    z-index: 9999;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    box-sizing: border-box;
+  }
+
+  .page-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 24rpx 32rpx;
+    padding-top: calc(24rpx + env(safe-area-inset-top));
+    background: var(--prism-bg-color-card, #FFFFFF);
+  }
+
+  .header-back {
+    width: 60rpx;
+    .fa { font-size: 36rpx; color: var(--prism-text-primary, #1D2129); }
+  }
+
+  .header-title {
+    font-size: 34rpx;
+    font-weight: 600;
+    color: var(--prism-text-primary, #1D2129);
+  }
+
+  .header-right { width: 60rpx; }
+
+  .search-box {
+    padding: 16rpx 32rpx;
+    background: var(--prism-bg-color-card, #FFFFFF);
+  }
+
+  .search-input-wrap {
+    display: flex;
+    align-items: center;
+    padding: 16rpx 24rpx;
+    background: var(--prism-bg-color-container, #F7F8FA);
+    border-radius: 8rpx;
+    gap: 16rpx;
+
+    .fa-search { color: var(--prism-text-placeholder, #C9CDD4); }
+    .fa-times-circle { color: var(--prism-text-secondary, #86909C); }
+  }
+
+  .search-input {
+    flex: 1;
+    font-size: 28rpx;
+    color: var(--prism-text-primary, #1D2129);
+  }
+
+  .page-content {
+    flex: 1;
+    height: 0;
+  }
+
+  .city-content {
+    height: 100%;
+  }
+
+  .hot-section {
+    background: var(--prism-bg-color-card, #FFFFFF);
+  }
+
+  .section-title {
+    display: flex;
+    align-items: center;
+    gap: 8rpx;
+    padding: 8rpx 24rpx 0;
+    margin-bottom: 8rpx;
+    font-size: 26rpx;
+    color: var(--prism-text-secondary, #86909C);
+
+    .fa-fire {
+      color: #FF6B00;
+    }
+  }
+
+  .hot-cities-grid {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 0 24rpx 24rpx;
+    gap: 16rpx;
+  }
+
+  .hot-city-item {
+    padding: 16rpx 32rpx;
+    background: var(--prism-bg-color-container, #F7F8FA);
+    border-radius: 8rpx;
+    font-size: 28rpx;
+    color: var(--prism-text-primary, #1D2129);
+  }
+
+  .search-results {
+    height: 100%;
+    background: var(--prism-bg-color-card, #FFFFFF);
+  }
+
+  .result-item {
+    display: flex;
+    justify-content: space-between;
+    padding: 28rpx 32rpx;
+    border-bottom: 1rpx solid var(--prism-border-color-light, #E5E6EB);
+    font-size: 30rpx;
+    color: var(--prism-text-primary, #1D2129);
+
+    .result-province {
+      font-size: 26rpx;
+      color: var(--prism-text-secondary, #86909C);
+    }
+  }
+
+  .search-empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 120rpx 32rpx;
+    gap: 24rpx;
+    .fa { font-size: 80rpx; color: var(--prism-text-placeholder, #C9CDD4); }
+    text { font-size: 28rpx; color: var(--prism-text-secondary, #86909C); }
+  }
+
+  // 城市列表箭头
+  .city-arrow {
+    font-size: 24rpx;
+    color: var(--prism-text-placeholder, #C9CDD4);
+    margin-left: 16rpx;
+  }
+
+  // 列表项左右边距
+  .group-index,
+  .group-item {
+    margin: 0 30rpx;
+  }
+
+  // 索引条贴在屏幕边缘
+  .prism-index-bar {
+    right: 0;
+  }
+}
+
+// 深色模式
+.dark-mode.prism-city-select {
+  .picker-page { background: var(--prism-bg-color-page, #121212); }
+  .page-header, .search-box, .hot-section, .search-results { background: var(--prism-bg-color-card, #1A1A1A); }
+  .search-input-wrap, .hot-city-item { background: var(--prism-bg-color-container, #2A2A2A); }
+
+  .group-index {
+    background: var(--prism-bg-color-page, #121212);
+  }
+
+  .group-item {
+    background: var(--prism-bg-color-card, #1A1A1A);
+    color: var(--prism-text-primary, #E5E6EB);
+    border-bottom-color: var(--prism-border-color-light, #2D2D2D);
+  }
+}
+</style>