微信小程序个人实名认证信息填写样式设计制作开发教程

本文给大家带来的是微信小程序个人实名认证信息填写样式设计制作开发教程，制作好以后效果图如下：

一、wxml页面代码如下：

<view class="cont">
  <view class="tou" wx:if="{{rztype=='geren'}}">
    <view bindtap="gotogeren">
      个人信息
      <view class="san">
        <text class="jiao"></text>
      </view>
    </view>
    <view>></view>

    <view bindtap="gotodianpu">店铺信息</view>
    <view>></view>
    <view bindtap="gotoshenhe">提交审核</view>
  </view>

  <view class="tou" wx:if="{{rztype=='qiye'}}">
    <view bindtap="gotoqiye">企业信息</view>
    <view>></view>
    <view bindtap="gotogeren">
      个人信息
      <view class="qiyesan">
        <text class="jiao"></text>
      </view>
    </view>
    <view>></view>

    <view bindtap="gotodianpu">店铺信息</view>
    <view>></view>
    <view bindtap="gotoshenhe">提交审核</view>
  </view>


  <view class="shiming">实名认证
    <text style="font-size:22rpx">（请上传真实的个人信息，认证通过后将无法修改）</text>
  </view>


  <form bindsubmit="reg">
    <view class="xing">姓名
      <input placeholder-class='placeholder' placeholder='请输入真实姓名' class="in" name="linkman" value="{{linkman}}" />
    </view>

    <view class="xing">身份证/护照
      <input placeholder-class='placeholder' placeholder='请输入身份证/护照' class="in" name='idc_id' value="{{idc_id}}" />
    </view>
    <view class="xing">联系电话
      <input placeholder-class='placeholder' placeholder='请输入联系电话' class="in" name='tel' value="{{tel}}" />
    </view>

    <view style="text-align:right;font-size:24rpx;margin-right:60rpx;margin-top:20rpx;color:#999999;">请填写正确的有效电话，工作人员讲会电话联系你</view>

    <view class="shenfen">

      <view class="shenfen1">身份证正面照</view>
      <text style="font-size:26rpx;color:#d9002f;">*请使用手机横向拍摄以保证图片正常显示</text>
      <block wx:if="{{idc_face}}">


        <view class="cl_img">
          <image src="{{idc_face}}" mode="aspectFit" bindtap="idc_face"></image>

          <view class="hh">此图片仅供审核用</view>

        </view>


      </block>


      <block wx:else>
        <view class="cl_img">
          <image src="../../images/upload.jpg" bindtap="idc_face"></image>


        </view>
      </block>

    </view>

    <view class="shenfen">

      <view class="shenfen1">身份证反面照</view>
      <text style="font-size:26rpx;color:#d9002f;">*请使用手机横向拍摄以保证图片正常显示</text>


      <block wx:if="{{idc_back}}">
        <view class="cl_img">
          <image src="{{idc_back}}" mode="aspectFit" bindtap="idc_back"></image>
          <view class="hh">此图片仅供审核用</view>

        </view>

      </block>
      <block wx:else>
        <view class="cl_img">
          <image src="../../images/upload.jpg" bindtap="idc_back"></image>
        </view>
      </block>




    </view>

    <view class="shenfen">

      <view class="shenfen1">手持身份证照</view>
      <text style="font-size:26rpx;color:#d9002f;">*请使用手机横向拍摄以保证图片正常显示</text>
      <block wx:if="{{idc_photo}}">
        <view class="cl_img">
          <image src="{{idc_photo}}" mode="aspectFit" bindtap="idc_photo"></image>
                    <view class="hh">此图片仅供审核用</view>
        </view>
      </block>
      <block wx:else>
        <view class="cl_img">
          <image src="../../images/upload.jpg" bindtap="idc_photo"></image>
        </view>
      </block>


    </view>

    <view style="padding-top:30rpx;font-size:30rpx;text-align:center;color:#cccccc">————请确认以上信息准确无误————</view>

    <button type="" form-type="submit" hover-class='button-hover' class='su'>保存并下一步</button>
  </form>



</view>

二、wxss样式文件代码如下：

.cont{
  font-family: "微软雅黑";
  height: 100%;
  width: 100%;
  
}

.tou{
  display: flex;
  justify-content: center;
  background: #d9002f;
  color: 	#fff;
  font-size: 24rpx;
}
.tou view{
  padding: 25rpx 20rpx;
}
.jiao{
    float:left;
    clear:both;  
    font-size: 0;  
    line-height: 0;  
    border-width: 13px;  
    border-color:  #d9002f;  
    border-bottom-width: 0;  
    border-style: dashed;  
    border-top-style: solid;  
    border-left-color: transparent;  
    border-right-color: transparent;  
}
.san{
  position: absolute;
  top: 55rpx;
}
.qiyesan{
  position: absolute;
  top: 55rpx;
}

  .shiming{
    font-size: 32rpx;
    padding: 20rpx 25rpx;
    color:#999999;
  }



  /*信息*/
  .tit {
  height: 300rpx;
  width: 100%;
}

