fix:换为formpage

config/router.ts

@@ -19,6 +19,10 @@ const router = [
         path: '/user/getBack',
         component: '@/pages/user/getBack'
       },
+      {
+        path: '/user/policy',
+        component: '@/pages/user/policy'
+      },
     ]
   }
 ]

package.json

@@ -24,7 +24,7 @@
     "@ant-design/icons": "^4.2.1",
     "@umijs/preset-react": "1.x",
     "@umijs/test": "^3.2.0",
-    "god": "0.0.24",
+    "god": "0.0.28",
     "lint-staged": "^10.0.7",
     "mobx": "^5.15.4",
     "mobx-react": "^6.2.2",

src/global/styles/global.less

@@ -27,9 +27,27 @@ h1, h2, h3, h4, h5, h6 {
   width: 1024px;
 }
 
+// 公共的title伪类竖线
+.commonPanelTitle {
+  padding-left: 8px;
+  position: relative;
+  &::before {
+    content: "";
+    display: inline-block;
+    position: absolute;
+    left: 0;
+    top: 50%;
+    margin-top: -.42667rem;
+    width: 2px;
+    height: .85333rem;
+    background-color: @primary-color;
+    box-shadow: 0 0.14933rem 0.256rem 0 rgba(97,144,232,.2);
+    border-radius: 1px;
+  }
+}
 
-// 通用 居中
-.@{prefix}-center {
-  .make-center(block);
-  .make-center(text);
-}
+// 通用class 居中
+// .@{prefix}-center {
+//   .make-center(block);
+//   .make-center(text);
+// }
\ No newline at end of file

src/global/styles/mixins/layout.less

@@ -51,18 +51,46 @@
 // margin带上下边距居中
 .make-center-space(@type: margin, @top: 0, @bottom: 0) {
   .make-center(@type);
-  margin-top: @top;
-  margin-bottom: @bottom;
+  margin-top: unit(@top, px);
+  margin-bottom: unit(@bottom, px);
 }
 
