Merge remote-tracking branch 'origin/feature/task1.0.0-0507-zz' into feature/task1.0.0

assets/scss/global.scss

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

pages/goods/detail/_id.vue

@@ -1,23 +1,198 @@
-<!--
- * @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">
+        <img class="main__preview" src="~/static/images/goods/more.png" alt="商品大图" />
+      </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="~/static/images/goods/more.png"
+              alt="服务"
+            />
+          </div>
+        </div>
+        <div class="main__details-option">
+          <div class="main__details-option--line flex flex-middle">
+            <span class="line-txt">规格</span>
+            <div class="line-btns">
+              <UiButton
+                type="yellow_line"
+                v-for="(item, index) in 11"
+                :key="index"
+                >123</UiButton
+              >
+            </div>
+          </div>
+        </div>
+        <div class="main__details-pay">
+          <UiButton type="yellow_line">加入购物车</UiButton>
+          <UiButton type="yellow_panel">立即购买</UiButton>
+        </div>
+      </article>
+    </main>
+  </div>
 </template>
 <script>
+import UiMoney from "@/components/UiMoney.vue";
+import UiButton from "@/components/UiButton.vue";
+import { ApiGetGoodsDetail, ApiGetGoodsSkus } from "@/plugins/api/goods";
 export default {
-	data(){
-		return {
-			
-		}
-	}
-}
+  componetns: { UiMoney, UiButton },
+  data() {
+    return {};
+  },
+  async created() {
+    let id = this.$route.params.id;
+    let res1 = await ApiGetGoodsDetail({ id });
+    let res2 = await ApiGetGoodsSkus({ productId: id });
+    console.log(`res1`, res1.result);
+    console.log(`res2`, res2.result);
+  },
+};
 </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);
+      }
+    }
+
+    &-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;
+      }
 
-</style>
+      .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;
+      }
+    }
+
+    &-option {
+      padding-top: 24px;
+
+      &--line {
+        margin-bottom: 6px;
+        .line-txt {
+          font-size: 14px;
+          font-family: Microsoft YaHei-Regular, Microsoft YaHei;
+          font-weight: 400;
+          color: #9e9e9e;
+          margin-left: 20px;
+          margin-right: 33px;
+        }
+        .line-btns {
+          width: 600px;
+          /deep/.ui-button__yellow_line {
+            background: #fff;
+            margin-right: 14px;
+            color: #666;
+            margin-bottom: 6px;
+            border-color: #ccc;
+          }
+        }
+      }
+    }
+
+    &-pay {
+      margin-top: 40px;
+      button {
+        width: 144px;
+        height: 46px;
+        margin-right: 30px;
+        font-size: 18px;
+        &:nth-child(1) {
+          background: #fff;
+        }
+        &:nth-child(2) {
+          border: none;
+        }
+      }
+    }
+  }
+}
+</style>

pages/goods/list/index.vue

@@ -7,17 +7,210 @@
 -->
 
 <template>
-	<div>我是商品列表</div>
+  <div class="page">
+    <main class="main">
+      <nav class="main__nav">
+        <p class="main__nav-crumbs">
+          全部商品<i class="el-icon-arrow-right"></i>开发书籍
+        </p>
+        <div class="main__nav-sort flex flex-middle">
+          <span class="main__nav-sort-txt">排序 :</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
+          :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 {
-	data(){
-		return {
-			
-		}
-	}
-}
+  components: { Sort, GoodsItem },
+  data() {
+    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;
+      }
+      console.log(`goodListRes`, res.result);
+      vm.total = res.result.total;
+      vm.listData = res.result.records;
+    },
+    handleCurrentChange(val) {
+      let vm = this;
+      vm.$set(vm.params, "pageIndex", val);
+      vm.getGoodsListData();
+    },
+  },
+};
 </script>
 <style lang="scss" scoped>
+.page {
+  background: #f8f8f8;
+  width: 100%;
+  min-height: 600px;
+}
+
+.main {
+  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;
+      }
+    }
+    &-sort {
+      width: 100%;
+      height: 50px;
+      margin-top: 24px;
+      padding: 0 30px;
+      &-txt {
+        color: #999999;
+        margin-right: 30px;
+      }
+      &-btn {
+        margin-right: 50px;
+        cursor: pointer;
+      }
+      &-active {
+        color: #ff512b;
+      }
+    }
+  }
+  &__content {
+    margin-top: 30px;
+    display: grid;
+    width: 100%;
+    grid-template-columns: repeat(auto-fill, 232px);
+    justify-content: space-between;
+    grid-row-gap: 10px;
+  }
+  &__pagination {
+    margin-top: 60px;
+    /deep/.el-pager {
+      margin-left: 8px;
+    }
 
-</style>
+    /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

@@ -0,0 +1,92 @@
+<template>
+  <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",
+  componetns: { UiMoney },
+  props: {
+    item: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  data() {
+    return {};
+  },
+  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: 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

@@ -0,0 +1,80 @@
+<template>
+  <div class="sort-item" @click="onSort">
+    <span class="sort-item-txt">{{ sortText }}</span>
+    <div class="sort-img-box">
+      <img
+        v-if="sortType === 0 || sortType === 1"
+        src="~/static/images/goods/sort-t1.png"
+        alt="sort"
+      />
+      <img
+        v-if="sortType === 2"
+        src="~/static/images/goods/sort-t2.png"
+        alt="sort"
+      />
+      <img
+        v-if="sortType === 0 || sortType === 2"
+        src="~/static/images/goods/sort-b1.png"
+        alt="sort"
+      />
+      <img
+        v-if="sortType === 1"
+        src="~/static/images/goods/sort-b2.png"
+        alt="sort"
+      />
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "SortItem",
+  props: {
+    sortText: {
+      type: String,
+      default: "",
+    },
+    /* 
+      0:未选中
+      1:desc
+      2:asc
+    */
+    sortType: {
+      type: Number,
+      default: 0,
+    },
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    onSort() {
+      this.$emit("onSort");
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.sort-item {
+  margin-right: 50px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  .sort-item-txt {
+    margin-right: 6px;
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+  }
+  .sort-img-box {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+  }
+  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 
@@ -34,7 +34,7 @@ export const ApiGetGoodsDetail = (params) =>
  * @param {*} productId 
  */
 export const ApiGetGoodsSkus = (params) => 
-ToAsyncAwait(axios.get(`${BASE_URL}/app/product/sku`,params));
+ToAsyncAwait(axios.get(`${BASE_URL}/app/product/sku`,{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 })