From 33614ddafcc40b07c6f3fd57f9930990fc566781 Mon Sep 17 00:00:00 2001
From: mason369 <1960638223@qq.com>
Date: Thu, 19 Jan 2023 16:25:09 +0800
Subject: [PATCH] =?UTF-8?q?update:=E6=B7=BB=E5=8A=A0=E9=A6=96=E9=A1=B5?=
 =?UTF-8?q?=E8=8E=B7=E5=8F=96=E6=8E=A8=E8=8D=90=E4=B8=8E=E7=B2=BE=E5=93=81?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: JDSA Ling <70191651+LingASDJ@users.noreply.github.com>
---
 src/components/home/List.vue | 13 +++++++++----
 src/request/api.js           |  3 +++
 src/views/Home.vue           | 10 +++++++++-
 3 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/src/components/home/List.vue b/src/components/home/List.vue
index d494037..fa74878 100644
--- a/src/components/home/List.vue
+++ b/src/components/home/List.vue
@@ -1,11 +1,11 @@
 <template>
 	<ul class="list">
-		<li v-for="item in [10, 20, 30, 40]" :key="item">
+		<li v-for="(item,index) in arr" :key="item.id" v-show="index<4">
 			<section>
-				<img src="../../assets/img/listimg.jpg" alt="" />
+				<img :src="`http://sc.wolfcode.cn${item.coverImg}`" alt="" />
 				<div class="bottom-box">
-					<h3>商品标题</h3>
-					<p>200 积分</p>
+					<h3>{{item.name}}</h3>
+					<p>{{ item.coin }} 积分</p>
 					<div class="btn">立即兑换</div>
 				</div>
 				<img
@@ -25,6 +25,7 @@
 
 <script>
 export default {
+	props: ["arr"],
 	data() {
 		return {};
 	},
@@ -41,6 +42,10 @@ export default {
 	flex-wrap: wrap;
 
 	li {
+    & section :nth-child(1) {
+      width: 285px;
+      height: 330px;
+    }
 		&:nth-of-type(4n) {
 			margin-right: 0px;
 		}
diff --git a/src/request/api.js b/src/request/api.js
index a29117d..ad5c087 100644
--- a/src/request/api.js
+++ b/src/request/api.js
@@ -4,6 +4,9 @@ import qs from "qs";
 //精品推荐
 export const reqGetRecommended = () => request.get("/products/recommend");
 
+//热门兑换
+export const reqGetHot = () => request.get("/products/hot");
+
 //短信验证码
 export const reqGetSmsCode = (params) => request.post("/sendSMS", qs.stringify( params ));
 
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 8578e7b..6af2725 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -43,6 +43,7 @@
 <script>
 import JfTitle from "@/components/home/JfTitle";
 import List from "@/components/home/List";
+import { reqGetHot, reqGetRecommended } from "@/request/api";
 export default {
 	name      : "Home",
 	components: { JfTitle, List },
@@ -59,7 +60,14 @@ export default {
 			remenArr  : []
 		};
 	},
-	created() {}
+	async created() {
+		// 精品
+		const { data: boutique } = await reqGetRecommended();
+		this.jingpinArr = boutique.data.records;
+		// 热门
+		const { data: popular } = await reqGetHot();
+		this.remenArr = popular.data.records;
+	}
 };
 </script>