Merge branch 'feature/task1.0.0' into feature/task1.0.0-0505-ch

assets/scss/element-variables.scss

@@ -0,0 +1,7 @@
+/* 改变主题色变量 */
+$--color-primary: #FF512B;
+
+/* 改变 icon 字体路径变量，必需 */
+$--font-path: '~element-ui/lib/theme-chalk/fonts';
+
+@import "~element-ui/packages/theme-chalk/src/index";

assets/scss/util.scss

@@ -91,4 +91,20 @@ $baseFontSize: 100 !default;
 @mixin layout-box {
   width: 1200px;
   margin: 0 auto;
+}
+
+/*单行溢出*/
+@mixin ellipsis {
+  overflow:hidden;
+  text-overflow:ellipsis;
+  white-space:nowrap
+}
+
+/*多行溢出*/
+@mixin ellipses($line) {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: $line;
+  -webkit-box-orient: vertical;
 }

components/BsAddress.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="address flex flex-middle" v-if="!isEdit">
+    <div class="address flex flex-middle" v-if="!isOperation && !isAccount">
       <article class="address__msg">
         <div class="address__msg-line flex flex-middle">
           <img src="@/assets/img/goods/point.png" alt="收货地址" />
@@ -39,17 +39,32 @@
           />
           切换地址
         </UiButton>
-        <UiButton type="grey" @click="isEdit = true" class="flex flex-middle">
+        <UiButton
+          type="grey"
+          @click="isOperation = true"
+          class="flex flex-middle"
+        >
           <img class="icon" src="@/assets/img/goods/add.png" alt="新建地址" />
           新建地址
         </UiButton>
       </div>
     </div>
-    <div class="address flex flex-middle" v-else>
+    <div
+      class="address"
+      :class="isAccount ? 'account' : 'flex flex-middle'"
+      v-else
+    >
       <article class="address__msg">
         <div class="address__msg-line flex flex-middle">
           <span class="address__msg-line--type">所在区域</span>
-          <no-ssr><v-distpicker @selected="onSelected"></v-distpicker></no-ssr>
+          <no-ssr
+            ><v-distpicker
+              :province="selectData.province.value"
+              :city="selectData.city.value"
+              :area="selectData.area.value"
+              @selected="onSelected"
+            ></v-distpicker
+          ></no-ssr>
         </div>
         <div class="address__msg-line flex flex-middle">
           <span class="address__msg-line--type">详细地址</span>
@@ -71,14 +86,17 @@
           ></el-input>
         </div>
       </article>
-      <div class="hr"></div>
-      <div class="address__operation flex flex-column flex-middle">
+      <div class="hr" v-if="!isAccount"></div>
+      <div
+        class="address__operation flex flex-middle"
+        :class="!isAccount ? 'flex-column' : ''"
+      >
         <el-checkbox v-model="defaultAddress">设为默认地址</el-checkbox>
         <div>
           <UiButton
-            v-if="addressList && addressList.length"
+            v-if="addressList && addressList.length && !isAccount"
             type="grey"
-            @click="isEdit = false"
+            @click="isOperation = false"
             >取消</UiButton
           >
           <UiButton type="yellow_panel" @click="onAddAddress"
@@ -115,8 +133,12 @@
 </template>
 <script>
 import UiButton from "@/components/UiButton.vue";
