重构帮助模块下所有组件对应代码

src/modules/help/feedback.js

+import React, { Component } from 'react';
+import { Col, Row, Icon } from 'antd';
+
+class Feedback extends Component { // eslint-disable-line react/prefer-stateless-function
+  state = {
+    content: '',
+    email: '',
+    phone: '',
+    buttonDisabled: false,
+  };
+
+  constructor(props, context) {
+    super(props, context);
+  }
+
+  handleContentChange(e) {
+    this.setState({ content: e.target.value });
+  }
+
+  handleEmailChange(e) {
+    this.setState({ email: e.target.value });
+  }
+
+  handlePhoneChange(e) {
+    this.setState({ phone: e.target.value });
+  }
+
+  handleSubmit() {
+    if(this.state.content == '') {
+      errorNotice('请填写反馈内容', 2);
+      return;
+    }
+
+    $phone = $.trim(this.state.phone);
+    $email = $.trim(this.state.email);
+
+    if($phone.length && $email.length) {
+      errorNotice('邮箱/电话必须填写至少一项', 2)
+      return false
+    }
+
+    if($phone && !/^1[3|4|5|7|8][0-9]\d{8}$/.test($phone) {
+      errorNotice('请输入正确的手机号码', 2)
+      return false
+    }
+
+    const pattern = /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))$/i
+    if ($email && !pattern.test($email)) {
+      errorNotice('请输入正确的邮箱', 2)
+      return false
+    }
+
+    this.setState({ buttonDisabled: true });
+
+    const promise = $.ajax({
+      type: 'POST',
+      url: '/api/feedbacks',
+      dataType: 'json',
+      data: {
+        content: this.state.content,
+        email: this.state.email,
+        phone: this.state.phone,
+      }
+    });
+
+    promise.done((res) => {
+      globalHandleResponse(res, () => {
+        successNotice('谢谢您的提交，我们会尽快处理~', 3, ()=> {
+          window.location.href = '/mobile/help/about';
+        }, ()=> {
+          this.setState({ buttonDisabled: false });
+        });
+      }, () => {
+        this.setState( { buttonDisabled: false });
+      });
+    }).fail((err) => {
+      this.setState( { buttonDisabled: false });
+    });
+  }
+
+  render() {
+    return (
+      <Row>
+        <Row className="title">
+          <Col span="22" offset="1">
+            <p>反馈问题</p>
+          </Col>
+        </Row>
+        <Row class="feedback">
+          <Col span="22" offset="1">
+            <textarea
+              placeholder="您可以将使用中的问题或对功能的需求反馈给我们~"
+              onChange= {this.handleContentChange} />
+          </Col>
+        </Row>
+        <Row className="info" type="flex" align="middle">
+          <Col span="5" offset="1">
+            <p>联系邮箱</p>
+          </Col>
+          <Col span="17">
+            <input type="text" value="" onChange={this.handleEmailChange} />
+          </Col>
+        </Row>
+        <Row className="info" type="flex" align="middle">
+          <Col span="5" offset="1">
+            <p>联系电话</p>
+          </Col>
+          <Col span="17">
+            <input type="text" value="" onChange={this.handlePhoneChange} />
+          </Col>
+        </Row>
+        <Row className="notice">
+          <p>注：联系方式填写任意一项即可</p>
+        </Row>
+        <Row className="submit">
+          <Col span="22" offset="1">
+            <button
+              onClick={this.handleSubmit}
+              className={this.state.buttonDisabled? 'ik-disabled': ''}>
+              立即提交</button>
+          </Col>
+        </Row>
+        <Row className="consult">
+          <p>
+            爱客进销存咨询电话
+            <a href="tel:400-867-1101">400-867-1101</a>
+          </p>
+        </Row>
+      </Row>
+    );
+  }
+
+}
+
+export default Feedback;

src/modules/help/guide_leader.js

