feat:开发商品详情

assets/scss/global.scss

@@ -34,3 +34,7 @@ a { text-decoration:none;
   color: #333;
   &:hover { text-decoration:none;}
 }
+.layout-box {
+  width: 1200px;
+  margin: 0 auto;
+}

layouts/default.vue

@@ -7,8 +7,8 @@
 -->
 <template>
   <div class="layout">
-    <Header />
-    <div class="layout-box"><Nuxt /></div>
+    <!-- <Header /> -->
+    <Nuxt />
     <div class="layout-footer"></div>
   </div>
 </template>
@@ -21,10 +21,6 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-.layout-box {
-  width: 1200px;
-  margin: 0 auto;
-}
 .layout-footer{
   height: 189px;
   background: #ddd;

pages/goods/detail/_id.vue

@@ -1,23 +1,131 @@
-<!--
- * @Author: ch
- * @Date: 2022-05-04 17:29:09
- * @LastEditors: ch
- * @LastEditTime: 2022-05-04 17:29:24
- * @Description: file content
--->
-
 <template>
-	<div>我是商品详情</div>
+  <div>
+    <nav class="nav flex flex-middle flex-center">
+      <p class="nav__crumbs">
+        全部商品
+        <i class="el-icon-arrow-right"></i>
+        开发书籍
+        <i class="el-icon-arrow-right"></i>
+        后端书籍
+        <i class="el-icon-arrow-right"></i>
+        Java从入门到项目实战
+      </p>
+    </nav>
+    <main class="main flex">
+      <aside class="main__preview"></aside>
+      <article class="main__details">
+        <p class="main__details-title">
+          <span class="main__details-title--label">新品</span>
+          Java从入门到项目实战（全程视频版）
+          编程入门it计算机书籍算法java编程思想java从入门到精通java核心技术javascript
+        </p>
+        <div class="main__details-msg">
+          <div class="main__details-msg--price flex">
+            <span class="msg-txt">售价</span>
+            <UiMoney :money="123"></UiMoney>
+          </div>
+          <div class="hr"></div>
+          <div class="main__details-msg--service flex flex-middle">
+            <span class="msg-txt">服务</span>
+            <span class="msg-service"
+              >假一赔四 · 全国包邮 · 不支持7天无理由退换</span
+            >
+            <img
+              class="msg-icon"
+              src="~/assets/images/goods/more.png"
+              alt="服务"
+            />
+          </div>
+        </div>
+      </article>
+    </main>
+  </div>
 </template>
 <script>
+import UiMoney from "@/components/UiMoney.vue";
 export default {
-	data(){
-		return {
-			
-		}
-	}
-}
+  componetns: { UiMoney },
+  data() {
+    return {};
+  },
+  created() {
+    console.log(this.$route.params.id);
+  },
+};
 </script>
 <style lang="scss" scoped>
+.nav {
+  width: 100%;
+  height: 40px;
+  background: #f2f4f6;
+  margin-bottom: 14px;
+  &__crumbs {
+    width: 1200px;
+  }
+}
+.main {
+  width: 1200px;
+  margin: 0 auto;
+  &__preview {
+    width: 456px;
+    margin-right: 30px;
+  }
+  &__details {
+    width: 714px;
+    &-title {
+      font-size: 16px;
+      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
+      font-weight: 400;
+      color: #333333;
+      padding-bottom: 20px;
+      &--label {
+        display: inline-block;
+        font-size: 12px;
+        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
+        font-weight: 400;
+        color: #3083ff;
+        padding: 4px 8px;
+        margin-right: 6px;
+        background: rgba(48, 131, 255, 0.1);
+      }
+    }
 
-</style>
+    &-msg {
+      width: 714px;
+      height: 127px;
+      background: #f8f8f8;
+      padding: 30px 20px 0;
+      .msg-txt {
+        font-size: 14px;
+        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
+        font-weight: 400;
+        color: #9e9e9e;
+        margin-right: 20px;
+      }
+
+      .msg-service {
+        font-size: 14px;
+        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
+        font-weight: 400;
+        color: #666666;
+      }
+      .msg-icon {
+        margin-left: 6px;
+        width: 12px;
+        height: 12px;
+      }
+      &--price {
+        padding-bottom: 30px;
+      }
+      .hr {
+        width: 673px;
+        height: 1px;
+        background: #dddddd;
+      }
+      &--service{
+        padding-top: 16px;
+      }
+    }
+  }
+}
+</style>

