Merge branch 'develop' of http://git.dev.yoho.cn/web/yohobuy into develop

@@ -875,3 +875,22 @@
         price: 562,
         price: 562,
         count: 3
         count: 3
     }
     }
+
+## 个人中心
+
+### 会员等级
+
+    {
+        vipGrade: {
+            //会员等级页面
+            vip3: true, //vip等级（3，2，1，0），对应等级传true;
+            name: '', //user name
+            costOfThisYear: 3000,
+            percent: 80, //当前消费等级进度条
+            costGap: 300, //距离升级所需消费金额(白金会员不传)
+            sumCost: 600
+
+            //查看全部VIP特权页面
+            all: true
+        }
+    }

@@ -11,7 +11,7 @@ var chosePanel = require('./chose-panel');
 
 
 lazyLoad($('.lazy'));
 lazyLoad($('.lazy'));
 
 
-$('.gift-advance-page').delegate('.chose', 'tap', function() {
+$('.gift-advance-page').on('touchstart', '.chose', function() {
     var id = $(this).closest('.gift-advance-good').data('id');
     var id = $(this).closest('.gift-advance-good').data('id');
 
 
     $.ajax({
     $.ajax({

@@ -103,4 +103,23 @@ a {
     @include border-radius(10px);
     @include border-radius(10px);
 }
 }
 
 
-@import "layout/header", "layout/footer", "layout/footer_tab", "good", "filter", "loading", "passport/index", "guang/index", "home/index", "category/index", "product/index", "index/index", "shopping-cart/index", "mine/index";
+/*px转化rem*/
+@function pxToRem($px) {
+    $pxConvertRem: 40px;
+
+    @if $px == 0 {
+        @return 0;
+    } @else {
+        @return $px / $pxConvertRem * 1rem;
+    }
+}
+
+@mixin rem-sprite ($map,$sprite) {
+    $offsetY: nth(sprite-position($map,$sprite),2);
+    background-image: sprite-url($map);
+    background-repeat: no-repeat;
+    background-position: 0 pxToRem($offsetY);
+    background-size: pxToRem(sprite-width($map)) pxToRem(sprite-height($map));
+}
+
+@import "layout/header", "layout/footer", "layout/footer_tab", "good", "filter", "loading", "passport/index", "guang/index", "home/index", "category/index", "product/index", "index/index", "shopping-cart/index", "me/index";

+@import "home", "vip-grade";

+$vip: sprite-map("me/vip/*.png");
+$privilege: sprite-map("me/privilege/*.png");
+
+.vip-grade-page {
+    background: #f0f0f0;
+    padding-bottom: 30rem / $pxConvertRem;
+
+    .block {
+        padding: 0 30rem / $pxConvertRem;
+        margin-bottom: 30rem / $pxConvertRem;
+        border-top: 1px solid #e0e0e0;
+        border-bottom: 1px solid #e0e0e0;
+        background: #fff;
+    }
+
+    .basic-info {
+        padding-top: 30rem / $pxConvertRem;
+        padding-bottom: 25rem / $pxConvertRem;
+
+        .user-name {
+            font-size: 25rem / $pxConvertRem;
+        }
+
+        .vip-icon {
+            display: inline-block;
+            width: pxToRem(70px);
+            height: pxToRem(30px);
+        }
+
+        .vip-3 {
+            @include rem-sprite($vip, vip-3); 
+        }
+
+        .vip-2 {
+            @include rem-sprite($vip, vip-2);
+        }
+
+        .vip-1 {
+            @include rem-sprite($vip, vip-1);
+        }
+
+        .grade-desc {
+            padding: 20rem / $pxConvertRem 0;
+            font-size: 22rem / $pxConvertRem;
+            color: #b0b0b0;
+        }
+
+        .sum-cost {
+            font-size: 22rem / $pxConvertRem;
+
+            > span {
+                font-style: italic;
+                color: #d1021c;
+            }
+        }
+
+        .progresser {
+            position: relative;
+            width: 100%;
+            height: 20rem / $pxConvertRem;
+            padding: 20rem / $pxConvertRem 0;
+        }
+
+        .outer {
+            height: 20rem / $pxConvertRem;
+            background: #e6e6e6;
+            @include border-radius(10px);
+        }
+
+        .inner {
+            position: absolute;
+            top: 20rem / $pxConvertRem;
+            height: 20rem / $pxConvertRem;
+            background: #d1021c;
+            @include border-radius(10px);
+        }
+
+        .beacon {
+            position: absolute;
+            margin-top: 5rem / $pxConvertRem;
+            font-style: italic;
+        }
+
+        .beacon-max {
+            right: 0;
+        }
+
+        .cost-limit {
+            position: absolute;
+            top: -5rem / $pxConvertRem;
+            right: 0;
+            color: #b0b0b0;
+        }
+
+        .cost-gap {
+            color: #000;
+            margin: 0 8rem / $pxConvertRem;
+        }
+
+        .sub-desc {
+            display: block;
+        }
+    }
+
+    .cost li {
+        height: 90rem / $pxConvertRem;
+        line-height: 90rem / $pxConvertRem;
+        font-size: 30rem / $pxConvertRem;
+        padding-right: 0;
+
+        &:first-child {
+            border-bottom: 1px solid #e0e0e0;
+        }
+        > span {
+            float: right;
+        }
+    }
+
+    .privilege {
+        padding-right: 0;
+        padding-bottom: 40rem / $pxConvertRem;
+
+        .title {
+            height: 90rem / $pxConvertRem;
+            line-height: 90rem / $pxConvertRem;
+            font-size: 30rem / $pxConvertRem;
+            border-bottom: 1px solid #e0e0e0;
+        }
+
+        .icon {
+            float: left;
+            display: block;
+            width: pxToRem(70px);
+            height: pxToRem(70px);
+        }
+
+        .icon-discount {
+            @include rem-sprite($privilege, discount);
+        }
+
+        .icon-year {
+            @include rem-sprite($privilege, year);
+        }
+
+        .icon-vip {
+            @include rem-sprite($privilege, vip);
+        }
+
+        .icon-birth {
+            @include rem-sprite($privilege, birth);
+        }
+
+        .icon-msg {
+            @include rem-sprite($privilege, msg);
+        }
+
+        .icon-magazine {
+            @include rem-sprite($privilege, magazine);
+        }
+
+        .icon-arrival-soon {
+            @include rem-sprite($privilege, arrival-soon);
+        }
+
+        .icon-gift {
+            @include rem-sprite($privilege, gift);
+        }
+
+        li {
+            height: 70rem / $pxConvertRem;
+            padding: 25rem / $pxConvertRem 0;
+        }
+
+        P {
+            font-size: 28rem / $pxConvertRem;
+            margin-left: 100rem / $pxConvertRem;
+        }
+
+        span {
+            display: block;
+            color: #b0b0b0;
+            font-size: 22rem / $pxConvertRem;
+        }
+    }
+
+    .all-privilege {
+        display: block;
+        height: 90rem / $pxConvertRem;
+        line-height: 90rem / $pxConvertRem;
+        font-size: 30rem / $pxConvertRem;
+        margin-bottom: 0;
+
+        .iconfont {
+            float: right;
+            color: #e0e0e0;
+        }
+
+    }
+}

-@import "home";

+{{> layout/header}}
+<div class="vip-grade-page yoho-page">
+    {{# vipGrade}}
+        <div class="basic-info block">
+            {{> me/vip-grade/basic-info}}
+        </div>
+
+        <ul class="cost block">
+            <li>
+                年度累计金额：
+                <span>¥{{costOfThisYear}}</span>
+            </li>
+            <li>
+                历史消费总金额：
+                <span>¥{{sumCost}}</span>
+            </li>
+        </ul>
+
+        {{#unless vip0}}
+            <div class="privilege block">
+                <h3 class="title">当前可享受的特权</h3>
+                {{> me/vip-grade/privilege}}
+            </div>
+        {{/unless}}
+
+        <a class="all-privilege block">
+            查看全部VIP特权
+            <span class="iconfont">&#xe604;</span>
+        </a>
+    {{/ vipGrade}}
+</div>
+{{> layout/footer}}

+{{> layout/header}}
+<div class="vip-grade-page yoho-page">
+    {{# vipGrade}}
+        {{> me/privilege}}
+    {{/ vipGrade}}
+</div>
+{{> layout/footer}}

+{{#if vip3}}
+    <p>
+        <span class="user-name">{{name}}</span>
+        <span class="vip-icon vip-3"></span>
+    </p>
+    <p class="grade-desc">
+        您已升级至最高的等级啦！
+    </p>
+    <p class="sum-cost">
+        年度累计金额<span>¥{{costOfThisYear}}</span>
+    </p>
+    <div class="progresser">
+        <div class="outer"></div>
+        <div class="inner" style="width: {{percent}}%;"></div>
+        <span class="beacon beacon-min">
+            白金卡会员
+        </span>
+    </div>
+{{/if}}
+
+{{#if vip2}}
+    <p>
+        <span class="user-name">{{name}}</span>
+        <span class="vip-icon vip-2"></span>
+    </p>
+    <p class="grade-desc">
+        还差<span class="cost-gap">¥{{costGap}}</span>就可以升级为白金会员!
+        <span class="sub-desc">(VIP金额累计需订单成功签收满15天并无退换货)</span>
+    </p>
+    <p class="sum-cost">
+        年度累计金额<span>¥{{costOfThisYear}}</span>
+    </p>
+    <div class="progresser">
+        <div class="outer"></div>
+        <div class="inner" style="width: {{percent}}%;"></div>
+        <span class="beacon beacon-min">
+            金卡会员
+        </span>
+        <span class="beacon beacon-max">白金卡会员</span>
+        <span class="cost-limit">¥5000.00</span>
+    </div>
+{{/if}}
+
+{{#if vip1}}
+    <p>
+        <span class="user-name">{{name}}</span>
+        <span class="vip-icon vip-2"></span>
+    </p>
+    <p class="grade-desc">
+        还差<span class="cost-gap">¥{{costGap}}</span>就可以升级为金卡会员!
+        <span class="sub-desc">(VIP金额累计需订单成功签收满15天并无退换货)</span>
+    </p>
+    <p class="sum-cost">
+        年度累计金额<span>¥{{costOfThisYear}}</span>
+    </p>
+    <div class="progresser">
+        <div class="outer"></div>
+        <div class="inner" style="width: {{percent}}%;"></div>
+        <span class="beacon beacon-min">
+            银卡会员
+        </span>
+        <span class="beacon beacon-max">金卡会员</span>
+        <span class="cost-limit">¥2000.00</span>
+    </div>
+{{/if}}
+
+{{#if vip0}}
+    <p>
+        <span class="user-name">{{name}}</span>
+    </p>
+    <p class="grade-desc">
+        还差<span class="cost-gap">¥{{costGap}}</span>就可以升级为银卡会员!
+        <span class="sub-desc">(VIP金额累计需订单成功签收满15天并无退换货)</span>
+    </p>
+    <p class="sum-cost">
+        年度累计金额<span>¥{{costOfThisYear}}</span>
+    </p>
+    <div class="progresser">
+        <div class="outer"></div>
+        <div class="inner" style="width: {{percent}}%;"></div>
+        <span class="beacon beacon-min">
+            普通
+        </span>
+        <span class="beacon beacon-max">银卡会员</span>
+        <span class="cost-limit">¥500.00</span>
+    </div>
+{{/if}}

+<ul>
+    <li>
+        <span class="icon icon-discount"></span>
+        <p>
+            {{#if vip3}}
+                购物8.8折
+            {{/if}}
+
+            {{#if vip2}}
+                购物9.0折
+            {{/if}}
+
+            {{#if vip1}}
+                购物9.5折
+            {{/if}}
+
+            {{#if all}}
+                全场最高8.8折
+            {{/if}}
+            <span>在原折扣基础上享受VIP折上折</span>
+        </p>
+    </li>
+    <li>
+        <span class="icon icon-year"></span>
+        <p>
+            年度优惠活动
+            <span>年度级的sale促销活动中，VIP会员可以享受优先购买权</span>
+        </p>
+    </li>
+    <li>
+        <span class="icon icon-vip"></span>
+        <p>
+            VIP活动优惠
+            <span>优先参加"VIP会员限定"活动</span>
+        </p>
+    </li>
+    <li>
+        <span class="icon icon-birth"></span>
+        <p>
+            生日特惠
+            <span>赠送生日优惠券</span>
+        </p>
+    </li>
+    <li>
+        <span class="icon icon-msg"></span>
+        <p>
+            优惠信息
+            <span>获得大量的潮流新品及优惠活动的信息</span>
+        </p>
+    </li>
+    <li>
+        <span class="icon icon-magazine"></span>
+        <p>
+            杂志赠阅
+            <span>下载《YOHO!潮流志》电子版，浏览magazine版块，最新最权威的潮流资讯尽在掌握！</span>
+        </p>
+    </li>
+    {{#or vip3 vip2 all}}
+        <li>
+            <span class="icon icon-arrival-soon"></span>
+            <p>
+                快速送达
+                <span>
+                    白金卡会员的订单将采用最快速度进行配送
+                </span>
+            </p>
+        </li>
+    {{/or}}
+
+    {{#or vip3 all}}
+        <li>
+            <span class="icon icon-gift"></span>
+            <p>
+                纪念品赠送
+                <span>
+                    白金会员将有机会获得YOHO!与各潮流品牌和明显合作的联名款纪念品
+                </span>
+            </p>
+        </li>
+    {{/or}}
+</ul>

@@ -33,7 +33,8 @@ class ShoppingCartController extends AbstractAction
                         'thumb' => 'http://img11.static.yhbimg.com/goodsimg/2015/09/17/03/014cacfa5c458b9732c68adf1af15d7a45.jpg?imageMogr2/thumbnail/120x120/extent/120x120/background/d2hpdGU=/position/center/quality/90',
                         'thumb' => 'http://img11.static.yhbimg.com/goodsimg/2015/09/17/03/014cacfa5c458b9732c68adf1af15d7a45.jpg?imageMogr2/thumbnail/120x120/extent/120x120/background/d2hpdGU=/position/center/quality/90',
                         'name' => 'Life.After.Life纯棉短袜',
                         'name' => 'Life.After.Life纯棉短袜',
                         'salePrice' => 19,
                         'salePrice' => 19,
-                        'price' => 99
+                        'price' => 99,
+                        'count' => 1
                     )
                     )
                 ),
                 ),
                 array(
                 array(
@@ -43,7 +44,8 @@ class ShoppingCartController extends AbstractAction
                         'thumb' => 'http://img11.static.yhbimg.com/goodsimg/2015/10/03/10/01bc1878f9154e77ac4f7a6003c954f1b8.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
                         'thumb' => 'http://img11.static.yhbimg.com/goodsimg/2015/10/03/10/01bc1878f9154e77ac4f7a6003c954f1b8.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
                         'name' => '银鳞堂民族风牛皮手绳',
                         'name' => '银鳞堂民族风牛皮手绳',
                         'salePrice' => 9,
                         'salePrice' => 9,
-                        'price' => 19
+                        'price' => 19,
+                        'count' => 1
                     )
                     )
                 )
                 )
             )
             )