分类页接口对接

packageSearch/goods-category-search/category-index.vue

@@ -62,17 +62,17 @@
 								:activeStyle="{color: '#15CA65', fontWeight: '400', transform: 'scale(1.05)', size:'14px'}"
 								lineHeight="4" :current="tabCurrent" @change="tabChange"></u-tabs>
 						</view>
-						<scroll-view scroll-y class="goods-list">
+						<scroll-view scroll-y class="goods-list" @scrolltolower="reachGoodsBottom">
 							<block v-for="(item1,index1) in goodsList" :key="index1">
 								<view class="goods-item">
 									<view class="left">
 										<view class="image">
-											<image :src="item1.image" mode="scaleToFill"
+											<image :src="item1.imageF" mode="scaleToFill"
 												style="width: 170rpx;height: 100%;"></image>
 										</view>
 										<view class="tag">
 											<view class="tag-content">
-												<text>{{item.name}}</text>
+												<text>{{item1.cate_name}}</text>
 											</view>
 										</view>
 									</view>
@@ -81,7 +81,7 @@
 											<text>{{item1.name}}</text>
 										</view>
 										<view class="describe">
-											<text>{{item1.describe}}</text>
+											<text>{{item1.title}}</text>
 										</view>
 										<view class="publish-date">
 											<view class="publish-date-box">
@@ -90,13 +90,18 @@
 													<u-icon size="16" name="clock" color="#A3A3A3" />
 												</view>
 												<text style="margin-right: 6rpx;">发布日期</text>
-												<text>{{item1.date}}</text>
+												<text>{{item1.pub_time_str}}</text>
 											</view>
 										</view>
 										<view class="tag">
-											<view class="tag-content">
+											<template v-if="item1.tagList.length">
-												<text>{{ item1.feature }}</text>
+												<view class="tag-content">
-											</view>
+													<text>{{ item1.tagList[0] }}</text>
+												</view>
+											</template>
+											<!-- <view v-for="(tagObject, index) in item1.tagList" class="tag-content">
+												<text>{{ tagObject }}</text>
+											</view> -->
 										</view>
 									</view>
 								</view>
@@ -167,153 +172,13 @@
 				queryParam: '',
 				showMask: false,
 				featureMask: false,
-				categoryList: [{
+				categoryList: [],
-						name: '烘焙宝典',
-						icon: '/static/classify/sy_icon_hp.png',
-						active: true
-					},
-					{
-						name: '零食铺子',
-						icon: '/static/classify/sy_icon_ls.png',
-						active: false
-					},
-					{
-						name: '饮品大全',
-						icon: '/static/classify/sy_icon_yp.png',
-						active: false
-					},
-					{
-						name: '调味菜单',
-						icon: '/static/classify/sy_icon_tw.png',
-						active: false
-					},
-					{
-						name: '肉食荟萃',
-						icon: '/static/classify/sy_icon_rs.png',
-						active: false
-					},
-					{
-						name: '乳品手册',
-						icon: '/static/classify/sy_icon_np.png',
-						active: false
-					},
-					{
-						name: '果蔬地图',
-						icon: '/static/classify/sy_icon_gs.png',
-						active: false
-					},
-					{
-						name: '食界新贵',
-						icon: '/static/classify/sy_icon_sj.png',
-						active: false
-					},
-					{
-						name: '欢喜盒子',
-						icon: '/static/classify/sy_icon_hz.png',
-						active: false
-					},
-					{
-						name: '创意工具',
-						icon: '/static/classify/sy_icon_cy.png',
-						active: false
-					}
-				],
 				selectedCategory: 0,
