feat:图片剧中

src/App.vue

@@ -23,10 +23,6 @@ import { isApp, isWxMp, isWechat } from '@/service/validation.service';
 import store from '@/store';
 import Weapp from '@/components/weapp';
 import goodsShare from '@/components/groupShare';
-// import qs from 'qs';
-// console.log(
-//   `pages/groupbuy/webview?url=${encodeURIComponent(JSON.stringify(window.location.href))}`
-// );
 export default {
   name: 'App',
   components: {

src/components/avatorSwiper.vue

 <template>
-  <div class="avator-swiper">
+  <div class="avator-swiper" :class="{ 'swiper-disabled': !isLoop }">
     <div v-if="isLoop" class="avator_left avator-swiper_item" :class="{ 'ani-left': isAddClass }">
       <img :src="leftImgPath" />
     </div>
@@ -7,18 +7,17 @@
       <swiper-slide
         v-for="(item, index) in avatorData"
         :key="index"
-        :data-src="item.avatar"
+        :data-src="item.avatar || defaultImg"
         :data-name="item.name"
         class="avator-swiper_item"
       >
-        <div class="avator-swiper_item">
-          <img :src="item.avatar | Img2Thumb" />
-        </div>
+        <img :src="(item.avatar || defaultImg) | Img2Thumb" />
       </swiper-slide>
     </swiper>
     <div v-if="isLoop" class="avator_right avator-swiper_item" :class="{ 'ani-right': isAddClass }">
       <img :src="rightImgPath" />
     </div>
+    <span class="avator-swiper-bg" :style="{ backgroundColor: bgColor }">&nbsp;</span>
   </div>
 </template>
 <script>
@@ -53,14 +52,16 @@ export default {
       isAddClass: false,
       rightImgPath: '',
       leftImgPath: '',
+      avatorItem: null,
+      defaultImg: 'https://himg.bdimg.com/sys/portraitn/item/19e96973556e646566696e6564d8bcc080',
       swiperOptions: {
         loop: isLoop,
         initialSlide: 0,
         slidesPerView: 9,
-        spaceBetween: 4,
-        cssMode: true,
+        // spaceBetween: 4,
+        // cssMode: true,
         speed: 800,
-        centeredSlides: true,
+        centeredSlides: isLoop,
         centeredSlidesBounds: true,
         allowTouchMove: false,
         autoplay,
@@ -80,9 +81,7 @@ export default {
             vm.isAddClass = true;
             clearTimeout(vm.timer);
             vm.timer = setTimeout(() => {
-              isLoop
-                ? vm.$store.dispatch('goods_avator_info', { ...vm.avatorItem, showInfo: true })
-                : vm.oneTransLate();
+              vm.$store.dispatch('goods_avator_info', { ...vm.avatorItem, showInfo: true });
               clearTimeout(vm.timer);
             }, 800);
           },
@@ -102,19 +101,21 @@ export default {
       return this.$refs.mySwiper.swiper;
     }
   },
-  mounted() {},
+  mounted() {
+    if (!this.isLoop) {
+      this.oneTransLate();
+    }
+  },
   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;
@@ -159,22 +160,28 @@ export default {
   animation: bigToSamll 0.8s linear;
 }
 .ani-right {
-  transform-origin: center;
+  transform-origin: left;
   animation: samllToBig 0.8s linear;
 }
+.avator-swiper-bg {
+  width: 4px;
+  height: 24px;
+  position: absolute;
+  top: 0;
+  right: -2px;
+  z-index: 2;
+  background-color: #f7f8f9;
+}
 .ani-opt {
   opacity: 0;
-  transition: 0.1s linear;
 }
 .avator_left,
 .avator_right {
-  backface-visibility: hidden;
-  perspective: 1000;
   position: absolute;
   top: 0;
 }
 .avator_right {
-  right: 0px;
+  right: 4px;
 }
 .avator_left {
   left: 0px;
@@ -182,41 +189,45 @@ export default {
 
 .avator-swiper {
   position: relative;
-  width: 262px;
+  width: 261px;
   margin: 0 auto;
   &_item {
-    height: 32px;
+    height: 25px;
     width: 25px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    transition: transform 0 0.2s linear;
+    box-sizing: border-box;
+    // display: flex;
+    // align-items: center;
+    // justify-content: center;
     // transform: scale(1);
     // transition: transform 0 0.2s linear;
     img {
+      display: block;
       height: 25px;
       width: 25px;
       border-radius: 50%;
+      box-sizing: border-box;
     }
   }
 }
 
-.swiper-slide {
-  text-align: center;
+// .swiper-slide {
+//   text-align: center;
 
-  /* Center slide text vertically */
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: -webkit-flex;
-  display: flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  -webkit-align-items: center;
-  align-items: center;
-}
+//   /* Center slide text vertically */
+//   display: -webkit-box;
+//   display: -ms-flexbox;
+//   display: -webkit-flex;
+//   display: flex;
+//   -webkit-box-pack: center;
+//   -ms-flex-pack: center;
+//   -webkit-justify-content: center;
+//   justify-content: center;
+//   -webkit-box-align: center;
+//   -ms-flex-align: center;
+//   -webkit-align-items: center;
+//   align-items: center;
+// }
 // .avator-swiper_container {
 //   .swiper-slide-active {
 //     transform: scale(1.2);
@@ -232,4 +243,11 @@ export default {
 //     transform: scale(0.8);
 //   }
 // }
+
+.swiper-disabled {
+  @{deep} .swiper-wrapper {
+    display: flex;
+    justify-content: center;
+  }
+}
 </style>

src/components/groupBuySuccessInfo.vue

@@ -39,7 +39,6 @@ export default {
 <style lang="less" scoped>
 .success-info {
   .text-14();
-  width: 327px;
   color: @black;
   text-align: center;
   height: 90px;

src/components/groupShare.vue

@@ -164,13 +164,13 @@ export default {
         return `/pages/groupbuy/webview?url=${encodeURIComponent(JSON.stringify(linkPath))}`;
       }
       // // 本地测试时走的逻辑
-      // if (isApp) {
-      //   const linkPrve = `https://mall.q-gp.com/common/launch?wxapp=gh_e1d790d67513&jumpUrl=${encodeURIComponent(
-      //     'pages/groupbuy/webview'
-      //   )}&terminal=1`;
-      //   const linkParams = encodeURIComponent(JSON.stringify({ url: linkPath }));
-      //   return `${linkPrve}&extraInfo=${linkParams}`;
-      // }
+      if (isApp) {
+        const linkPrve = `https://mall.q-gp.com/common/launch?wxapp=gh_e1d790d67513&jumpUrl=${encodeURIComponent(
+          'pages/groupbuy/webview'
+        )}&terminal=1`;
+        const linkParams = encodeURIComponent(JSON.stringify({ url: linkPath }));
+        return `${linkPrve}&extraInfo=${linkParams}`;
+      }
       return linkPath;
     },
     shareOpenWechat() {

src/components/groupSwiper.vue

 <template>
-  <div class="avator-swiper">
+  <div class="avator-swiper" :class="{ 'swiper-disabled': !isLoop }">
     <div v-if="isLoop" class="avator_left avator-swiper_item" :class="{ anileft: isAnimate }">
       <img :src="leftImgPath" />
     </div>
@@ -8,10 +8,10 @@
         v-for="(item, index) in avatorData"
         :key="index"
         :data-name="item.name"
-        :data-src="item.avatar"
+        :data-src="item.avatar || defaultImg"
         class="avator-swiper_item"
       >
-        <img :src="item.avatar" />
+        <img :src="item.avatar || defaultImg" />
       </swiper-slide>
     </swiper>
     <div v-if="isLoop" class="avator_right avator-swiper_item">
@@ -53,6 +53,7 @@ export default {
       leftImgPath: '',
       rightImgPath: '',
       avatorItem: null,
+      defaultImg: 'https://himg.bdimg.com/sys/portraitn/item/19e96973556e646566696e6564d8bcc080',
       swiperOptions: {
         loop: isLoop,
         initialSlide: 0,
@@ -60,7 +61,7 @@ export default {
         // spaceBetween: 8,
         // cssMode: true,
         speed: 600,
-        centeredSlides: true,
+        centeredSlides: isLoop,
         centeredSlidesBounds: true,
         allowTouchMove: false,
         autoplay,
@@ -80,7 +81,7 @@ export default {
             slideRight.addClass('ani-opt');
             clearTimeout(vm.timer);
             vm.timer = setTimeout(() => {
-              isLoop ? vm.$emit('animation-event-end', vm.avatorItem) : vm.oneTransLate();
+              vm.$emit('animation-event-end', vm.avatorItem);
               clearTimeout(vm.timer);
             }, 800);
           },
@@ -100,16 +101,18 @@ export default {
       return this.$refs.mySwiper.swiper;
     }
   },
-  mounted() {},
+  mounted() {
+    if (!this.isLoop) {
+      this.oneTransLate();
+    }
+  },
   destroyed() {
     clearTimeout(this.timer);
   },
   methods: {
     oneTransLate() {
-      if (!this.isLoop) {
       const [fristItem] = this.avatorData;
       this.$emit('animation-event-end', { src: fristItem.avatar, name: fristItem.name });
-      }
     },
     getAvatorItem(ele) {
       return {
@@ -163,6 +166,7 @@ export default {
   position: relative;
   width: 100%;
   height: 24px;
+  margin-right: -15px;
   &_container {
     transition-timing-function: linear;
   }
@@ -181,4 +185,10 @@ export default {
     }
   }
 }
+.swiper-disabled {
+  @{deep} .swiper-wrapper {
+    display: flex;
+    justify-content: right;
+  }
+}
 </style>

src/views/goodsList/index.less

 .group {
   font-size: @font-size-14;
+  // height: 100%;
   position: relative;
   &-top {
     height: 375px;