fix:修改首页,修改bug

components/BsAddress.vue

@@ -99,7 +99,7 @@
           :class="isAccount ? 'clearmargin' : ''"
         >
           <UiButton
-            v-if="addressList[0].id && !isAccount"
+            v-if="addressList[0]&&addressList[0].id && !isAccount"
             type="grey"
             @click="onCanceloperation()"
             >取消</UiButton
@@ -239,6 +239,8 @@ export default {
       } else {
         vm.defaultAddress = true;
         vm.isOperation = true;
+        vm.addressList = [];
+        vm.$emit("getList", vm.addressList);
       }
       console.log("获取收货地址", res);
     },

components/BsChosen.vue

@@ -2,7 +2,7 @@
   <div class="chosen">
     <div class="chosen-title flex flex-between flex-middle">
       <h3 class="chosen-title--txt">为你精选</h3>
-      <div class="chosen-title--btn flex" @click="getRecommendedGoodsList()">
+      <div class="chosen-title--btn flex" @click="onRest()">
         <img src="@/assets/img/goods/each.png" alt="切换推荐" />
         <span>换一组</span>
       </div>
@@ -23,6 +23,8 @@ export default {
   components: { UiGoodsItem },
   data() {
     return {
+      pages: 0,
+      pageIndex: 1,
       recommendedData: [],
     };
   },
@@ -30,17 +32,22 @@ export default {
     this.getRecommendedGoodsList();
   },
   methods: {
+    onRest() {
+      this.pageIndex < this.pages ? this.pageIndex++ : (this.pageIndex = 1);
+      this.getRecommendedGoodsList();
+    },
     async getRecommendedGoodsList() {
       let vm = this;
       let res = await ApiGetGoodsList({
         length: 20,
-        pageIndex: 1,
+        pageIndex: vm.pageIndex,
         name: "",
         categoryId: "",
         order: "",
       });
-      console.log(res.result)
+      console.log(res.result);
       vm.recommendedData = res.result.records;
+      vm.pages = res.result.pages;
     },
   },
 };

components/UiGoodsItem.vue

