完成了 home首页

main.js

@@ -3,6 +3,37 @@
 import Vue from 'vue'
 import App from './App'
 
+// 导入网络请求的包
+import { $http } from '@escook/request-miniprogram'
+
+uni.$http = $http
+
+// 请求拦截器
+$http.beforeRequest = function(options) {
+	uni.showLoading({
+		title: '数据加载中'
+	})
+}
+
+// 请求的根路径
+$http.baseUrl = 'https://www.uinav.com'
+
+// 响应拦截器
+import { $http } from '@escook/request-miniprogram'
+$http.afterRequest = function() {
+	uni.hideLoading()
+}
+
+
+// 封装弹窗的方法
+uni.$showMsg = function (title = '数据加载失败！', duration = 1500) {
+	uni.showToast({
+		title,
+		duration,
+		icon: 'none',
+	})
+}
+
 Vue.config.productionTip = false
 
 App.mpType = 'app'

package-lock.json

@@ -0,0 +1,13 @@
+{
+  "name": "heimatest1",
+  "version": "1.0.0",
+  "lockfileVersion": 1,
+  "requires": true,
+  "dependencies": {
+    "@escook/request-miniprogram": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmmirror.com/@escook/request-miniprogram/-/request-miniprogram-0.2.1.tgz",
+      "integrity": "sha512-ueWV5YsaEm/ycQZuEjMiA88GFMhfBQSjy9GrP9omy4xAQajkGTbYIlnhzsDfWzRPmRC1fKmAiKMrCVcgS+SHcQ=="
+    }
+  }
+}

package.json

@@ -0,0 +1,19 @@
+{
+  "name": "heimatest1",
+  "version": "1.0.0",
+  "description": "",
+  "main": "main.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "http://125.71.216.35:3000/helloskyone/mallapp.git"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@escook/request-miniprogram": "^0.2.1"
+  }
+}

pages.json

@@ -34,6 +34,31 @@
             
         }
     ],
