fe / yohoblk-wap · Commits

Go to a project

Authored by ccbikai
Commit abbc732fe598dfc22382c943db290fb013160d22 2 parents fa8be514 e14510fa

Merge branch 'develop' into release/1.0

Inline Side-by-side
Showing 8 changed files with 41 additions and 39 deletions
@charset "utf-8";
@import "common/index";
@import "example/index";
@import "me/index";
... ...
... ... @@ -36,7 +36,7 @@
right: 0;
left: 0;
z-index: 210;
padding: 20px 30px;
padding: 20px 34px;
height: 70px;
max-width: 750px;
margin-left: auto;
... ... @@ -44,6 +44,7 @@
line-height: 70px;
font-size: 48px;
background-color: #fff;
border-bottom: 1px solid #eee;
color: #000;
.icon,
... ... @@ -57,6 +58,7 @@
text-align: center;
margin-left: auto;
margin-right: auto;
font-size: 42px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
... ... @@ -68,14 +70,10 @@
.blk-header-right {
float: right;
.icon {
margin-left: 30px;
}
}
.blk-header-gap {
height: 100px;
height: calc(70 + 20 * 2 + 1)px;
background-color: transparent;
}
... ... @@ -85,7 +83,7 @@
}
.blk-header-gap {
height: calc(70 + 60 + 10)px;
height: calc(70 + 20 * 2 + 40 + 1)px;
}
}
</style>
... ...
... ... @@ -11,8 +11,10 @@
<h2 class="card-label">
<a href="{{item | goodsUrl}}" class="line-clamp-2">{{item.productName}}</a>
</h2>
<span class="good-price" :class="{'old-price': item.marketPrice}" v-if="item.marketPrice">¥ {{item.marketPrice | toFixed}}</span>
<span class="good-price" :class="{'sale-price': item.marketPrice}">¥ {{item.salesPrice | toFixed}}</span>
<div class="good-price-box clearfix">
<span class="good-price" :class="{'old-price': item.marketPrice}" v-if="item.marketPrice">¥ {{item.marketPrice | toFixed}}</span>
<span class="good-price" :class="{'sale-price': item.marketPrice}">¥ {{item.salesPrice | toFixed}}</span>
</div>
</div>
</li>
</ul>
... ... @@ -73,13 +75,16 @@
float: left;
width: 372px;
margin-right: 6px;
&:nth-child(2n) {
margin-right: 0;
}
}
.card-pic {
width: 100%;
height: 499px;
a,
img {
display: block;
... ... @@ -87,6 +92,7 @@
height: 100%;
}
}
.card-bd {
min-height: 180px;
margin-left: 30px;
... ... @@ -95,6 +101,7 @@
text-align: center;
font-size: 24px;
}
.card-label {
margin: 0 0 10px;
font-size: 24px;
... ... @@ -103,17 +110,21 @@
}
}
.good-price-box {
white-space: nowrap;
}
.good-price {
display: inline-block;
width: 50%;
color: #b0b0b0;
margin-right: 10px;
&:last-of-type {
margin-right: 0;
}
&.old-price {
text-decoration: line-through;
}
&.sale-price {
color: $red;
color: #d0021b;
}
}
... ... @@ -122,6 +133,7 @@
margin-top: 380px;
color: #b0b0b0;
text-align: center;
.icon-search {
display: inline-block;
font-size: 200px;
... ...
... ... @@ -51,6 +51,7 @@ module.exports = {
margin: 0;
padding: 25px 0;
color: $grey;
background-color: #fff;
}
.order-item {
... ... @@ -59,6 +60,7 @@ module.exports = {
width: 25%;
float: left;
text-align: center;
&:after {
content: "|";
position: absolute;
... ... @@ -66,12 +68,15 @@ module.exports = {
color: $grey;
font-size: 28px;
}
&:last-of-type:after {
display: none;
}
.order-name {
font-size: 28px;
}
.order-icon {
position: relative;
margin-left: 10px;
... ... @@ -82,6 +87,7 @@ module.exports = {
top: 0;
}
}
&.active {
color: $black;
}
... ...
... ... @@ -113,8 +113,12 @@
} else if (result.data.list.length > 0) {
this.editorialList = result.data.list;
}
this.page++;
this.scrollDisabled = false;
// 如果未加载完，继续翻页加载
if (result.data.list.length > 0) {
this.page++;
this.scrollDisabled = false;
}
} else {
tip('没有了...');
}
... ...
... ... @@ -7,6 +7,7 @@
.top-nav {
.blk-header {
background-color: transparent;
border-bottom: 0;
}
.blk-header-gap {
... ...
... ... @@ -3,7 +3,6 @@
<cheader title="新品抢先看">
<i class="icon icon-filter" slot="right" @click="openFilter"></i>
</cheader>
<order :config="orderConfig" :val="order" v-if="enableOrder"></order>
<List :data="productList" :empty="empty"></List>
<Filter :config="filterConfig" action="/product/list.json" v-ref:filter></Filter>
</div>
... ... @@ -17,7 +16,6 @@
const bus = require('common/vue-bus');
const tip = require('common/tip');
const cheader = require('component/header.vue');
const order = require('component/product/order.vue');
const list = require('component/product/list.vue');
const filter = require('component/product/filter.vue');
... ... @@ -32,12 +30,10 @@
data: function() {
return {
sortName: locationQuery.sort_name,
orderConfig: [],
filterConfig: null,
// query
url: '/product/new.json',
order: '',
filter: {},
page: 0, // 未搜索 page=0; 全部加载完 page = totalPage; 无数据: page !=0 && productList.length=0
totalPage: null,
... ... @@ -46,8 +42,7 @@
productList: [],
// state
inSearching: false, // 请求中
enableOrder: false
inSearching: false // 请求中
};
},
computed: {
... ... @@ -58,7 +53,6 @@
components: {
cheader,
list,
order,
filter
},
methods: {
... ... @@ -78,7 +72,6 @@
this.inSearching = true;
return $.get(this.url, Object.assign({
order: this.order,
page: nextPage
}, this.filter, locationQuery))
.done(res => {
... ... @@ -118,10 +111,6 @@
}
},
watch: {
/* order 和 filter 改变 都会触发 重新搜索 */
order: function() {
this.research();
},
filter: function() {
this.research();
}
... ... @@ -135,11 +124,6 @@
self.search();
});
bus.$on('order.change', function({val}) {
console.log(val);
self.order = val;
});
/**
* 筛选组件 筛选值变更，触发 filter.change事件
* 1. 重新搜索
... ... @@ -158,12 +142,7 @@
self.$refs.filter.isVisible = false;
});
this.search()
.then(()=>{
if (self.productList.length) {
self.enableOrder = true;
}
});
this.search();
}
};
... ...
... ... @@ -14,6 +14,7 @@
.blk-header {
background-color: transparent;
color: #fff;
border-bottom: 0;
}
.blk-header-gap {
... ...