@@ -51,24 +51,30 @@ export default {
 </script>
 <style lang="scss" scoped>
 .goods-item {
-  width: 232px;
+  width: 228px;
-  height: 340px;
+  height: 320px;
   cursor: pointer;
   background: #ffffff;
+  transition: all 0.3s;
+  padding: 30px;
 
   &:hover {
-    box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.10000000149011612);
+    box-shadow: 0px 4px 40px 1px rgba(0, 0, 0, 0.10000000149011612);
+    margin-top: -3px;
   }
 
   &__img {
-    width: 232px;
+    width: 130px!important;
-    height: 232px;
+    height: 130px;
+    display: block;
+    margin: 0 auto 44px;
   }
   &__title {
-    width: 200px;
+    width: 170px;
     height: 45px;
     line-height: 22px;
-    margin: 17px auto 10px;
+    // margin: 17px auto 10px;
+    margin-bottom: 10px;
     font-size: 14px;
     font-family: Microsoft YaHei-Regular, Microsoft YaHei;
     font-weight: 400;
@@ -80,12 +86,15 @@ export default {
     -webkit-line-clamp: 2;
     &-label {
       display: inline-block;
-      padding: 2px 8px;
+      width: 40px;
-      background: rgba(255, 135, 91, 0.1);
+      height: 18px;
+      text-align: center;
+      line-height: 18px;
+      background: #FF6A19;
       font-size: 12px;
       font-family: Microsoft YaHei-Regular, Microsoft YaHei;
       font-weight: 400;
-      color: #ff875b;
+      color: #fff;
       text-align: center;
       margin-right: 8px;
     }
@@ -95,7 +104,7 @@ export default {
     margin: 0 auto;
 
     &--txt {
-      font-size: 14px;
+      font-size: 16px;
       color: #ff512b;
       &::before {
         content: "￥";

layouts/module/header/HeaderCart.vue

@@ -171,7 +171,9 @@ export default {
     background: #ff512b;
     border-radius: 50%;
     color: #ffffff;
-    margin-left: 4px;
+    left: 10px;
+    top: -7px;
+    position: absolute;
     &--more {
       // width: unset;
       top: -8px;

layouts/module/header/HeaderInfoBar.vue

@@ -303,7 +303,7 @@ export default {
       .header-wrap-content--line {
         width: 1px;
         height: 10px;
-        background: #d8d8d8;
+        background: #969696;
       }
       .header-wrap-content__common {
         cursor: pointer;

layouts/module/header/index.vue

@@ -193,6 +193,7 @@ export default {
   background: #ffffff;
   box-shadow: 0px 4px 10px 1px rgba(0, 0, 0, 0.1);
   z-index: 9999;
+
   &--hide-shadow {
     box-shadow: none;
     /deep/.el-menu {
@@ -277,6 +278,10 @@ export default {
         padding: 0 5px;
       }
     }
+
+    /deep/.tab-category-menu__right {
+      top: 70px!important;
+    }
   }
 }
 .header-box-wrap__right {
@@ -288,7 +293,7 @@ export default {
       z-index: 1;
       border-radius: 4px;
 
-      /deep/.el-input__suffix{
+      /deep/.el-input__suffix {
         display: flex;
         align-items: center;
         // margin-right: 16px;

pages/account/index/message.vue

@@ -11,7 +11,11 @@
     <main class="main">
       <h3 class="title">消息通知</h3>
       <section class="section">
-        <div class="section__item flex" v-for="item in socketMsgData" :key="item.id">
+        <div
+          class="section__item flex"
+          v-for="item in socketMsgData"
+          :key="item.id"
+        >
           <img
             class="section__item-img"
             src="https://img1.baidu.com/it/u=3384796346,381674655&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"
@@ -25,28 +29,33 @@
               }}</span>
             </div>
             <div class="section__item-content--txt">
-              {{
+              {{ JSON.parse(item.payload).content || `` }}
-                JSON.parse(item.payload).content ||
-                ``
-              }}
             </div>
           </div>
         </div>
+        <UiEmpty
+          v-if="!socketMsgData.length"
+          desc="暂无消息通知"
+          :icon="require('@/assets/img/account/order/empty.png')"
+        >
+        </UiEmpty>
       </section>
     </main>
   </div>
 </template>
 <script>
 import { mapState } from "vuex";
+import UiEmpty from "@/components/UiEmpty.vue";
 export default {
+  components: { UiEmpty },
   data() {
     return {};
   },
   computed: {
-    ...mapState(["token","socketMsgData"]),
+    ...mapState(["token", "socketMsgData"]),
   },
-  mounted(){
+  mounted() {
-    console.log(`socketMsgData`,this.$store.state)
+    console.log(`socketMsgData`, this.$store.state);
   },
   methods: {},
 };
@@ -71,6 +80,8 @@ export default {
     padding: 22px 20px 0;
     border: 1px solid #ddd;
     margin-top: -1px;
+    max-height: 600px;
+    overflow-y: auto;
 
     &__item {
       margin-bottom: 20px;

pages/account/index/order/detail/index.vue

@@ -53,6 +53,7 @@ export default {
 </script>
 <style lang="scss" scoped>
 .box{
+  min-width: 1000px;
 	border: 1px solid #ddd;
 	border-radius: 4px;
 	display: flex;

pages/goods/detail/_id.vue

@@ -537,6 +537,9 @@ export default {
   margin-bottom: 14px;
   &__crumbs {
     width: 1200px;
+    color: #666;
+    @include ellipsis;
+    padding-right: 970px
   }
 }
 .main {
@@ -605,6 +608,7 @@ export default {
   }
   &__details {
     width: 714px;
+    padding-top: 10px;
     &-title {
       font-size: 16px;
       font-family: Microsoft YaHei-Regular, Microsoft YaHei;
@@ -813,7 +817,7 @@ export default {
   width: 1200px;
   margin: 64px auto 0;
   &-recommend {
-    width: 232px;
+    width: 228px;
     margin-right: 30px;
 
     /deep/.goods-item {

pages/index/module/Banner.vue

@@ -9,6 +9,21 @@
 <template>
   <div class="home-banner">
     <el-carousel height="360px" indicator-position="outside">
+      <el-carousel-item>
+        <el-image
+          @click="onAdvBannerClick(0)"
+          :src="adv1"
+          fit="cover"
+        ></el-image>
+      </el-carousel-item>
+      <el-carousel-item>
+        <el-image
+          @click="onAdvBannerClick(1)"
+          :src="adv2"
+          fit="cover"
+        ></el-image>
+      </el-carousel-item>
+
       <el-carousel-item v-for="item in bannerList" :key="item.id">
         <el-image
           @click="onBannerClick(item.id)"
@@ -24,21 +39,23 @@ export default {
   name: "HomtBanner",
   data() {
     return {
+      adv1: require("~/assets/img/banner/zbk.jpg"),
+      adv2: require("~/assets/img/banner/jlp.jpg"),
       bannerList: [
         {
-          url: "https://cdn.mashibing.com/shop-pc/goods13.jpg",
+          url: require(`~/assets/img/banner/1.jpg`),
           id: 13,
         },
         {
-          url: "https://cdn.mashibing.com/shop-pc/goods30.jpg",
+          url: require(`~/assets/img/banner/2.jpg`),
           id: 30,
         },
         {
-          url: "https://cdn.mashibing.com/shop-pc/goods15.jpg",
+          url: require(`~/assets/img/banner/3.jpg`),
           id: 15,
         },
         {
-          url: "https://cdn.mashibing.com/shop-pc/goods40.jpg",
+          url: require(`~/assets/img/banner/4.jpg`),
           id: 40,
         },
       ],
@@ -48,6 +65,14 @@ export default {
     onBannerClick(goodsId) {
       window.open(`${location.origin}/goods/detail/${goodsId}`);
     },
+    onAdvBannerClick(i) {
+      if (i === 0) {
+        window.open(`https://www.mashibing.com/live/1530`);
+      } else if (i === 1) {
+        window.open(`https://www.mashibing.com/free/1373`);
+      }
+    },
+
   },
 };
 </script>

pages/index/module/Pick.vue

@@ -42,9 +42,11 @@
             v-for="(item, index) in recommendArray"
             :key="index"
             @click="onJumpGoodsDetail(item.id)"
-            class="recommend-products-right__item"
+            class="recommend-products-right__item flex flex-column"
           >
-            <strong class="home-pick-recommend--title">{{ item.title }}</strong>
+            <strong class="home-pick-recommend--title2">{{
+              item.title
+            }}</strong>
             <p class="home-pick-recommend--subtitle">
               {{ recommendGoodsOne.subtitle }}
             </p>
@@ -68,43 +70,70 @@
         </div>
       </div>
     </div>
+
     <!-- 新品上架 -->
-    <div v-if="showNew" class="home-pick-new">
+    <div v-if="showNew" class="home-pick-recommend">
       <div class="home-pick--label flex flex-middle">
         <strong>新品上架</strong>
       </div>
-      <div class="home-pick-new__products flex">
+      <div class="home-pick-recommend__products flex flex-middle flex-between">
-        <!-- 左侧商品 -->
+        <!-- 左侧商品一 -->
         <div
           @click="onJumpGoodsDetail(newGoodsOne.id)"
-          class="pick-new-products__left"
+          class="pick-recommend-products__left"
         >
-          <img
+          <strong class="home-pick-recommend--title">
-            :src="newGoodsOne.mainPicture"
+            {{ newGoodsOne.name }}
-            class="new-products-left__cover"
+          </strong>
-          />
+          <!-- 商品标签 -->
-          <div class="new-products-left__wrap">
+          <div
-            <p>{{ newGoodsOne.name }}</p>
+            v-for="item in newGoodsOne.labelList"
-            <strong class="home-pick--price__16">{{
+            :key="item.code"
-              newGoodsOne.startingPrice
+            class="home-pick-recommend--tag-wrap flex"
-            }}</strong>
+          >
+            <div :class="`tag-wrap__item tag-wrap__item--${item.code}`">
+              {{ item.text }}
+            </div>
+          </div>
+          <p class="home-pick-recommend--subtitle">
+            {{ newGoodsOne.subtitle }}
+          </p>
+          <strong class="home-pick--price__18">{{
+            newGoodsOne.startingPrice
+          }}</strong>
+          <div class="recommend-products-left__cover">
+            <img :src="newGoodsOne.mainPicture" />
           </div>
         </div>
-        <div class="pick-new-products__right flex flex-wrap flex-between">
+        <!-- 右侧商品 -->
+        <div
+          class="pick-recommend-products__right flex flex-column flex-between"
+        >
           <div
             v-for="(item, index) in newArray"
             :key="index"
             @click="onJumpGoodsDetail(item.id)"
-            class="new-products-right__wrap flex flex-middle"
+            class="recommend-products-right__item flex flex-column"
           >
-            <div class="products-right-wrap__cover">
+            <strong class="home-pick-recommend--title2">{{ item.name }}</strong>
-              <img :src="item.mainPicture" />
+            <p class="home-pick-recommend--subtitle">
+              {{ item.subtitle }}
+            </p>
+            <!-- 商品标签 -->
+            <div
+              v-for="itemLabel in item.labelList"
+              :key="itemLabel.code"
+              class="home-pick-recommend--tag-wrap flex"
+            >
+              <div :class="`tag-wrap__item tag-wrap__item--${itemLabel.code}`">
+                {{ itemLabel.text }}
+              </div>
             </div>
-            <div class="products-right-wrap__info">
+            <strong class="home-pick--price__18">{{
-              <p>{{ item.name }}</p>
+              item.startingPrice
-              <strong class="home-pick--price__14">{{
+            }}</strong>
-                item.startingPrice
+            <div class="recommend-products-right__cover flex-1">
-              }}</strong>
+              <img :src="item.mainPicture" />
             </div>
           </div>
         </div>
@@ -114,7 +143,7 @@
 </template>
 <script>
 const RECOMMEND_MIN_COUNT = 3; // 甄选推荐商品数
-const NEW_MIN_COUNT = 5; // 新品上架商品数
+const NEW_MIN_COUNT = 3; // 新品上架商品数
 
 export default {
   name: "HomePick",
@@ -156,6 +185,7 @@ export default {
       deep: true,
       handler(val) {
         if (val && val.length >= NEW_MIN_COUNT) {
+          console.log("新品上架", val);
           this.showNew = true;
           this.newGoodsOne = val[0];
           this.newArray = val.slice(1, NEW_MIN_COUNT);
@@ -176,7 +206,7 @@ export default {
   margin-top: 30px;
   &--label {
     font-size: 24px;
-    margin-bottom: 16px;
+    margin-bottom: 30px;
     img {
       width: 16px;
       height: 16px;
@@ -185,6 +215,7 @@ export default {
   }
   &--price {
     &__18 {
+      margin-top: auto;
       font-size: 18px;
       color: #ff512b;
       &::before {
@@ -211,10 +242,9 @@ export default {
   }
 
   .home-pick-recommend {
-    width: 590px;
+    width: 50%;
     min-height: 340px;
     padding: 16px 20px 20px;
-    background: #ffffff;
     border-radius: 4px;
     &--tag-wrap {
       margin-bottom: 8px;
@@ -240,7 +270,14 @@ export default {
     }
     &--title {
       display: block;
-      width: 140px;
+      width: 200px;
+      font-size: 16px;
+      margin-bottom: 6px;
+      @include ellipsis;
+    }
+    &--title2 {
+      display: block;
+      width: 150px;
       font-size: 16px;
       margin-bottom: 6px;
       @include ellipsis;
@@ -251,18 +288,25 @@ export default {
       margin-bottom: 8px;
     }
     &__products {
-      height: 264px;
+      // height: 264px;
       cursor: pointer;
       .pick-recommend-products__left {
         position: relative;
-        width: 264px;
+        width: 292px;
-        height: 100%;
+        height: 302px;
-        background: #f8f8f9;
+        background: #fff;
-        padding: 12px 0 0 20px;
+        padding: 20px;
+        margin-right: 16px;
+        transition: all 0.3s;
+
+        &:hover {
+          box-shadow: 0px 4px 40px 1px rgba(0, 0, 0, 0.10000000149011612);
+          margin-top: -3px;
+        }
         .recommend-products-left__cover {
           position: absolute;
-          right: 0;
+          right: 18px;
-          bottom: 0;
+          bottom: 18px;
           width: 170px;
           height: 170px;
           img {
@@ -275,11 +319,21 @@ export default {
         width: 266px;
         height: 100%;
         .recommend-products-right__item {
-          width: 100%;
+          width: 284px;
-          height: 122px;
+          height: 144px;
+          border-radius: 4px;
           position: relative;
-          background: #f8f7f8;
+          background: #fff;
-          padding: 10px 0 10px 20px;
+          padding: 20px;
+
+          transition: all 0.3s;
+
+          &:hover {
+            box-shadow: 0px 4px 40px 1px rgba(0, 0, 0, 0.10000000149011612);
+          }
+          &:nth-child(1) {
+            margin-bottom: 16px;
+          }
         }
         .recommend-products-right__cover {
           position: absolute;
@@ -296,63 +350,5 @@ export default {
       }
     }
   }
-  .home-pick-new {
-    width: 590px;
-    min-height: 340px;
-    padding: 16px 20px 20px;
-    background: #ffffff;
-    border-radius: 4px;
-    &__products {
-      cursor: pointer;
-      .pick-new-products__left {
-        width: 170px;
-        height: 264px;
-        background: #f8f8f9;
-        margin-right: 20px;
-        .new-products-left__cover {
-          width: 170px;
-          height: 170px;
-        }
-        .new-products-left__wrap {
-          padding: 10px 0;
-          text-align: center;
-          font-size: 14px;
-          p {
-            width: 140px;
-            margin: 0 auto 12px auto;
-            @include ellipsis;
-          }
-        }
-      }
-      .pick-new-products__right {
-        .new-products-right__wrap {
-          width: 170px;
-          height: 100px;
-          background: #ffffff;
-          padding: 16px 8px 16px 0;
-          &:nth-child(-n + 2) {
-            margin-bottom: 40px;
-          }
-          .products-right-wrap__cover {
-            width: 68px;
-            height: 68px;
-            margin-right: 16px;
-            img {
-              width: 100%;
-              height: 100%;
-            }
-          }
-          .products-right-wrap__info {
-            font-size: 14px;
-            p {
-              width: 78px;
-              margin-bottom: 8px;
-              @include ellipses(2);
-            }
-          }
-        }
-      }
-    }
-  }
 }
 </style>

pages/index/module/Seckill.vue

@@ -34,7 +34,7 @@
     <div class="home-sckill flex" @click="onJumpSeckill">
       <div class="home-sckill-carousel">
         <el-carousel
-          height="260px"
+          height="300px"
           arrow="always"
           :autoplay="false"
           :loop="false"
@@ -47,10 +47,8 @@
                 class="carousel-goods-box flex flex-middle"
               >
                 <div
-                  v-if="indexChild !== 0"
+                  class="carousel-goods-box__item flex flex-column flex-middle"
-                  class="carousel-goods-box--line"
+                >
-                ></div>
-                <div class="carousel-goods-box__item">
                   <img
                     class="goods-box-item__cover"
                     :src="itemChild.productMainPicture"
@@ -59,9 +57,14 @@
                     <p class="box-item-wrap__title">
                       {{ itemChild.productName }}
                     </p>
-                    <strong class="box-item-wrap__price"
+                    <p>
-                      >￥{{ itemChild.activityPrice }}</strong
+                      <strong class="box-item-wrap__price"
-                    >
+                        >￥{{ itemChild.activityPrice }}</strong
+                      >
+                      <span class="box-item-wrap__price2"
+                        >￥{{ itemChild.originalPrice }}</span
+                      >
+                    </p>
                   </div>
                 </div>
               </div>
@@ -75,7 +78,7 @@
 <script>
 import _ from "lodash";
 
-const CAROUSEL_COUNT = 6; // 走马灯每页展示商品数
+const CAROUSEL_COUNT = 5; // 走马灯每页展示商品数
 
 export default {
   name: "HomeSeckill",
@@ -160,6 +163,8 @@ export default {
 
     // 获取秒杀倒计时时间
     setTimerInterval({ startTime, endTime }) {
+      startTime = startTime .replace(/\-/g, "/");
+      endTime = endTime .replace(/\-/g, "/");
       startTime = new Date(startTime).getTime();
       endTime = new Date(endTime).getTime();
       if (this.current > startTime && this.current < endTime) {
@@ -225,8 +230,9 @@ export default {
   }
 }
 .home-sckill {
-  height: 260px;
+  height: 300px;
   cursor: pointer;
+  margin-bottom: 60px;
   .home-sckill-carousel {
     /deep/.el-carousel {
       width: 1200px;
@@ -256,32 +262,45 @@ export default {
       }
       .carousel-goods {
         height: 100%;
+        background: #f8f8f8;
         .carousel-goods-box {
-          .carousel-goods-box--line {
+          margin-right: 15px;
-            height: 160px;
+          width: 228px;
-            width: 1px;
+          height: 300px;
-            background: #eeeeee;
+          background: #ffffff;
-          }
+          border-radius: 4px;
           .carousel-goods-box__item {
-            width: 198px;
+            width: 100%;
             padding: 20px 24px;
+            transition: all .3s;
+
+            &:hover {
+              transform: translateY(-3px);
+            }
+
             .goods-box-item__cover {
-              width: 150px;
+              width: 140px;
-              height: 150px;
+              height: 140px;
               object-fit: productMainPicture;
-              margin-bottom: 14px;
+              margin-bottom: 24px;
             }
             .goods-box-item__wrap {
-              font-size: 14px;
+              font-size: 16px;
               color: #333333;
               text-align: center;
+              width: 100%;
               .box-item-wrap__title {
                 @include ellipsis;
-                margin-bottom: 8px;
+                margin-bottom: 20px;
               }
               .box-item-wrap__price {
                 color: #ff512b;
                 text-align: center;
+                margin-right: 15px;
+              }
+              .box-item-wrap__price2 {
+                color: #999999;
+                text-decoration: line-through;
               }
             }
           }