完成首页热推商品接口对接

order-app/src/api/home.js

@@ -2,4 +2,9 @@ import http from '../common/http.js'
 //轮播图
 export const getSwipperListApi = ()=>{
 	return http.get("/api/home/getSwipperList")
+}
+
+//首页热推
+export const getHotListApi = ()=>{
+	return http.get("/api/home/getHotList")
 }

order-app/src/pages/index/index.vue

@@ -1,5 +1,6 @@
 <template>
-	<u-swiper name='images' border-radius='1' :duration='duration' :interval='interval' :height="height" :list="swiperList">
+	<u-swiper name='images' border-radius='1' :duration='duration' :interval='interval' :height="height"
+		:list="swiperList">
 	</u-swiper>
 	<u-divider margin-top='20' margin-bottom='20' color="#F3AF28">店长推荐</u-divider>
 	<view class="wrap">
@@ -7,13 +8,13 @@
 			<template v-slot:left="{leftList}">
 				<view class="demo-warter" v-for="(item, index) in leftList" :key="index">
 					<!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
-					<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
+					<u-lazy-load threshold="-450" border-radius="10" :image="item.goodsImage.split(',')[0]" :index="index"></u-lazy-load>
 					<view class="demo-title">
-						{{item.title}}
+						{{item.goodsName}}
 					</view>
 					<view class="price-item">
 						<view class="demo-price">
-							{{item.price}}元
+							{{item.specs[0].goodsPrice}}元
 						</view>
 						<view class="demo-title">
 							/份
@@ -24,13 +25,13 @@
 			</template>
 			<template v-slot:right="{rightList}">
 				<view class="demo-warter" v-for="(item, index) in rightList" :key="index">
-					<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
+					<u-lazy-load threshold="-450" border-radius="10" :image="item.goodsImage.split(',')[0]" :index="index"></u-lazy-load>
 					<view class="demo-title">
-						{{item.title}}
+						{{item.goodsName}}
 					</view>
 					<view class="price-item">
 						<view class="demo-price">
-							{{item.price}}元
+							{{item.specs[0].goodsPrice}}元
 						</view>
 						<view class="demo-title">
 							/份
@@ -47,8 +48,13 @@
 	import {
 		ref
 	} from 'vue';
-	import { onLoad } from '@dcloudio/uni-app';
-	import {getSwipperListApi} from '../../api/home.js'
+	import {
+		onLoad
+	} from '@dcloudio/uni-app';
+	import {
+		getSwipperListApi,
+		getHotListApi
+	} from '../../api/home.js'
 	const carimg = ref('/static/goodscar.png')
 	//轮播图高度
 	const height = ref('400')
@@ -62,48 +68,8 @@
 	const duration = ref(500)
 	//定义轮播图的数据,创建一个空数组
 	const swiperList = ref([])
-	//列表数据
-	const flowList = ref([{
-			price: 20,
-			title: '小炒肉盖饭',
-			image: '/static/test-5.png',
-		},
-		{
-			price: 12,
-			title: '手拉面',
-			image: '/static/test-8.png',
-		},
-		{
-			price: 10,
-			title: '小笼包',
-			image: '/static/test-5.png',
-		},
-		{
-			price: 15,
-			title: '馄饨',
-			image: '/static/test-8.png',
-		},
-		{
-			price: 18,
-			title: '香菇肉片盖饭',
-			image: '/static/test-8.png',
-		},
-		{
-			price: 15,
-			title: '番茄鸡蛋盖饭',
-			image: '/static/test-8.png',
-		},
-		{
-			price: 18,
-			title: '香菇肉片盖饭',
-			image: '/static/test-8.png',
-		},
-		{
-			price: 15,
-			title: '番茄鸡蛋盖饭',
-			image: '/static/test-8.png',
-		}
-	])
+	//列表数据,默认空数组
+	const flowList = ref([])
 	//跳转详情
 	const toDetails = (item) => {
 		//在起始页面跳转到details.vue页面并传递参数
@@ -119,8 +85,16 @@
 			swiperList.value = res.data;
 		}
 	}
+	//热推数据
+	const getHotList = async () => {
+		let res = await getHotListApi()
+		if (res && res.code == 200) {
+			flowList.value = res.data;
+		}
+	}
 	onLoad(() => {
 		getSwipperList()
+		getHotList()
 	})
 </script>