产品列表, 按上架时间和点赞量排序

components/products/products.vue

@@ -43,9 +43,17 @@
 				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()
 			this.imgUrl = uni.getStorageSync('img_url')
 		},
@@ -53,21 +61,21 @@
 			//获取产品列表
 			getProducts() {
 				this.$apiServe.getProducts({
+					sortType: this.sortType,
 					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("getChild", tags.length);
-
-					// 为数据赋值：通过展开运算符的形式，进行新旧数据的拼接
-					this.productList = [...this.productList, ...res.data.data]
-
+					// this.$emit("getChild", tags.length);
+					// 用于触底刷新  为数据赋值：通过展开运算符的形式，进行新旧数据的拼接 
+					// this.productList = [...this.productList, ...res.data.data]
+					//这用于上架时间和点赞量的数据切换
+					this.productList = res.data.data
 				}).finally(_ => {
 
 				})

pages/index/index.vue

@@ -33,14 +33,14 @@
 			</view> -->
 			<!-- 选项卡: 上架时间和点赞量 -->
 			<view>
-				<u-tabs :list="tabList" lineColor="#15CA65" :is-scroll="false"
-					activeStyle="color:#15CA65;font-weight: bold;">
+				<u-tabs :list="tabList" lineColor="#15CA65" scrollable="false"
+					activeStyle="color:#15CA65;font-weight: bold;" :current="tabCurrent" @change="tabChange">
 				</u-tabs>
 			</view>
 			<!-- 产品 -->
-			<products ref="getProducts" @getChild="getChild()"></products>
+			<products ref="getProductsByTime"></products>
 			<view style="font-size: 24rpx;color: #A3A3A3;text-align: center;padding: 26rpx 0;"
-				v-if="reachBottomLength==0">
+				v-show="reachBottomLength===0">
 				没有更多数据了</view>
 		</view>
 	</view>
@@ -49,10 +49,12 @@
 	import {
 		serverHost
 	} from '@/service/request.js'
+	import loginVue from '../my/login/login.vue'
 	export default {
 		data() {
 			return {
 				classifyList: [],
+				tabCurrent: 0,
 				tabList: [{
 						name: '上架时间'
 					},
@@ -62,13 +64,16 @@
 				],
 				imgUrl: '',
 				swiperList: [],
-				reachBottomLength: ''
+				reachBottomLength: '',
+				productList: [],
+				pageNum: 1,
+				sortType: ''
 			}
 		},
 		onReachBottom() {
-			this.$refs.getProducts.pageNum += 1
+			this.pageNum += 1
 			if (this.reachBottomLength !== 0) {
-				this.$refs.getProducts.getProducts()
+				this.getNewProducts()
 			}
 		},
 		onLoad() {
@@ -79,6 +84,37 @@
 			this.imgUrl = uni.getStorageSync('img_url')
 		},
 		methods: {
+			//点击上架时间和点赞量切换页面
+			tabChange(data) {
+				this.tabCurrent = data.index
+				uni.$emit("getCurrent", data.index);
+				if (data.index == 0) {
+					this.sortType = 1
+				} else if (data.index == 1) {
+					this.$refs.getProductsByTime.getProducts()
+					this.sortType = 2
+				}
+			},
+			//下拉刷新获取新数据
+			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)
+				})
+			},
+			//获取token
 			getToken() {
 				var that = this
 				uni.login({
@@ -111,9 +147,9 @@
 				// console.log("手机code : ", code);
 			},
 			//获取子组件的getProducts方法返回数据的length，用于当length为0时取消发送请求
-			getChild(e) {
-				this.reachBottomLength = e
-			},
+			// getChild(e) {
+			// 	this.reachBottomLength = e
+			// },
 			//获取一级分类
 			getCategories() {
 				this.$apiServe.getCategories().then(res => {

service/request.js

@@ -182,7 +182,7 @@ const apiService = {
 	},
 	// 获取产品列表
 	getProducts(data) {
-		const url = `/home/product?sortType=1`
+		const url = `/home/product`
 		return new Promise((resolve, reject) => {
 			resolve(service.get(url, data))
 		})