1. 调试完成单页面类型页面 2.绘制完成产品查询页面的左侧菜单

src/api/index.js

@@ -47,4 +47,20 @@ export const formOptionsApi = () => {
 **/
 export const submitFormApi = (data) => {
 	return request.post('/web/inquirySave', data)
+}
+
+/**
+ * @function 获取分类详情信息
+ * @param {string} id 分类id
+**/
+export const categoryInfoApi = (id) => {
+	return request.get(`/web/categoryInfo?id=${id}`)
+}
+
+/**
+ * @function  获取产品新闻分类
+ * @param {string} catgId 最上级id
+**/
+export const prodOrNewsCatgApi = (catgId) => {
+	return request.get(`/web/prodCategory?catgId=${catgId}`)
 }

src/assets/css/common.scss

@@ -30,6 +30,15 @@ button {
 	line-clamp: 2;					
 	-webkit-box-orient: vertical;	//盒子中内容竖直排列
 }
+.rich-text {
+	margin-bottom: 1.25rem;
+	img {
+		max-width: 100%;
+	}
+	p {
+		text-align: left;
+	}
+}
 .form-box {
 	.label-box {
 		margin-bottom: 12rpx;

src/locale/en.json

@@ -44,7 +44,9 @@
 	"Go": "Go",
 	"Center": "Center",
 	"Quick": "Quick",
-	"viewmore": "view more"
+	"viewmore": "view more",
+	"ProductLabel": "Product",
+	"keywords": "keywords"
   },
   "menu": {
     "Home": "Home",

src/locale/zh.json

@@ -44,7 +44,9 @@
 	"Go": "前往",
 	"Center": "中心",
 	"Quick": "快速",
-	"viewmore": "查看更多"
+	"viewmore": "查看更多",
+	"ProductLabel": "产品",
+	"keywords": "关键字"
   },
   "menu": {
     "Home": "首页",

src/pages.json

@@ -17,7 +17,8 @@
 		{
 			"path": "pages/products/index",
 			"style": {
-				"navigationBarTitleText": "Product"
+				"navigationBarTitleText": "Product",
+				"enablePullDownRefresh": true
 			}
 		},
 		{
@@ -29,7 +30,8 @@
 		{
 			"path": "pages/separate/index",
 			"style": {
-				"navigationBarTitleText": "About Us"
+				"navigationBarTitleText": "About Us",
+				"enablePullDownRefresh": true
 			}
 		},
 		{

src/pages/index/index.vue

@@ -191,6 +191,7 @@
 			await getOrdinaryProduct()
 			await getHotNews() 
 		} catch(err) {
+			console.log(err)
 		}
 		uni.stopPullDownRefresh()
 	})

src/pages/inquiry/index.vue

@@ -1,6 +1,6 @@
 <template>
     <view class="pages">
-    	<CustomHeader title="Contact Us"></CustomHeader>
+    	<CustomHeader :title="$t('contactUs.contactUs')"></CustomHeader>
 		
 		<view class="company-information">
 			<view class="main-box">

src/pages/products/index.vue

@@ -1,15 +1,182 @@
 <template>
     <view class="pages">
-    	产品栏目
+    	<CustomHeader :title="$t('common.ProductLabel')"></CustomHeader>
+		
+		<view class="search-box">
+			<uni-easyinput 
+				:inputBorder="false"
+				:clearable="false"
+				v-model="params.keywords" 
+				:placeholder="$t('common.keywords')" 
+				type="search"
+				@confirm="init"
+			>
+			    <template #right>
+					<image 
+					    class="search-icon" 
+						src="@/assets/images/icon/search.png"
+						@click="init"
+					>
+					</image>
+				</template>
+			</uni-easyinput>
+		</view>
+		
+		<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-item 
+					    title-border="none" 
+						:border="false" 
+						:title="item.label" 
+						:show-arrow="false"
+						v-for="(item,index) in catgTree"
+						:key="item.id"
+						:class="collapseValue === String(index) ? 'collapse-active' : ''"
+					>
+						<view 
+						    class="level2-item" 
+							:class="level2 === child.id ? 'level2-item-active' : ''"
+							v-for="child in item.children"
+							:key="child.id"
+							@click="level2 = child.id"
+						>
+							{{child.label}}
+						</view>
+					</uni-collapse-item>
+				</uni-collapse>
+			</scroll-view>
+			
+			<scroll-view class="list-box" :scroll-y="true">
+				
+			</scroll-view>
+		</view>
     </view>
 </template>
 
 <script setup>
 	import { onLoad } from '@dcloudio/uni-app';
 	import { ref } from 'vue';
+	import { prodOrNewsCatgApi } from '@/api';
 	
+	const params = ref({
+		pageNum: 1,
+		pageSize: 10,
+		catgId: undefined,
+		maxCatgId: '660179025d0e2e0e4263db0eec86a8cc',
+		catgId: undefined,
+		keywords: ''
+	})
+	const init = () => {
+		
+	}
+	
+	const collapseRef = ref()
+	const collapseValue = ref('0')
+    const level2 = ref('')
+	const catgTree = ref([])
+	const catgTreeInit = () => {
+		return prodOrNewsCatgApi(params.value.maxCatgId).then(({data:res}) => {
+			catgTree.value = res.data
+			if (res.data.length) {
+				params.value.catgId = res.data[0].children.length ? res.data[0].children[0].id : res.data[0].id
+			}
+		})
+	}
+	
+	
+	onLoad(() => {
+		catgTreeInit()
+	})
 </script>
 
 <style lang="scss" scoped>
-	
+.pages {
+    /* #ifdef H5 */
+    min-height: calc(100vh - 50px);
+    /* #endif */
+	.search-box {
+	    padding: 16rpx;
+		padding-top: calc(var(--status-bar-height) + 60rpx);
+		::v-deep .uni-easyinput {
+			border-radius: 32rpx;
+			border: 2rpx solid #015fe8 !important;
+			overflow: hidden;
+			.uni-easyinput__content-input {
+			}
+			.uni-easyinput__content {
+				padding: 0 15rpx;
+			}
+		}
+		.search-icon {
+			width: 24rpx;
+			height: 24rpx;
+			margin-right: 16rpx;
+		}
+	}
+	.main {
+		width: 100%;
+		display: flex;
+		.menu-box, .list-box  {
+			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;
+				.uni-collapse-item__title-box {
+					background-color: transparent;
+				}
+			}
+			.collapse-active {
+				color: #015fe8;
+				background-color: #ffffff;
+				overflow: hidden;
+				border-top-right-radius: 25rpx;
+				border-bottom-right-radius: 25rpx;
+				box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(148,159,176,0.25);
+				::v-deep .uni-collapse-item__title-text {
+					color: #015fe8;
+				}
+				
+			}
+			.level2-item {
+				width: 100%;
+				padding: 22rpx 16rpx;
+				position: relative;
+				color: #77778b;
+				&:first-child {
+					&::before {
+						content: '';
+						width: 90%;
+						height: 2rpx;
+						position: absolute;
+						top: 0;
+						right: 0;
+					    background-color: #eceef0;
+					}
+				}
+			}
+			.level2-item-active {
+				color: #015fe8;
+				&::after {
+					content: '';
+				    width: 4rpx;
+					height: 100%;
+					position: absolute;
+					left: 0;
+					top: 0;
+					background-color: #015fe8;
+				}
+			}
+		}
+		.list-box {
+			flex: 1;
+		}
+	}
+}
 </style>

src/pages/separate/index.vue

@@ -1,15 +1,41 @@
 <template>
     <view class="pages">
-    	单页面
+    	<CustomHeader :title="$t('aboutUs.AboutUs')"></CustomHeader>
+		<view class="rich-text" v-html="info.contentApp"></view>
     </view>
 </template>
 
 <script setup>
-	import { onLoad } from '@dcloudio/uni-app';
+	import { onLoad, onPullDownRefresh } from '@dcloudio/uni-app';
 	import { ref } from 'vue';
+	import { categoryInfoApi } from '@/api/index.js';
 	
+	const id = ref('66c10877ee325e7f5da316e69ceb2eb9')
+	const info = ref({})
+	const init = () => {
+		return categoryInfoApi(id.value).then(({data:res}) => {
+			info.value = res.data
+		})
+	}
+	
+	onPullDownRefresh(async() => {
+		try {
+			await init()
+		} catch(err) {
+			console.log(err)
+		}
+		uni.stopPullDownRefresh()
+	})
+	
+	onLoad((options) => {
+		init()
+	})
 </script>
 
 <style lang="scss" scoped>
-	
+.pages {
+	.rich-text {
+		padding-top: calc(var(--status-bar-height) + 30rpx);
+	}
+}
 </style>