+	"subPackages": [
+		{
+			"root": "subpkg",
+			"pages": [
+				{
+				    "path" : "subpkg/goods_detail/goods_detail",
+				    "style" :                                                                                    
+				    {
+				        "navigationBarTitleText": "",
+				        "enablePullDownRefresh": false
+				    }
+				    
+				},
+				{
+				    "path" : "subpkg/goods_list/goods_list",
+				    "style" :                                                                                    
+				    {
+				        "navigationBarTitleText": "",
+				        "enablePullDownRefresh": false
+				    }
+				    
+				}
+			]
+		}
+	],
 	"globalStyle": {
 		"navigationBarTextStyle": "white",
 		"navigationBarTitleText": "黑马优购",

pages/home/home.vue

@@ -1,6 +1,42 @@
 <template>
 	<view>
-		
+		<!-- 轮播图区域 -->
+		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
+			<!-- 循环渲染轮播图的 item 项 -->
+			<swiper-item v-for="(item, i) in swiperList" :key="i">
+				<navigator class="swiper-item" :url="'/subpkg/goods_detail/goods_detail?goods_id=' + item.goods_id">
+					<!-- 动态绑定图片的 src 属性 -->
+					<image :src="item.image_src"></image>
+				</navigator>
+			</swiper-item>
+		</swiper>
+		<!-- 分类导航区域 -->
+		<view class="nav-list">
+			<view class="nav-item" v-for="(item, i) in navList" :key="i" @click="navClickHandler(item)">
+				<image :src="item.image_src" class="nav-img"></image>
+			</view>
+		</view>
+		<!-- 楼层区域 -->
+		<view class="floor-list">
+			<!-- 楼层 item 项 -->
+			<view class="floor-item" v-for="(item, i) in floorList" :key="i">
+				<!-- 楼层标题 -->
+				<image :src="item.floor_title.image_src" class="floor-title"></image>
+				<!-- 楼层图片区域 -->
+				<view class="floor-img-box">
+					<!-- 左侧大图片的盒子 -->
+					<view class="left-img-box">
+						<image :src="item.product_list[0].image_src" :style="{width:item.product_list[0].image_width + 'rpx'}" mode="widthFix"></image>
+					</view>
+					<!-- 右侧 4 个小图片的盒子 -->
+					<view class="right-img-box">
+						<navigator class="right-img-item" v-for="(item2, i2) in item.product_list" :key="i2" v-if="i2 !== 0" :url="item2.url">
+							<image :src="item2.image_src" mode="widthFix" :style="{width:item2.image_width + 'rpx'}"></image>
+						</navigator>
+					</view>
+				</view>
+			</view>
+		</view>
 	</view>
 </template>
 
@@ -8,12 +44,98 @@
 	export default {
 		data() {
 			return {
-				
-			};
-		}
+				// 1. 轮播图的数据列表，默认为空数组
+				swiperList: [],
+				// 1. 分类导航的数据列表
+				navList: [],
+				// 1. 楼层的数据列表
+				floorList: [],
+			}
+		},
+		onLoad() {
+			// 2. 在小程序页面刚加载的时候，调用获取轮播图数据的方法
+			this.getSwiperList(),
+			// 分类导航
+			this.getNavList(),
+			// 2. 在 onLoad 中调用获取楼层数据的方法
+			this.getFloorList()
+		},
+		methods: {
+			// 3. 获取轮播图数据的方法
+			async getSwiperList() {
+				// 3.1 发起请求
+				const { data: res } = await uni.$http.get('/api/public/v1/home/swiperdata')
+				// 3.2 请求失败
+				if (res.meta.status !== 200) return uni.$showMsg()
+				// 3.3 请求成功，为 data 中的数据赋值
+				this.swiperList = res.message
+			},
+			async getNavList() {
+				const { data: res } = await uni.$http.get('/api/public/v1/home/catitems')
+				if (res.meta.status !== 200) return uni.$showMsg()
+				this.navList = res.message
+			},
+			// nav-item 项被点击时候的事件处理函数
+			navClickHandler(item) {
+				// 判断点击的是哪个 nav
+				if (item.name === '分类') {
+					uni.switchTab({
+						url: '/pages/cate/cate'
+					})
+				}
+			},
+			// 3. 定义获取楼层列表数据的方法
+			async getFloorList() {
+				const { data: res } = await uni.$http.get('/api/public/v1/home/floordata')
+				if (res.meta.status !== 200) return uni.$showMsg()
+				// 通过双层 forEach 循环，处理 URL 地址
+				res.message.forEach(floor => {
+					floor.product_list.forEach(prod => {
+						prod.url = '/subpkg/goods_list/goods_list?' +
+						prod.navigator_url.split('?')[1]
+					})
+				})
+				this.floorList = res.message
+			}
+		},
 	}
 </script>
 
 <style lang="scss">
+swiper {
+	height: 330rpx;
+	
+	.swiper-item,
+		image {
+		width: 100%;
+		height: 100%;
+	}
+}
+.nav-list {
+	display: flex;
+	justify-content: space-around;
+	margin: 15px 0;
+	
+	.nav-img {
+		width: 128rpx;
+		height: 140rpx;
+	}
+}
+
+.floor-title {
+	height: 60rpx;
+	width: 100%;
+	display: flex;
+}
+
+.right-img-box {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: space-around;
+}
 
+.floor-img-box {
+	display: flex;
+	padding-left: 10rpx;
+}
 </style>

subpkg/goods_detail/goods_detail.vue

@@ -0,0 +1,19 @@
+<template>
+	<view>
+		
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			};
+		}
+	}
+</script>
+
+<style lang="scss">
+
+</style>

subpkg/goods_list/goods_list.vue

@@ -0,0 +1,19 @@
+<template>
+	<view>
+		
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			};
+		}
+	}
+</script>
+
+<style lang="scss">
+
+</style>