增加帮助中心下 pc system about feedback 对应页面

src/containers/App/index.js

@@ -22,7 +22,7 @@ export default class App extends PureComponent { // eslint-disable-line react/pr
 
   render() {
     return (
-      <div>
+      <div className="container-fluid">
         {React.Children.toArray(this.props.children)}
       </div>
     );

src/containers/Help/about.js

+/*
+ * AboutPage
+ *
+ * This is the first thing users see of our App, at the '/' route
+ *
+ * NOTE: while this component should technically be a stateless functional
+ * component (SFC), hot reloading does not currently support SFCs. If hot
+ * reloading is not a necessity for you then you can refactor it and remove
+ * the linting exception.
+ */
+
+import React, { Component } from 'react';
+import { Link } from 'react-router'
+
+export default class AboutPage extends Component { // eslint-disable-line react/prefer-stateless-function
+  state = {
+    displayNname: '进销存',
+    dingtalkChat: 'https://t.dingtalk.com/invite/index?code=bd7028b731&inviterUid=1ACC42E02F87B8A199372A3FA1525DE6',
+  };
+
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <div id="mobile_help_about">
+        <div className="help-list">
+          <div className="help-item">
+            <div className="ant-row ant_main">
+              <div className="ant-col-4">
+                <img className="img-responsive" src="/assets/images/org-logo.png" />
+              </div>
+              <div className="ant-col-20">
+                <div className="ik-padding-left-10 help-head-text">
+                  <p>{this.state.displayNname}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="help-item help-item-narrow">常见问题
+          <Link to="/help/" className="pull-right ik-theme-color">更多</Link>
+        </div>
+        <div className="help-list">
+          <div className="help-item">
+            <Link to="/help/pc" className="ik-theme-color ik-display-block">
+              如何打开pc端
+              <i className="anticon anticon-right pull-right ik-margin-top-5" />
+            </Link>
+          </div>
+        </div>
+        <div className="help-item help-item-narrow">
+          如有疑问请联系爱客客服（每天8:00-20:00
+        </div>
+        <div className="help-list">
+          <div className="help-item">
+            <p>
+              400客服电话
+              <a href="tel:400-867-1101" className="pull-right ik-theme-color">
+                400-867-1101
+              </a>
+            </p>
+            <div className="help-item">
+              <p>
+                <Link to="help/feedback" className="title ik-display-block">
+                  反馈问题
+                  <i className="anticon anticon-right pull-right ik-margin-top-5" />
+                </Link>
+              </p>
+            </div>
+            <div className="help-item">
+              <p>
+                钉钉交流群
+                <a href={this.state.dingtalkChat} className="pull-right ik-theme-color">
+                  点击加群
+                </a>
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}

src/containers/Help/feedback.js

+/*
+ * HomePage
+ *
+ * This is the first thing users see of our App, at the '/' route
+ *
+ * NOTE: while this component should technically be a stateless functional
+ * component (SFC), hot reloading does not currently support SFCs. If hot
+ * reloading is not a necessity for you then you can refactor it and remove
+ * the linting exception.
+ */
+
+import React, { Component } from 'react';
+import Feedback from 'modules/help/feedback';
+
+export default class FeedbackPage extends Component { // eslint-disable-line react/prefer-stateless-function
+  render() {
+    return (
+      <div id="mobile_help_feedback">
+        <Feedback />
+      </div>
+    );
+  }
+}

src/containers/Help/pc.js

+/*
+ * PcPage
+ *
+ * This is the first thing users see of our App, at the '/' route
+ *
+ * NOTE: while this component should technically be a stateless functional
+ * component (SFC), hot reloading does not currently support SFCs. If hot
+ * reloading is not a necessity for you then you can refactor it and remove
+ * the linting exception.
+ */
+
+import React, { Component } from 'react';
+
+export default class PcPage extends Component { // eslint-disable-line react/prefer-stateless-function
+  render() {
+    return (
+      <div id="mobile_help_pc" className="ik-margin-horizontal-10">
+        <h1 className="ik-margin-top-15">如何打开PC端</h1>
+        <h2 className="ik-margin-top-15">方法1：使用钉钉打开PC端页面</h2>
+        <p>
+          在PC钉钉上点击“工作”，选择“
+          <span className="ik-theme-color">爱客进销存</span>
+          ”点击即可自动进入PC端登录界面，且不用再次登录。
+        </p>
+        <div className="ik-margin-vertical-5">
+          <img className="img-responsive" src="/assets/images/help/open_01.png" />
+        </div>
+        <h2 className="ik-margin-top-15">方法2：输入网址打开PC端页面</h2>
+        <p>
+          在浏览器中输入爱客进销存PC地址 www.ikjxc.com 进入登录页面，用手机钉钉扫描登录页面的二维码，即可打开爱客进销存PC端。
+        </p>
+        <div className="ik-margin-vertical-5">
+          <img className="img-responsive" src="/assets/images/help/open_02.png" />
+        </div>
+      </div>
+    );
+  }
+}

src/containers/Help/system.js

+/*
+ * SystemPage
+ *
+ * This is the first thing users see of our App, at the '/' route
+ *
+ * NOTE: while this component should technically be a stateless functional
+ * component (SFC), hot reloading does not currently support SFCs. If hot
+ * reloading is not a necessity for you then you can refactor it and remove
+ * the linting exception.
+ */
+
+import React, { Component } from 'react';
+
+export default class SystemPage extends Component { // eslint-disable-line react/prefer-stateless-function
+
+  render() {
+    return (
+      <div className="ik-margin-horizontal-10">
+        <h1 className="ik-margin-top-15">如何配置系统</h1>
+        <h2 className="ik-margin-top-15">1.调整人员角色和权限</h2>
+        <p>
+          在PC端设置页面，选择 “
+          <span className="ik-theme-color">部门和用户设置</span>
+          ”, 选择用户，点击编辑，为其设置 “角色”。
+        </p>
+        <div className="ik-margin-vertical-5">
+          <img className="img-responsive" src="/assets/images/help/users.png" />
+        </div>
+        <h2 className="ik-margin-top-15">2.仓库管理设置</h2>
+        <p>
+          在PC端设置页面，选择“
+          <span className="ik-theme-color">仓库管理 </span>
+          ”，在仓库管理页面选择新增仓库，创建一个仓库。
+        </p>
+        <div className="ik-margin-vertical-5">
+          <img className="img-responsive" src="/assets/images/help/warehouse.png" />
+        </div>
+        <h2 className="ik-margin-top-15">3.自动编号配置</h2>
+        <p>
+          在PC端设置页面，选择“
+          <span className="ik-theme-color"> 自动编号配置 </span>
+          ”，在配置页面勾选需要自动生成编号的单据，并设置其格式，然后保存即可。
+        </p>
+        <h2 className="ik-margin-vertical-5">4.小数点位数设置</h2>
+        <p>
+          在PC端设置页面，选择“
+          <span className="ik-theme-color"> 小数点位数</span>
+          ”，在配置页面设置小数点尾数，默认小数点都保留2位。
+        </p>
+        <div className="ik-margin-vertical-5">
+          <img className="img-responsive" src="/assets/images/help/decimal_settings.png" />
+        </div>
+        <h2 className="ik-margin-top-15">5.自定义审批设置</h2>
+        <p>
+          在PC端设置页面，选择“
+          <span className="ik-theme-color">自定义审批</span>
+          ”，在配置页面勾选需要开启自定义审批的单据。
+        </p>
+        <div className="ik-margin-vertical-5">
+          <img className="img-responsive" src="/assets/images/help/approval.png"/>
+        </div>
+      </div>
+    );
+  }
+}

src/index.html

@@ -13,7 +13,7 @@
   integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
   crossorigin="anonymous"></script>
   </head>
-  <body id="mobile_dashboard_index">
+  <body>
     <div id="app"></div>
   </body>
 </html>

src/modules/help/feedback.js

@@ -39,7 +39,7 @@ class Feedback extends Component { // eslint-disable-line react/prefer-stateless
       return false
     }
 
-    if($phone && !/^1[3|4|5|7|8][0-9]\d{8}$/.test($phone) {
+    if($phone && !/^1[3|4|5|7|8][0-9]\d{8}$/.test($phone)) {
       errorNotice('请输入正确的手机号码', 2)
       return false
     }
@@ -86,7 +86,7 @@ class Feedback extends Component { // eslint-disable-line react/prefer-stateless
             <p>反馈问题</p>
           </Col>
         </Row>
-        <Row class="feedback">
+        <Row className="feedback">
           <Col span="22" offset="1">
             <textarea
               placeholder="您可以将使用中的问题或对功能的需求反馈给我们~"

src/routes.js

@@ -34,5 +34,56 @@ export default function createRoutes(store) {
         importModules.catch(errorLoading);
       },
     },
+    {
+      path: '/help/pc',
+      name: 'helpPc',
+      getComponent(nextState, cb) {
+        const importModules = Promise.all([
+          System.import('containers/help/pc'),
+        ]);
+
+        const renderRoute = loadModule(cb);
+
+        importModules.then(([component]) => {
+          renderRoute(component);
+        });
+
+        importModules.catch(errorLoading);
+      },
+    },
+    {
+      path: '/help/about',
+      name: 'helpAbout',
+      getComponent(nextState, cb) {
+        const importModules = Promise.all([
+          System.import('containers/help/about'),
+        ]);
+
+        const renderRoute = loadModule(cb);
+
+        importModules.then(([component]) => {
+          renderRoute(component);
+        });
+
+        importModules.catch(errorLoading);
+      },
+    },
+    {
+      path: '/help/feedback',
+      name: 'feedbackAbout',
+      getComponent(nextState, cb) {
+        const importModules = Promise.all([
+          System.import('containers/help/feedback'),
+        ]);
+
+        const renderRoute = loadModule(cb);
+
+        importModules.then(([component]) => {
+          renderRoute(component);
+        });
+
+        importModules.catch(errorLoading);
+      },
+    }
   ];
 }

src/styles/common.scss

@@ -192,3 +192,7 @@ input::-webkit-inner-spin-button {
     }
   }
 }
+
+.img-responsive {
+  max-width: 100%;
+}