@ruixinkeji/prism-ui 1.0.14 → 1.0.16

package/dist/dev/mp-weixin/components/PrismCityCascadeSelect/PrismCityCascadeSelect.js

@@ -0,0 +1,449 @@
+"use strict";
+const common_vendor = require("../../common/vendor.js");
+const store_app = require("../../store/app.js");
+const _sfc_main = {
+  __name: "PrismCityCascadeSelect",
+  props: {
+    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
+    }
+  },
+  emits: ["update:modelValue", "change", "confirm", "cancel"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const appStore = store_app.useAppStore();
+    const showSelect = common_vendor.ref(false);
+    const tempSelected = common_vendor.ref([]);
+    const currentLevel = common_vendor.ref(0);
+    const searchKeyword = common_vendor.ref("");
+    const searchResults = common_vendor.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 = common_vendor.computed(() => {
+      return props.data && props.data.length ? props.data : defaultData;
+    });
+    const displayValue = common_vendor.computed(() => {
+      if (!props.modelValue || !props.modelValue.length) return "";
+      return props.modelValue.map((item) => item.name).join(props.separator);
+    });
+    const currentLevelList = common_vendor.computed(() => {
+      if (currentLevel.value === 0) {
+        return regionData.value;
+      }
+      const parent = tempSelected.value[currentLevel.value - 1];
+      return (parent == null ? void 0 : parent.children) || [];
+    });
+    function openSelect() {
+      if (props.disabled) return;
+      showSelect.value = true;
+      tempSelected.value = [];
+      currentLevel.value = 0;
+      searchKeyword.value = "";
+    }
+    function handleBack() {
+      if (currentLevel.value > 0) {
+        currentLevel.value--;
+        tempSelected.value = tempSelected.value.slice(0, currentLevel.value);
+      } else {
+        showSelect.value = false;
+        emit("cancel");
+      }
+    }
+    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;
+    }
+    function findCityPath(code) {
+      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;
+    }
+    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 = [];
+    }
+    return (_ctx, _cache) => {
+      return common_vendor.e({
+        a: common_vendor.t(displayValue.value || __props.placeholder),
+        b: !displayValue.value ? 1 : "",
+        c: displayValue.value ? 1 : "",
+        d: common_vendor.o(openSelect),
+        e: showSelect.value
+      }, showSelect.value ? common_vendor.e({
+        f: common_vendor.o(handleBack),
+        g: common_vendor.t(__props.title),
+        h: __props.showSearch
+      }, __props.showSearch ? common_vendor.e({
+        i: __props.searchPlaceholder,
+        j: common_vendor.o([($event) => searchKeyword.value = $event.detail.value, onSearch]),
+        k: searchKeyword.value,
+        l: searchKeyword.value
+      }, searchKeyword.value ? {
+        m: common_vendor.o(clearSearch)
+      } : {}) : {}, {
+        n: searchKeyword.value && searchResults.value.length
+      }, searchKeyword.value && searchResults.value.length ? {
+        o: common_vendor.f(searchResults.value, (item, k0, i0) => {
+          return {
+            a: common_vendor.t(item.fullName || item.name),
+            b: item.code,
+            c: common_vendor.o(($event) => selectCity(item), item.code)
+          };
+        })
+      } : searchKeyword.value && !searchResults.value.length ? {} : common_vendor.e({
+        q: __props.showHotCities && currentLevel.value === 0
+      }, __props.showHotCities && currentLevel.value === 0 ? {
+        r: common_vendor.f(__props.hotCities, (city, k0, i0) => {
+          return {
+            a: common_vendor.t(city.name),
+            b: city.code,
+            c: common_vendor.o(($event) => selectCity(city), city.code)
+          };
+        })
+      } : {}, {
+        s: tempSelected.value.length
+      }, tempSelected.value.length ? {
+        t: common_vendor.f(tempSelected.value, (item, index, i0) => {
+          return common_vendor.e({
+            a: common_vendor.t(item.name),
+            b: index < tempSelected.value.length - 1
+          }, index < tempSelected.value.length - 1 ? {} : {}, {
+            c: index,
+            d: common_vendor.o(($event) => backToLevel(index), index)
+          });
+        }),
+        v: common_vendor.o(clearSelection)
+      } : {}, {
+        w: currentLevel.value === 0
+      }, currentLevel.value === 0 ? {} : {
+        x: common_vendor.t(levelNames[currentLevel.value])
+      }, {
+        y: common_vendor.f(currentLevelList.value, (item, k0, i0) => {
+          return common_vendor.e({
+            a: common_vendor.t(item.name),
+            b: hasChildren(item)
+          }, hasChildren(item) ? {} : isItemSelected(item) ? {} : {}, {
+            c: isItemSelected(item),
+            d: item.code,
+            e: isItemSelected(item) ? 1 : "",
+            f: common_vendor.o(($event) => selectItem(item), item.code)
+          });
+        })
+      }), {
+        p: searchKeyword.value && !searchResults.value.length,
+        z: common_vendor.o(() => {
+        })
+      }) : {}, {
+        A: common_vendor.unref(appStore).isDarkMode ? 1 : ""
+      });
+    };
+  }
+};
+wx.createComponent(_sfc_main);
+//# sourceMappingURL=../../../.sourcemap/mp-weixin/components/PrismCityCascadeSelect/PrismCityCascadeSelect.js.map

