@ruixinkeji/prism-ui 1.0.14 → 1.0.16

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

@@ -0,0 +1,531 @@
+"use strict";
+const common_vendor = require("../../common/vendor.js");
+const store_app = require("../../store/app.js");
+const utils_system = require("../../utils/system.js");
+const _sfc_main = {
+  __name: "PrismCityPicker",
+  props: {
+    modelValue: {
+      type: Array,
+      default: () => []
+    },
+    // 选择模式：picker（滚轮）或 cascade（多层级列表）
+    mode: {
+      type: String,
+      default: "picker",
+      validator: (val) => ["picker", "cascade"].includes(val)
+    },
+    // 选择层级：2（省市）或 3（省市区）
+    level: {
+      type: Number,
+      default: 3,
+      validator: (val) => [2, 3].includes(val)
+    },
+    // 城市数据
+    data: {
+      type: Array,
+      default: () => []
+    },
+    placeholder: {
+      type: String,
+      default: "请选择城市"
+    },
+    title: {
+      type: String,
+      default: "选择城市"
+    },
+    // 是否显示编码
+    showCode: {
+      type: Boolean,
+      default: false
+    },
+    // 分隔符
+    separator: {
+      type: String,
+      default: "/"
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    // 是否显示热门城市
+    showHotCities: {
+      type: Boolean,
+      default: false
+    },
+    // 热门城市列表
+    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" }
+      ]
+    }
+  },
+  emits: ["update:modelValue", "change", "confirm", "cancel"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const appStore = store_app.useAppStore();
+    const showPicker = common_vendor.ref(false);
+    const pickerIndex = common_vendor.ref([0, 0, 0]);
+    const tempSelected = common_vendor.ref([]);
+    const currentLevel = common_vendor.ref(0);
+    const itemHeight = utils_system.rpx2px(96);
+    const pickerHeight = `${itemHeight * 5}px`;
+    const indicatorStyle = `height: ${itemHeight}px`;
+    const regionData = common_vendor.computed(() => {
+      if (props.data && props.data.length) {
+        return props.data;
+      }
+      return defaultRegionData.value;
+    });
+    const defaultRegionData = common_vendor.ref([
+      {
+        code: "110000",
+        name: "北京市",
+        children: [
+          {
+            code: "110100",
+            name: "北京市",
+            children: [
+              { code: "110101", name: "东城区" },
+              { code: "110102", name: "西城区" },
+              { code: "110105", name: "朝阳区" },
+              { code: "110106", name: "丰台区" },
+              { code: "110107", name: "石景山区" },
+              { code: "110108", name: "海淀区" },
+              { code: "110109", name: "门头沟区" },
+              { code: "110111", name: "房山区" },
+              { code: "110112", name: "通州区" },
+              { code: "110113", name: "顺义区" },
+              { code: "110114", name: "昌平区" },
+              { code: "110115", name: "大兴区" },
+              { code: "110116", name: "怀柔区" },
+              { code: "110117", name: "平谷区" },
+              { code: "110118", name: "密云区" },
+              { code: "110119", name: "延庆区" }
+            ]
+          }
+        ]
+      },
+      {
+        code: "120000",
+        name: "天津市",
+        children: [
+          {
+            code: "120100",
+            name: "天津市",
+            children: [
+              { code: "120101", name: "和平区" },
+              { code: "120102", name: "河东区" },
+              { code: "120103", name: "河西区" },
+              { code: "120104", name: "南开区" },
+              { code: "120105", name: "河北区" },
+              { code: "120106", name: "红桥区" },
+              { code: "120110", name: "东丽区" },
+              { code: "120111", name: "西青区" },
+              { code: "120112", name: "津南区" },
+              { code: "120113", name: "北辰区" },
+              { code: "120114", name: "武清区" },
+              { code: "120115", name: "宝坻区" },
+              { code: "120116", name: "滨海新区" },
+              { code: "120117", name: "宁河区" },
+              { code: "120118", name: "静海区" },
+              { code: "120119", name: "蓟州区" }
+            ]
+          }
+        ]
+      },
+      {
+        code: "310000",
+        name: "上海市",
+        children: [
+          {
+            code: "310100",
+            name: "上海市",
+            children: [
+              { code: "310101", name: "黄浦区" },
+              { code: "310104", name: "徐汇区" },
+              { code: "310105", name: "长宁区" },
+              { code: "310106", name: "静安区" },
+              { code: "310107", name: "普陀区" },
+              { code: "310109", name: "虹口区" },
+              { code: "310110", name: "杨浦区" },
+              { code: "310112", name: "闵行区" },
+              { code: "310113", name: "宝山区" },
+              { code: "310114", name: "嘉定区" },
+              { code: "310115", name: "浦东新区" },
+              { code: "310116", name: "金山区" },
+              { code: "310117", name: "松江区" },
+              { code: "310118", name: "青浦区" },
+              { code: "310120", name: "奉贤区" },
+              { code: "310151", name: "崇明区" }
+            ]
+          }
+        ]
+      },
+      {
+        code: "440000",
+        name: "广东省",
+        children: [
+          {
+            code: "440100",
+            name: "广州市",
+            children: [
+              { code: "440103", name: "荔湾区" },
+              { code: "440104", name: "越秀区" },
+              { code: "440105", name: "海珠区" },
+              { code: "440106", name: "天河区" },
+              { code: "440111", name: "白云区" },
+              { code: "440112", name: "黄埔区" },
+              { code: "440113", name: "番禺区" },
+              { code: "440114", name: "花都区" },
+              { code: "440115", name: "南沙区" },
+              { code: "440117", name: "从化区" },
+              { code: "440118", name: "增城区" }
+            ]
+          },
+          {
+            code: "440300",
+            name: "深圳市",
+            children: [
+              { code: "440303", name: "罗湖区" },
+              { code: "440304", name: "福田区" },
+              { code: "440305", name: "南山区" },
+              { code: "440306", name: "宝安区" },
+              { code: "440307", name: "龙岗区" },
+              { code: "440308", name: "盐田区" },
+              { code: "440309", name: "龙华区" },
+              { code: "440310", name: "坪山区" },
+              { code: "440311", name: "光明区" }
+            ]
+          },
+          {
+            code: "440400",
+            name: "珠海市",
+            children: [
+              { code: "440402", name: "香洲区" },
+              { code: "440403", name: "斗门区" },
+              { code: "440404", name: "金湾区" }
+            ]
+          }
+        ]
+      },
+      {
+        code: "330000",
+        name: "浙江省",
+        children: [
+          {
+            code: "330100",
+            name: "杭州市",
+            children: [
+              { code: "330102", name: "上城区" },
+              { code: "330105", name: "拱墅区" },
+              { code: "330106", name: "西湖区" },
+              { code: "330108", name: "滨江区" },
+              { code: "330109", name: "萧山区" },
+              { code: "330110", name: "余杭区" },
+              { code: "330111", name: "富阳区" },
+              { code: "330112", name: "临安区" },
+              { code: "330113", name: "临平区" },
+              { code: "330114", name: "钱塘区" }
+            ]
+          },
+          {
+            code: "330200",
+            name: "宁波市",
+            children: [
+              { code: "330203", name: "海曙区" },
+              { code: "330205", name: "江北区" },
+              { code: "330206", name: "北仑区" },
+              { code: "330211", name: "镇海区" },
+              { code: "330212", name: "鄞州区" },
+              { code: "330213", name: "奉化区" }
+            ]
+          }
+        ]
+      },
+      {
+        code: "320000",
+        name: "江苏省",
+        children: [
+          {
+            code: "320100",
+            name: "南京市",
+            children: [
+              { code: "320102", name: "玄武区" },
+              { code: "320104", name: "秦淮区" },
+              { code: "320105", name: "建邺区" },
+              { code: "320106", name: "鼓楼区" },
+              { code: "320111", name: "浦口区" },
+              { code: "320113", name: "栖霞区" },
+              { code: "320114", name: "雨花台区" },
+              { code: "320115", name: "江宁区" },
+              { code: "320116", name: "六合区" },
+              { code: "320117", name: "溧水区" },
+              { code: "320118", name: "高淳区" }
+            ]
+          },
+          {
+            code: "320500",
+            name: "苏州市",
+            children: [
+              { code: "320505", name: "虎丘区" },
+              { code: "320506", name: "吴中区" },
+              { code: "320507", name: "相城区" },
+              { code: "320508", name: "姑苏区" },
+              { code: "320509", name: "吴江区" }
+            ]
+          }
+        ]
+      }
+    ]);
+    const provinceList = common_vendor.computed(() => regionData.value || []);
+    const cityList = common_vendor.computed(() => {
+      const province = provinceList.value[pickerIndex.value[0]];
+      return (province == null ? void 0 : province.children) || [];
+    });
+    const districtList = common_vendor.computed(() => {
+      const city = cityList.value[pickerIndex.value[1]];
+      return (city == null ? void 0 : city.children) || [];
+    });
+    const currentLevelList = common_vendor.computed(() => {
+      var _a, _b;
+      if (currentLevel.value === 0) {
+        return provinceList.value;
+      } else if (currentLevel.value === 1) {
+        return ((_a = tempSelected.value[0]) == null ? void 0 : _a.children) || [];
+      } else if (currentLevel.value === 2) {
+        return ((_b = tempSelected.value[1]) == null ? void 0 : _b.children) || [];
+      }
+      return [];
+    });
+    const displayValue = common_vendor.computed(() => {
+      if (!props.modelValue || !props.modelValue.length) return "";
+      return props.modelValue.map((item) => item.name || item).join(props.separator);
+    });
+    function openPicker() {
+      if (props.disabled) return;
+      if (props.mode === "cascade") {
+        tempSelected.value = [...props.modelValue || []];
+        const selectedLen = tempSelected.value.length;
+        currentLevel.value = selectedLen >= props.level ? props.level - 1 : selectedLen;
+      } else {
+        initPickerIndex();
+      }
+      showPicker.value = true;
+    }
+    function initPickerIndex() {
+      var _a, _b;
+      if (!props.modelValue || !props.modelValue.length) {
+        pickerIndex.value = [0, 0, 0];
+        return;
+      }
+      const [province, city, district] = props.modelValue;
+      const provinceIdx = provinceList.value.findIndex(
+        (p) => p.code === (province == null ? void 0 : province.code) || p.name === (province == null ? void 0 : province.name)
+      );
+      pickerIndex.value[0] = provinceIdx >= 0 ? provinceIdx : 0;
+      const cities = ((_a = provinceList.value[pickerIndex.value[0]]) == null ? void 0 : _a.children) || [];
+      const cityIdx = cities.findIndex(
+        (c) => c.code === (city == null ? void 0 : city.code) || c.name === (city == null ? void 0 : city.name)
+      );
+      pickerIndex.value[1] = cityIdx >= 0 ? cityIdx : 0;
+      if (props.level >= 3) {
+        const districts = ((_b = cities[pickerIndex.value[1]]) == null ? void 0 : _b.children) || [];
+        const districtIdx = districts.findIndex(
+          (d) => d.code === (district == null ? void 0 : district.code) || d.name === (district == null ? void 0 : district.name)
+        );
+        pickerIndex.value[2] = districtIdx >= 0 ? districtIdx : 0;
+      }
+    }
+    function closePicker() {
+      showPicker.value = false;
+      emit("cancel");
+    }
+    function onPickerChange(e) {
+      const values = e.detail.value;
+      if (values[0] !== pickerIndex.value[0]) {
+        values[1] = 0;
+        values[2] = 0;
+      } else if (values[1] !== pickerIndex.value[1]) {
+        values[2] = 0;
+      }
+      pickerIndex.value = values;
+    }
+    function selectHotCity(city) {
+      const result = [{ code: city.code, name: city.name }];
+      emit("update:modelValue", result);
+      emit("change", result);
+      emit("confirm", result);
+      showPicker.value = false;
+    }
+    function confirmSelect() {
+      let result = [];
+      if (props.mode === "picker") {
+        const province = provinceList.value[pickerIndex.value[0]];
+        const city = cityList.value[pickerIndex.value[1]];
+        if (province) {
+          result.push({ code: province.code, name: province.name });
+        }
+        if (city) {
+          result.push({ code: city.code, name: city.name });
+        }
+        if (props.level >= 3) {
+          const district = districtList.value[pickerIndex.value[2]];
+          if (district) {
+            result.push({ code: district.code, name: district.name });
+          }
+        }
+      } else {
+        result = [...tempSelected.value];
+      }
+      emit("update:modelValue", result);
+      emit("change", result);
+      emit("confirm", result);
+      showPicker.value = false;
+    }
+    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 hasChildren(item) {
+      return item.children && item.children.length > 0;
+    }
+    function isItemSelected(item) {
+      const current = tempSelected.value[currentLevel.value];
+      return current && (current.code === item.code || current.name === item.name);
+    }
+    function backToLevel(index) {
+      currentLevel.value = index;
+      tempSelected.value = tempSelected.value.slice(0, index);
+    }
+    function clearSelection() {
+      tempSelected.value = [];
+      currentLevel.value = 0;
+    }
+    common_vendor.watch(() => props.modelValue, (val) => {
+      if (props.mode === "cascade" && showPicker.value) {
+        tempSelected.value = [...val || []];
+      }
+    }, { deep: true });
+    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(openPicker),
+        e: showPicker.value
+      }, showPicker.value ? common_vendor.e({
+        f: common_vendor.o(closePicker),
+        g: common_vendor.t(__props.title),
+        h: common_vendor.o(confirmSelect),
+        i: __props.mode === "picker"
+      }, __props.mode === "picker" ? common_vendor.e({
+        j: common_vendor.f(provinceList.value, (item, idx, i0) => {
+          return {
+            a: common_vendor.t(item.name),
+            b: item.code,
+            c: idx === pickerIndex.value[0] ? "var(--prism-primary-color, #3478F6)" : "var(--prism-text-secondary, #86909C)",
+            d: idx === pickerIndex.value[0] ? "600" : "400"
+          };
+        }),
+        k: common_vendor.unref(itemHeight) + "px",
+        l: common_vendor.unref(itemHeight) + "px",
+        m: common_vendor.f(cityList.value, (item, idx, i0) => {
+          return {
+            a: common_vendor.t(item.name),
+            b: item.code,
+            c: idx === pickerIndex.value[1] ? "var(--prism-primary-color, #3478F6)" : "var(--prism-text-secondary, #86909C)",
+            d: idx === pickerIndex.value[1] ? "600" : "400"
+          };
+        }),
+        n: common_vendor.unref(itemHeight) + "px",
+        o: common_vendor.unref(itemHeight) + "px",
+        p: __props.level >= 3
+      }, __props.level >= 3 ? {
+        q: common_vendor.f(districtList.value, (item, idx, i0) => {
+          return {
+            a: common_vendor.t(item.name),
+            b: item.code,
+            c: idx === pickerIndex.value[2] ? "var(--prism-primary-color, #3478F6)" : "var(--prism-text-secondary, #86909C)",
+            d: idx === pickerIndex.value[2] ? "600" : "400"
+          };
+        }),
+        r: common_vendor.unref(itemHeight) + "px",
+        s: common_vendor.unref(itemHeight) + "px"
+      } : {}, {
+        t: pickerIndex.value,
+        v: common_vendor.o(onPickerChange),
+        w: indicatorStyle,
+        x: pickerHeight
+      }) : __props.mode === "cascade" ? common_vendor.e({
+        z: __props.showHotCities && currentLevel.value === 0 && !tempSelected.value.length
+      }, __props.showHotCities && currentLevel.value === 0 && !tempSelected.value.length ? {
+        A: common_vendor.f(__props.hotCities, (city, k0, i0) => {
+          return {
+            a: common_vendor.t(city.name),
+            b: city.code,
+            c: common_vendor.o(($event) => selectHotCity(city), city.code)
+          };
+        })
+      } : {}, {
+        B: tempSelected.value.length
+      }, tempSelected.value.length ? {
+        C: 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)
+          });
+        }),
+        D: common_vendor.o(clearSelection)
+      } : {}, {
+        E: common_vendor.f(currentLevelList.value, (item, k0, i0) => {
+          return common_vendor.e({
+            a: common_vendor.t(item.name)
+          }, __props.showCode ? {
+            b: common_vendor.t(item.code)
+          } : {}, {
+            c: hasChildren(item)
+          }, hasChildren(item) ? {} : isItemSelected(item) ? {} : {}, {
+            d: isItemSelected(item),
+            e: item.code,
+            f: isItemSelected(item) ? 1 : "",
+            g: common_vendor.o(($event) => selectItem(item), item.code)
+          });
+        }),
+        F: __props.showCode,
+        G: !currentLevelList.value.length
+      }, !currentLevelList.value.length ? {} : {}, {
+        H: common_vendor.o(() => {
+        })
+      }) : {}, {
+        y: __props.mode === "cascade",
+        I: common_vendor.o(() => {
+        }),
+        J: common_vendor.o(closePicker)
+      }) : {}, {
+        K: common_vendor.unref(appStore).isDarkMode ? 1 : ""
+      });
+    };
+  }
+};
+wx.createComponent(_sfc_main);
+//# sourceMappingURL=../../../.sourcemap/mp-weixin/components/PrismCityPicker/PrismCityPicker.js.map

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

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

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

