在线生成IdCard工具

原文链接

欢迎大家对于本站的访问 - AsterCasc

前言

感觉几个在线生成IdCard的网站，没有满足自己需求的，比较简单咱们就直接写到网站里面。有需求的小伙伴可以直接访问AsterCasc - 在线IdCard生成

实现

在线IdCard生成其实最麻烦的是需要存所有行政区划，然后取随机。但是我们这里没必要，因为这种东西其实意义不是特别大，只给几个主要城市的单选，如果有需求让用户直接手填即可：

<q-radio v-model="cityCode" checked-icon="task_alt" color="grey-10"  
         unchecked-icon="panorama_fish_eye" val="110101" label="北京"/>  
<q-radio v-model="cityCode" checked-icon="task_alt" color="grey-10"  
         unchecked-icon="panorama_fish_eye" val="310101" label="上海"/>  
<q-radio v-model="cityCode" checked-icon="task_alt" color="grey-10"  
         unchecked-icon="panorama_fish_eye" val="440303" label="深圳"/>  
<q-radio v-model="cityCode" checked-icon="task_alt" color="grey-10"  
         unchecked-icon="panorama_fish_eye" val="440103" label="广州"/>  
<q-radio v-model="cityCode" checked-icon="task_alt" color="grey-10"  
         unchecked-icon="panorama_fish_eye" val="330102" label="杭州"/>  
<q-radio v-model="cityCode" checked-icon="task_alt" color="grey-10"  
         unchecked-icon="panorama_fish_eye" val="320102" label="南京"/>  
<q-radio v-model="cityCode" checked-icon="task_alt" color="grey-10"  
         unchecked-icon="panorama_fish_eye" val="" label="自定义"/>  
  
<q-input v-if="!cityCode" v-model="customCityCode" color="grey" hide-bottom-space borderless  
         style="opacity: 0.75" mask="######" placeholder="行政区划代码"  
         :input-style="{width: '9rem', height:'2.2rem', fontSize: '1rem', color:'black',  
         padding: '0 1rem', borderRadius: '.5rem', backgroundColor:'#ddd',  
         margin: '0.75rem 0.5rem 0.5rem 1rem'} ">  
</q-input>  
<q-input v-else v-model="customCityCode" color="grey" readonly  
         hide-bottom-space borderless style="opacity: 0.75" placeholder="行政区划代码"  
         :input-style="{width: '9rem', height:'2.2rem', fontSize: '1rem', color:'black',  
         padding: '0 1rem', borderRadius: '.5rem', backgroundColor:'#ddd', border:'dashed 2px #aaa',  
         margin: '0.75rem 0.5rem 0.5rem 1rem'} ">  
</q-input>

let cityCode = ref("330102")  
let customCityCode = ref("")
//...
let inputCityCode = customCityCode.value  
if (cityCode.value !== '') {  
  inputCityCode = cityCode.value  
}

出生年月我们这里允许取随机和指定年月日，如果随机那么年份在1950到2000之间随机，月份在1到12月随机，日期在1到28之间随机。那么这里的问题就是比如12/31这种日期就选不到了，但是由于本身也是随机生成，也没有太大所谓，如果小伙伴需要对于这种随机日期也能取到，那么可以使用时间戳随机数来实现该随机功能：

<q-radio v-model="birth" checked-icon="task_alt" color="grey-10"  
         unchecked-icon="panorama_fish_eye" val="random" label="随机"/>  
<q-radio v-model="birth" checked-icon="task_alt" color="grey-10"  
         unchecked-icon="panorama_fish_eye" val="" label="自定义"/>  
  
  
<q-input v-if="!birth" v-model="customBirth" color="grey" hide-bottom-space borderless  
         style="opacity: 0.75"  
         :input-style="{width: '9rem', height:'2.2rem', fontSize: '1rem', color:'black',  
         padding: '0 1rem', borderRadius: '.5rem', backgroundColor:'#ddd',  
         margin: '0.75rem 0.5rem 0.5rem 1rem'} ">  
</q-input>  
<q-input v-else v-model="customBirth" color="grey" readonly  
         hide-bottom-space borderless style="opacity: 0.75"  
         :input-style="{width: '9rem', height:'2.2rem', fontSize: '1rem', color:'black',  
         padding: '0 1rem', borderRadius: '.5rem', backgroundColor:'#ddd', border:'dashed 2px #aaa',  
         margin: '0.75rem 0.5rem 0.5rem 1rem'} ">  
</q-input>

let yearNum = 1950  
let monthNum = 1  
let dayNum = 1  
if (birth.value === 'random') {  
  yearNum = yearNum + Math.floor(Math.random() * (70));  
  monthNum = monthNum + Math.floor(Math.random() * (12));  
  dayNum = dayNum + Math.floor(Math.random() * (28));  
} else {  
  const regex = /^\d{4}-\d{2}-\d{2}$/;  
  if (!regex.test(customBirth.value)) {  
    notifyTopNegative("输入日期格式错误", 1000, notify)  
    return ""  
  }  
  const inputDate = new Date(customBirth.value)  
  if (isNaN(inputDate.getTime())) {  
    notifyTopNegative("输入日期格式错误", 1000, notify)  
    return ""  
  }  
  const [year, month, day] = customBirth.value.split("-").map(Number);  
  yearNum = year  
  monthNum = month  
  dayNum = day  
  if (inputDate.getFullYear() !== year || inputDate.getMonth() + 1 !== month || inputDate.getDate() !== day) {  
    notifyTopNegative("输入日期格式错误", 1000, notify)  
    return ""  
  }  
}  
  
const year = yearNum  
const month = monthNum.toString().padStart(2, '0')  
const day = dayNum.toString().padStart(2, '0')

允许用户指定性别，通过控制倒数第二位的奇偶来决定：

<q-radio v-model="gender" checked-icon="task_alt" color="grey-10"  
         unchecked-icon="panorama_fish_eye" val="random" label="随机"/>  
<q-radio v-model="gender" checked-icon="task_alt" color="grey-10"  
         unchecked-icon="panorama_fish_eye" val="0" label="女"/>  
<q-radio v-model="gender" checked-icon="task_alt" color="grey-10"  
         unchecked-icon="panorama_fish_eye" val="1" label="男"/>  

let randomSerial;  
if (gender.value === '1') {  
  randomSerial = Math.floor(Math.random() * 100).toString().padStart(2, '0')  
      + (Math.floor(Math.random() * 5) * 2 + 1);  
} else if (gender.value === '0') {  
  randomSerial = Math.floor(Math.random() * 100).toString().padStart(2, '0')  
      + Math.floor(Math.random() * 5) * 2;  
} else (gender.value === 'random') {  
  randomSerial = Math.floor(Math.random() * 1000).toString().padStart(3, '0');  
} 

最后计算校验位：

const id17 = `${inputCityCode}${year}${month}${day}${randomSerial}`;  
  
const weights = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];  
const checkDigits = "10X98765432";  
  
let sum = 0;  
for (let i = 0; i < id17.length; i++) {  
  sum += parseInt(id17[i]) * weights[i];  
}  
  
const checkIndex = sum % 11;  
const checkDigit = checkDigits[checkIndex];  
const ret =  id17 + checkDigit

源代码

Yuno Web

原文链接

欢迎大家对于本站的访问 - AsterCasc