@ruixinkeji/prism-ui 1.0.0

package/components/PrismDropdown/PrismDropdown.vue

@@ -0,0 +1,77 @@
+<template>
+  <view class="prism-dropdown">
+    <view class="prism-dropdown__bar">
+      <view
+        v-for="(item, index) in menuList"
+        :key="index"
+        class="prism-dropdown__item"
+        :class="{ 'prism-dropdown__item--active': activeIndex === index }"
+        @click="toggleDropdown(index)"
+      >
+        <text>{{ item.value }}</text>
+        <text class="prism-dropdown__arrow fa fa-chevron-down"></text>
+      </view>
+    </view>
+
+    <!-- 下拉面板 -->
+    <view
+      v-for="(item, index) in menuList"
+      :key="'popup-' + index"
+      class="prism-dropdown__popup"
+      :class="{ 'prism-dropdown__popup--show': activeIndex === index }"
+    >
+      <view
+        v-for="opt in item.options"
+        :key="opt"
+        class="prism-dropdown__option"
+        :class="{ 'prism-dropdown__option--selected': item.value === opt }"
+        @click="selectOption(index, opt)"
+      >
+        <text>{{ opt }}</text>
+        <text class="prism-dropdown__check fa fa-check"></text>
+      </view>
+    </view>
+
+    <!-- 遮罩层 -->
+    <view
+      class="prism-dropdown__mask"
+      :class="{ 'prism-dropdown__mask--show': activeIndex >= 0 }"
+      @click="closeDropdown"
+    ></view>
+  </view>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue';
+
+const props = defineProps({
+  menus: {
+    type: Array,
+    required: true
+    // 格式: [{ title: '排序', value: '综合排序', options: ['综合排序', '销量优先'] }]
+  }
+});
+
+const emit = defineEmits(['change']);
+
+const activeIndex = ref(-1);
+const menuList = ref([...props.menus]);
+
+watch(() => props.menus, (val) => {
+  menuList.value = [...val];
+}, { deep: true });
+
+function toggleDropdown(index) {
+  activeIndex.value = activeIndex.value === index ? -1 : index;
+}
+
+function closeDropdown() {
+  activeIndex.value = -1;
+}
+
+function selectOption(index, opt) {
+  menuList.value[index].value = opt;
+  activeIndex.value = -1;
+  emit('change', { index, value: opt, menu: menuList.value[index] });
+}
+</script>

package/components/PrismGroupSticky/PrismGroupSticky.vue

