开发产品分页页面-75%

src/api/index.js

@@ -63,4 +63,11 @@ export const categoryInfoApi = (id) => {
 **/
 export const prodOrNewsCatgApi = (catgId) => {
 	return request.get(`/web/prodCategory?catgId=${catgId}`)
+}
+
+/**
+ * @function 获取产品分页数据
+**/
+export const prodPageApi = (params) => {
+	return request.get('/web/prodPageList', {params})
 }

src/pages/products/index.vue

@@ -24,7 +24,12 @@
 		
 		<view class="main">
 			<scroll-view class="menu-box" :scroll-y="true" v-if="catgTree.length">
-				<uni-collapse ref="collapseRef" v-model="collapseValue" accordion>
+				<uni-collapse 
+				    ref="collapseRef" 
+					v-model="collapseValue" 
+					accordion
+					@change="collapseChange"
+				>
 					<uni-collapse-item 
 					    title-border="none" 
 						:border="false" 
@@ -47,34 +52,98 @@
 				</uni-collapse>
 			</scroll-view>
 			
-			<scroll-view class="list-box" :scroll-y="true">
+			<view class="list-box">
-				
+				<scroll-view class="level3-box" :scroll-x="true" :show-scrollbar="false">
-			</scroll-view>
+					<view 
+					    class="level3-item"
+						:class="level3 === item.id ? 'level3-active' : ''"
+						v-for="(item,index) in catgTreeLevel3" 
+						:key="index"
+						@click="level3 = item.id"
+					>
+						{{item.label}}
+					</view>
+				</scroll-view>
+				<scroll-view class="list-scroll" :scroll-y="true">
+					<view 
+					    class="prod-item"
+						v-for="item in prodList"
+						:key="item.id"
+					>
+						<image :src="item.mainPic" mode="aspectFit"></image>
+						<view class="text-ellipsis">
+							{{item.title}}
+						</view>
+					</view>
+				</scroll-view>
+			</view>
 		</view>
     </view>
 </template>
 
 <script setup>
-	import { onLoad } from '@dcloudio/uni-app';
+	import { onLoad, onShow } from '@dcloudio/uni-app';
-	import { ref } from 'vue';
+	import { ref, computed, watch } from 'vue';
-	import { prodOrNewsCatgApi } from '@/api';
+	import { prodOrNewsCatgApi, prodPageApi } from '@/api';
 	
+	const total = ref(0)
+	const prodList = ref([])
 	const params = ref({
 		pageNum: 1,
 		pageSize: 10,
 		catgId: undefined,
 		maxCatgId: '660179025d0e2e0e4263db0eec86a8cc',
-		catgId: undefined,
+		keywords: '',
-		keywords: ''
 	})
-	const init = () => {
+	const init = (isLoad) => {
-		
+		if (isLoad) {
+			params.value.pageNum += 1
+		} else {
+			params.value.pageNum = 1
+		}
+		return prodPageApi(params.value).then(({data:res}) => {
+			console.log(res)
+			if (isLoad) {
+				prodList.value = [...prodList.value,res.data.records]
+			} else {
+				prodList.value = res.data.records
+			}
+			total.value = res.data.total
+		})
 	}
 	
 	const collapseRef = ref()
 	const collapseValue = ref('0')
     const level2 = ref('')
+	const level3 = ref(undefined)
 	const catgTree = ref([])
+	const catgTreeLevel3 = computed(() => {
+		let arr = []
+		if (collapseValue.value && catgTree.value.length) {
+			let findObj = catgTree.value[Number(collapseValue.value)].children.find(item => item.id === level2.value)
+			if (findObj) {
+				arr = findObj.children
+			}
+		}
+		return [{id:undefined,label:'all'}, ...arr]
+	})
+	const finalCatgId = computed(() => {
+		let id = undefined
+		if(level3.value) {
+			id = level3.value
+		} else if (level2.value) {
+			id = level2.value
+		} else if (collapseValue.value && catgTree.value.length) {
+			id = catgTree.value[Number(collapseValue.value)].id
+		} else {
+			id = params.value.maxCatgId
+		}
+		return id
+	})
+	watch(() => finalCatgId.value, (val) => {
+		params.value.catgId = val
+		init()
+	}, {deep:true})
 	const catgTreeInit = () => {
 		return prodOrNewsCatgApi(params.value.maxCatgId).then(({data:res}) => {
 			catgTree.value = res.data
@@ -83,10 +152,17 @@
 			}
 		})
 	}
+	const collapseChange = (e) => {
+		level2.value = undefined
+		level3.value = undefined
+	}
 	
-	
+	onShow(() => {
-	onLoad(() => {
+		
-		catgTreeInit()
+	})
+	onLoad(async() => {
+		await catgTreeInit()
+		init()
 	})
 </script>
 
@@ -117,14 +193,12 @@
 	.main {
 		width: 100%;
 		display: flex;
-		.menu-box, .list-box  {
+		.menu-box {
+			width: 32%;
 			height: calc(100vh - 50px - (var(--status-bar-height)) - 34px);
 			/* #ifdef H5 */
 			height: calc(100vh - 50px - (var(--status-bar-height)) - 81px);
 			/* #endif */
-		}
-		.menu-box {
-			width: 32%;
 			border-right: 2rpx solid #e5edf4;
 			::v-deep .uni-collapse {
 				background-color: transparent;
@@ -175,7 +249,70 @@
 			}
 		}
 		.list-box {
-			flex: 1;
+			width: 68%;
+			padding-left: 16rpx;
+			.level3-box {
+				height: 68rpx;
+				white-space: nowrap;
+				.level3-item {
+					display: inline-block;
+					width: max-content;
+					height: 100%;
+					margin-right: 20rpx;
+					padding: 0 14rpx;
+					line-height: 68rpx;
+				    color: #77778b;
+					background-color: #fff;
+					border-radius: 40rpx;
+					&:first-child {
+						padding: 0 36rpx;
+					}
+					&:last-child {
+						margin-right: 0;
+					}
+				}
+				.level3-active {
+				    color: #015fe8;
+					border: 2rpx solid #015fe8;
+				}
+			}
+			.list-scroll {
+				width: 100%;
+				height: calc(100vh - 50px - 68rpx - (var(--status-bar-height)) - 34px);
+				/* #ifdef H5 */
+				height: calc(100vh - 50px - 68rpx - (var(--status-bar-height)) - 81px);
+				/* #endif */
+				background: linear-gradient(to bottom, #e4ecff 5%,#ffffff 15%);
+				.prod-item {
+					width: 100%;
+					height: 162rpx;
+					display: flex;
+					padding: 18rpx 0;
+					padding-right: 24rpx;
+					position: relative;
+					&::after {
+						content: '';
+						width: calc(100% - 200rpx);
+						height: 2rpx;
+						position: absolute;
+						right: 0;
+						bottom: 0;
+					    background-color: #eceef0;
+					}
+					image {
+						width: 165rpx;
+						height: 100%;
+					}
+					view {
+						flex: 1;
+						height: 99%;
+						padding-left: 34rpx;
+						padding-bottom: 10rpx;
+						color: #323437;
+						-webkit-line-clamp: 3;
+					}
+				}
+			}
 		}
 	}
 }