add node-qrcode

Author: chvin

package.json

@@ -58,6 +58,7 @@
     "classnames": "^2.2.5",
     "immutable": "^3.8.1",
     "prop-types": "^15.5.10",
+    "qrcode": "^1.2.0",
     "react": "^15.3.0",
     "react-dom": "^15.3.0",
     "react-redux": "^4.4.5",

src/components/guide/index.js

@@ -1,17 +1,30 @@
 import React from 'react';
+import QRCode from 'qrcode';
 import style from './index.less';
 import { transform, i18n, lan } from '../../unit/const';
 import { isMobile } from '../../unit';
 
+
 export default class Guide extends React.Component {
   constructor() {
     super();
     this.state = {
       isMobile: isMobile(),
+      QRCode: '',
     };
   }
-  shouldComponentUpdate() {
-    return false;
+  componentWillMount() {
+    if (this.state.isMobile) {
+      return;
+    }
+    QRCode.toDataURL(location.href, { margin: 1 })
+        .then(dataUrl => this.setState({ QRCode: dataUrl }));
+  }
+  shouldComponentUpdate(state) {
+    if (state.QRCode === this.state.QRCode) {
+      return false;
+    }
+    return true;
   }
   render() {
     if (this.state.isMobile) {
@@ -57,13 +70,15 @@ export default class Guide extends React.Component {
           </p>
           <div className={style.space}>SPACE</div>
         </div>
-        <div className={`${style.guide} ${style.qr}`}>
-          <img
-            src={`//game.weixin.qq.com/cgi-bin/comm/qrcode?s=10&m=1&d=${location.href}`}
-            alt={i18n.QRCode[lan]}
-            title={i18n.QRNotice[lan]}
-          />
-        </div>
+        { this.state.QRCode !== '' ? (
+          <div className={`${style.guide} ${style.qr}`}>
+            <img
+              src={this.state.QRCode}
+              alt={i18n.QRCode[lan]}
+            />
+            <span>{ i18n.QRNotice[lan] }</span>
+          </div>
+        ) : null }
       </div>
     );
   }

src/components/guide/index.less

@@ -41,15 +41,23 @@
   &.qr{
     left: auto;
     top: 5%;
-    width: 190px;
+    width: 150px;
     height:190px;
     opacity: .45;
-    padding:0 0 40px 40px;
     text-align: right;
+    cursor: none;
+    span{
+      display: none;
+      text-align: center;
+      line-height: 40px;
+    }
     &:hover{
       img{
-        width: 100%;
-        height: 100%;
+        width: 150px;
+        height: 150px;
+      }
+      span{
+        display: block;
       }
     }
     img{