feat:更新头像数据不显示

src/components/avatorSwiper.vue

@@ -3,16 +3,16 @@
     <div v-if="isLoop" class="avator_left avator-swiper_item" :class="{ 'ani-left': isAddClass }">
       <img :src="leftImgPath" />
     </div>
-    <swiper ref="mySwiper" :options="swiperOptions" class="avator-swiper_container">
+    <swiper ref="mySwiper" :options="swiperOptions" :class="{ 'avator-swiper_container': isLoop }">
       <swiper-slide
         v-for="(item, index) in avatorData"
         :key="index"
-        :data-src="item"
-        :data-name="item"
+        :data-src="item.avatar"
+        :data-name="item.name"
         class="avator-swiper_item"
       >
         <div class="avator-swiper_item">
-          <img :src="item | Img2Thumb" />
+          <img :src="item.avatar | Img2Thumb" />
         </div>
       </swiper-slide>
     </swiper>
@@ -78,7 +78,9 @@ export default {
             vm.isAddClass = true;
             clearTimeout(vm.timer);
             vm.timer = setTimeout(() => {
-              vm.$store.dispatch('goods_avator_info', { ...vm.avatorItem, showInfo: true });
+              isLoop
+                ? vm.$store.dispatch('goods_avator_info', { ...vm.avatorItem, showInfo: true })
+                : vm.oneTransLate();
               clearTimeout(vm.timer);
             }, 800);
           },
@@ -98,7 +100,20 @@ export default {
       return this.$refs.mySwiper.swiper;
     }
   },
+  mounted() {},
+  beforeDestroy() {
+    this.$store.dispatch('goods_avator_info', { showInfo: false });
+    clearTimeout(this.timer);
+  },
   methods: {
+    oneTransLate() {
+      if (!this.isLoop) {
+        const avatorData = this.avatorData;
+        const imgItem = avatorData[avatorData.length - 1];
+        const lastItem = { src: imgItem.avatar, name: imgItem.name, showInfo: true };
+        this.$store.dispatch('goods_avator_info', lastItem);
+      }
+    },
     // setTranslate() {
     //   const slides = this.swiper.slides;
     //   for (let i = 0; i < slides.length; i++) {
@@ -198,9 +213,10 @@ export default {
   -webkit-align-items: center;
   align-items: center;
 }
-
-.swiper-slide-active {
+.avator-swiper_container {
+  .swiper-slide-active {
     transform: scale(1.2);
     transition: transform 0.6s linear;
+  }
 }
 </style>

src/components/groupBuySuccessInfo.vue

@@ -28,7 +28,7 @@ export default {
   created() {
     if (this.groupInfo.groupBuyAllUserInfoList) {
       this.avatorData = this.groupInfo.groupBuyAllUserInfoList.map(v => {
-        return v.avatar;
+        return v;
       });
     } else {
       this.avatorData = [];

src/components/groupSwiper.vue

@@ -79,7 +79,7 @@ export default {
             slideRight.addClass('ani-opt');
             clearTimeout(vm.timer);
             vm.timer = setTimeout(() => {
-              vm.$emit('animation-event-end', vm.avatorItem);
+              isLoop ? vm.$emit('animation-event-end', vm.avatorItem) : vm.oneTransLate();
               clearTimeout(vm.timer);
             }, 800);
           },
@@ -99,16 +99,17 @@ export default {
       return this.$refs.mySwiper.swiper;
     }
   },
-  mounted() {
+  mounted() {},
+  destroyed() {
+    clearTimeout(this.timer);
+  },
+  methods: {
+    oneTransLate() {
       if (!this.isLoop) {
         const [fristItem] = this.avatorData;
         this.$emit('animation-event-end', { src: fristItem.avatar, name: fristItem.name });
       }
     },
-  destroyed() {
-    clearTimeout(this.timer);
-  },
-  methods: {
     getAvatorItem(ele) {
       return {
         src: ele.data('src'),

src/views/goodsDetail/index.vue

@@ -21,7 +21,11 @@
           </template>
         </cr-swipe>
         <div class="goods-swipe-avator">
-          <swipe-customer-info v-model="avatorInfo.showInfo" :avatar="avatorInfo.src" />
+          <swipe-customer-info
+            v-model="avatorInfo.showInfo"
+            :avatar="avatorInfo.src"
+            :name="avatorInfo.name"
+          />
         </div>
       </div>
       <div class="goods-group-buy-info">

src/views/goodsDetail/smallPic.vue

@@ -9,6 +9,7 @@
           <swipe-customer-info
             v-model="avatorInfo.showInfo"
             :avatar="avatorInfo.src"
+            :name="avatorInfo.name"
             direction="right"
           />
         </div>

src/views/goodsList/index.vue

@@ -312,11 +312,11 @@ async function getActivityList(urlQuery, next) {
     t = await computedTemplate(t);
     t.groupBuyUserInfoList = (t.groupBuyUserInfoList || []).reverse();
     // t.groupBuyUserInfoList = [
-    //   { avatar: 'https://avatar.q-gp.com/14612340001/ee8991d0-1d38-11ec-b6f6-bf45b18f0626' }
-    //   // {
-    //   //   avatar:
-    //   //     'https://thirdwx.qlogo.cn/mmopen/vi_32/LF7hK1yuMnxUAnx4YmjPyJCn0WqwVMplgTnDSBwwOib5uHP9fQazPf7xRXCUNEfI8sicf7boaCNoD2NUss2k7jFg/132'
-    //   // }
+    //   { avatar: 'https://avatar.q-gp.com/14612340001/ee8991d0-1d38-11ec-b6f6-bf45b18f0626' },
+    //   {
+    //     avatar:
+    //       'https://thirdwx.qlogo.cn/mmopen/vi_32/LF7hK1yuMnxUAnx4YmjPyJCn0WqwVMplgTnDSBwwOib5uHP9fQazPf7xRXCUNEfI8sicf7boaCNoD2NUss2k7jFg/132'
+    //   }
     // ];
     // store.dispatch('save_openlink_host', t.openLink);
     store.commit('CHANGE_TITLE', t.title || '活动页');