feat: 系统能力新增实名认证

config/routes/authConfigRoute.ts

@@ -131,6 +131,13 @@ const AuthConfigRoute: RouterChild = {
       component: '@/pages/accountSetting/editAccount',
       hideInMenu: true,
     },
+    // 实名认证
+    {
+      path: '/memberCenter/systemSetting/accountSetting/realname',
+      name: 'realname',
+      component: '@/pages/accountSetting/realname',
+      hideInMenu: true,
+    },
     //消息中心
     {
       path: '/memberCenter/systemSetting/message',

src/assets/securityIcons/realname.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48px" height="48px" viewBox="0 0 48 48" version="1.1">
+  <title>图标</title>
+  <g id="账户安全" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="A.1-账户安全设置" transform="translate(-272.000000, -512.000000)">
+      <g id="卡片" transform="translate(256.000000, 496.000000)">
+        <g id="图标" transform="translate(16.000000, 16.000000)">
+          <rect id="矩形" fill="#F5F6F7" x="0" y="0" width="48" height="48" rx="4"></rect>
+          <g id="图标" transform="translate(8.000000, 8.000000)" fill="#91959B">
+            <path d="M16,2.66666667 C19.6818983,2.66666667 22.6666667,5.651435 22.6666667,9.33333333 C22.6666667,11.2637064 21.8462216,13.0024542 20.5350137,14.2198944 C20.9101807,14.3731306 21.2758562,14.5448148 21.6309128,14.7338196 C17.7017664,15.2411887 14.6666667,18.5994849 14.6666667,22.6666667 C14.6666667,24.7165472 15.4376463,26.5863558 16.7054512,28.0019381 L5.59186294,28.0012161 C4.83381424,28.0022844 4.19411129,27.4376148 4.10107959,26.6852957 C4.0336932,26.1402311 4,25.689577 4,25.3333333 C4,20.3105494 7.085912,16.0085188 11.4652306,14.219747 C10.1537784,13.0024542 9.33333333,11.2637064 9.33333333,9.33333333 C9.33333333,5.651435 12.3181017,2.66666667 16,2.66666667 Z" id="🎨-Icon-Сolor"></path>
+            <path d="M26.8366534,20.9535193 L22.1354582,25.5883134 C21.9229748,25.8007968 21.5776892,25.8007968 21.3652058,25.5883134 L19.0677291,23.3439575 C18.749004,23.0385126 18.749004,22.5338645 19.0544489,22.2151394 C19.3598938,21.9096946 19.8512616,21.9096946 20.1567065,22.2018592 L21.5112882,23.5033201 C21.6440903,23.6361222 21.8565737,23.6361222 21.9893758,23.5033201 L25.7343958,19.8247012 C26.0398406,19.5192563 26.5444887,19.5192563 26.8499336,19.8247012 C27.1553785,20.1434263 27.1553785,20.6480744 26.8366534,20.9535193 M28.8021248,20.0903054 C28.4435591,19.2802125 27.9787517,18.5763612 27.3811421,17.9654714 C26.7835325,17.3545817 26.0796813,16.876494 25.2695883,16.5312085 C24.4594954,16.1726428 23.5962815,16 22.6799469,16 C21.750332,16 20.873838,16.1726428 20.063745,16.5312085 C19.2536521,16.8897742 18.5498008,17.3678619 17.9521912,17.9654714 C17.3545817,18.5763612 16.876494,19.2802125 16.5312085,20.0903054 C16.185923,20.9003984 16,21.7636122 16,22.6799469 C16,23.5962815 16.1726428,24.4594954 16.5312085,25.2695883 C16.8897742,26.0796813 17.3545817,26.7835325 17.9521912,27.3944223 C18.5498008,28.0053121 19.2536521,28.4701195 20.063745,28.815405 C20.873838,29.1606906 21.750332,29.3333333 22.6799469,29.3333333 C23.5962815,29.3333333 24.4594954,29.1606906 25.2695883,28.815405 C26.0796813,28.4701195 26.7835325,27.9920319 27.3811421,27.3944223 C27.9787517,26.7835325 28.4568393,26.0796813 28.8021248,25.2695883 C29.1606906,24.4594954 29.3333333,23.5962815 29.3333333,22.6799469 C29.3200531,21.7636122 29.1474104,20.9003984 28.8021248,20.0903054" id="🎨-Icon-Сolor"></path>
+          </g>
+          <rect id="矩形" x="0" y="0" width="48" height="48"></rect>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>

src/pages/accountSetting/components/TypeVerify/index.tsx

@@ -6,6 +6,7 @@ import { ReactComponent as EmailIcon } from '@/assets/securityIcons/email.svg';
 import { ReactComponent as TelephoneIcon } from '@/assets/securityIcons/telephone.svg';
 import { ReactComponent as PasswordIcon } from '@/assets/securityIcons/password.svg';
 import { ReactComponent as PaycodeIcon } from '@/assets/securityIcons/paycode.svg';
+import { ReactComponent as Realname } from '@/assets/securityIcons/realname.svg';
 import Icon from '@ant-design/icons';
 import { getIntl, useIntl} from 'umi'
 const intl = getIntl();
@@ -26,6 +27,10 @@ const TITLE_NAP = {
   'paycode': {
     title: `${intl.formatMessage({ id: 'accountSetting.payPsw'})}`,
     desc: `${intl.formatMessage({ id: 'accountSetting.pswStartToUpdate' })}`
+  },
+  'realname': {
+    title: '实名认证',
+    desc: '享受实名会员专属服务，提升个人账户安全信用度'
   }
 }
 
@@ -33,7 +38,8 @@ interface IProps {
   email: string,
   phone: string,
   paycode: number, // 0 | 1
-  type: "loginPwd" | "email" | "phone" | "paycode"
+  isAuth: number,  // 1 | 2
+  type: "loginPwd" | "email" | "phone" | "paycode" | "realname"
 }
 
 const Icons = {
@@ -41,12 +47,12 @@ const Icons = {
   "email": <Icon component={() => <PasswordIcon /> } />,
   "phone": <Icon component={() => <TelephoneIcon /> } />,
   "paycode": <Icon component={() => <PaycodeIcon /> } />,
-
+  "realname": <Icon component={() => <Realname /> } />,
 }
 
 const TypeVerify: React.FC<IProps> = (props) => {
   const intl = useIntl();
-  const { type, email, phone, paycode } = props;
+  const { type, email, phone, paycode, isAuth } = props;
   const titleRender = () => {
     return TITLE_NAP[type].title
   }
@@ -66,6 +72,8 @@ const TypeVerify: React.FC<IProps> = (props) => {
       title = intl.formatMessage({ id: 'accountSetting.setEmail' })
     } else if(type == 'paycode') {
       title = paycode == 0 ? intl.formatMessage({ id: 'accountSetting.setPayPsw' }) : intl.formatMessage({ id: 'accountSetting.resetPayPsw' })
+    } else if (type == 'realname') {
+      title = isAuth == 1 ? '未认证' : '重新认证'
     }
     return <Link to={`/memberCenter/systemSetting/accountSetting/${type}`}>{title}</Link>
   }

src/pages/accountSetting/index.less

@@ -6,4 +6,72 @@
   .item {
     margin: 0 24px 24px 0;
   }
-}
\ No newline at end of file
+}
+.r_title {
+  font-size: 14px;
+  color: #252D37;
+  font-weight: 500;
+  padding-bottom: 6px;
+  line-height: 16px;
+}
+.r_text {
+  color: #91959B;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
+}
+.r_body {
+  margin-top: 16px;
+  display: flex;
+  align-items: center;
+}
+.r_cardFile {
+  width: 156px;
+  display: flex;
+  flex-direction: column;
+  margin-right: 16px;
+}
+.r_fileLayout {
+  width: 100%;
+  height: 96px;
+  overflow: hidden;
+  background-color: #F5F6F7;
+  border-radius: 4px;
+}
+.r_imageBox {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+.r_clear {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  z-index: 999;
+}
+.r_clearicon {
+  font-size: 24px;
+}
+.r_fileText {
+  font-size: 12px;
+  text-align: center;
+  color: #91959B;
+  line-height: 16px;
+  padding: 4px 0px
+}
+.r_item {
+  display: flex;
+  margin-top: 16px;
+  align-items: center;
+}
+.r_lable {
+  width: 144px;
+  color: #91959B;
+}
+.r_value {
+  width: 600px;
+  padding: 8px;
+  border-radius: 4px;
+  color: #C8CACD;
+  background-color: #F5F6F7;
+}

src/pages/accountSetting/index.tsx

@@ -18,7 +18,7 @@ const AccountSetting = () => {
     }
     init()
   }, [])
