feat: 添加个人主页左侧导航栏

constants/index.js

@@ -1,8 +1,15 @@
 /**
  * 全局常量，请避免使用魔法数字
  */
-const TOKEN_KEY = 'msbPcToken';
 
-export {
-  TOKEN_KEY
-}
+// 用户凭证名
+const TOKEN_KEY = "msbPcToken";
+
+// 订单状态
+const ORDER_STATUS = {
+  WAIT_PAY: 1, // 待付款
+  WAIT_SEND: 3, //待发货
+  WAIT_RECEIVE: 4, // 待收货
+};
+
+export { TOKEN_KEY, ORDER_STATUS };

layouts/module/header/index.vue

@@ -268,7 +268,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%;
@@ -446,7 +446,7 @@ export default {
           .tab-category-menu__right {
             width: 510px;
             padding: 30px 26px;
-            box-shadow: 7px 0px 10px 1px rgba(0, 0, 0, 0.10000000149011612);
+            box-shadow: 7px 0px 10px 1px rgba(0, 0, 0, 0.1);
             border: 1px solid #eeeeee;
             background: #ffffff;
             .menu-right__item:hover {

pages/account/index/home/index.vue

@@ -7,14 +7,123 @@
 -->
 
 <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"
+          class="account-home-content__item flex flex-column flex-middle"
+        >
+          <img :src="item.icon" />
+          <span>{{ item.label }}</span>
+        </div>
+      </div>
+    </div>
+    <div class="account-home-content"></div>
+  </div>
 </template>
 <script>
+import { mapState } from "vuex";
+import { ORDER_STATUS } from "@/constants";
+
 export default {
   name: "AccountHome",
   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: [
+        {
+          label: "待付款",
+          icon: getOrderTypeIcon("icon-order1"),
+          path: `/account/order/list?type=${ORDER_STATUS.WAIT_PAY}`,
+        },
+        {
+          label: "待发货",
+          icon: getOrderTypeIcon("icon-order2"),
+          path: `/account/order/list?type=${ORDER_STATUS.WAIT_SEND}`,
+        },
+        {
+          label: "待收货",
+          icon: getOrderTypeIcon("icon-order3"),
+          path: `/account/order/list?type=${ORDER_STATUS.WAIT_RECEIVE}`,
+        },
+        {
+          label: "退款/售后",
+          icon: getOrderTypeIcon("icon-order4"),
+          path: "/account/order/saleAfter",
+        },
+        {
+          label: "全部订单",
+          icon: getOrderTypeIcon("icon-order5"),
+          path: "/account/order/list",
+        },
+      ],
+    };
+  },
+  computed: {
+    ...mapState(["userInfo"]),
   },
 };
 </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;
+      .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);
+      .account-home-content__item {
+        font-size: 14px;
+        color: #333333;
+        text-align: center;
+        img {
+          width: 54px;
+          height: 54px;
+        }
+      }
+    }
+  }
+}
+</style>