@ruixinkeji/prism-ui 1.0.0

package/components/PrismAddressInput/PrismAddressInput.vue

@@ -0,0 +1,597 @@
+<template>
+  <view class="prism-address-input" :class="{ 'dark-mode': appStore.isDarkMode }">
+    <!-- 模式1: textarea模式（默认） -->
+    <view class="address-wrapper" v-if="mode === 'textarea'">
+      <textarea
+        class="address-textarea"
+        v-model="addressValue"
+        :placeholder="placeholder"
+        placeholder-class="address-placeholder"
+        :auto-height="true"
+        :disabled="disabled"
+        @input="handleInput"
+      ></textarea>
+      <view class="location-btn" @click="chooseLocation">
+        <text class="fa fa-location-dot"></text>
+      </view>
+    </view>
+
+    <!-- 模式2: input模式（单行输入） -->
+    <view class="address-wrapper input-mode" v-else-if="mode === 'input'">
+      <view class="prism-input-box">
+        <input
+          :placeholder="placeholder"
+          v-model="addressValue"
+          :disabled="disabled"
+          @input="handleInput"
+        />
+      </view>
+      <view class="location-btn" @click="chooseLocation">
+        <text class="fa fa-location-crosshairs"></text>
+      </view>
+    </view>
+
+    <!-- 地图展示区域（两种模式都可以显示） -->
+    <view class="map-container" v-if="showMap && latitude && longitude" @click="chooseLocation">
+      <image
+        class="location-map"
+        :src="staticMapUrl"
+        mode="aspectFill"
+      ></image>
+      <view class="relocate-tip">
+        <text class="fa fa-location-crosshairs"></text>
+        <text>点击重新选择位置</text>
+      </view>
+    </view>
+
+    <!-- 选择模式弹窗（both模式时显示） -->
+    <view class="select-popup" v-if="showSelectPopup" @click="closePopup">
+      <view class="select-content" @click.stop>
+        <view class="select-title">选择方式</view>
+        <view class="select-options">
+          <view class="select-option" @click="handleSelectMode('map')">
+            <text class="fa fa-map-location-dot"></text>
+            <text>地图选择</text>
+          </view>
+          <view class="select-option" @click="handleSelectMode('list')">
+            <text class="fa fa-list-ul"></text>
+            <text>位置列表</text>
+          </view>
+        </view>
+        <view class="select-cancel" @click="closePopup">取消</view>
+      </view>
+    </view>
+
+    <!-- 位置列表弹窗 -->
+    <view class="list-popup" v-if="showListPopup" @click="closePopup">
+      <view class="list-content" @click.stop>
+        <view class="list-header">
+          <text class="list-title">选择位置</text>
+          <text class="fa fa-times list-close" @click="closePopup"></text>
+        </view>
+        <scroll-view class="list-scroll" scroll-y>
+          <view
+            v-for="(item, index) in locationList"
+            :key="index"
+            class="list-item"
+            @click="selectLocationItem(item)"
+          >
+            <view class="item-icon">
+              <text class="fa fa-location-dot"></text>
+            </view>
+            <view class="item-info">
+              <view class="item-name">{{ item.name }}</view>
+              <view class="item-address" v-if="item.address">{{ item.address }}</view>
+            </view>
+          </view>
+          <view class="list-empty" v-if="!locationList.length">
+            <text class="fa fa-inbox"></text>
+            <text>暂无位置数据</text>
+          </view>
+        </scroll-view>
+        <!-- 地图选择入口 -->
+        <view class="list-footer" v-if="selectMode === 'both'" @click="handleSelectMode('map')">
+          <text class="fa fa-map-location-dot"></text>
+          <text>从地图选择</text>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue';
+import { useAppStore } from '@/store/app';
+
+const props = defineProps({
+  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: ''
+  }
+});
+
+const emit = defineEmits(['update:modelValue', 'update:latitude', 'update:longitude', 'location-change']);
+
+const appStore = useAppStore();
+const addressValue = ref(props.modelValue);
+const showListPopup = ref(false);
+const showSelectPopup = ref(false);
+
+// 静态地图URL
+const staticMapUrl = 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 {
+    // both模式，显示选择弹窗
+    showSelectPopup.value = true;
+  }
+}
+
+// 打开地图选择
+function openMapPicker() {
+  uni.chooseLocation({
+    latitude: props.latitude || undefined,
+    longitude: props.longitude || undefined,
+    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) => {
+      console.log('选择位置失败', 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;
+  }
+}
+
+watch(() => props.modelValue, (val) => {
+  addressValue.value = val;
+});
+
+// 暴露方法
+defineExpose({
+  chooseLocation,
+  openMapPicker
+});
+</script>
+
+<style lang="scss">
+// 白色常量（用于深色背景上的固定白色文字）
+$color-white: #FFFFFF;
+
+.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;
+
+    // input模式样式
+    &.input-mode {
+      padding: 0;
+      background: transparent;
+      gap: 16rpx;
+
+      .prism-input-box {
+        flex: 1;
+      }
+
+      .location-btn {
+        padding: 0;
+        width: 80rpx;
+        height: 80rpx;
+        background: var(--prism-primary-color, #3478F6);
+        border-radius: 12rpx;
+        flex-shrink: 0;
+
+        .fa {
+          color: #FFFFFF;
+          font-size: 36rpx;
+        }
+
+        &:active {
+          opacity: 0.8;
+        }
+      }
+    }
+  }
+
+  .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;
+  }
+
+  .address-placeholder {
+    color: var(--prism-text-placeholder, #86909C);
+  }
+
+  .location-btn {
+    padding: 8rpx 0 8rpx 16rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+
+    .fa {
+      font-size: 40rpx;
+      color: var(--prism-primary-color, #3478F6);
+    }
+  }
+
+  .map-container {
+    margin-top: 16rpx;
+    position: relative;
+    border-radius: 16rpx;
+    overflow: hidden;
+    height: 300rpx;
+  }
+
+  .location-map {
+    width: 100%;
+    height: 100%;
+    border-radius: 16rpx;
+  }
+
+  .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;
+
+    text, .fa {
+      font-size: 24rpx;
+      color: $color-white;
+    }
+  }
+
+  // 选择模式弹窗
+  .select-popup,
+  .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;
+  }
+
+  .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));
+  }
+
+  .select-title {
+    font-size: 32rpx;
+    font-weight: 600;
+    color: var(--prism-text-primary, #1D2129);
+    text-align: center;
+    margin-bottom: 32rpx;
+  }
+
+  .select-options {
+    display: flex;
+    gap: 24rpx;
+  }
+
+  .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;
+
+    .fa {
+      font-size: 48rpx;
+      color: var(--prism-primary-color, #3478F6);
+    }
+
+    text:last-child {
+      font-size: 28rpx;
+      color: var(--prism-text-primary, #1D2129);
+    }
+
+    &:active {
+      background: var(--prism-primary-light, rgba(52, 120, 246, 0.1));
+    }
+  }
+
+  .select-cancel {
+    margin-top: 24rpx;
+    height: 88rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 32rpx;
+    color: var(--prism-text-secondary, #86909C);
+  }
+
+  // 位置列表弹窗
+  .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;
+  }
+
+  .list-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 32rpx;
+    border-bottom: 1rpx solid var(--prism-border-color-light, #E5E6EB);
+  }
+
+  .list-title {
+    font-size: 32rpx;
+    font-weight: 600;
+    color: var(--prism-text-primary, #1D2129);
+  }
+
+  .list-close {
+    font-size: 36rpx;
+    color: var(--prism-text-secondary, #86909C);
+    padding: 8rpx;
+  }
+
+  .list-scroll {
+    flex: 1;
+    max-height: 600rpx;
+  }
+
+  .list-item {
+    display: flex;
+    align-items: center;
+    padding: 24rpx 32rpx;
+    border-bottom: 1rpx solid var(--prism-border-color-light, #E5E6EB);
+    transition: all 0.2s;
+
+    &:active {
+      background: var(--prism-bg-color-container, #F7F8FA);
+    }
+  }
+
+  .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;
+
+    .fa {
+      font-size: 28rpx;
+      color: var(--prism-primary-color, #3478F6);
+    }
+  }
+
+  .item-info {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .item-name {
+    font-size: 30rpx;
+    color: var(--prism-text-primary, #1D2129);
+    margin-bottom: 8rpx;
+  }
+
+  .item-address {
+    font-size: 24rpx;
+    color: var(--prism-text-secondary, #86909C);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .list-empty {
+    padding: 80rpx 32rpx;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 16rpx;
+
+    .fa {
+      font-size: 64rpx;
+      color: var(--prism-text-placeholder, #C9CDD4);
+    }
+
+    text:last-child {
+      font-size: 28rpx;
+      color: var(--prism-text-secondary, #86909C);
+    }
+  }
+
+  .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);
+
+    .fa {
+      font-size: 32rpx;
+      color: var(--prism-primary-color, #3478F6);
+    }
+
+    text:last-child {
+      font-size: 28rpx;
+      color: var(--prism-primary-color, #3478F6);
+    }
+
+    &:active {
+      opacity: 0.7;
+    }
+  }
+}
+
+.dark-mode .prism-address-input {
+  .address-wrapper {
+    background: var(--prism-input-bg, #2A2A2A);
+
+    &.input-mode {
+      background: transparent;
+    }
+  }
+
+  .address-textarea {
+    color: var(--prism-text-primary, #E5E6EB);
+  }
+
+  .address-placeholder {
+    color: var(--prism-text-placeholder, #6B7785);
+  }
+
+  .select-content,
+  .list-content,
+  .list-footer {
+    background: var(--prism-bg-color-card, #1A1A1A);
+  }
+
+  .select-option {
+    background: var(--prism-bg-color-container, #2A2A2A);
+
+    &:active {
+      background: rgba(52, 120, 246, 0.15);
+    }
+  }
+
+  .list-item:active {
+    background: var(--prism-bg-color-container, #2A2A2A);
+  }
+}
+</style>