Merge pull request #33 from School-of-Website-Engineering/develop

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;
 		}

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 ));
 

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>