pages/goods/list/index.vue

@@ -13,26 +13,117 @@
         <p class="main__nav-crumbs">
           全部商品<i class="el-icon-arrow-right"></i>开发书籍
         </p>
-        <div class="main__nav-sort">
+        <div class="main__nav-sort flex flex-middle">
           <span class="main__nav-sort-txt">排序 :</span>
-          <span class="main__nav-sort-btn">综合</span>
-          <Sort sortText="价格"></Sort>
-          <span class="main__nav-sort-btn">上新</span>
+          <span
+            class="main__nav-sort-btn"
+            :class="navActive == 0 ? 'main__nav-sort-active' : ''"
+            @click="onNavClick(0)"
+            >综合</span
+          >
+          <Sort
+            :class="navActive == 1 ? 'main__nav-sort-active' : ''"
+            sortText="价格"
+            :sortType="sortType"
+            @onSort="onSort"
+          ></Sort>
+          <span
+            :class="navActive == 3 ? 'main__nav-sort-active' : ''"
+            class="main__nav-sort-btn"
+            @click="onNavClick(3)"
+            >上新</span
+          >
         </div>
       </nav>
       <div class="main__content">
-        <GoodsItem v-for="(item, index) in 11" :key="index"></GoodsItem>
+        <GoodsItem
+          :item="item"
+          v-for="item in listData"
+          :key="item.id"
+        ></GoodsItem>
       </div>
+      <el-pagination
+        class="main__pagination flex flex-right"
+        @current-change="handleCurrentChange"
+        :current-page.sync="params.pageIndex"
+        :page-size="100"
+        layout="prev, pager, next, jumper"
+        :total="total"
+      >
+      </el-pagination>
     </main>
   </div>
 </template>
 <script>
+import { ApiGetGoodsList } from "@/plugins/api/goods";
 import Sort from "./module/SortItem.vue";
 import GoodsItem from "./module/Item.vue";
 export default {
   components: { Sort, GoodsItem },
   data() {
-    return {};
+    return {
+      navActive: 0,
+      listData: [],
+      total: 0,
+      // 0:综合,1:desc,2:asc,3:上新
+      sortType: 0,
+      params: {
+        length: 20,
+        pageIndex: 1,
+        name: "",
+        categoryId: "",
+        order: "",
+      },
+    };
+  },
+  async created() {
+    this.getGoodsListData();
+  },
+  methods: {
+    onNavClick(i) {
+      console.log(i);
+      let vm = this;
+      vm.sortType = i;
+      vm.navActive = i;
+      vm.getGoodsListData();
+    },
+    onSort() {
+      let vm = this;
+      vm.navActive = 1;
+      vm.sortType < 2 ? vm.sortType++ : (vm.sortType = 1);
+      vm.getGoodsListData();
+    },
+    // 获取商品列表
+    async getGoodsListData() {
+      let vm = this;
+      switch (vm.sortType) {
+        case 0:
+          vm.$set(vm.params, "order", "");
+          break;
+        case 1:
+          vm.$set(vm.params, "order", "starting_price:desc");
+          break;
+        case 2:
+          vm.$set(vm.params, "order", "starting_price:asc");
+          break;
+        case 3:
+          vm.$set(vm.params, "order", "create_time");
+          break;
+      }
+      let res = await ApiGetGoodsList(vm.params);
+      if (res.error) {
+        vm.$message.error(res.error.message);
+        return false;
+      }
+      vm.total = res.result.data.total;
+      vm.listData = res.result.data.records;
+      console.log(`goodListRes`, res.result);
+    },
+    handleCurrentChange(val) {
+      let vm = this;
+      vm.$set(vm.params, "pageIndex", val);
+      vm.getGoodsListData();
+    },
   },
 };
 </script>
