绘制完成首页页面，对接完成首页接口数据

package.json

@@ -57,6 +57,7 @@
     "@dcloudio/uni-quickapp-webview": "3.0.0-3090420231025001",
     "@dcloudio/uni-ui": "^1.5.6",
     "cross-env": "^7.0.3",
+    "dayjs": "^1.11.13",
     "esbuild": "0.17.19",
     "lodash": "^4.17.21",
     "pinia": "2.0.3",

pnpm-lock.yaml

@@ -56,6 +56,9 @@ importers:
       cross-env:
         specifier: ^7.0.3
         version: 7.0.3
+      dayjs:
+        specifier: ^1.11.13
+        version: 1.11.13
       esbuild:
         specifier: 0.17.19
         version: 0.17.19
@@ -1816,6 +1819,9 @@ packages:
     resolution: {integrity: sha512-X5eWTSXO/BJmpdIKCRuKUgSCgAN0OwliVK3yPKbwIWU1Tdw5BRajxlzMidvh+gwko9AfQ9zIj52pzF91Q3YAvQ==}
     engines: {node: '>=10'}
 
+  dayjs@1.11.13:
+    resolution: {integrity: sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==}
+
   debug@2.6.9:
     resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==}
     peerDependencies:
@@ -5811,6 +5817,8 @@ snapshots:
       whatwg-mimetype: 2.3.0
       whatwg-url: 8.7.0
 
+  dayjs@1.11.13: {}
+
   debug@2.6.9:
     dependencies:
       ms: 2.0.0

src/api/index.js

