1. 封装完成产品和新闻页面的悬浮按钮组件；2.封装完成Oline弹窗组件；3.创建剩余页面文件配置

src/application/article-details.vue

@@ -0,0 +1,15 @@
+<template>
+    <view class="pages">
+    	文章详情
+    </view>
+</template>
+
+<script setup>
+	import { onLoad } from '@dcloudio/uni-app';
+	import { ref } from 'vue';
+	
+</script>
+
+<style lang="scss" scoped>
+	
+</style>

src/application/online.vue

@@ -0,0 +1,15 @@
+<template>
+    <view class="pages">
+    	在线聊天
+    </view>
+</template>
+
+<script setup>
+	import { onLoad } from '@dcloudio/uni-app';
+	import { ref } from 'vue';
+	
+</script>
+
+<style lang="scss" scoped>
+	
+</style>

src/application/product-details.vue

@@ -0,0 +1,15 @@
+<template>
+    <view class="pages">
+    	产品详情
+    </view>
+</template>
+
+<script setup>
+	import { onLoad } from '@dcloudio/uni-app';
+	import { ref } from 'vue';
+	
+</script>
+
+<style lang="scss" scoped>
+	
+</style>

src/components/online-modal.vue

@@ -0,0 +1,128 @@
+<template>
+    <view class="online-modal">
+    	<view class="modal">
+			<view class="title">
+				{{$t('common.Quickcontact')}}
+			</view>
+			<view class="contact-box">
+				<view class="desc-item">
+					<image class="icon" src="@/assets/images/icon/phone2.png"></image>
+					<view class="desc">
+						<label>{{ $t('contactUs.contactUs') }}</label>
+						<view>0086 182 5311 2969</view>
+					</view>
+				</view>
+				
+				<view class="desc-item">
+					<image class="icon" src="@/assets/images/icon/mail2.png"></image>
+					<view class="desc">
+						<label>{{ $t('common.E-mail') }}</label>
+						<view>alicesales@scdtrailer.com</view>
+					</view>
+				</view>
+				
+				<view class="desc-item no-center">
+					<image class="icon" src="@/assets/images/icon/online.png"></image>
+					<view class="desc">
+						<label>{{ $t('common.Online') }}</label>
+						<view>0086 182 5311 2969</view>
+					</view>
+				</view>
+			</view>
+			<button class="online-btn">
+				{{ $t('common.Online') }}
+			</button>
+    		<image @click="emits('close')" class="close" src="@/assets/images/icon/online-close.png"></image>
+    	</view>
+    </view>
+</template>
+
+<script setup>
+	import { onLoad } from '@dcloudio/uni-app';
+	import { ref } from 'vue';
+	
+	const emits = defineEmits(['close'])
+</script>
+
+<style lang="scss" scoped>
+.online-modal {
+	width: 100%;
+	height: 100vh;
+	position: fixed;
+	top: 0;
+	left: 0;
+	background-color: rgba(76, 76, 76,.6);
+	z-index: 99;
+	.modal {
+		width: 580rpx;
+		height: 768rpx;
+		padding: 74rpx 38rpx 38rpx;
+		position: absolute;
+		top: 354rpx;
+		left: 50%;
+		transform: translateX(-50%);
+		background: url('@/assets/images/bg/online-bg.png') no-repeat;
+		background-size: 100% 100%;
+		.title {
+			width: 100%;
+			margin-bottom: 28rpx;
+			text-align: center;
+			color: #0358ff;
+			font-size: 32rpx;
+			font-weight: bold;
+		}
+		.contact-box {
+			width: 100%;
+			height: 406rpx;
+			padding: 0 22rpx;
+			background-color: #fff;
+			border-radius: 8rpx;
+			overflow-y: auto;
+			.desc-item {
+				padding: 14rpx 0;
+				display: flex;
+				align-items: center;
+				border-bottom: 3rpx dashed #dfe3e8;
+				image {
+					width: 56rpx;
+					height: 56rpx;
+				}
+				.desc {
+					flex: 1;
+					padding-left: 18rpx;
+					label {
+						color: #a9adb6;
+					}
+					view {
+						color: #393c43;
+					}
+				}
+				&:last-child {
+					border-bottom: none;
+				}
+			}
+			.no-center {
+				align-items: unset;
+			}
+		}
+		.online-btn {
+			width: 490rpx;
+			height: 76rpx;
+			margin-top: 102rpx !important;
+			color: #fff;
+			background-color: transparent;
+			border-radius: 12rpx;
+			border: 2rpx solid #ffffff !important;
+			font-size: 28rpx;
+		}
+		.close {
+			width: 48rpx;
+			height: 122rpx;
+			position: absolute;
+			left: 50%;
+			bottom: -122rpx;
+			transform: translateX(-50%);
+		}
+	}
+}
+</style>

src/components/suspension-btn.vue

