From 2d08416f5e18cfcd48f268dff7739ff71f7faafe Mon Sep 17 00:00:00 2001
From: clay <209192278@qq.com>
Date: Mon, 16 Jan 2023 21:33:14 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5=E4=BA=A7=E5=93=81=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E6=8C=89=E4=B8=8A=E6=9E=B6=E6=97=B6=E9=97=B4=E6=88=96?=
 =?UTF-8?q?=E7=82=B9=E8=B5=9E=E9=87=8F=E6=8E=92=E5=88=97=E4=BB=A5=E5=8F=8A?=
 =?UTF-8?q?=E4=B8=8A=E6=8B=89=E5=8A=A0=E8=BD=BD=E6=9B=B4=E5=A4=9A=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../productsByThumb.vue}                      | 29 +++---
 components/productsByTime/productsByTime.vue  | 95 +++++++++++++++++++
 pages/index/index.vue                         | 51 ++++------
 pages/report/report.vue                       |  2 +-
 4 files changed, 131 insertions(+), 46 deletions(-)
 rename components/{products/products.vue => productsByThumb/productsByThumb.vue} (82%)
 create mode 100644 components/productsByTime/productsByTime.vue

diff --git a/components/products/products.vue b/components/productsByThumb/productsByThumb.vue
similarity index 82%
rename from components/products/products.vue
rename to components/productsByThumb/productsByThumb.vue
index 5246bb9..5d92239 100644
--- a/components/products/products.vue
+++ b/components/productsByThumb/productsByThumb.vue
@@ -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(_ => {
 
 				})
diff --git a/components/productsByTime/productsByTime.vue b/components/productsByTime/productsByTime.vue
new file mode 100644
index 0000000..827eaea
--- /dev/null
+++ b/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>
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 531fe7b..1dfb68d 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -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 => {
diff --git a/pages/report/report.vue b/pages/report/report.vue
index 4b1833f..8e96b33 100644
--- a/pages/report/report.vue
+++ b/pages/report/report.vue
@@ -28,7 +28,7 @@
 				</u--image>
 				<text class="xpfb_text text">新品发布</text>
 			</view>
-			<products></products>
+			<productsByThumb></productsByThumb>
 		</view>
 
 		<!-- 认证厂家 -->