Merge branch 'dev' of http://10.0.0.22:3000/lingxi/lingxi-business-paltform into dev

config/routes/tranactionRoute.ts

@@ -36,6 +36,18 @@ const TranactionRoute = {
           path: '/memberCenter/tranactionAbility/electronicContracts/template',
           name: 'template',
           component: '@/pages/transaction/electronicContracts/template/index',
+        },
+        {
+          path: '/memberCenter/tranactionAbility/electronicContracts/enterpriseCertified',
+          name: 'enterpriseCertified',
+          hideInMenu: true,
+          component: '@/pages/transaction/electronicContracts/enterpriseCertified/index',
+        },
+        {
+          path: '/memberCenter/tranactionAbility/electronicContracts/personalCertified',
+          name: 'personalCertified',
+          hideInMenu: true,
+          component: '@/pages/transaction/electronicContracts/personalCertified/index',
         }
       ]
     },

src/locales/zh-CN/menu.ts

 /*
  * @Author: LeeJiancong
  * @Date: 2020-07-13 14:08:50
- * @LastEditors: XieZhiXiong
- * @LastEditTime: 2020-09-22 11:37:58
+ * @LastEditors: jiaxin
+ * @LastEditTime: 2020-09-22 16:35:11
  */
 
 export default {
@@ -116,6 +116,8 @@ export default {
   //电子合同
   'menu.tranactionAbility.electronicContracts': '电子合同',
   'menu.tranactionAbility.electronicContracts.apply': '电子签章申请',
+  'menu.tranactionAbility.electronicContracts.enterpriseCertified': '企业信息核验',
+  'menu.tranactionAbility.electronicContracts.personalCertified': '个人信息核验',
   'menu.tranactionAbility.electronicContracts.classSearch': '合同模板参数查询',
   'menu.tranactionAbility.electronicContracts.template': '合同模板',
   //进销存

src/pages/transaction/electronicContracts/apply/index.less

+.apply_info {
+
+  .apply_status {
+    padding: 24px;
+    border-radius: 8px;
+    margin-bottom: 24px;
+    display: flex;
+    align-items: center;
+
+    .status {
+      color: #FFFFFF;
+      font-size: 16px;
+      width: 195px;
+    }
+
+    .apply_status_btn {
+      &>button {
+        &:first-child {
+          margin-right: 24px;
+        }
+      }
+    }
+
+  }
+
+  &>.apply_item {
+    padding: 24px;
+    border-radius: 8px;
+    background-color: #FFF;
+
+    :global {
+      .ant-descriptions-item-label {
+        color: #909399;
+        width: 200px;
+      }
+    }
+  }
+}
\ No newline at end of file

src/pages/transaction/electronicContracts/apply/index.tsx

 import React from 'react'
-import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import styles from './index.less'
+import { Link } from 'umi';
+import { PageHeaderWrapper } from '@ant-design/pro-layout'
+import { ExclamationCircleFilled, CheckCircleFilled, ClockCircleFilled, CloseCircleFilled } from '@ant-design/icons';
+import { Descriptions, Button } from 'antd';
+import div from './../../../editor/configs/componentConfigs/HTML/div';
 
 const Apply = () => {
+
+  /**头部状态的颜色值 */
+  const applyStaus = [{
+    status: 1,
+    name: '未申请',
+    icon: <ExclamationCircleFilled />,
+    color: '#6B778C',
+  }, {
+    status: 2,
+    name: '申请通过',
+    icon: <CheckCircleFilled />,
+    color: '#00B37A',
+  }, {
+    status: 3,
+    name: '申请中',
+    icon: <ClockCircleFilled />,
+    color: '#4279DF',
+  }, {
+    status: 4,
+    name: '申请不通过',
+    icon: <CloseCircleFilled />,
+    color: '#D32F2F',
+  }]
+
+  const num = 1
+
   return (
     <PageHeaderWrapper>
-      <div>123</div>
+      <div className={styles.apply_info}>
+        {
+          applyStaus.map(item => (
+            <div key={item.status}>
+              {
+                num === item.status &&
+                  <div className={styles.apply_status} style={{ backgroundColor: item.color }}>
+                    <div>
+                      <div className={styles.status} style={{ opacity: .6, fontSize: '12px' }}>申请状态</div>
+                      <div className={styles.status}>{item.icon} {item.name}</div>
+                    </div>
+                    <div className={styles.apply_status_btn}>
+                      <Link to={`/memberCenter/tranactionAbility/electronicContracts/enterpriseCertified`}><Button size='middle' style={{ color: item.color }}>{item.status === 1 ? '立即申请' : '重新申请'}</Button></Link>
+                      {item.status === 3 && <Button size='middle' ghost>查看进度</Button>}
+                    </div>
+                  </div>
+              }
+            </div>
+          ))
+        }
+
+        <div className={styles.apply_item}>
+          <Descriptions title="申请信息" column={1}>
+            <Descriptions.Item label="公司名称">温州市隆昌皮业有限公司</Descriptions.Item>
+            <Descriptions.Item label="统一社会信用代码">4324324325425435</Descriptions.Item>
+            <Descriptions.Item label="法人姓名">张三</Descriptions.Item>
+            <Descriptions.Item label="法人手机号">+86 185 2929 6758</Descriptions.Item>
+            <Descriptions.Item label="法人身份证号">321023 19891205 3746</Descriptions.Item>
+            <Descriptions.Item label="认证方式">-</Descriptions.Item>
+            <Descriptions.Item label="验证方式">-</Descriptions.Item>
+          </Descriptions>
+        </div>
+      </div>
     </PageHeaderWrapper>
-    
+
   )
 }
 

src/pages/transaction/electronicContracts/classSearch/index.tsx

 import React from 'react'
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import { Card, Row, Col, Input, Button } from 'antd';
+import { ColumnType } from 'antd/lib/table/interface';
+import { StandardTable } from 'god';
 
 const ClassSearch = () => {
+
+  //表头
+  const columns: ColumnType<any>[] = [{
+    title: 'ID',
+    dataIndex: 'id',
+    width: '128px'
+  }, {
+    title: '参数名称',
+    dataIndex: 'name',
+  }, {
+    title: '参数描述',
+    dataIndex: 'describe',
+  }, {
+    title: '状态',
+    dataIndex: 'status',
+  }]
+
   return (
     <PageHeaderWrapper>
-      <div>123</div>
+      <Card>
+        <StandardTable
+          tableProps={{
+            rowKey: 'id',
+          }}
+          columns={columns}
+          controlRender={
+            <Row>
+              <Col span={12}>
+                <Input.Search
+                  style={{ width: '256px',marginRight: '24px',marginBottom: '24px' }}
+                  placeholder='搜索'
+                />
+                <Button>重置</Button>
+              </Col>
+            </Row>
+          }
+        />
+      </Card>
     </PageHeaderWrapper>
-    
   )
 }
 

src/pages/transaction/electronicContracts/components/alipay/index.tsx

+import React from 'react'
+import { Result } from 'antd'
+import styles from '../index.less'
+
+const Alipay = () => {
+  return(
+    <div className={styles.info_wrap}>
+      <Result
+        title="请使用法人手机号注册的支付宝账号登录支付"
+        extra={[
+          <div className={styles.info_wran}>并使用支付宝首页的扫一扫功能</div>,
+          <div className={styles.info_wran}>扫描下面的二维码，然后按照支付宝APP的</div>,
+          <div className={styles.alipay_qrcode} />,
+          <div><AlipayCircleOutlined />支付宝扫一扫</div>
+        ]}
+      />
+    </div>
+  )
+}
+
+export default Alipay

src/pages/transaction/electronicContracts/components/corporate/index.tsx

+import React from 'react'
+import { Button, Row, Col } from 'antd'
+import styles from '../index.less'
+import cx from 'classnames'
+import { QuestionCircleOutlined } from '@ant-design/icons';
+
+const Corporate = () => {
+  return(
+    <div className={styles.info_wrap}>
+      <div className={styles.info_item}>
+        <div className={styles.info_item_con}>
+          <div className={styles.item_con}>
+            <div className={styles.item_label}>认证方式 <QuestionCircleOutlined style={{color: '#C0C4CC'}} /></div>
+            <div className={styles.item_control}>
+              <Row className={styles.card_checkbox}>
+                <Col className={cx(styles.card_checkbox_item, styles.active)}>支付宝验证</Col>
+                <Col className={cx(styles.card_checkbox_item, styles.active)}>手机验证码验证</Col>
+              </Row>
+            </div>
+          </div>
+          <div className={styles.item_con}>
+            <div className={styles.item_label}></div>
+            <div className={styles.item_control}>
+              <Button type='primary'>下一步</Button>
+              <Button>上一步</Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Corporate

src/pages/transaction/electronicContracts/components/enterpriseInfoCheck/index.tsx

+import React from 'react'
+import styles from '../index.less'
+import { Button, Row, Col } from 'antd'
+import cx from 'classnames'
+import { QuestionCircleOutlined } from '@ant-design/icons';
+
+const EnterpriseInfoCheck = () => {
+  return (
+    <div className={styles.info_wrap}>
+      <div className={styles.info_item}>
+        <div className={styles.info_item_title}>企业信息核验</div>
+        <div className={styles.info_item_con}>
+          <div className={styles.item_con}>
+            <div className={styles.item_label}>公司名称：</div>
+            <div className={styles.item_control}>温州市隆昌皮业有限公司</div>
+          </div>
+          <div className={styles.item_con}>
+            <div className={styles.item_label}>统一社会信用代码：</div>
+            <div className={styles.item_control}>4324324325425435</div>
+          </div>
+        </div>
+      </div>
+      <div className={styles.info_item}>
+        <div className={styles.info_item_title}>法人信息核验</div>
+        <div className={styles.info_item_con}>
+          <div className={styles.item_con}>
+            <div className={styles.item_label}>法人姓名：</div>
+            <div className={styles.item_control}>张三</div>
+          </div>
+          <div className={styles.item_con}>
+            <div className={styles.item_label}>法人手机号：</div>
+            <div className={styles.item_control}>+86 185 2929 6758</div>
+          </div>
+          <div className={styles.item_con}>
+            <div className={styles.item_label}>法人身份证号：</div>
+            <div className={styles.item_control}>321023 19891205 3746</div>
+          </div>
+        </div>
+      </div>
+      <div className={cx(styles.info_item, styles.info_dashed)}>
+        <div className={styles.info_item_con}>
+          <div className={styles.item_con}>
+            <div className={styles.item_label}>认证方式 <QuestionCircleOutlined style={{color: '#C0C4CC'}} /></div>
+            <div className={styles.item_control}>
+              <Row className={styles.card_checkbox}>
+                <Col className={cx(styles.card_checkbox_item, styles.active)}>法人认证</Col>
+                <Col className={cx(styles.card_checkbox_item, styles.active)}>经办人认证</Col>
+              </Row>
+            </div>
+          </div>
+          <div className={styles.item_con}>
+            <div className={styles.item_label}></div>
+            <div className={styles.item_control}>
+              <Button type='primary'>下一步</Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default EnterpriseInfoCheck
\ No newline at end of file

src/pages/transaction/electronicContracts/components/index.less

+.info_wrap {
+  padding: 24px;
+  min-height: 668px;
+  border-top: #EEF0F3 solid 1px;
+  background-color: #FFFFFF;
+
+  :global {
+    .ant-result-icon {
+      display: none;
+    }
+  }
+
+  .info_wran {
+    color: #909399;
+    font-size: 14px;
+    padding-bottom: 8px;
+  }
+
+  .alipay_qrcode {
+    width: 240px;
+    height: 240px;
+    margin: 24px auto !important;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid #EBECF0;
+    box-sizing: border-box;
+  }
+
+  .info_item {
+    .info_item_title {
+      position: relative;
+      padding: 12px 0px 12px 8px;
+      font-size: 14px;
+      color: #606266;
+      border-bottom: 1px solid #EEF0F3;
+
+      &::after {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        margin: auto;
+        height: 16px;
+        width: 2px;
+        background-color: #00B37A;
+      }
+    }
+
+    .info_item_con {
+      padding: 12px 0px;
+
+      .item_con {
+        padding: 12px 0px;
+        display: flex;
+        font-size: 14px;
+
+        .item_label {
+          width: 176px;
+          color: #909399;
+        }
+
+        .item_control {
+          color: #303133;
+
+          button {
+            &:last-child {
+              margin-left: 24px;
+            }
+          }
+        }
+      }
+    }
+
+    .card_checkbox {
+      display: flex;
+      flex-wrap: wrap;
+    }
+
+    .card_checkbox_item {
+      min-width: 112px;
+      height: 32px;
+      margin-right: 32px;
+      margin-bottom: 16px;
+      border: 1px solid rgba(235, 236, 240, 1);
+      padding: 0 16px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+    }
+
+    .card_checkbox_item.active {
+      border-color: #00B382;
+      position: relative;
+      color: #00B382;
+    }
+
+    .card_checkbox_item.active::after {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      right: 0;
+      width: 0;
+      height: 0;
+      border: 6px solid transparent;
+      border-right: 6px solid #00B382;
+      border-bottom: 6px solid #00B382;
+    }
+  }
+
+  .info_dashed {
+    position: relative;
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      margin: auto;
+      width: 96%;
+      border-top: 1px dashed #EBECF0;
+    }
+  }
+
+}

src/pages/transaction/electronicContracts/components/steps/index.less

+.step_info {
+  padding: 24px 128px;
+  background-color: #FAFBFC;
+
+  :global {
+    .ant-steps-item-finish {
+      .ant-steps-item-icon {
+        background-color: #00B37A;
+
+        .ant-steps-icon {
+          color: #FFFFFF;
+        }
+      }
+    }
+
+    .ant-steps-item-wait {
+      .ant-steps-item-icon {
+        background-color: #DFE1E6;
+        border-color: #DCDCDC;
+
+        .ant-steps-icon {
+          color: #606266;
+        }
+      }
+    }
+  }
+}
\ No newline at end of file

src/pages/transaction/electronicContracts/components/steps/index.tsx

+import React from 'react'
+import styles from './index.less'
+import { Steps } from 'antd'
+const { Step } = Steps;
+
+const StepComponents = () => {
+  return (
+    <div className={styles.step_info}>
+      <Steps size="small" current={0}>
+        <Step title="企业信息核验" />
+        <Step title="经办人/法人认证" />
+        <Step title="企业认证" />
+      </Steps>
+    </div>
+  )
+}
+
+export default StepComponents
\ No newline at end of file

src/pages/transaction/electronicContracts/enterpriseCertified/index.tsx

+import React from 'react'
+import { history } from 'umi'
+import ReutrnEle from '@/components/ReturnEle';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import StepComponents from '../components/steps'
+import EnterpriseInfoCheck from '../components/enterpriseInfoCheck'
+import Corporate from '../components/Corporate'
+import Alipay from '../components/Alipay'
+
+const EnterpriseCertified = () => {
+  return (
+    <PageHeaderWrapper
+      onBack={() => history.goBack()}
+      backIcon={<ReutrnEle description="返回" />}
+    >
+      <StepComponents />
+      <EnterpriseInfoCheck />
+      <Corporate />
+      <Alipay />
+    </PageHeaderWrapper>
+  )
+}
+
+export default EnterpriseCertified

src/pages/transaction/electronicContracts/personalCertified/index.tsx

+import React from 'react'
+import { history } from 'umi'
+import ReutrnEle from '@/components/ReturnEle';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+
+const PersonalCertified = () => {
+  return (
+    <PageHeaderWrapper
+      onBack={() => history.goBack()}
+      backIcon={<ReutrnEle description="返回" />}
+    >
+      <div>123</div>
+    </PageHeaderWrapper>
+  )
+}
+
+export default PersonalCertified
\ No newline at end of file

src/pages/transaction/electronicContracts/template/index.tsx

 import React from 'react'
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import { Card, Row, Col, Input, Button } from 'antd';
+import { ColumnType } from 'antd/lib/table/interface';
+import { StandardTable } from 'god';
+import EyePreview from '@/components/EyePreview';
+import { PlusOutlined } from '@ant-design/icons';
 
 const Template = () => {
+  //表头
+  const columns: ColumnType<any>[] = [{
+    title: 'ID',
+    dataIndex: 'id',
+    width: '128px'
+  }, {
+    title: '合同模板名称',
+    dataIndex: 'name',
+    render: (text: any, record: any) => {
+      return (
+        <EyePreview
+          url={`/memberCenter/tranactionAbility/stockSellStorage/addWarehouse?id=${record.id}&preview=1`}
+        >
+          名称
+        </EyePreview>
+      );
+    },
+  }, {
+    title: '版本号',
+    dataIndex: 'version',
+  }, {
+    title: '模板说明',
+    dataIndex: 'description',
+  }, {
+    title: '状态',
+    dataIndex: 'status',
+    sorter: (a, b) => a.state - b.state,
+  }, {
+    title: '操作',
+    dataIndex: 'action',
+  }]
+
   return (
     <PageHeaderWrapper>
-      <div>123</div>
+      <Card>
+        <StandardTable
+          tableProps={{
+            rowKey: 'id',
+          }}
+          columns={columns}
+          controlRender={
+            <Row justify='space-between'>
+              <Col>
+              <Button type='primary'><PlusOutlined />新增</Button>
+              </Col>
+              <Col>
+                <Input.Search
+                  style={{ width: '256px',marginRight: '24px',marginBottom: '24px' }}
+                  placeholder='搜索'
+                />
+                <Button>重置</Button>
+              </Col>
+            </Row>
+          }
+        />
+      </Card>
     </PageHeaderWrapper>
-    
+
   )
 }