//==================================================================
// **无缝支持新版本谷歌Chrome火狐Firefox网页浏览器，支持H5、Vue、React、Node.js、jQuery、JSP、PHP、ASP、ASPX、JS、HTML等开发语言
// 控件版本
《template》
《div id=“app”》
《table width=“800px” border=“0” cellspacing=“1” cellpadding=“2” align=“center” bgcolor=“#18bf10”》
《tr》
《td colspan=“3” align=“center” height=“60px;” class=“tfonts”》
东信EST-100GS身份证读卡器系列产品谷歌Chrome、火狐Firefox测试页面V4.2.3
《/td》
《/tr》
《tr》
《td class=“title”》姓名：《/td》
《td width=“100px”》
《input type=“text” name=“text_name” id=“text_name” v-model=“text_name” readonly 》
《/td》
《td rowspan=“5” align=“center”》
《img id=“PhotoID” name=“Photo” style=“width:102px; height:126px;” ：src=“PhotoId”/》
《/td》
《/tr》
《tr》
《td class=“title”》性别：《/td》
《td》
《input type=“text” name=“text_sex” id=“text_sex” v-model=“text_sex” readonly 》
《/td》
《/tr》
《tr》
《td class=“title”》民族：《/td》
《td》
《input type=“text” name=“text_nation” id=“text_nation” v-model=“text_nation” readonly 》
《/td》
《/tr》
《tr》
《td class=“title”》出生：《/td》
《td》
《input type=“text” name=“text_birthday” id=“text_birthday” v-model=“text_birthday” readonly 》
《/td》
《/tr》
《tr》
《td class=“title”》住址：《/td》
《td 》
《input type=“text” name=“text_address” id=“text_address” v-model=“text_address” readonly 》
《/td》
《/tr》
《tr》
《td class=“title”》身份证号码：《/td》
《td》
《input type=“text” name=“text_idNum” id=“text_idNum” v-model=“text_idNum” readonly 》
《/td》
《td rowspan=“5” align=“center”》
《img id=“PhotoIDFront” name=“Photo” style=“width:200px;height:126px;” ：src=“PhotoIDFront”/》
《/td》
《/tr》
《tr》
《td class=“title”》签发机关：《/td》
《td》
《input type=“text” name=“text_dept” id=“text_dept” v-model=“text_dept” readonly 》
《/td》
《/tr》
《tr》
《td class=“title”》有效期开始：《/td》
《td》
《input type=“text” name=“text_effDate” id=“text_effDate” v-model=“text_effDate” readonly 》
《/td》
《/tr》
《tr》
《td class=“title”》有效期结束：《/td》
《td》
《input type=“text” name=“text_expDate” id=“text_expDate” v-model=“text_expDate” readonly 》
《/td》
《/tr》
《tr》
《td class=“title”》身份证物理ID：《/td》
《td》
《input type=“text” name=“text_ID” id=“text_ID” v-model=“text_ID” readonly 》
《/td》
《/tr》
《tr》
《td class=“title”》IC卡卡号：《/td》
《td》
《input type=“text” name=“text_IC_ID” id=“text_IC_ID” v-model=“text_IC_ID” readonly 》
《/td》
《td rowspan=“5” align=“center”》
《img id=“PhotoIDBack” name=“Photo” style=“width:200px;height:126px;” ：src=“PhotoIDBack”/》
《/td》
《/tr》
《tr》
《td class=“title”》银行卡号：《/td》
《td》
《input type=“text” name=“text_Bank_ID” id=“text_Bank_ID” v-model=“text_Bank_ID” 》
《/td》
《/tr》
《tr》
《td class=“title”》社保卡姓名：《/td》
《td》
《input type=“text” name=“S_text_name” id=“S_text_name” v-model=“S_text_name” readonly 》
《/td》
《/tr》
《tr》
《td class=“title”》社保卡性别：《/td》
《td》
《input type=“text” name=“S_text_sex” id=“S_text_sex” v-model=“S_text_sex” readonly 》
《/td》
《/tr》
《tr》
《td class=“title”》社保卡名族：《/td》
《td》
《input type=“text” name=“S_text_nation” id=“S_text_nation” v-model=“S_text_nation” readonly 》
《/td》
《/tr》
《tr》
《td class=“title”》社保卡出生日期：《/td》
《td colspan=“2”》
《input type=“text” name=“S_text_birthday” id=“S_text_birthday” v-model=“S_text_birthday” readonly 》
《/td》
《/tr》
《tr》
《td class=“title”》社保卡身份证号码：《/td》
《td colspan=“2”》
《input type=“text” name=“S_text_idNum” id=“S_text_idNum” v-model=“S_text_idNum” readonly 》
《/td》
《/tr》
《tr》
《td class=“title”》发卡日期：《/td》
《td colspan=“2”》
《input type=“text” name=“S_text_effDate” id=“S_text_effDate” v-model=“S_text_effDate” readonly 》
《/td》
《/tr》
《tr》
《td class=“title”》卡有效期：《/td》
《td colspan=“2”》
《input type=“text” name=“S_text_expDate” id=“S_text_expDate” v-model=“S_text_expDate” readonly 》
《/td》
《/tr》
《tr》
《td class=“title”》社保卡卡号：《/td》
《td colspan=“2”》
《input type=“text” name=“S_text_kahao” id=“S_text_kahao” v-model=“S_text_kahao” readonly 》
《/td》
《/tr》
《tr》
《td class=“title”》返回数据：《/td》
《td colspan=“2”》
《textarea v-model=“text_result” rows=“6”
style=“color：#FF0000;width:94.3%;”
cols=“40”
readonly》
《/textarea》
《/td》
《/tr》
《tr》
《td colspan=“3” align=“center” height=“50px;”》
《input class=“butt” type=“button” name=“clearImage” value=“清除信息” @click=“clearinput”》
《input class=“butt” type=“button” name=“readIDCard” value=“读身份证” @click=“readIDCard”》
《input class=“butt” type=“button” name=“autoReadIDCard” value=“自动读卡” @click=“autoReadIDCard”》
《input class=“butt” type=“button” name=“stopAutoReadIDCard” value=“停止读卡” @click=“stopAutoReadIDCard”》
《input class=“butt” type=“button” name=“readM1Card” value=“读IC卡卡号” @click=“readM1Card”》
《input class=“butt” type=“button” name=“readBankCard” value=“读银行卡卡号” @click=“readBankCard”》
《input class=“butt” type=“button” name=“readSocialCard” value=“读社保卡” @click=“readSocialCard”》
《！--《input class=“butt” type=“button” name=“cardOperate” value=“IC卡操作” @click=“cardOperate”》--》
《！--《input Class=“butt” type=“button” name=“IDRequest” value=“检测身份证卡片” @click=“IDRequest”》--》
《！--《input class=“butt” type=“button” name=“closeSocket” value=“关闭设备” @click=“closeSocket”》--》
《/td》
《/tr》
《/table》
《/div》
《/template》
《script type=“text/javascript”》
//支持身份证读卡器型号EST-100GS
// http://www.eastoms.com
export default {
name： ‘ReadIdCard’，
data（）{
return {
socket:null，
host：“ws://127.0.0.1:33666”，
text_name ：“”，
text_sex ：“”，
text_nation ：“”，
text_birthday ：“”，
text_address ：“”，
text_idNum ：“”，
text_dept ：“”，
text_effDate ：“”，
text_expDate ：“”，
text_ID ：“”，
text_IC_ID ：“”，
text_Bank_ID ：“”，
S_text_name ：“”，
S_text_sex ：“”，
S_text_nation ：“”，
S_text_birthday ：“”，
S_text_idNum ：“”，
S_text_effDate ：“”，
S_text_expDate ：“”，
S_text_kahao ：“”，
text_result ：“”，
}
}，
created： function （） {
// 默认页面打开，就自动打开设备
this.openReader（）;
}，
methods：{
//提示信息
resultMsg（msg） {
if（msg ！= “” && msg ！= undefined） this.text_result += “rn” + msg;
}，
// 打开socket连接
openReader（） {
var host = “ws://127.0.0.1:33666”; //客户端电脑本地IP，非服务器IP，无需修改
if（this.socket == null）{
this.socket = new WebSocket（host）;
}else{
this.resultMsg（“已初始化。”）;
}
try {
var _this = this;
this.socket.onopen = function （） {
_this.resultMsg（“初始化成功。”）; //可以注释
_this.$options.methods.getVersion（）; //可以注释：控件版本号
_this.$options.methods.readSAMID（）; //可以注释：读卡器芯片号，全球唯一，通常可用来授权管理
//autoReadIDCard（）; //自动读卡可以放这里，自动读卡放身份证的间隔要》300ms，否则会不读卡
};
this.socket.onclose = function （） {
_this.resultMsg（“读卡服务已经断开。”）;
};
this.socket.onerror = function（）{
_this.resultMsg（“请检查控件是否正常安装。”）;
};
this.socket.onmessage = function （msg） {
if （typeof msg.data == “string”） {
var msgM=msg.data+“”;
var msgJson = JSON.parse（msgM）;
switch（msgJson.fun） {
case “EST_GetVersion#”： // 获取版本号
_this.resultMsg（“版本号：”+msgJson.errMsg）;
break;
case “EST_Reader_ReadIDCard#”： //单词 -》 读卡
if （msgJson.rCode == “0”） {
_this.text_name = msgJson.name; //姓名
_this.text_sex = msgJson.sex; //性别
_this.text_nation = msgJson.nation; //民族
_this.text_birthday = msgJson.birth; //出生日期
_this.text_address = msgJson.address; //住址
_this.text_idNum = msgJson.certNo; //身份证号码
_this.text_dept = msgJson.department; //签发机关
_this.text_effDate = msgJson.effectData; //有效期开始
_this.text_expDate = msgJson.expire; //有效期结束
_this.PhotoId = “data:image/jpeg;base64，”+msgJson.base64Data; //身份证头像，base64格式数据，实际尺寸：102x126px
_this.PhotoIDFront = “data:image/jpeg;base64，”+msgJson.imageFront; //身份证正面照片，实际尺寸：540x340px，如无需使用，建议注释掉
_this.PhotoIDBack = “data:image/jpeg;base64，”+msgJson.imageBack; //身份证反面照片，实际尺寸：540x340px，如无需使用，建议注释掉
ReadCertID（）; //身份证物理ID，如无需使用，建议注释掉
_this.resultMsg（msgJson.errMsg）;
}
else if（msgJson.rCode == “1”）{
_this.resultMsg（“已停止自动读卡”）;
}
else if（msgJson.rCode == “-2”）{
_this.resultMsg（“请放身份证”）;
}
else {
_this.resultMsg（msgJson.errMsg）;
}
break;
case “EST_GetCertFrontImage#”： //身份证正面照片，base64格式数据
if （msgJson.rCode == “0”） {
_this.PhotoIDFront = “data:image/jpeg;base64，”+msgJson.imageFront;
}
break;
case “EST_GetCertBackImage#”： //身份证反面照片，base64格式数据
if （msgJson.rCode == “0”） {
_this.PhotoIDBack = “data:image/jpeg;base64，”+msgJson.imageBack;
}
break;
case “EST_ReadCertID#”： //身份证物理ID
if （msgJson.rCode == “0”） {
_this.text_ID = msgJson.UID;
}
else {
_this.resultMsg（msgJson.errMsg）;
}
break;
case “EST_ReadBankCard#”： //银行卡卡号
if （msgJson.rCode == “0”） {
_this.text_Bank_ID = msgJson.bankCard;
_this.$options.methods.posBeep（）;
}
else {
_this.resultMsg（msgJson.errMsg）;
}
break;
case “EST_ReadM1Card#”： //IC卡卡号
if （msgJson.rCode == “0”） {
_this.text_IC_ID = msgJson.UID;
_this.$options.methods.posBeep（）;
}
else {
_this.resultMsg（msgJson.errMsg）;
}
break;
case “EST_ReadSocialCard#”： //社保卡信息，个别地区社保卡不按国家规范来的，会读取信息不全
if （msgJson.rCode == “0”） {
_this.$options.methods.posBeep（）;
_this.S_text_name = msgJson.XM; //社保卡姓名
_this.S_text_sex = msgJson.XB; //社保卡性别
_this.S_text_nation = msgJson.MZ; //社保卡民族
_this.S_text_birthday = msgJson.CSRQ; //社保卡出生日期
_this.S_text_idNum = msgJson.SHBZHM; //社保卡身份证号
_this.S_text_effDate = msgJson.FKRQ; //社保卡有效期开始
_this.S_text_expDate = msgJson.KYXQ; //社保卡有效期结束
_this.S_text_kahao = msgJson.SBKH; //社保卡卡号
}
else {
_this.resultMsg（msgJson.errMsg）;
}
break;
case “EST_IDRequest#”：
if （msgJson.rCode == “0”） {
_this.resultMsg（“找到身份证”）;
}
else {
_this.resultMsg（msgJson.errMsg）;
}
break;
case “EST_FindCardM1#”：
if （msgJson.rCode == “0”） {
_this.resultMsg（“寻卡成功，M1卡UID：” + msgJson.Uid）;
}
else {
_this.resultMsg（msgJson.errMsg）;
}
break;
case “EST_VerifyKeyM1#”：
if （msgJson.rCode == “0”） {
_this.resultMsg（“秘钥认证成功”）;
}
else {
_this.resultMsg（msgJson.errMsg）;
}
break;
case “EST_ReadCardM1#”：
if （msgJson.rCode == “0”） {
_this.resultMsg（“读卡成功，数据为：” + msgJson.readData）;
}
else {
_this.resultMsg（msgJson.errMsg）;
}
break;
case “EST_WriteCardM1#”：
if （msgJson.rCode == “0”） {
_this.resultMsg（“写卡成功”）;
}
else {
_this.resultMsg（msgJson.errMsg）;
}
break;
case “EST_PowerOnCpu#”： //非接CPU卡上电信息
if （msgJson.rCode == “0”） {
_this.resultMsg（“复位信息：” + msgJson.ATR）;
}
else {
_this.resultMsg（msgJson.errMsg）;
}
break;
case “EST_WriteCpu#”： //非接CPU卡APDU指令响应信息
if （msgJson.rCode == “0”） {
_this.resultMsg（“响应数据：” + msgJson.Resp）;
}
else {
_this.resultMsg（msgJson.errMsg）;
}
break;
case “EST_ReaderGertSAMID#”： //获得读卡器芯片系列号，读卡器授权可以放这里来判断
if （msgJson.rCode == “0”） {
_this.resultMsg（“系列号：” + msgJson.SAMID）;
}
else {
_this.resultMsg（msgJson.errMsg）;
}
break;
default：
break;
}
}
else{
alert（“连接异常，请检查是否成功安装控件。”）;
}
};
}
catch （ex） {
alert（“连接异常，请检查是否成功安装控件。”）;
}
}，
// 清空文本框信息
clearinput（）
{
this.text_ID = “”;
this.text_IC_ID = “”;
this.text_Bank_ID = “”;
this.text_name = “”;
this.text_sex = “”;
this.text_nation = “”;
this.text_birthday = “”;
this.text_address = “”;
this.text_idNum = “”;
this.text_dept = “”;
this.text_effDate = “”;
this.text_expDate = “”;
this.text_result = “”;
this.PhotoId = “”;
this.S_text_name = “”;
this.S_text_sex = “”;
this.S_text_nation = “”;
this.S_text_birthday = “”;
this.S_text_idNum = “”;
this.S_text_effDate = “”;
this.S_text_expDate = “”;
this.S_text_kahao = “”;
this.PhotoIDBack = “”;
this.PhotoIDFront = “”;
}，
//控件版本号
getVersion（） {
this.socket.send（“EST_GetVersion#”）;
}，
//蜂鸣器控制，可以自己选择是否蜂鸣
posBeep（） {
if （this.socket.readyState == 1） {
this.socket.send（“EST_PosBeep#”）;
}
else {
this.resultMsg（“未找到控件，请检查控件是否安装。”）;
}
}，
// 单次读取身份证信息
readIDCard（） {
try {
if （this.socket.readyState == 1） {
this.socket.send（“EST_Reader_ReadIDCard#”）;
}
else {
this.resultMsg（“未找到控件，请检查控件是否安装。”）;
}
}
catch （ex） {
this.resultMsg（“连接异常，请检查是否成功安装控件。”）;
}
}，
//自动读取身份证信息
autoReadIDCard（） {
try {
if （this.socket.readyState == 1） {
this.socket.send（“EST_Reader_ReadIDCard#|1”）;
//resultMsg（“自动读卡，请放身份证。..”）;
}
else {
this.resultMsg（“未找到控件，请检查控件是否安装。”）;
}
}
catch （ex） {
this.resultMsg（“连接异常，请检查是否成功安装控件。”）;
}
}，
//停止连续读取身份证信息
stopAutoReadIDCard（） {
try {
if （this.socket.readyState == 1） {
this.socket.send（“EST_StopReadIDCard#”）;
}
else {
this.resultMsg（“未找到控件，请检查控件是否安装。”）;
}
}
catch （ex） {
this.resultMsg（“连接异常，请检查是否成功安装控件。”）;
}
}，
// 读取身份证正反面照片
readIDCardImage（） {
try {
if （this.socket.readyState == 1） {
this.socket.send（“EST_GetCertFrontImage#”）;
this.socket.send（“EST_GetCertBackImage#”）;
}
else {
this.resultMsg（“未找到控件，请检查控件是否安装。”）;
}
}
catch （ex） {
this.resultMsg（“连接异常，请检查是否成功安装控件。”）;
}
}，
//读取身份证物理ID，16位16进制数据，一般情况用不到，可以注释掉
ReadCertID（） {
try {
if （this.socket.readyState == 1） {
this.socket.send（“EST_ReadCertID#”）;
}
else {
this.resultMsg（“未找到控件，请检查控件是否安装。”）;
}
}
catch （ex） {
this.resultMsg（“连接异常，请检查是否成功安装控件。”）;
}
}，
//读取IC卡号，包括M1、CPU卡，8位16进制数据
readM1Card（） {
try {
if （this.socket.readyState == 1） {
this.socket.send（“EST_ReadM1Card#”）;
}
else {
this.resultMsg（“未找到控件，请检查控件是否安装。”）;
}
}
catch （ex） {
this.resultMsg（“连接异常，请检查是否成功安装控件。”）;
}
}，
//读取银行卡号，支持QUICK PASS闪付银行卡，大部分卡支持，少部分地方性银行会读取失败
readBankCard（） {
try {
if （this.socket.readyState == 1） {
this.socket.send（“EST_ReadBankCard#”）;
}
else {
this.resultMsg（“未找到控件，请检查控件是否安装。”）;
}
}
catch （ex） {
this.resultMsg（“连接异常，请检查是否成功安装控件。”）;
}
}，
//读社保卡，支持二代芯片社保卡，三代卡无秘钥不能读取
readSocialCard（） {
try {
if （this.socket.readyState == 1） {
this.socket.send（“EST_ReadSocialCard#”）;
}
else {
this.resultMsg（“未找到控件，请检查控件是否安装。”）;
}
}
catch （ex） {
this.resultMsg（“连接异常，请检查是否成功安装控件。”）;
}
}，
//检测是否有身份证存在
IDRequest（） {
try {
if （this.socket.readyState == 1） {
this.socket.send（“EST_IDRequest#”）;
}
else {
this.resultMsg（“未找到控件，请检查控件是否安装。”）;
}
}
catch （ex） {
this.resultMsg（“连接异常，请检查是否成功安装控件。”）;
}
}，
//IC卡读写操作函数，包括M1卡读写、CPU卡读写等功能，详细指令见开发文档中3.2.11 IC卡操作函数部分
cardOperate（） {
try {
if （this.socket.readyState == 1） {
this.socket.send（this.S_text_kacaozuo）;
}
else {
this.resultMsg（“未找到控件，请检查控件是否安装。”）;
}
}
catch （ex） {
this.resultMsg（“连接异常，请检查是否成功安装控件。”）;
}
}，
//获得读卡器芯片系列号，全球唯一，通常可用来授权管理
readSAMID（） {
try {
if （this.socket.readyState == 1） {
this.socket.send（“EST_ReaderGertSAMID#”）;
}
else {
this.resultMsg（“未找到控件，请检查控件是否安装。”）;
}
}
catch （ex） {
this.resultMsg（“连接异常，请检查是否成功安装控件。”）;
}
}，
//关闭soket
closeSocket（） {
try {
if（this.socket ！= undefined）{
this.socket.close（）;
this.socket = undefined;
}
}
catch （ex） {
}
}，
}
}
《/script》
《style》
body {background-color：#eeeeee;}
td {background-color：#FFFFFF;}
input {width:430px;}
.butt {width:110px; height:25px;}
.title {padding-left:10px; width:130px;}
table {font-size:12px;}
table .tfonts{font-size:22px;}
《/style》
//==================================================================
// **无缝支持新版本谷歌Chrome火狐Firefox网页浏览器，支持H5、Vue、React、Node.js、jQuery、JSP、PHP、ASP、ASPX、JS、HTML等开发语言
// 控件版本
《template》
《div id=“app”》
《table width=“800px” border=“0” cellspacing=“1” cellpadding=“2” align=“center” bgcolor=“#18bf10”》
《tr》
《td colspan=“3” align=“center” height=“60px;” class=“tfonts”》
东信EST-100GS身份证读卡器系列产品谷歌Chrome、火狐Firefox测试页面V4.2.3
《/td》
《/tr》
《tr》
《td class=“title”》姓名：《/td》
《td width=“100px”》
《input type=“text” name=“text_name” id=“text_name” v-model=“text_name” readonly 》
《/td》
《td rowspan=“5” align=“center”》
《img id=“PhotoID” name=“Photo” style=“width:102px; height:126px;” ：src=“PhotoId”/》
《/td》
《/tr》
《tr》
《td class=“title”》性别：《/td》
《td》
《input type=“text” name=“text_sex” id=“text_sex” v-model=“text_sex” readonly 》
《/td》
《/tr》
《tr》
《td class=“title”》民族：《/td》
《td》
《input type=“text” name=“text_nation” id=“text_nation” v-model=“text_nation” readonly 》
《/td》
《/tr》
《tr》
《td class=“title”》出生：《/td》
《td》
《input type=“text” name=“text_birthday” id=“text_birthday” v-model=“text_birthday” readonly 》
《/td》
《/tr》
《tr》
《td class=“title”》住址：《/td》
《td 》
《input type=“text” name=“text_address” id=“text_address” v-model=“text_address” readonly 》
《/td》
《/tr》
《tr》
《td class=“title”》身份证号码：《/td》
《td》
《input type=“text” name=“text_idNum” id=“text_idNum” v-model=“text_idNum” readonly 》
《/td》
《td rowspan=“5” align=“center”》
《img id=“PhotoIDFront” name=“Photo” style=“width:200px;height:126px;” ：src=“PhotoIDFront”/》
《/td》
《/tr》
《tr》
《td class=“title”》签发机关：《/td》
《td》
《input type=“text” name=“text_dept” id=“text_dept” v-model=“text_dept” readonly 》
《/td》
《/tr》
《tr》
《td class=“title”》有效期开始：《/td》
《td》
《input type=“text” name=“text_effDate” id=“text_effDate” v-model=“text_effDate” readonly 》
《/td》
《/tr》
《tr》
《td class=“title”》有效期结束：《/td》
《td》
《input type=“text” name=“text_expDate” id=“text_expDate” v-model=“text_expDate” readonly 》
《/td》
《/tr》
《tr》
《td class=“title”》身份证物理ID：《/td》
《td》
《input type=“text” name=“text_ID” id=“text_ID” v-model=“text_ID” readonly 》
《/td》
《/tr》
《tr》
《td class=“title”》IC卡卡号：《/td》
《td》
《input type=“text” name=“text_IC_ID” id=“text_IC_ID” v-model=“text_IC_ID” readonly 》
《/td》
《td rowspan=“5” align=“center”》
《img id=“PhotoIDBack” name=“Photo” style=“width:200px;height:126px;” ：src=“PhotoIDBack”/》
《/td》
《/tr》
《tr》
《td class=“title”》银行卡号：《/td》
《td》
《input type=“text” name=“text_Bank_ID” id=“text_Bank_ID” v-model=“text_Bank_ID” 》
《/td》
《/tr》
《tr》
《td class=“title”》社保卡姓名：《/td》
《td》
《input type=“text” name=“S_text_name” id=“S_text_name” v-model=“S_text_name” readonly 》
《/td》
《/tr》
《tr》
《td class=“title”》社保卡性别：《/td》
《td》
《input type=“text” name=“S_text_sex” id=“S_text_sex” v-model=“S_text_sex” readonly 》
《/td》
《/tr》
《tr》
《td class=“title”》社保卡名族：《/td》
《td》
《input type=“text” name=“S_text_nation” id=“S_text_nation” v-model=“S_text_nation” readonly 》
《/td》
《/tr》
《tr》
《td class=“title”》社保卡出生日期：《/td》
《td colspan=“2”》
《input type=“text” name=“S_text_birthday” id=“S_text_birthday” v-model=“S_text_birthday” readonly 》
《/td》
《/tr》
《tr》
《td class=“title”》社保卡身份证号码：《/td》
《td colspan=“2”》
《input type=“text” name=“S_text_idNum” id=“S_text_idNum” v-model=“S_text_idNum” readonly 》
《/td》
《/tr》
《tr》
《td class=“title”》发卡日期：《/td》
《td colspan=“2”》
《input type=“text” name=“S_text_effDate” id=“S_text_effDate” v-model=“S_text_effDate” readonly 》
《/td》
《/tr》
《tr》
《td class=“title”》卡有效期：《/td》
《td colspan=“2”》
《input type=“text” name=“S_text_expDate” id=“S_text_expDate” v-model=“S_text_expDate” readonly 》
《/td》
《/tr》
《tr》
《td class=“title”》社保卡卡号：《/td》
《td colspan=“2”》
《input type=“text” name=“S_text_kahao” id=“S_text_kahao” v-model=“S_text_kahao” readonly 》
《/td》
《/tr》
《tr》
《td class=“title”》返回数据：《/td》
《td colspan=“2”》
《textarea v-model=“text_result” rows=“6”
style=“color：#FF0000;width:94.3%;”
cols=“40”
readonly》
《/textarea》
《/td》
《/tr》
《tr》
《td colspan=“3” align=“center” height=“50px;”》
《input class=“butt” type=“button” name=“clearImage” value=“清除信息” @click=“clearinput”》
《input class=“butt” type=“button” name=“readIDCard” value=“读身份证” @click=“readIDCard”》
《input class=“butt” type=“button” name=“autoReadIDCard” value=“自动读卡” @click=“autoReadIDCard”》
《input class=“butt” type=“button” name=“stopAutoReadIDCard” value=“停止读卡” @click=“stopAutoReadIDCard”》
《input class=“butt” type=“button” name=“readM1Card” value=“读IC卡卡号” @click=“readM1Card”》
《input class=“butt” type=“button” name=“readBankCard” value=“读银行卡卡号” @click=“readBankCard”》
《input class=“butt” type=“button” name=“readSocialCard” value=“读社保卡” @click=“readSocialCard”》
《！--《input class=“butt” type=“button” name=“cardOperate” value=“IC卡操作” @click=“cardOperate”》--》
《！--《input Class=“butt” type=“button” name=“IDRequest” value=“检测身份证卡片” @click=“IDRequest”》--》
《！--《input class=“butt” type=“button” name=“closeSocket” value=“关闭设备” @click=“closeSocket”》--》
《/td》
《/tr》
《/table》
《/div》
《/template》
《script type=“text/javascript”》
//支持身份证读卡器型号EST-100GS
// http://www.eastoms.com
export default {
name： ‘ReadIdCard’，
data（）{
return {
socket:null，
host：“ws://127.0.0.1:33666”，
text_name ：“”，
text_sex ：“”，
text_nation ：“”，
text_birthday ：“”，
text_address ：“”，
text_idNum ：“”，
text_dept ：“”，
text_effDate ：“”，
text_expDate ：“”，
text_ID ：“”，
text_IC_ID ：“”，
text_Bank_ID ：“”，
S_text_name ：“”，
S_text_sex ：“”，
S_text_nation ：“”，
S_text_birthday ：“”，
S_text_idNum ：“”，
S_text_effDate ：“”，
S_text_expDate ：“”，
S_text_kahao ：“”，
text_result ：“”，
}
}，
created： function （） {
// 默认页面打开，就自动打开设备
this.openReader（）;
}，
methods：{
//提示信息
resultMsg（msg） {
if（msg ！= “” && msg ！= undefined） this.text_result += “rn” + msg;
}，
// 打开socket连接
openReader（） {
var host = “ws://127.0.0.1:33666”; //客户端电脑本地IP，非服务器IP，无需修改
if（this.socket == null）{
this.socket = new WebSocket（host）;
}else{
this.resultMsg（“已初始化。”）;
}
try {
var _this = this;
this.socket.onopen = function （） {
_this.resultMsg（“初始化成功。”）; //可以注释
_this.$options.methods.getVersion（）; //可以注释：控件版本号
_this.$options.methods.readSAMID（）; //可以注释：读卡器芯片号，全球唯一，通常可用来授权管理
//autoReadIDCard（）; //自动读卡可以放这里，自动读卡放身份证的间隔要》300ms，否则会不读卡
};
this.socket.onclose = function （） {
_this.resultMsg（“读卡服务已经断开。”）;
};
this.socket.onerror = function（）{
_this.resultMsg（“请检查控件是否正常安装。”）;
};
this.socket.onmessage = function （msg） {
if （typeof msg.data == “string”） {
var msgM=msg.data+“”;
var msgJson = JSON.parse（msgM）;
switch（msgJson.fun） {
case “EST_GetVersion#”： // 获取版本号
_this.resultMsg（“版本号：”+msgJson.errMsg）;
break;
case “EST_Reader_ReadIDCard#”： //单词 -》 读卡
if （msgJson.rCode == “0”） {
_this.text_name = msgJson.name; //姓名
_this.text_sex = msgJson.sex; //性别
_this.text_nation = msgJson.nation; //民族
_this.text_birthday = msgJson.birth; //出生日期
_this.text_address = msgJson.address; //住址
_this.text_idNum = msgJson.certNo; //身份证号码
_this.text_dept = msgJson.department; //签发机关
_this.text_effDate = msgJson.effectData; //有效期开始
_this.text_expDate = msgJson.expire; //有效期结束
_this.PhotoId = “data:image/jpeg;base64，”+msgJson.base64Data; //身份证头像，base64格式数据，实际尺寸：102x126px
_this.PhotoIDFront = “data:image/jpeg;base64，”+msgJson.imageFront; //身份证正面照片，实际尺寸：540x340px，如无需使用，建议注释掉
_this.PhotoIDBack = “data:image/jpeg;base64，”+msgJson.imageBack; //身份证反面照片，实际尺寸：540x340px，如无需使用，建议注释掉
ReadCertID（）; //身份证物理ID，如无需使用，建议注释掉
_this.resultMsg（msgJson.errMsg）;
}
else if（msgJson.rCode == “1”）{
_this.resultMsg（“已停止自动读卡”）;
}
else if（msgJson.rCode == “-2”）{
_this.resultMsg（“请放身份证”）;
}
else {
_this.resultMsg（msgJson.errMsg）;
}
break;
case “EST_GetCertFrontImage#”： //身份证正面照片，base64格式数据
if （msgJson.rCode == “0”） {
_this.PhotoIDFront = “data:image/jpeg;base64，”+msgJson.imageFront;
}
break;
case “EST_GetCertBackImage#”： //身份证反面照片，base64格式数据
if （msgJson.rCode == “0”） {
_this.PhotoIDBack = “data:image/jpeg;base64，”+msgJson.imageBack;
}
break;
case “EST_ReadCertID#”： //身份证物理ID
if （msgJson.rCode == “0”） {
_this.text_ID = msgJson.UID;
}
else {
_this.resultMsg（msgJson.errMsg）;
}
break;
case “EST_ReadBankCard#”： //银行卡卡号
if （msgJson.rCode == “0”） {
_this.text_Bank_ID = msgJson.bankCard;
_this.$options.methods.posBeep（）;
}
else {
_this.resultMsg（msgJson.errMsg）;
}
break;
case “EST_ReadM1Card#”： //IC卡卡号
if （msgJson.rCode == “0”） {
_this.text_IC_ID = msgJson.UID;
_this.$options.methods.posBeep（）;
}
else {
_this.resultMsg（msgJson.errMsg）;
}
break;
case “EST_ReadSocialCard#”： //社保卡信息，个别地区社保卡不按国家规范来的，会读取信息不全
if （msgJson.rCode == “0”） {
_this.$options.methods.posBeep（）;
_this.S_text_name = msgJson.XM; //社保卡姓名
_this.S_text_sex = msgJson.XB; //社保卡性别
_this.S_text_nation = msgJson.MZ; //社保卡民族
_this.S_text_birthday = msgJson.CSRQ; //社保卡出生日期
_this.S_text_idNum = msgJson.SHBZHM; //社保卡身份证号
_this.S_text_effDate = msgJson.FKRQ; //社保卡有效期开始
_this.S_text_expDate = msgJson.KYXQ; //社保卡有效期结束
_this.S_text_kahao = msgJson.SBKH; //社保卡卡号
}
else {
_this.resultMsg（msgJson.errMsg）;
}
break;
case “EST_IDRequest#”：
if （msgJson.rCode == “0”） {
_this.resultMsg（“找到身份证”）;
}
else {
_this.resultMsg（msgJson.errMsg）;
}
break;
case “EST_FindCardM1#”：
if （msgJson.rCode == “0”） {
_this.resultMsg（“寻卡成功，M1卡UID：” + msgJson.Uid）;
}
else {
_this.resultMsg（msgJson.errMsg）;
}
break;
case “EST_VerifyKeyM1#”：
if （msgJson.rCode == “0”） {
_this.resultMsg（“秘钥认证成功”）;
}
else {
_this.resultMsg（msgJson.errMsg）;
}
break;
case “EST_ReadCardM1#”：
if （msgJson.rCode == “0”） {
_this.resultMsg（“读卡成功，数据为：” + msgJson.readData）;
}
else {
_this.resultMsg（msgJson.errMsg）;
}
break;
case “EST_WriteCardM1#”：
if （msgJson.rCode == “0”） {
_this.resultMsg（“写卡成功”）;
}
else {
_this.resultMsg（msgJson.errMsg）;
}
break;
case “EST_PowerOnCpu#”： //非接CPU卡上电信息
if （msgJson.rCode == “0”） {
_this.resultMsg（“复位信息：” + msgJson.ATR）;
}
else {
_this.resultMsg（msgJson.errMsg）;
}
break;
case “EST_WriteCpu#”： //非接CPU卡APDU指令响应信息
if （msgJson.rCode == “0”） {
_this.resultMsg（“响应数据：” + msgJson.Resp）;
}
else {
_this.resultMsg（msgJson.errMsg）;
}
break;
case “EST_ReaderGertSAMID#”： //获得读卡器芯片系列号，读卡器授权可以放这里来判断
if （msgJson.rCode == “0”） {
_this.resultMsg（“系列号：” + msgJson.SAMID）;
}
else {
_this.resultMsg（msgJson.errMsg）;
}
break;
default：
break;
}
}
else{
alert（“连接异常，请检查是否成功安装控件。”）;
}
};
}
catch （ex） {
alert（“连接异常，请检查是否成功安装控件。”）;
}
}，
// 清空文本框信息
clearinput（）
{
this.text_ID = “”;
this.text_IC_ID = “”;
this.text_Bank_ID = “”;
this.text_name = “”;
this.text_sex = “”;
this.text_nation = “”;
this.text_birthday = “”;
this.text_address = “”;
this.text_idNum = “”;
this.text_dept = “”;
this.text_effDate = “”;
this.text_expDate = “”;
this.text_result = “”;
this.PhotoId = “”;
this.S_text_name = “”;
this.S_text_sex = “”;
this.S_text_nation = “”;
this.S_text_birthday = “”;
this.S_text_idNum = “”;
this.S_text_effDate = “”;
this.S_text_expDate = “”;
this.S_text_kahao = “”;
this.PhotoIDBack = “”;
this.PhotoIDFront = “”;
}，
//控件版本号
getVersion（） {
this.socket.send（“EST_GetVersion#”）;
}，
//蜂鸣器控制，可以自己选择是否蜂鸣
posBeep（） {
if （this.socket.readyState == 1） {
this.socket.send（“EST_PosBeep#”）;
}
else {
this.resultMsg（“未找到控件，请检查控件是否安装。”）;
}
}，
// 单次读取身份证信息
readIDCard（） {
try {
if （this.socket.readyState == 1） {
this.socket.send（“EST_Reader_ReadIDCard#”）;
}
else {
this.resultMsg（“未找到控件，请检查控件是否安装。”）;
}
}
catch （ex） {
this.resultMsg（“连接异常，请检查是否成功安装控件。”）;
}
}，
//自动读取身份证信息
autoReadIDCard（） {
try {
if （this.socket.readyState == 1） {
this.socket.send（“EST_Reader_ReadIDCard#|1”）;
//resultMsg（“自动读卡，请放身份证。..”）;
}
else {
this.resultMsg（“未找到控件，请检查控件是否安装。”）;
}
}
catch （ex） {
this.resultMsg（“连接异常，请检查是否成功安装控件。”）;
}
}，
//停止连续读取身份证信息
stopAutoReadIDCard（） {
try {
if （this.socket.readyState == 1） {
this.socket.send（“EST_StopReadIDCard#”）;
}
else {
this.resultMsg（“未找到控件，请检查控件是否安装。”）;
}
}
catch （ex） {
this.resultMsg（“连接异常，请检查是否成功安装控件。”）;
}
}，
// 读取身份证正反面照片
readIDCardImage（） {
try {
if （this.socket.readyState == 1） {
this.socket.send（“EST_GetCertFrontImage#”）;
this.socket.send（“EST_GetCertBackImage#”）;
}
else {
this.resultMsg（“未找到控件，请检查控件是否安装。”）;
}
}
catch （ex） {
this.resultMsg（“连接异常，请检查是否成功安装控件。”）;
}
}，
//读取身份证物理ID，16位16进制数据，一般情况用不到，可以注释掉
ReadCertID（） {
try {
if （this.socket.readyState == 1） {
this.socket.send（“EST_ReadCertID#”）;
}
else {
this.resultMsg（“未找到控件，请检查控件是否安装。”）;
}
}
catch （ex） {
this.resultMsg（“连接异常，请检查是否成功安装控件。”）;
}
}，
//读取IC卡号，包括M1、CPU卡，8位16进制数据
readM1Card（） {
try {
if （this.socket.readyState == 1） {
this.socket.send（“EST_ReadM1Card#”）;
}
else {
this.resultMsg（“未找到控件，请检查控件是否安装。”）;
}
}
catch （ex） {
this.resultMsg（“连接异常，请检查是否成功安装控件。”）;
}
}，
//读取银行卡号，支持QUICK PASS闪付银行卡，大部分卡支持，少部分地方性银行会读取失败
readBankCard（） {
try {
if （this.socket.readyState == 1） {
this.socket.send（“EST_ReadBankCard#”）;
}
else {
this.resultMsg（“未找到控件，请检查控件是否安装。”）;
}
}
catch （ex） {
this.resultMsg（“连接异常，请检查是否成功安装控件。”）;
}
}，
//读社保卡，支持二代芯片社保卡，三代卡无秘钥不能读取
readSocialCard（） {
try {
if （this.socket.readyState == 1） {
this.socket.send（“EST_ReadSocialCard#”）;
}
else {
this.resultMsg（“未找到控件，请检查控件是否安装。”）;
}
}
catch （ex） {
this.resultMsg（“连接异常，请检查是否成功安装控件。”）;
}
}，
//检测是否有身份证存在
IDRequest（） {
try {
if （this.socket.readyState == 1） {
this.socket.send（“EST_IDRequest#”）;
}
else {
this.resultMsg（“未找到控件，请检查控件是否安装。”）;
}
}
catch （ex） {
this.resultMsg（“连接异常，请检查是否成功安装控件。”）;
}
}，
//IC卡读写操作函数，包括M1卡读写、CPU卡读写等功能，详细指令见开发文档中3.2.11 IC卡操作函数部分
cardOperate（） {
try {
if （this.socket.readyState == 1） {
this.socket.send（this.S_text_kacaozuo）;
}
else {
this.resultMsg（“未找到控件，请检查控件是否安装。”）;
}
}
catch （ex） {
this.resultMsg（“连接异常，请检查是否成功安装控件。”）;
}
}，
//获得读卡器芯片系列号，全球唯一，通常可用来授权管理
readSAMID（） {
try {
if （this.socket.readyState == 1） {
this.socket.send（“EST_ReaderGertSAMID#”）;
}
else {
this.resultMsg（“未找到控件，请检查控件是否安装。”）;
}
}
catch （ex） {
this.resultMsg（“连接异常，请检查是否成功安装控件。”）;
}
}，
//关闭soket
closeSocket（） {
try {
if（this.socket ！= undefined）{
this.socket.close（）;
this.socket = undefined;
}
}
catch （ex） {
}
}，
}
}
《/script》
《style》
body {background-color：#eeeeee;}
td {background-color：#FFFFFF;}
input {width:430px;}
.butt {width:110px; height:25px;}
.title {padding-left:10px; width:130px;}
table {font-size:12px;}
table .tfonts{font-size:22px;}
《/style》
举报
举报
