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>