-// position定位
-.position-left-top(@left, @top) {
+// position绝对定位
+.ab-position(@_, @_, @num1: 0, @num2: 0){
   position: absolute;
-  left: @left;
-  top: @top;
 }
-.position-right-bottom(@right, @bottom) {
-  position: absolute;
-  right: @right;
-  bottom: @bottom;
+.ab-position(right, bottom, @num1: 0, @num2: 0){
+  right: @num1 * 1px;
+  bottom: @num2 * 1px;
+}
+.ab-position(right, top, @num1: 0, @num2: 0){
+  right: @num1 * 1px;
+  top: @num2 * 1px;
+}
+.ab-position(left, bottom, @num1: 0, @num2: 0){
+  left: @num1 * 1px;
+  bottom: @num2 * 1px;
+}
+.ab-position(left, top, @num1: 0, @num2: 0){
+  left: @num1 * 1px;
+  top: @num2 * 1px;;
+}
+
+
+// 高 行高等同并混入字体大小 颜色
+.mixinFontSize (@size) when (isnumber(@size)) {
+  font-size: unit(@size, px);
+}
+.mixinFontColor (@color) when (iscolor(@color)) {
+  color: @color;
+}
+.mixinBgColor(@bgcolor) when (iscolor(@bgcolor)) {
+  background-color: @bgcolor;
+}
+.font-height-color (@size: undefined, @height, @color: undefined, @bgcolor: undefined) {
+  .mixinFontSize(@size);
+  height: unit(@height, px);
+  line-height: unit(@height, px);
+  .mixinFontColor(@color);
+  .mixinBgColor(@bgcolor);
 }
\ No newline at end of file

src/pages/user/components/ScanLoginWrap.tsx

@@ -11,7 +11,7 @@ import styles from '../index.less'
 const ScanLoginWrap: React.FC = () => {
   const [qrCode, setQrCode] = useState('')
 
-  QRCode.toDataURL('数商云是知名云计算及数据服务提供商点播互动直播技术深度投入致力以数字化未来赋能各行业全面进入数据时代。').then((url:any) => {
+  QRCode.toDataURL('数商云是知名云计算及数据服务提供商').then((url:any) => {
       setQrCode(url)
       console.log(url)
     })

src/pages/user/getBack.tsx

@@ -8,97 +8,106 @@ import {
   ExclamationCircleFilled,
 } from '@ant-design/icons';
 import { Link, history } from 'umi'
+import { FormPage, RiskCheck } from 'god'
+import { IFormControllers, IFormButtonTypes } from 'god/dist/src/form-page'
 
 const GetBack: React.FC = () => {
   const [validButton, setValidButton] = useState(true)
 
   const finish = (value: any) => {
-    console.log(value)
+    console.log(value, 'finish')
   }
 
+  const handleSubmit = (value: any) => {
+    console.log(value, 'handleSubmit')
+  }
+
+  const getBcakForm: IFormControllers[] = [
+    {
+      type: 'Input',
+      name: 'phonemail',
+      span: 24,
+      inputProps: {
+        type: 'phonemail',
+        placeholder: '请输入您的邮箱/手机',
+      },
+      rules: [
+        { required: true, message: '邮箱/手机为必填项！' }
+      ]
+    },
+    {
+      span: 24,
+      // @ts-ignore
+      custom: () => <RiskCheck />
+    },
+    {
+      type: 'Verification',
+      name: 'smsCode',
+      span: 24,
+      inputProps: {
+  
+      }
+    },
+    {
+      type: 'Input',
+      name: 'password',
+      span: 24,
+      inputProps: {
+        type: 'password',
+        placeholder: '设置你的密码',
+      },
+      rules: [
+        { required: true, message: '密码为必填项！' },
+        { pattern:  /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,20}$/, message: '密码长度8-20个字符，必须包含大小写字母和数字！' }
+      ],
+    },
+    {
+      type: 'Input',
+      name: 'confirm',
+      span: 24,
+      dependencies: ['password'],
+      inputProps: {
+        type: 'password',
+        placeholder: '请再次输入密码',
+      },
+      rules: [
+        { required: true, message: '请再次确认密码！' },
+        ({ getFieldValue }) => ({
+          validator(rule, value) {
+            if (!value || getFieldValue('password') === value) {
+              return Promise.resolve();
+            }
+            return Promise.reject('两次的密码输入不一致！');
+          },
+        }),
+      ]
+    },
+  ]
+  const getBackButtons: IFormButtonTypes[] = [
+    {
+      text: '提交',
+      type: 'primary',
+      htmlType: 'submit',
+      block: true,
+      disabled: false,
+    }
+  ]
+
   return (
     <Row className={styles.getBackBox}>
       <h2>找回密码</h2>
       <div className={cx(styles.getBackForm, globalStyles.lingxiBusinessMarginContent)}>
-        <Form
-          onFinish={finish}
-          className={styles.formBox}
-        >
-          <Form.Item
-            name='phonemail'
-            rules={
-              [
-                {
-                  required: true,
-                  message: <><ExclamationCircleFilled style={{marginRight: 6}}/><span>请输入正确的手机或邮箱</span></>
-                }
-              ]
-            }
+        <div className={styles.formBox}>
+          <FormPage
+            renderFormLists={getBcakForm}
+            renderButtonLists={getBackButtons}
+            onSubmit={handleSubmit}
           >
-            <Input placeholder='请输入您的邮箱/手机' size='large'/>
-          </Form.Item>
-          { validButton && (<Form.Item
-              className={styles.loginVerBtn}
-            >
-              <Button ghost type='primary' block size='large'>点击进行验证</Button>
-            </Form.Item>)
-          }
-          <Form.Item>
-            <Row>
-              <Col span={15}>
-                <Form.Item
-                  name="captcha"
-                  noStyle
-                  rules={[{ required: true, message: <><ExclamationCircleFilled style={{marginRight: 6}}/><span>请输入验证码</span></> }]}
-                >
-                  <Input size='large' placeholder='输入验证码' />
-                </Form.Item>
-              </Col>
-              <Col offset={1} span={8}>
-                <Button type='default' size='large'>获取验证码</Button>
-              </Col>
+            <Row justify='center' align='middle'>
+              <Link to='/user/login' className={styles.back}>返回登录页</Link>
             </Row>
-          </Form.Item>
-          <Form.Item
-            name='password'
-            rules={
-              [
-                {
-                  required: true,
-                  message: <><ExclamationCircleFilled style={{marginRight: 6}}/><span>请设置你的新密码</span></>
-                }
-              ]
-            }
-          >
-            <Input.Password placeholder='请设置你的新密码' size='large'/>
-          </Form.Item>
-          <Form.Item
-            name="confirm"
-            dependencies={['password']}
-            rules={[
-              {
-                required: true,
-                message: <><ExclamationCircleFilled style={{marginRight: 6}}/><span>请再次输入密码</span></>,
-              },
-              ({ getFieldValue }) => ({
-                validator(rule, value) {
-                  if (!value || getFieldValue('password') === value) {
-                    return Promise.resolve();
-                  }
-                  return Promise.reject(<><ExclamationCircleFilled style={{marginRight: 6}}/><span>两次输入的密码不匹配</span></>);
-                },
-              }),
-            ]}
-          >
-            <Input.Password placeholder='请再次输入密码' size='large'/>
-          </Form.Item>
-          <Form.Item>
-            <Button type='primary' size='large' htmlType='submit' block>提交</Button>
-          </Form.Item>
-          <Form.Item>
-            <Link to='/user/login' className={styles.back}>返回登录页</Link>
-          </Form.Item>
-        </Form>
+          </FormPage>
+        </div>
       </div>
     </Row>
   )

src/pages/user/index.less

@@ -21,17 +21,13 @@
     margin-bottom: 32px;
   }
   .clickUsernameLogin{
-    position: absolute;
-    right: 8px;
-    top: 8px;
+    .ab-position(right, top, 8, 8);
     font-size:14px;
     color:rgba(107,119,140,1);
   }
   .clickScanLogin{
     .center-text();
-    position: absolute;
-    right: 8px;
-    top: 8px;
+    .ab-position(right, top, 8, 8);
     width: 32px;
     height: 32px;
     background: url("../../../mockStatic/qr_code1.png") center center no-repeat;
@@ -51,18 +47,14 @@
   }
 }
 .loginDesc {
-  //background: #9f9;
   background: url("../../../mockStatic/image_ad.png") center center no-repeat;
   background-size: cover;
   .adBox{
     color: @white;
     .make-center(text);
     & h2{
-      color: @white;
       margin-top: 20px;
-      height: 80px;
-      line-height: 80px;
-      font-size:32px;
+      .font-height-color(32, 80, @white);
       letter-spacing:2px;
     }
     & p{
@@ -92,11 +84,9 @@
   }
   .qrCodeImage{
     .make-center(text);
-    margin-top: 30px;
-    margin-bottom: 18px;
     width: 224px;
     height: 224px;
-    .make-center(margin);
+    .make-center-space(margin, 30, 18);
     &>img{
       .make-center(block);
       width: 100%;
@@ -107,7 +97,6 @@
 
 
 
-
 // register
 .register {
   // width: 100%;
@@ -136,26 +125,19 @@
 
 .formBoxStep1 {
   width: 320px;
-  .make-center-space(margin, 40px, 0);
-  // .form-box {
-  //   width: 340px;
-  //   margin: 40px auto 0;
-  // }
+  .make-center-space(margin, 40, 0);
 }
 
 .formBefore {
   width: 54px;
-  line-height: 40px;
-  height: 40px;
+  .font-height-color(undefined, 40, #42526E, #F4F5F7);
   .make-center(text);
-  background: #F4F5F7;
-  color: #42526E;
   border: 1px solid #DFE1E6;
   border-right: 0;
 }
 .formBoxStep2{
   width: 704px;
-  margin: 0px auto 0;
+  .make-center(margin);
   & h3{
     margin-top: 48px;
   }
@@ -164,7 +146,7 @@
   .make-center(block);
   width: 320px;
   height: 40px;
-  margin: 8px auto;
+  .make-center-space(margin, 8);
 }
 .identityRadio{
   display: flex;
@@ -173,7 +155,7 @@
   & label{
     width: 320px;
     height: 48px;
-    margin: 12px auto;
+    .make-center-space(margin, 12);
     vertical-align: middle;
     line-height: 48px;
   }
@@ -182,7 +164,7 @@
   display: flex;
   flex-wrap: wrap;
   width: 320px;
-  margin: 0 auto;
+  .make-center(margin);
   .make-center(text);
   & label{
     width: 148px;
@@ -197,22 +179,16 @@
 
 .formBoxStep3{
   width: 704px;
-  margin: 0px auto;
+  .make-center(margin);
   .make-center(text);
   & .description{
     margin-bottom: 40px;
     & p{
-      height:20px;
-      font-size:14px;
-      color:rgba(66,82,110,1);
-      line-height:20px;
+      .font-height-color(14, 20, #42526e);
     }
   }
   &.guid{
-    height:22px;
-    font-size:14px;
-    color:rgba(107,119,140,1);
-    line-height:22px;
+    .font-height-color(14, 22, #6b778c);
   }
   & h2{
     font-size:24px;
@@ -221,7 +197,7 @@
   }
   & img{
     display: block;
-    margin: 0 auto;
+    .make-center(margin);
   }
 }
 .agreement {
@@ -230,12 +206,11 @@
 
 .checkTypes {
   width: 702px;
-  margin: 0 auto;
+  .make-center(margin);
 }
 .margin320 {
   width: 320px;
-  margin-left: auto;
-  margin-right: auto;
+  .make-center(margin);
   display: block;
 }
 .default {
@@ -259,35 +234,53 @@
 
 .btnCenter {
   width: 320px;
-  margin-left: auto;
-  margin-right: auto;
+  .make-center(margin);
   display: block;
 }
 
-
-
 // get back password
 .getBackBox {
   &>h2 {
     width: 100%;
     .make-center(text);
-    height:120px;
-    line-height:120px;
-    font-size:24px;
-    font-weight:500;
-    color: #172B4D;
+    .font-height-color(24, 120, #172B4D);
   }
   .getBackForm{
     background-color: @white;
     .formBox{
       width: 320px;
-      .make-center-space(margin,40px,40px);
+      .make-center-space(margin,40,40);
       .back{
-        .make-center(block);
         width: 100%;
+        .make-center(block);
         .make-center(text);
         color: #6B778C;
       }
     }
   }
+}
+
+// policy
+.policyBox{
+  width: 100%;
+  // height: 100vh;
+  background-color: #fff;
+  &>h1{
+    .font-height-color(24, 96, #172B4D, #F4F5F7);
+    .make-center(text)
+  }
+  & article{
+    padding-bottom: 200px;
+    h4{
+      width:96px;
+      .font-height-color(16, 48, #172b4d);
+      font-weight:500;
+      margin-top: 24px;
+    }
+    p{
+      font-size:14px;
+      color:rgba(66,82,110,1);
+      line-height:22px;
+    }
+  }
 }
\ No newline at end of file

src/pages/user/policy.tsx

+import React from 'react'
+import cx from 'classnames'
+import styles from './index.less'
+import globalStyles from '@/global/styles/global.less'
+
+export interface PolicyProps {
+
+}
+
+const Policy:React.FC<PolicyProps> = (props) => {
+
+  return  <div className={styles.policyBox}>
+    <h1>隐私政策</h1>
+    <div className={globalStyles.lingxiBusinessMarginContent}>
+      <article>
+        <h4>一、权利归属</h4>
+        <main>
+          <p>1.1. 涂鸦网站的Logo、“涂鸦”、“涂鸦智能”、“tuya”等文字、图形及其组合，以及涂鸦网站的其他标识、徽记、涂鸦服务的名称等为涂鸦及其关联公司在中国和其他国家的注册商标。未经涂鸦书面授权，任何人不得以任何方式展示、使用或做其他处理（包括但不限于复制、传播、展示、镜像、上传、下载），也不得向他人表明您有权展示、使用或做其他处理。</p>
+          <p>1.2. 涂鸦网站所有的产品、服务、技术与所有程序（以下或简称“技术服务”）的知识产权均归属于涂鸦或归其权利人所有。</p>
+          <p>1.3. 除非涂鸦另行声明，涂鸦拥有涂鸦在网站内发布文档等信息（包括但不限于文字、图形、图片、照片、音频、视频、图标、色彩、版面设计、电子文档）的所有权利（包括但不限于版权、商标权、专利权、商业秘密和其他所有相关权利）。未经涂鸦许可，任何人不得擅自使用如上内容（包括但不限于通过程序或设备监视、复制、转播、展示、镜像、上传、下载涂鸦网站内的任何内容）。被授权浏览、复制、打印和传播属于涂鸦网站内信息内容的，该等内容都不得用于商业目的且所有信息内容及其任何部分的使用都必须包括此权利声明。</p>
+        </main>
+        <h4>二、责任限制</h4>
+        <main>
+          <p>2.1. 涂鸦网站的Logo、“涂鸦”、“涂鸦智能”、“tuya”等文字、图形及其组合，以及涂鸦网站的其他标识、徽记、涂鸦服务的名称等为涂鸦及其关联公司在中国和其他国家的注册商标。未经涂鸦书面授权，任何人不得以任何方式展示、使用或做其他处理（包括但不限于复制、传播、展示、镜像、上传、下载），也不得向他人表明您有权展示、使用或做其他处理。</p>
+          <p>2.2. 涂鸦网站所有的产品、服务、技术与所有程序（以下或简称“技术服务”）的知识产权均归属于涂鸦或归其权利人所有。</p>
+          <p>2.3. 除非涂鸦另行声明，涂鸦拥有涂鸦在网站内发布文档等信息（包括但不限于文字、图形、图片、照片、音频、视频、图标、色彩、版面设计、电子文档）的所有权利（包括但不限于版权、商标权、专利权、商业秘密和其他所有相关权利）。未经涂鸦许可，任何人不得擅自使用如上内容（包括但不限于通过程序或设备监视、复制、转播、展示、镜像、上传、下载涂鸦网站内的任何内容）。被授权浏览、复制、打印和传播属于涂鸦网站内信息内容的，该等内容都不得用于商业目的且所有信息内容及其任何部分的使用都必须包括此权利声明。</p>
+        </main>
+      </article>
+    </div>
+  </div>
+}
+
+Policy.defaultProps = {}
+
+export default Policy
\ No newline at end of file

src/services/member/API.d.ts

@@ -7,7 +7,7 @@ declare namespace MemberApi {
   }
 
   interface RegisterBasicModel {
-    id: number
+    id: number;
   }
 
   interface RegisterTypeDTO {