Merge remote-tracking branch 'origin/feature/newQrcode' into release/6.1

+'use script';
+
+const headerModel = require('../../../doraemon/models/header'); // 头部model
+const newQrcodeModel = require('../models/newQrcode');
+
+exports.index = (req, res, next) => {
+    let responseData = {
+        module: 'home',
+        page: 'new-qrcode',
+        pageHeader: headerModel.setNav({
+            navTitle: '我的二维码'
+        }),
+        title: '我的二维码',
+        width750: true,
+        localCss: true
+    };
+
+    let params = {
+        uid: req.user.uid
+    };
+
+    req.ctx(newQrcodeModel).index(params).then(result => {
+        res.render('new-qrcode', Object.assign(responseData, result));
+    }).catch(next);
+};
+
+exports.reload = (req, res, next) => {
+    let params = {
+        uid: req.user.uid
+    };
+
+    req.ctx(newQrcodeModel).getToken(params).then(result => {
+        res.json(result);
+    }).catch(next);
+};

+'use strict';
+
+const _ = require('lodash');
+const camelCase = global.yoho.camelCase;
+const api = global.yoho.API;
+const crypto = global.yoho.crypto;
+const PASSWORD = 'yoho9646yoho9646';
+
+class newQrcode extends global.yoho.BaseModel {
+    constructor(ctx) {
+        super(ctx);
+    }
+
+    userInfo(params) {
+        if (params.uid) {
+            return api.get('', {
+                method: 'app.passport.profile',
+                uid: params.uid
+            }, {
+                code: 200
+            });
+        } else {
+            return Promise.resolve({});
+        }
+    }
+
+    getCode(params) {
+        if (params.uid) {
+            return api.get('', {
+                method: 'app.invitecode.my',
+                uid: params.uid
+            }, {
+                code: 200
+            });
+        } else {
+            return Promise.resolve({});
+        }
+    }
+
+    getToken(params) {
+        let uidNum = parseInt(params.uid, 10);
+        let token = uidNum ? crypto.encryption(PASSWORD, uidNum + '') : '';
+        let uid = '';
+
+        try {
+            uid = crypto.decrypt(PASSWORD, decodeURIComponent(token));
+            uid = parseInt(uid, 10);
+        } catch (e) {
+            uid = token;
+        }
+
+        return api.get('', {
+            method: 'app.twoDimen.getCode',
+            uid: uid,
+        }).then(result => {
+            return (result && result.data && result.data.code) || '';
+        });
+    }
+
+    index(params) {
+        return api.all([
+            this.userInfo(params),
+            this.getCode(params),
+            this.getToken(params)
+        ]).then(result => {
+            let resu = {};
+
+            if (_.get(result, '[0]data')) {
+                resu = camelCase(result[0].data);
+            }
+            if (_.get(result, '[1]data')) {
+                resu.trendWord = result[1].data.trendWord;
+            }
+            if (_.get(result, '[2]')) {
+                resu.token = result[2];
+            }
+            return resu;
+        });
+    }
+}
+
+module.exports = newQrcode;

@@ -31,8 +31,8 @@ const gradeNew = require(`${cRoot}/grade-new`);
 const refund = require(`${cRoot}/refund`);
 const refund = require(`${cRoot}/refund`);
 const exchange = require(`${cRoot}/exchange`);
 const exchange = require(`${cRoot}/exchange`);
 const tideCommand = require(`${cRoot}/tide-command`);
 const tideCommand = require(`${cRoot}/tide-command`);
-
 const newHome = require(`${cRoot}/new-home`);
 const newHome = require(`${cRoot}/new-home`);
+const newQrcode = require(`${cRoot}/newQrcode`);
 
 
 // const myDetail = require(`${cRoot}/myDetail);
 // const myDetail = require(`${cRoot}/myDetail);
 
 