-				tabbar: [
+				tabbar: [],
-				// 	{
-				// 		"name": "蛋糕面包",
-				// 		"foods": [{
-				// 				"name": "牛角面包",
-				// 				"describe": "法国风味糖皮饼干牛角面包早餐食品",
-				// 				"image": "/static/category/fl_icon_qb.png",
-				// 				"date": '2022-12-04',
-				// 				'feature': '无防腐剂'
-				// 			},
-				// 			{
-				// 				"name": "牛角面包",
-				// 				"describe": "法国风味糖皮饼干牛角面包早餐食品",
-				// 				"image": "/static/category/fl_icon_qb.png",
-				// 				"date": '2022-12-04',
-				// 				'feature': '无防腐剂'
-				// 			},
-				// 			{
-				// 				"name": "牛角面包",
-				// 				"describe": "法国风味糖皮饼干牛角面包早餐食品",
-				// 				"image": "/static/category/fl_icon_qb.png",
-				// 				"date": '2022-12-04',
-				// 				'feature': '无防腐剂'
-				// 			},
-				// 			{
-				// 				"name": "牛角面包",
-				// 				"describe": "法国风味糖皮饼干牛角面包早餐食品",
-				// 				"image": "",
-				// 				"date": '2022-12-04',
-				// 				'feature': '无防腐剂'
-				// 			}
-				// 		]
-				// 	},
-				// 	{
-				// 		"name": "糕点卷酥",
-				// 		"foods": [{
-				// 				"name": "牛角面包",
-				// 				"describe": "法国风味糖皮饼干牛角面包早餐食品",
-				// 				"image": "/static/category/fl_icon_qb.png",
-				// 				"date": '2022-12-04',
-				// 				'feature': '无防腐剂'
-				// 			},
-				// 			{
-				// 				"name": "牛角面包",
-				// 				"describe": "法国风味糖皮饼干牛角面包早餐食品",
-				// 				"image": "/static/category/fl_icon_qb.png",
-				// 				"date": '2022-12-04',
-				// 				'feature': '无防腐剂'
-				// 			},
-				// 			{
-				// 				"name": "牛角面包",
-				// 				"describe": "法国风味糖皮饼干牛角面包早餐食品",
-				// 				"image": "/static/category/fl_icon_qb.png",
-				// 				"date": '2022-12-04',
-				// 				'feature': '无防腐剂'
-				// 			}
-				// 		]
-				// 	},
-				// 	{
-				// 		"name": "饼干曲奇",
-				// 		"foods": [{
-				// 				"name": "牛角面包",
-				// 				"describe": "法国风味糖皮饼干牛角面包早餐食品",
-				// 				"image": "/static/category/fl_icon_qb.png",
-				// 				"date": '2022-12-04',
-				// 				'feature': '无防腐剂'
-				// 			},
-				// 			{
-				// 				"name": "牛角面包",
-				// 				"describe": "法国风味糖皮饼干牛角面包早餐食品",
-				// 				"image": "/static/category/fl_icon_qb.png",
-				// 				"date": '2022-12-04',
-				// 				'feature': '无防腐剂'
-				// 			},
-				// 			{
-				// 				"name": "牛角面包",
-				// 				"describe": "法国风味糖皮饼干牛角面包早餐食品",
-				// 				"image": "/static/category/fl_icon_qb.png",
-				// 				"date": '2022-12-04',
-				// 				'feature': '无防腐剂'
-				// 			},
-				// 			{
-				// 				"name": "牛角面包",
-				// 				"describe": "法国风味糖皮饼干牛角面包早餐食品",
-				// 				"image": "/static/category/fl_icon_qb.png",
-				// 				"date": '2022-12-04',
-				// 				'feature': '无防腐剂'
-				// 			}
-				// 		]
-				// 	},
-				],
 				goodsParam: {
-					sortType: null,
+					sortType: 0,
-					cateId: null,
+					cateId: 0,
-					tagIds: null,
+					tagIds: 0,
 					pageSize: 10,
 					pageNum: 1
 				},
@@ -330,7 +195,8 @@
 				menuItemHeight: 0, // 左边菜单item的高度
 				tabCurrent: 0, //分类详情  上架时间, // 左边菜单item的高度
 				tagCurrent: 0, //分类详情  上架时间
-				imgUrl: ''
+				imgUrl: '',
+				isAllData: false
 			}
 		},
 		onLoad() {
@@ -338,6 +204,8 @@
 			this.searchBarTop = menuButtonInfo.top;
 			this.searchBarHeight = menuButtonInfo.height;
 			this.imgUrl = uni.getStorageSync('img_url')
+			this.goodsList = []
+			this.isAllData = false
 			this.getCategoryList()
 		},
 		onReady() {
@@ -377,7 +245,7 @@
 				});
 				this.selectedCategory = index
 				this.tabCurrent = 0
