sourcecode/front/project/h5/routes/page/identity/page.js

import React from 'react';
import './index.less';
import Page from '@src/containers/Page';
import Assets from '@src/components/Assets';
import { asyncSMessage } from '@src/services/AsyncTools';
import { dataURLtoBlob, formatDate } from '@src/services/Tools';
import Icon from '../../../components/Icon';
import { Common } from '../../../stores/common';
import { My } from '../../../stores/my';

export default class extends Page {
  initState() {
    return { state: 'wait' };
  }

  init() {
    this.wx = null;
    Common.readyWechat(window.location.href, ['chooseImage', 'getLocalImgData']).then(wx => {
      this.wx = wx;
    });
  }

  submitFront() {
    if (this.wx) {
      this.wx.chooseImage({
        count: 1, // 默认9
        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['camera'], // 可以指定来源是相册还是相机，默认二者都有
        success(response) {
          wx.getLocalImgData({
            localId: response.localIds[0].toString(),
            success: res => {
              const { localData } = res;
              let imageBase64 = '';
              if (localData.indexOf('data:image') === 0) {
                // 苹果的直接赋值，默认生成'data:image/jpeg;base64,'的头部拼接
                imageBase64 = localData;
              } else {
                // 此处是安卓中的唯一得坑！在拼接前需要对localData进行换行符的全局替换
                // 此时一个正常的base64图片路径就完美生成赋值到img的src中了
                imageBase64 = `data:image/jpeg;base64,${localData.replace(/\n/g, '')}`;
              }
              this.setState({ front: imageBase64 });
              My.realFront(new File(dataURLtoBlob(imageBase64), 'front.jpg', { type: 'image/jpeg' }))
                .then(() => {
                  this.back = true;
                  this.submit();
                })
                .catch(err => {
                  asyncSMessage(err.message, 'error');
                });
            },
          });
        },
      });
    }
  }

  submitBack() {
    if (this.wx) {
      this.wx.chooseImage({
        count: 1, // 默认9
        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['camera'], // 可以指定来源是相册还是相机，默认二者都有
        success(response) {
          wx.getLocalImgData({
            localId: response.localIds[0].toString(),
            success: res => {
              const { localData } = res;
              let imageBase64 = '';
              if (localData.indexOf('data:image') === 0) {
                // 苹果的直接赋值，默认生成'data:image/jpeg;base64,'的头部拼接
                imageBase64 = localData;
              } else {
                // 此处是安卓中的唯一得坑！在拼接前需要对localData进行换行符的全局替换
                // 此时一个正常的base64图片路径就完美生成赋值到img的src中了
                imageBase64 = `data:image/jpeg;base64,${localData.replace(/\n/g, '')}`;
              }
              this.setState({ back: imageBase64 });
              dataURLtoBlob(imageBase64);

              My.realBack(new File(dataURLtoBlob(imageBase64), 'back.jpg', { type: 'image/jpeg' }))
                .then(() => {
                  this.back = true;
                  this.submit();
                })
                .catch(err => {
                  asyncSMessage(err.message, 'error');
                });
            },
          });
        },
      });
    }
  }

  submit() {
    if (!this.front || !this.back) {
      return;
    }
    My.realFinish().then((result) => {
      this.setState({ state: 'finish', data: result });
    });
  }

  renderWait() {
    return (
      <div>
        <div className="text">
          请扫描您的居民身份证原件,领取6个月VIP权限。
          <br />
          千行将重视和保护您的隐私。
        </div>
        <div className="id-card-1">
          <Assets name="IDcard" />
          <Assets
            className="scan"
            src={this.state.front}
            name="scan1"
            onClick={() => {
              this.submitFront();
            }}
          />
        </div>
        <div className="id-card-2">
          <Assets name="IDcard2" />
          <Assets
            className="scan"
            src={this.state.back}
            name="scan2"
            onClick={() => {
              this.submitBack();
            }}
          />
        </div>
      </div>
    );
  }

  renderFinish() {
    const { data } = this.state;
    return (
      <div className="finish">
        <div className="icon">
          <Icon type="check-circle" />
        </div>
        <div className="title">认证完成！</div>
        <div className="desc">180天VIP权限已赠送至您的账户</div>
        <div className="desc">生效时间：{formatDate(data.useStartTime, 'YYYY-MM-DD')}</div>
      </div>
    );
  }

  renderView() {
    const { state } = this.state;
    switch (state) {
      case 'finish':
        return this.renderFinish();
      default:
        return this.renderWait();
    }
  }
}