1.删除商品列表内容

yj-dev
杨杰 3 years ago
parent a50e938d73
commit 1a7f6c16f2
  1. 231
      pages/goods/goods-list/goods-list.vue

@ -9,33 +9,9 @@
data() {
return {
goodsList: [],
loadingText: "正在加载...",
headerTop: "0px",
headerPosition: "fixed",
orderbyList: [{
text: "销量",
selected: true,
orderbyicon: false,
orderby: 0
},
{
text: "价格",
selected: false,
orderbyicon: ['sheng', 'jiang'],
orderby: 0
},
{
text: "好评",
selected: false,
orderbyicon: false,
orderby: 0
}
],
orderby: "sheng"
};
},
onLoad: function(option) { //optionobject
console.log(option.cid); //
if (option.id == 1) {
uni.setNavigationBarTitle({
title: '商品列表'
@ -46,221 +22,26 @@
title: '金币列表'
});
}
//H5
// #ifdef H5
//onLoadhead
let Timer = setInterval(() => {
let uniHead = document.getElementsByTagName('uni-page-head');
if (uniHead.length > 0) {
this.headerTop = uniHead[0].offsetHeight + 'px';
clearInterval(Timer); //
}
}, 1);
// #endif
},
onPageScroll(e) {
//iOS
if (e.scrollTop >= 0) {
this.headerPosition = "fixed";
} else {
this.headerPosition = "absolute";
}
},
//page.json "enablePullDownRefresh": true
onPullDownRefresh() {
setTimeout(() => {
this.reload();
uni.stopPullDownRefresh();
}, 1000);
},
//page.json"onReachBottomDistance"
onReachBottom() {
uni.showToast({
title: '触发上拉加载'
});
let len = this.goodsList.length;
if (len >= 40) {
this.loadingText = "到底了";
return false;
} else {
this.loadingText = "正在加载...";
}
let end_goods_id = this.goodsList[len - 1].goods_id;
for (let i = 1; i <= 10; i++) {
let goods_id = end_goods_id + i;
let p = {
goods_id: goods_id,
img: '/static/img/goods/p' + (goods_id % 10 == 0 ? 10 : goods_id % 10) + '.jpg',
name: '商品名称商品名称商品名称商品名称商品名称',
price: '¥168',
slogan: '1235人付款'
};
this.goodsList.push(p);
}
},
methods: {
reload() {
console.log("reload");
let tmpArr = []
this.goodsList = [];
let end_goods_id = 0;
for (let i = 1; i <= 10; i++) {
let goods_id = end_goods_id + i;
let p = {
goods_id: goods_id,
img: '/static/img/goods/p' + (goods_id % 10 == 0 ? 10 : goods_id % 10) + '.jpg',
name: '商品名称商品名称商品名称商品名称商品名称',
price: '¥168',
slogan: '1235人付款'
};
this.goodsList.push(p);
}
},
//
toGoods(e) {
uni.showToast({
title: '商品' + e.goods_id,
icon: "none"
});
uni.navigateTo({
url: '../goods'
});
},
//
select(index) {
let tmpTis = this.orderbyList[index].text + "排序 "
if (this.orderbyList[index].orderbyicon) {
let type = this.orderbyList[index].orderby == 0 ? '升序' : '降序';
if (this.orderbyList[index].selected) {
type = this.orderbyList[index].orderby == 0 ? '降序' : '升序';
this.orderbyList[index].orderby = this.orderbyList[index].orderby == 0 ? 1 : 0;
}
tmpTis += type
}
this.orderbyList[index].selected = true;
let len = this.orderbyList.length;
for (let i = 0; i < len; i++) {
if (i != index) {
this.orderbyList[i].selected = false;
}
}
uni.showToast({
title: tmpTis,
icon: "none"
});
}
}
}
</script>
<style lang="scss">
.icon {
font-size: 26upx;
}
.header {
width: 92%;
padding: 0 4%;
height: 79upx;
display: flex;
justify-content: space-around;
align-items: flex-end;
position: fixed;
top: 0;
z-index: 10;
background-color: #fff;
border-bottom: solid 1upx #eee;
.target {
width: 20%;
height: 60upx;
display: flex;
justify-content: center;
align-items: center;
font-size: 28upx;
margin-bottom: -2upx;
color: #aaa;
&.on {
color: #555;
border-bottom: 4upx solid #0083f5;
font-weight: 600;
font-size: 30upx;
}
}
}
.place {
background-color: #ffffff;
height: 100upx;
}
.goods-list {
.loading-text {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
height: 60upx;
color: #979797;
font-size: 24upx;
}
.product-list {
width: 92%;
padding: 0 4% 3vw 4%;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
.product {
width: 48%;
border-radius: 20upx;
background-color: #fff;
margin: 0 0 15upx 0;
box-shadow: 0upx 5upx 25upx rgba(0, 0, 0, 0.1);
image {
width: 100%;
border-radius: 20upx 20upx 0 0;
}
.name {
width: 92%;
padding: 8upx 4%;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
text-align: justify;
overflow: hidden;
font-size: 30upx;
}
.info {
display: flex;
justify-content: space-between;
align-items: flex-end;
width: 92%;
padding: 10upx 4% 10upx 4%;
.price {
color: #e65339;
font-size: 30upx;
font-weight: 600;
}
.slogan {
color: #807c87;
font-size: 24upx;
}
}
}
}
}
</style>

Loading…
Cancel
Save