feat: 修改头部购物车面板UI,获取用户信息时机修改

layouts/module/header/HeaderCart.vue

@@ -14,7 +14,11 @@
     >
       <img src="~/assets/img/layout/icon-shop.png" />
       <span>购物车</span>
-      <div v-if="cartCount > 0" class="wrap-right-cart__tip">
+      <div
+        v-if="cartCount > 0"
+        class="wrap-right-cart__tip flex flex-middle flex-center"
+        :class="{ 'wrap-right-cart__tip--more': cartCount > 10 }"
+      >
         {{ cartCount }}
       </div>
     </div>
@@ -23,27 +27,27 @@
         v-for="item in products"
         :key="item.id"
         @click="onJumpGoodsDetail(item.product.id)"
-        class="header-cart-products__wrap flex flex-middle flex-between"
+        class="header-cart-products__wrap flex flex-middle"
       >
-        <div class="cart-products-wrap__left flex felx-middle">
-          <div class="products-wrap-left__cover">
-            <img :src="item.productMainPicture" />
+        <div class="cart_products-wrap_cover">
+          <img :src="item.productMainPicture" />
+        </div>
+        <div class="cart-products-wrap_info">
+          <div class="products-wrap-info__top flex flex-between">
+            <p class="wrap-info-top__title">{{ item.productName }}</p>
+            <UiMoney
+              class="wrap-info-top__price"
+              :float="true"
+              :money="item.product.startingPrice"
+            />
           </div>
-          <div class="products-wrap-left__info">
-            <p class="wrap-left-info__title">{{ item.productName }}</p>
-            <div class="wrap-left-info__detail flex">
-              <span class="left-info-detail__skuname">{{
-                item.productSku.name
-              }}</span>
-              <span class="left-info-detail__count">{{ item.number }}</span>
-            </div>
+          <div class="products-wrap-info__bottom flex flex-between">
+            <span class="wrap-info-bottom__skuname">{{
+              item.productSku.name
+            }}</span>
+            <span class="wrap-info-bottom__count">{{ item.number }}</span>
           </div>
         </div>
-        <UiMoney
-          class="cart-products-wrap__right"
-          :float="true"
-          :money="item.product.startingPrice"
-        />
       </div>
       <!-- 失效商品 -->
       <template v-if="failureProducts.length > 0">
@@ -52,31 +56,31 @@
           v-for="item in failureProducts"
           :key="item.id"
           @click="onJumpGoodsDetail(item.product.id)"
-          class="header-cart-products__wrap flex flex-middle flex-between"
+          class="header-cart-products__wrap flex flex-middle"
         >
-          <div class="cart-products-wrap__left flex felx-middle">
-            <div class="products-wrap-left__cover">
-              <img :src="item.productMainPicture" />
-            </div>
-            <div class="products-wrap-left__info">
+          <div class="cart_products-wrap_cover">
+            <img :src="item.productMainPicture" />
+          </div>
+          <div class="cart-products-wrap_info">
+            <div class="products-wrap-info__top flex flex-between">
               <p
-                class="wrap-left-info__title header-cart-products--failure-color"
+                class="wrap-info-top__title header-cart-products--failure-color"
               >
                 {{ item.productName }}
               </p>
-              <div class="wrap-left-info__detail flex">
-                <span class="left-info-detail__skuname">{{
-                  item.productSku && item.productSku.name
-                }}</span>
-                <span class="left-info-detail__count">{{ item.number }}</span>
-              </div>
+              <UiMoney
+                class="header-cart-products--failure-color"
+                :float="true"
+                :money="item.product.startingPrice"
+              />
+            </div>
+            <div class="products-wrap-info__bottom flex flex-between">
+              <span class="wrap-info-bottom__skuname">{{
+                item.productSku.name
+              }}</span>
+              <span class="wrap-info-bottom__count">{{ item.number }}</span>
             </div>
           </div>
-          <UiMoney
-            class="header-cart-products--failure-color"
-            :float="true"
-            :money="item.product.startingPrice"
-          />
         </div>
       </template>
     </div>
