merge

front/.babelrc

@@ -11,17 +11,16 @@
     ],
     [
       "import",
-      {
-        "libraryName": "antd",
-        "style": true
-      }
-    ],
-    [
-      "import",
-      {
-        "libraryName": "antd-mobile",
-        "style": true
-      }
+      [
+        {
+          "libraryName": "antd",
+          "style": true
+        },
+        {
+          "libraryName": "antd-mobile",
+          "style": true
+        }
+      ]
     ]
   ],
   "presets": ["es2015", "stage-3", "react"]

front/package.json

@@ -116,6 +116,7 @@
     "eslint-config-standard-react": "^4.0.0",
     "eslint-import-resolver-alias": "^1.1.2",
     "eslint-loader": "^1.9.0",
+    "eslint-plugin-html": "^3.0.0",
     "eslint-plugin-import": "^2.14.0",
     "eslint-plugin-react": "^6.0.0",
     "express": "^4.14.0",

front/project/h5/app.js

@@ -1,6 +1,5 @@
 import React, { Component } from 'react';
-import { LocaleProvider } from 'antd';
-import zhCN from 'antd/lib/locale-provider/zh_CN';
+import { LocaleProvider } from 'antd-mobile';
 import './app.less';
 
 export default class extends Component {
@@ -12,6 +11,10 @@ export default class extends Component {
 
   render() {
     const { children } = this.props;
-    return <LocaleProvider locale={zhCN}>{children}</LocaleProvider>;
+    return (
+      <LocaleProvider>
+        <div id="full-page">{children}</div>
+      </LocaleProvider>
+    );
   }
 }

front/project/h5/app.less

@@ -17,7 +17,7 @@
 @theme_bg_color: #e9eff8;
 @line_color: #c7d0d9;
 @base_size: 14px;
-@base_bg_color: #f4f4f4;
+@base_bg_color: #fff;
 @base_select_color: #f4f7fd;
 @content_width: 1000px;
 

front/project/h5/components/Block/index.js

@@ -0,0 +1,43 @@
+import React, { Component } from 'react';
+import './index.less';
+import { Icon } from 'antd-mobile';
+
+export class Block extends Component {
+  render() {
+    const { className = '', children } = this.props;
+    return <div className={`g-block ${className}`}>{children}</div>;
+  }
+}
+export class TopBlock extends Component {
+  render() {
+    const { className = '', theme = 'default', children } = this.props;
+    return <div className={`g-top-block ${className} ${theme}`}>{children}</div>;
+  }
+}
+
+export class TagBlock extends Component {
+  render() {
+    const { className = '', theme = 'default', tag, children } = this.props;
+    return (
+      <div className={`g-tag-block ${className} ${theme}`}>
+        <div className="g-tag-block-tag">{tag}</div>
+        {children}
+      </div>
+    );
+  }
+}
+
+export class LinkBlock extends Component {
+  render() {
+    const { className = '', theme = 'default', title, sub } = this.props;
+    return (
+      <div className={`g-link-block ${className} ${theme}`}>
+        <div className="g-link-block-title">{title}</div>
+        <div className="g-link-block-sub">{sub}</div>
+        <div className="g-link-block-icon">
+          <Icon type="right" size="xxs" color="#fff" />
+        </div>
+      </div>
+    );
+  }
+}

front/project/h5/components/Block/index.less

@@ -0,0 +1,126 @@
+@import '../../app.less';
+
+.g-block {
+  border: 1px solid #E3E3E3;
+  border-radius: 4px;
+  margin-bottom: 10px;
+  overflow: hidden;
+  min-height: 100px;
+}
+
+.g-top-block {
+  border-radius: 4px;
+  background: #fff;
+  margin-bottom: 15px;
+  overflow: hidden;
+  min-height: 100px;
+  border: 1px solid #E3E3E3;
+}
+
+.g-top-block.default {
+  border-top: 5px solid #41A6F3;
+}
+
+.g-top-block.not {
+  border-top: 5px solid #7660A4;
+}
+
+.g-top-block.end {
+  border-top: 5px solid #A7A7B7;
+}
+
+.g-tag-block {
+  border-radius: 4px;
+  background: #fff;
+  margin-bottom: 10px;
+  overflow: hidden;
+  position: relative;
+  min-height: 100px;
+  border: 1px solid #E3E3E3;
+
+  .g-tag-block-tag {
+    height: 36px;
+    border-top-right-radius: 18px;
+    border-bottom-right-radius: 18px;
+    position: absolute;
+    top: -18px;
+    left: 0;
+    line-height: 20px;
+    padding-top: 16px;
+    padding-left: 10px;
+    padding-right: 16px;
+    color: #fff;
+  }
+}
+
+.g-tag-block.default {
+  .g-tag-block-tag {
+    background: #41A6F3;
+  }
+}
+
+.g--tag-block.not {
+  .g-tag-block-tag {
+    background: #7660A4;
+  }
+}
+
+.g-tag-block.end {
+  .g-tag-block-tag {
+    background: #A7A7B7;
+  }
+}
+
+.g-link-block {
+  border: 1px solid #E3E3E3;
+  border-radius: 4px;
+  margin-bottom: 10px;
+  overflow: hidden;
+  height: 60px;
+  line-height: 60px;
+  padding: 0 14px;
+  display: flex;
+
+  .g-link-block-title {
+    display: inline-block;
+    color: #303036;
+    font-size: 16px;
+    margin-right: 10px;
+  }
+
+  .g-link-block-sub {
+    display: inline-block;
+    color: #686872;
+    font-size: 12px;
+    text-align: center;
+    flex: 1;
+  }
+
+  .g-link-block-icon {
+    display: inline-block;
+    width: 15px;
+    height: 15px;
+    border-radius: 50%;
+    text-align: center;
+    margin-top: 22px;
+    line-height: 15px;
+  }
+}
+
+.g-link-block.default {
+  .g-link-block-icon {
+    background: #41A6F3;
+  }
+}
+
+.g-link-block.not {
+  .g-link-block-icon {
+    background: #7660A4;
+  }
+}
+
+.g-link-block.end {
+  .g-link-block-icon {
+    background: #A7A7B7;
+  }
+}

front/project/h5/components/Button/index.js

@@ -0,0 +1,32 @@
+import React, { Component } from 'react';
+import './index.less';
+import Touch from '@src/containers/Touch';
+
+export default class Button extends Component {
+  render() {
+    const {
+      className = '',
+      width,
+      margin,
+      size = 'basic',
+      theme = 'default',
+      children,
+      onClick,
+      radius,
+      block,
+    } = this.props;
+    return (
+      <div
+        className={`g-button-wrapper ${className} ${size} ${theme} ${radius ? 'radius' : ''} ${block ? 'block' : ''}`}
+      >
+        <Touch
+          style={{ width: width || 'auto', margin: margin ? `0 ${margin}px` : '' }}
+          className="g-button"
+          onClick={() => onClick && onClick()}
+        >
+          {children}
+        </Touch>
+      </div>
+    );
+  }
+}

front/project/h5/components/Button/index.less

@@ -0,0 +1,42 @@
+@import '../../app.less';
+
+.g-button-wrapper {
+  display: inline-block;
+
+  .g-button {
+    display: inline-block;
+    text-align: center;
+  }
+}
+
+.g-button-wrapper.block {
+  display: block;
+  text-align: center;
+
+  .g-button {
+    display: block;
+  }
+}
+
+.g-button-wrapper.basic {
+  .g-button {
+    line-height: 36px;
+  }
+}
+
+.g-button-wrapper.basic.radius {
+  .g-button {
+    border-radius: 18px;
+  }
+}
+
+.g-button-wrapper.default {
+  .g-button {
+    background: #41A6F3;
+    color: #fff;
+  }
+
+  .g-button.touch {
+    background: darken(#41A6F3, 10)
+  }
+}

front/project/h5/components/CheckBox/index.js

@@ -0,0 +1,14 @@
+import React, { Component } from 'react';
+import './index.less';
+import { Icon } from 'antd-mobile';
+
+export default class Checkbox extends Component {
+  render() {
+    const { className = '', checked, onClick } = this.props;
+    return (
+      <div className={`g-checkbox-wrapper ${className}`} onClick={() => onClick && onClick()}>
+        <Icon type="check-circle" color={checked ? '#41A6F3' : '#ECEDEE'} />
+      </div>
+    );
+  }
+}

front/project/h5/components/CheckBox/index.less

@@ -0,0 +1,10 @@
+@import '../../app.less';
+
+.g-checkbox-wrapper {
+  display: inline-block;
+
+  .g-checkbox {
+    display: inline-block;
+    text-align: center;
+  }
+}

front/project/h5/components/Icon/index.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Icon as AIcon } from 'antd';
+
+function Icon(props) {
+  const { type, onClick, color = '000' } = props;
+  return <AIcon type={type} style={{ color }} onClick={() => onClick && onClick()} />;
+}
+export default Icon;

front/project/h5/components/Icon/index.less

@@ -0,0 +1,18 @@
+@charset "utf-8";
+@import '../../style/core';
+.assets {
+  display: inline-block;
+  vertical-align: middle;
+  border: none;
+  max-width: 100%;
+  max-height: 100%;
+  margin-top: -3px;
+}
+
+.assets.hide {
+  opacity: 0;
+}
+
+.assets.top {
+  margin-top: 0;
+}

front/project/h5/components/Input/index.js

@@ -0,0 +1,90 @@
+import React, { Component } from 'react';
+import './index.less';
+import Icon from '../Icon';
+
+export default class Input extends Component {
+  render() {
+    const { className = '', onChange, placeholder, error, left, right } = this.props;
+    return (
+      <div className={`g-input-container ${className}`}>
+        <div className={`g-input-wrapper ${error ? 'error' : ''}`}>
+          {left && <div className="g-input-left">{left}</div>}
+          <input className="g-input" placeholder={placeholder} onChange={data => onChange && onChange(data)} />
+          {right && <div className="g-input-right">{right}</div>}
+        </div>
+        <div hidden={!error} className="g-input-error">
+          {error}
+        </div>
+      </div>
+    );
+  }
+}
+
+export class SelectInput extends Component {
+  render() {
+    const { className = '', onChange, placeholder, value, selectValue, onSelect } = this.props;
+    return (
+      <Input
+        className={className}
+        left={
+          <span className="g-input-left-select" onClick={() => onSelect && onSelect()}>
+            {selectValue}
+            <Icon type="down" />
+          </span>
+        }
+        value={value}
+        placeholder={placeholder}
+        onChange={data => onChange && onChange(data)}
+      />
+    );
+  }
+}
+
+export class VerificationInput extends Component {
+  constructor(props) {
+    super(props);
+    this.timeKey = null;
+    this.state = { loading: 0 };
+  }
+
+  componentWillUnmount() {
+    if (this.timeKey) clearTimeout(this.timeKey);
+  }
+
+  onSend() {
+    const { onSend, time = 60 } = this.props;
+    if (onSend) {
+      onSend();
+    }
+    this.setTime(time);
+  }
+
+  setTime(time) {
+    this.setState({ loading: time });
+    this.timeKey = setTimeout(() => {
+      this.setTime(time - 1);
+    }, 1000);
+  }
+
+  render() {
+    const { loading } = this.state;
+    const { className = '', onChange, placeholder, value } = this.props;
+    return (
+      <Input
+        className={className}
+        right={
+          loading <= 0 ? (
+            <span className="g-input-right-verification" onClick={() => this.onSend()}>
+              获取验证码
+            </span>
+          ) : (
+            <span className="g-input-right-verification-loading">等待{loading}秒</span>
+          )
+        }
+        value={value}
+        placeholder={placeholder}
+        onChange={data => onChange && onChange(data)}
+      />
+    );
+  }
+}

front/project/h5/components/Input/index.less

@@ -0,0 +1,58 @@
+@import '../../app.less';
+
+.g-input-container {
+
+  .g-input-wrapper {
+    display: flex;
+    background: #F7F7F7;
+    height: 44px;
+    padding: 8px 0;
+    line-height: 28px;
+    margin-bottom: 20px;
+
+    .g-input {
+      flex: 1;
+      background: transparent;
+      border: none;
+      padding: 10px;
+      height: 28px;
+    }
+
+    .g-input-left {
+      .g-input-left-select {
+        height: 28px;
+        border-right: 1px solid #eee;
+        padding-left: 10px;
+
+        i {
+          margin-left: 5px;
+          font-size: 10px;
+          margin-right: 10px;
+        }
+      }
+    }
+
+    .g-input-right {
+      padding: 0 10px;
+
+      .g-input-right-verification {
+        color: #41A6F3;
+      }
+
+      .g-input-right-verification.loading {
+        color: #A7A7B7;
+      }
+    }
+  }
+
+  .g-input-wrapper.error {
+    margin-bottom: 0;
+  }
+
+  .g-input-error {
+    color: #FF562E;
+    font-size: 10px;
+    height: 20px;
+    line-height: 20px;
+  }
+}

front/project/h5/components/Money/index.js

@@ -0,0 +1,14 @@
+import React, { Component } from 'react';
+import './index.less';
+import { formatMoney } from '@src/services/Tools';
+
+export default class Money extends Component {
+  render() {
+    const { className = '', size = 'basic', theme = 'default', value = '0' } = this.props;
+    return (
+      <div className={`g-money ${className} ${size} ${theme}`}>
+        ¥<span>{formatMoney(value)}</span>
+      </div>
+    );
+  }
+}

front/project/h5/components/Money/index.less

@@ -0,0 +1,30 @@
+@import '../../app.less';
+
+.g-money {
+  display: inline-block;
+  font-size: 10px;
+
+  span {
+    margin-left: 2px;
+  }
+}
+
+.g-money.default {
+  color: #F5B44A;
+}
+
+.g-money.sell {
+  color: #FF7130;
+}
+
+.g-money.basic {
+  span {
+    font-size: 14px;
+  }
+}
+
+.g-money.lager {
+  span {
+    font-size: 16px;
+  }
+}

front/project/h5/components/Radio/index.js

@@ -0,0 +1,72 @@
+import React, { Component } from 'react';
+import './index.less';
+
+export class SpecialRadio extends Component {
+  render() {
+    const { checked, children, onClick } = this.props;
+    return (
+      <div className={`g-special-radio-wrapper ${checked ? 'checked' : ''}`}>
+        <div className="g-special-radio" onClick={() => onClick && onClick()}>
+          {children}
+        </div>
+      </div>
+    );
+  }
+}
+
+export class SpecialRadioGroup extends Component {
+  onClickItem(key) {
+    const { onChange } = this.props;
+    if (onChange) onChange(key);
+  }
+
+  render() {
+    const { list = [], value } = this.props;
+    return (
+      <div className="g-special-radio-group">
+        {list.map(item => {
+          return (
+            <SpecialRadio checked={value === item.key} onClick={() => this.onClickItem(item.key)}>
+              {item.label}
+            </SpecialRadio>
+          );
+        })}
+      </div>
+    );
+  }
+}
+
+export default class Radio extends Component {
+  render() {
+    const { checked, children, onClick } = this.props;
+    return (
+      <div className={`g-radio-wrapper ${checked ? 'checked' : ''}`}>
+        <div className="g-radio" onClick={() => onClick && onClick()}>
+          {children}
+        </div>
+      </div>
+    );
+  }
+}
+
+export class RadioGroup extends Component {
+  onClickItem(key) {
+    const { onChange } = this.props;
+    if (onChange) onChange(key);
+  }
+
+  render() {
+    const { list = [], value } = this.props;
+    return (
+      <div className="g-radio-group">
+        {list.map(item => {
+          return (
+            <Radio checked={value === item.key} onClick={() => this.onClickItem(item.key)}>
+              {item.label}
+            </Radio>
+          );
+        })}
+      </div>
+    );
+  }
+}

front/project/h5/components/Radio/index.less

@@ -0,0 +1,64 @@
+@import '../../app.less';
+
+.g-special-radio-wrapper {
+  display: inline-block;
+
+  .g-special-radio {
+    display: inline-block;
+    text-align: center;
+    line-height: 28px;
+    background: #ECEDEE;
+    color: #686872;
+    padding: 0 10px;
+    min-width: 60px;
+    border-radius: 6px;
+    font-size: 12px;
+  }
+}
+
+.g-special-radio-wrapper.checked {
+
+  .g-special-radio {
+    background: #E7F5FD;
+    color: #40A8E2;
+  }
+}
+
+.g-special-radio-group {
+  margin: 0 -8.5px;
+
+  .g-special-radio-wrapper {
+    margin: 0 8.5px;
+  }
+}
+
+.g-radio-wrapper {
+  display: inline-block;
+
+  .g-radio {
+    display: inline-block;
+    text-align: center;
+    line-height: 28px;
+    background: #ECEDEE;
+    color: #686872;
+    padding: 0 18px;
+    border-radius: 14px;
+    font-size: 12px;
+  }
+}
+
+.g-radio-wrapper.checked {
+
+  .g-radio {
+    background: #E7F5FD;
+    color: #40A8E2;
+  }
+}
+
+.g-radio-group {
+  margin: 0 -8.5px;
+
+  .g-radio-wrapper {
+    margin: 0 8.5px;
+  }
+}

front/project/h5/components/Tag/index.js

@@ -0,0 +1,15 @@
+import React, { Component } from 'react';
+import './index.less';
+
+export default class Tag extends Component {
+  render() {
+    const { className = '', width, size = 'basic', theme = 'default', radius, children, onClick } = this.props;
+    return (
+      <div className={`g-tag-wrapper ${className} ${size} ${theme} ${radius ? 'radius' : ''}`}>
+        <div style={{ width: width || 'auto' }} className="g-tag" onClick={() => onClick && onClick()}>
+          {children}
+        </div>
+      </div>
+    );
+  }
+}

front/project/h5/components/Tag/index.less

@@ -0,0 +1,56 @@
+@import '../../app.less';
+
+.g-tag-wrapper {
+  display: inline-block;
+
+  .g-tag {
+    display: inline-block;
+    text-align: center;
+  }
+}
+
+.g-tag-wrapper.small {
+  .g-tag {
+    font-size: 10px;
+    line-height: 16px;
+    border-radius: 2px;
+    padding: 0 5px;
+  }
+}
+
+.g-tag-wrapper.small.radius {
+  .g-tag {
+    border-radius: 8px;
+  }
+}
+
+.g-tag-wrapper.basic {
+  .g-tag {
+    font-size: 12px;
+    line-height: 28px;
+    border-radius: 3px;
+    padding: 0 8px;
+  }
+}
+
+.g-tag-wrapper.basic.radius {
+  .g-tag {
+    border-radius: 14px;
+  }
+}
+
+.g-tag-wrapper.default {
+  .g-tag {
+    background: #41A6F3;
+    color: #fff;
+    border: 1px solid #41A6F3;
+  }
+}
+
+.g-tag-wrapper.border {
+  .g-tag {
+    background: #fff;
+    color: #40A8E2;
+    border: 1px solid #40A8E2;
+  }
+}

front/project/h5/routes/page/bind/index.js

@@ -0,0 +1,9 @@
+export default {
+  path: '/bind',
+  key: 'bind',
+  title: '绑定手机', // 绑定手机
+  needLogin: false,
+  component() {
+    return import('./page');
+  },
+};

front/project/h5/routes/page/bind/index.less

@@ -0,0 +1,5 @@
+@charset "utf-8";
+
+#bind {
+  padding: 15px;
+}