@@ -12,4 +12,25 @@ export const menuCategoryApi = () => {
 **/
 export const homeBannberApi = () => {
 	return request.get('/web/pic')
+}
+
+/**
+ * @function 获取热门产品
+**/
+export const hotProductApi = () => {
+	return request.get('/web/hotProduct')
+}
+
+/**
+ * @function 获取普通产品前10
+**/
+export const ordinaryProductApi = () => {
+	return request.get('/web/product')
+}
+
+/**
+ * @function 热门新闻
+**/
+export const hotNewsApi = () => {
+	return request.get('/web/hotNews')
 }

src/assets/css/common.scss

@@ -8,9 +8,25 @@ button {
 }
 .pages {
     min-height: 100vh;
+	background: linear-gradient(to top, #e4ecff 40%,#fff 60%);
 	font-size: 26rpx;
 }
 .tabbar-pages {
+    /* #ifdef H5 */
     min-height: calc(100vh - 50px);
+    /* #endif */
+	/* #ifdef APP */
+	min-height: 100vh;
+	/* #endif */
+	background: linear-gradient(to top, #e4ecff 40%,#fff 60%);
 	font-size: 26rpx;
 }
+.text-ellipsis {
+	text-overflow: -o-ellipsis-lastline;
+	overflow: hidden;				//溢出内容隐藏
+	text-overflow: ellipsis;		//文本溢出部分用省略号表示
+	display: -webkit-box;			//特别显示模式
+	-webkit-line-clamp: 2;			//行数
+	line-clamp: 2;					
+	-webkit-box-orient: vertical;	//盒子中内容竖直排列
+}

src/locale/en.json

@@ -11,6 +11,7 @@
     "loadingWeight": "Loading weight (kg)",
     "approachingAngle/Departure": "Approaching angle/Departure angle (º)",
     "products": "PRODUCTS",
+    "productslowercase": "products",
     "companyProducts": "COMPANY PRODUCTS",
     "brand": "Brand",
     "driveWheel": "Drive Wheel",
@@ -38,7 +39,12 @@
     "Contact": "Contact",
     "Online": "Online",
     "Whats": "Whats",
-    "TOP": "TOP"
+    "TOP": "TOP",
+	"All": "All",
+	"Go": "Go",
+	"Center": "Center",
+	"Quick": "Quick",
+	"viewmore": "view more"
   },
   "menu": {
     "Home": "Home",
@@ -51,7 +57,7 @@
   },
   "news": {
     "news": "News",
-    "newsCenter": "NEWS CENTER",
+    "newsCenter": "press center",
     "allNews": "ALL NEWS",
     "relatedNews": "Related News",
     "relatedProducts": "Related Products"
@@ -70,7 +76,7 @@
     "inquiry": "Inquiry"
   },
   "index": {
-    "companyProfile": "COMPANY PROFILE",
+    "companyProfile": "Company Profile",
     "corporateName": "SINOTRUCK HOWO SALES CO.,LTD.",
     "companyProfileContent": "SINOTRUCK HOWO SALES CO.,LTD.is located in Jinan city, Shandong Province, P.R. China. It is the cradle and leading production base of the heavy-duty truck industry in China. It is famous for developing and manufacturing SINOTRUK HOWO tractor trucks, dump trucks, fuel tanker trucks and concrete mixer truck, water spraying trucks etc.",
     "highQuality": "HIGH QUALITY",
@@ -82,7 +88,9 @@
     "pressCenter": "PRESS CENTER",
     "realTimeNewsReadingOnline": "Real-time news reading online",
     "joinOurNewsletter": "JOIN OUR NEWSLETTER",
-    "signUpOurNewsletter": "Sign up our newsletter and get more events & promotions!"
+    "signUpOurNewsletter": "Sign up our newsletter and get more events & promotions!",
+	"contact": "contact",
+	"PopularProduct": "Popular Product"
   },
   "aboutUs": {
     "AboutUs": "About Us",

src/locale/zh.json

@@ -11,6 +11,7 @@
     "loadingWeight": "装载重量（kg）",
     "approachingAngle/Departure": "接近角/离开角（º）",
     "products": "产品",
+	"productslowercase": "产品",
     "companyProducts": "公司产品",
     "brand": "品牌",
     "driveWheel": "驱动轮",
@@ -38,7 +39,12 @@
     "Contact": "联系我们",
     "Online": "在线",
     "Whats": "Whatsapp",
-    "TOP": "顶部"
+    "TOP": "顶部",
+	"All": "全部",
+	"Go": "前往",
+	"Center": "中心",
+	"Quick": "快速",
+	"viewmore": "查看更多"
   },
   "menu": {
     "Home": "首页",
@@ -62,7 +68,9 @@
     "pressCenter": "新闻中心",
     "realTimeNewsReadingOnline": "实时新闻在线阅读",
     "joinOurNewsletter": "加入我们的实时通讯",
-    "signUpOurNewsletter": "注册我们的实时通讯，获取更多活动和促销！"
+    "signUpOurNewsletter": "注册我们的实时通讯，获取更多活动和促销！",
+	"contact": "联系",
+	"PopularProduct": "流行产品"
   },
   "news": {
     "news": "新闻",

src/pages.json

@@ -10,7 +10,8 @@
 		{
 			"path": "pages/index/index",
 			"style": {
-				"navigationBarTitleText": "China Trailer, Truck, Trailer Parts, Truck Parts Manufacturers and Factory - Price - SINOTRUCK"
+				"navigationBarTitleText": "China Trailer, Truck, Trailer Parts, Truck Parts Manufacturers and Factory - Price - SINOTRUCK",
+				"enablePullDownRefresh": true
 			}
 		},
 		{

src/pages/index/index.vue

@@ -11,28 +11,201 @@
 				</view>
 			</swiper-item>
 		</swiper>
+		
+	    <view class="main">
+	    	<view class="search-box">
+	    		<uni-easyinput 
+	    			:inputBorder="false"
+	    			:clearable="false"
+	    			v-model="searchVal" 
+	    			:placeholder="$t('common.search')" 
+	    			type="search"
+	    			@confirm="searchConfirm"
+	    		>
+	    		    <template #right>
+	    				<image 
+	    				    class="search-icon" 
+	    					src="@/assets/images/icon/search.png"
+	    					@click="searchConfirm"
+	    				>
+	    				</image>
+	    			</template>
+	    		</uni-easyinput>
+	    	</view>
+	    	
+	    	<view class="panel">
+	    		<view class="r-box">
+	    			<view class="title">
+	    				<text>{{$t('common.All')}}</text>
+						<text>{{$t('common.productslowercase')}}</text>
+	    			</view>
+					<view class="goto">
+						<text>{{$t('common.Go')}}</text>
+					    <image src="@/assets/images/icon/goto.png"></image>
+					</view>
+	    		</view>
+				<view class="l-box">
+					<view class="t-box">
+						<view class="title">{{$t('index.companyProfile')}}</view>
+						<image src="@/assets/images/icon/arrow.png"></image>
+					</view>
+					<view class="b-box">
+						<view>
+							<text>{{$t('news.news')}}</text>
+							<text>{{$t('common.Center')}}</text>
+						</view>
+						<view>
+							<text>{{$t('common.Quick')}}</text>
+							<text>{{$t('index.contact')}}</text>
+						</view>
+					</view>
+				</view>
+	    	</view>
+			
+			<view class="common-card">
+				<view class="header">
+					<text class="title">{{$t('index.PopularProduct')}}</text>
+					<navigator class="view-more" url="/">
+						<text>{{$t('common.viewmore')}}</text>
+						<image src="@/assets/images/icon/view-more.png"></image>
+					</navigator>
+				</view>
+				<view class="product-list">
+					<view 
+					    class="product-item"
+						v-for="item in hotProductList"
+						:key="item.id"
+					>
+						<image class="cover" :src="item.mainPic" mode="aspectFill"></image>
+						<view class="text-ellipsis title">
+							{{item.title}}
+						</view>
+					</view>
+				</view>
+			</view>
+			
+			<view class="common-card">
+				<view class="header">
+					<text class="title">{{$t('menu.Products')}}</text>
+					<navigator class="view-more" url="/">
+						<text>{{$t('common.viewmore')}}</text>
+						<image src="@/assets/images/icon/view-more.png"></image>
+					</navigator>
+				</view>
+				<view class="product-list">
+					<view 
+					    class="product-item"
+						v-for="item in ordinaryProductList"
+						:key="item.id"
+					>
+						<image class="cover" :src="item.mainPic" mode="aspectFill"></image>
+						<view class="text-ellipsis title">
+							{{item.title}}
+						</view>
+					</view>
+				</view>
+			</view>
+			
+			<view class="common-card">
+				<view class="header">
+					<text class="title">{{$t('news.newsCenter')}}</text>
+					<navigator class="view-more" url="/">
+						<text>{{$t('common.viewmore')}}</text>
+						<image src="@/assets/images/icon/view-more.png"></image>
+					</navigator>
+				</view>
+				<view class="news-list">
+					<view 
+					    class="news-item"
+						v-for="item in hotNewsList"
+						:key="item.id"
+					>
+						<image class="cover" :src="item.mainPic" mode="aspectFill"></image>
+						<view class="info">
+							<view class="text-ellipsis title">
+								{{item.title}}
+							</view>
+							<view class="text-ellipsis desc">
+								{{item.description}}
+							</view>
+							<label class="date">-{{dayJs(item.publicDate).format('YYYY-MM-DD')}}-</label>
+						</view>
+					</view>
+				</view>
+			</view>
+	    </view>
 	</view>
 </template>
 
 <script setup>
 	import { ref } from 'vue';
-	import { onLoad } from '@dcloudio/uni-app';
-	import { homeBannberApi } from '@/api/index.js';
+	import { onLoad, onPullDownRefresh } from '@dcloudio/uni-app';
+	import dayJs from 'dayjs';
+	import { 
+		homeBannberApi,
+		hotProductApi,
+		ordinaryProductApi,
+		hotNewsApi
+	} from '@/api/index.js';
 	
 	const bannerList = ref([])
 	const getBannerList = () => {
-		homeBannberApi().then(({data:res}) => {
+		return homeBannberApi().then(({data:res}) => {
 			bannerList.value = res.data
 		})
 	}
 	
+	const searchVal = ref('')
+	const searchConfirm = () => {
+		if (!searchVal.value) {
+			return
+		}
+		console.log(searchVal.value)
+	}
+	
+	const hotProductList = ref([])
+	const gethotProduct = () => {
+		return hotProductApi().then(({data:res}) => {
+			hotProductList.value = res.data
+		})
+	}
+	
+	const ordinaryProductList = ref([])
+	const getOrdinaryProduct = () => {
+		return ordinaryProductApi().then(({data:res}) => {
+			ordinaryProductList.value = res.data
+		})
+	}
+	
+	const hotNewsList = ref([])
+	const getHotNews = () => {
+		return hotNewsApi().then(({data:res}) => {
+			hotNewsList.value = res.data
+		})
+	}
+	
+	onPullDownRefresh(async() => {
+		try {
+		    await getBannerList()
+			await gethotProduct()
+			await getOrdinaryProduct()
+			await getHotNews() 
+		} catch(err) {
+		}
+		uni.stopPullDownRefresh()
+	})
+	
 	onLoad(() => {
 		getBannerList()
+		gethotProduct()
+		getOrdinaryProduct()
+		getHotNews()
 	})
 </script>
 
 <style lang="scss" scoped>
 .tabbar-pages {
+	background: #f3f5fb;
 	.swiper {
 		width: 100%;
 		height: 400rpx;
@@ -45,5 +218,215 @@
 			}
 		}
 	}
+	.main {
+		padding: 0 16rpx;
+		position: relative;
+		top: -40rpx;
+		.search-box {
+			::v-deep .uni-easyinput {
+				border-radius: 32rpx;
+				overflow: hidden;
+				.uni-easyinput__content {
+					padding: 0 15rpx;
+				}
+			}
+			.search-icon {
+				width: 24rpx;
+				height: 24rpx;
+				margin-right: 16rpx;
+			}
+		}
+		.panel {
+			width: 100%;
+			height: min-content;
+			min-height: 252rpx;
+			margin: 24rpx 0;
+			display: flex;
+			.r-box,.l-box {
+				flex: 1;
+			}
+			.r-box {
+				margin-right: 14rpx;
+				padding: 38rpx 32rpx;
+				background: url('@/assets/images/bg/products-panel.png') no-repeat;
+				background-size: 100% 100%;
+				.title {
+					color: #fff;
+					font-size: 30rpx;
+					text:first-child {
+						position: relative;
+						top: -10rpx;
+						margin-right: 10rpx;
+						font-size: 48rpx;
+						&::before {
+							content: '';
+							width: 100%;
+							height: 2rpx;
+							position: absolute;
+						    bottom: -5rpx;
+							left: 0;
+							background-color: #fff;
+						}
+					}
+				}
+				.goto {
+					width: min-content;
+					margin-top: 50rpx;
+					padding: 6rpx 12rpx;
+					display: flex;
+					align-items: center;
+					color: #4a67f0;
+					background-color: #fff;
+					border-radius: 8rpx;
+					font-size: 24rpx;
+					font-weight: bold;
+					image {
+						width: 22rpx;
+						height: 22rpx;
+						margin-left: 6rpx;
+					}
+				}
+			}
+			.l-box {
+				display: flex;
+				flex-direction: column;
+				.t-box, .b-box {
+					flex: 1;
+				}
+				.t-box {
+					margin-bottom: 16rpx;
+				    padding: 22rpx 20rpx;
+					background: url('@/assets/images/bg/company-profile-panel.png') no-repeat;
+					background-size: 100% 100%;
+					.title {
+						color: #1993e2;
+						font-size: 30rpx;
+						font-weight: bold;
+					}
+					image {
+						width: 38rpx;
+						height: 6rpx;
+						margin-top: 10rpx;
+					}
+				}
+				.b-box {
+					display: flex;
+					view {
+						flex: 1;
+						padding: 20rpx;
+						display: flex;
+						flex-direction: column;
+						font-size: 24rpx;
+						font-weight: bold;
+						&:first-child {
+							margin-right: 14rpx;
+							color: #3d62f4;
+							background: url('@/assets/images/bg/news-panel.png') no-repeat;
+							background-size: 100% 100%;
+						}
+						&:last-child {
+							color: #e1740d;
+							background: url('@/assets/images/bg/contact-panel.png') no-repeat;
+							background-size: 100% 100%;
+						}
+					}
+				}
+			}
+		}
+		.common-card {
+			width: 100%;
+			height: min-content;
+			margin-bottom: 24rpx;
+			border-radius: 12rpx;
+			overflow: hidden;
+			.header {
+				width: 100%;
+				height: 80rpx;
+				padding: 0 12rpx;
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				background: linear-gradient( 180deg, #E6F5FF 0%, #FFFFFF 100%);
+				.title {
+					color: #015fe8;
+					font-size: 30rpx;
+					font-weight: bold;
+				}
+				.view-more {
+					display: flex;
+					align-items: center;
+					text {
+						color: #aaacad;
+					}
+					image {
+						width: 11rpx;
+						height: 20rpx;
+						margin-left: 8rpx;
+					}
+				}
+			}
+			.product-list {
+				padding: 38rpx 12rpx;
+				display: flex;
+				flex-wrap: wrap;
+				background-color: #fff;
+				.product-item {
+					width: 49%;
+					height: 468rpx;
+					margin-bottom: 14rpx;
+					border: 2rpx solid #ebf3f7;
+					border-radius: 8rpx;
+					&:nth-child(2n) {
+						margin-left: 2%;
+					}
+					.cover {
+						width: 100%;
+						height: 358rpx;
+					}
+					.title {
+						padding: 16rpx 16rpx 0;
+						color: #0d0e0e;
+						border-top: 2rpx dashed #ebf3f7;
+					}
+				}
+			}
+			.news-list {
+				width: 100%;
+				padding: 38rpx 12rpx;
+				background-color: #fff;
+				.news-item {
+					margin-bottom: 16rpx;
+					display: flex;
+					border: 2rpx solid #ebf3f7;
+					border-radius: 25rpx;
+					overflow: hidden;
+					image {
+						width: 278rpx;
+						height: 230rpx;
+						border-top-right-radius: 25rpx;
+						border-bottom-right-radius: 25rpx;
+					}
+					.info {
+						flex: 1;
+						padding: 22rpx 18rpx;
+						.title {
+							color: #212222;
+							font-size: 28rpx;
+							-webkit-line-clamp: 1;
+						}
+						.desc {
+							margin: 20rpx 0;
+							color: #878b90;
+							font-size: 24rpx;
+						}
+						.date {
+							color: #c6c8ca;
+							font-size: 24rpx;
+						}
+					}
+				}
+			}
+		}
+	}
 }
 </style>