@ruixinkeji/prism-ui 1.0.0

package/components/PrismCityCascadeSelect/PrismCityCascadeSelect.vue

@@ -0,0 +1,793 @@
+<template>
+  <view class="prism-city-cascade-select" :class="{ 'dark-mode': appStore.isDarkMode }">
+    <!-- 触发器 -->
+    <view class="select-trigger" @click="openSelect">
+      <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="select-page" v-if="showSelect">
+      <!-- 头部 -->
+      <view class="page-header">
+        <view class="header-back" @click="handleBack">
+          <text class="fa fa-arrow-left"></text>
+        </view>
+        <view class="header-title">{{ title }}</view>
+        <view class="header-right"></view>
+      </view>
+
+      <!-- 搜索框 -->
+      <view class="search-box" v-if="showSearch">
+        <view class="search-input-wrap">
+          <text class="fa fa-search"></text>
+          <input
+            class="search-input"
+            type="text"
+            v-model="searchKeyword"
+            :placeholder="searchPlaceholder"
+            @input="onSearch"
+          />
+          <text class="fa fa-times-circle" v-if="searchKeyword" @click="clearSearch"></text>
+        </view>
+      </view>
+
+      <!-- 内容区域 -->
+      <scroll-view class="page-content" scroll-y @touchmove.stop>
+        <!-- 搜索结果 -->
+        <view class="search-results" v-if="searchKeyword && searchResults.length">
+          <view
+            v-for="item in searchResults"
+            :key="item.code"
+            class="result-item"
+            @click="selectCity(item)"
+          >
+            <text class="item-name">{{ item.fullName || item.name }}</text>
+          </view>
+        </view>
+
+        <!-- 搜索无结果 -->
+        <view class="search-empty" v-else-if="searchKeyword && !searchResults.length">
+          <text class="fa fa-search"></text>
+          <text>未找到相关城市</text>
+        </view>
+
+        <!-- 正常列表 -->
+        <view v-else>
+          <!-- 热门城市 -->
+          <view class="hot-cities" v-if="showHotCities && currentLevel === 0">
+            <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>
+
+          <!-- 已选择的面包屑 -->
+          <view class="breadcrumb" v-if="tempSelected.length">
+            <view class="section-title">
+              <text>当前选择</text>
+            </view>
+            <view class="breadcrumb-content">
+              <view
+                v-for="(item, index) in tempSelected"
+                :key="index"
+                class="breadcrumb-item"
+                @click="backToLevel(index)"
+              >
+                <text>{{ item.name }}</text>
+                <text class="fa fa-chevron-right" v-if="index < tempSelected.length - 1"></text>
+              </view>
+              <view class="breadcrumb-clear" @click="clearSelection">
+                <text class="fa fa-times"></text>
+              </view>
+            </view>
+          </view>
+
+          <!-- 全部城市列表 -->
+          <view class="city-list">
+            <view class="section-title" v-if="currentLevel === 0">
+              <text>全部省份</text>
+            </view>
+            <view class="section-title" v-else>
+              <text>请选择{{ levelNames[currentLevel] }}</text>
+            </view>
+            <view
+              v-for="item in currentLevelList"
+              :key="item.code"
+              class="city-item"
+              :class="{ 'selected': isItemSelected(item) }"
+              @click="selectItem(item)"
+            >
+              <text class="item-name">{{ item.name }}</text>
+              <text class="fa fa-chevron-right item-arrow" v-if="hasChildren(item)"></text>
+              <text class="fa fa-check item-check" v-else-if="isItemSelected(item)"></text>
+            </view>
+          </view>
+        </view>
+      </scroll-view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue';
+import { useAppStore } from '@/store/app';
+
+const props = defineProps({
+  modelValue: {
+    type: Array,
+    default: () => []
+  },
+  // 城市数据
+  data: {
+    type: Array,
+    default: () => []
+  },
+  level: {
+    type: Number,
+    default: 2
+  },
+  placeholder: {
+    type: String,
+    default: '请选择城市'
+  },
+  title: {
+    type: String,
+    default: '选择城市'
+  },
+  separator: {
+    type: String,
+    default: '/'
+  },
+  showSearch: {
+    type: Boolean,
+    default: true
+  },
+  searchPlaceholder: {
+    type: String,
+    default: '搜索城市'
+  },
+  showHotCities: {
+    type: Boolean,
+    default: true
+  },
+  hotCities: {
+    type: Array,
+    default: () => [
+      { name: '北京', code: '110000' },
+      { name: '上海', code: '310000' },
+      { name: '广州', code: '440100' },
+      { name: '深圳', code: '440300' },
+      { name: '杭州', code: '330100' },
+      { name: '成都', code: '510100' },
+      { name: '武汉', code: '420100' },
+      { name: '南京', code: '320100' }
+    ]
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const emit = defineEmits(['update:modelValue', 'change', 'confirm', 'cancel']);
+
+const appStore = useAppStore();
+const showSelect = ref(false);
+const tempSelected = ref([]);
+const currentLevel = ref(0);
+const searchKeyword = ref('');
+const searchResults = ref([]);
+
+const levelNames = ['省份', '城市', '区县'];
+
+// 默认地区数据
+const defaultData = [
+  {
+    code: '110000',
+    name: '北京市',
+    children: [
+      {
+        code: '110100',
+        name: '北京市',
+        children: [
+          { code: '110101', name: '东城区' },
+          { code: '110102', name: '西城区' },
+          { code: '110105', name: '朝阳区' },
+          { code: '110106', name: '丰台区' },
+          { code: '110108', name: '海淀区' },
+          { code: '110112', name: '通州区' },
+          { code: '110114', name: '昌平区' },
+          { code: '110115', name: '大兴区' }
+        ]
+      }
+    ]
+  },
+  {
+    code: '120000',
+    name: '天津市',
+    children: [
+      {
+        code: '120100',
+        name: '天津市',
+        children: [
+          { code: '120101', name: '和平区' },
+          { code: '120102', name: '河东区' },
+          { code: '120103', name: '河西区' },
+          { code: '120104', name: '南开区' }
+        ]
+      }
+    ]
+  },
+  {
+    code: '310000',
+    name: '上海市',
+    children: [
+      {
+        code: '310100',
+        name: '上海市',
+        children: [
+          { code: '310101', name: '黄浦区' },
+          { code: '310104', name: '徐汇区' },
+          { code: '310106', name: '静安区' },
+          { code: '310110', name: '杨浦区' },
+          { code: '310112', name: '闵行区' },
+          { code: '310115', name: '浦东新区' }
+        ]
+      }
+    ]
+  },
+  {
+    code: '500000',
+    name: '重庆市',
+    children: [
+      {
+        code: '500100',
+        name: '重庆市',
+        children: [
+          { code: '500101', name: '万州区' },
+          { code: '500103', name: '渝中区' },
+          { code: '500104', name: '大渡口区' },
+          { code: '500105', name: '江北区' }
+        ]
+      }
+    ]
+  },
+  {
+    code: '440000',
+    name: '广东省',
+    children: [
+      {
+        code: '440100',
+        name: '广州市',
+        children: [
+          { code: '440104', name: '越秀区' },
+          { code: '440106', name: '天河区' },
+          { code: '440111', name: '白云区' },
+          { code: '440113', name: '番禺区' }
+        ]
+      },
+      {
+        code: '440300',
+        name: '深圳市',
+        children: [
+          { code: '440304', name: '福田区' },
+          { code: '440305', name: '南山区' },
+          { code: '440306', name: '宝安区' },
+          { code: '440307', name: '龙岗区' }
+        ]
+      }
+    ]
+  },
+  {
+    code: '330000',
+    name: '浙江省',
+    children: [
+      {
+        code: '330100',
+        name: '杭州市',
+        children: [
+          { code: '330102', name: '上城区' },
+          { code: '330106', name: '西湖区' },
+          { code: '330108', name: '滨江区' },
+          { code: '330109', name: '萧山区' }
+        ]
+      },
+      {
+        code: '330200',
+        name: '宁波市',
+        children: [
+          { code: '330203', name: '海曙区' },
+          { code: '330205', name: '江北区' }
+        ]
+      }
+    ]
+  },
+  {
+    code: '320000',
+    name: '江苏省',
+    children: [
+      {
+        code: '320100',
+        name: '南京市',
+        children: [
+          { code: '320102', name: '玄武区' },
+          { code: '320104', name: '秦淮区' },
+          { code: '320106', name: '鼓楼区' }
+        ]
+      },
+      {
+        code: '320500',
+        name: '苏州市',
+        children: [
+          { code: '320505', name: '虎丘区' },
+          { code: '320508', name: '姑苏区' }
+        ]
+      }
+    ]
+  },
+  {
+    code: '510000',
+    name: '四川省',
+    children: [
+      {
+        code: '510100',
+        name: '成都市',
+        children: [
+          { code: '510104', name: '锦江区' },
+          { code: '510105', name: '青羊区' },
+          { code: '510107', name: '武侯区' },
+          { code: '510108', name: '成华区' }
+        ]
+      }
+    ]
+  },
+  {
+    code: '420000',
+    name: '湖北省',
+    children: [
+      {
+        code: '420100',
+        name: '武汉市',
+        children: [
+          { code: '420102', name: '江岸区' },
+          { code: '420103', name: '江汉区' },
+          { code: '420104', name: '硚口区' },
+          { code: '420105', name: '汉阳区' }
+        ]
+      }
+    ]
+  }
+];
+
+// 使用传入的数据或默认数据
+const regionData = computed(() => {
+  return props.data && props.data.length ? props.data : defaultData;
+});
+
+// 显示值
+const displayValue = computed(() => {
+  if (!props.modelValue || !props.modelValue.length) return '';
+  return props.modelValue.map(item => item.name).join(props.separator);
+});
+
+// 当前层级列表
+const currentLevelList = computed(() => {
+  if (currentLevel.value === 0) {
+    return regionData.value;
+  }
+  const parent = tempSelected.value[currentLevel.value - 1];
+  return parent?.children || [];
+});
+
+// 打开选择页面
+function openSelect() {
+  if (props.disabled) return;
+  showSelect.value = true;
+  tempSelected.value = [];
+  currentLevel.value = 0;
+  searchKeyword.value = '';
+  // 隐藏 tabBar
+  // #ifdef H5
+  try { uni.hideTabBar(); } catch (e) {}
+  // #endif
+}
+
+// 返回处理
+function handleBack() {
+  if (currentLevel.value > 0) {
+    currentLevel.value--;
+    tempSelected.value = tempSelected.value.slice(0, currentLevel.value);
+  } else {
+    showSelect.value = false;
+    emit('cancel');
+    // 显示 tabBar
+    // #ifdef H5
+    try { uni.showTabBar(); } catch (e) {}
+    // #endif
+  }
+}
+
+// 选择项目
+function selectItem(item) {
+  if (hasChildren(item) && currentLevel.value < props.level - 1) {
+    tempSelected.value = tempSelected.value.slice(0, currentLevel.value);
+    tempSelected.value.push({ code: item.code, name: item.name, children: item.children });
+    currentLevel.value++;
+  } else {
+    tempSelected.value = tempSelected.value.slice(0, currentLevel.value);
+    tempSelected.value.push({ code: item.code, name: item.name });
+    confirmSelect();
+  }
+}
+
+// 选择热门城市 - 查找完整路径
+function selectCity(city) {
+  const path = findCityPath(city.code);
+  if (path.length) {
+    emit('update:modelValue', path);
+    emit('change', path);
+    emit('confirm', path);
+  } else {
+    // 找不到路径时直接使用城市信息
+    const result = [{ code: city.code, name: city.name }];
+    emit('update:modelValue', result);
+    emit('change', result);
+    emit('confirm', result);
+  }
+  showSelect.value = false;
+  // 显示 tabBar
+  // #ifdef H5
+  try { uni.showTabBar(); } catch (e) {}
+  // #endif
+}
+
+// 查找城市的完整路径（省-市-区）
+function findCityPath(code) {
+  const path = [];
+
+  function search(list, currentPath) {
+    for (const item of list) {
+      const newPath = [...currentPath, { code: item.code, name: item.name }];
+      if (item.code === code) {
+        return newPath;
+      }
+      if (item.children) {
+        const result = search(item.children, newPath);
+        if (result) return result;
+      }
+    }
+    return null;
+  }
+
+  return search(regionData.value, []) || [];
+}
+
+// 确认选择
+function confirmSelect() {
+  const result = tempSelected.value.map(item => ({
+    code: item.code,
+    name: item.name
+  }));
+  emit('update:modelValue', result);
+  emit('change', result);
+  emit('confirm', result);
+  showSelect.value = false;
+  // 显示 tabBar
+  // #ifdef H5
+  try { uni.showTabBar(); } catch (e) {}
+  // #endif
+}
+
+// 判断是否有子级
+function hasChildren(item) {
+  return item.children && item.children.length > 0;
+}
+
+// 判断是否选中
+function isItemSelected(item) {
+  const current = tempSelected.value[currentLevel.value];
+  return current && current.code === item.code;
+}
+
+// 返回到某一级
+function backToLevel(index) {
+  currentLevel.value = index;
+  tempSelected.value = tempSelected.value.slice(0, index);
+}
+
+// 清空选择
+function clearSelection() {
+  tempSelected.value = [];
+  currentLevel.value = 0;
+}
+
+// 搜索
+function onSearch() {
+  if (!searchKeyword.value.trim()) {
+    searchResults.value = [];
+    return;
+  }
+  const keyword = searchKeyword.value.trim().toLowerCase();
+  const results = [];
+
+  // 递归搜索
+  function search(list, parentNames = []) {
+    for (const item of list) {
+      const fullName = [...parentNames, item.name].join(props.separator);
+      if (item.name.toLowerCase().includes(keyword)) {
+        results.push({ ...item, fullName });
+      }
+      if (item.children) {
+        search(item.children, [...parentNames, item.name]);
+      }
+    }
+  }
+
+  search(regionData.value);
+  searchResults.value = results.slice(0, 20);
+}
+
+// 清空搜索
+function clearSearch() {
+  searchKeyword.value = '';
+  searchResults.value = [];
+}
+</script>
+
+<style lang="scss">
+.prism-city-cascade-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;
+    }
+  }
+
+  // 全屏页面
+  .select-page {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: -100rpx; // 向下延伸覆盖 tabBar
+    width: 100%;
+    padding-bottom: 100rpx; // 补偿底部延伸
+    background: var(--prism-bg-color-page, #F5F6F7);
+    z-index: 99999;
+    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); font-size: 28rpx; }
+    .fa-times-circle { color: var(--prism-text-secondary, #86909C); font-size: 28rpx; }
+  }
+
+  .search-input {
+    flex: 1;
+    font-size: 28rpx;
+    color: var(--prism-text-primary, #1D2129);
+  }
+
+  // 内容区域
+  .page-content {
+    flex: 1;
+    height: 0;
+    padding-bottom: env(safe-area-inset-bottom, 0px);
+  }
+
+  // 区块标题
+  .section-title {
+    display: flex;
+    align-items: center;
+    gap: 8rpx;
+    padding: 24rpx 32rpx 16rpx;
+    font-size: 26rpx;
+    color: var(--prism-text-secondary, #86909C);
+    .fa-fire { color: #FF6B00; }
+  }
+
+  // 热门城市
+  .hot-cities {
+    background: var(--prism-bg-color-card, #FFFFFF);
+    margin-bottom: 16rpx;
+  }
+
+  .hot-cities-grid {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 0 32rpx 24rpx;
+    gap: 16rpx;
+  }
+
+  .hot-city-item {
+    padding: 20rpx 32rpx;
+    background: var(--prism-bg-color-container, #F7F8FA);
+    border-radius: 8rpx;
+    font-size: 28rpx;
+    color: var(--prism-text-primary, #1D2129);
+    &:active {
+      background: var(--prism-primary-light, rgba(52, 120, 246, 0.08));
+      color: var(--prism-primary-color, #3478F6);
+    }
+  }
+
+  // 面包屑
+  .breadcrumb {
+    background: var(--prism-bg-color-card, #FFFFFF);
+    margin-bottom: 16rpx;
+  }
+
+  .breadcrumb-content {
+    display: flex;
+    align-items: center;
+    padding: 0 32rpx 24rpx;
+    flex-wrap: wrap;
+    gap: 8rpx;
+  }
+
+  .breadcrumb-item {
+    display: flex;
+    align-items: center;
+    gap: 8rpx;
+    font-size: 28rpx;
+    color: var(--prism-primary-color, #3478F6);
+    .fa { font-size: 20rpx; color: var(--prism-text-placeholder, #C9CDD4); }
+  }
+
+  .breadcrumb-clear {
+    margin-left: auto;
+    .fa { font-size: 28rpx; color: var(--prism-text-secondary, #86909C); }
+  }
+
+  // 城市列表
+  .city-list {
+    background: var(--prism-bg-color-card, #FFFFFF);
+  }
+
+  .city-item {
+    display: flex;
+    align-items: center;
+    padding: 28rpx 32rpx;
+    border-bottom: 1rpx solid var(--prism-border-color-light, #E5E6EB);
+
+    .item-name {
+      flex: 1;
+      font-size: 30rpx;
+      color: var(--prism-text-primary, #1D2129);
+    }
+
+    .item-arrow {
+      font-size: 24rpx;
+      color: var(--prism-text-placeholder, #C9CDD4);
+    }
+
+    .item-check {
+      font-size: 28rpx;
+      color: var(--prism-primary-color, #3478F6);
+    }
+
+    &.selected .item-name {
+      color: var(--prism-primary-color, #3478F6);
+      font-weight: 500;
+    }
+  }
+
+  // 搜索结果
+  .search-results {
+    background: var(--prism-bg-color-card, #FFFFFF);
+  }
+
+  .result-item {
+    padding: 28rpx 32rpx;
+    border-bottom: 1rpx solid var(--prism-border-color-light, #E5E6EB);
+    font-size: 30rpx;
+    color: var(--prism-text-primary, #1D2129);
+  }
+
+  .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); }
+  }
+}
+
+// 深色模式
+.dark-mode.prism-city-cascade-select {
+  .select-page {
+    background: var(--prism-bg-color-page, #121212);
+  }
+
+  .page-header,
+  .search-box,
+  .hot-cities,
+  .breadcrumb,
+  .city-list,
+  .search-results {
+    background: var(--prism-bg-color-card, #1A1A1A);
+  }
+
+  .search-input-wrap,
+  .hot-city-item {
+    background: var(--prism-bg-color-container, #2A2A2A);
+  }
+}
+</style>