front/project/h5/routes/page/bind/page.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import './index.less';
+import Page from '@src/containers/Page';
+import Input, { SelectInput, VerificationInput } from '../../../components/Input';
+import Button from '../../../components/Button';
+import { SpecialRadioGroup, RadioGroup } from '../../../components/Radio';
+import Tag from '../../../components/Tag';
+import Checkbox from '../../../components/CheckBox';
+import Money from '../../../components/Money';
+import { Block, TopBlock, TagBlock, LinkBlock } from '../../../components/Block';
+
+export default class extends Page {
+  init() {}
+
+  renderView() {
+    return (
+      <div>
+        <Input placeholder="请输入手机号" error="该手机号已绑定其他账号，请更换手机号码。" onChange={() => {}} />
+        <SelectInput placeholder="请输入手机号" selectValue="+86" onSelect={() => {}} />
+        <VerificationInput placeholder="请输入验证码" onSend={() => {}} />
+        <Button margin={25} radius block>
+          绑定
+        </Button>
+        <SpecialRadioGroup list={[{ key: '1', label: 1 }, { key: '2', label: 2 }]} value="1" onChange={() => {}} />
+        <RadioGroup list={[{ key: '1', label: 1 }, { key: '2', label: 2 }]} value="1" onChange={() => {}} />
+        <Tag size="small">适合新手</Tag>
+        <Tag theme="border">OG20阅读刷题（7课时）</Tag>
+        <Tag size="small" theme="border" radius>
+          OG20阅读刷题（7课时）
+        </Tag>
+        <Checkbox checked />
+        <Checkbox />
+        <Money value="100" />
+        <Money value="100" size="lager" />
+        <Money value="100" size="lager" theme="sell" />
+        <Block />
+        <TopBlock />
+        <TagBlock tag="Yuwen" />
+        <LinkBlock title="新手辅导" sub="GMAT 全面了解，定制学习计划" />
+        <LinkBlock title="诊断辅导" sub="复习效果不理想，制定突破计划" theme="not" />
+      </div>
+    );
+  }
+}

