feat: static目录下图片文件移动到assets目录

README.md

@@ -115,7 +115,7 @@ this.$store.commit('setLoginOut')
 this.$store.state.userInfo
 
 // 登录拦截
-// 示例：点击购买课程前需要判断当前用户是否登录
+// 示例：点击购买课程前需要判断当前用户是否登录，未登录则弹出登录弹窗
 function onPurchaseCourse() {
 	if (!this.$isLoginValidate()) {
 		return;

components/BsLogin.vue

@@ -10,7 +10,7 @@
       <div class="bs-login-wrap">
         <img
           class="bs-login-wrap__logo"
-          src="@/static/images/login/icon-logo.png"
+          src="~/assets/img/login/icon-logo.png"
         />
         <div class="bs-login-wrap__content">
           <el-form :model="form" :rules="rules" ref="ruleForm">
@@ -43,7 +43,7 @@
               <img
                 v-if="isAcceptAgreement"
                 class="icon-choose"
-                src="@/static/images/login/icon-accept.png"
+                src="~/assets/img/login/icon-accept.png"
               />
               <span v-else class="icon-unchoose"></span>
             </div>
@@ -53,7 +53,7 @@
           </div>
         </div>
         <div class="bs-login-wrap__btn--close" @click="onClose">
-          <img src="@/static/images/login/icon-close.png" />
+          <img src="~/assets/img/login/icon-close.png" />
         </div>
       </div>
     </el-dialog>

layouts/module/footer/index.vue

@@ -27,19 +27,19 @@ export default {
       promiseList: [
         {
           label: "马士兵严选",
-          icon: require("@/static/images/layout/footer-1.png"),
+          icon: require("~/assets/img/layout/footer-1.png"),
         },
         {
           label: "马士兵严选",
-          icon: require("@/static/images/layout/footer-2.png"),
+          icon: require("~/assets/img/layout/footer-2.png"),
         },
         {
           label: "马士兵严选",
-          icon: require("@/static/images/layout/footer-3.png"),
+          icon: require("~/assets/img/layout/footer-3.png"),
         },
         {
           label: "马士兵严选",
-          icon: require("@/static/images/layout/footer-4.png"),
+          icon: require("~/assets/img/layout/footer-4.png"),
         },
       ],
     };

layouts/module/header/HeaderInfoBar.vue

@@ -32,7 +32,7 @@
                 :command="item.value"
               >
                 <span> {{ item.label }}</span>
-                <img src="@/static/images/layout/icon-arrow.png" />
+                <img src="~/assets/img/layout/icon-arrow.png" />
               </el-dropdown-item>
             </el-dropdown-menu>
           </el-dropdown>
@@ -50,7 +50,7 @@
             class="header-wrap-content__common flex flex-middle"
             @click="onJumpPersonalPage('message')"
           >
-            <img src="@/static/images/layout/icon-message.png" />
+            <img src="~/assets/img/layout/icon-message.png" />
             <span>消息</span>
             <div class="wrap-content-message__tip">33</div>
           </div>
@@ -60,12 +60,12 @@
           class="header-wrap-content__common flex flex-middle"
           @click="onJumpPersonalPage('order/list')"
         >
-          <img src="@/static/images/layout/icon-order.png" />
+          <img src="~/assets/img/layout/icon-order.png" />
           <span>我的订单</span>
         </div>
         <div class="header-wrap-content--line"></div>
         <div class="header-wrap-content__common flex flex-middle">
-          <img src="@/static/images/layout/icon-phone.png" />
+          <img src="~/assets/img/layout/icon-phone.png" />
           <span>下载app</span>
         </div>
       </div>
@@ -105,8 +105,8 @@ export default {
     ...mapState(["userInfo", "token"]),
     menuIcon() {
       return this.menuVisible
-        ? require("@/static/images/layout/icon-up-light.png")
-        : require("@/static/images/layout/icon-up.png");
+        ? require("~/assets/img/layout/icon-up-light.png")
+        : require("~/assets/img/layout/icon-up.png");
     },
   },
   methods: {

layouts/module/header/index.vue

@@ -6,7 +6,7 @@
           <div class="flex flex-middle">
             <img
               class="bar-header-wrap__logo"
-              src="@/static/images/layout/logo-sticky.png"
+              src="~/assets/img/layout/logo-sticky.png"
             />
             <el-menu
               :default-active="tabPath"
@@ -22,9 +22,9 @@
             </el-menu>
           </div>
           <div class="bar-header-wrap__icons flex flex-middle">
-            <img src="@/static/images/layout/icon-search-sticky.png" />
+            <img src="~/assets/img/layout/icon-search-sticky.png" />
             <div class="header-wrap-icons__shop">
-              <img src="@/static/images/layout/icon-shop-sticky.png" />
+              <img src="~/assets/img/layout/icon-shop-sticky.png" />
               <span class="">3</span>
             </div>
             <div v-if="token" class="header-wrap-icons__login">
@@ -48,7 +48,7 @@
           <div class="bar-header-box__wrap flex flex-between flex-middle">
             <img
               class="header-box-wrap__logo"
-              src="@/static/images/layout/logo.png"
+              src="~/assets/img/layout/logo.png"
             />
             <div class="header-box-wrap__right flex flex-middle">
               <div class="box-wrap-right__search flex">
@@ -62,14 +62,14 @@
                   class="search-icon flex flex-center flex-middle"
                   @click="onSearch"
                 >
-                  <img src="@/static/images/layout/icon-search.png" />
+                  <img src="~/assets/img/layout/icon-search.png" />
                 </div>
               </div>
               <div
                 class="box-wrap-right__cart flex flex-middle"
                 @click="onJumpCart"
               >
-                <img src="@/static/images/layout/icon-shop.png" />
+                <img src="~/assets/img/layout/icon-shop.png" />
                 <span>购物车</span>
                 <div class="wrap-right-cart__tip">3</div>
               </div>
@@ -83,7 +83,7 @@
               @mouseleave="handleCategoryChange(false)"
             >
               <div class="tab-category__label flex flex-center flex-middle">
-                <img src="@/static/images/layout/icon-category.png" />
+                <img src="~/assets/img/layout/icon-category.png" />
                 <span>热门分类</span>
               </div>
               <div

pages/account/index.vue

@@ -6,9 +6,25 @@
  * @Description: file content
 -->
 <template>
-  <div class="account">
-    <div class="account--nav">左侧栏</div>
-    <nuxt-child class="account--main" />
+  <div class="account flex">
+    <div class="account-nav-wrap flex flex-column flex-center flex-middle">
+      <ul
+        v-for="(item, index) in navTabs"
+        :key="index"
+        class="account-nav-wrap__ul"
+      >
+        <div class="nav-wrap-ul__title">{{ item.label }}</div>
+        <li
+          class="nav-wrap-ul__li"
+          :class="{ 'nav-wrap-ul__li--light': itemChild.value === $route.path }"
+          v-for="itemChild in item.list"
+          :key="itemChild.value"
+        >
+          <nuxt-link :to="itemChild.value"> {{ itemChild.label }}</nuxt-link>
+        </li>
+      </ul>
+    </div>
+    <nuxt-child class="account-main-wrap" />
   </div>
 </template>
 <script>
@@ -19,23 +35,23 @@ export default {
       navTabs: [
         {
           label: "个人中心",
-          childrens: [
-            { label: "我的主页", value: "/home" },
-            { label: "消息通知", value: "/message" },
+          list: [
+            { label: "我的主页", value: "/account/home" },
+            { label: "消息通知", value: "/account/message" },
           ],
         },
         {
           label: "订单中心",
-          childrens: [
-            { label: "我的订单", value: "/order/lsit" },
-            { label: "售后订单", value: "/order/saleAfter" },
+          list: [
+            { label: "我的订单", value: "/account/order/list" },
+            { label: "售后订单", value: "/account/order/saleAfter/list" },
           ],
         },
         {
           label: "账户管理",
-          childrens: [
-            { label: "个人资料", value: "/userInfo" },
-            { label: "收货地址", value: "/address" },
+          list: [
+            { label: "个人资料", value: "/account/userInfo" },
+            { label: "收货地址", value: "/account/address" },
           ],
         },
       ],
@@ -46,15 +62,46 @@ export default {
 <style lang="scss" scoped>
 .account {
   @include layout-box;
-  padding: 30px 0;
-  margin: 0 auto;
-  display: flex;
-  &--nav {
+  padding: 40px 0;
+  background: #ffffff;
+  .account-nav-wrap {
     width: 170px;
-    height: 300px;
+    height: 402px;
     border: 1px solid #ddd;
     border-radius: 4px;
     margin-right: 30px;
+    font-size: 14px;
+    .account-nav-wrap__ul {
+      &:last-child {
+        margin-bottom: 0;
+      }
+      margin-bottom: 30px;
+      .nav-wrap-ul__title {
+        font-size: 16px;
+        color: #333333;
+        margin-bottom: 12px;
+      }
+      .nav-wrap-ul__li--light {
+        a {
+          color: #ff875b !important;
+        }
+      }
+      .nav-wrap-ul__li {
+        margin-bottom: 14px;
+        a {
+          color: #666666;
+        }
+        cursor: pointer;
+        &:hover {
+          a {
+            color: #ff875b;
+          }
+        }
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
+    }
   }
   &--main {
     flex: 1;

pages/account/index/home/index.vue

@@ -7,17 +7,14 @@
 -->
 
 <template>
-	<div>我是个人中心首页</div>
+  <div class="account-home"></div>
 </template>
 <script>
 export default {
+  name: "AccountHome",
   data() {
-		return {
-			
-		}
-	}
-}
+    return {};
+  },
+};
 </script>
-<style lang="scss" scoped>
-
-</style>
+<style lang="scss" scoped></style>

pages/goods/detail/_id.vue

@@ -21,7 +21,7 @@
         <div class="main__preview-control">
           <img
             class="main__preview-control--left"
-            src="~/static/images/goods/left.png"
+            src="~/assets/img/goods/left.png"
             alt="左侧切换"
             @click="onImgLeft"
           />
@@ -44,7 +44,7 @@
           </div>
           <img
             class="main__preview-control--right"
-            src="~/static/images/goods/right.png"
+            src="~/assets/img/goods/right.png"
             alt="右侧切换"
             @click="onImgRight"
           />
@@ -68,7 +68,7 @@
             >
             <img
               class="msg-icon"
-              src="~/static/images/goods/more.png"
+              src="~/assets/img/goods/more.png"
               alt="服务"
             />
           </div>

pages/goods/list/module/SortItem.vue

@@ -4,22 +4,22 @@
     <div class="sort-img-box">
       <img
         v-if="sortType === 0 || sortType === 1"
-        src="~/static/images/goods/sort-t1.png"
+        src="~/assets/img/goods/sort-t1.png"
         alt="sort"
       />
       <img
         v-if="sortType === 2"
-        src="~/static/images/goods/sort-t2.png"
+        src="~/assets/img/goods/sort-t2.png"
         alt="sort"
       />
       <img
         v-if="sortType === 0 || sortType === 2"
-        src="~/static/images/goods/sort-b1.png"
+        src="~/assets/img/goods/sort-b1.png"
         alt="sort"
       />
       <img
         v-if="sortType === 1"
-        src="~/static/images/goods/sort-b2.png"
+        src="~/assets/img/goods/sort-b2.png"
         alt="sort"
       />
     </div>

plugins/vue-inject.js

@@ -2,7 +2,7 @@ import Vue from "vue";
 import { TOKEN_KEY } from "@/constants";
 
 const injectOptions = {
-  // 是否需要登录拦截
+  // 是否需要登录拦截，如果未登录，会默认唤起登录弹窗
   $isLoginValidate() {
     if (this.$cookies.get(TOKEN_KEY)) {
       return true;