分类页渲染和样式调整

src/App.vue

@@ -28,7 +28,7 @@
     }
     image{
       /* 宽度等于父盒子的宽度, 才不会主动撑开 */
-      Width:100%;
+      width:100%;
       /* 移除图片标签默认的3px 间隙 */
 	    vertical-align: middle;
     }

src/pages/category/category.vue

@@ -1,114 +1,29 @@
 <template>
   <view class="category">
-    <!-- 搜索 -->
+    <!-- 1. 搜索 -->
     <view class="category_search">
       <u-search placeholder="搜索" :show-action="false" ></u-search>
     </view>
-    <!-- 内容 -->
+
+    <!-- 2. 内容 -->
     <view class="category_content">
+      <!-- 2.1 左列表: 大家电,热门推荐,海外购... -->
       <view class="menu">
-        <view>1</view>
+        <view class="menu_list" v-for="item in menu" :key="item">{{item}}</view>
-        <view>2</view>
-        <view>3</view>
-        <view>4</view>
-        <view>5</view>
-        <view>6</view>
-        <view>7</view>
-        <view>8</view>
-        <view>9</view>
-        <view>10</view>
-        <view>11</view>
-        <view>12</view>
-        <view>13</view>
-        <view>14</view>
-        <view>15</view>
-        <view>16</view>
-        <view>17</view>
-        <view>18</view>
-        <view>19</view>
-        <view>20</view>
-        <view>21</view>
-        <view>22</view>
-        <view>23</view>
-        <view>24</view>
-        <view>25</view>
-        <view>26</view>
-        <view>27</view>
-        <view>28</view>
-        <view>29</view>
-        <view>30</view>
-        <view>31</view>
-        <view>32</view>
-        <view>33</view>
-        <view>34</view>
-        <view>35</view>
-        <view>36</view>
-        <view>37</view>
-        <view>38</view>
-        <view>39</view>
-        <view>40</view>
-        <view>41</view>
-        <view>42</view>
-        <view>43</view>
-        <view>44</view>
-        <view>45</view>
-        <view>46</view>
-        <view>47</view>
-        <view>48</view>
-        <view>49</view>
-        <view>50</view>
       </view>
+      <!-- 2.2 右列表: 电视,空调... -->
       <view class="category_list">
-        <view>1</view>
+        <view class="category_group" v-for="item in goods" :key="item.cat_name">
-        <view>2</view>
+          <!-- 2.2.1 标题 -->
-        <view>3</view>
+          <view class="category_group_title">{{item.cat_name}}</view>
-        <view>4</view>
+          <!-- 2.2.2 详情列表 -->
-        <view>5</view>
+          <view class="category_group_list">
-        <view>6</view>
+            <view class="category_item" v-for="item2 in item.children" :key="item2.cat_name">
-        <view>7</view>
+              <image :src="item2.cat_icon" mode="widthFix"></image>
-        <view>8</view>
+              <view class="goods_name">{{item2.cat_name}}</view> 
-        <view>9</view>
+            </view>
-        <view>10</view>
+          </view>
-        <view>11</view>
+        </view>
-        <view>12</view>
-        <view>13</view>
-        <view>14</view>
-        <view>15</view>
-        <view>16</view>
-        <view>17</view>
-        <view>18</view>
-        <view>19</view>
-        <view>20</view>
-        <view>21</view>
-        <view>22</view>
-        <view>23</view>
-        <view>24</view>
-        <view>25</view>
-        <view>26</view>
-        <view>27</view>
-        <view>28</view>
-        <view>29</view>
-        <view>30</view>
-        <view>31</view>
-        <view>32</view>
-        <view>33</view>
-        <view>34</view>
-        <view>35</view>
-        <view>36</view>
-        <view>37</view>
-        <view>38</view>
-        <view>39</view>
-        <view>40</view>
-        <view>41</view>
-        <view>42</view>
-        <view>43</view>
-        <view>44</view>
-        <view>45</view>
-        <view>46</view>
-        <view>47</view>
-        <view>48</view>
-        <view>49</view>
-        <view>50</view>
       </view>
     </view>
   </view>
@@ -117,7 +32,31 @@
 <script>
 let categoryData = {}
 export default {
-
+  data(){
+    return{
+      // 左列表
+      menu:[],
+      // 当前左列表选中项
+      menuCurrent: 0,
+      // 右列表
+      goods: []
+    }
+  },
+  onLoad(){
+    this.getCategories()
+  },
+  methods: {
+    // 获取详情信息
+    async getCategories(){
+      const { message } = await this.$u.api.getCategories()
+      categoryData = message
+      console.log(message);
+      this.menu = message.map(v=>(v.cat_name))
+      console.log(this.menu)
+      this.goods = message[this.menuCurrent].children
+      console.log(this.goods);
+    },
+  }
 
 }
 </script>
@@ -136,20 +75,69 @@ export default {
     height: calc(100vh - 100rpx);
     display: flex;
     .menu {
-      width: 180rpx;
+      width: 200rpx;
-      background-color: aqua;
+      /* background-color: aqua; */
       overflow: auto;
       /* 
       不加overflow: auto;的话
       1.背景只有一屏
       2.没有滚动条,滑动左边, 右边跟着一起动
       */
+
+      .menu_list {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 80rpx;
+
+      }
+      .active {
+        color: #eb4450;
+        /* currentColor =  当前的字体颜色 css自带 */
+        border-left: 5rpx solid currentColor;
+      }
+
     }
 
+    /* 右列表 */
     .category_list {
       flex: 1;
-      background-color: yellow;
       overflow: auto;
+
+      .category_group {
+        /* 标题 */
+        .category_group_title {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          height: 80rpx;
+          &::before {
+            content: "/";
+            margin-right: 10rpx;
+          }
+          &::after { 
+            content: "/";
+            margin-left: 10rpx; 
+          }
+        }
+
+        /* 图片列表 */
+        .category_group_list{
+          display: flex;
+          flex-wrap: wrap;
+          /* 一个商品 */
+          .category_item {
+            width: 33.33%;
+            text-align: center;
+            image {
+              width: 70%;
+            }
+            .goods_name{
+
+            }
+          }
+        }
+      }
     }
   }
 }