feat:更改头像列表为空

src/App.vue

@@ -54,7 +54,7 @@ export default {
         bool: !isApp && !isWxMp && !isWechat ? true : false,
         pointer: this
       });
-      store.dispatch('change_is_weixin_browser', !isApp && !isWxMp && isWechat ? true : false);
+      // store.dispatch('change_is_weixin_browser', !isApp && !isWxMp && isWechat ? true : false);
     }
   },
   created() {

src/components/groupShare.vue

@@ -59,10 +59,10 @@ export default {
   },
   mounted() {
     EventBus.$on('goods_share_info', ({ shareInfo, type }) => {
-      // if (!isApp && !isWxMp) {
-      //   this.tipDialogMessage();
-      //   return;
-      // }
+      if (!isApp && !isWxMp) {
+        this.tipDialogMessage();
+        return;
+      }
       this.type = type;
       if (typeof shareInfo === 'object') {
         this.sharePicData = shareInfo;

src/components/groupSwiper copy.vue

+<template>
+  <div class="avator-swiper">
+    <swiper ref="mySwiper" :options="swiperOptions" class="avator-swiper_container">
+      <swiper-slide
+        v-for="(item, index) in avatorData"
+        :key="index"
+        :data-name="item.name"
+        :data-src="item.avatar"
+        class="avator-swiper_item"
+      >
+        <img :src="item.avatar" />
+      </swiper-slide>
+    </swiper>
+    <div class="avator-swiper_right">
+      <cr-image class="avator-swiper_item" :src="rightImgPath" />
+    </div>
+  </div>
+</template>
+<script>
+import { swiper, swiperSlide } from 'vue-awesome-swiper';
+import 'swiper/dist/css/swiper.css';
+export default {
+  name: 'GroupSwiper',
+  components: {
+    swiper,
+    swiperSlide
+  },
+  props: {
+    avatorData: {
+      type: Array,
+      default() {
+        return [];
+      }
+    }
+  },
+  data() {
+    const vm = this;
+    return {
+      timer: null,
+      rightImgPath: '',
+      avatorItem: null,
+      swiperOptions: {
+        loop: true,
+        initialSlide: 0,
+        slidesPerView: 7,
+        spaceBetween: 4,
+        speed: 1600,
+        centeredSlides: true,
+        watchSlidesProgress: true,
+        allowTouchMove: false,
+        autoplay: false,
+        on: {
+          init: function() {
+            const slideLeft = this.slides.eq(this.activeIndex - 3);
+            slideLeft.addClass('ani-left');
+          },
+          transitionStart: function() {
+            const activeIndex = this.activeIndex;
+            const slideLeft = this.slides.eq(activeIndex - 3);
+            const slideRight = this.slides.eq(activeIndex + 4);
+            vm.avatorItem = vm.getAvatorItem(slideLeft);
+            vm.rightImgPath = slideRight.data('src');
+            slideLeft.addClass('ani-left');
+            slideRight.addClass('ani-right');
+          },
+          transitionEnd: function() {
+            vm.$emit('animation-event-end', vm.avatorItem);
+            for (let i = 0; i < this.slides.length; i++) {
+              let slide = this.slides.eq(i);
+              slide.removeClass('ani-left ani-right');
+            }
+          }
+        }
+      }
+    };
+  },
+  computed: {
+    swiper() {
+      return this.$refs.mySwiper.swiper;
+    }
+  },
+  mounted() {
+    this.onSlidePrevChange();
+  },
+  beforeDestroy() {
+    clearInterval(this.timer);
+  },
+  methods: {
+    onSlidePrevChange() {
+      this.timer && clearInterval(this.timer);
+      this.timer = setInterval(() => {
+        this.$emit('animation-event-start');
+        this.swiper.slidePrev();
+      }, 5000);
+    },
+    getAvatorItem(ele) {
+      return {
+        src: ele.data('src'),
+        name: ele.data('name')
+      };
+    }
+  }
+};
+</script>
+<style lang="less">
+@keyframes leftToRight {
+  from {
+    transform: scale(0.3, 0.3);
+    transform-origin: right right;
+    opacity: 0;
+  }
+  to {
+    transform: scale(1, 1);
+    transform-origin: left left;
+    opacity: 1;
+  }
+}
+.ani-left {
+  transform-origin: right;
+  animation: leftToRight 1.6s 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: 100%;
+    width: 25px;
+    position: absolute;
+    right: 3px;
+    top: 0px;
+  }
+  &_item {
+    // transition: transform 0.2s linear;
+    padding-top: 2px;
+    img {
+      height: 25px;
+      width: 25px;
+      border-radius: 50%;
+      border: solid @white 1px;
+    }
+  }
+}
+</style>

src/components/groupSwiper.vue

@@ -44,8 +44,8 @@ export default {
         initialSlide: 0,
         slidesPerView: 7,
         spaceBetween: 4,
-        speed: 700,
-        centeredSlides: true,
+        speed: 1600,
+        centeredSlides: false,
         watchSlidesProgress: true,
         allowTouchMove: false,
         autoplay: false,
@@ -56,8 +56,8 @@ export default {
           },
           transitionStart: function() {
             const activeIndex = this.activeIndex;
-            const slideLeft = this.slides.eq(activeIndex - 3);
-            const slideRight = this.slides.eq(activeIndex + 4);
+            const slideLeft = this.slides.eq(activeIndex);
+            const slideRight = this.slides.eq(activeIndex + 7);
             vm.avatorItem = vm.getAvatorItem(slideLeft);
             vm.rightImgPath = slideRight.data('src');
             slideLeft.addClass('ani-left');
@@ -80,18 +80,19 @@ export default {
     }
   },
   mounted() {
+    this.onSlidePrevChange();
+  },
+  beforeDestroy() {
+    clearInterval(this.timer);
     // this.onSlidePrevChange();
   },
-  // beforeDestroy() {
-  //   this.swiper.destroy(true);
-  // },
   methods: {
     onSlidePrevChange() {
       this.timer && clearInterval(this.timer);
       this.timer = setInterval(() => {
         this.$emit('animation-event-start');
         this.swiper.slidePrev();
-      }, 10000);
+      }, 5000);
     },
     getAvatorItem(ele) {
       return {
@@ -132,6 +133,9 @@ export default {
   width: 100%;
   margin: 0 auto !important;
   position: relative;
+  &_container {
+    transition-timing-function: linear;
+  }
   &_right {
     height: 100%;
     width: 25px;

src/components/swipeCustomerInfo.vue

@@ -46,8 +46,8 @@ export default {
     }
   },
   watch: {
-    value(v) {
-      console.log(v);
+    value() {
+      // console.log(v);
     }
   },
   methods: {

src/views/goodsList/index.vue

@@ -18,7 +18,7 @@
           </div>
           <div class="group-portrait-ul">
             <groupSwiper
-              v-if="showLoops"
+              v-if="showLoops && goodsTemp.groupBuyUserInfoList.length"
               ref="swipeRota"
               :avator-data="goodsTemp.groupBuyUserInfoList"
               @animation-event-start="animationEventStart"
@@ -141,20 +141,11 @@ export default {
   created() {
     this.reload = true;
   },
-  mounted() {
-    this.showLoops = true;
-  },
-
   deactivated() {
-    clearTimeout((this.$refs.swipeRota && this.$refs.swipeRota.timer) || null);
     this.showLoops = false;
   },
   activated() {
     this.showLoops = true;
-    this.$nextTick(() => {
-      console.log(this.$refs.swipeRota);
-      this.$refs.swipeRota && this.$refs.swipeRota.onSlidePrevChange();
-    });
   },
   beforeRouteEnter(to, from, next) {
     const { activityId } = to.query;
@@ -283,7 +274,8 @@ export default {
     }
   }
 };
-async function computedTemplate(info) {
+async function computedTemplate(info = {}) {
+  if (!Object.keys(info).length) return info;
   info.endTime = info.endTime.replace(/-|\./g, '/');
   info.startTime = info.startTime.replace(/-|\./g, '/');
   const { endTime, startTime } = info;
@@ -318,7 +310,22 @@ async function getActivityList(urlQuery, next) {
     // t.startTime = '2021-09-23 10:45:00';
     // t.endTime = '2021-09-23 19:17:20';
     t = await computedTemplate(t);
-    t.groupBuyUserInfoList = t.groupBuyUserInfoList.reverse();
+    t.groupBuyUserInfoList = (t.groupBuyUserInfoList || []).reverse();
+    // [
+    //   {
+    //     userTag: '团长',
+    //     avatar: 'https://avatar.q-gp.com/14612340001/ee8991d0-1d38-11ec-b6f6-bf45b18f0626'
+    //   },
+    //   {
+    //     userTag: '团长',
+    //     avatar:
+    //       'https://thirdwx.qlogo.cn/mmopen/vi_32/2tyJekZCNaHnZBJicakCibFzB71ukXJRGEy6iaT44twhGLToibR9QWeyDTOjEWyVte0Zh5rrV8R9lmiazVGnia15HADA/132'
+    //   },
+    //   {
+    //     avatar:
+    //       'https://thirdwx.qlogo.cn/mmopen/vi_32/LF7hK1yuMnxUAnx4YmjPyJCn0WqwVMplgTnDSBwwOib5uHP9fQazPf7xRXCUNEfI8sicf7boaCNoD2NUss2k7jFg/132'
+    //   }
+    // ]; // (t.groupBuyUserInfoList || []).reverse();
     store.commit('CHANGE_TITLE', t.title || '活动页');
     nextFns(vm => {
       topicIndex = 0;