@@ -0,0 +1,352 @@
+<template>
+  <view class="prism-group-sticky-wrapper" :style="{ height: height }">
+    <scroll-view
+      class="prism-group-sticky"
+      scroll-y
+      :scroll-top="scrollTop"
+      :enhanced="true"
+      :show-scrollbar="false"
+      style="height: 100%"
+      @scroll="onScroll"
+    >
+      <slot></slot>
+    </scroll-view>
+
+    <!-- 右侧索引条 -->
+    <view
+      v-if="showIndexBar && indexList.length"
+      class="prism-index-bar"
+      @touchstart="onIndexTouchStart"
+      @touchmove.stop.prevent="onIndexTouchMove"
+      @touchend="onIndexTouchEnd"
+    >
+      <view
+        v-for="item in indexList"
+        :key="item"
+        class="index-item"
+        :class="{ active: currentIndex === item }"
+      >{{ item }}</view>
+    </view>
+
+    <!-- 气泡提示（移到索引条外部） -->
+    <view
+      v-if="showIndicator"
+      class="index-indicator"
+      :style="{ top: indicatorTop + 'px' }"
+    >{{ currentIndex }}</view>
+  </view>
+</template>
+
+<script setup>
+import { ref, nextTick, getCurrentInstance } from 'vue';
+
+const props = defineProps({
+  // 索引列表
+  indexList: {
+    type: Array,
+    default: () => []
+  },
+  // 是否显示索引条
+  showIndexBar: {
+    type: Boolean,
+    default: false
+  },
+  // 容器高度
+  height: {
+    type: String,
+    default: '100%'
+  }
+});
+
+const emit = defineEmits(['index-change']);
+const instance = getCurrentInstance();
+
+// 当前选中的索引
+const currentIndex = ref('');
+// 是否显示气泡
+const showIndicator = ref(false);
+// 气泡位置
+const indicatorTop = ref(0);
+// 滚动位置
+const scrollTop = ref(0);
+// 当前实际滚动位置
+let currentScrollTop = 0;
+// 索引条位置信息
+let indexBarRect = null;
+// 各分组位置缓存
+let groupPositions = {};
+
+// 根据触摸位置计算当前字母
+const getLetterByTouch = (touchY) => {
+  if (!indexBarRect || !props.indexList.length) return '';
+  const itemHeight = indexBarRect.height / props.indexList.length;
+  const relativeY = touchY - indexBarRect.top;
+  const index = Math.floor(relativeY / itemHeight);
+  if (index < 0) return props.indexList[0];
+  if (index >= props.indexList.length) return props.indexList[props.indexList.length - 1];
+  return props.indexList[index];
+};
+
+// 计算各分组位置
+const calculateGroupPositions = () => {
+  groupPositions = {};
+  props.indexList.forEach(letter => {
+    const el = document.getElementById(`group-${letter}`);
+    if (el) {
+      groupPositions[letter] = el.offsetTop;
+    }
+  });
+};
+
+// 滚动到指定字母
+const scrollToLetter = (letter) => {
+  // 确保位置已计算
+  if (!groupPositions[letter]) {
+    calculateGroupPositions();
+  }
+
+  const targetTop = groupPositions[letter];
+  if (targetTop !== undefined) {
+    // 需要设置一个不同的值才能触发滚动
+    scrollTop.value = targetTop + 0.1;
+    nextTick(() => {
+      scrollTop.value = targetTop;
+    });
+  }
+};
+
+// 滚动事件
+const onScroll = (e) => {
+  currentScrollTop = e.detail.scrollTop;
+};
+
+// 更新选中字母
+const updateLetter = (touchY) => {
+  // 更新气泡位置
+  indicatorTop.value = touchY;
+
+  const letter = getLetterByTouch(touchY);
+  if (letter) {
+    // 每次都更新 currentIndex，确保激活状态及时变化
+    currentIndex.value = letter;
+    scrollToLetter(letter);
+    emit('index-change', letter);
+  }
+};
+
+// 触摸开始
+const onIndexTouchStart = (e) => {
+  showIndicator.value = true;
+  const touchY = e.touches[0].clientY;
+  indicatorTop.value = touchY;
+
+  // 获取索引条位置并更新字母
+  uni.createSelectorQuery()
+    .in(instance)
+    .select('.prism-index-bar')
+    .boundingClientRect((rect) => {
+      if (rect) {
+        indexBarRect = rect;
+        const letter = getLetterByTouch(touchY);
+        if (letter) {
+          currentIndex.value = letter;
+          scrollToLetter(letter);
+          emit('index-change', letter);
+        }
+      }
+    })
+    .exec();
+};
+
+// 触摸移动
+const onIndexTouchMove = (e) => {
+  const touchY = e.touches[0].clientY;
+  if (indexBarRect) {
+    updateLetter(touchY);
+  }
+};
+
+// 触摸结束
+const onIndexTouchEnd = () => {
+  showIndicator.value = false;
+};
+</script>
+
+<style lang="scss">
+.prism-group-sticky-wrapper {
+  position: relative;
+  height: 100%;
+}
+
+.prism-group-sticky {
+  height: 100%;
+
+  // H5 环境下让 scroll-view 内部容器支持 sticky
+  :deep(.uni-scroll-view-content) {
+    height: auto !important;
+  }
+
+  // 分组索引头（吸顶）
+  :deep(.group-index) {
+    position: -webkit-sticky;
+    position: sticky;
+    top: -1px;
+    z-index: 10;
+    margin: 0;
+    padding: 12rpx 24rpx;
+    padding-top: calc(12rpx + 1px);
+    font-size: 26rpx;
+    font-weight: 600;
+    color: var(--prism-primary-color, #3478F6);
+    background: var(--prism-bg-color-page, #F7F8FA);
+  }
+
+  .dark-mode & :deep(.group-index) {
+    background: var(--prism-bg-color-page, #121212);
+  }
+
+  // 分组内容项
+  :deep(.group-item) {
+    display: flex;
+    align-items: center;
+    min-height: 88rpx;
+    padding: 24rpx 32rpx;
+    background: var(--prism-bg-color-card, #FFFFFF);
+    border-bottom: 1rpx solid var(--prism-border-color-light, #F2F3F5);
+    font-size: 28rpx;
+    color: var(--prism-text-primary, #1D2129);
+  }
+
+  .dark-mode & :deep(.group-item) {
+    background: var(--prism-bg-color-card, #242424);
+    border-bottom-color: var(--prism-border-color-light, #2D2D2D);
+  }
+
+  // 每个分组的最后一个 item（后面紧跟 group-index 或者是最后一个）
+  :deep(.group-item:has(+ .group-index)),
+  :deep(.group-item:last-child) {
+    border-radius: 0 0 16rpx 16rpx;
+    border-bottom: none;
+  }
+
+  :deep(.group-item:active) {
+    background: var(--prism-bg-color, #F2F2F2);
+  }
+
+  .dark-mode & :deep(.group-item:active) {
+    background: var(--prism-bg-color, #1A1A1A);
+  }
+
+  // 第一个 group-item（紧跟在 group-index 后面）- 顶部圆角
+  :deep(.group-index + .group-item) {
+    border-radius: 16rpx 16rpx 0 0;
+  }
+
+  // 分组只有一个 item 时 - 全圆角
+  :deep(.group-index + .group-item:has(+ .group-index)),
+  :deep(.group-index + .group-item:last-child) {
+    border-radius: 16rpx;
+  }
+
+  // 头像（可选）
+  .group-avatar {
+    width: 80rpx;
+    height: 80rpx;
+    border-radius: 50%;
+    margin-right: 24rpx;
+    background: var(--prism-primary-light, #EBF2FF);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 28rpx;
+    font-weight: 600;
+    color: var(--prism-primary-color, #3478F6);
+    flex-shrink: 0;
+
+    .dark-mode & {
+      background: rgba(52, 120, 246, 0.15);
+    }
+  }
+
+  // 信息区（可选）
+  .group-info {
+    flex: 1;
+    min-width: 0;
+
+    .group-title {
+      font-size: 30rpx;
+      font-weight: 500;
+      color: var(--prism-text-primary, #1D2129);
+      margin-bottom: 4rpx;
+
+      .dark-mode & {
+        color: var(--prism-text-primary, #E5E6EB);
+      }
+    }
+
+    .group-desc {
+      font-size: 24rpx;
+      color: var(--prism-text-secondary, #86909C);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+}
+
+// 右侧索引条
+.prism-index-bar {
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 100;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 12rpx 16rpx 12rpx 24rpx;
+  background: rgba(255, 255, 255, 0.02);
+  border-radius: 20rpx 0 0 20rpx;
+  -webkit-backdrop-filter: blur(8px);
+  backdrop-filter: blur(8px);
+
+  .index-item {
+    width: 36rpx;
+    height: 36rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 22rpx;
+    color: var(--prism-text-primary, #1D2129);
+    font-weight: 500;
+    background: transparent;
+
+    &:active,
+    &.active {
+      color: var(--prism-primary-color, #3478F6);
+      font-weight: 600;
+    }
+  }
+}
+
+// 气泡提示
+.index-indicator {
+  position: fixed;
+  right: 120rpx;
+  width: 100rpx;
+  height: 100rpx;
+  margin-top: -50rpx;
+  border-radius: 50%;
+  background: rgba(52, 120, 246, 0.8);
+  -webkit-backdrop-filter: blur(10px);
+  backdrop-filter: blur(10px);
+  color: #FFFFFF;
+  font-size: 48rpx;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 8rpx 32rpx rgba(52, 120, 246, 0.3);
+  z-index: 1000;
+}
+</style>

package/components/PrismIdCardInput/PrismIdCardInput.vue

@@ -0,0 +1,253 @@
+<template>
+  <view class="prism-id-card-input" :class="{ 'dark-mode': appStore.isDarkMode }">
+    <!-- 身份证号输入框 -->
+    <view class="id-card-input-wrapper">
+      <input
+        class="id-card-input"
+        type="idcard"
+        :value="displayValue"
+        :placeholder="placeholder"
+        placeholder-class="id-placeholder"
+        :maxlength="21"
+        @input="handleInput"
+        @focus="onFocus"
+        @blur="onBlur"
+      />
+    </view>
+
+    <!-- 身份证信息解析 -->
+    <view class="id-info" v-if="showInfo && parsedInfo.valid">
+      <view class="info-item">
+        <text class="info-label">地区：</text>
+        <text class="info-value">{{ parsedInfo.region }}</text>
+      </view>
+      <view class="info-item">
+        <text class="info-label">出生日期：</text>
+        <text class="info-value">{{ parsedInfo.birthday }}</text>
+      </view>
+      <view class="info-item">
+        <text class="info-label">性别：</text>
+        <text class="info-value">{{ parsedInfo.gender }}</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue';
+import { useAppStore } from '@/store/app';
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: ''
+  },
+  showInfo: {
+    type: Boolean,
+    default: true
+  },
+  placeholder: {
+    type: String,
+    default: '请输入身份证号'
+  }
+});
+
+const emit = defineEmits(['update:modelValue', 'complete', 'valid']);
+
+const appStore = useAppStore();
+const idValue = ref(props.modelValue);
+const lastDisplayLength = ref(0);
+
+// 格式化显示值（6-8-4 格式，用空格分隔）
+const displayValue = computed(() => {
+  const val = idValue.value;
+  if (!val) return '';
+
+  let result = '';
+  for (let i = 0; i < val.length; i++) {
+    if (i === 6 || i === 14) {
+      result += ' ';
+    }
+    result += val[i];
+  }
+  return result;
+});
+
+// 解析身份证信息
+const parsedInfo = computed(() => {
+  const id = idValue.value;
+  if (id.length !== 18) {
+    return { valid: false };
+  }
+
+  // 验证校验码
+  const weights = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
+  const checkCodes = ['1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2'];
+  let sum = 0;
+  for (let i = 0; i < 17; i++) {
+    sum += parseInt(id[i]) * weights[i];
+  }
+  const checkCode = checkCodes[sum % 11];
+  if (id[17].toUpperCase() !== checkCode) {
+    return { valid: false };
+  }
+
+  // 解析出生日期
+  const year = id.substring(6, 10);
+  const month = id.substring(10, 12);
+  const day = id.substring(12, 14);
+  const birthday = `${year}年${month}月${day}日`;
+
+  // 解析性别
+  const genderCode = parseInt(id[16]);
+  const gender = genderCode % 2 === 1 ? '男' : '女';
+
+  return {
+    valid: true,
+    region: '—',
+    birthday,
+    gender
+  };
+});
+
+function onFocus() {
+  // 焦点事件
+}
+
+function onBlur() {
+  // 失焦事件
+}
+
+function handleInput(e) {
+  const inputValue = e.detail.value;
+  const oldLength = lastDisplayLength.value;
+  const newLength = inputValue.length;
+
+  // 去掉空格，只允许数字和X
+  let value = inputValue.replace(/\s/g, '').toUpperCase().replace(/[^0-9X]/g, '');
+
+  // 判断是否是删除操作，并且删除到了空格位置
+  // 空格位置在显示值的第7位(索引6)和第16位(索引15)
+  if (newLength < oldLength) {
+    // 删除操作
+    const deletedPos = oldLength - 1;
+    // 如果删除的是空格后的第一个字符，需要额外删除一个字符
+    if (deletedPos === 7 || deletedPos === 16) {
+      // 删除到空格位置了，再删一个
+      const actualPos = deletedPos === 7 ? 6 : 14;
+      value = value.slice(0, actualPos - 1) + value.slice(actualPos);
+    }
+  }
+
+  // X只能在最后一位
+  if (value.length < 18) {
+    value = value.replace(/X/g, '');
+  } else if (value.length === 18 && value[17] === 'X') {
+    value = value.slice(0, 17).replace(/X/g, '') + 'X';
+  } else {
+    value = value.replace(/X/g, '');
+  }
+
+  value = value.slice(0, 18);
+  idValue.value = value;
+  emit('update:modelValue', value);
+
+  // 更新上次显示长度
+  lastDisplayLength.value = displayValue.value.length;
+
+  if (value.length === 18) {
+    emit('complete', value);
+    if (parsedInfo.value.valid) {
+      emit('valid', parsedInfo.value);
+    }
+  }
+}
+
+watch(() => props.modelValue, (val) => {
+  idValue.value = val;
+});
+</script>
+
+<style lang="scss">
+.prism-id-card-input {
+  .id-card-input-wrapper {
+    background: var(--prism-input-bg, #EBEEF2);
+    border-radius: 12rpx;
+    padding: 0 24rpx;
+    height: 88rpx;
+    display: flex;
+    align-items: center;
+    transition: all 0.3s ease;
+
+    &:focus-within {
+      background: var(--prism-primary-light, #E3EEFF);
+    }
+  }
+
+  .id-card-input {
+    flex: 1;
+    font-size: 32rpx;
+    font-weight: 500;
+    color: var(--prism-text-primary, #1D2129);
+    letter-spacing: 2rpx;
+  }
+
+  .id-placeholder {
+    color: var(--prism-text-placeholder, #86909C);
+    font-weight: 400;
+  }
+
+  .id-info {
+    margin-top: 24rpx;
+    padding: 20rpx;
+    background: rgba(52, 120, 246, 0.08);
+    border-radius: 12rpx;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16rpx;
+
+    .info-item {
+      display: flex;
+      align-items: center;
+
+      .info-label {
+        font-size: 24rpx;
+        color: var(--prism-text-secondary, #86909C);
+      }
+
+      .info-value {
+        font-size: 24rpx;
+        color: var(--prism-text-primary, #1D2129);
+        font-weight: 500;
+      }
+    }
+  }
+}
+
+.dark-mode .prism-id-card-input {
+  .id-card-input-wrapper {
+    background: var(--prism-input-bg, #2A2A2A);
+
+    &:focus-within {
+      background: rgba(52, 120, 246, 0.12);
+      box-shadow: 0 0 0 2rpx rgba(52, 120, 246, 0.4), 0 4rpx 16rpx rgba(52, 120, 246, 0.15);
+    }
+  }
+
+  .id-card-input {
+    color: var(--prism-text-primary, #E5E6EB);
+  }
+
+  .id-placeholder {
+    color: var(--prism-text-placeholder, #6B7785);
+  }
+
+  .id-info {
+    background: rgba(52, 120, 246, 0.15);
+
+    .info-value {
+      color: var(--prism-text-primary, #E5E6EB);
+    }
+  }
+}
+</style>