@ruixinkeji/prism-ui 1.0.0 → 1.0.2

package/components/PrismIdCardInput/PrismIdCardInput.vue

@@ -1,253 +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>
+<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>