feat:升级swiper

package-lock.json

@@ -4704,16 +4704,16 @@
     },
     "dom7": {
       "version": "2.1.5",
-      "resolved": "http://npmprivate.quantgroups.com/dom7/-/dom7-2.1.5.tgz",
-      "integrity": "sha512-xnhwVgyOh3eD++/XGtH+5qBwYTgCm0aW91GFgPJ3XG+jlsRLyJivnbP0QmUBFhI+Oaz9FV0s7cxgXHezwOEBYA==",
+      "resolved": "https://registry.nlark.com/dom7/download/dom7-2.1.5.tgz?cache=0&sync_timestamp=1629879453685&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fdom7%2Fdownload%2Fdom7-2.1.5.tgz",
+      "integrity": "sha1-p5QRAXgAsx2EAAcM2uu/ySwfY3c=",
       "requires": {
         "ssr-window": "^2.0.0"
       },
       "dependencies": {
         "ssr-window": {
           "version": "2.0.0",
-          "resolved": "http://npmprivate.quantgroups.com/ssr-window/-/ssr-window-2.0.0.tgz",
-          "integrity": "sha512-NXzN+/HPObKAx191H3zKlYomE5WrVIkoCB5IaSdvKokxTpjBdWfr0RaP+1Z5KOfDT0ZVz+2tdtiBkhsEQ9p+0A=="
+          "resolved": "https://registry.nlark.com/ssr-window/download/ssr-window-2.0.0.tgz?cache=0&sync_timestamp=1629879256060&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fssr-window%2Fdownload%2Fssr-window-2.0.0.tgz",
+          "integrity": "sha1-mMMBrvmVIzF/jWlhjwAQeRCW78Q="
         }
       }
     },