.container {
  padding: 0px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  font-family: '微软雅黑';
}

.classname {
  background: #f4f4f4;
  width: 100%;
  text-align: center;
  padding-bottom: 150rpx;
}

.jj {
  font-size: 24rpx;
  padding-top: 20rpx;
  font-family: "微软雅黑", "黑体";
  margin: 0 auto;
  color: #ccc;
  padding-bottom: 20rpx;
}

.xing {
  font-family: "微软雅黑", "黑体";
  height: 54rpx;
  width: 579rpx;
  border-radius: 10rpx;
  background: #fff;
  margin: 0 auto;
  text-align: left;
  line-height: 54rpx;
  font-size: 28rpx;
  padding: 10rpx;
  margin-top: 38rpx;
  padding-left: 30rpx;
}

.xi {
  font-family: "微软雅黑", "黑体";
  height: 200rpx;
  width: 579rpx;
  border-radius: 10rpx;
  background: #fff;
  margin: 0 auto;
  text-align: left;
  line-height: 54rpx;
  font-size: 28rpx;
  padding: 10rpx;
  margin-top: 38rpx;
  padding-left: 30rpx;
}

.placeholder {
  color: #ccc;
  font-size: 26rpx;
}

.in {
  float: right;
  width: 70%;
  padding-top: 0rpx;
  font-size: 28rpx;
  color: #000;
}

.i {
  float: right;
  width: 72%;
  height: 100%;
  padding-top: 12rpx;
  font-size: 28rpx;
  color: #000;
}

textarea {
  height: 100px;
}

.t {
  font-family: "微软雅黑", "黑体";
  width: 20%;
  height: 60rpx;
  /*background: #fff;*/
  margin-left: 57rpx;
  padding: 5rpx;
  line-height: 60rpx;
  margin-top: 40rpx;
  font-size: 28rpx;
  display: inline-block;
  border: 1px solid #ccc;
  float: left;
}

.su {
  width: 84%;
  color: #fff;
  height: 69rpx;
  line-height: 69rpx;
  font-size: 30rpx;
  font-family: "微软雅黑", "黑体";
  top: 103rpx;
  background: #d9002f;
  margin-bottom: 100rpx;
}

button[type="primary"] {
  color: #000;
  background-color: #fff;
}
.shuoming{
  height: 50rpx;
font-size: 30rpx;
}
.label-1, .label-2{
    margin-bottom: 15px;
}
.label-1__text, .label-2__text {
    display: inline-block;
    vertical-align: middle;
}

.label-1__icon {
    position: relative;
    margin-right: 10px;
    display: inline-block;
    vertical-align: middle;
    width: 18px;
    height: 18px;
    background: #fcfff4;
    border: 1px solid #ccc
}

.label-1__icon-checked {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 12px;
    height: 12px;
    background: #d9002f;
}

.shenfen{
  width:100%;
  margin: 0 auto;
  padding: 20rpx 40rpx;
  background: #fff;
   margin-top: 30rpx;
}
.shenfen1{
    width: 80%;
  padding-bottom: 10rpx;
 font-size: 32rpx;
}
.cl_img{
  width: 90%;

}
.cl_img image{
  width: 100%;
  height: 512rpx
  
} 


.hh{
  position:relative;
  top:-291rpx;
  right:-18rpx;
  font-size:48rpx;
  color:coral;
  font-weight:700;
  transform:rotate(-40deg);
  letter-spacing:36rpx;
}

三、js页面代码如下：

