feat:百人团0元购列表页面 轮播头像效果

src/api/groupBuy.js

@@ -22,5 +22,10 @@ export default {
     return http.get(`http://yapi.quantgroups.com/mock/479/goods/group-list`, data, {
       hideLoading: true
     });
+  },
+  getGroupAvator(data) {
+    return http.get(`http://yapi.quantgroups.com/mock/479/goods/getAvator`, data, {
+      hideLoading: true
+    });
   }
 };

src/components/groupSwiper.vue

+<template>
+  <div class="avator-swiper" @click="onSlidePrevChange">
+    <swiper ref="mySwiper" :options="swiperOptions" class="avator-swiper_container">
+      <!-- @slide-change="slideChange"
+      @set-translate="setTranslate" -->
+      <swiper-slide v-for="(item, index) in avatorData" :key="index" class="avator-swiper_item">
+        <div class="avator-swiper_item">
+          <img :src="item" />
+        </div>
+      </swiper-slide>
+    </swiper>
+    <div class="avator-swiper_right">
+      <cr-image class="avator-swiper_item" :src="leftImgPath" />
+    </div>
+  </div>
+</template>
+<script>
+import { swiper, swiperSlide } from 'vue-awesome-swiper';
+import 'swiper/dist/css/swiper.css';
+export default {
+  name: 'AvatorSwiper',
+  components: {
+    swiper,
+    swiperSlide
+  },
+  props: {
+    avatorData: {
+      type: Array,
+      default() {
+        return [];
+      }
+    }
+  },
+  data() {
+    const vm = this;
+    return {
+      activeIndex: 0,
+      leftImgPath: '',
+      rightImgPath: '',
+      swiperOptions: {
+        loop: true,
+        initialSlide: 0,
+        slidesPerView: 7,
+        spaceBetween: 4,
+        speed: 1100,
+        centeredSlides: true,
+        watchSlidesProgress: true,
+        allowTouchMove: false,
+        autoplay: false,
+        // autoplay: {
+        //   delay: 900,
+        //   stopOnLastSlide: false,
+        //   disableOnInteraction: false
+        // }
+        on: {
+          init: function() {
+            let slideLeft = this.slides.eq(this.activeIndex - 3);
+            slideLeft.addClass('ani-left');
+          },
+          transitionStart: function() {
+            let slideLeft = this.slides.eq(this.activeIndex - 3);
+            let slideRight = this.slides.eq(this.activeIndex + 4);
+            slideLeft.addClass('ani-left');
+            slideRight.addClass('ani-right');
+            vm.leftImgPath = slideRight.find('img').attr('src');
+          },
+          transitionEnd: function() {
+            for (let i = 0; i < this.slides.length; i++) {
+              let slide = this.slides.eq(i);
+              slide.removeClass('ani-left');
+              slide.removeClass('ani-right');
+            }
+          }
+        }
+      }
+    };
+  },
+  computed: {
+    swiper() {
+      return this.$refs.mySwiper.swiper;
+    }
+  },
+  watch: {
+    avatorData() {
+      this.onSlidePrevChange();
+    }
+  },
+  methods: {
+    onSlidePrevChange() {
+      this.swiper.slidePrev();
+    }
+  }
+};
+</script>
+<style lang="less">
+@keyframes leftToRight {
+  from {
+    transform: scale(0.3, 0.3);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1, 1);
+    opacity: 1;
+  }
+}
+.ani-left {
+  transform-origin: right;
+  animation: leftToRight 0.7s linear;
+}
+@keyframes scaleTo {
+  to {
+    opacity: 1;
+  }
+}
+.ani-right {
+  opacity: 0;
+  // animation: scaleTo 3s ease-out;
+}
+.avator-swiper {
+  width: 100%;
+  margin: 0 auto !important;
+  position: relative;
+  &_right {
+    height: 25px;
+    width: 25px;
+    position: absolute;
+    right: 3px;
+    top: 2px;
+  }
+  &_item {
+    transition: transform 0.2s linear;
+    height: 32px;
+    padding-top: 2px;
+    img {
+      height: 25px;
+      width: 25px;
+      border-radius: 50%;
+    }
+    &.active {
+      transform: scale(1.2);
+    }
+  }
+}
+</style>

src/router/groupBuy.js

