认证+上传图片

<view class="warning"><image src="../../images/warning.png"></image>请谨慎选择您的账户类型，认证后不可更改。</view>
<view class='topTabSwiper df'>
  <view class='tab  {currentData == 0 ? "tabBorer" : ""}' data-current="0" bindtap='checkCurrent'>个人认证</view>
  <view class='tab  {currentData == 1 ? "tabBorer" : ""}' data-current="1" bindtap='checkCurrent'>公司认证</view>
</view>
<swiper current="{currentData}" class='swiper' style="height:600px;" duration="300" bindchange="bindchange">
  <swiper-item>
    <form bindsubmit="onSubmit" report-submit="true">
      <view class="form_group">
        <text>真实姓名</text>
        <input placeholder="请填写真实姓名" bindinput="inputName" auto-focus maxlength="5" name="name" placeholder-class="pc">请填写真实姓名</input>
      </view>
      <view class="form_group">
        <text>身份证号</text>
        <input placeholder="请填写身份证号" bindinput="inputIdcard" maxlength="18" name="idcard" placeholder-class="pc">请填写身份证号</input>
      </view>
      <view class="upload">
        <text class="upload_tit">请上传身份证明</text>
        <loading hidden="{hidden}">上传中...</loading>
        <view class="merch_img">
          <view class="indentityCard df">
            <view class="identityCard_front" bindtap="frontimage">
              <image src="../../images/camera1.png" class="images"></image>
              <image src="{FilePaths}" mode="aspecFill" class="paths" />
              <input hidden name='frontimage' value='{frontimage_id}'></input>
            </view>
            <view class="identityCard_recite" bindtap="reciteimage">
              <image src="../../images/camera2.png" class="images"></image>
              <image src="{recitePaths}" mode="aspecFill" class="paths" />
              <input hidden name='reciteimage' value='{reciteimage_id}'></input>
            </view>
          </view>
        </view>
      </view>
      <button formType="submit" disabled="{disabled}">提交认证</button>
    </form>
    <text class="warning2">请确认您选择的账户类型，认证后不可更改。</text>
  </swiper-item>
  <swiper-item>
    <form bindsubmit="onSubmit" report-submit="true">
      <view class="form_group">
        <text>公司名称</text>
        <input placeholder="请填写公司名称" bindinput="inputCompany" name="company" placeholder-class="pc">请填写公司名称</input>
      </view>
      <view class="form_group">
        <text>注册号</text>
        <input placeholder="请填写公司注册号" bindinput="inpuTorganizationCode"  maxlength="30" name="organization_code" placeholder-class="pc">请填写公司注册号</input>
      </view>
      <view class="form_group">
        <text>法人姓名</text>
        <input placeholder="请填写法人真实姓名" bindinput="inputLegalName" maxlength="5" name="legal_name" placeholder-class="pc">请填写法人真实姓名</input>
      </view>
      <view class="form_group form_group_faren">
        <text>法人身份证号</text>
        <input placeholder="请填写法人真实身份证号" bindinput="inputLegalIdcard" maxlength="18" name="legal_idcard" placeholder-class="pc">请填写法人真实身份证号</input>
      </view>
      <button formType="submit" disabled="{disabled}">提交认证</button>
    </form>
    <text class="warning2">请确认您选择的账户类型，认证后不可更改。</text>
  </swiper-item>
</swiper>