-
-import { ApiGetAddress, ApiPostAddress } from "@/plugins/api/base";
+import { IsPhone } from "@/plugins/utils/index.js";
+import {
+  ApiGetAddress,
+  ApiPostAddress,
+  ApiPutAddress,
+} from "@/plugins/api/base";
 export default {
   components: { UiButton },
   props: {
@@ -124,6 +146,14 @@ export default {
       type: Object,
       default: () => {},
     },
+    isAccount: {
+      type: Boolean,
+      default: false,
+    },
+    isEdit: {
+      type: Boolean,
+      default: false,
+    },
   },
   model: {
     prop: "addressData",
@@ -131,15 +161,26 @@ export default {
   },
   data() {
     return {
-      isEdit: false,
+      isOperation: false,
       dialogVisible: false,
       detailAddress: "",
       addressUser: "",
       addressPhone: "",
       defaultAddress: true,
-      selectData: {},
+      selectData: {
+        area: {
+          value: "",
+        },
+        city: {
+          value: "",
+        },
+        province: {
+          value: "",
+        },
+      },
       addressList: [{}],
       curAddressListItem: 0,
+      editIndex: 0,
     };
   },
   created() {
@@ -150,17 +191,31 @@ export default {
       let vm = this;
       let res = await ApiGetAddress();
       if (res.result && res.result.length) {
-        vm.isEdit = false;
+        vm.isOperation = false;
         vm.addressList = res.result;
-        let curIndex = vm.addressList.findIndex((item) => item.id == 3);
+        let curIndex = vm.addressList.findIndex((item) => item.isDefault);
         vm.curAddressListItem =
           curIndex > -1 ? vm.addressList[curIndex] : vm.addressList[0];
+        vm.$emit("getList", vm.addressList);
         vm.$emit("emitAddress", vm.curAddressListItem);
       } else {
-        vm.isEdit = true;
+        vm.isOperation = true;
       }
       console.log("获取收货地址", res);
     },
+    setAddressData(i) {
+      let vm = this;
+      vm.editIndex = i;
+      let editItem = vm.addressList[i];
+      console.log(editItem);
+      vm.$set(vm.selectData.area, "value", editItem.area);
+      vm.$set(vm.selectData.city, "value", editItem.city);
+      vm.$set(vm.selectData.province, "value", editItem.province);
+      vm.$set(vm, "detailAddress", editItem.detailAddress);
+      vm.$set(vm, "defaultAddress", editItem.isDefault);
+      vm.$set(vm, "addressUser", editItem.name);
+      vm.$set(vm, "addressPhone", editItem.phone);
+    },
     onSwtich() {
       this.dialogVisible = true;
     },
@@ -185,7 +240,7 @@ export default {
         vm.$message.error("请输入收货人~");
         return;
       }
-      if (!vm.addressPhone) {
+      if (!IsPhone(vm.addressPhone)) {
         vm.$message.error("请输入收货人手机号码~");
         return;
       }
@@ -201,7 +256,13 @@ export default {
         province: vm.selectData.province.value,
         provinceCode: vm.selectData.province.code,
       };
-      let res = await ApiPostAddress(params);
+      let res;
+      if (vm.isEdit) {
+        let editParams = Object.assign(vm.addressList[vm.editIndex], params);
+        res = await ApiPutAddress(editParams);
+      } else {
+        res = await ApiPostAddress(params);
+      }
       if (!res.error) {
         vm.$message.success("添加成功!");
         vm.getAddressData();
@@ -355,4 +416,8 @@ export default {
     padding: 0;
   }
 }
+
+.account {
+  width: 1000px;
+}
 </style>

components/UiConfirm.vue

@@ -0,0 +1,83 @@
+<template>
+  <el-dialog
+    width="16%"
+    center
+    :visible.sync="dialogVisible"
+    :show-close="false"
+    class="bs-order-ensure"
+  >
+    <div class="dialog-content flex flex-middle">
+      <img src="~/assets/img/common/icon-warning.png" />
+      <span>{{ title }}</span>
+    </div>
+    <div class="dialog-footer flex flex-between">
+      <el-button @click="dialogVisible = false">取消</el-button>
+      <el-button class="dialog-footer__btn--ensure" @click="onConfirm"
+        >确认</el-button
+      >
+    </div>
+  </el-dialog>
+</template>
+<script>
+import UiButton from "./UiButton.vue";
+export default {
+  components: { UiButton },
+  props: {
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+    title: {
+      type: String,
+      default: "",
+    },
+  },
+  computed: {
+    dialogVisible: {
+      get() {
+        return this.visible;
+      },
+      set(val) {
+        this.$emit("update:visible", val);
+      },
+    },
+  },
+  methods: {
+    onConfirm() {
+      this.$emit("confirm");
+      this.visible = false;
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+/deep/.el-dialog {
+  .el-dialog__header {
+    display: none;
+  }
+  .el-dialog__body {
+    padding: 41px 60px;
+    .dialog-content {
+      color: rgba(0, 0, 0, 0.8);
+      font-size: 16px;
+      padding: 0 2px 42px 2px;
+      img {
+        width: 24px;
+        height: 24px;
+        margin-right: 17px;
+      }
+    }
+    .dialog-footer {
+      .el-button {
+        width: 90px;
+        height: 30px;
+        font-size: 14px;
+      }
+      .dialog-footer__btn--ensure {
+        background: #ff875b;
+        color: #ffffff;
+      }
+    }
+  }
+}
+</style>

constants/index.js

@@ -1,8 +1,28 @@
 /**
  * 全局常量，请避免使用魔法数字
  */
-const TOKEN_KEY = 'msbPcToken';
 
-export {
-  TOKEN_KEY
-}
+// 用户凭证名
+const TOKEN_KEY = "msbPcToken";
+
+// 订单状态
+const ORDER_STATUS = {
+  WAIT_PAY: 1, // 待付款
+  WAIT_SEND: 3, //待发货
+  WAIT_RECEIVE: 4, // 待收货
+};
+
+// 性别
+const SEX_TYPE = {
+  MALE: 1, // 男
+  FEMALE: 2, // 女
+  UNKNOW: 3, // 未知
+};
+
+// 热门分类类级
+const CATEGROY_LEVEL = {
+  ONE: 1,
+  TWO: 2,
+};
+
+export { TOKEN_KEY, ORDER_STATUS, SEX_TYPE, CATEGROY_LEVEL };

layouts/default.vue

@@ -9,8 +9,9 @@
   <div class="layout">
     <BsLogin :visible.sync="loginVisible" />
     <Header
-      :is-categroy-open="categroyOption.open"
-      :show-categroy-tab="categroyOption.show"
+      :is-categroy-open="isHomePage"
+      :hide-bar-line="isHomePage"
+      :show-categroy-tab="showCategroyTab"
       :is-sticky="isSticky"
     />
     <Nuxt />
@@ -21,8 +22,7 @@
 import BsLogin from "@/components/BsLogin.vue";
 import Header from "./module/header/index.vue";
 import Footer from "./module/footer/index.vue";
-const CATEGROY_OPEN_PAGES = ["/"]; // 默认展开热门分类tab的页面
-const CATEGROY_HIDE_PAGES = ["/account"]; // 不展示热门分类tab的页面
+const CATEGROY_HIDE_PAGES = [/\/account/]; // 隐藏热门分类tab的页面
 
 export default {
   name: "Layout",
@@ -42,13 +42,13 @@ export default {
         this.$store.commit("setLoginVisible", val);
       },
     },
-    categroyOption() {
-      // 当前页面路径
-      const currentPath = this.$route.path;
-      return {
-        open: CATEGROY_OPEN_PAGES.includes(currentPath),
-        show: !CATEGROY_HIDE_PAGES.includes(currentPath),
-      };
+    isHomePage() {
+      return this.$route.path === "/";
+    },
+    showCategroyTab() {
+      return !CATEGROY_HIDE_PAGES.some((reg) => {
+        return reg.test(this.$route.path);
+      });
     },
   },
   mounted() {

layouts/module/header/HeaderInfoBar.vue

@@ -116,7 +116,7 @@ export default {
     handleCommandClick(event) {
       switch (event) {
         case MENU_VALUE.PERSONAL:
-          this.$router.push("/account/userInfo");
+          this.$router.push("/account/home");
           break;
         case MENU_VALUE.ADDRESS:
           this.$router.push("/account/address");
@@ -136,7 +136,7 @@ export default {
   },
 };
 </script>
-<style lang="scss">
+<style lang="scss" scoped>
 .dropdown-menu-self {
   width: 200px;
   margin-top: 0 !important;

layouts/module/header/index.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="layout-header">
+    <!-- 滚动吸顶头部 -->
     <template v-if="isSticky">
       <div class="sticky-bar-header">
         <div class="sticky-bar-header__wrap flex flex-middle flex-between">
@@ -75,6 +76,7 @@
               </div>
             </div>
           </div>
+          <!-- 热门分类 -->
           <div class="bar-header-box__tab flex flex-middle">
             <div
               v-show="showCategroyTab"
@@ -88,17 +90,21 @@
               </div>
               <div
                 v-show="isCategroyOpen || categroyVisible"
-                class="tab-category__menu flex flex-left"
+                class="tab-category__menu flex"
                 @mouseenter="handleCategoryTwoChange(true)"
                 @mouseleave="handleCategoryTwoChange(false)"
               >
                 <!-- 左侧一级分类 -->
                 <div class="tab-category-menu__left">
                   <div
-                    v-for="item in categrayData"
+                    v-for="item in categroyData"
                     :key="item.id"
-                    @mouseenter="handleCategorySelect(item.id)"
+                    @mouseenter="handleCategoryHover(item.id)"
+                    @click="onCategoryClick(item.id, CATEGROY_LEVEL.ONE)"
                     class="menu-left__item flex flex-middle"
+                    :class="{
+                      'menu-left__item--light': item.id === currentCategroyId,
+                    }"
                   >
                     <img />
                     <span>{{ item.name }}</span>
@@ -107,15 +113,25 @@
                 <!-- 右侧二级分类 -->
                 <div
                   v-show="categroyTwoVisible"
-                  class="tab-category-menu__right"
+                  class="tab-category-menu__right flex-1"
                 >
                   <div
-                    v-for="item in currentCategrayList"
+                    v-for="item in categroyData"
                     :key="item.id"
-                    class="menu-right__item"
-                    @click="onCateogryTwoClick(item)"
+                    @mouseenter="handleCategoryHover(item.id)"
+                    class="category-menu-right__wrap"
+                    :class="{
+                      'category-menu-right__wrap--light':
+                        item.id === currentCategroyId,
+                    }"
                   >
-                    {{ item.name }}
+                    <span
+                      v-for="itemList in item.list"
+                      :key="itemList.id"
+                      class="menu-right-wrap__item"
+                      @click="onCategoryClick(itemList.id, CATEGROY_LEVEL.TWO)"
+                      >{{ itemList.name }}</span
+                    >
                   </div>
                 </div>
               </div>
@@ -135,16 +151,18 @@
           </div>
         </div>
       </div>
+      <div v-if="!hideBarLine" class="layout-header-line"></div>
     </template>
   </div>
 </template>
 <script>
 import { mapState } from "vuex";
-import HeaderInfoBar from "./HeaderInfoBar.vue";
 import {
   ApiGetCategoryOneList,
   ApiGetCategoryTwoAndGoods,
 } from "@/plugins/api/goods";
+import { CATEGROY_LEVEL } from "@/constants";
+import HeaderInfoBar from "./HeaderInfoBar.vue";
 
 export default {
   name: "DefaultHeader",
@@ -167,31 +185,38 @@ export default {
       type: Boolean,
       default: true,
     },
+
+    // 是否隐藏底部黄色边框
+    hideBarLine: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
+      CATEGROY_LEVEL,
       searchContent: "",
       tabPath: "/",
       tabList: [
         { label: "首页", value: "/" },
-        { label: "爆款推荐", value: "/goods/list?id=1" },
-        { label: "开发书籍", value: "/goods/list?id=2" },
+        {
+          label: "爆款推荐",
+          value: `/goods/list?id=recommend`,
+        },
+        {
+          label: "开发书籍",
+          value: `/goods/list?id=6&levelType=${CATEGROY_LEVEL.ONE}`,
+        },
         { label: "限时秒杀", value: "/sckill" },
       ],
       categroyTwoVisible: false, // 是否展示二级分类
       categroyVisible: false, // 是否展示一级分类
-      currentCategrayId: 0, // 当前鼠标悬停的一级分类id
-      categrayData: [],
+      currentCategroyId: 0, // 当前鼠标悬停的一级分类id
+      categroyData: [],
     };
   },
   computed: {
     ...mapState(["userInfo", "token"]),
-    currentCategrayList() {
-      const data = this.categrayData.find(({ id }) => {
-        return this.currentCategrayId === id;
-      });
-      return (data && data.list) || [];
-    },
   },
   mounted() {
     this.getCategroyData();
@@ -200,24 +225,35 @@ export default {
     onLoginClick() {
       this.$isLoginValidate();
     },
-    // 一级分类选中
-    handleCategorySelect(id) {
-      this.currentCategrayId = id;
+    // 一级分类鼠标悬停
+    handleCategoryHover(id) {
+      this.currentCategroyId = id;
     },
-    // 二级分类点击
-    onCateogryTwoClick() {
-      this.$router.push("/goods/list");
+    // 分类点击
+    onCategoryClick(id, levelType) {
+      this.categroyVisible = false;
+      this.categroyTwoVisible = false;
+      this.$router.push({
+        path: "/goods/list",
+        query: {
+          id,
+          levelType,
+        },
+      });
     },
     // 一级分类是否可见
     handleCategoryChange(val) {
       this.categroyVisible = val;
+      if (!val) {
+        this.currentCategroyId = 0;
+      }
     },
     // 二级分类是否可见
     handleCategoryTwoChange(val) {
       this.categroyTwoVisible = val;
     },
-    handleTabSelect(path) {
-      this.$router.push({ path });
+    handleTabSelect(value) {
+      this.$router.push({ path: value });
     },
     onTabSelect({ value }) {
       this.tabPath = value;
@@ -233,7 +269,7 @@ export default {
     async getCategroyData() {
       const { result } = await ApiGetCategoryOneList();
       if (result && result.length > 0) {
-        this.categrayData = await Promise.all(
+        this.categroyData = await Promise.all(
           result.map(async (item) => {
             const { result: resultGoods } = await ApiGetCategoryTwoAndGoods({
               categoryId: item.id,
@@ -268,7 +304,7 @@ export default {
   height: 50px;
   z-index: 10;
   background: #ffffff;
-  box-shadow: 0px 4px 10px 1px rgba(0, 0, 0, 0.10000000149011612);
+  box-shadow: 0px 4px 10px 1px rgba(0, 0, 0, 0.1);
   .sticky-bar-header__wrap {
     @include layout-box;
     height: 100%;
@@ -429,13 +465,14 @@ export default {
             width: 190px;
             padding: 15px 0;
             background: #ffffff;
-            .menu-left__item:hover {
-              color: #ff875b;
-            }
             .menu-left__item {
               height: 50px;
               cursor: pointer;
               padding: 0 24px 0 41px;
+              &:hover,
+              &--light {
+                color: #ff875b;
+              }
               img {
                 width: 20px;
                 height: 20px;
@@ -444,20 +481,29 @@ export default {
             }
           }
           .tab-category-menu__right {
-            width: 510px;
-            padding: 30px 26px;
-            box-shadow: 7px 0px 10px 1px rgba(0, 0, 0, 0.10000000149011612);
+            padding: 15px 26px;
+            box-shadow: 7px 0px 10px 1px rgba(0, 0, 0, 0.1);
             border: 1px solid #eeeeee;
             background: #ffffff;
-            .menu-right__item:hover {
-              color: #ff875b;
-            }
-            .menu-right__item {
-              display: inline-block;
+            .category-menu-right__wrap {
+              height: 50px;
+              line-height: 50px;
+              padding: 0 16px;
               font-size: 12px;
               color: #999999;
-              margin-right: 20px;
-              cursor: pointer;
+              white-space: nowrap;
+              &:hover,
+              &--light {
+                background: #f8f8f8;
+              }
+              .menu-right-wrap__item {
+                color: #999999;
+                margin-right: 20px;
+                cursor: pointer;
+                &:hover {
+                  color: #ff875b;
+                }
+              }
             }
           }
         }
@@ -475,4 +521,9 @@ export default {
     }
   }
 }
+.layout-header-line {
+  width: 100%;
+  height: 2px;
+  background: #ff875b;
+}
 </style>

package.json

@@ -20,6 +20,7 @@
     "core-js": "^3.19.3",
     "element-ui": "^2.15.8",
     "js-util-all": "^1.0.6",
+    "lodash": "^4.17.21",
     "nuxt": "^2.15.8",
     "v-distpicker": "^1.2.13",
     "vue": "^2.6.14",

pages/account/index/address.vue

@@ -7,17 +7,110 @@
 -->
 
 <template>
-	<div>我是地址管理页面</div>
+  <div>
+    <div class="title">收货地址</div>
+    <BsAddress
+      ref="bsAddress"
+      @getList="getList"
+      :isAccount="true"
+      :isEdit="isEdit"
+    ></BsAddress>
+    <el-table :data="addressList" style="width: 100%">
+      <el-table-column prop="name" label="收货人" width="130px">
+      </el-table-column>
+      <el-table-column prop="phone" label="手机号码" width="140px">
+      </el-table-column>
+      <el-table-column label="收货地址" width="430px">
+        <template slot-scope="scope">
+          {{
+            scope.row.area +
+            scope.row.city +
+            scope.row.province +
+            scope.row.detailAddress
+          }}
+        </template>
+      </el-table-column>
+      <el-table-column label="操作">
+        <template slot-scope="scope">
+          <div class="btns">
+            <span @click="editItem(scope.$index)">编辑</span>
+            <span @click="deleteItem(scope.row)">删除</span>
+            <span v-if="scope.row.isDefault" class="default">默认地址</span>
+            <span v-else @click="setItem(scope.row)">设为默认地址</span>
+          </div>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
 </template>
 <script>
+import { ApiPutAddress, ApiDeleteAddress } from "@/plugins/api/base";
+
+import BsAddress from "@/components/BsAddress.vue";
+import UiButton from "@/components/UiButton.vue";
 export default {
-	data(){
-		return {
-			
-		}
-	}
-}
+  components: { BsAddress, UiButton },
+  data() {
+    return {
+      isEdit: false,
+      addressList: [],
+    };
+  },
+  methods: {
+    getList(list) {
+      this.addressList = list || [];
+    },
+    editItem(i) {
+      console.log(i);
+      this.isEdit = true;
+      this.$refs.bsAddress.setAddressData(i);
+    },
+    async setItem(item) {
+      let params = JSON.parse(JSON.stringify(item));
+      params.isDefault = true;
+      let res = await ApiPutAddress(params);
+      this.$refs.bsAddress.getAddressData();
+      if (!res.error) {
+        this.$message.success("设置成功~");
+      }
+    },
+    deleteItem(item) {
+      let vm = this;
+      vm.$alert("确认删除此收货地址吗?", "提示", {
+        confirmButtonText: "确定",
+        callback: async () => {
+          let res = await ApiDeleteAddress({
+            idList: [item.id],
+          });
+          if (!res.error) {
+            vm.$message.success("删除成功~");
+            vm.$refs.bsAddress.getAddressData();
+          }
+          console.log(res);
+        },
+      });
+    },
+  },
+};
 </script>
 <style lang="scss" scoped>
-
-</style>
+.btns {
+  span {
+    cursor: pointer;
+    margin-right: 40px;
+    &:hover {
+      color: #ff875b;
+    }
+  }
+  .default {
+    display: inline-block;
+    width: 84px;
+    height: 30px;
+    border-radius: 4px;
+    border: 1px solid #ff875b;
+    color: #ff875b;
+    text-align: center;
+    line-height: 30px;
+  }
+}
+</style>

pages/account/index/home/index.vue

@@ -7,14 +7,179 @@
 -->
 
 <template>
-  <div class="account-home"></div>
+  <div class="account-home">
+    <div class="account-home-head flex">
+      <div
+        class="account-home-head__info flex"
+        :style="{ backgroundImage: `url(${userInfoBkg})` }"
+      >
+        <img class="home-head-info__avatar" :src="userInfo.avatar" />
+        <div class="home-head-info__wrap">
+          <span class="head-info-wrap__title">{{ userInfo.nickname }}</span>
+          <span>第一个青春是上帝给的...</span>
+        </div>
+      </div>
+      <div class="account-home-head__order flex flex-middle flex-between">
+        <div
+          v-for="(item, index) in orderTypes"
+          :key="index"
+          @click="$router.push(item.path)"
+          class="account-home-content__item flex flex-column flex-middle"
+        >
+          <img :src="item.icon" />
+          <span>{{ item.label }}</span>
+          <div v-if="item.count > 0" class="account-home-content__item--count">
+            {{ item.count }}
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="account-home-content flex">
+      <LogisitcsInfo />
+      <Message />
+    </div>
+  </div>
 </template>
 <script>
+import { mapState } from "vuex";
+import { ORDER_STATUS } from "@/constants";
+import {
+  ApiGetOrderStatistics,
+  ApiGetRefundStatistisc,
+} from "@/plugins/api/order";
+import LogisitcsInfo from "./module/LogisitcsInfo.vue";
+import Message from "./module/Message.vue";
+
 export default {
   name: "AccountHome",
+  components: { LogisitcsInfo, Message },
   data() {
-    return {};
+    function getOrderTypeIcon(path) {
+      return require(`~/assets/img/account/home/${path}.png`);
+    }
+    return {
+      userInfoBkg: require("~/assets/img/account/home/bkg-user-info.png"),
+      orderTypes: [
+        {
+          key: "unpaidCount",
+          label: "待付款",
+          icon: getOrderTypeIcon("icon-order1"),
+          path: `/account/order/list?type=${ORDER_STATUS.WAIT_PAY}`,
+          count: 0,
+        },
+        {
+          key: "waitDeliveryCount",
+          label: "待发货",
+          icon: getOrderTypeIcon("icon-order2"),
+          path: `/account/order/list?type=${ORDER_STATUS.WAIT_SEND}`,
+          count: 0,
+        },
+        {
+          key: "deliveredCount",
+          label: "待收货",
+          icon: getOrderTypeIcon("icon-order3"),
+          path: `/account/order/list?type=${ORDER_STATUS.WAIT_RECEIVE}`,
+          count: 0,
+        },
+        {
+          key: "progressCount",
+          label: "退款/售后",
+          icon: getOrderTypeIcon("icon-order4"),
+          path: "/account/order/saleAfter/list",
+          count: 0,
+        },
+        {
+          key: "",
+          label: "全部订单",
+          icon: getOrderTypeIcon("icon-order5"),
+          path: "/account/order/list",
+        },
+      ],
+    };
+  },
+  computed: {
+    ...mapState(["userInfo"]),
+  },
+  created() {
+    this.getOrderStatisticsData();
+  },
+  methods: {
+    // 获取订单统计数据
+    async getOrderStatisticsData() {
+      const [{ result }, { result: resultRefund }] = await Promise.all([
+        ApiGetOrderStatistics(),
+        ApiGetRefundStatistisc(),
+      ]);
+      const resultData = Object.assign({}, result, resultRefund);
+      this.orderTypes.forEach((item) => {
+        if (resultData[item.key] > 0) {
+          Object.assign(item, { count: resultData[item.key] });
+        }
+      });
+    },
   },
 };
 </script>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.account-home {
+  .account-home-head {
+    margin-bottom: 30px;
+    .account-home-head__info {
+      width: 338px;
+      height: 164px;
+      background-size: 100% 100%;
+      padding: 49px 26px;
+      margin-right: 30px;
+      .home-head-info__avatar {
+        width: 65px;
+        height: 65px;
+        border-radius: 50%;
+        margin-right: 16px;
+      }
+      .home-head-info__wrap {
+        color: #666666;
+        font-size: 14px;
+        .head-info-wrap__title {
+          font-size: 20px;
+          color: #333333;
+          margin-bottom: 14px;
+        }
+        span {
+          display: block;
+        }
+      }
+    }
+    .account-home-head__order {
+      width: 630px;
+      height: 164px;
+      padding: 0 58px;
+      background: #ffffff;
+      border-radius: 4px;
+      box-shadow: 0px 4px 10px 1px rgba(0, 0, 0, 0.1);
+      cursor: pointer;
+      .account-home-content__item {
+        position: relative;
+        font-size: 14px;
+        color: #333333;
+        text-align: center;
+        .account-home-content__item--count {
+          position: absolute;
+          top: -3px;
+          right: -3px;
+          width: 24px;
+          height: 24px;
+          font-size: 14px;
+          background: #ff512b;
+          color: #ffffff;
+          border-radius: 14px 14px 14px 14px;
+          border: 2px solid #ffffff;
+        }
+        img {
+          width: 54px;
+          height: 54px;
+        }
+      }
+    }
+  }
+}
+</style>

pages/account/index/home/module/LogisitcsInfo.vue

@@ -7,17 +7,177 @@
 -->
 
 <template>
-	<div>我是物流信息模块</div>
+  <div class="home-logisitcs">
+    <div class="home-logisitcs-label">我的物流</div>
+    <!-- 无物流信息 -->
+    <div
+      v-if="loadFinish && total === 0"
+      class="home-logisitcs-empty flex flex-center flex-middle"
+    >
+      <img src="~/assets/img/account/home/logisitcs-empty.png" />
+    </div>
+    <!-- 有物流信息 -->
+    <div v-else v-loading="loading">
+      <div v-infinite-scroll="handleListload" class="home-logisitcs-content">
+        <div
+          v-for="item in list"
+          :key="item.orderNo"
+          class="home-logisitcs-content__item flex flex-middle flex-between"
+        >
+          <div class="logisitcs-content-item__info flex flex-start">
+            <img :src="item.img" />
+            <div class="content-item-info__wrap flex-1">
+              <p class="item-info-wrap__title">
+                {{ item.title }}
+              </p>
+              <div class="item-info-wrap__orderNo">
+                <span>{{ `${item.companyName}: ${item.orderNo}` }}</span>
+                <span class="item-info-wrap__orderNo--light">查看详情</span>
+              </div>
+            </div>
+          </div>
+          <UiButton
+            type="yellow_line"
+            :radius="true"
+            @click="onOrderEnsure(item)"
+            >确认收货</UiButton
+          >
+        </div>
+      </div>
+    </div>
+    <UiConfirm
+      title="确认收到货了吗？"
+      :visible.sync="ensureOrderVisible"
+      @confirm="handleOrderEnsure"
+    />
+  </div>
 </template>
 <script>
+import UiButton from "@/components/UiButton.vue";
+import UiConfirm from "@/components/UiConfirm.vue";
+import { ApiGetOrderLogisticsList } from "@/plugins/api/order";
+
 export default {
-	data(){
-		return {
-			
-		}
-	}
-}
+  components: { UiButton, UiConfirm },
+  data() {
+    return {
+      total: 0,
+      query: {
+        pageIndex: 1,
+        length: 10,
+      },
+      selectOrderId: 0,
+      ensureOrderVisible: false,
+      list: [],
+      loading: false,
+      loadFinish: false,
+    };
+  },
+  mounted() {
+    this.getLogisticsList();
+  },
+  methods: {
+    // 获取待收货物流信息
+    async getLogisticsList() {
+      this.loading = true;
+      const { result } = await ApiGetOrderLogisticsList({ ...this.query });
+      this.loading = false;
+      this.loadFinish = true;
+      if (result) {
+        const { total, list } = result;
+        this.total = total;
+        if (list && list.length > 0) {
+          this.list = this.list.concat(list);
+        }
+      }
+    },
+    onOrderEnsure({ orderNo }) {
+      this.selectOrderId = orderNo;
+      this.ensureOrderVisible = true;
+    },
+
+    // 确认收货
+    handleOrderEnsure() {},
+
+    // 上拉加载
+    handleListload() {
+      console.log("enter");
+      if (this.total > 0 && this.list.length < this.total) {
+        // 执行接口请求
+        this.query.pageIndex += 1;
+        this.getLogisticsList();
+      }
+    },
+  },
+};
 </script>
 <style lang="scss" scoped>
-
-</style>
+.home-logisitcs {
+  width: 620px;
+  border: 1px solid #dddddd;
+  .home-logisitcs-label {
+    height: 42px;
+    line-height: 42px;
+    padding: 0 22px;
+    border-bottom: 1px solid #dddddd;
+    background: #f8f8f8;
+    font-size: 14px;
+    color: #333333;
+  }
+  .home-logisitcs-empty {
+    height: 310px;
+    img {
+      width: 228px;
+      height: 144px;
+    }
+  }
+  .home-logisitcs-content {
+    max-height: 620px;
+    overflow: auto;
+    padding: 30px;
+    &::-webkit-scrollbar {
+      width: 4px;
+      background-color: none;
+    }
+    &::-webkit-scrollbar-track {
+      background-color: none;
+    }
+    &::-webkit-scrollbar-thumb {
+      background: #dddddd;
+      border-radius: 10px;
+    }
+    .home-logisitcs-content__item {
+      margin-bottom: 30px;
+      &:last-child {
+        margin-bottom: 0;
+      }
+      .logisitcs-content-item__info {
+        img {
+          width: 60px;
+          height: 60px;
+          margin-right: 18px;
+          border-radius: 2px;
+        }
+        .content-item-info__wrap {
+          .item-info-wrap__title {
+            width: 309px;
+            font-size: 14px;
+            color: #666666;
+            margin-bottom: 8px;
+          }
+          .item-info-wrap__orderNo {
+            display: inline-block;
+            color: #999999;
+            font-size: 12px;
+          }
+          .item-info-wrap__orderNo--light {
+            color: #ff875b;
+            margin-left: 30px;
+            cursor: pointer;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

pages/account/index/userInfo.vue

@@ -7,17 +7,193 @@
 -->
 
 <template>
-	<div>我是个人资料页面</div>
+  <div class="account-user-info">
+    <div class="account-user-info__label">个人资料</div>
+    <div class="account-user-info__content">
+      <el-form
+        ref="ruleForm"
+        :model="form"
+        :rules="rules"
+        @submit.native.prevent
+      >
+        <el-form-item label="头像">
+          <div class="user-info-content__avatar flex flex-middle">
+            <el-image
+              fit="cover"
+              :src="form.avatar"
+              :preview-src-list="[form.avatar]"
+            >
+            </el-image>
+            <el-upload
+              :action="ossUploadUrl"
+              :data="uploadData"
+              :show-file-list="false"
+              :on-success="handleUploadSuccess"
+              :before-upload="handleBeforeUpload"
+            >
+              <el-button>修改头像</el-button>
+            </el-upload>
+          </div>
+        </el-form-item>
+        <el-form-item label="昵称" prop="nickname">
+          <el-input
+            class="user-info-content__nickname"
+            placeholder="请输入昵称"
+            v-model="form.nickname"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="性别">
+          <el-radio v-model="form.gender" :label="SEX_TYPE.MALE">男</el-radio>
+          <el-radio v-model="form.gender" :label="SEX_TYPE.FEMALE">女</el-radio>
+        </el-form-item>
+        <el-form-item>
+          <UiButton type="yellow_gradual" :radius="true" @click="onSubmit"
+            >确认保存</UiButton
+          >
+        </el-form-item>
+      </el-form>
+    </div>
+  </div>
 </template>
 <script>
+import { mapState } from "vuex";
+import { Message } from "element-ui";
+import UiButton from "@/components/UiButton";
+import { SEX_TYPE } from "@/constants";
+import { ApiPutUser } from "@/plugins/api/account";
+import { ApiPostGetOssConfig } from "@/plugins/api/oss";
+
 export default {
-	data(){
-		return {
-			
-		}
-	}
-}
+  name: "AccountUserInfo",
+  components: { UiButton },
+  data() {
+    return {
+      SEX_TYPE,
+      form: {
+        nickname: "",
+        gender: SEX_TYPE.MALE,
+        avatar: "",
+      },
+      rules: {
+        nickname: [
+          { min: 1, max: 5, message: "请输入1-10个字符", trigger: "blur" },
+        ],
+      },
+      ossUploadUrl: "",
+      ossDirName: "", // oss路径名
+      fileName: "", // 图片文件名
+      uploadData: {}, // oss上传图片参数
+    };
+  },
+  computed: {
+    ...mapState(["userInfo", "token"]),
+  },
+  created() {
+    this.initData();
+    this.getOssConfig();
+  },
+  methods: {
+    initData() {
+      if (this.token) {
+        const { nickname, gender, avatar } = this.userInfo;
+        Object.assign(this.form, {
+          nickname,
+          gender: gender === SEX_TYPE.UNKNOW ? SEX_TYPE.MALE : gender, // 默认性别显示男
+          avatar,
+        });
+      }
+    },
+    async getOssConfig() {
+      const { result } = await ApiPostGetOssConfig({
+        configId: "account-avatar/",
+        serviceName: "uc",
+      });
+      if (result) {
+        const { dir, host, policy, accessId, signature } = result;
+        this.ossUploadUrl = host;
+        this.ossDirName = dir;
+        Object.assign(this.uploadData, {
+          policy,
+          OSSAccessKeyId: accessId,
+          success_action_status: 200,
+          signature,
+        });
+      }
+    },
+
+    // 获取文件名
+    handleBeforeUpload(file) {
+      this.fileName = file.name;
+      Object.assign(this.uploadData, {
+        key: `${this.ossDirName}${"${filename}"}`,
+        name: file.name,
+      });
+    },
+    handleUploadSuccess() {
+      this.form.avatar = `${this.ossUploadUrl}/${this.ossDirName}${this.fileName}`;
+    },
+    onSubmit() {
+      this.$refs.ruleForm.validate(async (valid) => {
+        if (valid) {
+          const { result } = await ApiPutUser({ ...this.form });
+          if (result) {
+            Message.success("修改成功");
+            this.$store.dispatch("getUserInfo");
+          }
+        }
+      });
+    },
+  },
+};
 </script>
 <style lang="scss" scoped>
-
-</style>
+.account-user-info {
+  width: 1000px;
+  border: 1px solid #dddddd;
+  font-size: 14px;
+  color: #333333;
+  .account-user-info__label {
+    height: 42px;
+    line-height: 42px;
+    padding-left: 24px;
+    border-bottom: 1px solid #dddddd;
+    background: #f8f8f8;
+  }
+  .account-user-info__content {
+    padding: 44px 69px;
+    background: #ffffff;
+    /deep/.el-form {
+      .el-form-item__label {
+        margin-right: 40px;
+        color: #333333;
+      }
+      .user-info-content__avatar {
+        margin-top: -13px;
+        .el-image {
+          width: 70px;
+          height: 70px;
+          margin-right: 30px;
+          border-radius: 50%;
+        }
+        .el-button {
+          width: 89px;
+          height: 30px;
+          border-radius: 15px 15px 15px 15px;
+          border: 1px solid #eeeeee;
+        }
+      }
+      .user-info-content__nickname {
+        height: 35px;
+        width: 210px;
+        .el-input__inner {
+          border: 1px solid #eeeeee;
+        }
+      }
+      .ui-button {
+        width: 136px;
+        height: 36px;
+      }
+    }
+  }
+}
+</style>

pages/goods/detail/_id.vue

@@ -119,7 +119,6 @@
   </div>
 </template>
 <script>
-import BsAddress from "@/components/BsAddress.vue";
 import UiMoney from "@/components/UiMoney.vue";
 import UiButton from "@/components/UiButton.vue";
 import UiGoodsItem from "@/components/UiGoodsItem.vue";
@@ -129,7 +128,7 @@ import {
   ApiGetRecommendedGoodsList,
 } from "@/plugins/api/goods";
 export default {
-  componetns: { UiMoney, UiButton, UiGoodsItem, BsAddress },
+  componetns: { UiMoney, UiButton, UiGoodsItem },
   data() {
     return {
       curBuyNum: 1,

pages/goods/list/index.vue

@@ -13,9 +13,18 @@
         <p class="main__nav-crumbs">
           全部商品<i class="el-icon-arrow-right"></i>开发书籍
         </p>
-        <!-- <div class="main__nav-sort flex flex-middle">
+        <div class="main__nav-sort flex flex-middle" v-if="levelType == 1">
           <span class="main__nav-sort-txt">分类 :</span>
-        </div> -->
+          <span
+            class="main__nav-sort-btn"
+            :class="levelActive == index ? 'main__nav-sort-active' : ''"
+            @click="onLevelClick(index)"
+            v-for="(item, index) in categoryOneList"
+            :key="item.id"
+          >
+            {{ item.name }}
+          </span>
+        </div>
         <div class="main__nav-sort flex flex-middle">
           <span class="main__nav-sort-txt">排序 :</span>
           <span
@@ -58,18 +67,27 @@
   </div>
 </template>
 <script>
-import { ApiGetGoodsList } from "@/plugins/api/goods";
+import {
+  ApiGetGoodsList,
+  ApiGetCategoryOneList,
+  ApiGetCategoryTwoAndGoods,
+} from "@/plugins/api/goods";
 import Sort from "./module/SortItem.vue";
 import UiGoodsItem from "@/components/UiGoodsItem.vue";
 export default {
   components: { Sort, UiGoodsItem },
   data() {
     return {
+      isRecommend: false,
       navActive: 0,
+      levelActive: 0,
       listData: [],
       total: 0,
       // 0:综合,1:desc,2:asc,3:上新
       sortType: 0,
+      categoryOneList: [],
+      levelType: "",
+      levelId: "",
       params: {
         length: 20,
         pageIndex: 1,
@@ -80,10 +98,31 @@ export default {
     };
   },
   async created() {
-    this.params.name = this.$route.query.keyword;
-    this.getGoodsListData();
+    this.init();
   },
   methods: {
+    init() {
+      this.params.name = this.$route.query.keyword;
+      this.levelType = this.$route.query.levelType || "";
+      this.levelId = this.$route.query.id || "";
+      this.levelType == 2 ? (this.params.categoryId = this.levelId) : "";
+      this.isRecommend = this.levelId == "recommend" ? true : false;
+      if (this.levelType == 1) {
+        this.getCategoryTwoAndGoods();
+      } else {
+        this.getGoodsListData();
+      }
+    },
+    async getCategoryOneList() {
+      let res = await ApiGetCategoryOneList();
+      this.categoryOneList = res.result;
+    },
+    async getCategoryTwoAndGoods() {
+      let res = await ApiGetCategoryTwoAndGoods({ categoryId: this.levelId });
+      this.categoryOneList = res.result;
+      this.getGoodsListData();
+      console.log(res);
+    },
     onNavClick(i) {
       console.log(i);
       let vm = this;
@@ -91,6 +130,11 @@ export default {
       vm.navActive = i;
       vm.getGoodsListData();
     },
+    onLevelClick(i) {
+      let vm = this;
+      vm.levelActive = i;
+      vm.getGoodsListData();
+    },
     onSort() {
       let vm = this;
       vm.navActive = 1;
@@ -114,6 +158,9 @@ export default {
           vm.$set(vm.params, "order", "create_time");
           break;
       }
+      if (vm.levelType == 1) {
+        vm.params.categoryId = vm.categoryOneList[vm.levelActive].id;
+      }
       let res = await ApiGetGoodsList(vm.params);
       if (res.error) {
         vm.$message.error(res.error.message);
@@ -130,11 +177,11 @@ export default {
     },
   },
   watch: {
-    //监听路由
-    //监听路由的categoryId属性的数据变化
-    "$route.query.keyword": function () {
-      this.params.name = this.$route.query.keyword;
-      this.getGoodsListData();
+    $route: {
+      handler() {
+        this.init();
+      },
+      deep: true,
     },
   },
 };

pages/index/index.vue

@@ -6,16 +6,35 @@
  * @Description: file content
 -->
 <template>
-  <div>
+  <div class="home">
     <Banner />
-    <!-- <Seckil /> -->
+    <div class="home-wrap">
+      <Seckil v-if="seckillData.activityTimeVO" :data="seckillData" />
+    </div>
   </div>
 </template>
 
 <script>
+import { ApiGetHomeSeckill } from "@/plugins/api/seckill";
 import Banner from "./module/Banner.vue";
 import Seckil from "./module/Seckill.vue";
 export default {
   components: { Banner, Seckil },
+  async asyncData() {
+    // 获取秒杀数据
+    const { result } = await ApiGetHomeSeckill();
+    return {
+      seckillData: result,
+    };
+  },
 };
 </script>
+<style lang="scss" scoped>
+.home {
+  background: #f8f8f8;
+  .home-wrap {
+    @include layout-box;
+    padding: 30px 0 30px 0;
+  }
+}
+</style>

pages/index/module/Seckill.vue

@@ -7,18 +7,226 @@
 -->
 
 <template>
-	<div>我是秒杀模块</div>
+  <div class="home-sckill flex" @click="onJumpSeckill">
+    <div class="home-sckill-bar" :style="{ backgroundImage: `url(${bkgUrl})` }">
+      <strong class="home-sckill-title">限时秒杀</strong>
+      <div class="home-sckill-wrap">
+        <div class="home-sckill-wrap__tip">
+          <strong>10:00</strong>
+          <span>点场 距结束</span>
+        </div>
+        <div class="home-sckill-wrap__countdown flex flex-middle flex-center">
+          <div class="sckill-wrap-countdown__time">{{ countdown.hour }}</div>
+          <span class="sckill-wrap-countdown--mark">:</span>
+          <div class="sckill-wrap-countdown__time">{{ countdown.minute }}</div>
+          <span class="sckill-wrap-countdown--mark">:</span>
+          <div class="sckill-wrap-countdown__time">{{ countdown.second }}</div>
+        </div>
+      </div>
+    </div>
+    <div class="home-sckill-carousel">
+      <el-carousel
+        height="260px"
+        arrow="always"
+        :autoplay="false"
+        :loop="false"
+      >
+        <el-carousel-item v-for="(item, index) in goodsList" :key="index">
+          <div class="carousel-goods flex">
+            <div
+              v-for="(itemChild, indexChild) in item"
+              :key="itemChild.productId"
+              @click.stop="onJumpGoodsDetail(itemChild.productId)"
+              class="carousel-goods-box flex flex-middle"
+            >
+              <div
+                v-if="indexChild !== 0"
+                class="carousel-goods-box--line"
+              ></div>
+              <div class="carousel-goods-box__item">
+                <img
+                  class="goods-box-item__cover"
+                  :src="itemChild.productMainPicture"
+                />
+                <div class="goods-box-item__wrap">
+                  <p class="box-item-wrap__title">
+                    {{ itemChild.productName }}
+                  </p>
+                  <strong class="box-item-wrap__price"
+                    >￥{{ itemChild.activityPrice }}</strong
+                  >
+                </div>
+              </div>
+            </div>
+          </div>
+        </el-carousel-item>
+      </el-carousel>
+    </div>
+  </div>
 </template>
 <script>
+import _ from "lodash";
+
+const CAROUSEL_COUNT = 5; // 走马灯每页展示商品数
+
 export default {
-	name : 'Seckill',
-	data(){
-		return {
-			
-		}
-	}
-}
+  name: "HomeSeckill",
+  props: {
+    data: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  data() {
+    return {
+      bkgUrl: require("~/assets/img/sckill/bkg-small.png"),
+      goodsList: [],
+    };
+  },
+  watch: {
+    data: {
+      deep: true,
+      immediate: true,
+      handler(val) {
+        const { activityProductListVO: products } = val;
+        if (products && products.length > 0) {
+          this.getFormatData(products);
+        }
+      },
+    },
+  },
+  computed: {
+    countdown() {
+      return {
+        hour: "01",
+        minute: "32",
+        second: "09",
+      };
+    },
+  },
+  methods: {
+    // 走马灯商品列表，五个商品为一组
+    getFormatData(list) {
+      const listCopy = _.cloneDeep(list);
+      const part = Math.ceil(listCopy.length / CAROUSEL_COUNT);
+      if (part === 1) {
+        this.goodsList = [listCopy.splice(0, CAROUSEL_COUNT)];
+        return;
+      }
+      for (let i = 0; i < part; i++) {
+        const goodsListItem = listCopy.splice(0, CAROUSEL_COUNT);
+        this.goodsList.push(goodsListItem);
+      }
+    },
+    onJumpSeckill() {
+      this.$router.push("/seckill");
+    },
+    onJumpGoodsDetail(id) {
+      this.$router.push(`/goods/detail/${id}`);
+    },
+  },
+};
 </script>
 <style lang="scss" scoped>
-
-</style>
+.home-sckill {
+  height: 260px;
+  cursor: pointer;
+  .home-sckill-bar {
+    width: 190px;
+    height: 100%;
+    padding: 45px 0 28px 0;
+    text-align: center;
+    color: #ffffff;
+    background-size: 100% 100%;
+    .home-sckill-title {
+      display: block;
+      font-size: 28px;
+      margin-bottom: 90px;
+    }
+    .home-sckill-wrap {
+      margin-bottom: 10px;
+      .home-sckill-wrap__tip {
+        font-size: 0;
+        strong {
+          font-size: 18px;
+        }
+        span {
+          font-size: 14px;
+        }
+      }
+      .home-sckill-wrap__countdown {
+        margin-top: 10px;
+        .sckill-wrap-countdown__time {
+          width: 30px;
+          height: 30px;
+          line-height: 30px;
+          text-align: center;
+          color: #ffffff;
+          font-size: 18px;
+          font-weight: bold;
+          background: #2f3430;
+        }
+        .sckill-wrap-countdown--mark {
+          display: block;
+          font-size: 20px;
+          margin: 0 8px;
+        }
+      }
+    }
+  }
+  .home-sckill-carousel {
+    /deep/.el-carousel {
+      width: 1010px;
+      .el-carousel__container {
+        padding: 0 10px;
+        background: #ffffff;
+        .el-carousel__arrow {
+          i {
+            font-size: 14px;
+            font-weight: bold;
+          }
+          &--left {
+            left: -11px;
+          }
+          &--right {
+            right: -11px;
+          }
+        }
+      }
+      .carousel-goods {
+        height: 100%;
+        .carousel-goods-box {
+          .carousel-goods-box--line {
+            height: 160px;
+            width: 1px;
+            background: #eeeeee;
+          }
+          .carousel-goods-box__item {
+            width: 198px;
+            padding: 20px 24px;
+            .goods-box-item__cover {
+              width: 150px;
+              height: 150px;
+              object-fit: productMainPicture;
+              margin-bottom: 14px;
+            }
+            .goods-box-item__wrap {
+              font-size: 14px;
+              color: #333333;
+              text-align: center;
+              .box-item-wrap__title {
+                @include ellipsis;
+                margin-bottom: 8px;
+              }
+              .box-item-wrap__price {
+                color: #ff512b;
+                text-align: center;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

pages/sckill/index.vue

@@ -1,22 +0,0 @@
-<!--
- * @Author: ch
- * @Date: 2022-05-04 17:25:41
- * @LastEditors: ch
- * @LastEditTime: 2022-05-04 17:26:08
- * @Description: file content
--->
-<template>
-	<div>我是秒杀首页</div>
-</template>
-<script>
-export default {
-	data(){
-		return {
-			
-		}
-	}
-}
-</script>
-<style lang="scss" scoped>
-
-</style>

pages/seckill/index.vue

@@ -0,0 +1,329 @@
+<!--
+ * @Author: ch
+ * @Date: 2022-05-04 17:25:41
+ * @LastEditors: ch
+ * @LastEditTime: 2022-05-04 17:26:08
+ * @Description: file content
+-->
+<template>
+  <div class="sckill">
+    <!-- 秒杀时间段 -->
+    <div
+      class="sckill-header"
+      :style="{ backgroundImage: `url(${bkgSckill})` }"
+    >
+      <div class="sckill-header-tabbar flex">
+        <div
+          v-for="item in tabList"
+          :key="item.id"
+          @click="onTabSelect(item.id)"
+          class="sckill-header-tabbar__item flex flex-middle flex-center"
+          :class="{
+            'sckill-header-tabbar__item--active':
+              item.id === query.activityTimeId,
+          }"
+        >
+          <strong class="header-tabbar-item__time">18:00</strong>
+          <div class="header-tabbar-item__tip">抢购中</div>
+        </div>
+      </div>
+    </div>
+    <div class="sckill-bar flex flex-middle flex-center">
+      <p>本场秒杀即将开抢，距开始还剩</p>
+      <div class="sckill-bar-countdown flex flex-middle">
+        <div class="sckill-bar-countdown__time">{{ countdown.hour }}</div>
+        <span class="sckill-bar-countdown--mark">:</span>
+        <div class="sckill-bar-countdown__time">{{ countdown.minute }}</div>
+        <span class="sckill-bar-countdown--mark">:</span>
+        <div class="sckill-bar-countdown__time">{{ countdown.second }}</div>
+      </div>
+    </div>
+    <!-- 秒杀商品列表 -->
+    <div v-loading="loading" class="sckill-products flex flex-wrap">
+      <div
+        v-for="item in goodsList"
+        :key="item.productId"
+        @click="onJumpGoodsDetail(item.productId)"
+        class="sckill-products-wrap"
+      >
+        <img
+          :src="item.productMainPicture"
+          class="sckill-products-wrap__cover"
+        />
+        <div class="sckill-products-wrap__content">
+          <p class="products-wrap-content__title">{{ item.productName }}</p>
+          <div class="products-wrap-content__price">
+            <strong>￥{{ item.activityPrice }}</strong>
+            <del>￥{{ item.originalPrice }}</del>
+          </div>
+          <div
+            class="products-wrap-content__footer flex flex-middle flex-between"
+          >
+            <div class="wrap-content-footer__stock">
+              <el-progress :percentage="40" :show-text="false"></el-progress>
+              <p>仅剩{{ item.stock }}件</p>
+            </div>
+            <div class="wrap-content-footer__btn">立即抢购</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 分页 -->
+    <div class="sckill-pagination flex flex-right">
+      <el-pagination
+        background
+        :current-page="currentPage"
+        :page-size="query.length"
+        layout="prev, pager, next, jumper"
+        :total="total"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      >
+      </el-pagination>
+      <el-button class="btn-confirm">确定</el-button>
+    </div>
+  </div>
+</template>
+<script>
+import { ApiGetSeckillTimes, ApiGetSeckillGoods } from "@/plugins/api/seckill";
+export default {
+  name: "Sckill",
+  data() {
+    return {
+      bkgSckill: require("~/assets/img/sckill/bkg-large.png"),
+      tabList: [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }], // 秒杀时间段
+      goodsList: [], // 商品列表
+      total: 0,
+      currentPage: 0,
+      loading: false,
+      query: {
+        pageIndex: 1,
+        length: 12,
+        activityTimeId: 1,
+      },
+    };
+  },
+  computed: {
+    countdown() {
+      return {
+        hour: "01",
+        minute: "32",
+        second: "09",
+      };
+    },
+  },
+  created() {
+    this.getSeckillTimes();
+  },
+  methods: {
+    async getSeckillTimes() {
+      const { result } = await ApiGetSeckillTimes();
+      if (result && result.length > 0) {
+        this.tabList = result;
+        this.query.activityTimeId = result[0].id;
+        this.getGoodsList();
+      }
+    },
+    async getGoodsList() {
+      this.loading = true;
+      const { result } = await ApiGetSeckillGoods({ ...this.query });
+      this.loading = false;
+      if (result) {
+        this.total = result.total;
+        this.goodsList = result.records;
+      }
+    },
+    onJumpGoodsDetail(id) {
+      this.$router.push(`/goods/detail/${id}`);
+    },
+    handleSizeChange(size) {
+      this.query.length = size;
+      this.getGoodsList();
+    },
+    handleCurrentChange(page) {
+      this.query.pageIndex = page;
+      this.getGoodsList();
+    },
+    onTabSelect(id) {
+      this.query.activityTimeId = id;
+      Object.assign(this.query, {
+        pageIndex: 1,
+        length: 10,
+      });
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.sckill {
+  background: #f8f8f8;
+  padding-bottom: 42px;
+  .sckill-header {
+    position: relative;
+    width: 100%;
+    height: 156px;
+    background-size: 100% 100%;
+    .sckill-header-tabbar {
+      position: absolute;
+      left: 50%;
+      bottom: 0;
+      transform: translate(-50%);
+      height: 60px;
+      border-radius: 4px 4px 0px 0px;
+      overflow: hidden;
+      cursor: pointer;
+      .sckill-header-tabbar__item {
+        width: 240px;
+        font-size: 12px;
+        background: #ffffff;
+        color: #666666;
+        .header-tabbar-item__time {
+          font-size: 18px;
+          color: #333333;
+          margin-right: 22px;
+        }
+        .header-tabbar-item__tip {
+          width: 69px;
+          height: 22px;
+          text-align: center;
+          border: 1px solid #999999;
+          border-radius: 2px;
+        }
+        &--active {
+          background: linear-gradient(270deg, #ffa25a 0%, #ff7f39 100%);
+          color: #ffffff;
+          .header-tabbar-item__time {
+            font-size: 24px;
+            color: #ffffff;
+          }
+          .header-tabbar-item__tip {
+            border-color: #ffffff;
+          }
+        }
+      }
+    }
+  }
+  .sckill-bar {
+    height: 60px;
+    line-height: 60px;
+    text-align: center;
+    font-size: 14px;
+    color: #666666;
+    .sckill-bar-countdown {
+      margin-left: 25px;
+      font-weight: bold;
+      &__time {
+        width: 22px;
+        height: 22px;
+        line-height: 22px;
+        text-align: center;
+        font-size: 14px;
+        color: #ffffff;
+        background: #2f3430;
+      }
+      &--mark {
+        display: block;
+        margin: 0 7px;
+        color: #2f3430;
+      }
+    }
+  }
+  .sckill-products,
+  .sckill-pagination {
+    @include layout-box;
+  }
+  .sckill-products {
+    .sckill-products-wrap {
+      width: 24%;
+      background: #ffffff;
+      margin: 15px 0 60px 0;
+      &:not(:nth-child(4n)) {
+        margin-right: calc(4% / 3);
+      }
+      .sckill-products-wrap__cover {
+        width: 100%;
+        height: 288px;
+      }
+      .sckill-products-wrap__content {
+        padding: 20px 16px;
+        .products-wrap-content__title {
+          @include ellipsis;
+          color: #333333;
+          font-size: 16px;
+          margin-bottom: 10px;
+        }
+        .products-wrap-content__price {
+          font-size: 12px;
+          color: #999999;
+          margin-bottom: 7px;
+          strong {
+            font-size: 18px;
+            color: #ff512b;
+            margin-right: 14px;
+          }
+        }
+        .products-wrap-content__footer {
+          .wrap-content-footer__stock {
+            font-size: 12px;
+            color: #666666;
+            /deep/.el-progress {
+              width: 100px;
+              height: 6px;
+              background: #dddddd;
+              border-radius: 4px;
+              margin-bottom: 8px;
+            }
+          }
+          .wrap-content-footer__btn {
+            width: 100px;
+            height: 36px;
+            line-height: 36px;
+            text-align: center;
+            background: #ff512b;
+            font-size: 14px;
+            color: #ffffff;
+          }
+        }
+      }
+    }
+  }
+  .sckill-pagination {
+    margin-top: 60px;
+    /deep/.el-pagination {
+      .btn-prev,
+      .btn-next {
+        width: 32px;
+        height: 32px;
+        background: #ffffff;
+        border-radius: 2px;
+        border: 1px solid rgba(0, 0, 0, 0.2);
+      }
+      .el-pagination__jump {
+        color: #333333;
+      }
+      .el-pager {
+        .number {
+          width: 32px;
+          height: 32px;
+          line-height: 32px;
+          font-size: 14px;
+          background: #ffffff;
+          border: 1px solid rgba(0, 0, 0, 0.2);
+          border-radius: 2px;
+        }
+        .active {
+          color: #ffffff;
+          background: #ff512b;
+          border: none;
+        }
+      }
+    }
+    .btn-confirm {
+      width: 81px;
+      height: 32px;
+      border-radius: 2px;
+      margin-left: 14px;
+    }
+  }
+}
+</style>

plugins/api/order.js

@@ -56,13 +56,21 @@ export const  ApiGetOrderProductDetail = ({orderProductId}) =>
 export const ApiGetOrderPaySatus = ({orderId}) => 
 	ToAsyncAwait(axiosTk.get(`${BASE_URL}/app/tradeOrder/payResult/${orderId}`));
    
-
+	
 /**
  * 获取物流信息
  * @param {*} orderId 
  */
 export const  ApiGetOrderLogistics = ({orderId}) =>
 	ToAsyncAwait(axiosTk.get(`${BASE_URL}/app/tradeOrder/logistics/${orderId}`));	
+
+	/**
+ * 获取物流列表
+ * @param {*} params
+ */
+export const  ApiGetOrderLogisticsList = (params) =>
+	ToAsyncAwait(axiosTk.get('http://yapi.smart-xwork.cn/mock/148902/logisitcs/list'), { params });	
+
 /**
  * 确认收货
  * @param {*} orderId 
@@ -142,6 +150,11 @@ export const ApiGetLogisticsCompanylist = (params) =>
  */
 export const ApiPutLogisticsInfo = (data) => 
 	ToAsyncAwait(axiosTk.put(`${BASE_URL}/app/refundOrder/completeRefund`, data));
+/**
+ * 退款订单统计
+ */
+ export const ApiGetRefundStatistisc= (data) => 
+ ToAsyncAwait(axiosTk.put(`${BASE_URL}/app/refundOrder/statistics`, data));
 
 
 

plugins/api/seckill.js

@@ -23,5 +23,5 @@ const BASE_URL = `${ENV.base_url}/mall/marketing`;
  * 获取当天秒杀时段
  */
  export const ApiGetSeckillGoods = (params) => 
-	ToAsyncAwait(axios.get(`${BASE_URL}/app/activity/product`, params));
+	ToAsyncAwait(axios.get(`${BASE_URL}/app/activity/product`, { params }));
 

plugins/element-ui.js

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