<template>
<waterfall class="waterfall" column-count="2" left-gap="20" gap="30" right-gap="20" show-scrollbar="false">
<cell class="cell" v-for="(products, index) in productList" :key="index">
<div class="item" @click="skipdetails(index)">
<image
:src="products.img"
resize="stretch"
class="waterfall-imgs"
:style="{ width: products.imgwidth + 'px', height: products.imgheight + 'px' }"
:index="index"
@load="loadImg"
></image>
<count-down class="jiepai"></count-down>
<div class="waterfall-title">{{ products.title }}</div>
<view class="waterfall-price">
<view class="align-center">
<text class="price-text">当前:</text>
<text class="waterfall-price-text">{{ products.price }}</text>
</view>
<image class="img" src="../../../static/canpai/chuju.png"></image>
</view>
</div>
</cell>
<loading @loading="loadmore" class="loading" :display="loadMore ? 'show' : 'hide'">
<loading-indicator class="loading-indicator"></loading-indicator>
<text class="loading-txt">{{ loadMoreText }}</text>
</loading>
</waterfall>
</template>
<script>
import countDown from '../../../components/custom/countdown.vue';
var page = 1;
//引入产品数据
var dataObj = require('../../../graceUI/demoData/data.js');
var products = dataObj.products;
export default {
data() {
return {
token:'',
loadMoreText: '... 加载更多 ...',
productList: [],
loadMore: false
};
},
created: function() {
this.getList();
},
components: {
countDown
},
methods: {
...mapActions('center', ['getAuction']),
loadmore: function() {
this.getList();
},
loadImg: function(e) {
var width = e.size.naturalWidth;
var height = e.size.naturalHeight;
var index = e.currentTarget.attr.index;
var newItem = this.productList[index];
newItem.imgwidth = 350;
newItem.imgheight = (height / width) * 350;
this.productList.splice(index, 1, newItem);
},
skipdetails: function(index) {
console.log(index);
},
getList: function() {
var _self = this;
this.loadMore = true;
this.loadMoreText = '... 加载中 ...';
if (page > 3) {
this.loadMoreText = '定海神针告诉您已经到底了 (:';
setTimeout(function() {
_self.loadMore = false;
}, 1000);
return;
}
this.loadingType = 1;
setTimeout(function() {
for (let i = 0; i < products.length; i++) {
products[i].imgwidth = '500';
products[i].imgheight = '500';
}
if (page == 1) {
_self.productList = dataObj.getArrRandomly(products); //打乱排序【模拟api】
} else {
_self.productList = _self.productList.concat(dataObj.getArrRandomly(products));
}
page++;
_self.loadMoreText = '... 加载更多 ...';
_self.loadMore = false;
}, 1000);
}
}
};
</script>
<style scoped>
.waterfall {
width: 750px;
background-color: #f1f1f1;
}
.waterfall-imgs {
flex: 1;
}
.cell {
padding-top: 10px;
padding-bottom: 10px;
}
.item {
border-radius: 10px;
background-color: #ffffff;
}
.waterfall-title {
width: 300px;
margin-left: 18px;
line-height: 50px;
font-size: 30px;
color: #333333;
font-weight: 500;
}
.waterfall-price {
width: 300px;
height: 70px;
margin-left: 18px;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.align-center {
flex-direction: row;
align-items: flex-end;
}
.price-text {
color: #ff4400;
font-size: 18px;
line-height: 50px;
}
.waterfall-price-text {
font-size: 30px;
color: #ff0036;
font-weight: 500;
line-height: 50px;
}
.waterfall-tags {
width: 100px;
height: 60px;
line-height: 60px;
font-size: 25px;
text-align: center;
background-color: #ff0036;
color: #ffffff;
border-radius: 5px;
}
.img {
width: 68px;
height: 34px;
}
.loading {
height: 100px;
justify-content: center;
align-items: center;
}
.jiepai {
width: 240px;
height: 36px;
background-color: #b71e2f;
border-bottom-right-radius: 15px;
border-top-right-radius: 15px;
top: -35px;
}
.loading-txt {
color: #999999;
font-size: 24upx;
}
</style>