var app = getApp();
var uploadFileUrl = app.d.ceshiUrl + "/Api/Renzheng/uploadimg";
Page({

  /**
   * 页面的初始数据
   */
  data: {
  
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that=this; 
    var rztype=options.rztype;
    that.setData({
      rztype:rztype
    })
    wx.request({
      url: app.d.ceshiUrl + '/Api/Renzheng/readinfo',
      method: 'post',
      data: {
        uid: app.globalData.userInfo.id,
        dtype: "geren"
      },
      header: {
        'Content-Type': 'application/x-www-form-urlencoded'
      },
      success: function (res) {
        if (res.data.status == 1) {
          var fdata = res.data.respondData;
          that.setData({
            linkman: fdata.linkman,
            idc_id: fdata.idc_id,
            tel: fdata.tel,     
            idc_face: fdata.idc_face,
            idc_back: fdata.idc_back,
            idc_photo: fdata.idc_photo,
            upidc_face: fdata.upidc_face,
            upidc_back: fdata.upidc_back,
            upidc_photo: fdata.upidc_photo
          })
        }
      },
      error: function (e) {
        wx.showToast({
          title: '网络异常！',
          duration: 30000
        });
      },
    })
  },
  reg: function (e) {
    var that = this;
    var rztype = that.data.rztype;
    console.log(e.detail.value);
    var fdata = e.detail.value;
    wx.request({
      url: app.d.ceshiUrl + '/Api/Renzheng/savegeren',
      method: 'post',
      data: {
        uid: app.globalData.userInfo.id,
        linkman: fdata.linkman,
        idc_id: fdata.idc_id,
        tel:fdata.tel,
        idc_face: that.data.upidc_face,
        idc_back: that.data.upidc_back,
        idc_photo: that.data.upidc_photo
      },
      header: {
        'Content-Type': 'application/x-www-form-urlencoded'
      },
      success: function (res) {
        wx.showToast({
          title: res.data.message,
        })
        if (res.data.status == 1) {
          wx.redirectTo({
            url: '../rzshop/rzshop?rztype=' + rztype,
            success: function (res) { },
            fail: function (res) { },
            complete: function (res) { },
          })
        }
      },
      error: function (e) {
        wx.showToast({
          title: '网络异常！',
          duration: 30000
        });
      },
    })
  },
  // 身份证正面
  idc_face: function () {
    var self = this
    wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'],
      success: function (res) {
        console.log('chooseImage success, temp path is', res.tempFilePaths)
        var imageSrc = res.tempFilePaths[0]
        wx.uploadFile({
          url: uploadFileUrl,
          filePath: imageSrc,
          name: 'data',
          success: function (res) {
            console.log('uploadImage success, res is:', res)

            wx.showToast({
              title: '上传成功',
              icon: 'success',
              duration: 1000
            })

            self.setData({
              idc_face:imageSrc,
              upidc_face:res.data
            })
          },
          fail: function ({errMsg}) {
            console.log('uploadImage fail, errMsg is', errMsg)
          }
        })

      },
      fail: function ({errMsg}) {
        console.log('chooseImage fail, err is', errMsg)
      }
    })
  },
  // 身份证反面
  idc_back: function () {
    var self = this
    wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'],
      success: function (res) {
        console.log('chooseImage success, temp path is', res.tempFilePaths)
        var imageSrc = res.tempFilePaths[0]
        wx.uploadFile({
          url: uploadFileUrl,
          filePath: imageSrc,
          name: 'data',
          success: function (res) {
            console.log('uploadImage success, res is:', res)

            wx.showToast({
              title: '上传成功',
              icon: 'success',
              duration: 1000
            })

            self.setData({
              idc_back: imageSrc,
              upidc_back: res.data
            })
          },
          fail: function ({errMsg}) {
            console.log('uploadImage fail, errMsg is', errMsg)
          }
        })

      },
      fail: function ({errMsg}) {
        console.log('chooseImage fail, err is', errMsg)
      }
    })
  },
  // 手持身份证
  idc_photo: function () {
    var self = this;
    wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'],
      success: function (res) {
        console.log('chooseImage success, temp path is', res.tempFilePaths)
        var imageSrc = res.tempFilePaths[0]
        wx.uploadFile({
          url: uploadFileUrl,
          filePath: imageSrc,
          name: 'data',
          success: function (res) {
            console.log('uploadImage success, res is:', res)

            wx.showToast({
              title: '上传成功',
              icon: 'success',
              duration: 1000
            })

            self.setData({
              idc_photo: imageSrc,
              upidc_photo: res.data
            })
          },
          fail: function ({errMsg}) {
            console.log('uploadImage fail, errMsg is', errMsg)
          }
        })

      },
      fail: function ({errMsg}) {
        console.log('chooseImage fail, err is', errMsg)
      }
    })
  },
  gotoqiye: function (e) {
    var that = this;
    var rztype = that.data.rztype;
    wx.redirectTo({
      url: '../rzqiye/rzqiye?rztype=' + rztype,
    })
  },
  gotogeren: function (e) {
    var that = this;
    var rztype = that.data.rztype;
    wx.redirectTo({
      url: '../renzheng/renzheng?rztype=' + rztype,
    })
  },
  gotodianpu: function (e) {
    var that = this;
    var rztype = that.data.rztype;
    wx.redirectTo({
      url: '../rzshop/rzshop?rztype=' + rztype,
    })
  },
  gotoshenhe: function (e) {
    var that = this;
    var rztype = that.data.rztype;
    wx.redirectTo({
      url: '../examine/examine?rztype=' + rztype,
    })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
  
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
  
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
  
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
  
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
  
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
  
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
  
  }
})

模板简介：该模板名称为【微信小程序个人实名认证信息填写样式设计制作开发教程】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。