fe / YOHOBUYWAP · Commits

Go to a project

Authored by xuqi
Commit fa5e693b6258c1c6b24385379a9d3c622f095241 1 parent 4f9d224a

me/vipGrade

Inline Side-by-side
Showing 21 changed files with 446 additions and 1 deletions
... ... @@ -874,4 +874,23 @@
size: 'L', //颜色和尺寸需要显示就传，不显示不传
price: 562,
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
}
}
\ No newline at end of file
... ...
... ... @@ -103,4 +103,23 @@ a {
@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";
/*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 "vip-grade";
\ No newline at end of file
... ...
$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;
}
}
}
\ No newline at end of file
... ...
{{> 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}}
\ No newline at end of file
... ...
{{> layout/header}}
<div class="vip-grade-page yoho-page">
{{# vipGrade}}
{{> me/privilege}}
{{/ vipGrade}}
</div>
{{> layout/footer}}
\ No newline at end of file
... ...
{{#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}}
\ No newline at end of file
... ...
<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>
\ No newline at end of file
... ...