|
...
|
...
|
@@ -3,16 +3,16 @@ |
|
|
|
<ul class="cardlist card-large clearfix">
|
|
|
|
<li class="card" v-for="(item, index) in data" :key="item.product_skn" @click="clickProduct(item, index)">
|
|
|
|
<div class="card-pic">
|
|
|
|
<a v-good-href="item">
|
|
|
|
<a v-good-href="item" :class="hrefClass">
|
|
|
|
<img v-img-src="{src: item.default_images, width: 330, height: 440}" :alt="item.product_name">
|
|
|
|
</a>
|
|
|
|
</div>
|
|
|
|
<div class="card-bd">
|
|
|
|
<h2 class="card-label">
|
|
|
|
<a v-good-href="item" class="line-clamp-1">{{item.product_name}}</a>
|
|
|
|
<a v-good-href="item" class="line-clamp-1" :class="hrefClass">{{item.product_name}}</a>
|
|
|
|
</h2>
|
|
|
|
<h2 class="card-label-desc" v-if="item.product_name1">
|
|
|
|
<a v-good-href="item" class="line-clamp-1">{{item.product_name}}</a>
|
|
|
|
<a v-good-href="item" class="line-clamp-1" :class="hrefClass">{{item.product_name}}</a>
|
|
|
|
</h2>
|
|
|
|
<span class="good-price" :class="{'sale-price': item.market_price}">¥{{item.sales_price | toFixed}}</span>
|
|
|
|
<span class="good-price" :class="{'old-price': item.market_price}" v-if="item.market_price">¥{{item.market_price | toFixed}}</span>
|
|
...
|
...
|
@@ -30,147 +30,189 @@ |
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import Vue from 'vue';
|
|
|
|
import lazyload from 'vue-lazyload';
|
|
|
|
import infinitScroll from 'vue-infinite-scroll';
|
|
|
|
import bus from 'common/vue-bus';
|
|
|
|
|
|
|
|
Vue.use(lazyload, { preLoad: 3 });
|
|
|
|
Vue.use(infinitScroll);
|
|
|
|
|
|
|
|
import Vue from 'vue';
|
|
|
|
import lazyload from 'vue-lazyload';
|
|
|
|
import infinitScroll from 'vue-infinite-scroll';
|
|
|
|
import bus from 'common/vue-bus';
|
|
|
|
|
|
|
|
Vue.use(lazyload, { preLoad: 3 });
|
|
|
|
Vue.use(infinitScroll);
|
|
|
|
|
|
|
|
export default {
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
hrefClass: {}
|
|
|
|
};
|
|
|
|
},
|
|
|
|
props: {
|
|
|
|
/* 开启滚动加载 */
|
|
|
|
disableFetch: Boolean,
|
|
|
|
|
|
|
|
// 数据
|
|
|
|
data: Array,
|
|
|
|
state: [Number, Object] // -1: 无数据 0: 全部加载完 1: 正在加载
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
// 空列表: data.length === 0
|
|
|
|
whenEmpty() {
|
|
|
|
return !this.data.length;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
mounted() {
|
|
|
|
const $scrollEl = this.getScrollEventTarget(this.$el);
|
|
|
|
|
|
|
|
$scrollEl.addEventListener('scroll', this.throttle(this.scrollEnd, 200));
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
fetch: function() {
|
|
|
|
bus.$emit('list.paging');
|
|
|
|
},
|
|
|
|
clickProduct(item, index) {
|
|
|
|
this.$emit('click-product', item, index);
|
|
|
|
},
|
|
|
|
scrollEnd() {
|
|
|
|
this.hrefClass = {};
|
|
|
|
},
|
|
|
|
getScrollEventTarget(element) {
|
|
|
|
let getComputedStyle = document.defaultView.getComputedStyle;
|
|
|
|
let currentNode = element;
|
|
|
|
|
|
|
|
export default {
|
|
|
|
props: {
|
|
|
|
/* 开启滚动加载 */
|
|
|
|
disableFetch: Boolean,
|
|
|
|
while (currentNode && currentNode.tagName !== 'HTML' && currentNode.tagName !== 'BODY' && currentNode.nodeType === 1) {
|
|
|
|
let overflowY = getComputedStyle(currentNode).overflowY;
|
|
|
|
|
|
|
|
// 数据
|
|
|
|
data: Array,
|
|
|
|
state: [Number, Object] // -1: 无数据 0: 全部加载完 1: 正在加载
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
// 空列表: data.length === 0
|
|
|
|
whenEmpty() {
|
|
|
|
return !this.data.length;
|
|
|
|
if (overflowY === 'scroll' || overflowY === 'auto') {
|
|
|
|
return currentNode;
|
|
|
|
}
|
|
|
|
currentNode = currentNode.parentNode;
|
|
|
|
}
|
|
|
|
return window;
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
fetch: function() {
|
|
|
|
bus.$emit('list.paging');
|
|
|
|
},
|
|
|
|
clickProduct(item, index) {
|
|
|
|
this.$emit('click-product', item, index);
|
|
|
|
}
|
|
|
|
throttle(fn, delay) {
|
|
|
|
let timer;
|
|
|
|
|
|
|
|
return () => {
|
|
|
|
if (timer) {
|
|
|
|
clearTimeout(timer);
|
|
|
|
timer = null;
|
|
|
|
}
|
|
|
|
this.hrefClass = {
|
|
|
|
'no-link': true
|
|
|
|
};
|
|
|
|
|
|
|
|
timer = setTimeout(() => {
|
|
|
|
fn();
|
|
|
|
}, delay);
|
|
|
|
};
|
|
|
|
}
|
|
|
|
};
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
</script>
|
|
|
|
<style>
|
|
|
|
@import "../../../scss/common/_color.css";
|
|
|
|
|
|
|
|
.cardlist {
|
|
|
|
list-style: none;
|
|
|
|
margin: 0;
|
|
|
|
padding: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
.cardlist--loading {
|
|
|
|
font-size: 32px;
|
|
|
|
text-align: center;
|
|
|
|
padding: 16px 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
.card-large {
|
|
|
|
background-color: #fff;
|
|
|
|
|
|
|
|
.card {
|
|
|
|
float: left;
|
|
|
|
width: 330px;
|
|
|
|
margin: 0 30px;
|
|
|
|
|
|
|
|
&:nth-child(2n) {
|
|
|
|
margin: 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.card-pic {
|
|
|
|
width: 330px;
|
|
|
|
height: 440px;
|
|
|
|
|
|
|
|
a,
|
|
|
|
img {
|
|
|
|
display: block;
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
}
|
|
|
|
@import "../../../scss/common/_color.css";
|
|
|
|
|
|
|
|
.cardlist {
|
|
|
|
list-style: none;
|
|
|
|
margin: 0;
|
|
|
|
padding: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
.cardlist--loading {
|
|
|
|
font-size: 32px;
|
|
|
|
text-align: center;
|
|
|
|
padding: 16px 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
.card-large {
|
|
|
|
background-color: #fff;
|
|
|
|
|
|
|
|
.card {
|
|
|
|
float: left;
|
|
|
|
width: 330px;
|
|
|
|
margin: 0 30px;
|
|
|
|
|
|
|
|
&:nth-child(2n) {
|
|
|
|
margin: 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.card-bd {
|
|
|
|
min-height: 180px;
|
|
|
|
padding-top: 40px;
|
|
|
|
font-size: 0;
|
|
|
|
font-family: "BrownStd", "PingFang SC", Helvetica, Roboto, "Heiti SC", "\9ED1\4F53", Arial;
|
|
|
|
}
|
|
|
|
.card-pic {
|
|
|
|
width: 330px;
|
|
|
|
height: 440px;
|
|
|
|
|
|
|
|
.card-label {
|
|
|
|
margin: 0 0 30px;
|
|
|
|
font-size: 24px;
|
|
|
|
line-height: 1.4;
|
|
|
|
font-weight: normal;
|
|
|
|
a,
|
|
|
|
img {
|
|
|
|
display: block;
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.card-label-desc {
|
|
|
|
margin: 0 0 14px;
|
|
|
|
font-size: 20px;
|
|
|
|
line-height: 1.4;
|
|
|
|
height: 67.1999999999px;
|
|
|
|
font-weight: normal;
|
|
|
|
|
|
|
|
a {
|
|
|
|
color: #888;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.card-bd {
|
|
|
|
min-height: 180px;
|
|
|
|
padding-top: 40px;
|
|
|
|
font-size: 0;
|
|
|
|
font-family: "BrownStd", "PingFang SC", Helvetica, Roboto, "Heiti SC", "\9ED1\4F53", Arial;
|
|
|
|
}
|
|
|
|
|
|
|
|
.good-price {
|
|
|
|
color: #b0b0b0;
|
|
|
|
margin-right: 14px;
|
|
|
|
.card-label {
|
|
|
|
margin: 0 0 30px;
|
|
|
|
font-size: 24px;
|
|
|
|
line-height: 1.4;
|
|
|
|
font-weight: normal;
|
|
|
|
}
|
|
|
|
|
|
|
|
&:last-of-type {
|
|
|
|
margin-right: 0;
|
|
|
|
}
|
|
|
|
.card-label-desc {
|
|
|
|
margin: 0 0 14px;
|
|
|
|
font-size: 20px;
|
|
|
|
line-height: 1.4;
|
|
|
|
height: 67.1999999999px;
|
|
|
|
font-weight: normal;
|
|
|
|
|
|
|
|
&.old-price {
|
|
|
|
font-size: 18px;
|
|
|
|
color: #b0b0b0;
|
|
|
|
text-decoration: line-through;
|
|
|
|
a {
|
|
|
|
color: #888;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&.sale-price {
|
|
|
|
color: #000;
|
|
|
|
}
|
|
|
|
.good-price {
|
|
|
|
color: #b0b0b0;
|
|
|
|
margin-right: 14px;
|
|
|
|
font-size: 24px;
|
|
|
|
|
|
|
|
&:last-of-type {
|
|
|
|
margin-right: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
.empty-tip {
|
|
|
|
margin-top: 200px;
|
|
|
|
&.old-price {
|
|
|
|
font-size: 18px;
|
|
|
|
color: #b0b0b0;
|
|
|
|
text-align: center;
|
|
|
|
|
|
|
|
.icon-search {
|
|
|
|
display: inline-block;
|
|
|
|
font-size: 200px;
|
|
|
|
margin-bottom: 56px;
|
|
|
|
}
|
|
|
|
text-decoration: line-through;
|
|
|
|
}
|
|
|
|
|
|
|
|
.empty-tip-cn {
|
|
|
|
font-size: 34px;
|
|
|
|
margin-bottom: 30px;
|
|
|
|
&.sale-price {
|
|
|
|
color: #000;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.empty-tip-en {
|
|
|
|
font-size: 20px;
|
|
|
|
.empty-tip {
|
|
|
|
margin-top: 200px;
|
|
|
|
color: #b0b0b0;
|
|
|
|
text-align: center;
|
|
|
|
|
|
|
|
.icon-search {
|
|
|
|
display: inline-block;
|
|
|
|
font-size: 200px;
|
|
|
|
margin-bottom: 56px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.empty-tip-cn {
|
|
|
|
font-size: 34px;
|
|
|
|
margin-bottom: 30px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.empty-tip-en {
|
|
|
|
font-size: 20px;
|
|
|
|
}
|
|
|
|
</style> |
...
|
...
|
|