package/dist/dev/mp-weixin/components/PrismCityCascadeSelect/PrismCityCascadeSelect.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

package/dist/dev/mp-weixin/components/PrismCityCascadeSelect/PrismCityCascadeSelect.wxml

@@ -0,0 +1 @@
+<view class="{{['prism-city-cascade-select', A && 'dark-mode']}}"><view class="select-trigger" bindtap="{{d}}"><block wx:if="{{$slots.d}}"><slot></slot></block><block wx:else><view class="prism-select-box"><text class="{{[b && 'placeholder', c && 'select-text']}}">{{a}}</text><text class="select-arrow fa fa-map-marker-alt"></text></view></block></view><view wx:if="{{e}}" class="select-page"><view class="page-header"><view class="header-back" bindtap="{{f}}"><text class="fa fa-arrow-left"></text></view><view class="header-title">{{g}}</view><view class="header-right"></view></view><view wx:if="{{h}}" class="search-box"><view class="search-input-wrap"><text class="fa fa-search"></text><input class="search-input" type="text" placeholder="{{i}}" bindinput="{{j}}" value="{{k}}"/><text wx:if="{{l}}" class="fa fa-times-circle" bindtap="{{m}}"></text></view></view><scroll-view class="page-content" scroll-y catchtouchmove="{{z}}"><view wx:if="{{n}}" class="search-results"><view wx:for="{{o}}" wx:for-item="item" wx:key="b" class="result-item" bindtap="{{item.c}}"><text class="item-name">{{item.a}}</text></view></view><view wx:elif="{{p}}" class="search-empty"><text class="fa fa-search"></text><text>未找到相关城市</text></view><view wx:else><view wx:if="{{q}}" class="hot-cities"><view class="section-title"><text class="fa fa-fire"></text><text>热门城市</text></view><view class="hot-cities-grid"><view wx:for="{{r}}" wx:for-item="city" wx:key="b" class="hot-city-item" bindtap="{{city.c}}">{{city.a}}</view></view></view><view wx:if="{{s}}" class="breadcrumb"><view class="section-title"><text>当前选择</text></view><view class="breadcrumb-content"><view wx:for="{{t}}" wx:for-item="item" wx:key="c" class="breadcrumb-item" bindtap="{{item.d}}"><text>{{item.a}}</text><text wx:if="{{item.b}}" class="fa fa-chevron-right"></text></view><view class="breadcrumb-clear" bindtap="{{v}}"><text class="fa fa-times"></text></view></view></view><view class="city-list"><view wx:if="{{w}}" class="section-title"><text>全部省份</text></view><view wx:else class="section-title"><text>请选择{{x}}</text></view><view wx:for="{{y}}" wx:for-item="item" wx:key="d" class="{{['city-item', item.e && 'selected']}}" bindtap="{{item.f}}"><text class="item-name">{{item.a}}</text><text wx:if="{{item.b}}" class="fa fa-chevron-right item-arrow"></text><text wx:elif="{{item.c}}" class="fa fa-check item-check"></text></view></view></view></scroll-view></view></view>