@@ -0,0 +1,52 @@
+<template>
+    <view class="suspension-btn">
+    	<button @click="emits('clickMsg')">
+			<image src="@/assets/images/icon/msg-box.png"></image>
+		</button>
+		<button @click="emits('ClickTop')">
+			<image src="@/assets/images/icon/top.png"></image>
+		</button>
+    </view>
+</template>
+
+<script setup>
+	import { ref } from 'vue';
+	
+	const emits = defineEmits(['clickMsg','ClickTop'])
+	
+</script>
+
+<style lang="scss" scoped>
+.suspension-btn {
+	width: 96rpx;
+	height: min-content;
+	position: fixed;
+	right: 26rpx;
+	bottom: 130rpx;
+	button {
+		width: 100%;
+		height: 96rpx;
+		margin-bottom: 20rpx !important;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: 50%;
+		&:first-child {
+			background: linear-gradient( 180deg, #FFC157 0%, #FC8815 100%);
+			box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(165,93,31,0.25);
+			image {
+				width: 42rpx;
+				height: 38rpx;
+			}
+		}
+		&:last-child {
+			background: linear-gradient( 180deg, #53B0FF 0%, #3573FF 100%);
+			box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(76,109,176,0.25);
+			image {
+				width: 44rpx;
+				height: 44rpx;
+			}
+		}
+	}
+}
+</style>

src/locale/en.json

@@ -46,7 +46,8 @@
 	"Quick": "Quick",
 	"viewmore": "view more",
 	"ProductLabel": "Product",
-	"keywords": "keywords"
+	"keywords": "keywords",
+	"Quickcontact": "Quick contact"
   },
   "menu": {
     "Home": "Home",

src/locale/zh.json

@@ -46,7 +46,8 @@
 	"Quick": "快速",
 	"viewmore": "查看更多",
 	"ProductLabel": "产品",
-	"keywords": "关键字"
+	"keywords": "关键字",
+	"Quickcontact": "快速联系"
   },
   "menu": {
     "Home": "首页",

src/main.js

@@ -7,6 +7,8 @@ import en from './locale/en.json';
 import ConfirmPopup from '@/components/comfirm-popup.vue'; // 全局统一的操作弹窗
 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";
 
 uni.$showTost = function (title='加载失败！',duration=1500,mask=false) {
 	// 变成异步代码，处理一些特殊页面 必须等待消息提示结束后在做操作
@@ -42,6 +44,8 @@ export function createApp() {
 	app.component('ConfirmPopup', ConfirmPopup)
 	app.component('CustomHeader', CustomHeader)
 	app.component('Tabs', Tabs)
+	app.component('SuspensionBtn', SuspensionBtn)
+	app.component('OnlineModal', OnlineModal)
 	return {
 		app,
 	};

src/pages.json

@@ -41,6 +41,34 @@
 			}
 		}
 	],
+	"subPackages": [
+		{
+			"root": "application",
+			"pages": [
+				{
+					"path": "product-details",
+					"style": {
+						"navigationBarTitleText": "Product details",
+						"enablePullDownRefresh": true
+					}
+				},
+				{
+					"path": "article-details",
+					"style": {
+						"navigationBarTitleText": "News detail",
+						"enablePullDownRefresh": true
+					}
+				},
+				{
+					"path": "online",
+					"style": {
+						"navigationBarTitleText": "Online",
+						"enablePullDownRefresh": true
+					}
+				}
+			]
+		}
+	],
 	"tabBar": {
 		"color": "#54585c",
 		"selectedColor": "#0358ff",

src/pages/products/index.vue

@@ -6,7 +6,7 @@
 			<uni-easyinput 
 				:inputBorder="false"
 				:clearable="false"
-				v-model="params.keywords" 
+				v-model="params.text" 
 				:placeholder="$t('common.keywords')" 
 				type="search"
 				@confirm="init"
@@ -64,7 +64,12 @@
 						{{item.label}}
 					</view>
 				</scroll-view>
-				<scroll-view class="list-scroll" :scroll-y="true">
+				<scroll-view 
+				    class="list-scroll" 
+					:scroll-y="true" 
+					:scroll-top="prodScroll"
+					 @scroll="scroll"
+				>
 					<view 
 					    class="prod-item"
 						v-for="item in prodList"
@@ -78,12 +83,15 @@
 				</scroll-view>
 			</view>
 		</view>
+		
+		<SuspensionBtn @ClickTop="ClickTop" @clickMsg="onlineModalShow=true"/>
+		<OnlineModal v-if="onlineModalShow" @close="onlineModalShow=false" />
     </view>
 </template>
 
 <script setup>
 	import { onLoad, onShow } from '@dcloudio/uni-app';
-	import { ref, computed, watch } from 'vue';
+	import { ref, computed, watch, nextTick } from 'vue';
 	import { prodOrNewsCatgApi, prodPageApi } from '@/api';
 	
 	const total = ref(0)
@@ -93,7 +101,7 @@
 		pageSize: 10,
 		catgId: undefined,
 		maxCatgId: '660179025d0e2e0e4263db0eec86a8cc',
-		keywords: '',
+		text: '',
 	})
 	const init = (isLoad) => {
 		if (isLoad) {
@@ -157,6 +165,27 @@
 		level3.value = undefined
 	}
 	
+	const oldScrollTop = ref(0)
+	const prodScroll = ref(0)
+	const scroll = (e) => {
+		oldScrollTop.value = e.detail.scrollTop
+	}
+	const ClickTop = () => {
+		prodScroll.value = oldScrollTop.value
+		nextTick(() => {
+			prodScroll.value = 0
+		})
+	}
+	
+	const onlineModalShow = ref(false)
+	const onlineModalRef = ref()
+	const clickMsg = () => {
+		onlineModalShow.value = false
+		nextTick(() => {
+			
+		})
+	}
+	
 	onShow(() => {
 		
 	})