新品牌轮播，及轮播兼容性

components/brandCenter/RecommendBrand.vue

@@ -3,12 +3,12 @@
     <div v-swiper:mySwiper="swiperOption">
       <div class="swiper-wrapper">
         <div class="swiper-slide" v-for="banner in sliceBanners">
-          <a :href="banner.hrefUrl" target="_blank" v-if="banner.hrefUrl">
+          <a :href="banner.detailsLink" target="_blank" v-if="banner.detailsLink">
             <img :src="banner.pictureLink"/>
           </a>
-          <span v-if="!banner.hrefUrl">
-                <img :src="banner.pictureLink"/>
-              </span>
+          <span v-else>
+            <img :src="banner.pictureLink"/>
+          </span>
         </div>
         <div class="swiper-button-prev"><i class="iconfont icon-swiper-left"></i></div>
         <div class="swiper-button-next"><i class="iconfont icon-swiper-right"></i></div>
@@ -32,29 +32,12 @@
   </div>
 </template>
 <script>
+  import { carousel } from '~utils/mixin'
   export default {
+    mixins: [carousel],
     data () {
       return {
-        activeSlide: 0,
-        swiperOption: {
-          autoplay: 6000,
-          pagination: '.swiper-pagination',
-          paginationClickable: true,
-          mousewheelControl: false,
-          effect: 'fade',
-          lazyLoading: true,
-          loop: true,
-          prevButton: '.swiper-button-prev',
-          nextButton: '.swiper-button-next',
-          onTransitionStart: (swiper) => {
-            if (this.banners.data && this.banners.data.length && (swiper.activeIndex > this.banners.data.length)) {
-              swiper.activeIndex = 1
-            }
-            if (this.banners.data && this.banners.data.length && swiper.activeIndex <= 0) {
-              swiper.activeIndex = this.banners.data.length
-            }
-          }
-        }
+        activeSlide: 0
       }
     },
     filters: {
@@ -97,6 +80,19 @@
       },
       sliceBanners () {
         return this.banners.data && this.banners.data.length ? this.banners.data.slice(0, 3) : []
+      },
+      swiperOption () {
+        return {
+          autoplay: 6000,
+          pagination: '.swiper-pagination',
+          paginationClickable: true,
+          mousewheelControl: false,
+          effect: this.effect,
+          lazyLoading: true,
+          loop: true,
+          prevButton: '.swiper-button-prev',
+          nextButton: '.swiper-button-next'
+        }
       }
     }
   }

components/default/Header.vue

@@ -116,7 +116,7 @@
       onRegisterClick () {
         this.$http.get('/register/page').then(response => {
           if (response.data) {
-            window.location.href = response.data.content
+            window.location.href = response.data.content + '&baseUrl=' + encodeURIComponent(window.location.protocol + '//' + window.location.host + '/newLogin/other')
           }
         })
       },

components/home/Carousel.vue

@@ -23,13 +23,33 @@
   </div>
 </template>
 <script>
+  import { carousel } from '~utils/mixin'
   export default {
     name: 'carousel',
+    mixins: [carousel],
     data () {
-      let _this = this
       return {
-        activeSlide: 0,
-        swiperOption: {
+        activeSlide: 0
+      }
+    },
+    computed: {
+      banners () {
+        if (this.$store.state.carousel.banners) {
+          let banner = this.$store.state.carousel.banners.data.slice()
+           banner.sort(function (a, b) {
+             return a.orderNumber - b.orderNumber
+           })
+          return banner
+        } else {
+          return ''
+        }
+      },
+      activeColor () {
+        return this.banners.length ? this.banners[this.activeSlide].metadata['background-color'] : null
+      },
+      swiperOption () {
+        let _this = this
+        return {
           autoplay: 6000,
           initialSlide: 0,
           pagination: '.swiper-pagination',
@@ -37,7 +57,7 @@
           autoplayDisableOnInteraction: false,
           paginationClickable: true,
           mousewheelControl: false,
-          effect: 'fade',
+          effect: _this.effect,
           lazyLoading: true,
           loop: true,
           prevButton: '.swiper-button-prev',
@@ -58,22 +78,6 @@
           }
         }
       }
-    },
-    computed: {
-      banners () {
-        if (this.$store.state.carousel.banners) {
-          let banner = this.$store.state.carousel.banners.data.slice()
-           banner.sort(function (a, b) {
-             return a.orderNumber - b.orderNumber
-           })
-          return banner
-        } else {
-          return ''
-        }
-      },
-      activeColor () {
-        return this.banners.length ? this.banners[this.activeSlide].metadata['background-color'] : null
-      }
     }
   }
 </script>

components/provider/Carousel.vue

@@ -15,28 +15,16 @@
   </div>
 </template>
 <script>
+  import { carousel } from '~utils/mixin'
   export default {
     name: 'carousel',
     data () {
       return {
-        activeSlide: 0,
-        swiperOption: {
-          autoplay: 5000,
-          initialSlide: 0,
-          loop: true,
-          effect: 'fade',
-          lazyLoading: true,
-          // 解决点击分页器后图片就不能轮播的问题
-          autoplayDisableOnInteraction: false,
-          pagination: '.swiper-pagination',
-          paginationClickable: true,
-          paginationElement: 'li',
-          prevButton: '.swiper-button-prev',
-          nextButton: '.swiper-button-next'
-        }
+        activeSlide: 0
     //    banners: {}
       }
     },
+    mixins: [carousel],
 //    mounted () {
 //      this.$http.get('/api/carousel/home%20page%20banner')
 //      .then(response => {
@@ -58,6 +46,22 @@
         } else {
           return ''
         }
+      },
+      swiperOption () {
+        return {
+          autoplay: 5000,
+          initialSlide: 0,
+          loop: true,
+          effect: this.effect,
+          lazyLoading: true,
+          // 解决点击分页器后图片就不能轮播的问题
+          autoplayDisableOnInteraction: false,
+          pagination: '.swiper-pagination',
+          paginationClickable: true,
+          paginationElement: 'li',
+          prevButton: '.swiper-button-prev',
+          nextButton: '.swiper-button-next'
+        }
       }
     }
   }

plugins/axios.js

@@ -26,7 +26,6 @@ service.interceptors.request.use(config => {
     } else {
       config.url = process.env.baseUrl + config.url
     }
-    console.log(config.url)
   //   let paramStr = ''
   //   if (config.params) {
   //     paramStr += '?'

utils/mixin.js

@@ -0,0 +1,11 @@
+export const carousel = {
+  computed: {
+    isIE () {
+      return /(MSIE)|(Trident)/.test(this.$store.state.option.userAgent)
+    },
+    effect () {
+      return this.isIE ? 'slide' : 'fade'
+    }
+  }
+}
+