@@ -39,7 +39,6 @@ module.exports = [
   {
     path: '/payFail',
     name: 'payFail',
-    alias: ['/payFail'],
     meta: {
       title: '支付失败'
     },
@@ -48,7 +47,6 @@ module.exports = [
   {
     path: '/paySuccess',
     name: 'paySuccess',
-    alias: ['/paySuccess'],
     meta: {
       title: '支付成功',
       success: true

src/views/goodsList/index.less

 .group {
   font-size: @font-size-14;
-  &-banner {
-    position: relative;
+  &-top {
     height: 380px;
-    .banner-image {
-      position: absolute;
-      left: 0;
-      top: 0;
-    }
-    .banner-mark {
-      width: 40%;
-      height: 30px;
-      line-height: 30px;
-      border-radius: 15px;
-      color: #fff;
-    }
   }
 
   &-bottom {
@@ -54,8 +41,6 @@
       padding-right: 8px;
     }
 
-    
-
     .group-portrait {
       &-head {
         display: flex;
@@ -79,6 +64,7 @@
         flex: 1;
         display: flex;
         justify-content: space-around;
+        overflow: hidden;
       }
       &-image {
         height: 23px;

src/views/goodsList/index.vue

 <template>
   <div class="group" :style="{ backgroundColor: gpBackColor }">
     <!-- 配置头部动态信息 start -->
-    <div class="group-banner">
+    <div class="group-top">
       <!-- 动态活动背景图 -->
-      <cr-image width="100%" height="100%" class="banner-image" :src="gpImagePath" />
-      <!-- 顶部mark框 -->
-      <div class="banner-mark">135****8888刚刚获得华为P40</div>
-
-      <!-- 头像列表 -->
-      <div class="banner-portrait" />
-
-      <!-- 中间提示 文字 -->
-      <div class="banner-prompt">已有40万+人拿到商品</div>
+      <cr-image width="100%" height="100%" class="group-top-image" :src="gpImagePath" />
     </div>
     <!-- 配置头部动态信息 end -->
 
@@ -22,7 +14,10 @@
           <div class="group-portrait-swipe" @click="switchAnimation">
             <swipeCustomerInfo v-model="showSwipe" />
           </div>
-          <ul class="group-portrait-ul" :class="animate">
+          <div class="group-portrait-ul">
+            <groupSwiper v-if="avatorData.length" :avator-data="avatorData" />
+          </div>
+          <!-- <ul class="group-portrait-ul" :class="animate">
             <li
               v-for="(imgItem, imgIndex) in gpImagePathArray"
               :key="imgIndex"
@@ -30,7 +25,7 @@
             >
               <cr-image :src="imgItem" />
             </li>
-          </ul>
+          </ul> -->
         </div>
         <div class="group-portrait-num" @click="showSwipe = !showSwipe">已有 1230人 参与拼单</div>
       </div>
@@ -61,15 +56,18 @@ import countDown from '@/components/countDown';
 import swipeCustomerInfo from '@/components/swipeCustomerInfo';
 import gpImagePath from '@/assets/images/groupBuy/bg-top.png';
 import goodsCard from './components/goodsCard';
+import groupSwiper from '@/components/groupSwiper';
 export default {
   // beforeRouteEnter(to, from, next) {
   //   next(vm => {});
   // },
   // eslint-disable-next-line vue/name-property-casing
   name: 'groupBuyList',
-  components: { countDown, swipeCustomerInfo, goodsCard },
+  components: { countDown, swipeCustomerInfo, goodsCard, groupSwiper },
   data() {
     return {
+      avatorData: [],
+
       animate: {
         animateAuto: false,
         transition: true,
@@ -78,7 +76,7 @@ export default {
         animation: false
       },
 
-      showSwipe: true,
+      showSwipe: false,
       gpImagePath,
       gpBackColor: '#FA494E',
       gpImagePathArray: [
@@ -101,8 +99,34 @@ export default {
   created() {},
   mounted() {
     // todo 曝光埋点
+    this.$nextTick(() => {
+      // this.avatorTimeSyncChange();
+      this.getAvatorList();
+    });
   },
   methods: {
+    avatorTimeSyncChange() {
+      setInterval(() => {
+        this.showSwipe = false;
+        this.getAvatorList();
+        // clearTimeout(timer);
+      }, 3000);
+    },
+    showSwipeSync(avatorData) {
+      let timer = setTimeout(() => {
+        this.avatorData = avatorData;
+        this.showSwipe = true;
+        clearTimeout(timer);
+      }, 1000);
+    },
+    async getAvatorList() {
+      try {
+        const [data] = await groupBuyApi.getGroupAvator();
+        this.showSwipeSync(data);
+      } catch (err) {
+        console.log(err);
+      }
+    },
     switchAnimation() {
       this.animate.animateAuto = !this.animate.animateAuto;
     },