odjbin/pupil
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

首页产品列表按上架时间或点赞量排列以及上拉加载更多数据

Browse Source
This commit is contained in:
clay
2023-01-16 21:33:14 +08:00
parent b6d023d528
commit 2d08416f5e
4 changed files with 131 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
components/products/products.vue → components/productsByThumb/productsByThumb.vue
View File

@@ -43,25 +43,24 @@
productList: [],
pageNum: 1, // 当前页
pageSize: 4, // 每页条数
sortType: ''
}
},
created() {
uni.$on("getCurrent", data => {
if (data == 0) {
this.sortType = 1
} else if (data == 1) {
this.sortType = 2
}
})
this.getProducts()
// uni.$on("getCurrent", data => {
// if (data == 0) {
// this.sortType = 1
// } else if (data == 1) {
// this.sortType = 2
// }
// })
this.getProductsByThumb()
this.imgUrl = uni.getStorageSync('img_url')
},
methods: {
//获取产品列表
getProducts() {
//获取按点赞量排列的产品列表
getProductsByThumb() {
this.$apiServe.getProducts({
sortType: this.sortType,
sortType: 2,
pageSize: this.pageSize,
pageNum: this.pageNum
}).then(res => {
@@ -71,11 +70,11 @@
this.tagsArray = tag.split(',')
item.tags = this.tagsArray[0]
}
// this.$emit("getChild", tags.length);
this.$emit("getThumbLength", tags.length);
// 用于触底刷新 为数据赋值：通过展开运算符的形式，进行新旧数据的拼接
// this.productList = [...this.productList, ...res.data.data]
this.productList = [...this.productList, ...res.data.data]
//这用于上架时间和点赞量的数据切换
this.productList = res.data.data
// this.productList = res.data.data
}).finally(_ => {
})

95
components/productsByTime/productsByTime.vue Normal file
View File

@@ -0,0 +1,95 @@
<template>
<view>
<view class="products_box">
<u-grid :border="false" col="2">
<u-grid-item v-for="(item,index) in productList" :key="index" @click="toDetailPage(item)">
<u-image src="/static/products/sy_bb.png" width="354rpx" height="539rpx" :lazy-load="true">
</u-image>
<view class="bgContent">
<view>
<u-image :src="imgUrl+item.cover" width="346rpx" height="320rpx" :lazy-load="true">
</u-image>
<view class="img_tag">{{item.cate_name}}</view>
</view>
<view style="padding: 14rpx 22rpx;">
<view class="title_box">
<text class="title">{{item.name}}</text>
<u-tag :text="item.tags" type="warning" shape="circle"></u-tag>
</view>
<view class="product_desc">
{{item.title}}
</view>
<view class="releaseDate">
<u-image src="/static/products/xp_icon_sjf.png" width="22rpx" height="22rpx"
:lazy-load="true">
</u-image>
<text class="release">发布日期：</text>
<text>{{item.pub_time_str}}</text>
</view>
</view>
</view>
</u-grid-item>
</u-grid>
</view>
</view>
</template>
<script>
export default {
data() {
return {
imgUrl: '',
tagsArray: [],
productList: [],
pageNum: 1, // 当前页
pageSize: 4, // 每页条数
// sortType: ''
}
},
created() {
// uni.$on("getCurrent", data => {
// if (data == 0) {
// this.sortType = 1
// } else if (data == 1) {
// this.sortType = 2
// }
// })
this.getProductsByTime()
this.imgUrl = uni.getStorageSync('img_url')
},
methods: {
//获取按上架时间排列的产品列表
getProductsByTime() {
this.$apiServe.getProducts({
sortType: 1,
pageSize: this.pageSize,
pageNum: this.pageNum
}).then(res => {
let tags = res.data.data
for (const item of tags) {
let tag = item.tags
this.tagsArray = tag.split(',')
item.tags = this.tagsArray[0]
}
this.$emit("getTimeLength", tags.length);
// 用于触底刷新 为数据赋值：通过展开运算符的形式，进行新旧数据的拼接
this.productList = [...this.productList, ...res.data.data]
//这用于上架时间和点赞量的数据切换
// this.productList = res.data.data
}).finally(_ => {
})
},
//点击图片跳转到详情页
toDetailPage(item) {
uni.navigateTo({
url: '/pages/detail/productsDetail/productsDetail?id=' + item.id
})
}
}
}
</script>
<style lang="scss">
</style>

51
pages/index/index.vue
View File

@@ -34,7 +34,10 @@
</u-tabs>
</view>
<!-- 产品 -->
<products ref="getProductsByTime"></products>
<productsByTime v-if="tabCurrent==0" ref="productsByTime" @getTimeLength="getTimeLength">
</productsByTime>
<productsByThumb v-if="tabCurrent==1" ref="productsByThumb" @getThumbLength="getThumbLength">
</productsByThumb>
<view style="font-size: 24rpx;color: #A3A3A3;text-align: center;padding: 26rpx 0;"
v-show="reachBottomLength===0">
没有更多数据了</view>
@@ -60,15 +63,16 @@
imgUrl: '',
swiperList: [],
reachBottomLength: '',
productList: [],
pageNum: 1,
sortType: ''
}
},
onReachBottom() {
this.pageNum += 1
if (this.reachBottomLength !== 0) {
this.getNewProducts()
if (this.tabCurrent == 0 && this.reachBottomLength !== 0) {
this.$refs.productsByTime.pageNum++
this.$refs.productsByTime.getProductsByTime()
}
if (this.tabCurrent == 1 && this.reachBottomLength !== 0) {
this.$refs.productsByThumb.pageNum++
this.$refs.productsByThumb.getProductsByThumb()
}
},
onLoad() {
@@ -78,36 +82,23 @@
this.imgUrl = uni.getStorageSync('img_url')
},
methods: {
//获取按上架时间排列的产品列表length
getTimeLength(e) {
this.reachBottomLength = e
},
//获取按点赞量排列的产品列表length
getThumbLength(e) {
this.reachBottomLength = e
},
//点击上架时间和点赞量切换页面
tabChange(data) {
this.tabCurrent = data.index
uni.$emit("getCurrent", data.index);
if (data.index == 0) {
this.sortType = 1
this.$refs.productsByTime.getProductsByTime()
} else if (data.index == 1) {
this.$refs.getProductsByTime.getProducts()
this.sortType = 2
this.$refs.productsByThumb.getProductsByThumb()
}
},
//下拉刷新获取新数据
getNewProducts() {
this.$apiServe.getProducts({
sortType: this.sortType,
pageSize: 4,
pageNum: this.pageNum
}).then(res => {
let tags = res.data.data
for (const item of tags) {
let tag = item.tags
this.tagsArray = tag.split(',')
item.tags = this.tagsArray[0]
}
if (tags.length === 0) {
this.reachBottomLength = tags.length
}
this.$refs.getProductsByTime.productList.push(...res.data.data)
})
},
//获取一级分类
getCategories() {
this.$apiServe.getCategories().then(res => {

2
pages/report/report.vue
View File

@@ -28,7 +28,7 @@
</u--image>
<text class="xpfb_text text">新品发布</text>
</view>
<products></products>
<productsByThumb></productsByThumb>
</view>
<!-- 认证厂家 -->