新二维码页面

+'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);
+};

@@ -251,7 +251,7 @@ const myDetails = (uid) => {
                 result[0].data.gender = (result[0].data.gender === '1' ? '男' : '女');
                 result[0].data.qrcodeLink = helpers.urlFormat('/home/user/qrcode', {
                     token: _.get(result[0], 'data.uid', null) ?
-                        crypto.encryption('yoho9646yoho9646', _.get(result, 'data.uid', null) + '') : '',
+                        crypto.encryption('yoho9646yoho9646', _.get(result[0], 'data.uid', null) + '') : '',
                     icon: _.get(result[0], 'data.head_ico', ''),
                     uname: _.get(result[0], 'data.nickname', ''),
                     vip: _.get(result[0], 'data.vip_info.cur_level')

+'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;

@@ -32,6 +32,8 @@ const refund = require(`${cRoot}/refund`);
 const exchange = require(`${cRoot}/exchange`);
 const tideCommand = require(`${cRoot}/tide-command`);
 
+const newQrcode = require(`${cRoot}/newQrcode`);
+
 // const myDetail = require(`${cRoot}/myDetail);
 
 
@@ -175,4 +177,6 @@ router.post('/return/exchange/submit', auth, exchange.submit); // AJAX 提交换
 router.post('/return/exchange/cancel-apply', auth, exchange.cancelApply); // AJAX 取消换货申请
 
 router.get('/tide-command', auth, tideCommand.tideCommand); // 设置潮流口令
+router.get('/newQrcode', auth, newQrcode.index); // 新二维码页面
+
 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">{{nickname}}</div>
+                <div class="passcode">
+                    <div class="auto-scroll">
+                        <div class="scroll-words"># {{trendWord}} #</div>
+                    </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>
\ No newline at end of file

+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')
+        };
+
+        this.init();
+    }
+
+    init() {
+        this.drawQrcode();
+        this.autoScroll();
+    }
+
+    drawQrcode() {
+        this.selector.$qrcodePic.qrcode({
+            render: 'canvas', // 显示方式，canvas，image和div
+            text: 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.addClass('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;
+
+    .user-avatar {
+        background-image: resolve("home/index/user-avatar.png");
+    }
+
+    .qrcode-body {
+        width: 560px;
+        height: 784px;
+        border-radius: 6px;
+        background-color: #fff;
+        margin: 213px auto;
+        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;
+
+                .tip {
+                    width: 20px;
+                }
+
+                .auto-scroll {
+                    max-width: 300px;
+                    height: 50px;
+                    overflow: hidden;
+                    position: relative;
+                }
+
+                .scroll-words {
+                    position: absolute;
+                    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;
+            }
+        }
+    }
+}
+
+@keyframes autoScroll {
+    from {
+        left: 0;
+    }
+
+    to {
+        left: -180px;
+    }
+}