+import React, { Component } from 'react';
+import { Col, Row, Icon } from 'antd';
+
+class GuideLeader extends Component { // eslint-disable-line react/prefer-stateless-function
+  state = {
+    imageHeader: this.props.image_header,
+    benefit_1: this.props['benefit_1'],
+    benefit_2: this.props['benefit_2'],
+    benefit_3: this.props['benefit_3'],
+    benefit_4: this.props['benefit_4'],
+    benefit_5: this.props['benefit_5'],
+  };
+
+  constructor(props, context) {
+    super(props, context);
+  }
+
+  renderBenefits() {
+    const items = ['benefit_1', 'benefit_2', 'benefit_3', 'benefit_4', 'benefit_5'];
+    const benefits = [];
+    items.reduce((prev, current) => {
+      prev.push(this.state[current]);
+      return prev;
+    }, benefits);
+
+    return (benefits.map((benefit, index) => {
+      let className = `benefit_${index + 1}`;
+      <div className={className}>
+        <img src={benefit} />
+      </div>
+    }));
+  }
+
+  render() {
+    return (
+      <Row>
+        <Row className="title">
+          <img src={this.state.imageHeader} />
+        </Row>
+        <Row className="info">
+          <p>爱客进销存，能和钉钉打通的进销存软件。轻松掌握库存、采购和销售数据，摆脱手工管理的糊涂账。</p>
+        </Row>
+        <Row className="body ik-margin-top-20">
+          {this.renderBenefits()}
+        </Row>
+        <div className="begin-use">
+          <a
+            href="https://t.dingtalk.com/invite/index?code=bd7028b731&inviterUid=DBEE9A0E6BCA4E4091E7FE61FE0552A6"
+            target="_blank">
+            加入钉钉交流群以获取更多</a>
+        </div>
+      </Row>
+    );
+  }
+}
+
+export default GuideLeader;

src/modules/help/guide_member.js

+import React, { Component } from 'react';
+import { Col, Row, Icon } from 'antd';
+
+class GuideMember extends Component { // eslint-disable-line react/prefer-stateless-function
+  state = {
+    imageHeader: this.props.image_header,
+    benefit_1: this.props['benefit_1'],
+    benefit_2: this.props['benefit_2'],
+    benefit_3: this.props['benefit_3'],
+  };
+
+  constructor(props, context) {
+    super(props, context);
+  }
+
+  renderBenefits() {
+    const items = ['benefit_1', 'benefit_2', 'benefit_3'];
+    const benefits = [];
+    items.reduce((prev, current) => {
+      prev.push(this.state[current]);
+      return prev;
+    }, benefits);
+
+    return (benefits.map((benefit, index) => {
+      let className = `benefit_${index + 1}`;
+      <div className={className}>
+        <img src={benefit} />
+      </div>
+    }));
+  }
+
+  render() {
+    return (
+      <Row>
+        <Row className="title">
+          <img src={this.state.imageHeader} />
+        </Row>
+        <Row className="info">
+          <p>爱客进销存，能和钉钉打通的进销存软件。手机端操作体验最好的进销存，只为帮你提升工作效率。</p>
+        </Row>
+        <Row className="body ik-margin-top-20">
+          {this.renderBenefits()}
+        </Row>
+        <div className="begin-use">
+          <a
+            href="https://t.dingtalk.com/invite/index?code=bd7028b731&inviterUid=DBEE9A0E6BCA4E4091E7FE61FE0552A6"
+            target="_blank">
+            加入钉钉交流群以获取更多</a>
+        </div>
+      </Row>
+    );
+  }
+}
+
+export default GuideLeader;

src/modules/help/open_vip.js

