@ruixinkeji/prism-ui 1.0.14 → 1.0.16

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

@@ -0,0 +1,200 @@
+"use strict";
+const common_vendor = require("../../common/vendor.js");
+const store_app = require("../../store/app.js");
+const _sfc_main = {
+  __name: "PrismAddressInput",
+  props: {
+    modelValue: {
+      type: String,
+      default: ""
+    },
+    // 输入模式：textarea（多行）或 input（单行）
+    mode: {
+      type: String,
+      default: "textarea",
+      validator: (val) => ["textarea", "input"].includes(val)
+    },
+    // 选择模式：map（地图选择）或 list（位置列表）或 both（都支持）
+    selectMode: {
+      type: String,
+      default: "map",
+      validator: (val) => ["map", "list", "both"].includes(val)
+    },
+    // 位置列表数据（selectMode为list或both时使用）
+    locationList: {
+      type: Array,
+      default: () => []
+    },
+    latitude: {
+      type: [Number, String],
+      default: null
+    },
+    longitude: {
+      type: [Number, String],
+      default: null
+    },
+    placeholder: {
+      type: String,
+      default: "请输入地址"
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    showMap: {
+      type: Boolean,
+      default: true
+    },
+    mapKey: {
+      type: String,
+      default: ""
+    }
+  },
+  emits: ["update:modelValue", "update:latitude", "update:longitude", "location-change"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const appStore = store_app.useAppStore();
+    const addressValue = common_vendor.ref(props.modelValue);
+    const showListPopup = common_vendor.ref(false);
+    const showSelectPopup = common_vendor.ref(false);
+    const staticMapUrl = common_vendor.computed(() => {
+      if (!props.latitude || !props.longitude || !props.mapKey) return "";
+      const lat = props.latitude;
+      const lng = props.longitude;
+      const style = appStore.isDarkMode ? "&style=4" : "";
+      return `https://apis.map.qq.com/ws/staticmap/v2/?center=${lat},${lng}&zoom=16&size=600*300&maptype=roadmap&markers=size:large|color:red|${lat},${lng}&key=${props.mapKey}${style}`;
+    });
+    function handleInput(e) {
+      const value = e.detail.value;
+      addressValue.value = value;
+      emit("update:modelValue", value);
+    }
+    function chooseLocation() {
+      if (props.disabled) return;
+      if (props.selectMode === "map") {
+        openMapPicker();
+      } else if (props.selectMode === "list") {
+        showListPopup.value = true;
+      } else {
+        showSelectPopup.value = true;
+      }
+    }
+    function openMapPicker() {
+      common_vendor.index.chooseLocation({
+        latitude: props.latitude || void 0,
+        longitude: props.longitude || void 0,
+        success: (res) => {
+          if (res.name || res.address) {
+            const fullAddress = res.name ? res.address ? `${res.name}（${res.address}）` : res.name : res.address;
+            addressValue.value = fullAddress;
+            emit("update:modelValue", fullAddress);
+          }
+          emit("update:latitude", res.latitude);
+          emit("update:longitude", res.longitude);
+          emit("location-change", {
+            address: addressValue.value,
+            latitude: res.latitude,
+            longitude: res.longitude,
+            name: res.name
+          });
+        },
+        fail: (err) => {
+          common_vendor.index.__f__("log", "at components/PrismAddressInput/PrismAddressInput.vue:213", "选择位置失败", err);
+        }
+      });
+    }
+    function selectLocationItem(item) {
+      addressValue.value = item.address || item.name;
+      emit("update:modelValue", addressValue.value);
+      emit("update:latitude", item.latitude);
+      emit("update:longitude", item.longitude);
+      emit("location-change", {
+        address: addressValue.value,
+        latitude: item.latitude,
+        longitude: item.longitude,
+        name: item.name
+      });
+      showListPopup.value = false;
+    }
+    function closePopup() {
+      showListPopup.value = false;
+      showSelectPopup.value = false;
+    }
+    function handleSelectMode(mode) {
+      showSelectPopup.value = false;
+      if (mode === "map") {
+        openMapPicker();
+      } else {
+        showListPopup.value = true;
+      }
+    }
+    common_vendor.watch(() => props.modelValue, (val) => {
+      addressValue.value = val;
+    });
+    __expose({
+      chooseLocation,
+      openMapPicker
+    });
+    return (_ctx, _cache) => {
+      return common_vendor.e({
+        a: __props.mode === "textarea"
+      }, __props.mode === "textarea" ? {
+        b: __props.placeholder,
+        c: __props.disabled,
+        d: common_vendor.o([($event) => addressValue.value = $event.detail.value, handleInput]),
+        e: addressValue.value,
+        f: common_vendor.o(chooseLocation)
+      } : __props.mode === "input" ? {
+        h: __props.placeholder,
+        i: __props.disabled,
+        j: common_vendor.o([($event) => addressValue.value = $event.detail.value, handleInput]),
+        k: addressValue.value,
+        l: common_vendor.o(chooseLocation)
+      } : {}, {
+        g: __props.mode === "input",
+        m: __props.showMap && __props.latitude && __props.longitude
+      }, __props.showMap && __props.latitude && __props.longitude ? {
+        n: staticMapUrl.value,
+        o: common_vendor.o(chooseLocation)
+      } : {}, {
+        p: showSelectPopup.value
+      }, showSelectPopup.value ? {
+        q: common_vendor.o(($event) => handleSelectMode("map")),
+        r: common_vendor.o(($event) => handleSelectMode("list")),
+        s: common_vendor.o(closePopup),
+        t: common_vendor.o(() => {
+        }),
+        v: common_vendor.o(closePopup)
+      } : {}, {
+        w: showListPopup.value
+      }, showListPopup.value ? common_vendor.e({
+        x: common_vendor.o(closePopup),
+        y: common_vendor.f(__props.locationList, (item, index, i0) => {
+          return common_vendor.e({
+            a: common_vendor.t(item.name),
+            b: item.address
+          }, item.address ? {
+            c: common_vendor.t(item.address)
+          } : {}, {
+            d: index,
+            e: common_vendor.o(($event) => selectLocationItem(item), index)
+          });
+        }),
+        z: !__props.locationList.length
+      }, !__props.locationList.length ? {} : {}, {
+        A: __props.selectMode === "both"
+      }, __props.selectMode === "both" ? {
+        B: common_vendor.o(($event) => handleSelectMode("map"))
+      } : {}, {
+        C: common_vendor.o(() => {
+        }),
+        D: common_vendor.o(closePopup)
+      }) : {}, {
+        E: common_vendor.unref(appStore).isDarkMode ? 1 : ""
+      });
+    };
+  }
+};
+wx.createComponent(_sfc_main);
+//# sourceMappingURL=../../../.sourcemap/mp-weixin/components/PrismAddressInput/PrismAddressInput.js.map

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

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

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

@@ -0,0 +1 @@
+<view class="{{['prism-address-input', E && 'dark-mode']}}"><view wx:if="{{a}}" class="address-wrapper"><block wx:if="{{r0}}"><textarea class="address-textarea" placeholder="{{b}}" placeholder-class="address-placeholder" auto-height="{{true}}" disabled="{{c}}" bindinput="{{d}}" value="{{e}}"></textarea></block><view class="location-btn" bindtap="{{f}}"><text class="fa fa-location-dot"></text></view></view><view wx:elif="{{g}}" class="address-wrapper input-mode"><view class="prism-input-box"><input placeholder="{{h}}" disabled="{{i}}" bindinput="{{j}}" value="{{k}}"/></view><view class="location-btn" bindtap="{{l}}"><text class="fa fa-location-crosshairs"></text></view></view><view wx:if="{{m}}" class="map-container" bindtap="{{o}}"><image class="location-map" src="{{n}}" mode="aspectFill"></image><view class="relocate-tip"><text class="fa fa-location-crosshairs"></text><text>点击重新选择位置</text></view></view><view wx:if="{{p}}" class="select-popup" bindtap="{{v}}"><view class="select-content" catchtap="{{t}}"><view class="select-title">选择方式</view><view class="select-options"><view class="select-option" bindtap="{{q}}"><text class="fa fa-map-location-dot"></text><text>地图选择</text></view><view class="select-option" bindtap="{{r}}"><text class="fa fa-list-ul"></text><text>位置列表</text></view></view><view class="select-cancel" bindtap="{{s}}">取消</view></view></view><view wx:if="{{w}}" class="list-popup" bindtap="{{D}}"><view class="list-content" catchtap="{{C}}"><view class="list-header"><text class="list-title">选择位置</text><text class="fa fa-times list-close" bindtap="{{x}}"></text></view><scroll-view class="list-scroll" scroll-y><view wx:for="{{y}}" wx:for-item="item" wx:key="d" class="list-item" bindtap="{{item.e}}"><view class="item-icon"><text class="fa fa-location-dot"></text></view><view class="item-info"><view class="item-name">{{item.a}}</view><view wx:if="{{item.b}}" class="item-address">{{item.c}}</view></view></view><view wx:if="{{z}}" class="list-empty"><text class="fa fa-inbox"></text><text>暂无位置数据</text></view></scroll-view><view wx:if="{{A}}" class="list-footer" bindtap="{{B}}"><text class="fa fa-map-location-dot"></text><text>从地图选择</text></view></view></view></view>

package/dist/dev/mp-weixin/components/PrismAddressInput/PrismAddressInput.wxss

@@ -0,0 +1,327 @@
+/**
+ * Prism UI - SCSS 变量定义
+ * 此文件包含所有设计令牌和变量
+ * 所有变量使用 $prism- 前缀，避免与用户项目冲突
+ *
+ * 主题切换：修改下面的引入文件即可切换主题
+ * 可选主题：blue(默认) / green / purple / orange / red / cyan
+ */
+/**
+ * Prism UI - 蓝色主题（默认）
+ *
+ * 使用方式：在 variables.scss 中修改引入
+ * @import '../theme/blue.scss';
+ *
+ * 颜色值来自 colors.scss 中的 $prism-blue-* 变量
+ */
+/* ============================================================
+   一、浅色模式变量（使用 !default，允许主题文件覆盖）
+   ============================================================ */
+/* -------------------- 主题色 -------------------- */
+/* -------------------- 状态色 -------------------- */
+/* -------------------- 文字颜色 -------------------- */
+/* -------------------- 边框颜色 -------------------- */
+/* -------------------- 背景颜色 -------------------- */
+/* ============================================================
+   二、深色模式变量
+   ============================================================ */
+/* -------------------- 主题色（深色） -------------------- */
+/* -------------------- 状态色（深色） -------------------- */
+/* -------------------- 文字颜色（深色） -------------------- */
+/* -------------------- 边框颜色（深色） -------------------- */
+/* -------------------- 背景颜色（深色） -------------------- */
+/* ============================================================
+   三、主题色透明度（使用 !default，允许主题文件覆盖）
+   ============================================================ */
+/* ============================================================
+   主题色渐变（使用 !default，允许主题文件覆盖）
+   ============================================================ */
+/* ============================================================
+   四、白色透明度
+   ============================================================ */
+/* ============================================================
+   六、第三方品牌色
+   ============================================================ */
+/* ============================================================
+   八、常用阴影（使用 !default，允许主题文件覆盖）
+   ============================================================ */
+/* ============================================================
+   九、统一间距
+   ============================================================ */
+.prism-address-input .address-wrapper {
+  display: flex;
+  align-items: center;
+  min-height: 88rpx;
+  background: var(--prism-input-bg, #EBEEF2);
+  border-radius: 12rpx;
+  padding: 0 28rpx;
+}
+.prism-address-input .address-wrapper.input-mode {
+  padding: 0;
+  background: transparent;
+  gap: 16rpx;
+}
+.prism-address-input .address-wrapper.input-mode .prism-input-box {
+  flex: 1;
+}
+.prism-address-input .address-wrapper.input-mode .location-btn {
+  padding: 0;
+  width: 80rpx;
+  height: 80rpx;
+  background: var(--prism-primary-color, #3478F6);
+  border-radius: 12rpx;
+  flex-shrink: 0;
+}
+.prism-address-input .address-wrapper.input-mode .location-btn .fa {
+  color: #FFFFFF;
+  font-size: 36rpx;
+}
+.prism-address-input .address-wrapper.input-mode .location-btn:active {
+  opacity: 0.8;
+}
+.prism-address-input .address-textarea {
+  flex: 1;
+  min-height: 48rpx;
+  max-height: none;
+  font-size: 30rpx;
+  color: var(--prism-text-primary, #1D2129);
+  line-height: 1.5;
+  background: transparent;
+}
+.prism-address-input .address-placeholder {
+  color: var(--prism-text-placeholder, #86909C);
+}
+.prism-address-input .location-btn {
+  padding: 8rpx 0 8rpx 16rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.prism-address-input .location-btn .fa {
+  font-size: 40rpx;
+  color: var(--prism-primary-color, #3478F6);
+}
+.prism-address-input .map-container {
+  margin-top: 16rpx;
+  position: relative;
+  border-radius: 16rpx;
+  overflow: hidden;
+  height: 300rpx;
+}
+.prism-address-input .location-map {
+  width: 100%;
+  height: 100%;
+  border-radius: 16rpx;
+}
+.prism-address-input .relocate-tip {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: var(--prism-mask-bg, rgba(0, 0, 0, 0.5));
+  padding: 16rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8rpx;
+}
+.prism-address-input .relocate-tip text, .prism-address-input .relocate-tip .fa {
+  font-size: 24rpx;
+  color: #FFFFFF;
+}
+.prism-address-input .select-popup,
+.prism-address-input .list-popup {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--prism-mask-bg, rgba(0, 0, 0, 0.5));
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  z-index: 9999;
+}
+.prism-address-input .select-content {
+  width: 100%;
+  background: var(--prism-bg-color-card, #FFFFFF);
+  border-radius: 24rpx 24rpx 0 0;
+  padding: 32rpx;
+  padding-bottom: calc(32rpx + env(safe-area-inset-bottom));
+}
+.prism-address-input .select-title {
+  font-size: 32rpx;
+  font-weight: 600;
+  color: var(--prism-text-primary, #1D2129);
+  text-align: center;
+  margin-bottom: 32rpx;
+}
+.prism-address-input .select-options {
+  display: flex;
+  gap: 24rpx;
+}
+.prism-address-input .select-option {
+  flex: 1;
+  height: 160rpx;
+  background: var(--prism-bg-color-container, #F7F8FA);
+  border-radius: 16rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 16rpx;
+  transition: all 0.2s;
+}
+.prism-address-input .select-option .fa {
+  font-size: 48rpx;
+  color: var(--prism-primary-color, #3478F6);
+}
+.prism-address-input .select-option text:last-child {
+  font-size: 28rpx;
+  color: var(--prism-text-primary, #1D2129);
+}
+.prism-address-input .select-option:active {
+  background: var(--prism-primary-light, rgba(52, 120, 246, 0.1));
+}
+.prism-address-input .select-cancel {
+  margin-top: 24rpx;
+  height: 88rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 32rpx;
+  color: var(--prism-text-secondary, #86909C);
+}
+.prism-address-input .list-content {
+  width: 100%;
+  max-height: 70vh;
+  background: var(--prism-bg-color-card, #FFFFFF);
+  border-radius: 24rpx 24rpx 0 0;
+  display: flex;
+  flex-direction: column;
+}
+.prism-address-input .list-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 32rpx;
+  border-bottom: 1rpx solid var(--prism-border-color-light, #E5E6EB);
+}
+.prism-address-input .list-title {
+  font-size: 32rpx;
+  font-weight: 600;
+  color: var(--prism-text-primary, #1D2129);
+}
+.prism-address-input .list-close {
+  font-size: 36rpx;
+  color: var(--prism-text-secondary, #86909C);
+  padding: 8rpx;
+}
+.prism-address-input .list-scroll {
+  flex: 1;
+  max-height: 600rpx;
+}
+.prism-address-input .list-item {
+  display: flex;
+  align-items: center;
+  padding: 24rpx 32rpx;
+  border-bottom: 1rpx solid var(--prism-border-color-light, #E5E6EB);
+  transition: all 0.2s;
+}
+.prism-address-input .list-item:active {
+  background: var(--prism-bg-color-container, #F7F8FA);
+}
+.prism-address-input .item-icon {
+  width: 64rpx;
+  height: 64rpx;
+  background: var(--prism-primary-light, rgba(52, 120, 246, 0.1));
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 24rpx;
+  flex-shrink: 0;
+}
+.prism-address-input .item-icon .fa {
+  font-size: 28rpx;
+  color: var(--prism-primary-color, #3478F6);
+}
+.prism-address-input .item-info {
+  flex: 1;
+  min-width: 0;
+}
+.prism-address-input .item-name {
+  font-size: 30rpx;
+  color: var(--prism-text-primary, #1D2129);
+  margin-bottom: 8rpx;
+}
+.prism-address-input .item-address {
+  font-size: 24rpx;
+  color: var(--prism-text-secondary, #86909C);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.prism-address-input .list-empty {
+  padding: 80rpx 32rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16rpx;
+}
+.prism-address-input .list-empty .fa {
+  font-size: 64rpx;
+  color: var(--prism-text-placeholder, #C9CDD4);
+}
+.prism-address-input .list-empty text:last-child {
+  font-size: 28rpx;
+  color: var(--prism-text-secondary, #86909C);
+}
+.prism-address-input .list-footer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12rpx;
+  padding: 24rpx 32rpx;
+  padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
+  border-top: 1rpx solid var(--prism-border-color-light, #E5E6EB);
+  background: var(--prism-bg-color-card, #FFFFFF);
+}
+.prism-address-input .list-footer .fa {
+  font-size: 32rpx;
+  color: var(--prism-primary-color, #3478F6);
+}
+.prism-address-input .list-footer text:last-child {
+  font-size: 28rpx;
+  color: var(--prism-primary-color, #3478F6);
+}
+.prism-address-input .list-footer:active {
+  opacity: 0.7;
+}
+.dark-mode .prism-address-input .address-wrapper {
+  background: var(--prism-input-bg, #2A2A2A);
+}
+.dark-mode .prism-address-input .address-wrapper.input-mode {
+  background: transparent;
+}
+.dark-mode .prism-address-input .address-textarea {
+  color: var(--prism-text-primary, #E5E6EB);
+}
+.dark-mode .prism-address-input .address-placeholder {
+  color: var(--prism-text-placeholder, #6B7785);
+}
+.dark-mode .prism-address-input .select-content,
+.dark-mode .prism-address-input .list-content,
+.dark-mode .prism-address-input .list-footer {
+  background: var(--prism-bg-color-card, #1A1A1A);
+}
+.dark-mode .prism-address-input .select-option {
+  background: var(--prism-bg-color-container, #2A2A2A);
+}
+.dark-mode .prism-address-input .select-option:active {
+  background: rgba(52, 120, 246, 0.15);
+}
+.dark-mode .prism-address-input .list-item:active {
+  background: var(--prism-bg-color-container, #2A2A2A);
+}