front/project/h5/routes/page/index.js

@@ -1,4 +1,5 @@
 import home from './home';
 import login from './login';
+import bind from './bind';
 
-export default [home, login];
+export default [home, login, bind];

front/src/containers/Async.js

@@ -9,11 +9,14 @@ export default class extends Component {
 
   componentWillMount() {
     if (!this.state.C && this.props.component) {
-      this.props.component().then(({ default: component }) => {
-        this.setState({ C: this.props.isForm ? Form.create()(component) : component });
-      }).catch(err => {
-        console.log(err);
-      });
+      this.props
+        .component()
+        .then(({ default: component }) => {
+          this.setState({ C: this.props.isForm ? Form.create()(component) : component });
+        })
+        .catch(err => {
+          console.log('async error: ', err);
+        });
     }
   }
 

front/src/containers/Page.js

@@ -65,7 +65,7 @@ export default class extends Component {
     this.outPage();
   }
 
-  init() { }
+  init() {}
 
   initState() {
     return {};

front/src/containers/Touch.js

@@ -0,0 +1,31 @@
+import React, { Component } from 'react';
+
+export default class extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { touch: false };
+  }
+
+  onTouchEnter() {
+    this.setState({ touch: true });
+  }
+
+  onTouchLeave() {
+    this.setState({ touch: false });
+  }
+
+  render() {
+    const { className = '', children } = this.props;
+    const { touch } = this.state;
+    return (
+      <div
+        className={`${className} ${touch ? 'touch' : ''}`}
+        onTouchStart={() => this.onTouchEnter()}
+        onTouchCancel={() => this.onTouchLeave()}
+        onTouchEnd={() => this.onTouchLeave()}
+      >
+        {children}
+      </div>
+    );
+  }
+}

