✨ feat: 身份证控件新增录入提示和性别显示

 <!--
 <!--
  * @Date: 2022-09-14 14:44:30
  * @Date: 2022-09-14 14:44:30
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-12-29 11:32:10
+ * @LastEditTime: 2023-02-01 12:05:15
  * @FilePath: /data-table/src/components/IdentityField/index.vue
  * @FilePath: /data-table/src/components/IdentityField/index.vue
  * @Description: 身份证输入控件
  * @Description: 身份证输入控件
 -->
 -->
@@ -25,6 +25,7 @@
       :border="false"
       :border="false"
     >
     >
     </van-field>
     </van-field>
+    <div v-if="gender" class="gender"><span>性别：</span>{{ gender }}</div>
     <van-number-keyboard
     <van-number-keyboard
       v-model="item.value"
       v-model="item.value"
       :show="show"
       :show="show"
@@ -41,6 +42,7 @@
 <script setup>
 <script setup>
 import $ from "jquery";
 import $ from "jquery";
 import { storeToRefs, mainStore } from "@/utils/generatePackage";
 import { storeToRefs, mainStore } from "@/utils/generatePackage";
+import { showSuccessToast, showFailToast } from "vant";
 
 
 const props = defineProps({
 const props = defineProps({
   item: Object,
   item: Object,
@@ -108,6 +110,15 @@ const blurKeyboard = () => {
   document.getElementById("app").style.paddingBottom = "0";
   document.getElementById("app").style.paddingBottom = "0";
   // 还原border颜色
   // 还原border颜色
   content.css("border-color", "#eaeaea");
   content.css("border-color", "#eaeaea");
+  // 键盘失焦检查输入和添加性别显示
+  const input_val = props.item.value;
+  if (required && !input_val) {
+    showFailToast("身份证号码不能为空");
+  } else if (input_val && !/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(input_val)) {
+    showFailToast("请输入正确身份证号码");
+  } else {
+    gender.value = getGenderByIdNumber(input_val)
+  }
 };
 };
 
 
 // 校验函数返回 true 表示校验通过，false 表示不通过
 // 校验函数返回 true 表示校验通过，false 表示不通过
@@ -134,6 +145,31 @@ const rules = [{ validator, message: validatorMessage }];
 
 
 const onInput = (value) => {};
 const onInput = (value) => {};
 const onDelete = () => {};
 const onDelete = () => {};
+
+const gender = ref('');
+
+/**
+ * 按身份证号码获取性别
+ * @idNumber 身份证号码
+ * @return 男：male；女：female；异常（身份证号码为空或长度、格式错误）：undefined
+ */
+const getGenderByIdNumber = (idNumber) => {
+  if (idNumber) {
+    let genderCode; // 性别代码
+    if (idNumber.length == 18) { // 二代身份证号码长度为18位（第17位为性别代码）
+      genderCode = idNumber.charAt(16);
+    } else if (idNumber.length == 15) { // 一代身份证号码长度为15位（第15位为性别代码）
+      genderCode = idNumber.charAt(14);
+    }
+    if (genderCode && !isNaN(genderCode)) {
+      // 两代身份证号码的性别代码都为男奇女偶
+      if (parseInt(genderCode) % 2 == 0) {
+        return '女';
+      }
+      return '男';
+    }
+  }
+}
 </script>
 </script>
 
 
 <style lang="less" scoped>
 <style lang="less" scoped>
@@ -146,6 +182,13 @@ const onDelete = () => {};
       color: red;
       color: red;
     }
     }
   }
   }
+  .gender {
+    padding: 0 1rem 0 1rem;
+    font-size: 0.9rem;
+    span {
+      font-weight: bold;
+    }
+  }
 }
 }
 
 
 :deep(.van-field__body) {
 :deep(.van-field__body) {