-				this.tagCurrent = null
+				this.tagCurrent = 0
 				this.menuCurrent = 0
 				this.getSeconedCategoryList()
 				this.showMask = false
@@ -385,7 +253,7 @@
 			changeSelectedTag(index) {
 				this.tagCurrent = index
 				this.featureMask = false
-				this.getGoodsList()
+				this.getGoodsList(true)
 			},
 			// 点击左边的栏目切换
 			async swichMenu(index) {
@@ -428,7 +296,7 @@
 			tabChange(selectTab) {
 				console.log(selectTab)
 				this.tabCurrent = selectTab.index;
-				this.getGoodsList()
+				this.getGoodsList(true)
 			},
 			navigateToSearch() {
 				uni.navigateTo({
@@ -472,27 +340,56 @@
 						return item
 					})
 				}).finally(_ => {
-					this.getGoodsList()
+					this.getGoodsList(true)
 				})
 			},
-			getGoodsList() {
+			getGoodsList(firstPage) {
+				this.isAllData = false
 				const data = {
 					...this.goodsParam,
 					sortType: this.tabCurrent + 1,
-					cateId: this.tabbar.length ? this.tabbar[this.menuCurrent].id : null,
+					cateId: this.tabbar.length ? this.tabbar[this.menuCurrent].id : 0,
-					tagIds: this.tagsList.length ? this.tagsList[this.tagCurrent].id : null
+					tagIds: this.tagsList.length ? this.tagsList[this.tagCurrent].id : 0
+				}
+				if (firstPage) {
+					this.goodsList = []
+					this.goodsParam.pageNum = 1
 				}
 				this.$apiServe.getProductList(data).then(res => {
-					this.goodsList = res.data.data.map((item, index) => {
+					if (res.data.data.length > 0) {
-						item.icon = this.imgUrl + item.icon
+						res.data.data.map((item, index) => {
-						return item
+							item.tagList = item.tags.split(',')
-					})
+							item.imageF = this.imgUrl + item.images
+							this.goodsList.push(item)
+							// return item
+						})
+					} else {
+						this.isAllData = true
+						this.$toast.warn('没有更多数据了')
+					}
+
 				}).finally(_ => {})
 			},
+			reachGoodsBottom() {
+				console.log('-----触底')
+				//触底事件
+				if (!this.isAllData) {
+					uni.showLoading({
+						title: '加载中'
+					});
+					this.goodsParam.pageNum++
+					this.getGoodsList(false)
+				} else {
+					this.$toast.warn('没有更多数据了')
+				}
+				setTimeout(() => {
+					uni.hideLoading()
+				}, 500)
+			},
 			goBack() {
 				uni.navigateBack()
-			},
+			}
-		}
+		},
 	}
 </script>
 
@@ -714,7 +611,6 @@
 								border-radius: 25rpx 0 0 25rpx;
 								line-height: 14rpx;
 								background: linear-gradient(135deg, #0DB658 0%, #16DD6D 100%);
-								;
 								color: #fff;
 								font-size: 20rpx;
 								width: fit-content;
@@ -765,14 +661,25 @@
 						}
 
 						.tag {
+							line-height: 60rpx;
+							// display: flex;
+							// text-overflow: clip;
+							// display: -webkit-box;
+							// -webkit-box-orient: vertical;
+							// /* 这里是超出几行省略 */
+							// -webkit-line-clamp: 1;
+							overflow: hidden;
+
 							.tag-content {
-								padding: 10rpx 18rpx;
+								display: inline;
+								padding: 9rpx 17rpx;
 								border-radius: 25rpx;
 								line-height: 13rpx;
 								background-color: #FDD96A;
 								color: #fff;
 								font-size: 22rpx;
 								width: fit-content;
+								// margin-right: 6rpx;
 							}
 						}
 					}