@@ -44,10 +135,19 @@ export default {
 }
 
 .main {
-  width: 75rem;
+  width: 1200px;
   margin: 0 auto;
+  padding-top: 14px;
+  padding-bottom: 60px;
 
   &__nav {
+    &::after {
+      display: block;
+      width: 1200px;
+      content: "";
+      height: 1px;
+      background: #eee;
+    }
     &-crumbs {
       .el-icon-arrow-right {
         margin: 0 10px;
@@ -55,28 +155,62 @@ export default {
     }
     &-sort {
       width: 100%;
-      height: 48px;
-      background: #fff;
-      margin-top: 0.88rem;
-      margin-bottom: 1.13rem;
-      display: flex;
-      align-items: center;
-      padding: 0 1.88rem;
+      height: 50px;
+      margin-top: 24px;
+      padding: 0 30px;
       &-txt {
         color: #999999;
-        margin-right: 1.88rem;
+        margin-right: 30px;
       }
       &-btn {
-        margin-right: 3.13rem;
+        margin-right: 50px;
+        cursor: pointer;
+      }
+      &-active {
+        color: #ff512b;
       }
     }
   }
   &__content {
+    margin-top: 30px;
     display: grid;
     width: 100%;
-    grid-template-columns: repeat(auto-fill, 14.5rem);
+    grid-template-columns: repeat(auto-fill, 232px);
     justify-content: space-between;
-    grid-row-gap: 0.63rem;
+    grid-row-gap: 10px;
+  }
+  &__pagination {
+    margin-top: 60px;
+    /deep/.el-pager {
+      margin-left: 8px;
+    }
+
+    /deep/button,
+    /deep/.number,
+    /deep/.btn-quicknext,
+    /deep/.btn-quickprev {
+      width: 32px;
+      height: 32px;
+      text-align: center;
+      line-height: 32px;
+      margin-left: 8px;
+      border-radius: 2px 2px 2px 2px;
+      border: 1px solid rgba(0, 0, 0, 0.15);
+      font-size: 14px;
+      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
+      font-weight: 400;
+      color: rgba(0, 0, 0, 0.65);
+    }
+
+    /deep/.active {
+      background: #ff512b;
+      color: #fff;
+    }
   }
 }
 </style>
+<style>
+.tab-category__menu {
+  display: none;
+}
+</style>

pages/goods/list/module/Item.vue

@@ -1,22 +1,92 @@
 <template>
-  <div class="goods-item"></div>
+  <div class="goods-item" @click="onItem">
+    <img class="goods-item__img" :src="item.mainPicture" alt="商品图片" />
+    <div class="goods-item__title">
+      <span class="goods-item__title-label" v-if="isLabel(item.labelList)">
+        {{ getLabel(item.labelList) }}
+      </span>
+      {{ item.name }}
+    </div>
+    <div class="goods-item__price">
+      <UiMoney :money="item.startingPrice"></UiMoney>
+    </div>
+  </div>
 </template>
 <script>
+import UiMoney from "@/components/UiMoney.vue";
 export default {
   name: "GoodsItem",
-  props: {},
+  componetns: { UiMoney },
+  props: {
+    item: {
+      type: Object,
+      default: () => {},
+    },
+  },
   data() {
     return {};
   },
-  methods: {},
+  methods: {
+    isLabel(arr) {
+      return arr.some((item) => item.code);
+    },
+    getLabel(arr) {
+      let str = "";
+      for (let i = 0; i < arr.length; i++) {
+        if (arr[i].code != "miaosha") {
+          str = arr[i].text;
+          break;
+        }
+      }
+      return str;
+    },
+    onItem() {
+      this.$router.push({
+        path: "/goods/detail/" + this.item.id,
+      });
+    },
+  },
 };
 </script>
 <style lang="scss" scoped>
 .goods-item {
-  width: 14.5rem;
-  height: 21.25rem;
-  // background: #ffffff;
-  background: url(~/assets/images/goods/item.png);
-  background-size: contain;
+  width: 232px;
+  height: 340px;
+  cursor: pointer;
+  background: #ffffff;
+
+  &__img {
+    width: 232px;
+    height: 232px;
+  }
+  &__title {
+    width: 200px;
+    height: 45px;
+    margin: 17px auto 10px;
+    font-size: 14px;
+    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
+    font-weight: 400;
+    color: #333333;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    &-label {
+      display: inline-block;
+      padding: 4px 8px;
+      background: rgba(255, 135, 91, 0.1);
+      font-size: 12px;
+      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
+      font-weight: 400;
+      color: #ff875b;
+      text-align: center;
+      margin-right: 8px;
+    }
+  }
+  &__price {
+    width: 200px;
+    margin: 0 auto;
+  }
 }
 </style>

pages/goods/list/module/SortItem.vue

@@ -3,17 +3,17 @@
     <span class="sort-item-txt">{{ sortText }}</span>
     <div class="sort-img-box">
       <img
-        v-if="sortType === 1"
+        v-if="sortType === 0 || sortType === 1"
         src="~/assets/images/goods/sort-t1.png"
         alt="sort"
       />
       <img
-        v-if="sortType === 0"
+        v-if="sortType === 2"
         src="~/assets/images/goods/sort-t2.png"
         alt="sort"
       />
       <img
-        v-if="sortType === 0"
+        v-if="sortType === 0 || sortType === 2"
         src="~/assets/images/goods/sort-b1.png"
         alt="sort"
       />
@@ -26,7 +26,6 @@
   </div>
 </template>
 <script>
-import { Debounce } from "~/plugins/utils";
 export default {
   name: "SortItem",
   props: {
@@ -34,6 +33,11 @@ export default {
       type: String,
       default: "",
     },
+    /* 
+      0:未选中
+      1:desc
+      2:asc
+    */
     sortType: {
       type: Number,
       default: 0,
@@ -43,39 +47,34 @@ export default {
     return {};
   },
   methods: {
-    // onSort:Debounce((e) => {
-    //   console.log(1)
-    // }, 1000)
-    onSort: function () {
-      console.log(Debounce)
-      Debounce(()=>{
-        console.log(1)
-      }, 1000)();
+    onSort() {
+      this.$emit("onSort");
     },
   },
 };
 </script>
 <style lang="scss" scoped>
 .sort-item {
-  margin-right: 3.13rem;
+  margin-right: 50px;
   display: flex;
   align-items: center;
   cursor: pointer;
   .sort-item-txt {
-    margin-right: 0.38rem;
+    margin-right: 6px;
     display: flex;
     align-items: center;
+    font-size: 14px;
   }
-  .sort-img-box{
+  .sort-img-box {
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
   }
-  img{
-    width: 0.38rem;
-    height: 0.19rem;
-    margin: 0.08rem 0;
+  img {
+    width: 6px;
+    height: 3px;
+    margin: 3px 0;
   }
 }
 </style>

plugins/api/goods.js

@@ -16,7 +16,7 @@ const BASE_URL = `${ENV.base_url}/mall/product`;
  * @param {*} params 
  */
 export const ApiGetGoodsList = (params) => 
-	ToAsyncAwait(axios.get(`${BASE_URL}/app/product/page`, params));
+	ToAsyncAwait(axios.get(`${BASE_URL}/app/product/page`, {params}));
 /**
  * 获取推荐商品
  * @param {*} params 

plugins/element-ui.js

@@ -1,5 +1,5 @@
 import Vue from 'vue'
 import Element from 'element-ui'
-import locale from 'element-ui/lib/locale/lang/en'
+import locale from 'element-ui/lib/locale/lang/zh-CN'
 
 Vue.use(Element, { locale })