fe / yohoblk-wap · Commits

Go to a project

Authored by 陈峰
Commit 365e0900cf1fff0f2e7c00eafd495411f13747d7 2 parents 7d5c11c7 44186bcb

Merge branch 'release/3.0' into 'master' 

Release/3.0



See merge request !22
Inline Side-by-side
Showing 12 changed files with 262 additions and 317 deletions
... ... @@ -280,7 +280,6 @@ const component = {
let responseData = {
module: 'me',
title: '会员特权详情',
noLocalCSS: true
};
let param = {
... ...
... ... @@ -16,7 +16,7 @@
</div>
<div class="icon-container">
<span class="blk-start-icon"></span>
<p class="icon-label">BLK</p>
<p class="icon-label app-version"></p>
</div>
<div class="description">
<p>The world of fashion is</p>
... ...
<div class="vip-privilege-page yoho-page">
<div class="blk-header-wrap">
<div class="blk-header">
<div class="blk-header-left">
<i class="icon icon-back go-back-btn"></i>
</div>
<div class="blk-header-main">
<span class="blk-header-title">VIP特权</span>
</div>
</div>
<div id="header">
<div class="blk-header-wrap">
<div class="blk-header">
<div class="blk-header-left"><i class="icon icon-back go-back-btn"></i></div>
<div class="blk-header-right"></div>
<div class="blk-header-main"><span class="blk-header-title">VIP特权</span></div>
</div>
<div class="blk-header-gap"></div>
</div>
</div>
<ul class="privilege-list">
{{#each privilege}}
<li>
<span class="icon {{pic}}"></span>
<p>
{{title}}
<span>{{description}}</span>
</p>
</li>
{{/each}}
{{#each privilege}}
<li>
<span class="icon {{pic}}"></span>
<p>
{{title}}
<span>{{description}}</span>
</p>
</li>
{{/each}}
</ul>
</div>
\ No newline at end of file
... ...
import yoho from 'yoho';
import $ from 'jquery';
import Vue from 'vue';
import HeaderBox from 'component/header.vue';
import 'me/_vip-grade.css';
$('.go-back-btn').click(function() {
yoho.goBack({}, function() {}, function() {});
new Vue({
el: '#header',
render: h => h(HeaderBox, {
props: {
title: 'VIP特权'
}
})
});
setTimeout(function() {
if ($('.vip-privilege-page').height() < $(window).height()) {
$('.vip-privilege-page').height($(window).height());
... ...
@import "help";
@import "feedback";
@import "about-us";
@import "vip-grade";
... ...
.ios {
.vip-grade-page,
.vip-privilege-page {
.blk-header {
padding-top: 55px;
font-family: "PingFangSC";
font-weight: 600;
}
.basic-info {
margin-top: 25px;
}
.blk-header-left {
position: relative;
top: 2px;
}
.privilege-list {
margin-top: 35px;
}
}
}
.vip-grade-page,
.vip-privilege-page {
.blk-header {
box-sizing: content-box;
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 210;
padding: 20px 34px;
height: 60px;
max-width: 750px;
margin-left: auto;
margin-right: auto;
line-height: 65px;
font-size: 44px;
background-color: #fff;
border-bottom: 1px solid #eee;
color: #000;
.icon,
.blk-header-title {
vertical-align: middle;
}
.blk-header-right {
margin-right: -32px;
}
.icon {
min-width: 110px;
min-height: 100px;
line-height: 110px;
margin-top: -20px;
margin-left: -32px;
text-indent: 32px;
display: inline-block;
}
.go-back-btn {
&:hover {
background: #ccc;
opacity: 0.5;
}
}
}
.blk-header-left {
float: left;
font-size: 42px;
}
.blk-header-main {
display: block;
text-align: center;
margin-left: auto;
margin-right: auto;
font-size: 42px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
position: absolute;
left: 0;
right: 0;
z-index: -1;
}
}
.vip-grade-page {
background: #f0f0f0;
padding-bottom: 30px;
.block {
padding: 0 30px;
margin-bottom: 30px;
border-top: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
background: #fff;
}
.basic-info {
padding-top: 130px;
padding-bottom: 25px;
p {
width: 100%;
height: auto;
overflow: hidden;
display: block;
}
span {
overflow: hidden;
}
.user-name {
float: left;
max-width: 240px;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 40px;
margin-right: 0.5rem;
}
.vip-icon {
margin-top: 6px;
float: left;
width: 110px;
height: 40px;
line-height: 40px;
}
.vip-3 {
background: resolve("me/vip-3.png");
}
.vip-2 {
background: resolve("me/vip-2.png");
}
.vip-1 {
background: resolve("me/vip-1.png");
}
.vip-3,
.vip-2,
.vip-1 {
background-size: 100%;
}
.grade-desc {
margin-top: 20px;
font-size: 26px;
color: #b0b0b0;
.sub-desc {
margin-top: 10px;
}
}
.sum-cost {
margin-top: 10px;
font-size: 26px;
> span {
font-style: italic;
font-size: 34px;
color: #000;
font-weight: bold;
}
}
.progresser {
position: relative;
width: 100%;
padding: 15px 0;
margin-bottom: 30px;
}
.outer {
height: 20px;
background: #e6e6e6;
border-radius: 10px;
}
.inner {
position: absolute;
top: 15px;
height: 20px;
background: #000;
border-radius: 10px;
}
.beacon {
position: absolute;
margin-top: 15px;
font-style: italic;
margin-bottom: 30px;
}
.beacon-max {
right: 0;
}
.cost-limit {
position: absolute;
top: -30px;
right: 0;
color: #b0b0b0;
}
.cost-gap {
color: #000;
margin: 0 8px;
}
.sub-desc {
display: block;
}
}
.cost {
padding: 0 0 0 30px;
}
.cost li {
height: 90px;
line-height: 90px;
font-size: 34px;
padding-right: 0;
&:first-child {
border-bottom: 1px solid #e0e0e0;
}
> span {
float: right;
padding: 0 30px 0 0;
font-size: 28px;
}
}
.privilege {
padding-right: 0;
padding-bottom: 40px;
.title {
height: 90px;
line-height: 90px;
font-size: 30px;
border-bottom: 1px solid #e0e0e0;
}
}
.all-privilege {
display: block;
height: 90px;
line-height: 90px;
font-size: 30px;
margin-bottom: 0;
span {
float: right;
color: #e0e0e0;
line-height: 90px;
}
}
}
.vip-privilege-page {
padding-top: 100px;
background: #f0f0f0;
}
... ...
... ... @@ -2,7 +2,7 @@
<div v-if="channel.length" class="channel-tab">
<div class="channel ellipsis" v-for="(item, index) in channel" :key="index" :class="{focus: index === currentChannel}"
@click="changeChannel(index, item.id)" :style="{width: (1 / channel.length) * 100 + '%'}">
<span class="name">{{item.name && item.name.toUpperCase()}}</span>
<span class="name">{{item.name | keepEn}}</span>
</div>
</div>
</template>
... ... @@ -89,6 +89,12 @@
}
}
},
filters: {
keepEn(name){
name = (name || '').toUpperCase();
return name.replace(/(男士|女士)$/g, '');
}
},
watch: {
current(val) {
this.currentChannel = val;
... ...
... ... @@ -175,7 +175,7 @@
}
.right-btn {
font-size: 38px;
font-size: 17PX;
margin-right: 30px;
}
}
... ...
<template>
<ul class="list-box">
<li v-for="item in items" :key="item.name"><a class="no-intercept" :href="'#' + item.index">{{item.name}}</a></li>
<li v-for="item in items" :key="item.name"><a class="no-intercept" href="javascript:;" @click="() => {loc(item.index)}">{{item.name}}</a></li>
</ul>
</template>
<style>
... ... @@ -47,6 +47,21 @@
}
}
},
methods: {
loc(index) {
let $el = document.querySelector(`a[name="${index}"]`);
if ($el) {
let top = document.querySelector(`a[name=${index}]`).offsetTop;
let header = document.querySelector('.blk-header');
if (header) {
top -= header.clientHeight + 2;
}
window.scrollTo(0, top);
}
}
},
created() {
if (!this.indexList) {
... ...
... ... @@ -6,7 +6,7 @@
<div class="my-header" v-if="data.nickName">
<a class="user-info auth" id="user-info" href='/me/mydetails'>
<img class="user-avatar" :src="headIco" @error="setEmptyimg">
<span class="username" :class="{'username-top': !data.vipLevel}">{{ data.nickName }}</span>
<span class="username ellipsis" :class="{'username-top': !data.vipLevel}">{{ data.nickName }}</span>
<div class="account-mg">账号管理<span class="icon icon-right"></span></div>
</a>
<a :class="`vip-level level-${data.vipLevel}`" v-if="data.vipLevel" href='/me/grade'></a>
... ... @@ -15,7 +15,7 @@
<span class="username" @click="sign">登录/注册</span>
</div>
<div class="change-channel" @click="goChannel">
<span class="label">切换购物频道</span>
<span class="label">默认购物频道</span>
<span class="channel">{{curChannel}}<span class="icon icon-right"></span></span>
</div>
<div class="group-list">
... ...
<template>
<div>
<div class="blk-header-wrap">
<div class="blk-header">
<div class="blk-header-left">
<i class="icon icon-back go-back-btn" @click="goBack"></i>
</div>
<div class="blk-header-main">
<span class="blk-header-title">会员等级</span>
</div>
</div>
</div>
<header-box title="会员等级" ref="header"></header-box>
<div class="basic-info block" v-if="vipGrade.vip3">
<p>
<span class="user-name">{{vipGrade.name}}</span>
... ... @@ -126,14 +117,193 @@
</div>
</template>
<style>
.go-back-btn {
font-size: 64px;
.vip-grade-page {
background: #f0f0f0;
padding-bottom: 30px;
.block {
padding: 0 30px;
margin-bottom: 30px;
border-top: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
background: #fff;
}
.basic-info {
padding-top: 30px;
padding-bottom: 25px;
border-top: none;
p {
width: 100%;
height: auto;
overflow: hidden;
display: block;
}
span {
overflow: hidden;
}
.user-name {
float: left;
max-width: 240px;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 40px;
margin-right: 0.5rem;
}
.vip-icon {
margin-top: 6px;
float: left;
width: 110px;
height: 40px;
line-height: 40px;
}
.vip-3 {
background: resolve("me/vip-3.png");
}
.vip-2 {
background: resolve("me/vip-2.png");
}
.vip-1 {
background: resolve("me/vip-1.png");
}
.vip-3,
.vip-2,
.vip-1 {
background-size: 100%;
}
.grade-desc {
margin-top: 20px;
font-size: 26px;
color: #b0b0b0;
.sub-desc {
margin-top: 10px;
}
}
.sum-cost {
margin-top: 10px;
font-size: 26px;
> span {
font-style: italic;
font-size: 34px;
color: #000;
font-weight: bold;
}
}
.progresser {
position: relative;
width: 100%;
padding: 15px 0;
margin-bottom: 30px;
}
.outer {
height: 20px;
background: #e6e6e6;
border-radius: 10px;
}
.inner {
position: absolute;
top: 15px;
height: 20px;
background: #000;
border-radius: 10px;
}
.beacon {
position: absolute;
margin-top: 15px;
font-style: italic;
margin-bottom: 30px;
}
.beacon-max {
right: 0;
}
.cost-limit {
position: absolute;
top: -30px;
right: 0;
color: #b0b0b0;
}
.cost-gap {
color: #000;
margin: 0 8px;
}
.sub-desc {
display: block;
}
}
.cost {
padding: 0 0 0 30px;
}
.cost li {
height: 90px;
line-height: 90px;
font-size: 34px;
padding-right: 0;
&:first-child {
border-bottom: 1px solid #e0e0e0;
}
> span {
float: right;
padding: 0 30px 0 0;
font-size: 28px;
}
}
.privilege {
padding-right: 0;
padding-bottom: 40px;
.title {
height: 90px;
line-height: 90px;
font-size: 30px;
border-bottom: 1px solid #e0e0e0;
}
}
.all-privilege {
display: block;
height: 90px;
line-height: 90px;
font-size: 30px;
margin-bottom: 0;
span {
float: right;
color: #e0e0e0;
line-height: 90px;
}
}
}
</style>
<script>
import $ from 'jquery';
import yoho from 'yoho';
import HeaderBox from 'component/header.vue';
export default {
data() {
... ... @@ -155,11 +325,11 @@
$('.vip-grade-page').height($(window).height());
}
}, 500);
},
goBack() {
yoho.goBack({}, function() {}, function() {});
}
},
components: {
HeaderBox
},
mounted() {
this.reload();
}
... ...
... ... @@ -5,6 +5,7 @@
<product-list :data="productList" :state="listState"></product-list>
</div>
<filter-box :val="order" :filter="filterConfig" v-if="enableOrder" ref="filter"></filter-box>
<shopping-bag :cart-count="cartCount" v-if="isApp"></shopping-bag>
</div>
</template>
<style>
... ... @@ -35,6 +36,8 @@
import shopTop from 'product/shop/shop-top.vue'; // 店铺头部信息
import ProductList from 'component/product/list.vue';
import FilterBox from 'component/product/filter/index.vue';
import ShoppingBag from 'component/product/shopping-bag.vue';
const $shop = $('#shop');
... ... @@ -44,6 +47,7 @@
export default {
data() {
return {
isApp: yoho.isApp,
noheader: false,
shareData: {}, // 分享相关数据
shopInfo: {}, // 店铺介绍相关数据
... ... @@ -64,6 +68,7 @@
inSearching: false,
enableOrder: false,
order: '',
cartCount: 0
};
},
computed: {
... ... @@ -178,13 +183,22 @@
this.page = 0;
this.productList = [];
this.search();
},
refreshCart: function() {
$.get('/product/cart-count.json').then(result=> {
if (result.code === 200) {
this.cartCount = result.data.cart_goods_count;
}
});
}
},
components: {
topBar,
shopTop,
ProductList,
FilterBox
FilterBox,
ShoppingBag
},
created() {
const self = this;
... ... @@ -219,6 +233,12 @@
self.filter = val;
self.$refs.filter.isVisible = false;
});
// 读取购物车数量
if (this.isApp) {
this.refreshCart();
bus.$on('app.shoppingcart.refresh', this.refreshCart);
}
}
};
... ...