fix:完成为你竞选

pages/goods/list/index.vue

@@ -7,11 +7,13 @@
 -->
 
 <template>
-  <div class="page">
-    <main class="main">
+  <div :class="listData && listData.length ? 'page' : ''">
+    <main class="main" v-if="listData && listData.length">
       <nav class="main__nav">
         <p class="main__nav-crumbs">
-          全部商品<i class="el-icon-arrow-right"></i>开发书籍
+          全部商品
+          <i class="el-icon-arrow-right"></i>
+          <!-- <span v-if="levelType == 2">{{}}</span> -->
         </p>
         <div class="main__nav-sort flex flex-middle" v-if="levelType == 1">
           <span class="main__nav-sort-txt">分类 :</span>
@@ -52,6 +54,7 @@
           :item="item"
           v-for="item in listData"
           :key="item.id"
+          :isRecommend="isRecommend"
         ></UiGoodsItem>
       </div>
       <el-pagination
@@ -64,6 +67,27 @@
       >
       </el-pagination>
     </main>
+    <main v-else class="main">
+      <img class="main-none-img" src="@/assets/img/goods/none.png" alt="" />
+      <p class="main-none-txt">没有搜到你想要的商品哦，换个关键词试试</p>
+    </main>
+    <section class="section">
+      <div class="section-title flex flex-between flex-middle">
+        <h3 class="section-title--txt">为你精选</h3>
+        <div class="section-title--btn flex" @click="getRecommendedGoodsList()">
+          <img src="@/assets/img/goods/each.png" alt="切换推荐" />
+          <span>换一组</span>
+        </div>
+      </div>
+
+      <div class="section-list">
+        <UiGoodsItem
+          :item="item"
+          v-for="item in recommendedData"
+          :key="item.id"
+        ></UiGoodsItem>
+      </div>
+    </section>
   </div>
 </template>
 <script>
@@ -71,6 +95,7 @@ import {
   ApiGetGoodsList,
   ApiGetCategoryOneList,
   ApiGetCategoryTwoAndGoods,
+  ApiGetRecommendedGoodsList,
 } from "@/plugins/api/goods";
 import Sort from "./module/SortItem.vue";
 import UiGoodsItem from "@/components/UiGoodsItem.vue";
@@ -86,6 +111,7 @@ export default {
       // 0:综合,1:desc,2:asc,3:上新
       sortType: 0,
       categoryOneList: [],
+      recommendedData: [],
       levelType: "",
       levelId: "",
       params: {
@@ -107,12 +133,18 @@ export default {
       this.levelId = this.$route.query.id || "";
       this.levelType == 2 ? (this.params.categoryId = this.levelId) : "";
       this.isRecommend = this.levelId == "recommend" ? true : false;
+      this.getRecommendedGoodsList();
       if (this.levelType == 1) {
         this.getCategoryTwoAndGoods();
       } else {
         this.getGoodsListData();
       }
     },
+    async getRecommendedGoodsList() {
+      let vm = this;
+      let res = await ApiGetRecommendedGoodsList();
+      vm.recommendedData = res.result;
+    },
     async getCategoryOneList() {
       let res = await ApiGetCategoryOneList();
       this.categoryOneList = res.result;
@@ -265,5 +297,57 @@ export default {
       color: #fff;
     }
   }
+  &-none-img {
+    display: block;
+    width: 228px;
+    height: 144px;
+    margin: 60px auto 20px;
+  }
+  &-none-txt {
+    width: 100%;
+    text-align: center;
+    font-size: 14px;
+    font-family: PingFang SC-常规体, PingFang SC;
+    font-weight: normal;
+    color: #999999;
+  }
+}
+.section {
+  width: 100%;
+  padding: 30px 0 40px;
+  background: #f8f8f8;
+
+  &-title {
+    @include layout-box;
+    &--txt {
+      font-size: 24px;
+      font-family: Microsoft YaHei-Bold, Microsoft YaHei;
+      font-weight: bold;
+      color: #333333;
+    }
+    &--btn {
+      width: 140px;
+      cursor: pointer;
+      img {
+        width: 27px;
+        height: 27px;
+        margin-right: 5px;
+      }
+      span {
+        font-size: 18px;
+        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
+        font-weight: 400;
+        color: #999999;
+      }
+    }
+  }
+  &-list {
+    @include layout-box;
+    padding-top: 40px;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, 232px);
+    justify-content: space-between;
+    grid-row-gap: 10px;
+  }
 }
 </style>