@@ -0,0 +1 @@
+<view class="{{['prism-city-picker', K && 'dark-mode']}}"><view class="picker-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="picker-popup" bindtap="{{J}}"><view class="picker-content" catchtap="{{I}}"><view class="picker-header"><view class="picker-cancel" bindtap="{{f}}">取消</view><view class="picker-title">{{g}}</view><view class="picker-confirm" bindtap="{{h}}">确定</view></view><view wx:if="{{i}}" class="picker-body"><block wx:if="{{r0}}"><picker-view class="picker-view" value="{{t}}" bindchange="{{v}}" indicator-class="picker-indicator" indicator-style="{{w}}" style="{{'height:' + x}}"><picker-view-column><view wx:for="{{j}}" wx:for-item="item" wx:key="b" class="picker-item" style="{{'height:' + k + ';' + ('line-height:' + l) + ';' + ('color:' + item.c) + ';' + ('font-weight:' + item.d)}}">{{item.a}}</view></picker-view-column><picker-view-column><view wx:for="{{m}}" wx:for-item="item" wx:key="b" class="picker-item" style="{{'height:' + n + ';' + ('line-height:' + o) + ';' + ('color:' + item.c) + ';' + ('font-weight:' + item.d)}}">{{item.a}}</view></picker-view-column><picker-view-column wx:if="{{p}}"><view wx:for="{{q}}" wx:for-item="item" wx:key="b" class="picker-item" style="{{'height:' + r + ';' + ('line-height:' + s) + ';' + ('color:' + item.c) + ';' + ('font-weight:' + item.d)}}">{{item.a}}</view></picker-view-column></picker-view></block></view><view wx:elif="{{y}}" class="cascade-body"><view wx:if="{{z}}" class="hot-cities"><view class="hot-cities-title"><text class="fa fa-fire"></text><text>热门城市</text></view><view class="hot-cities-list"><view wx:for="{{A}}" wx:for-item="city" wx:key="b" class="hot-city-item" bindtap="{{city.c}}">{{city.a}}</view></view><view class="hot-cities-divider"><text>全部城市</text></view></view><view wx:if="{{B}}" class="cascade-breadcrumb"><view wx:for="{{C}}" 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="{{D}}"><text class="fa fa-times"></text></view></view><scroll-view class="cascade-list" scroll-y scroll-with-animation="{{true}}" catchtouchmove="{{H}}"><view wx:for="{{E}}" wx:for-item="item" wx:key="e" class="{{['cascade-item', item.f && 'selected']}}" hover-class="none" bindtap="{{item.g}}"><view class="item-content"><text class="item-name">{{item.a}}</text><text wx:if="{{F}}" class="item-code">{{item.b}}</text></view><text wx:if="{{item.c}}" class="fa fa-chevron-right item-arrow"></text><text wx:elif="{{item.d}}" class="fa fa-check item-check"></text></view><view wx:if="{{G}}" class="cascade-empty"><text class="fa fa-inbox"></text><text>暂无数据</text></view></scroll-view></view></view></view></view>