1

src/api/index.js

@@ -79,3 +79,11 @@ export const prodPageApi = (params) => {
 export const prodOrNewsInfoApi = (id) => {
 	return request.get(`/web/prodNewsInfo?id=${id}`)
 }
+
+/**
+ * @function 获取公用页面的maxCataIg
+ * @param {string} catgName 分类名称
+**/
+export const appMaxCatgIdApi = (catgName) => {
+	return request.get(`/web/getCatgIdApp?catgName=${catgName}`)
+}

src/application/product-details.vue

@@ -165,6 +165,18 @@
 				</view>
 			</view>
 		</view>
+		
+		<view class="footer-box">
+			<Apps />
+			<view class="operation-box">
+				<view>
+					{{$t('common.sendInquiry')}}
+				</view>
+				<view>
+					{{$t('common.chatNow')}}
+				</view>
+			</view>
+		</view>
     </view>
 </template>
 
@@ -288,8 +300,9 @@
 
 <style lang="scss" scoped>
 .pages {
-	overflow: hidden;
 	padding: 0 18rpx;
+	padding-bottom: 200rpx;
+	overflow: hidden;
 	::v-deep .tabs {
 		justify-content: space-around;
 		.tabs-item {
@@ -377,5 +390,37 @@
 		color: #292d2e;
 		font-weight: bold;
 	}
+	.footer-box {
+		width: 100%;
+		height: min-content;
+		padding: 18rpx;
+		position: fixed;
+		left: 0;
+		bottom: 0;
+		background-color: #fff;
+		box-shadow: 0rpx -4rpx 8rpx 0rpx #EBEFF2;
+		.operation-box {
+			margin-top: 20rpx;
+			display: flex;
+			align-items: center;
+			view {
+				flex: 1;
+				height: 76rpx;
+				line-height: 76rpx;
+				text-align: center;
+				color: #fff;
+				&:first-child {
+					background: linear-gradient( 270deg, #6B98FE 0%, #0212FF 100%), #015FE8;
+					border-top-left-radius: 10rpx;
+					border-bottom-left-radius: 10rpx;
+				}
+				&:last-child {
+					background: linear-gradient( 90deg, #FF8B07 0%, #FF3403 100%);
+					border-top-right-radius: 10rpx;
+					border-bottom-right-radius: 10rpx;
+				}
+			}
+		}
+	}
 }
 </style>

src/components/apps.vue

@@ -0,0 +1,44 @@
+<template>
+    <view class="apps-box">
+    	<image 
+		    :src="item.icon"
+			v-for="(item,index) in list"
+			:key="index"
+		>
+		</image>
+    </view>
+</template>
+
+<script setup>
+	import { onLoad } from '@dcloudio/uni-app';
+	import { ref } from 'vue';
+	import faceBookImg from '@/assets/images/icon/facebook.png';
+	import XImg from '@/assets/images/icon/X.png';
+	import inImg from '@/assets/images/icon/in.png';
+	import GoogleImg from '@/assets/images/icon/Google.png';
+	import YouTobeImg from '@/assets/images/icon/YouTobe.png';
+	import phoneAppImg from '@/assets/images/icon/phoneApp.png';
+	
+	const list = [
+		{ icon: faceBookImg },
+		{ icon: XImg },
+		{ icon: inImg },
+		{ icon: GoogleImg },
+		{ icon: YouTobeImg },
+		{ icon: phoneAppImg },
+	]
+	
+</script>
+
+<style lang="scss" scoped>
+.apps-box {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	image {
+		width: 44rpx;
+		height: 44rpx;
+		margin-right: 34rpx;
+	}
+}
+</style>

src/locale/en.json

@@ -48,7 +48,9 @@
 	"ProductLabel": "Product",
 	"keywords": "keywords",
 	"Quickcontact": "Quick contact",
-	"sending": "sending"
+	"sending": "sending",
+	"Reset": "Reset",
+	"Sure": "Sure"
   },
   "menu": {
     "Home": "Home",

src/locale/zh.json

@@ -48,7 +48,9 @@
 	"ProductLabel": "产品",
 	"keywords": "关键字",
 	"Quickcontact": "快速联系",
-	"sending": "发送"
+	"sending": "发送",
+	"Reset": "重置",
+	"Sure": "确认"
   },
   "menu": {
     "Home": "首页",

src/main.js

@@ -9,6 +9,7 @@ import CustomHeader from "@/components/custom-header.vue";
 import Tabs from "@/components/tabs.vue";
 import SuspensionBtn from "@/components/suspension-btn.vue";
 import OnlineModal from "@/components/online-modal.vue";
+import Apps from "@/components/apps.vue";
 
 uni.$showTost = function (title='加载失败！',duration=1500,mask=false) {
 	// 变成异步代码，处理一些特殊页面 必须等待消息提示结束后在做操作
@@ -46,6 +47,8 @@ export function createApp() {
 	app.component('Tabs', Tabs)
 	app.component('SuspensionBtn', SuspensionBtn)
 	app.component('OnlineModal', OnlineModal)
+	app.component('Apps', Apps)
+	
 	return {
 		app,
 	};

src/pages/products/index.vue

@@ -9,13 +9,13 @@
 				v-model="params.text" 
 				:placeholder="$t('common.keywords')" 
 				type="search"
-				@confirm="init"
+				@confirm="init()"
 			>
 			    <template #right>
 					<image 
 					    class="search-icon" 
 						src="@/assets/images/icon/search.png"
-						@click="init"
+						@click="init()"
 					>
 					</image>
 				</template>
@@ -44,7 +44,7 @@
 							:class="level2 === child.id ? 'level2-item-active' : ''"
 							v-for="child in item.children"
 							:key="child.id"
-							@click="level2 = child.id"
+							@click="level2Change(child)"
 						>
 							{{child.label}}
 						</view>
@@ -53,17 +53,40 @@
 			</scroll-view>
 			
 			<view class="list-box">
-				<scroll-view class="level3-box" :scroll-x="true" :show-scrollbar="false">
+				<scroll-view class="level3-box" v-if="catgTreeLevel3.length > 1" :scroll-x="true" :show-scrollbar="false">
 					<view 
 					    class="level3-item"
 						:class="level3 === item.id ? 'level3-active' : ''"
 						v-for="(item,index) in catgTreeLevel3" 
 						:key="index"
-						@click="level3 = item.id"
+						@click="level3Change(item)"
 					>
 						{{item.label}}
 					</view>
 				</scroll-view>
+				
+				<view class="level4-box" v-if="catgTreeLevel4Modal">
+					<view class="level4-list">
+						<view 
+						    :class="item.id === level4 ? 'level4-item-active' : ''"
+						    class="level4-item"
+							v-for="item in catgTreeLevel4"
+							:key="item.id"
+							@click="level4 = item.id"
+						>
+							{{item.label}}
+						</view>
+					</view>
+					<view class="footer-box">
+						<view @click="Reset">
+							{{$t('common.Reset')}}
+						</view>
+						<view @click="catgTreeLevel4Modal=false">
+							{{$t('common.Sure')}}
+						</view>
+					</view>
+				</view>
+				
 				<scroll-view 
 				    class="list-scroll" 
 					:scroll-y="true" 
@@ -93,7 +116,7 @@
 <script setup>
 	import { onLoad, onShow } from '@dcloudio/uni-app';
 	import { ref, computed, watch, nextTick } from 'vue';
-	import { prodOrNewsCatgApi, prodPageApi } from '@/api';
+	import { prodOrNewsCatgApi, prodPageApi, appMaxCatgIdApi } from '@/api';
 	
 	const total = ref(0)
 	const prodList = ref([])
@@ -125,6 +148,7 @@
 	const collapseValue = ref('0')
     const level2 = ref('')
 	const level3 = ref(undefined)
+	const level4 = ref(undefined)
 	const catgTree = ref([])
 	const catgTreeLevel3 = computed(() => {
 		let arr = []
@@ -134,8 +158,30 @@
 				arr = findObj.children
 			}
 		}
-		return [{id:undefined,label:'all'}, ...arr]
+		return [{id:undefined,label:'all',children:[]}, ...arr]
 	})
+	const catgTreeLevel4 = ref([])
+	const catgTreeLevel4Modal = ref(false)
+	const level2Change = (row) => {
+		level2.value = row.id
+		level3.value = undefined
+		level4.value = undefined
+		catgTreeLevel4Modal.value = false
+	}
+	const level3Change = (row) => {
+		catgTreeLevel4.value = []
+		level3.value = row.id
+		catgTreeLevel4Modal.value = false
+		if (row.children.length) {
+			catgTreeLevel4.value = row.children
+			catgTreeLevel4Modal.value = true
+		}
+	}
+	const Reset = () => {
+		level4.value = undefined
+		catgTreeLevel4Modal.value = false
+	}
+	
 	const finalCatgId = computed(() => {
 		let id = undefined
 		if(level3.value) {
@@ -149,10 +195,16 @@
 		}
 		return id
 	})
+
 	watch(() => finalCatgId.value, (val) => {
 		params.value.catgId = val
 		init()
 	}, {deep:true})
+	const getMaxCatgId = () => {
+		return appMaxCatgIdApi('Products').then(({data:res}) => {
+			console.log(res)
+		})
+	}
 	const catgTreeInit = () => {
 		return prodOrNewsCatgApi(params.value.maxCatgId).then(({data:res}) => {
 			catgTree.value = res.data
@@ -164,6 +216,8 @@
 	const collapseChange = (e) => {
 		level2.value = undefined
 		level3.value = undefined
+		level4.value = undefined
+		Reset()
 	}
 	
 	const oldScrollTop = ref(0)
@@ -191,6 +245,7 @@
 		
 	})
 	onLoad(async() => {
+		await getMaxCatgId()
 		await catgTreeInit()
 		init()
 	})
@@ -281,6 +336,7 @@
 		.list-box {
 			width: 68%;
 			padding-left: 16rpx;
+			position: relative;
 			.level3-box {
 				height: 68rpx;
 				white-space: nowrap;
@@ -306,6 +362,67 @@
 					border: 2rpx solid #015fe8;
 				}
 			}
+			.level4-box {
+				width: 95%;
+				height: 92%;
+				padding: 18rpx;
+				position: absolute;
+				top: 80rpx;
+				left: 50%;
+				transform: translateX(-50%);
+				background-color: #fff;
+				z-index: 9999;
+				box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(155,163,184,0.25);
+				.level4-list {
+					width: 100%;
+				    height: calc(100% - 72rpx);
+					display: flex;
+					flex-wrap: wrap;
+					overflow-y: auto;
+					.level4-item {
+						width: 48%;
+						height: min-content;
+						margin-right: 2%;
+						padding: 10rpx 0;
+						text-align: center;
+						color: #77778b;
+						border: 1rpx solid #e6e8ed;
+						border-radius: 36rpx;
+						font-size: 24rpx;
+						&:nth-child(2n) {
+							margin-right: 0;
+						}
+					}
+					.level4-item-active {
+						color: #292d2e;
+						background-color: #eceef0;
+						border-color: #d6dce2;
+					}
+				}
+				.footer-box {
+					width: 100%;
+					position: absolute;
+					left: 0;
+					bottom: 0;
+					display: flex;
+					view {
+						flex: 1;
+						height: 72rpx;
+						line-height: 72rpx;
+						text-align: center;
+						font-weight: 500;
+						&:first-child {
+							color: #292d2e;
+						    background-color: #fff;
+							box-shadow: 0rpx -4rpx 12rpx 0rpx rgba(192,195,209,0.25);
+						}
+						&:last-child {
+							color: #fff;
+							background: linear-gradient( 270deg, #6B98FE 0%, #0212FF 100%), #FFFFFF;
+						}
+					}
+				}
+			}
 			.list-scroll {
 				width: 100%;
 				height: calc(100vh - 50px - 68rpx - (var(--status-bar-height)) - 34px);