暂存

@@ -64,6 +64,9 @@ const logger = global.yoho.logger;
 
 // 访问域名层级
 app.set('subdomain offset', 3);
+
+app.use(global.yoho.httpCtx());
+
 app.use(global.yoho.hbs({
     extname: '.hbs',
     defaultLayout: 'layout',

+'use strict';
+
+const mRoot = '../models';
+const headerModel = require('../../../doraemon/models/header'); // 头部model
+const gradeNewModel = require(`${mRoot}/grade-new`);
+
+exports.index = (req, res, next) => {
+    let responseData = {
+        module: 'home',
+        page: 'grade-new',
+        pageHeader: headerModel.setNav({
+            navTitle: '会员等级'
+        }),
+        title: '会员等级',
+        width750: true,
+        localCss: true,
+        pageFooter: true
+    };
+
+    let params = {
+        uid: req.user.uid,
+        channel: req.query.channel || 1
+    };
+
+    req.ctx(gradeNewModel).index(params).then(result => {
+        console.log(result);
+        res.render('grade-new/index', Object.assign(responseData, result));
+    }).catch(next);
+};

+'use strict';
+
+const api = global.yoho.API;
+const helpers = global.yoho.helpers;
+const _ = require('lodash');
+
+/**
+ * 会员等级
+ * @param params
+ */
+
+module.exports = class extends global.yoho.BaseModel {
+    constructor(ctx) {
+        super(ctx);
+    }
+
+    getGradeGrade(uid, channel) {
+        return api.get('', {
+            method: 'app.passport.vip',
+            uid: uid,
+            channel: channel || 1
+        }, {
+            code: 200
+        });
+    }
+
+    getGradeUser(uid, channel) {
+        return api.get('', {
+            method: 'app.passport.profile',
+            uid: uid,
+            channel: channel || 1
+        }, {
+            code: 200
+        });
+    }
+
+    index(param) {
+        if (param.uid) {
+            return api.all([
+                this.getGradeGrade(param.uid, param.channel),
+                this.getGradeUser(param.uid, param.channel)
+            ]).then((result) => {
+
+                let resu = {
+                    vipGrade: []
+                };
+
+                let enp = {};
+
+                let obj = {
+                    privilege: []
+                };
+
+                if (result[0] && result[0].data) {
+
+                    _.forEach(result[0].data.enjoy_preferential, function(val) {
+
+                        enp = {
+                            description: val.description,
+                            pic: val.pic,
+                            title: val.title
+                        };
+
+                        obj.privilege.push(enp);
+
+                    });
+
+                    switch (result[0].data.current_vip_level) {
+                        case '0': // 普通会员
+                            obj = _.assign(obj, {
+                                vip0: true
+                            });
+                            break;
+                        case '1': // 银卡会员
+                            obj = _.assign(obj, {
+                                vip1: true
+                            });
+                            break;
+                        case '2': // 金卡会员
+                            obj = _.assign(obj, {
+                                vip2: true
+                            });
+                            break;
+                        case '3': // 白金会员
+                            obj = _.assign(obj, {
+                                vip3: true
+                            });
+                            break;
+                        default:
+
+                    }
+
+                    let upg = (1 * (result[0].data.upgrade_need_cost)).toFixed(2);
+
+                    obj = _.assign(obj, {
+                        costOfThisYear: result[0].data.current_year_cost,
+                        sumCost: result[0].data.current_total_cost,
+                        allUrl: helpers.urlFormat('/home/privilege'),
+                        costGap: upg
+                    });
+
+                    if (result[0].data.next_need_cost === 0 || result[0].data.next_need_cost === '') {
+                        // 当vip等级升至顶级时，进度条满格
+                        obj = _.assign(obj, {
+                            percent: 100
+                        });
+                    } else {
+
+                        let perf = (100 * (result[0].data.current_year_cost /
+                            result[0].data.next_need_cost)).toFixed(2);
+
+                        obj = _.assign(obj, {
+                            percent: perf
+                        });
+
+                    }
+
+                }
+
+                if (result[0] && result[0].data) {
+                    obj = _.assign(obj, {
+                        name: result[1].data.nickname
+                    });
+                }
+
+                resu.vipGrade.push(obj);
+
+                return resu;
+            });
+        } else {
+            return Promise.resolve({});
+        }
+    }
+};

@@ -28,6 +28,7 @@ const help = require(`${cRoot}/help`);
 const suggest = require(`${cRoot}/suggest`);
 const message = require(`${cRoot}/message`);
 const onlineService = require(`${cRoot}/onlineService`);
+const gradeNew = require(`${cRoot}/grade-new`);
 
 // const myDetail = require(`${cRoot}/myDetail);
 
@@ -142,4 +143,6 @@ router.get('/getaddress.json', addressController.newGetAddress); // TODO 模拟
 
 router.get('/logistic', auth, orderDetailController.logistic); // 查看物流页面
 
+router.get('/gradeNew/index', auth, gradeNew.index); // 会员等级
+
 module.exports = router;

+<div class="grade-new-c">
+    <div class="tab">
+        <span class="active">我的等级</span>
+        <span>我的权益</span>
+    </div>
+    <a class="big-top">
+        成长值进度
+        <span class="iconfont">&#xe604;</span>
+        <span class="s-title">成长值记录</span>
+    </a>
+    <div class="user-info clearfix">
+        <div class="base clearfix">
+            {{# vipGrade}}
+            <div class="pic" style="background-image:url('http://172.16.6.52:5001/img/home/index/user-avatar.png')">
+                <div class="level-pic" style="background-image:url('http://172.16.6.52:5001/img/home/index/user-avatar.png')"></div>
+            </div>
+            <div class="intro">
+                <div class="name">{{name}}，您好！</div>
+                <div class="level">
+                    <span class="now">我的成长值：<span class="val">2250</span> </span>
+                    <span class="next">下次升级还需：<span class="val">2750</span></span>
+                </div>
+            </div>
+            {{/ vipGrade}}
+        </div>
+        <div class="level-process clearfix">
+            <div class="line-c">
+                <div class="line"></div>
+                <div class="point">
+                    <div class="point-item">
+                        <div class="level-text">
+                            <p>普通会员</p>
+                            <p>0</p>
+                        </div>
+                    </div>
+                    <div class="point-item">
+                        <div class="level-text">
+                            <p>银卡会员</p>
+                            <p>800</p>
+                        </div>
+                    </div>
+                    <div class="point-item">
+                        <div class="level-text">
+                            <p>金卡会员</p>
+                            <p>3000</p>
+                        </div>
+                    </div>
+                    <div class="point-item">
+                        <div class="level-text">
+                            <p>白金会员</p>
+                            <p>7000</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <a class="big-top">
+        会员等级介绍
+        <span class="iconfont">&#xe604;</span>
+        <span class="s-title">了解等级规则</span>
+    </a>
+    <div class="content">
+        <p>1.注册成功即为普通会员，各会员等级均按照历史累计有效的成长值升降级，会员等级越高可享受会员权益越多。</p>
+        <p>2.成长值为有货会员通过购物、评价、登录等获得经验累积值。</p>
+        <p>3.会员升级后，会员等级有效期一年。每365天进行累计成长值扣减，扣减后的成长值不满足当前级别条件的，直接降级至对应成长值级别。</p>
+        <p>自成为银卡之日开始，365天内未继续晋级更高级别，则在366天扣减当前级别所需成长值，扣减值为400</p>
+        <p>自成为金卡之日开始，365天内未继续晋级更高级别，则在366天扣减当前级别所需成长值，扣减值为1500</p>
+        <p>自成为白金卡之日开始，365天内未继续晋级更高级别，则在366天扣减当前级别所需成长值，扣减值为3500</p>
+    </div>
+    <div class="big-top">
+        成长值获取方法
+    </div>
+    <div class="table-c">
+        <table>
+            <tr>
+                <th>场景</th>
+                <th>获取规则</th>
+                <th>成长数值</th>
+            </tr>
+            <tr>
+                <td>购物</td>
+                <td>
+                    按商品实际付款金额1元累计1个
+                    <br />
+                    成长值订单完成后奖励</td>
+                <td>
+                    等于实际
+                    <br />
+                    付款金额
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    月度购买
+                    <br />
+                    次数
+                </td>
+                <td>
+                    自然月内达到1个购物天数
+                    <br />
+                    且订单已完成
+                </td>
+                <td>20</td>
+            </tr>
+            <tr>
+                <td>完善资料</td>
+                <td>完善个人资料</td>
+                <td>50</td>
+            </tr>
+            <tr>
+                <td>
+                    手机邮箱
+                    <br />
+                    验证
+                </td>
+                <td>完成手机邮箱双验证</td>
+                <td>20</td>
+            </tr>
+            <tr>
+                <td>VIP登录</td>
+                <td>VIP每日登录2个成长值</td>
+                <td>2</td>
+            </tr>
+            <tr>
+                <td>评价</td>
+                <td>
+                    评价成功且审核通过10个成长值
+                    <br />
+                    一个商品仅限一次
+                </td>
+                <td>10</td>
+            </tr>
+        </table>
+        <p>扣除成长值的情况：</p>
+        <p>发生退货或删除评价，扣除当时获得的成长值。</p>
+    </div>
+</div>

-{
-  "name": "m-yohobuy-node",
-  "version": "5.6.4",
-  "private": true,
-  "description": "A New Yohobuy Project With Express",
-  "repository": {
-    "type": "git",
-    "url": "http://git.dev.yoho.cn/web/yohobuywap-node.git"
-  },
-  "scripts": {
-    "start": "NODE_ENV=\"production\" node app.js",
-    "dev": "nodemon -e js,hbs -i public/ app.js",
-    "static": "webpack-dev-server --config ./public/build/webpack.dev.config.js",
-    "build": "webpack --config ./public/build/webpack.prod.config.js",
-    "debug": "DEBUG=\"express:*\" nodemon -e js,hbs -i public/ app.js",
-    "lint-js": "eslint -c .eslintrc --cache .",
-    "lint-css": "stylelint --syntax scss --cache --config .stylelintrc 'public/scss/**/*.css'",
-    "lint-vue-js": "eslint -c .eslintrc --cache public/vue",
-    "lint-vue-css": "stylelint --syntax scss --extract --cache --config .stylelintrc 'public/scss/**/*.vue'",
-    "lint-all": "node lint-all.js",
-    "precommit": "node lint-commit.js"
-  },
-  "license": "MIT",
-  "dependencies": {
-    "bluebird": "^3.4.7",
-    "body-parser": "^1.16.1",
-    "captchapng": "0.0.1",
-    "cheerio": "^0.22.0",
-    "client-sessions": "^0.7.0",
-    "compression": "^1.6.2",
-    "connect-memcached": "^0.2.0",
-    "connect-multiparty": "^2.0.0",
-    "cookie-parser": "^1.4.3",
-    "express": "^4.14.1",
-    "feed": "^1.0.2",
-    "geetest": "^4.1.1",
-    "lodash": "^4.17.4",
-    "memory-cache": "^0.1.6",
-    "moment": "^2.18.1",
-    "oneapm": "^1.2.20",
-    "passport": "^0.3.2",
-    "passport-local": "^1.0.0",
-    "passport-qq": "0.0.3",
-    "passport-sina": "^0.1.0",
-    "passport-strategy": "^1.0.0",
-    "passport-weixin": "^0.1.0",
-    "request": "^2.81.0",
-    "request-promise": "^3.0.0",
-    "uuid": "^3.0.1",
-    "xml2js": "^0.4.17",
-    "yoho-express-session": "^2.0.0",
-    "yoho-md5": "^2.0.0",
-    "yoho-node-lib": "=0.2.22",
-    "yoho-zookeeper": "^1.0.8"
-  },
-  "devDependencies": {
-    "autoprefixer": "^6.7.4",
-    "babel-core": "^6.24.1",
-    "babel-loader": "^6.4.1",
-    "babel-polyfill": "^6.23.0",
-    "babel-preset-env": "^1.3.3",
-    "css-loader": "^0.28.0",
-    "cssnano": "^3.10.0",
-    "eslint": "^3.19.0",
-    "eslint-config-yoho": "^1.0.1",
-    "eslint-loader": "^1.7.1",
-    "eslint-plugin-html": "^2.0.1",
-    "extract-text-webpack-plugin": "^2.1.0",
-    "handlebars-loader": "^1.4.0",
-    "happypack": "^3.0.3",
-    "husky": "^0.13.3",
-    "nodemon": "^1.11.0",
-    "postcss-assets": "^4.0.1",
-    "postcss-calc": "^5.3.1",
-    "postcss-center": "^1.0.0",
-    "postcss-clearfix": "^1.0.0",
-    "postcss-crip": "^2.0.1",
-    "postcss-import": "^9.1.0",
-    "postcss-loader": "^1.3.1",
-    "postcss-position": "^0.5.0",
-    "postcss-pxtorem": "^4.0.0",
-    "postcss-scss": "^0.4.1",
-    "postcss-short": "^3.0.3",
-    "postcss-sprites": "^4.2.0",
-    "postcss-use": "^2.3.0",
-    "precss": "^1.4.0",
-    "shelljs": "^0.7.6",
-    "style-loader": "^0.16.1",
-    "stylelint": "^7.10.1",
-    "stylelint-config-yoho": "^1.2.8",
-    "stylelint-formatter-table": "^1.0.2",
-    "stylelint-processor-html": "^1.0.0",
-    "stylelint-webpack-plugin": "^0.7.0",
-    "vue": "^2.2.6",
-    "vue-loader": "^11.3.4",
-    "vue-template-compiler": "^2.2.6",
-    "webpack": "^2.3.3",
-    "webpack-dev-server": "^2.4.2",
-    "webpack-uglify-parallel": "^0.1.3",
-    "yoho-cookie": "^1.2.0",
-    "yoho-fastclick": "^1.0.6",
-    "yoho-hammer": "^2.0.7",
-    "yoho-iscroll": "^5.2.0",
-    "yoho-jquery": "^2.2.4",
-    "yoho-jquery-lazyload": "^1.9.10",
-    "yoho-jquery-qrcode": "^0.14.0",
-    "yoho-mlellipsis": "0.0.3",
-    "yoho-qs": "^1.0.1",
-    "yoho-swiper": "^3.3.1",
-    "yoho-swiper2": "0.0.5"
-  }
-}

+'use strict';
+
+import {
+    Controller
+} from 'yoho-mvc';
+
+import {
+    TabView
+} from './view';
+
+class GradeController extends Controller {
+    constructor() {
+        super();
+        this.tabView = new TabView();
+    }
+}
+
+
+module.exports = GradeController;

+require('home/grade-new.page.css');
+
+const GradeController = require('./controller');
+
+new GradeController();
+

+import {
+    View
+} from 'yoho-mvc';
+
+class TabView extends View {
+    constructor() {
+        super('.tab');
+        this.on('touchend touchcancel', 'span', this.tabClick.bind(this));
+    }
+
+    tabClick(e) {
+        let $this = $(e.currentTarget);
+
+        if (!$this.hasClass('active')) {
+            $this.addClass('active').siblings('span').removeClass('active');
+        }
+    }
+}
+
+export {
+    TabView
+};

+.grade-new-c {
+    background-color: #f0f0f0;
+
+    .tab {
+        height: 80px;
+        line-height: 80px;
+        padding: 18px 0;
+        background-color: #fff;
+
+        span {
+            line-height: 44px;
+            display: inline-block;
+            width: 375px;
+            text-align: center;
+            float: left;
+            font-size: 28px;
+            color: #b0b0b0;
+
+            &:first-child {
+                border-right: solid 1px #e5e5e5;
+            }
+        }
+
+        span.active {
+            color: #444;
+        }
+    }
+
+    .big-top {
+        display: block;
+        font-size: 28px;
+        color: #444;
+        line-height: 88px;
+        margin-top: 20px;
+        background-color: #fff;
+        padding: 0 30px;
+
+        .s-title {
+            float: right;
+            padding-right: 10px;
+        }
+
+        .iconfont {
+            float: right;
+        }
+    }
+
+    .user-info {
+        padding: 30px 30px 115px;
+        background-color: #fff;
+        border-top: solid 1px #e5e5e5;
+
+        .base {
+            .pic {
+                width: 125px;
+                height: 125px;
+                float: left;
+                background-size: contain;
+                background-position: center;
+                border-radius: 50%;
+                border: 1px solid #eee;
+                position: relative;
+
+                .level-pic {
+                    width: 82px;
+                    height: 36px;
+                    background-size: 100% 100%;
+                    position: absolute;
+                    bottom: -18px;
+                    left: 50%;
+                    margin-left: -41px;
+                }
+            }
+
+            .intro {
+                padding: 15px 0 15px 20px;
+                float: left;
+                width: 560px;
+            }
+
+            .name {
+                color: #444;
+                font-size: 32px;
+                line-height: 60px;
+            }
+
+            .level {
+                font-size: 24px;
+                line-height: 40px;
+            }
+
+            .val {
+                font-size: 32px;
+            }
+
+            .now {
+                float: left;
+            }
+
+            .next {
+                float: right;
+            }
+        }
+
+        .level-process {
+            .line-c {
+                width: 600px;
+                height: 4px;
+                background-color: #f0f0f0;
+                margin: 50px auto 0;
+                position: relative;
+            }
+
+            .line {
+                width: 80%;
+                height: 100%;
+                max-width: 100%;
+                background-color: #444;
+            }
+
+            .point {
+                width: 619px;
+                position: absolute;
+                left: -10px;
+                top: -9px;
+            }
+
+            .point-item {
+                width: 22px;
+                height: 22px;
+                background-image: url("/home/point.png");
+                background-size: auto 100%;
+                background-repeat: no-repeat;
+                float: left;
+                margin-right: 177px;
+                position: relative;
+            }
+
+            .point-item:last-child {
+                margin-right: 0;
+            }
+
+            .level-text {
+                width: 120px;
+                position: absolute;
+                top: 29px;
+                left: 50%;
+                margin-left: -60px;
+                font-size: 24px;
+                text-align: center;
+                line-height: 40px;
+            }
+        }
+    }
+
+    .content {
+        background-color: #fff;
+        padding: 30px;
+        border-top: solid 1px #e5e5e5;
+
+        p {
+            line-height: 40px;
+            margin-top: 5px;
+        }
+    }
+
+    .table-c {
+        width: 100%;
+        background-color: #fff;
+
+        table {
+            width: 100%;
+        }
+
+        th {
+            border: solid 1px #e5e5e5;
+            font-size: 24px;
+            text-align: center;
+            font-weight: bold;
+            padding: 15px;
+            line-height: 40px;
+        }
+
+        td {
+            border: solid 1px #e5e5e5;
+            font-size: 24px;
+            text-align: center;
+            padding: 15px;
+            line-height: 40px;
+        }
+
+        p {
+            font-size: 24px;
+            padding: 0 30px;
+            margin-top: 20px;
+        }
+    }
+}