// pages/user/renzheng.js
const App = getApp();
Page({
  /**
   * 页面的初始数据
   */
  data: {
    currentData: 0,
    selectPerson: true,
    tempFilePaths: '',
    hidden: true, //true
    buthidden: false, //false
    sourceType: ['album', 'camera'],
    type:1,
    disabled: false
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    try {
      var res = wx.getSystemInfoSync()
      var platform = res.platform
      if (platform == 'ios') {
        util.msg("警告", "IOS系统暂不支持拍照，请从相册选择照片")
        this.setData({
          sourceType: ['album']
        })
      }
    } catch (e) {}
  },
  frontimage: function() {
    let _this = this;
    let wxapp_id = App.getWxappId();
    wx.chooseImage({
      count: 1, // 默认9 
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有 
      success: function(res) {
        let tempFilePaths = res.tempFilePaths;
        wx.uploadFile({
          url: App.api_root + 'upload/image',
          filePath: tempFilePaths[0],
          name: 'iFile',
          formData: { 
            wxapp_id: wxapp_id,
            user_id: App.getUserId()
          },
          success: function (resu) {
            var resu = JSON.parse(resu.data);
            if (resu.code == 1) {
              _this.setData({
                frontimage_id: resu.data.file_id,
                frontimage: resu.data.file_path
              });
              App.showSuccess('上传成功');
            } else {
              App.showError('上传失败');
            }
          }
        })
        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片 
        _this.setData({
          FilePaths: res.tempFilePaths
        })
      }
    })
  },
  reciteimage: function() {
    let _this = this;
    let wxapp_id = App.getWxappId();
    wx.chooseImage({
      count: 1, // 默认9 
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有 
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有 
      success: function(res) {
        let tempFilePaths = res.tempFilePaths;
        wx.uploadFile({
          url: App.api_root + 'upload/image',
          filePath: tempFilePaths[0],
          name: 'iFile',
          formData: {
            wxapp_id: wxapp_id,
            user_id: App.getUserId()
          },
          success: function (resu) {
            var resu = JSON.parse(resu.data);
            // consoel.log(resu);return false;
            if (resu.code == 1) {
              _this.setData({
                reciteimage_id: resu.data.file_id,
                reciteimage: resu.data.file_path
              });
              App.showSuccess('上传成功');
            } else {
              App.showError('上传失败');
            }
          }
        })
        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片 
        _this.setData({
          recitePaths: res.tempFilePaths
        })
      }
    })
  },
  //获取当前滑块的index
  bindchange: function(e) {
    const that = this;
    that.setData({
      currentData: e.detail.current
    })
  },
  //点击切换，滑块index赋值
  checkCurrent: function(e) {
    const that = this;
    if (that.data.currentData === e.target.dataset.current) {
      return false;
    } else {
      that.setData({
        type: (e.target.dataset.current-1+2),
        currentData: e.target.dataset.current
      })
    }
  },
  inputName: function(e) {
    this.setData({
      name: e.detail.value
    })
  },
  inputIdcard: function(e) {
    this.setData({
      idcard: e.detail.value
    })
  }, 
  inputLegalName: function(e) {
    this.setData({
      legal_name: e.detail.value
    })
  },
  inputLegalIdcard: function (e) {
    this.setData({
      legal_idcard: e.detail.value
    })
  },
  inputCompany: function(e) {
    this.setData({
      company: e.detail.value
    })
  },
  inpuTorganizationCode: function(e) {
    this.setData({
      organization_code: e.detail.value
    })
  },
  /**
   * 表单验证
   */
  validation: function (values) {
    var _this = this;
    if (_this.data.type == 1) {
      if (values.name === '') {
        this.data.error = '姓名不能为空';
        return false;
      } else if (!(/^[\u4E00-\u9FA5]{2,4}$/.test(values.name))) {
        this.data.error = '姓名格式输入错误';
        return false;
      }
      if (values.idcard == "") {
        this.data.error = '请输入身份证号';
        return false;
      } else if (!(/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/.test(values.idcard))) {
        this.data.error = '身份证号格式有误';
        return false;
      }
      if (values.frontimage === '') {
        this.data.error = '请上传身份证正面';
        return false;
      }
      if (values.reciteimage === '') {
        this.data.error = '请上传身份证反面';
        return false;
      }
      if (values.organization_code === '') {
        this.data.error = '注册号不能为空';
        return false;
      }
    }else{
      if (values.legal_name === '') {
        this.data.error = '法人姓名不能为空';
        return false;
      } else if (!(/^[\u4E00-\u9FA5]{2,4}$/.test(values.legal_name))) {
        this.data.error = '法人姓名格式输入错误';
        return false;
      }
      if (values.legal_idcard == "") {
        this.data.error = '请输入身份证号';
        return false;
      } else if (!(/^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(values.legal_idcard))) {
        this.data.error = '身份证号格式有误';
        return false;
      }
    }
    if (values.company === '') {
      this.data.error = '公司名称不能为空';
      return false;
    }
    return true;
  },
  onSubmit(e) {
    let _this = this,
    values = e.detail.value;
    values.idcard_z = values.frontimage;
    values.idcard_f = values.reciteimage;
    values.type = _this.data.type;
    // 记录formid
    App.saveFormId(e.detail.formId);
    // 表单验证
    if (!_this.validation(values)) {
      App.showError(_this.data.error);
      _this.setData({
        disabled: false
      });
      return false;
    }
    // 按钮禁用
    _this.setData({
      disabled: true
    });
    // 提交到后端
    App._post_form('user/real', values, result => {
      if (result.code == 1) {
        App.showSuccess('认证成功',function(){
          wx.switchTab({
            url: '../user/index'
          })
        });
      } else {
        App.showError('认证失败');
      }
    }, false, () => {
      // 解除禁用
      _this.setData({
        disabled: false
      });
    });
  }
})

/* pages/user/renzheng.wxss */
.warning {
  text-align: center;
  height: 64rpx;
  line-height: 64rpx;
  background: #e5e5e5;
  color: #ff952b;
  font-size: 24rpx;
}
.warning image {
  width: 22rpx;
  height: 22rpx;
  margin-right: 2rpx;
}
.topTabSwiper {
  width: 610rpx;
  height: 88rpx;
  line-height: 88rpx;
  border: 4rpx solid #03ac67;
  border-radius: 60rpx;
  margin: 0 auto;
  margin-top: 36rpx;
  font-size: 32rpx;
  color: #333;
  overflow: hidden;
}
.topTabSwiper .tab {
  width: 50%;
  text-align: center;
}
.topTabSwiper .tab.tabBorer {
  background: #03AC67;
  color: #fff;
}
.swiper {
  padding: 0 52rpx;
  margin-top: 50rpx;
}
.form_group {
  height: 90rpx;
  line-height: 90rpx;
  position: relative;
  font-size: 26rpx;
  color: #333;
}
.form_group text {
  display: block;
  position: absolute;
}
.form_group input {
  border-bottom: 2rpx solid #e5e5e5;
  line-height: 90rpx;
  height: 90rpx;
  padding-left: 130rpx;
  font-size: 26rpx;
  color: #d2d2d2;
}
.form_group_faren input {
  padding-left: 190rpx;
}
.form_group .pc {
  color: #d2d2d2;
}
/* 上传证件 */
.upload .upload_tit {
  display: block;
  font-size: 26rpx;
  color: #333;
  margin-top: 34rpx;
  margin-bottom: 32rpx;
}
.indentityCard .images {
  width: 300rpx;
  height: 214rpx;
  position: absolute;
  z-index: -1;
}
.identityCard_front, .identityCard_recite {
  width: 50%;
}
.paths {
  width: 300rpx;
  height: 214rpx;
}
.swiper button {
  width: 610rpx;
  height: 88rpx;
  line-height: 88rpx;
  background: #03AC67;
  color: #fff;
  font-size: 32rpx;
  border-radius: 50rpx;
  margin-top: 110rpx;
}
.swiper button::after {
  display: none;
}
.swiper .warning2 {
  font-size: 24rpx;
  color: #D2D2D2;
  text-align: center;
  display: block;
  margin-top: 20rpx;
}