front/src/services/Tools.js

@@ -84,14 +84,14 @@ export function loadScript(url, callback) {
   script.async = true;
   script.defer = true;
   if (script.readyState) {
-    script.onreadystatechange = function () {
+    script.onreadystatechange = function() {
       if (script.readyState === 'loaded' || script.readyState === 'complete') {
         script.onreadystatechange = null;
         if (callback) callback();
       }
     };
   } else {
-    script.onload = function () {
+    script.onload = function() {
       if (callback) callback();
     };
   }
@@ -313,14 +313,17 @@ function _formatMoney(s, n) {
   for (let i = 0; i < l.length; i += 1) {
     t += l[i] + ((i + 1) % 3 === 0 && i + 1 !== l.length ? ',' : '');
   }
-  return `${t.split('').reverse().join('')}.${r} `;
+  return `${t
+    .split('')
+    .reverse()
+    .join('')}.${r} `;
 }
 
 export function formatMoney(price) {
   if (typeof price === 'object') {
     return `${price.symbol} ${_formatMoney(price.value, 2)} `;
   }
-  return `¥${_formatMoney(price, 2)} `;
+  return `${_formatMoney(price, 2)} `;
 }
 
 export function bindTags(targetList, field, render, def, notFound) {
@@ -455,7 +458,7 @@ export function randomList(length) {
 
 export function sortListWithOrder(target, order) {
   const list = [];
-  order.forEach((t) => {
+  order.forEach(t => {
     list.push(target[t]);
   });
   return list;