pic

src/pages/identity/index.tsx

@@ -20,7 +20,8 @@ import kycIdBack from '@/assets/kycIdBack.svg'
 
 const idtypes = [
   {key:'idcard', value:'身份证'},
-  {key:'passport', value:'护照'}]
+  {key:'passport', value:'护照'}
+]
 const nations = [
   {key:'china', value:'中国'},
   {key:'us', value:'美国'},
@@ -35,17 +36,25 @@ const IdentityPage: React.FC<DispatchProp & UserModelState & IdentityModelState>
   nameInput,
   kyc1Submitting
 }) => {
-
+  const picCover = React.createRef();
+  const picBack = React.createRef();
   const [idtypesVisible, setIdtypesVisible] = useState(false);
   const [nationVisible, setNationVisible] = useState(false);
 
+  const onPicCover = (key: any) => {
+    console.log(key);
+    dispatch({ type: 'user/onUpdateState', payload: key });
+  };
+  const onPicBack = (key: any) => {
+    dispatch({ type: 'user/onUpdateState', payload: key });
+  };
   const onIdTypeSelected = (key: string) => {
     setIdtypesVisible(false);
-//    dispatch({ type: 'user/changeIdtype', payload: key });
+    dispatch({ type: 'user/onUpdateState', payload: key });
   };
   const onNationSelected = (key: string) => {
     setIdtypesVisible(false);
-//    dispatch({ type: 'user/changeIdtype', payload: key });
+    dispatch({ type: 'user/onUpdateState', payload: key });
   };
 
   const idtypeModal = (
@@ -70,7 +79,19 @@ const IdentityPage: React.FC<DispatchProp & UserModelState & IdentityModelState>
       title={formatMessage({ id: 'identity.chooseIdtype' })}
     />
   );
-
+  const submitHandler = () => {
+    const formData = new FormData();
+    const pic1 = picCover.current.files[0];
+    const pic2 = picBack.current.files[0];
+    // const p1 = new FileReader(pic1); // 用于预览
+    // const p2 = new FileReader(pic2);
+    formData.append('pic1', pic1);
+    formData.append('pic2', pic2);
+    /**
+     可以在这里直接
+     axios.post(url, formData)
+     */
+  }
   return (
     <div className={styles.container}>
       <Header
@@ -78,13 +99,33 @@ const IdentityPage: React.FC<DispatchProp & UserModelState & IdentityModelState>
         title={formatMessage({ id: 'identity.title' })}
       />
       {user && <div className={styles.content}>
+        <input className={styles.myinput}
+          placeholder={formatMessage({ id: 'identity.idcode' })}
+          name="idcode"
+          value={user.idcode}
+          onChange={e => dispatch({ type: 'identity/onUpdateState', idcode: e.target.value })}
+        />
+        <div style={{'display': 'flex', 'position': 'relative'}}>
+          <div className={styles.uploadBox}>
+            <div className={styles.imgBox}>
+              <img src={kycIdCover} className={styles.idPhoto} />
+            </div>
+            <input type="file" className={styles.input} ref={picCover}/>
+          </div>
+          <div className={styles.uploadBox}>
+            <div className={styles.imgBox}>
+              <img src={kycIdBack} className={styles.idPhoto}/>
+            </div>
+            <input type="file" className={styles.input} ref={picBack}/>
+          </div>
+        </div>
         <input className={styles.myinput}
           placeholder={formatMessage({ id: 'identity.realname' })}
           name="realname"
           value={user.realname}
           onChange={e => dispatch({ type: 'identity/onUpdateState', realname: e.target.value })}
         />
-        <AccountItem
+        {/* <AccountItem
           className="group"
           title="identity.nationality"
           message={user.nationality}
@@ -97,17 +138,8 @@ const IdentityPage: React.FC<DispatchProp & UserModelState & IdentityModelState>
           message={user.idtype}
 //          preview={fromLangToText(lang)}
           onClick={() => setIdtypesVisible(true)}
-        />
+        /> */}
-        <input className={styles.myinput}
+
-          placeholder={formatMessage({ id: 'identity.idcode' })}
-          name="idcode"
-          value={user.idcode}
-          onChange={e => dispatch({ type: 'identity/onUpdateState', idcode: e.target.value })}
-        />
-        <div>
-          <img src={kycIdCover} className={styles.idPhoto}/>
-          <img src={kycIdBack} className={styles.idPhoto}/>
-        </div>
         <div className={styles.prompt}>
           <div>一级认证未能通过审核，原因为：</div>
           <div>后台返回的理由</div>
@@ -118,7 +150,8 @@ const IdentityPage: React.FC<DispatchProp & UserModelState & IdentityModelState>
           type="primary"
           size="large"
           loading={kyc1Submitting}
-          onClick={() => dispatch({ type: 'identity/kyc1submit' })}
+          // onClick={() => dispatch({ type: 'identity/kyc1submit' })}
+          onClick={e => submitHandler(e)}
         >{formatMessage({ id: user.kyc1success ? 'identity.kyc1btn2' : 'identity.kyc1btn' })}</Button>
       </div>}
       {idtypeModal}

src/pages/identity/model.ts

@@ -6,6 +6,7 @@ export interface IdentityModelState {
   kyc1success: boolean;
   nameInput: string;
   kyc1Submitting: boolean;
+  formData: any;
 }
 
 const model: Model = {
@@ -15,13 +16,12 @@ const model: Model = {
     kyc1success: false,
     nameInput: '',
     kyc1Submitting: false,
+    formData: ''
   } as IdentityModelState,
 
   effects: {
     *kyc1submit(_, { put, all, call, select }) {
-//      alert('kyc1 submitting............')
       const { realname, idcode } = yield select((state:any) => state.identity)
-//      alert('realname =' + realname + ', idcode =' + idcode)
       if (!idcode || !realname) return
       yield put({ type: 'onUpdateState', kyc1Submitting: true })
       try {

src/pages/identity/style.less

@@ -43,5 +43,25 @@
 }
 
 .idPhoto{
-  width:50%;
+  position: relative;
+  width:100%;
+  height:100%;
+}
+.uploadBox {
+  flex: 1 0 auto;
+  position: relative;
+  text-align: center;
+  .input {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    font-size: 0;
+  }
+  .imgBox {
+    width: 100%;
+    height: 100%;
+    position: relative;
+  }
 }