116 lines
2.7 KiB
Vue
116 lines
2.7 KiB
Vue
<template>
|
|
<div class="layout">
|
|
<div v-for="item in list" :key="item.id" class="shop" @click="handleClick(item)">
|
|
<div class="pl_img">
|
|
<img :src="item.thumbnail" alt="" />
|
|
<div class="price" style="font-size: 20px">
|
|
<div>价格:{{ item.price }}￥</div>
|
|
<div>限量:{{ item.geQuantity }}</div>
|
|
</div>
|
|
</div>
|
|
<div style="font-size: 15px">
|
|
<div style="padding: 5px">{{ item.sellingPoint }}</div>
|
|
<div style="padding: 5px">
|
|
{{ item.district }} {{ item.storeAddressDetail }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<uni-load-more :status="loadMoreStatus" :showIcon="true"></uni-load-more>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import * as API_home from "@/api/home";
|
|
export default {
|
|
props: ["res"],
|
|
data() {
|
|
return {
|
|
list: [],
|
|
pageSize: 5,
|
|
pageNumber: 1,
|
|
state: false, // 状态
|
|
loadMoreStatus: "more", // 加载更多状态
|
|
};
|
|
},
|
|
mounted() {
|
|
this.getlist();
|
|
window.addEventListener("scroll", this.handleScroll);
|
|
},
|
|
beforeDestroy() {
|
|
window.removeEventListener("scroll", this.handleScroll);
|
|
},
|
|
methods: {
|
|
getlist() {
|
|
const param = {
|
|
pageSize: this.pageSize,
|
|
pageNumber: this.pageNumber,
|
|
};
|
|
API_home.getbendi(param).then((res) => {
|
|
this.total = res.data.result.total;
|
|
|
|
this.list = res.data.result.records;
|
|
if (res.data.result.records.length < this.pageSize) {
|
|
this.loadMoreStatus = "noMore";
|
|
} else {
|
|
this.loadMoreStatus = "more";
|
|
}
|
|
});
|
|
},
|
|
handleClick(item) {
|
|
uni.navigateTo({
|
|
url: `/pages/product/goods?id=${item.id}&goodsId=${item.goodsId}`,
|
|
});
|
|
},
|
|
handleScroll() {
|
|
const currentHeight = window.scrollY;
|
|
const totalHeight = document.body.scrollHeight;
|
|
if (this.total == this.list.length) {
|
|
this.loadMoreStatus = "noMore";
|
|
return;
|
|
}
|
|
if (window.innerHeight + currentHeight >= totalHeight) {
|
|
this.loadMoreStatus = "loading";
|
|
|
|
this.pageSize += 5;
|
|
this.getlist();
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
@import "./tpl.scss";
|
|
|
|
.layout {
|
|
height: 100%;
|
|
background: #fff;
|
|
// display: flex;
|
|
// justify-content: space-between;
|
|
}
|
|
.shop {
|
|
border: 1px solid #eee;
|
|
}
|
|
.pl_img {
|
|
position: relative;
|
|
height: 180px;
|
|
width: calc(100% - 10px);
|
|
padding: 10px;
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.price {
|
|
width: calc(100% - 30px);
|
|
position: absolute;
|
|
bottom: 10px;
|
|
left: 10px;
|
|
background-color: rgba(217, 217, 217, 0.4);
|
|
color: red;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 5px;
|
|
// margin: 0 10px
|
|
// opacity: 1;
|
|
}
|
|
}
|
|
</style>
|