demo

src/pages/identity/index.tsx

@@ -6,7 +6,7 @@
 import React, { useState } from 'react';
 import { connect, DispatchProp, routerRedux } from 'dva';
 import { formatMessage } from 'umi-plugin-locale';
-import { Button, Modal, Input } from 'antd';
+import { Button, Modal, Input, Select } from 'antd';
 import Header from '@/components/Header';
 import ChoiceModal from '@/components/ChoiceModal';
 import AccountItem from '@/components/AccountItem';
@@ -21,6 +21,12 @@ import kycIdBack from '@/assets/kycIdBack.svg'
 const idtypes = [
   {key:'idcard', value:'身份证'},
   {key:'passport', value:'护照'}]
+const nations = [
+  {key:'china', value:'中国'},
+  {key:'us', value:'美国'},
+  {key:'singapore', value:'新加坡'},
+  {key:'hk', value:'中国香港'},
+]
 
 const IdentityPage: React.FC<DispatchProp & UserModelState & IdentityModelState> = ({
   dispatch,
@@ -31,8 +37,13 @@ const IdentityPage: React.FC<DispatchProp & UserModelState & IdentityModelState>
 }) => {
 
   const [idtypesVisible, setIdtypesVisible] = useState(false);
+  const [nationVisible, setNationVisible] = useState(false);
 
-  const onItemSelected = (key: string) => {
+  const onIdTypeSelected = (key: string) => {
+    setIdtypesVisible(false);
+//    dispatch({ type: 'user/changeIdtype', payload: key });
+  };
+  const onNationSelected = (key: string) => {
     setIdtypesVisible(false);
 //    dispatch({ type: 'user/changeIdtype', payload: key });
   };
@@ -42,12 +53,23 @@ const IdentityPage: React.FC<DispatchProp & UserModelState & IdentityModelState>
       closable={false}
       data={idtypes}
       selectedKey='idcard'
-      onItemSelected={onItemSelected}
+      onItemSelected={onIdTypeSelected}
       visible={idtypesVisible}
       onCancel={() => setIdtypesVisible(false)}
       title={formatMessage({ id: 'identity.chooseIdtype' })}
     />
   );
+  const nationModal = (
+    <ChoiceModal
+      closable={false}
+      data={nations}
+      selectedKey='idcard'
+      onItemSelected={onNationSelected}
+      visible={nationVisible}
+      onCancel={() => setNationVisible(false)}
+      title={formatMessage({ id: 'identity.chooseIdtype' })}
+    />
+  );
 
   return (
     <div className={styles.container}>
@@ -67,7 +89,7 @@ const IdentityPage: React.FC<DispatchProp & UserModelState & IdentityModelState>
           title="identity.nationality"
           message={user.nationality}
 //          preview={fromLangToText(lang)}
-//          onClick={() => setNationsVisible(true)}
+         onClick={() => setNationVisible(true)}
         />
         <AccountItem
           className="group"
@@ -99,6 +121,8 @@ const IdentityPage: React.FC<DispatchProp & UserModelState & IdentityModelState>
           onClick={() => dispatch({ type: 'identity/kyc1submit' })}
         >{formatMessage({ id: user.kyc1success ? 'identity.kyc1btn2' : 'identity.kyc1btn' })}</Button>
       </div>}
+      {idtypeModal}
+      {nationModal}
     </div>
   );
 };