@@ -11463,8 +11463,8 @@
     },
     "ssr-window": {
       "version": "1.0.1",
-      "resolved": "http://npmprivate.quantgroups.com/ssr-window/-/ssr-window-1.0.1.tgz",
-      "integrity": "sha512-dgFqB+f00LJTEgb6UXhx0h+SrG50LJvti2yMKMqAgzfUmUXZrLSv2fjULF7AWGwK25EXu8+smLR3jYsJQChPsg=="
+      "resolved": "https://registry.nlark.com/ssr-window/download/ssr-window-1.0.1.tgz?cache=0&sync_timestamp=1629879256060&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fssr-window%2Fdownload%2Fssr-window-1.0.1.tgz",
+      "integrity": "sha1-MHUqakZm53Z/C35qpvwv29DZs2k="
     },
     "ssri": {
       "version": "6.0.1",
@@ -11971,9 +11971,9 @@
       }
     },
     "swiper": {
-      "version": "4.5.1",
-      "resolved": "http://npmprivate.quantgroups.com/swiper/-/swiper-4.5.1.tgz",
-      "integrity": "sha512-se6I7PWWu950NAMXXT+ENtF/6SVb8mPyO+bTfNxbQBILSeLqsYp3Ndap+YOA0EczOIUlea274PKejT6gKZDseA==",
+      "version": "5.2.0",
+      "resolved": "https://registry.npmmirror.com/swiper/download/swiper-5.2.0.tgz?cache=0&sync_timestamp=1632899438741&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fswiper%2Fdownload%2Fswiper-5.2.0.tgz",
+      "integrity": "sha1-g0qvYFPTJLy2BXi6ULti9UNC+co=",
       "requires": {
         "dom7": "^2.1.3",
         "ssr-window": "^1.0.1"
@@ -12788,13 +12788,9 @@
       "integrity": "sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ=="
     },
     "vue-awesome-swiper": {
-      "version": "3.1.3",
-      "resolved": "http://npmprivate.quantgroups.com/vue-awesome-swiper/-/vue-awesome-swiper-3.1.3.tgz",
-      "integrity": "sha512-E7suzkyApO8vNZbgdEnjSmnpsmQZyRvSVXJ7sey3XYwKPOkLhH3+GnHroBw+5PZIQXvWBwdCeQsPG1xQ1r1Rhg==",
-      "requires": {
-        "object-assign": "^4.1.1",
-        "swiper": "^4.0.7"
-      }
+      "version": "4.1.1",
+      "resolved": "https://registry.npm.taobao.org/vue-awesome-swiper/download/vue-awesome-swiper-4.1.1.tgz",
+      "integrity": "sha1-j3qyIa0AMCHXVrhqphj0KZJJAP4="
     },
     "vue-eslint-parser": {
       "version": "7.1.0",

package.json

@@ -23,8 +23,9 @@
     "qiniu-js": "^3.3.1",
     "raven-js": "^3.27.2",
     "sa-sdk-javascript": "^1.15.16",
+    "swiper": "^5.2.0",
     "vue": "2.6.11",
-    "vue-awesome-swiper": "3.1.3",
+    "vue-awesome-swiper": "4.1.1",
     "vue-router": "^3.2.0",
     "vuex": "^3.4.0",
     "weixin-js-sdk": "^1.6.0"

src/components/avatorSwiper.vue

@@ -22,14 +22,14 @@
   </div>
 </template>
 <script>
-import { swiper, swiperSlide } from 'vue-awesome-swiper';
-import 'swiper/dist/css/swiper.css';
+import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
+import 'swiper/css/swiper.css';
 import Img2Thumb from '@/filters/img2Thumb.filter';
 export default {
   name: 'AvatorSwiper',
   components: {
-    swiper,
-    swiperSlide
+    Swiper,
+    SwiperSlide
   },
   filters: {
     Img2Thumb
@@ -59,7 +59,8 @@ export default {
         spaceBetween: 4,
         speed: 600,
         centeredSlides: true,
-        watchSlidesProgress: false,
+        centeredSlidesBounds: true,
+        // watchSlidesProgress: false,
         allowTouchMove: false,
         autoplay,
         on: {
@@ -124,8 +125,8 @@ export default {
     // },
     getAvatorItem(ele) {
       return {
-        src: ele.data('src'),
-        name: ele.data('name')
+        src: ele.data('src') || '',
+        name: ele.data('name') || ''
       };
     }
   }
@@ -171,18 +172,19 @@ export default {
   top: 0;
 }
 .avator_right {
-  right: 0;
+  right: 0px;
 }
 .avator_left {
-  left: 0;
+  left: 0px;
 }
 
 .avator-swiper {
   position: relative;
-  width: 100%;
-
+  width: 262px;
+  margin: 0 auto;
   &_item {
     height: 32px;
+    width: 25px;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -213,10 +215,19 @@ export default {
   -webkit-align-items: center;
   align-items: center;
 }
-.avator-swiper_container {
-  .swiper-slide-active {
-    transform: scale(1.2);
-    transition: transform 0.6s linear;
-  }
-}
+// .avator-swiper_container {
+//   .swiper-slide-active {
+//     transform: scale(1.2);
+//     transition: transform 0.6s linear;
+//   }
+// }
+// .avator-swiper_container {
+//   .swiper-slide-active {
+//     transform: scale(1);
+//     transition: transform 0.6s linear;
+//   }
+//   .swiper-slide:not(.swiper-slide-active) {
+//     transform: scale(0.8);
+//   }
+// }
 </style>

src/components/groupBuySuccessInfo.vue

@@ -39,12 +39,13 @@ export default {
 <style lang="less" scoped>
 .success-info {
   .text-14();
+  width: 327px;
   color: @black;
   text-align: center;
   height: 90px;
   background: #f7f8f9;
   border-radius: @border-radius-md + 2;
-  padding: 0 @padding-unit * 10 + 5;
+  // padding: 0 @padding-unit * 10;
   display: flex;
   flex-direction: column;
   justify-content: center;

src/components/groupSwiper.vue

@@ -21,13 +21,13 @@
   </div>
 </template>
 <script>
-import { swiper, swiperSlide } from 'vue-awesome-swiper';
-import 'swiper/dist/css/swiper.css';
+import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
+import 'swiper/css/swiper.css';
 export default {
   name: 'GroupSwiper',
   components: {
-    swiper,
-    swiperSlide
+    Swiper,
+    SwiperSlide
   },
   props: {
     bgColor: {

src/mixins/goodsCheck.mixin.js

@@ -40,7 +40,7 @@ export default {
           message: '参与拼团活动需要您先进行登录哦~',
           title: '',
           closeOnClickOverlay: true,
-          showCancelButton: false,
+          showCancelButton: true,
           confirmButtonText: '登录',
           onConfirm: () => {
             if (isWxMp) {

src/views/orderList/components/List.less

@@ -6,7 +6,8 @@
     margin-bottom: @padding-sm;
   }
   &__head {
-    padding: @padding-sm @padding-xs;
+    height: 44px;
+    padding: 0 @padding-xs;
     border-bottom: 1px solid @grey-border;
     display: flex;
     justify-content: space-between;
@@ -17,13 +18,35 @@
     }
     &-image {
       position: relative;
-      display: inline-block;
-      width: 20px;
-      height: 25px;
+      width: 25px;
+      height: 30px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
       text-align: center;
       margin-right: 4px;
+      background: url(~@/assets/images/leaderBorder.png) no-repeat center;
+      background-size: 100%;
+    }
+    &-crown,
+    &-leader {
+      position: absolute;
+    }
+    &-crown {
+      width: 10px;
+      height: 10px;
+      background: url(~@/assets/images/leaderIcon.png) no-repeat center;
+      background-size: 100%;
+      top: -2px;
+      right: -1px;
+    }
+    &-leader {
+      width: 100%;
+      height: 8px;
+      background: url(~@/assets/images/leader-name.png) no-repeat center;
+      bottom: 0px;
+      background-size: auto 100%;
     }
-
     &-red {
       color: @red;
     }
@@ -37,8 +60,8 @@
       padding-right: @padding-unit;
     }
     &-avator {
-      margin-left: @padding-unit - 2;
-      margin-top: @padding-unit - 2;
+      // margin-left: @padding-unit - 2;
+      // margin-top: @padding-unit - 2;
       border-radius: 50%;
       overflow: hidden;
     }

src/views/orderList/components/List.vue

@@ -10,10 +10,13 @@
       <div v-for="(item, index) in list" :key="index" class="Ol__item" @click="toDetail(item)">
         <div class="Ol__head">
           <div class="Ol__head-left">
-            <span class="Ol__head-image">
-              <cr-image class="Ol__head-avator" width="85%" :src="item.profilePhoto" />
-              <cr-image class="Ol__head-group" src="@/assets/images/group.png" />
-            </span>
+            <div class="Ol__head-image">
+              <span class="Ol__head-crown" :src="item.profilePhoto" />
+              <cr-image class="Ol__head-avator" width="80%" :src="item.profilePhoto" />
+              <span class="Ol__head-leader" :src="item.profilePhoto" />
+
+              <!-- <cr-image class="Ol__head-group" src="@/assets/images/group.png" /> -->
+            </div>
             <span class="Ol__head-name">{{ item.nickname }}</span>
           </div>
           <div class="Ol__head-right">

src/views/orderList/index.less

@@ -4,6 +4,12 @@
     z-index: 3;
     & > div {
       z-index: 3;
+      .cr-tabs__item--active {
+        font-weight: bold;
+        & > .cr-tabs__text {
+          font-weight: bold;
+        }
+      }
     }
   }
-}
+}
\ No newline at end of file