实现实名认证相关页面及逻辑

-<!-- 
-info_steps:[
-  {
-    label:'',
-    status:'success'
-  },
-  {
-    label:'',
-    status:'circle'
-  }
-]  在要引用的文件定义info_steps，并在其wxss中引入ins_info_head.wxss
--->
-
-<template name="ins_info_head">
-
-  <view class="ins_info_head">
-    <view  class="line_s" ></view>
-    <block  wx:if="{{info_steps.length==3 || info_steps.length==2}}"  wx:for="{{info_steps}}" >
-      <view wx:if="{{index==0}}" class="info_steps info_steps_left" >
-        {{item.label}}
-        <view class="progress_icon_wrap">
-          <icon wx:if="{{item.status=='success'}}" type="{{item.status}}" class="progress_icon" size="20" color="#4E8FE7"/>
-          <icon wx:else type="{{item.status}}" class="progress_icon" size="21" color="#ccc"/>     
-        </view>
-      </view>
-      <view wx:elif="{{index==info_steps.length-1}}" class="info_steps info_steps_right" >
-        {{item.label}}
-        <view class="progress_icon_wrap">
-          <icon wx:if="{{item.status=='success'}}" type="{{item.status}}" class="progress_icon" size="20" color="#4E8FE7"/>
-          <icon wx:else type="{{item.status}}" class="progress_icon" size="21" color="#ccc"/>     
-        </view>
-      </view>
-      <view wx:else  class="info_steps " >
-        {{item.label}}
-        <view class="progress_icon_wrap">
-          <icon wx:if="{{item.status=='success'}}" type="{{item.status}}" class="progress_icon" size="20" color="#4E8FE7"/>
-          <icon wx:else type="{{item.status}}" class="progress_icon" size="21" color="#ccc"/>     
-        </view>
-      </view>
-    </block>
-  </view>
-</template>

-@import "../../lib/weui.wxss";
-
-
-.ins_info_head{
-  height: 160rpx;
-  width: 100%;
-  background-color: #fff;
-  font-size: 30rpx;
-  line-height: 32rpx;
-  display: inline-flex;
-}
-
-.info_steps{
-  position:relative; 
-  margin: 0 auto;
-  margin-top: 34rpx;
-  text-align: center;
-  width:202rpx; /* ((750-30*2)/4)+30; */
-}
- .info_steps_left{
-  margin-left: 0rpx; 
-}
-.info_steps_right{
-  margin-right: 0rpx; 
-} 
-
-.progress_icon_wrap{
-  width: 20px;     /* 控件大小固定  */
-  margin: 16rpx auto; 
-  background: #fff;
-} 
-
-.line_s{
-  position: absolute;
-  height: 2rpx;
-  width: 580rpx;
-  background: #EFEFEF;
-  left: 85rpx;
-  top: 80rpx;
-  margin-top: 10px;
-}
-
-.container {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: space-between;
-  padding: 200rpx 0;
-  box-sizing: border-box;
-} 
\ No newline at end of file

 // pages/main/verify/verify_idcard/verify_idcard.js