@@ -179,5 +179,8 @@ router.get('/return/exchange/refreshDelivery', auth, exchange.refreshDelivery);
 
 
 router.get('/tide-command', auth, tideCommand.tideCommand); // 设置潮流口令
 router.get('/tide-command', auth, tideCommand.tideCommand); // 设置潮流口令
 
 
-router.get('/', newHome.index); // 设置潮流口令
+router.get('/', newHome.index);
+router.get('/newQrcode', auth, newQrcode.index); // 新二维码页面
+router.get('/newQrcode/reload', auth, newQrcode.reload); // 刷新二维码页面
+
 module.exports = router;
 module.exports = router;

+<div class="new-qrcode-c">
+    <div class="qrcode-body">
+        <div class="toper">
+            <div class="user-pic">
+                <div class="avatar user-avatar"{{#if headIco}} style="background-image:url({{image2 headIco mode=2 h=100 w=100 q=90}})"{{/if}}></div>
+                <div class="level level-{{vipInfo/curLevel}}"></div>
+            </div>
+            <div class="user-info">
+                <div class="name eps">{{nickname}}</div>
+                <div class="passcode">
+                    <div class="dot">#&nbsp;</div>
+                    <div class="auto-scroll">
+                        <div class="scroll-words go-scroll">{{trendWord}}</div>
+                    </div>
+                    <div class="dot">&nbsp;#</div>
+                </div>
+            </div>
+        </div>
+        <div class="qrcode-pic" data-qr="{{token}}">
+            <div class="qrcode-avatar user-avatar"{{#if headIco}} style="background-image:url({{image2 headIco mode=2 h=100 w=100 q=90}})"{{/if}}></div>
+        </div>
+        <div class="invite hide">
+            <span>邀请好友扫一扫完成注册，现金券赚不停</span>
+            <span class="iconfont">&#xe639;</span>
+        </div>
+    </div>
+    <div class="reload"><span class="iconfont">&#xe733;</span>点击刷新二维码</div>
+</div>

@@ -351,6 +351,9 @@ t9.5 -10.5t21.5 -4h37h67h81h80h64h36q23 0 34 12t2 38q-5 13 -9.5 30.5t-9.5 34.5q-
     <glyph glyph-name="yoho-coin" unicode="&#59186;" d="M512 153.6h-40.96a195.87072 195.87072 0 0 0-45.4656 5.34528l14.29504 59.76064a134.5536 134.5536 0 0 1 31.15008-3.66592h40.96c73.40032 0 133.12 59.71968 133.12 133.12V592.40448h61.44V348.16c0.02048-107.27424-87.26528-194.56-194.53952-194.56zM512 296.96c-107.27424 0-194.56 87.28576-194.56 194.56v101.56032h61.44v-101.56032c0-73.40032 59.71968-133.12 133.12-133.12s133.12 59.71968 133.12 133.12v103.1168h61.44v-103.1168c0-107.27424-87.28576-194.56-194.56-194.56zM512-51.2c-242.7904 0-440.32 197.5296-440.32 440.32S269.2096 829.44 512 829.44s440.32-197.5296 440.32-440.32-197.5296-440.32-440.32-440.32z m0 819.2c-208.91648 0-378.88-169.96352-378.88-378.88s169.96352-378.88 378.88-378.88 378.88 169.96352 378.88 378.88S720.91648 768 512 768z"  horiz-adv-x="1024" />
     <glyph glyph-name="yoho-coin" unicode="&#59186;" d="M512 153.6h-40.96a195.87072 195.87072 0 0 0-45.4656 5.34528l14.29504 59.76064a134.5536 134.5536 0 0 1 31.15008-3.66592h40.96c73.40032 0 133.12 59.71968 133.12 133.12V592.40448h61.44V348.16c0.02048-107.27424-87.26528-194.56-194.53952-194.56zM512 296.96c-107.27424 0-194.56 87.28576-194.56 194.56v101.56032h61.44v-101.56032c0-73.40032 59.71968-133.12 133.12-133.12s133.12 59.71968 133.12 133.12v103.1168h61.44v-103.1168c0-107.27424-87.28576-194.56-194.56-194.56zM512-51.2c-242.7904 0-440.32 197.5296-440.32 440.32S269.2096 829.44 512 829.44s440.32-197.5296 440.32-440.32-197.5296-440.32-440.32-440.32z m0 819.2c-208.91648 0-378.88-169.96352-378.88-378.88s169.96352-378.88 378.88-378.88 378.88 169.96352 378.88 378.88S720.91648 768 512 768z"  horiz-adv-x="1024" />
 
 
     
     
+    <glyph glyph-name="sx" unicode="&#59187;" d="M810.72128 293.49888a40.89856 40.89856 0 0 1-55.27552-17.28512 237.42464 237.42464 0 0 0-81.08032-89.04704 237.6704 237.6704 0 0 0-239.06304-11.07968 235.7248 235.7248 0 0 0-116.36736 139.34592 235.58144 235.58144 0 0 0 16.24064 180.81792 235.6224 235.6224 0 0 0 139.34592 116.34688 235.4176 235.4176 0 0 0 180.81792-16.26112l1.04448-0.59392-0.94208-0.16384a40.98048 40.98048 0 0 1 13.47584-80.81408l99.75808 16.65024a40.96 40.96 0 0 1 33.66912 47.14496l-16.62976 99.75808a40.96 40.96 0 0 1-80.81408-13.47584l0.49152-2.90816c-4.01408 2.33472-7.92576 4.8128-12.06272 6.98368a316.94848 316.94848 0 0 1-243.24096 21.87264 316.86656 316.86656 0 0 1-187.45344-156.54912C181.02272 378.368 241.43872 185.1392 397.312 103.5264a318.42304 318.42304 0 0 1 147.92704-36.31104c60.60032 0 121.05728 17.16224 173.62944 51.15904a319.13984 319.13984 0 0 1 109.1584 119.84896 40.96 40.96 0 0 1-17.3056 55.27552z"  horiz-adv-x="1024" />
+
+    
 
 
 
 
   </font>
   </font>

+import 'home/new-qrcode.page.css';
+import $ from 'yoho-jquery';
+import Page from 'yoho-page';
+import 'yoho-jquery-qrcode';
+
+class NewQrcode extends Page {
+    constructor() {
+        super();
+
+        this.selector = {
+            $qrcodePic: $('.qrcode-pic'),
+            $autoScroll: $('.auto-scroll'),
+            $scrollWords: $('.scroll-words'),
+            $reload: $('.reload')
+        };
+
+        this.qrText = '';
+        this.auto = '';
+        this.init();
+    }
+
+    init() {
+        this.drawQrcode();
+        this.autoScroll();
+        this.bindEvents();
+        this.autoReload();
+    }
+
+    bindEvents() {
+        this.selector.$reload.on('click', this.reload.bind(this));
+    }
+
+    autoReload() {
+        this.auto = setInterval(() => {
+            this.reload();
+        }, 110 * 1000); // 110秒自动刷新一次
+    }
+
+    reload() {
+        this.ajax({
+            url: '/home/newQrcode/reload',
+        }).then(result => {
+            if (result) {
+                this.qrText = result;
+                this.selector.$qrcodePic.find('canvas').remove();
+                this.drawQrcode();
+                clearInterval(this.auto);
+                this.autoReload();
+            }
+        }).catch(error => {
+            console.error(error);
+        });
+    }
+
+    drawQrcode() {
+        this.selector.$qrcodePic.qrcode({
+            render: 'canvas', // 显示方式，canvas，image和div
+            text: this.qrText || this.selector.$qrcodePic.data('qr'), // 二维码的内容
+            size: parseInt(420, 10), // 大小
+            ecLevel: 'H', // 纠错级别
+        });
+    }
+
+    autoScroll() {
+        let containerWidth = this.selector.$autoScroll.width();
+        let innerWidth = this.selector.$scrollWords.width();
+
+        if (innerWidth <= containerWidth) {
+            this.selector.$scrollWords.removeClass('go-scroll');
+        }
+    }
+}
+
+$(() => {
+    new NewQrcode();
+});

+body,
+html {
+    background-image: linear-gradient(#131313, #3e3e3e);
+    background-repeat: no-repeat;
+    min-height: 100%;
+    background-color: #3e3e3e;
+}
+
+.new-qrcode-c {
+    width: 750px;
+    overflow: hidden;
+    position: relative;
+
+    .eps {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .user-avatar {
+        background-image: resolve("home/index/user-avatar.png");
+    }
+
+    .qrcode-body {
+        width: 560px;
+        height: 784px;
+        border-radius: 6px;
+        background-color: #fff;
+        margin: 100px auto 213px;
+        padding: 50px;
+
+        .toper {
+            height: 100px;
+
+            .user-pic {
+                width: 100px;
+                height: 100px;
+                float: left;
+                position: relative;
+
+                .level {
+                    width: 60px;
+                    height: 25px;
+                    position: absolute;
+                    bottom: -12px;
+                    left: 20px;
+                }
+
+                .level-1 {
+                    background-image: url("/home/new-qrcode/vip-1.png");
+                }
+
+                .level-2 {
+                    background-image: url("/home/new-qrcode/vip-2.png");
+                }
+
+                .level-3 {
+                    background-image: url("/home/new-qrcode/vip-3.png");
+                }
+            }
+
+            .avatar {
+                width: 100%;
+                height: 100%;
+                background-position: center center;
+                background-size: contain;
+                border-radius: 50%;
+                overflow: hidden;
+            }
+
+            .user-info {
+                width: 360px;
+                height: 100px;
+                float: left;
+                padding-left: 20px;
+                color: #444;
+            }
+
+            .name {
+                line-height: 50px;
+                font-size: 34px;
+            }
+
+            .passcode {
+                line-height: 50px;
+                font-size: 28px;
+
+                div {
+                    float: left;
+                }
+
+                .tip {
+                    width: 20px;
+                }
+
+                .dot {
+                    width: 30px;
+                }
+
+                .auto-scroll {
+                    max-width: 280px;
+                    height: 50px;
+                    overflow: hidden;
+                    position: relative;
+                }
+
+                .scroll-words {
+                    position: relative;
+                    top: 0;
+                    left: 0;
+                    white-space: nowrap;
+                }
+
+                .go-scroll {
+                    animation-name: autoScroll;
+                    animation-duration: 5s;
+                    animation-timing-function: linear;
+                    animation-iteration-count: infinite;
+                    animation-direction: alternate;
+                    animation-delay: 2s;
+                }
+            }
+        }
+
+        .qrcode-pic {
+            width: 460px;
+            height: 460px;
+            margin: 47px auto 0;
+            position: relative;
+
+            canvas {
+                width: 460px;
+                height: 460px;
+            }
+
+            .qrcode-avatar {
+                width: 110px;
+                height: 110px;
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                margin-top: -55px;
+                margin-left: -55px;
+                background-position: center center;
+                background-size: contain;
+                border-radius: 50%;
+                overflow: hidden;
+                border: solid 5px #fff;
+            }
+        }
+
+        .invite {
+            margin-top: 30px;
+
+            span {
+                font-size: 24px;
+                color: #444;
+            }
+        }
+    }
+
+    .reload {
+        position: fixed;
+        bottom: 54px;
+        left: 50%;
+        font-size: 24px;
+        color: #b0b0b0;
+        width: 200px;
+        line-height: 30px;
+        margin-left: -100px;
+        text-align: center;
+
+        span {
+            font-size: 40px;
+            color: #eee;
+            position: absolute;
+            top: 0;
+            left: -30px;
+        }
+    }
+}
+
+@keyframes autoScroll {
+    from {
+        left: 0;
+    }
+
+    to {
+        left: -180px;
+    }
+}