@@ -157,7 +161,7 @@ export default {
 </script>
 <style lang="scss">
 .header-cart-popover {
-  padding: 16px 20px;
+  padding: 16px 20px !important;
 }
 </style>
 <style lang="scss" scoped>
@@ -170,15 +174,18 @@ export default {
   border: 1px solid #eeeeee;
   cursor: pointer;
   .wrap-right-cart__tip {
-    min-width: 14px;
-    height: 14px;
-    padding: 0 3px;
+    width: 16px;
+    height: 16px;
     font-size: 10px;
-    line-height: 14px;
-    text-align: center;
     background: #ff512b;
     border-radius: 50%;
     color: #ffffff;
+    margin-left: 4px;
+    &--more {
+      width: unset;
+      padding: 0 4px;
+      border-radius: 7px;
+    }
   }
   img {
     width: 16px;
@@ -189,7 +196,7 @@ export default {
 .header-cart-popover {
   padding: 20px 16px;
   .header-cart-products {
-    padding: 0 10px 50px 0;
+    padding: 0 10px 20px 0;
     max-height: 360px;
     overflow: auto;
     &--failure-color {
@@ -198,23 +205,24 @@ export default {
     .header-cart-products__wrap {
       margin-bottom: 20px;
       cursor: pointer;
-      .cart-products-wrap__left {
-        .products-wrap-left__cover {
+      .cart_products-wrap_cover {
+        width: 60px;
+        height: 60px;
+        padding: 3px;
+        border: 1px solid #eeeeee;
+        border-radius: 4px;
+        margin-right: 11px;
+        img {
           width: 54px;
           height: 54px;
-          padding: 3px;
-          border: 1px solid #eeeeee;
-          border-radius: 4px;
-          margin-right: 11px;
-          img {
-            width: 100%;
-            height: 100%;
-          }
         }
-        .products-wrap-left__info {
-          font-size: 12px;
-          color: #999999;
-          .wrap-left-info__title {
+      }
+      .cart-products-wrap_info {
+        font-size: 12px;
+        color: #999999;
+        width: 100%;
+        .products-wrap-info__top {
+          .wrap-info-top__title {
             display: block;
             width: 120px;
             @include ellipsis;
@@ -222,24 +230,24 @@ export default {
             color: #333333;
             margin-bottom: 10px;
           }
-          .wrap-left-info__detail {
-            .left-info-detail__skuname {
-              display: block;
-              width: 70px;
-              @include ellipsis;
-            }
-            .left-info-detail__count {
-              &::before {
-                content: "X";
-                font-size: 8px;
-              }
+          .wrap-info-top__price {
+            color: #ff512b;
+          }
+        }
+        .products-wrap-info__bottom {
+          .wrap-info-bottom__skuname {
+            display: block;
+            width: 145px;
+            @include ellipsis;
+          }
+          .wrap-info-bottom__count {
+            &::before {
+              content: "X";
+              font-size: 8px;
             }
           }
         }
       }
-      .cart-products-wrap__right {
-        color: #ff512b;
-      }
     }
     .header-cart-products__bar {
       font-size: 14px;

pages/account/index/userInfo.vue

@@ -19,6 +19,7 @@
         <el-form-item label="头像">
           <div class="user-info-content__avatar flex flex-middle">
             <el-image
+              v-loading="uploadLoading"
               fit="cover"
               :src="form.avatar"
               :preview-src-list="[form.avatar]"
@@ -30,6 +31,7 @@
               :show-file-list="false"
               :on-success="handleUploadSuccess"
               :before-upload="handleBeforeUpload"
+              :on-error="handleUploadError"
             >
               <el-button>修改头像</el-button>
             </el-upload>
@@ -84,6 +86,7 @@ export default {
       ossDirName: "", // oss路径名
       fileName: "", // 图片文件名
       uploadData: {}, // oss上传图片参数
+      uploadLoading: false,
     };
   },
   computed: {
@@ -124,6 +127,7 @@ export default {
 
     // 获取文件名
     handleBeforeUpload(file) {
+      this.uploadLoading = true;
       this.fileName = file.name;
       Object.assign(this.uploadData, {
         key: `${this.ossDirName}${"${filename}"}`,
@@ -131,8 +135,12 @@ export default {
       });
     },
     handleUploadSuccess() {
+      this.uploadLoading = false;
       this.form.avatar = `${this.ossUploadUrl}/${this.ossDirName}${this.fileName}`;
     },
+    handleUploadError() {
+      this.uploadLoading = false;
+    },
     onSubmit() {
       this.$refs.ruleForm.validate(async (valid) => {
         if (valid) {

plugins/router.js

@@ -1,12 +1,18 @@
 export default ({ app }) => {
   app.router.beforeEach((to, from, next) => {
-    if (app.store.state.token) {
+    const { token, userInfo } = app.store.state;
+    if (token) {
+      if (Object.keys(userInfo).length === 0) {
+        app.store.dispatch("getUserInfo");
+      }
       next();
       return;
     }
 
-    // 未登录打开个人中心相关页面，跳首页
-    if (/\/account/.test(to.path)) {
+    // 未登录打开需要登录的页面，跳首页
+    const needLoginPage = [/\/account/, /\/cart/];
+    const result = needLoginPage.some((item) => item.test(to.path));
+    if (result) {
       next("/");
       return;
     }

store/index.js

@@ -54,7 +54,6 @@ const actions = {
     const token = this.$cookies.get(TOKEN_KEY);
     if (!state.token && token) {
       commit("setToken", token);
-      dispatch("getUserInfo");
     }
     // 获取分类数据
     const { result } = await ApiGetCategoryOneList();