+var OSSInit;
+var baseUrl = getApp().globalData.baseUrl;
 Page({
 
   /**
    * Page initial data
    */
   data: {
-
+    facepath: '',
+    already_getdata: false,
+    front_card_info: {},
+    backpath: '',
+    back_card_info: {},
+    idInfo: {},
   },
 
-  /**
-   * Lifecycle function--Called when page load
-   */
   onLoad: function (options) {
+    this.initOSS()
+  },
+
+  initOSS: function () {
+    var that = this
+    var Authorization = getApp().globalData.Authorization;
+    //OSS 上传前init
+    wx.showLoading()
+    wx.request({
+      url: baseUrl + "filemeta/v1/inits",
+      header: {
+        'Authorization': Authorization
+      },
+      method: 'POST',
+      data: {
+        "access_type": "web_upload",
+        "action ": "put_object",
+        "instance_id": "",
+        "object_type": "wx_image"
+      },
+      success: function (result) {
 
+        OSSInit = result.data
+        console.log(' OSS init 成功', OSSInit)
+      },
+      fail: function (res) {
+        console.log('OSS init  失败', res)
+      },
+      complete: function () {
+        wx.hideLoading()
+      }
+    })
   },
 
   /**
-   * Lifecycle function--Called when page is initially rendered
+   * 生命周期函数--监听页面初次渲染完成
    */
   onReady: function () {
 
   },
 
   /**
-   * Lifecycle function--Called when page show
+   * 生命周期函数--监听页面显示
    */
   onShow: function () {
+    console.log('onShow')
+  },
+
+  chooseImage: function (e) {
+    console.log(e)
+    var that = this
+    wx.chooseImage({
+      sourceType: ['camera', 'album'],
+      // sizeType: ['original'],
+      count: 1,
+      success: function (res) {
+        console.log('success', res)
+        if ("id_face" == e.currentTarget.id) {
+          that.setData({
+            facepath: res.tempFilePaths[0]
+          })
+          that.uploadImage(that.data.facepath, 'id_face')
+        } else if ("id_back" == e.currentTarget.id) {
+          that.setData({
+            backpath: res.tempFilePaths[0]
+          })
+          that.uploadImage(that.data.backpath, 'id_back')
+        }
+      }
+    })
+  },
+
+  uploadImage: function (path, str) {
+    var that = this
+    wx.showLoading({
+      title: '上传图片中...',
+    })
+    console.log('key', 'imagepath_' + path.substring(path.length - 10, path.length))
+    wx.uploadFile({
+      url: getApp().globalData.OSSUrl,
+      filePath: path,
+      name: 'file',
+      formData: {
+        'key': 'imagepath_' + path.substring(path.length - 15, path.length),
+        'OSSAccessKeyId': OSSInit.access_key_id,
+        'policy': OSSInit.policy,
+        'signature': OSSInit.signature,
+        'callback': OSSInit.callback_body,
+        'x:access_token': OSSInit.callback_token,
+        // 'x-oss-security-token': OSSInit.security_token,
+        'success_action_status': '200',
+      },
+      success: function (res) {
+        console.log('uploadFile', res.data)
+        if (res.statusCode == 200) {
+          var data = JSON.parse(res.data)
+          console.log('上传成功', res)
+          that.oss_bucket = data.bucket
+          if ("id_face" == str) {
+            that.setData({
+              front_card_info: data
+            })
+          } else if ("id_back" == str) {
+            that.setData({
+              back_card_info: data
+            })
+          }
+          that.checkAndupload()
+        } else {
+          var title = '图片上传失败，请重新上传'
+          if (res.statusCode == 413) {
+            title = '图片体积过大，请选择较小图片上传'
+          }
+          wx.showModal({
+            title: '上传失败',
+            content: title,
+            showCancel: false,
+            confirmColor: '#4E8FE7'
+          })
+        }
+        wx.hideLoading()
+      },
+      fail: function (err) {
+        console.log('fail', err)
+        wx.showModal({
+          title: '上传失败',
+          content: '图片上传失败，请重新上传',
+          showCancel: false,
+          confirmColor: '#4E8FE7'
+        })
+        wx.hideLoading()
+      },
+      complete(res) {
+        console.log('complete', res)
+        wx.hideLoading()
+      }
+    })
+  },
+
+  checkAndupload: function () {
+    var that = this
+    var frontdata = that.data.front_card_info
+    var backdata = that.data.back_card_info
+    console.log('frontdata', frontdata)
+    console.log('backdata', backdata)
+    if (!frontdata || !frontdata.object_id) {
+      return;
+    }
+    if (!backdata || !backdata.object_id) {
+      return;
+    }
+    wx.showLoading({
+      title: '解析图片中...',
+    })
+    var Authorization = getApp().globalData.Authorization;
+    wx.request({
+      url: baseUrl + 'common/v1/ocr/id-card-verify',
+      method: "POST",
+      header: {
+        'content-type': 'application/json', // 默认值
+        "Authorization": Authorization
+      },
+      data: {
+        front_card_copy: that.data.front_card_info,
+        back_card_copy: backdata
+      },
+      success: function (res) {
+        console.log('suc', res)
+        if (res.statusCode == 200) {
+          that.setData({
+            already_getdata: true,
+            idInfo: res.data.item
+          })
+          console.log('suc', that.data.idInfo)
+        } else {
+          wx.showModal({
+            showCancel: false,
+            title: '',
+            content: res.data.message ? res.data.message : "数据错误",
+          })
+        }
+      },
+      fail(res) {
+        console.log('fail', res.data)
+      },
+      complete(res) {
+        console.log('complete', res.data)
+        wx.hideLoading()
+      }
+    })
+  },
 
+  gonext: function () {
+    if (this.data.already_getdata) {
+      //请求数据 
+      wx.navigateTo({
+        url: 'verify_result/verify_result',
+      })
+    } else {
+      wx.showModal({
+        showCancel: false,
+        title: '',
+        content: "未能获取到信息,不能保存",
+      })
+    }
   },
 
   /**

+<view class='page'>
+
+  <view style='display:flex;flex-direction:row;background:#fff'>
+    <!--左边 身份信息 -->
+    <view style='margin:40rpx 0 30rpx 130rpx'>
+      <view style='display:flex;flex-direction:row;height:48rpx;width:100%;'>
+        <image style='margin-left:30rpx; width: 24px;height: 24px' src='/images/step_first_blue.png'></image>
+        <view style='background:#357aeb;width:90px;height:4rpx;align-self:center;'></view>
+      </view>
+      <view style='font-size: 17px;color: #000;margin-top:16rpx'>身份信息</view>
+    </view>
+    <!--右边 上传证件照 -->
+    <view style='margin:40rpx 100rpx 30rpx 0'>
+      <view style='display:flex;flex-direction:row;height:48rpx;width:100%;'>
+        <view style='background:#357aeb;width:90px;height:4rpx;align-self:center;'></view>
+        <image style='margin-right:30rpx; width: 24px;height: 24px' src='/images/step_second_blue.png'></image>
+      </view>
+      <view style='font-size: 17px;color: #000;margin-top:16rpx;text-align:right'>上传证件照</view>
+    </view>
+  </view>
+
+  <view class='id_background' bindtap="chooseImage" id='id_face'>
+    <image class='id_image_wrap' src="{{facepath?facepath:'/images/id_face.png'}}"></image>
+  </view>
+  <view class='id_background' bindtap="chooseImage" id='id_back'>
+    <image class='id_image_wrap' src="{{backpath?backpath:'/images/id_back.png'}}"></image>
+  </view>
+
+  <view style='background-color:#fff;padding:0 32rpx ;'>
+    <view class='item_body'>
+      <text class='text_666_28 float_left'>签发机关</text>
+      <text class='text_333_28 float_right'>{{idInfo.issued_by}}</text>
+    </view>
+    <view class="divide_line"></view>
+    <view class='item_body'>
+      <text class='text_666_28 float_left'>有效期</text>
+      <text class='text_333_28 float_right'>{{idInfo.valid_date}}</text>
+    </view>
+  </view>
+
+  <view class='bottom_btn_wrap'>
+    <view class='btn_blue_radius' bindtap="gonext">
+      <view class='text_white_34'>提交</view>
+    </view>
+  </view>
+</view>
\ No newline at end of file

+.page {
+  background: #f8f8f8;
+}
+
+.id_background{
+  width: 100%;
+  height: 380rpx;
+  display: flex;
+  align-items: center;
+  background-color: #fff;
+}
+
+.id_image_wrap{
+  width: 540rpx;
+  height: 312rpx;
+  margin-left: 110rpx;
+  margin-right: 110rpx;
+}
+
+
+.item_body {
+  width: 100%;
+  height: 80rpx;
+}
+
+.text_666_28 {
+  font-family: PingFangSC-Regular;
+  font-size: 28rpx;
+  color: #666;
+  line-height: 80rpx;
+}
+
+.text_333_28 {
+  font-family: PingFangSC-Regular;
+  font-size: 28rpx;
+  color: #333;
+  text-align: right;
+  line-height: 80rpx;
+}
+
+.bottom_btn_wrap{
+  background: #FFFFFF;
+  box-shadow: 0 -2px 8px 0 rgba(208,208,208,0.30);
+  height: 136rpx;
+  width: 100%;
+  position: fixed;
+  bottom: 0;
+}
+.btn_blue_radius{
+  margin: 26rpx 30rpx;
+  background: #357AEB;
+  border-radius: 5px;
+  height: 84rpx;
+}
+
+.text_white_34 {
+  font-family: PingFangSC-Regular;
+  font-size: 17px;
+  color: #FFFFFF;
+  text-align: center;
+  line-height: 42px;
+}
\ No newline at end of file

 // pages/main/verify/verify_info.js
-Page({
 
+Page({
   /**
    * Page initial data
    */
   data: {
-    is_foreigner:false,
-    btn_text:"下一步",
+    is_foreigner: false,
+    btn_text: "下一步",
     info_steps: [
       {
         label: '身份信息',
@@ -16,16 +16,19 @@ Page({
         status: 'circle'
       }
     ],
+    cardTypeArray: ['中国护照', '港澳居民来往内地通行证', '港澳居民居住证', '台湾居民来往大陆通行证', '台湾居民居住证', '外国护照', '外国人永久居留身份证', '外国人工作许可证（A类）', '外国人工作许可证（B类）', '外国人工作许可证（C类）'],
+    cardtype: "",
+    card_number:""
   },
 
   /**
    * Lifecycle function--Called when page load
    */
   onLoad: function (options) {
-    console.log("options",options);
+    console.log("options", options);
     this.setData({
-      is_foreigner:options.foreigner,
-      btn_text:"true"==options.foreigner?"提交":"下一步"
+      is_foreigner: options.foreigner,
+      btn_text: "true" == options.foreigner ? "提交" : "下一步"
     })
   },
 
@@ -43,17 +46,80 @@ Page({
 
   },
 
-  gonext:function(){
-    if(this.data.is_foreigner){
-        wx.showToast({
-          title: '提交成功',
-          icon: "none",
-          duration: 2000
-        })
-        wx.navigateBack({})
-    }else{
+  bindCardtypeChange: function (e) {
+    console.log("bindCardtypeChange", e)
+    var cardTypeArray = this.data.cardTypeArray
+    var new_type = cardTypeArray[e.detail.value] //['name']
+    if ((new_type.indexOf('外国人') != -1) && (selected.indexOf('外国人') != -1)) {
+      console.log('外国人', new_type, selected)
+    } else {
+
+    }
+    this.setData({
+      cardtype: new_type
+    })
+  },
+
+  bindinputcardnum: function (e) {
+    var idCardNo = e.detail.value
+    this.setData({
+      card_number: idCardNo
+    })
+    if (e.detail.value.length == 18) {
+      if (!this.data.is_foreigner && !format.isIDCardNum(idCardNo)) {
+        this.showtoast('证照号码有误');
+        return;
+      }
+      if (this.data.cardtypeData.selected.indexOf('居住证') > -1 && !reg_18_Number.test(idCardNo)) {
+        this.showtoast('证照号码有误');
+        return
+      }
+    }
+    if (e.detail.value.length == 9) {
+      if (this.data.cardtypeData.selected.indexOf('中国护照') > -1 && !reg_9_n_a.test(idCardNo)) {
+        this.showtoast('证照号码有误');
+        return
+      }
+    }
+    if (e.detail.value.length == 15) {
+      if (this.data.cardtypeData.selected.indexOf('永久居留') > -1 && !reg_15_n_a.test(idCardNo)) {
+        this.showtoast('证照号码有误');
+        return
+      }
+    }
+  },
+
+  dealCardType: function () {
+    //证照类型不一样，对应的姓名证照号码验证规则也不一样
+    var type = this.data.cardtype;
+    console.log('cardtype', type)
+    var idCardNo = this.data.card_number;
+    if (type.indexOf('居住证') > -1 && !reg_18_Number.test(idCardNo)) {
+      this.showtoast('证照号码有误');
+      return
+    }
+    if (type.indexOf('中国护照') > -1 && !reg_9_n_a.test(idCardNo)) {
+      this.showtoast('证照号码有误');
+      return
+    }
+    if (type.indexOf('永久居留') > -1 && !reg_15_n_a.test(idCardNo)) {
+      this.showtoast('证照号码有误');
+      return
+    }
+  },
+
+  gonext: function () {
+    if (this.data.is_foreigner=='true') {
+      this.dealCardType()
+      wx.showToast({
+        title: '提交成功',
+        icon: "none",
+        duration: 2000
+      })
+      wx.navigateBack({})
+    } else {
       wx.navigateTo({
-        url: 'verify_result/verify_result',
+        url: 'verify_idcard/verify_idcard',
       })
     }
   },

+
 <view class='page'>
   <view style='background:#FDFBEA;height:96rpx;width:100%;text-align:center'>
     <text style='font-size:30rpx;color:#E47C4A;font-family:PingFang-SC-Medium;line-height:96rpx'>为了您的账户安全，请先完成实名认证</text>
   </view>
 
-  <view hidden="{{is_foreigner}}" style='display:flex;flex-direction:row;'>
-    <!--左边 身份信息 -->
-    <view style='margin:40rpx 0 30rpx 130rpx'>
-      <view style='display:flex;flex-direction:row;height:48rpx;width:100%;'>
-        <image style='margin-left:30rpx; width: 24px;height: 24px' src='/images/step_first_blue.png'></image>
-        <view style='background:#357aeb;width:90px;height:4rpx;align-self:center;'></view>
+  <view hidden="{{is_foreigner=='true'}}">
+    <view style='display:flex;flex-direction:row;'>
+      <!--左边 身份信息 -->
+      <view style='margin:40rpx 0 30rpx 130rpx'>
+        <view style='display:flex;flex-direction:row;height:48rpx;width:100%;'>
+          <image style='margin-left:30rpx; width: 24px;height: 24px' src='/images/step_first_blue.png'></image>
+          <view style='background:#357aeb;width:90px;height:4rpx;align-self:center;'></view>
+        </view>
+        <view style='font-size: 17px;color: #000;margin-top:16rpx'>身份信息</view>
       </view>
-      <view style='font-size: 17px;color: #000;margin-top:16rpx'>身份信息</view>
-    </view>
-    <!--右边 上传证件照 -->
-    <view style='margin:40rpx 100rpx 30rpx 0'>
-      <view style='display:flex;flex-direction:row;height:48rpx;width:100%;'>
-        <view style='background:#bcc3c7;width:90px;height:4rpx;align-self:center;'></view>
-        <image style='margin-right:30rpx; width: 24px;height: 24px' src='/images/step_second_gray.png'></image>
+      <!--右边 上传证件照 -->
+      <view style='margin:40rpx 100rpx 30rpx 0'>
+        <view style='display:flex;flex-direction:row;height:48rpx;width:100%;'>
+          <view style='background:#bcc3c7;width:90px;height:4rpx;align-self:center;'></view>
+          <image style='margin-right:30rpx; width: 24px;height: 24px' src='/images/step_second_gray.png'></image>
+        </view>
+        <view style='font-size: 17px;color: #999;margin-top:16rpx;text-align:right'>上传证件照</view>
       </view>
-      <view style='font-size: 17px;color: #999;margin-top:16rpx;text-align:right'>上传证件照</view>
     </view>
   </view>
 
-
   <view style='width: 100%;height: auto;flex-direction: column;display: flex;'>
+    <view hidden="{{is_foreigner=='false'}}">
+      <picker bindchange="bindCardtypeChange" value="{{index}}" range="{{cardTypeArray}}">
+        <view style='height:90rpx;padding:0 30rpx '>
+          <text style='color:#777;font-size: 30rpx;line-height: 90rpx; float:left'>证照类型</text>
+          <image class='arrow_wrap' src='/images/arrow_right.png' style='margin-top:26rpx'></image>
+          <text wx:if="{{cardtype.length<1}}" class='text_999_30 float_right' style="line-height: 90rpx;">请选择</text>
+          <text wx:else style='color:#333;font-size: 30rpx;line-height: 90rpx; float:right'>{{cardtype}}</text>
+        </view>
+      </picker>
+      <view class="divide_line_30"></view>
+    </view>
 
     <view style='padding-left: 30rpx;padding-right: 30rpx;'>
       <text class='text_777_30 float_left' style='line-height: 90rpx'>姓名</text>
@@ -34,7 +47,7 @@
     <view style='padding-left: 30rpx;padding-right: 30rpx;'>
       <text class='text_777_30 float_left' style='line-height: 90rpx'>身份证件号码</text>
 
-      <input class='input_wrap' placeholder='请输入您的身份证号码' placeholder-class='text_999_30' name='id_card_no' maxlength='18' bindinput="idChange" type='idcard'></input>
+      <input class='input_wrap' placeholder='请输入您的身份证号码' placeholder-class='text_999_30' name='id_card_no' maxlength='18' bindinput = 'bindinputcardnum'type='idcard'></input>
     </view>
   </view>