Merge branch 'feature/task1.0.0' into 'msb_test'

Feature/task1.0.0

See merge request yanxuan-frontend/shop-pc!66

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 > 9 }"
+      >
         {{ cartCount }}
       </div>
     </div>
@@ -23,28 +27,28 @@
         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">
+        <div class="cart_products-wrap_cover">
           <img :src="item.productMainPicture" />
         </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>
-        </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="cart-products-wrap__right"
+              class="wrap-info-top__price"
               :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>
+      </div>
       <!-- 失效商品 -->
       <template v-if="failureProducts.length > 0">
         <div class="header-cart-products__bar">以下商品已失效</div>
@@ -52,32 +56,32 @@
           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">
+          <div class="cart_products-wrap_cover">
             <img :src="item.productMainPicture" />
           </div>
-            <div class="products-wrap-left__info">
+          <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>
-            </div>
-          </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>
+        </div>
       </template>
     </div>
     <div class="header-cart-bottom flex flex-middle flex-between">
@@ -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 {
-          width: 54px;
-          height: 54px;
+      .cart_products-wrap_cover {
+        width: 60px;
+        height: 60px;
         padding: 3px;
         border: 1px solid #eeeeee;
         border-radius: 4px;
         margin-right: 11px;
         img {
-            width: 100%;
-            height: 100%;
+          width: 54px;
+          height: 54px;
         }
       }
-        .products-wrap-left__info {
+      .cart-products-wrap_info {
         font-size: 12px;
         color: #999999;
-          .wrap-left-info__title {
+        width: 100%;
+        .products-wrap-info__top {
+          .wrap-info-top__title {
             display: block;
             width: 120px;
             @include ellipsis;
@@ -222,13 +230,17 @@ export default {
             color: #333333;
             margin-bottom: 10px;
           }
-          .wrap-left-info__detail {
-            .left-info-detail__skuname {
+          .wrap-info-top__price {
+            color: #ff512b;
+          }
+        }
+        .products-wrap-info__bottom {
+          .wrap-info-bottom__skuname {
             display: block;
-              width: 70px;
+            width: 145px;
             @include ellipsis;
           }
-            .left-info-detail__count {
+          .wrap-info-bottom__count {
             &::before {
               content: "X";
               font-size: 8px;
@@ -237,10 +249,6 @@ export default {
         }
       }
     }
-      .cart-products-wrap__right {
-        color: #ff512b;
-      }
-    }
     .header-cart-products__bar {
       font-size: 14px;
       width: 298px;

layouts/module/header/HeaderInfoBar.vue

@@ -52,7 +52,11 @@
           >
             <img src="~/assets/img/layout/icon-message.png" />
             <span class="hover-text">消息</span>
-            <div v-if="messageCount > 0" class="wrap-content-message__tip">
+            <div
+              v-if="messageCount > 0"
+              class="wrap-content-message__tip flex flex-center flex-middle"
+              :class="{ 'wrap-content-message__tip--more': messageCount > 9 }"
+            >
               {{ messageCount }}
             </div>
           </div>
@@ -244,16 +248,18 @@ export default {
         }
       }
       .wrap-content-message__tip {
-        min-width: 14px;
+        width: 14px;
         height: 14px;
-        padding: 0 3px;
-        line-height: 14px;
         font-size: 10px;
         color: #ffffff;
-        text-align: center;
         background: #ff512b;
         border-radius: 50%;
         margin-left: 4px;
+        &--more {
+          width: unset;
+          padding: 0 3px;
+          border-radius: 7px;
+        }
       }
       .header-wrap-content--line {
         width: 1px;

layouts/module/header/index.vue

@@ -32,7 +32,13 @@
             />
             <div class="header-wrap-icons__shop" @click="$router.push('/cart')">
               <img src="~/assets/img/layout/icon-shop-sticky.png" />
-              <span v-if="cartCount > 0" class="">{{ cartCount }}</span>
+              <div
+                v-if="cartCount > 0"
+                :class="{ 'wrap-icons-shop__tip--more': cartCount > 10 }"
+                class="wrap-icons-shop__tip flex flex-middle flex-center"
+              >
+                {{ cartCount }}
+              </div>
             </div>
             <div
               v-if="token"
@@ -123,12 +129,14 @@ export default {
     return {
       searchContent: "",
       tabPath: "/",
-      cartCount: 0, // 购物车商品数
       cartProductList: [], // 购物车列表
     };
   },
   computed: {
-    ...mapState(["userInfo", "token", "seckillTabVisible"]),
+    ...mapState(["userInfo", "token", "seckillTabVisible", "cartProducts"]),
+    cartCount() {
+      return this.cartProducts.length;
+    },
     tabList() {
       const defaultList = [
         { label: "首页", value: "/" },
@@ -215,19 +223,21 @@ export default {
       .header-wrap-icons__shop {
         position: relative;
         margin-left: 14px;
-        span {
+        .wrap-icons-shop__tip {
           position: absolute;
-          right: -6px;
+          left: 18px;
           top: -4px;
-          display: block;
           height: 14px;
-          padding: 0 2px;
-          line-height: 14px;
-          text-align: center;
+          width: 14px;
           background: #ff512b;
           font-size: 10px;
           color: #ffffff;
           border-radius: 50%;
+          &--more {
+            width: unset;
+            padding: 0 3px;
+            border-radius: 7px;
+          }
         }
       }
       .header-wrap-icons__login {

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

@@ -99,13 +99,13 @@ export default {
         if (records && records.length > 0) {
           const formatRecords = records.map((item) => {
             const goods = item.products || [{ productImageUrl: "" }];
-            const logisticsList = item.logistics.logisticsDataList || [
-              { context: "暂无物流信息" },
-            ];
+            const logisticsList = item.logistics.logisticsDataList || [];
             return {
               ...item,
               cover: goods[0].productImageUrl, // 订单封面
-              logisticsContext: logisticsList[0].context, // 物流详细信息
+              logisticsContext:
+                (logisticsList.length > 0 && logisticsList[0].context) ||
+                "暂无物流信息", // 物流详细信息
             };
           });
           this.list = this.list.concat(formatRecords);

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();