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

components/productsByTime/productsByTime.vue

@@ -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>