feat:修改头像

src/components/avatorSwiper.vue

 <template>
   <div class="avator-swiper">
-    <div
-      v-if="avatorData.length"
-      ref="refLeft"
-      :class="{ 'ani-left': isAddClass }"
-      class="avator-swiper_left"
-    >
+    <div v-if="isLoop" ref="refLeft" :class="{ 'ani-left': isAddClass }" class="avator-swiper_left">
       <cr-image class="avator-swiper_small" :src="leftImgPath" />
     </div>
-    <swiper
-      ref="mySwiper"
-      :options="swiperOptions"
-      class="avator-swiper_container"
-      @set-translate="setTranslate"
-    >
+    <swiper ref="mySwiper" :options="swiperOptions" class="avator-swiper_container">
       <swiper-slide
         v-for="(item, index) in avatorData"
         :key="index"
         :data-src="item"
         :data-name="item"
         class="avator-swiper_item"
+        @set-translate="setTranslate"
       >
         <div class="avator-swiper_item">
           <img :src="item | Img2Thumb" />
@@ -27,7 +18,7 @@
       </swiper-slide>
     </swiper>
     <div
-      v-if="avatorData.length"
+      v-if="isLoop"
       ref="refRight"
       :class="{ 'ani-right': isAddClass }"
       class="avator-swiper_right"
@@ -59,24 +50,23 @@ export default {
   },
   data() {
     const vm = this;
-
+    const isLoop = vm.avatorData.length < 9 ? false : true;
+    const autoplay = isLoop ? { delay: 5000 } : false;
     return {
+      isLoop,
       isAddClass: false,
-      activeIndex: 0,
       rightImgPath: '',
       leftImgPath: '',
       swiperOptions: {
-        loop: true,
+        loop: isLoop,
         initialSlide: 0,
         slidesPerView: 9,
         spaceBetween: 4,
         speed: 900,
-        centeredSlides: true,
-        watchSlidesProgress: true,
+        centeredSlides: isLoop,
+        watchSlidesProgress: false,
         allowTouchMove: false,
-        autoplay: {
-          delay: 5000
-        },
+        autoplay,
         on: {
           transitionStart: function() {
             const activeIndex = this.activeIndex;

src/components/groupSwiper.vue

@@ -38,7 +38,8 @@ export default {
   },
   data() {
     const vm = this;
-    const isLoop = vm.avatorData.length < 4 ? false : true;
+    const isLoop = vm.avatorData.length < 7 ? false : true;
+    const autoplay = isLoop ? { delay: 5000, reverseDirection: true } : false;
     return {
       isLoop,
       isAnimate: false,
@@ -46,25 +47,22 @@ export default {
       rightImgPath: '',
       avatorItem: null,
       swiperOptions: {
-        loop: isLoop,
+        loop: true,
         initialSlide: 0,
         slidesPerView: 7,
         spaceBetween: 4,
         speed: 1700,
-        centeredSlides: false,
+        centeredSlides: true,
         allowTouchMove: false,
-        autoplay: {
-          delay: 5000,
-          reverseDirection: true
-        },
+        autoplay,
         on: {
           slideChangeTransitionStart: function() {
             vm.$emit('animation-event-start');
           },
           transitionStart: function() {
             const activeIndex = this.activeIndex,
-              slideLeft = this.slides.eq(activeIndex),
-              slideRight = this.slides.eq(activeIndex + 7);
+              slideLeft = this.slides.eq(activeIndex - 3),
+              slideRight = this.slides.eq(activeIndex + 4);
             vm.avatorItem = vm.getAvatorItem(slideLeft);
             vm.isAnimate = true;
             vm.rightImgPath = slideRight.data('src');
@@ -92,6 +90,12 @@ export default {
       return this.$refs.mySwiper.swiper;
     }
   },
+  mounted() {
+    if (!this.isLoop) {
+      const [fristItem] = this.avatorData;
+      this.$emit('animation-event-end', { src: fristItem.avatar, name: fristItem.name });
+    }
+  },
   methods: {
     getAvatorItem(ele) {
       return {

src/store/module.js

@@ -10,6 +10,7 @@ const state = {
   isPrimordialBrowser: false, // 是否是原生浏览器
   isWeixinBrowser: false, // 是否是微信浏览器
   showShare: false, // 是否打开底部分享showShare
+  openLink: '', // 分享中专业链接
   shareInfo: {}, // 分享信息
   avatorInfo: {} // 详情页面头像滚动
 };
@@ -42,6 +43,9 @@ const actions = {
   },
   goods_avator_info({ commit }, info) {
     commit(types.GOODS_AVATOR_INFO, info);
+  },
+  save_openlink_host({ commit }, host) {
+    commit(types.SAVE_LINK_HOST, host);
   }
 };
 
@@ -114,6 +118,9 @@ const mutations = {
   },
   [types.GOODS_AVATOR_INFO](state, info) {
     state.avatorInfo = info;
+  },
+  [types.SAVE_LINK_HOST](state, host) {
+    state.openLink = host;
   }
 };
 

src/store/type.js

@@ -8,3 +8,4 @@ export const ADD_KEEP_ALIVE = 'ADD_KEEP_ALIVE';
 export const DEL_KEEP_ALIVE = 'DEL_KEEP_ALIVE';
 export const CLEAR_KEEP_ALIVE = 'CLEAR_KEEP_ALIVE';
 export const GOODS_AVATOR_INFO = 'GOODS_AVATOR_INFO';
+export const SAVE_LINK_HOST = 'SAVE_LINK_HOST';

src/views/goodsList/index.less

@@ -13,6 +13,8 @@
     background-image: linear-gradient(180deg, #ffd545 0%, #ffcc79 100%);
     border-radius: 16px 0 0 16px;
     padding: 6px 12px 6px 16px;
+
+    // padding: 12px 24px 12px 32px;  // 线上使用背景遮罩层
   }
   &-share {
     display: flex;

src/views/goodsList/index.vue

 <template>
   <!-- 配置活动背景色 -->
   <div class="group" :style="{ backgroundColor: goodsTemp.bgcolor }">
-    <div v-if="!isShowShare" class="group-puzzle" @click="goToMyorder">我的拼团</div>
+    <!-- v-if="!isShowShare" -->
+    <div class="group-puzzle" @click="goToMyorder">我的拼团</div>
     <!-- 配置头部动态信息 start -->
     <div class="group-top">
       <!-- 动态活动背景图 -->
@@ -312,12 +313,13 @@ 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 || '活动页');
     nextFns(vm => {
       topicIndex = 0;