+import React, { Component } from 'react';
+import { Col, Row, Icon } from 'antd';
+
+class OpenVip extends Component { // eslint-disable-line react/prefer-stateless-function
+  state = {
+    phone: '',
+    type: '',
+    current_status: this.props.current_status,
+  };
+
+  constructor(props, context) {
+    super(props, context);
+  }
+
+  checkIsVip() {
+    return this.state.current_status;
+  }
+
+  handleOpenVip() {
+    let title = '升级VIP版';
+    let button = '立即升级VIP版';
+    let message = '请留下您的联系方式，我们会尽快帮您开通VIP版本！';
+    let type = 'vip';
+
+    if (type === 'trial') {
+      title = '申请试用VIP版';
+      button = '立即申请VIP试用';
+      message = '验证手机后即可立刻试用VIP版！';
+      type =  'trial';
+    } else if type === 'renew' {
+      title = '续费VIP版';
+      button = '立即续费';
+      message = '请留下您的联系方式，我们会尽快帮您开通续费VIP版本！';
+      type = 'renew';
+    }
+
+    this.setState( { type: type });
+
+    const $cover = $('<div id="guide-cover"></div>');
+    const $container = $('<div id="guide-container"></div>');
+    const body = `<div class="body">
+                    <h2>${title}</h2>
+                    <p class="ik-margin-top-5 ik-margin-bottom-5">${message}</p>
+                    <div class="ik-margin-bottom-5">
+                      <input class="training-input-2 vip-phone" placeholder="请输入正确的手机号">
+                    </div>
+                    <div class="ik-margin-bottom-5">
+                      <button class="training-btn training-btn-w50" id="get_verify_code">获取短信验证码</button>
+                    </div>
+                    <div class="ik-margin-bottom-15">
+                      <input class="training-input-2 validation-code" placeholder="请输入验证码">
+                    </div>
+                    <div>
+                      <button class="training-btn training-btn-2 open-vip-btn">${button}</button>
+                      </div>
+                    </div>`;
+
+    $container.append($("<div class='close''></div>"));
+    $container.append($(body));
+
+    const offset = {
+      top: ($(window).height() - $container.height()) / 2,
+      left: ($(window).width() - $container.width()) / 2
+    };
+    $container.css(offset);
+
+    const $topMargin = ($(window).height() - $container.height()) / 2;
+
+    $('body').on('focus', 'input.training-input-2', () => {
+      $container.css(top: 10)
+    });
+
+    $('body').on('blur', 'input.training-input-2', () => {
+      $container.css(top: $topMargin);
+    });
+
+    $container.find('.close').click(() => {
+      removeHelpGuide();
+    })
+
+  }
+
+  goToHelpIndex() {
+    window.location.href = '/mobile/help';
+  }
+
+  showOpenDialog() {
+    const $cover = $("<div id='guide-cover'></div>")
+    const $container = $("<div id='vip-container'></div>")
+    const body = `<div class='vip-body'>
+                    <h2 class='ik-text-center'>提示</h2>
+                    <p class='ik-margin-top-5 ik-margin-bottom-5 ik-margin-top-40 ik-font-size-16'>#{message}</p>
+                    <div class='vip-content'>
+                      <button class='training-btn training-btn-2 close-btn'>确定</button>
+                    <div>
+                  </div>`;
+
+    $container.append($(body));
+    $('body').append($cover);
+    $('body').append($container);
+
+    const offset = {
+      top: ($(window).height() - $container.height()) / 2,
+      left: ($(window).width() - $container.width()) / 2,
+    };
+
+    $container.css(offset);
+    $container.find('.vip-content').width($container.width() - 28);
+    $container.find('.close-btn').click((event) => {
+      this.goToHelpIndex();
+    })
+  }
+
+  openVip(e, phone, code) {
+    if(!/^1[3|4|5|7|8][0-9]\d{8}$/.test(phone)) {
+      errorNotice('请输入正确的手机号码', 2)
+      return false
+    }
+
+    if(!/^\d{6}$/.test(code)) {
+      errorNotice('请输入正确的验证码', 2)
+      return false
+    }
+
+    $('.open-vip-btn').addClass('ik-disabled');
+
+    const promise = $.ajax({
+      type: 'POST',
+      url: '/api/vips/open_vip',
+      dataType: 'json',
+      data: {
+        phone: phone,
+        code: code,
+        status: this.state.type,
+      }
+    });
+
+    promise.done((res) => {
+      if (res.code == 200) {
+        removeHelpGuide()
+        message = '';
+        if (this.state.type === 'trial') {
+          if (res.response_code === '400000') {
+            message = '所在的团队已经试用过一次VIP版本了，如希望再次试用，请联系爱客客服：400-867-1101';
+          }
+
+          if (res.response_code === '000000') {
+            message = "恭喜您，所在团队获得爱客进销存的VIP版试用机会，试用期15天（#{response.date}），立即使用吧！";
+          }
+        }
+
+        if (this.state.type === 'vip') {
+          message = '升级VIP版申请提交成功，我们会尽快和您联系！如有其它问题，请联系爱客客服：400-867-1101';
+        }
+
+        if (this.state.type === 'renew') {
+          message = '续费申请提交成功！如有其他问题，请联系爱客客服：400-867-1101';
+        }
+
+        this.showOpenDialog(message);
+      } else {
+        errorNotice(res.message);
+        $('.open-vip-btn').removeClass('ik-disabled');
+      }
+    }).fail((err) => {
+      errorNotice('提交失败');
+      $('.open-vip-btn').removeClass('ik-disabled');
+    });
+  }
+
+  timeCounter(e, text) {
+    const $this = $(e);
+    let count = 60;
+    $this.text(text + '('+ count.toString() + ')').addClass('ik-disabled');
+
+    const interval = setInterval(() => {
+      if (count--) {
+        $this.text(text + '('+ count.toString() + ')');
+      } else {
+        $this.text(text).removeClass('ik-disabled');
+        clearInterval(interval);
+      }
+    } , 1000);
+  }
+
+  getVerifyCode(e, phone) {
+    if (!/^1[3|4|5|7|8][0-9]\d{8}$/.test(phone)) {
+      errorNotice('请输入正确的手机号码', 2);
+      return false;
+    }
+
+    this.timeCounter($("#get_verify_code"), '获取短信验证码');
+
+    const promise = $.ajax({
+      type: 'POST',
+      url: '/api/vips/get_verify_code',
+      dataType: 'json',
+      data: {
+        phone: phone,
+      }
+    });
+
+    promise.done((res) => {
+      if (res.code === 200) {
+        successNotice(res.message);
+      } else {
+        errorNotice(res.message);
+      }
+    }).fail((err) => {
+      errorNotice('提交失败');
+    });
+  }
+
+  componentDidMount() {
+    const that = this;
+
+    $('body').on('click', '.open-vip-btn', () => {
+      const $phone = $('.vip-phone').val();
+      const $code = $('.validation-code').val();
+      that.openVip($(this), $phone, $code);
+    });
+
+    $('body').on('click', '#get_verify_code', () => {
+      that.getVerifyCode($(this), $('.vip-phone').val());
+    });
+  }
+
+  render() {
+    if (this.checkIsVip()) {
+      return (
+        <Row>
+          <IKButtonGroup position="bottom">
+            <IKButton IKButton, type="primary" onClick={ this.handleOpenVip.bind(this, 'renew')}>
+              续费
+            </IKButton>
+          </IKButtonGroup>
+        </Row>
+      );
+    } else {
+      return (
+        <Row>
+          <IKButtonGroup position="bottom">
+            <IKButton IKButton, type="primary" onClick={ this.handleOpenVip.bind(this, 'trial')}>
+              申请试用VIP版
+            </IKButton>
+            <IKButton IKButton, type="primary" onClick={ this.handleOpenVip.bind(this, 'vip')}>
+              升级VIP版
+            </IKButton>
+          </IKButtonGroup>
+        </Row>
+      );
+    }
+  }
+}
+
+export default OpenVip;

src/modules/help/push_setting.js

+import React, { Component } from 'react';
+import { Col, Row, Icon } from 'antd';
+
+class PushSetting extends Component { // eslint-disable-line react/prefer-stateless-function
+  state = {
+    status: this.props.status,
+    member_id: this.props.member_id,
+  };
+
+  constructor(props, context) {
+    super(props, context);
+  }
+
+  render() {
+    return (
+      <div>
+        <div className="help-item-blank"></div>
+        <div className="help-list">
+          <div className="help-item">
+            <div className="ant-row-flex ant-row-flex-space-between ant-row-flex-middle">
+              <div className="ant-col-21">
+                <div className="ik-font-size-18">日报推送</div>
+                <div>每天上午8点推送昨天的业务数据</div>
+              </div>
+              <div className="ant-col-3">
+                <Switch onChange={this.handleChange}, defaultChecked={this.state.status} />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default GuideLeader;