156 lines
3.7 KiB
Vue
156 lines
3.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="imgfun(item.thumbnail)" alt="" width="100" height="100"/>
|
|
</div>
|
|
<div class="right">
|
|
<div style="font-size:18px">{{ item.goodsName }}
|
|
</div>
|
|
<div>收藏:{{ item.commentNum }}
|
|
</div>
|
|
<div class="proice">价格:￥{{ item.price }}</div>
|
|
|
|
<div class="flex store-distance">
|
|
<div>
|
|
<template v-for="i in 5">
|
|
<u-icon :name="i <= item.descriptionScore ? 'star-fill' : 'star'" class="proice" size="30"></u-icon>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
<div>地址:{{ item.storeAddressPath }}</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", "isload"],
|
|
data() {
|
|
return {
|
|
list: [],
|
|
pageSize: 5,
|
|
pageNumber: 1,
|
|
state: false, // 状态
|
|
loadMoreStatus: "more", // 加载更多状态
|
|
};
|
|
},
|
|
onReachBottom() {
|
|
console.log("触底了");
|
|
},
|
|
|
|
mounted() {
|
|
this.getlist();
|
|
// 移除原有的滚动监听
|
|
// window.addEventListener('scroll', this.handleScroll);
|
|
},
|
|
beforeDestroy() {
|
|
// 移除原有的滚动监听
|
|
// window.removeEventListener('scroll', this.handleScroll);
|
|
},
|
|
watch: {
|
|
isload(val) {
|
|
console.log(val);
|
|
this.loadMon();
|
|
// this.getlist();
|
|
},
|
|
},
|
|
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();
|
|
}
|
|
},
|
|
loadMon() {
|
|
if (this.loadMoreStatus === "noMore") return;
|
|
if (this.total == this.list.length) {
|
|
this.loadMoreStatus = "noMore";
|
|
return;
|
|
}
|
|
this.loadMoreStatus = "loading";
|
|
this.pageNumber++;
|
|
const param = {
|
|
pageSize: this.pageSize,
|
|
pageNumber: this.pageNumber,
|
|
};
|
|
API_home.getbendi(param).then((res) => {
|
|
const newRecords = res.data.result.records;
|
|
this.list = this.list.concat(newRecords);
|
|
if (newRecords.length < this.pageSize) {
|
|
this.loadMoreStatus = "noMore";
|
|
} else {
|
|
this.loadMoreStatus = "more";
|
|
}
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
@import "./tpl.scss";
|
|
|
|
.layout {
|
|
height: 100%;
|
|
background: #fff;
|
|
}
|
|
.shop {
|
|
border: 1px solid #eee;
|
|
display: flex;
|
|
.pl_img{
|
|
// width: 100px;
|
|
// height: 100px;
|
|
padding: 10px;
|
|
// &>img{
|
|
// width: 100%;
|
|
// height: 100%;
|
|
// }
|
|
}
|
|
.right{
|
|
// flex: 1;
|
|
padding: 10px;
|
|
font-size: 12px;
|
|
|
|
}
|
|
}
|
|
.proice{
|
|
color: $light-color;
|
|
}
|
|
</style>
|