-  const TYPES = ['loginPwd', 'email', 'phone', 'paycode']
+  const TYPES = ['loginPwd', 'email', 'phone', 'paycode', 'realname']
   return (
     <PageHeaderWrapper>
       <div >
@@ -32,6 +32,7 @@ const AccountSetting = () => {
                   phone={account.phone}
                   email={account.email}
                   paycode={account.hasPayPassword}
+                  isAuth={account.isAuth}
                 />
               </Col>
             )

src/pages/accountSetting/realname.tsx

+import React, { useEffect, useState } from 'react';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import ReutrnEle from '@/components/ReturnEle';
+import { useIntl, history } from 'umi';
+import { Button, Card, Image, message, Upload } from 'antd';
+import styles from './index.less'
+import data from '@/pages/transaction/common/uploadProps';
+import card_ortho from '@/assets/imgs/card_ortho.png'
+import card_inverse from '@/assets/imgs/card_inverse.png'
+import { postMemberSecuritySaveAuthInfo, getMemberSecurityGetUserInfo, postMemberSecurityUploadIdCard } from '@/services/MemberV2Api';
+import { CloseSquareFilled } from '@ant-design/icons';
+
+type InfoProps = {
+  /** 身份证正面(人头像) */
+  frontUrl?: string,
+  /** 身份证反面(国徽像) */
+  backUrl?: string,
+  /** 姓名 */
+  name?: string,
+  /** 身份证号码 */
+  cardNo?: string
+}
+
+const RealnameLayout = () => {
+  const intl = useIntl();
+  const [info, setInfo] = useState<InfoProps>()
+  const [term, setTerm] = useState<boolean>(false);
+  const [loading, setLoading] = useState<boolean>(false);
+  const [disabled, setDisabled] = useState<boolean>(true);
+
+  /** 人像面 */
+  const handleFrontUrl = ({ file }) => {
+    if (file.status !== "done") {
+      return
+    }
+    const front = file.response.data;
+    const data = {
+      ...info,
+      frontUrl: front,
+    }
+    setTerm(true)
+    setInfo(data);
+  }
+
+  /** 人像面 */
+  const handleBackUrl = ({ file }) => {
+    if (file.status !== "done") {
+      return
+    }
+    const back = file.response.data;
+    const data = {
+      ...info,
+      backUrl: back,
+    }
+    setTerm(true)
+    setInfo(data);
+  }
+
+  useEffect(() => {
+    if (info?.frontUrl && info?.backUrl && term) {
+      postMemberSecurityUploadIdCard({ frontUrl: info?.frontUrl, backUrl: info?.backUrl }).then((res) => {
+        if (res.code !== 1000) {
+          message.error(res.message)
+          return
+        }
+        const data = {
+          ...res.data,
+          frontUrl: info?.frontUrl,
+          backUrl: info?.backUrl,
+        }
+        setInfo(data);
+      })
+    }
+  }, [info?.frontUrl, info?.backUrl, term])
+
+  useEffect(() => {
+    getMemberSecurityGetUserInfo().then((res: any) => {
+      if (res.code !== 1000) {
+        message.error(res.message)
+        return
+      }
+      const { data } = res
+      setInfo(data)
+    })
+  }, [])
+
+  const handleSubmit = () => {
+    setLoading(true)
+    postMemberSecuritySaveAuthInfo({ ...info } as any).then((res: any) => {
+      if (res.code !== 1000) {
+        message.error(res.message)
+        setLoading(false)
+        return
+      }
+      history.goBack()
+    })
+  }
+
+  useEffect(() => {
+    if (info?.frontUrl && info?.backUrl && info?.cardNo && info?.name) {
+      setDisabled(false)
+    } else {
+      setDisabled(true)
+    }
+  }, [info?.frontUrl, info?.backUrl, info?.cardNo, info?.name])
+
+  const handleCircle = (name: string) => {
+    let data: InfoProps = {}
+    switch (name) {
+      case 'frontUrl':
+        data = {
+          frontUrl: '',
+          name: '',
+          cardNo: '',
+          backUrl: info?.backUrl,
+        }
+        setInfo(data)
+        break;
+      case 'backUrl':
+        data = {
+          frontUrl: info?.frontUrl,
+          name: '',
+          cardNo: '',
+          backUrl: ''
+        }
+        setInfo(data)
+        break;
+    }
+  }
+
+  return (
+    <PageHeaderWrapper
+      onBack={() => history.goBack()}
+      backIcon={<ReutrnEle description={intl.formatMessage({ id: 'accountSetting.back' })} />}
+      extra={<Button loading={loading} disabled={disabled} type='primary' onClick={handleSubmit}>提交</Button>}
+    >
+      <Card style={{ marginBottom: '16px' }}>
+        <div className={styles.r_title}>身份证照片</div>
+        <div className={styles.r_text}>请上传清晰完整的彩色原件照片，身份证各项信息可见和是必然。</div>
+        <div className={styles.r_body}>
+          <div className={styles.r_cardFile}>
+            <div className={styles.r_fileLayout}>
+              {info?.frontUrl ? (
+                <div className={styles.r_imageBox}>
+                  <div className={styles.r_clear} onClick={() => handleCircle('frontUrl')}>
+                    <CloseSquareFilled style={styles.r_clearicon} />
+                  </div>
+                  <Image src={info?.frontUrl} />
+                </div>
+              ) : (
+                <div className={styles.r_imageBox}>
+                  <Upload
+                    {...data}
+                    showUploadList={false}
+                    accept=".png,.jpg"
+                    onChange={handleFrontUrl}
+                  >
+                    <Image preview={false} src={card_ortho} />
+                  </Upload>
+                </div>
+              )}
+            </div>
+            <div className={styles.r_fileText}>人像面</div>
+          </div>
+          <div className={styles.r_cardFile}>
+            <div className={styles.r_fileLayout}>
+              {info?.backUrl ? (
+                <div className={styles.r_imageBox}>
+                  <div className={styles.r_clear} onClick={() => handleCircle('backUrl')}>
+                    <CloseSquareFilled />
+                  </div>
+                  <Image src={info?.backUrl} />
+                </div>
+              ) : (
+                <div className={styles.r_imageBox}>
+                  <Upload
+                    {...data}
+                    showUploadList={false}
+                    accept=".png,.jpg"
+                    onChange={handleBackUrl}
+                  >
+                    <Image preview={false} src={card_inverse} />
+                  </Upload>
+                </div>
+              )}
+            </div>
+            <div className={styles.r_fileText}>国徽面</div>
+          </div>
+        </div>
+      </Card>
+      <Card style={{ marginBottom: '16px' }}>
+        <div className={styles.r_title}>身份证信息</div>
+        <div className={styles.r_item}>
+          <div className={styles.r_lable}>姓名</div>
+          <div className={styles.r_value}>{info?.name || '上传照片自动获取'}</div>
+        </div>
+        <div className={styles.r_item}>
+          <div className={styles.r_lable}>身份证号码</div>
+          <div className={styles.r_value}>{info?.cardNo || '上传照片自动获取'}</div>
+        </div>
+      </Card>
+    </PageHeaderWrapper>
+  )
+}
+export default RealnameLayout