'add'

README.md

@@ -1 +1 @@
-父子组件之间的传值
+chapter24、商品列表页之数据渲染和传值

src/components/goodsItem.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="goodsItem">
-    <img class="goods_img" src="//a4.vimage1.com/upload/merchandise/pdcvis/2018/04/19/125/36eed2e5-e324-4bc0-99e8-8c28cd03bc18.jpg" />
+    <img class="goods_img" :src="img" />
-    <div class="goods_desc">时尚玛丽珍2018新品花水钻百搭如熙女鞋</div>
+    <div class="goods_desc">{{desc}}</div>
     <div class="goods_price">
-      <span class="price_now">¥99.9</span>
+      <span class="price_now">¥{{price}}</span>
-      <span class="discount">¥999.9</span>
+      <span class="discount">¥{{discount}}</span>
     </div>
   </div>
 </template>
@@ -13,8 +13,17 @@
 export default {
   name: "goodsItem",
   props: {
-    message: {
+    img: String,
+    desc: {
       type: String,
+      default: "请输入商品描述"
+    },
+    price: {
+      type: null,
+      default: "商品价格"
+    },
+    discount: {
+      type: null,
       default: "hello"
     }
   },
@@ -35,15 +44,15 @@ export default {
     height: 6rem;
   }
   .goods_desc {
-    padding: .133333rem .133333rem;
+    padding: 0.133333rem 0.133333rem;
     font-size: @sizeS;
-    color: @fontColor1;;
+    color: @fontColor1;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   }
   .goods_price {
-    padding: 0 .133333rem;
+    padding: 0 0.133333rem;
     // display: flex;
     // flex-direction: row;
     // justify-content: space-between;
@@ -55,7 +64,7 @@ export default {
       font-size: @sizeM;
       color: @fontColor2;
       text-decoration: line-through;
-      margin-left: .213333rem;
+      margin-left: 0.213333rem;
     }
   }
 }

src/view/goodList.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="goodlist">
+    <div class="fix_top">
       <!-- 头部标题 -->
       <div class="header">
         <span class="iconfont" @click="goBack()">&#xe660;</span>
@@ -24,16 +25,18 @@
           <span>筛选</span>
         </div>
       </div>
+    </div>
     <!-- 商品列表 -->
     <div class="goods">
-      <div class="goods_item" v-for="(item,index) in [1,2,3,4]" :key="index">
+      <div class="goods_item" v-for="(item,index) in list" :key="index">
-        <goods-item></goods-item>
+        <goods-item :img="item.goodsImg" :desc="item.desc" :price="item.price" :discount="item.discount"></goods-item>
       </div>
     </div>
   </div>
 </template>
 
 <script>
+import axios from "axios";
 import GoodsItem from "@/components/goodsItem.vue";
 
 export default {
@@ -43,14 +46,28 @@ export default {
   },
   data() {
     return {
-      currentIdx: 0
+      // 工具栏索引
+      currentIdx: 0,
+      // 商品列表
+      list: ""
     };
   },
   created() {},
-  mounted() {},
+  mounted() {
+    this.getGoodsList();
+  },
   watch: {},
   computed: {},
   methods: {
+    // 获取商品列表数据
+    getGoodsList() {
+      axios.get("/api/goodsList.json").then(res => {
+        if (res.data.code == 200) {
+          this.list = res.data.goodslist;
+        }
+        console.log("商品列表数据：", res);
+      });
+    },
     // 回退
     goBack() {
       this.$router.go(-1);
@@ -72,6 +89,12 @@ export default {
 <style lang="less" scoped>
 @import "../assets/styles/variables.less";
 .goodlist {
+  .fix_top {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+  }
   // 头部标题
   .header {
     box-sizing: border-box;
@@ -97,11 +120,12 @@ export default {
     flex-direction: row;
     text-align: center;
     border-bottom: 1px solid @bgColor;
+    background: #fff;
     .filter_item {
       flex-grow: 1;
       width: 0.96rem;
-      height: 1.013333rem;
+      height: 38px;
-      line-height: 1.013333rem;
+      line-height: 38px;
       font-size: @sizeM;
     }
     .on {
@@ -115,6 +139,7 @@ export default {
     flex-wrap: wrap;
     justify-content: space-between;
     padding: 0.213333rem 0.133333rem;
+    margin-top: 83px;
     .goods_item {
       margin-bottom: 0.266667rem;
     }

static/mock/goodsList.json

@@ -0,0 +1,48 @@
+{
+    "code": 200,
+    "msg": "",
+    "goodslist": [
+        {
+            "goodsId": 0,
+            "goodsImg": "//h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/607153/2018/0528/120/5ed543e8-b6dc-4fe3-bcf1-e393816b8d4b_5t.jpg",
+            "desc": "熙世界V领撞色花边针织女款短袖连衣裙",
+            "price": 99,
+            "discount": 809
+        },
+        {
+            "goodsId": 1,
+            "goodsImg": "//h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/2018/07/17/113/e4c755e3-1663-437e-9dde-a4979363a469_5t.jpg",
+            "desc": "娜尔思 | NAERSI/娜尔思秋季新品连衣裙",
+            "price": 929,
+            "discount": 939
+        },
+        {
+            "goodsId": 2,
+            "goodsImg": "//h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvop/00603727/10000646/2094163692-438051563145240605-438051563145240902-5.jpg",
+            "desc": "欧时力 | ochirly欧时力新女装拼接荷叶边刺绣网纱无袖连衣裙1JH2084210",
+            "price": 1119,
+            "discount": 8199
+        },
+        {
+            "goodsId": 3,
+            "goodsImg": "//h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/2018/07/17/113/e4c755e3-1663-437e-9dde-a4979363a469_5t.jpg",
+            "desc": "娜尔思 | NAERSI/娜尔思秋季新品连衣裙",
+            "price": 929,
+            "discount": 499
+        },
+        {
+            "goodsId": 4,
+            "goodsImg": "//h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/2018/08/02/34/b2d13309-0796-4408-beff-ce01f6295388_5t.jpg",
+            "desc": "哥弟 | 气质时尚短袖连衣裙",
+            "price": 929,
+            "discount": 8189
+        },
+        {
+            "goodsId": 5,
+            "goodsImg": "//h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/2018/06/07/147/fd624450-a586-4b7f-99aa-dbb8e272c26d_5t.jpg",
+            "desc": "裂帛 | 立领刺绣七分袖雪纺连衣裙女",
+            "price": 329,
+            "discount": 2399
+        }
+    ]
+}