feat:配置h5跳转小程序

src/components/avatorSwiper_beisir.vue

+<template>
+  <div class="avator-swiper">
+    <swiper
+      ref="mySwiper"
+      :options="swiperOptions"
+      class="avator-swiper_container"
+      @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 | Img2Thumb" />
+        </div>
+      </swiper-slide>
+    </swiper>
+  </div>
+</template>
+<script>
+import { swiper, swiperSlide } from 'vue-awesome-swiper';
+import 'swiper/dist/css/swiper.css';
+import Img2Thumb from '@/filters/img2Thumb.filter';
+export default {
+  name: 'AvatorSwiper',
+  components: {
+    swiper,
+    swiperSlide
+  },
+  filters: {
+    Img2Thumb
+  },
+  props: {
+    avatorData: {
+      type: Array,
+      default() {
+        return [];
+      }
+    }
+  },
+  data() {
+    const vm = this;
+    return {
+      activeIndex: 0,
+      swiperOptions: {
+        loop: true,
+        initialSlide: 0,
+        slidesPerView: 9,
+        spaceBetween: 4,
+        speed: 900,
+        centeredSlides: true,
+        watchSlidesProgress: true,
+        allowTouchMove: false,
+        autoplay: false,
+
+        on: {
+          init: function() {
+            const slideLeft = this.slides.eq(this.activeIndex);
+            console.log(slideLeft);
+            // slideLeft.addClass('ani-left');
+          },
+          // transitionStart: function() {
+          //   const activeIndex = this.activeIndex;
+          //   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');
+          //   slideRight.addClass('ani-right');
+          // },
+          transitionEnd: function() {
+            console.log('结束');
+            vm.$emit('customers-end', vm.avatorItem);
+            //   // for (let i = 0; i < this.slides.length; i++) {
+            //   //   let slide = this.slides.eq(i);
+            //   //   slide.removeClass('ani-left ani-right');
+            //   // }
+            const slides = this.slides;
+            for (let i = 0; i < slides.length; i++) {
+              const slide = slides.eq(i);
+              const progress = slides[i].progress;
+              slide.css('opacity', 1 - Math.abs(progress) / 9);
+              slide.css('transform', `scale(${1 - Math.abs(progress) / 17}`);
+            }
+          }
+        }
+      }
+    };
+  },
+  computed: {
+    swiper() {
+      return this.$refs.mySwiper.swiper;
+    }
+  },
+  mounted() {
+    // this.onSlidePrevChange();
+  },
+  beforeDestroy() {
+    clearInterval(this.timer);
+    // this.onSlidePrevChange();
+  },
+  methods: {
+    setTranslate() {
+      const slides = this.swiper.slides;
+      for (let i = 0; i < slides.length; i++) {
+        const slide = slides.eq(i);
+        const progress = slides[i].progress;
+        slide.css('opacity', 1 - Math.abs(progress) / 9);
+        slide.css('transform', `scale(${1 - Math.abs(progress) / 17}`);
+      }
+    },
+
+    onSlidePrevChange() {
+      this.timer && clearInterval(this.timer);
+      this.timer = setInterval(() => {
+        this.$emit('customers-start');
+        this.swiper.slideNext();
+      }, 5000);
+    },
+    getAvatorItem(ele) {
+      return {
+        src: ele.data('src'),
+        name: ele.data('name')
+      };
+    }
+  }
+  // methods: {
+  //   slideChange() {
+  //     this.activeIndex = this.swiper.realIndex;
+  //   },
+
+  // }
+};
+</script>
+<style lang="less">
+.avator-swiper {
+  width: 100%;
+  margin: 0 auto !important;
+  &_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/components/groupShare.vue

@@ -158,6 +158,13 @@ export default {
       if (isWxMp) {
         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}`;
+      }
       return linkPath;
     },
     shareOpenWechat() {

src/components/groupSwiper.vue

@@ -51,7 +51,7 @@ export default {
         autoplay: false,
         on: {
           init: function() {
-            const slideLeft = this.slides.eq(this.activeIndex - 3);
+            const slideLeft = this.slides.eq(this.activeIndex);
             slideLeft.addClass('ani-left');
           },
           transitionStart: function() {

src/views/goodsDetail/smallPic copy.vue

+<template>
+  <div v-if="Object.keys(detailInfo).length > 0" class="goods" style="height: 100%">
+    <!-- 主体 -->
+    <div class="goods-container">
+      <div class="goods-red-bg" />
+      <div class="goods-group-buy-head-content">
+        <div class="goods-group-buy-head-content-desc">超值0元购，正在拼团中</div>
+        <div class="goods-group-buy-head-content-swipe">
+          <swipe-customer-info v-model="showInfo" direction="right" />
+        </div>
+      </div>
+      <div class="goods-product-info">
+        <div class="goods-product-info-img">
+          <span
+            v-if="detailInfo.groupBuyInfo && detailInfo.groupBuyInfo.groupBuyLimitUserCount"
+            class="goods-product-info-tag"
+            >{{ detailInfo.groupBuyInfo.groupBuyLimitUserCount }}人团</span
+          >
+          <cr-image
+            class="goods-product-info-img-img-box"
+            width=""
+            height=""
+            :src="detailInfo.thumbImageUrl"
+          />
+        </div>
+        <div class="goods-product-info-desc">
+          <div class="goods-product-info-desc-part1">
+            <div class="goods-product-info-desc-title">
+              {{ detailInfo.goodsName }}
+            </div>
+            <div class="goods-product-info-desc-progress">
+              <cr-progress
+                class="group-item-progress"
+                stroke-width="5"
+                color="#EC1500"
+                track-color="#F7F8F9"
+                :show-pivot="false"
+                :percentage="stockPercentage"
+              />
+            </div>
+            <div class="goods-product-info-desc-num">
+              已拼{{ detailInfo.groupBuyInfo ? detailInfo.groupBuyInfo.groupBuySuccessCount : 0 }}团
+            </div>
+          </div>
+          <div class="goods-product-info-desc-price">
+            <div class="goods-product-info-desc-price-group">
+              成团价 ¥<span class="actualPrice">0</span>
+            </div>
+            <div class="goods-product-info-desc-price-market">
+              售价¥{{ detailInfo.activityPrice }}
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="goods-group-info">
+        <div class="goods-group-info-status">
+          <cr-image
+            v-if="detailInfo.groupBuyInfo.groupBuyStatus == 2"
+            width="80"
+            src="../../assets/images/success.png"
+          />
+          <cr-image
+            v-if="detailInfo.groupBuyInfo.groupBuyStatus == 3"
+            width="80"
+            src="../../assets/images/defeat.png"
+          />
+        </div>
+        <avatorGroup :group-info="detailInfo.groupBuyInfo || {}" />
+        <group-desc-info
+          :group-info="detailInfo.groupBuyInfo || {}"
+          :timestemp="groupTimestemp"
+          :show-button-group="true"
+          @changeButtonVisible="changeButtonVisible"
+          @share="setShareData"
+        />
+        <successInfo :group-info="detailInfo.groupBuyInfo || {}" />
+        <cr-divider
+          hairline
+          :style="{
+            borderColor: '#ECECEC'
+          }"
+        />
+        <rules :group-info="detailInfo.groupBuyInfo || {}" />
+      </div>
+      <span v-if="detailImgList.length" id="goodDetail" class="goods-divider">宝贝详情</span>
+      <div class="goods-detail-imgs">
+        <cr-image
+          v-for="(item, index) in detailImgList"
+          :key="index"
+          lazy-load
+          width=""
+          height=""
+          style="width: 100%; height: auto; display: block"
+          :src="item"
+        />
+      </div>
+    </div>
+    <bottom-nav v-if="showButtonNav" :status="2" :disabled="false" @share="setShareData" />
+  </div>
+</template>
+<script>
+import goods from '@/api/groupBuy';
+import bottomNav from './components/bottomNav';
+import swipeCustomerInfo from '@/components/swipeCustomerInfo';
+import avatorGroup from '@/components/avatorGroup';
+import successInfo from '@/components/groupBuySuccessInfo';
+import rules from '@/components/rules';
+import groupDescInfo from './components/groupDescInfo';
+import localStorage from '@/service/localStorage.service';
+import { EventBus } from '@/service/utils.service';
+// import sharePic from '@/components/sharePic';
+import config from '@/config';
+export default {
+  // eslint-disable-next-line vue/name-property-casing
+  name: 'goodDetail',
+  components: {
+    bottomNav,
+    swipeCustomerInfo,
+    avatorGroup,
+    successInfo,
+    rules,
+    groupDescInfo
+    // sharePic
+  },
+  data() {
+    return {
+      groupTimestemp: '', // 小团结束时间
+      showInfo: false,
+      countDownText: '',
+      stockPercentage: 0,
+      shareInfo: {}, // 调用分享需要的参数
+      picUrl: '', // 海报url
+      // 以下是原有的data
+      detailParam: {
+        skuNo: '',
+        receiverId: '',
+        count: 1
+      },
+      customers: {},
+      detailInfo: {},
+      imgList: [],
+      detailImgList: [], // 商品详情图像展示
+      name: {},
+      showButtonNav: false // 是否显示底部按钮
+    };
+  },
+  created() {
+    console.log(config.localHost);
+    this.detailParam = { ...this.$route.query };
+    localStorage.set('templateId', this.detailParam.templateId); // 设置活动模板id，用于下单
+    if (this.detailParam.groupBuyGroupId) {
+      localStorage.set('groupBuyGroupId', this.detailParam.groupBuyGroupId); // 设置groupBuyGroupId，用于下单
+      this.groupId = +this.detailParam.groupBuyGroupId;
+    } else {
+      localStorage.remove('groupBuyGroupId');
+      this.groupId = 0;
+    }
+    this.name = this.$route.params;
+    this.imgList = [this.name.goodsimg];
+    this.init(this.detailParam);
+  },
+  mounted() {
+    EventBus.$on('');
+
+    // todo 曝光埋点
+    setTimeout(() => {
+      this.showInfo = true;
+    }, 3000);
+    setTimeout(() => {
+      this.showInfo = false;
+    }, 5000);
+  },
+  methods: {
+    setShareData() {
+      const avatorList = [];
+      if (this.detailInfo.groupBuyInfo.groupBuyValidUserInfoList) {
+        this.detailInfo.groupBuyInfo.groupBuyValidUserInfoList.map(v => {
+          avatorList.push(v.avatar);
+        });
+      }
+      const sharePicData = {
+        groupBuySuccessGuys: this.detailInfo?.groupBuyInfo.groupBuySuccessPersonCount,
+        salePrice: this.detailInfo.price, // y
+        groupBuyGroupId: this.groupId,
+        goodsSpecialId: this.detailParam.goodsSpecialId,
+        openGroupCnt: this.detailInfo?.groupBuyInfo.groupBuyLimitUserCount,
+        templateId: this.detailParam.templateId,
+        templateDetailId: this.detailParam.templateDetailId,
+        needGuys: this.detailInfo?.groupBuyInfo.groupBuyNeedUserCount,
+        skuName: this.detailInfo.goodsName, // y
+        activityId: this.detailParam.activityId,
+        skuImg: this.detailInfo.thumbImageUrl, // y,
+        activityPrice: this.detailInfo.activityPrice, // y
+        skuNo: this.detailParam.skuNo,
+        peoplePhotoList: avatorList,
+        endTime: this.detailInfo?.groupBuyInfo.currentGroupEndTime || this.detailInfo?.endTime || ''
+      };
+      EventBus.$emit('goods_share_info', {
+        shareInfo: sharePicData,
+        type: 2
+      });
+    },
+    changeButtonVisible(res) {
+      this.showButtonNav = res;
+    },
+    async init(detailParam) {
+      const [res] = await goods.detailInfo(detailParam);
+      if (res.groupBuyInfo.groupId) {
+        localStorage.set('groupBuyGroupId', res.groupBuyInfo.groupId || ''); // 设置groupBuyGroupId，用于下单
+        this.groupId = +res.groupBuyInfo.groupId || '';
+      }
+      if (res.saleCount && res.activitySkuTotalCount) {
+        const percentage = +res.saleCount / +res.activitySkuTotalCount;
+        if (isNaN(percentage)) {
+          this.stockPercentage = 0;
+        } else {
+          this.stockPercentage = Math.floor(percentage) >= 1 ? 100 : Math.floor(percentage * 100);
+        }
+        console.log(this.stockPercentage);
+      }
+      this.imgList = res.imageUrl || [];
+      this.detailInfo = res;
+      this.setStartStatus(res);
+      try {
+        const detailImages = await goods.getDetailPic(this.detailInfo.contentDetailUrl);
+        // const imgReg = new RegExp('(?<=src=").[^"]*', 'g');
+        // this.detailImgList = (detailImages || '').match(imgReg);
+        let imgReg = /<img.*?(?:>|\/>)/gi;
+        // eslint-disable-next-line no-useless-escape
+        let srcReg = /src=[\'"]?([^\'"]*)[\'"]?/i;
+        let arr = (detailImages || '').match(imgReg);
+        let srcArr = [];
+        for (let i = 0; i < arr.length; i++) {
+          let src = arr[i].match(srcReg)[1].replace('http://', 'https://');
+          srcArr.push(src);
+        }
+        this.detailImgList = srcArr;
+      } catch (error) {
+        console.error(error);
+      }
+    },
+    setStartStatus(data) {
+      const currentTime = new Date(data.currentTime.replace(/\-/g, '/')).getTime();
+      const activityStartTime = new Date(data.startTime.replace(/\-/g, '/')).getTime();
+      const activityEndTime = new Date(data.endTime.replace(/\-/g, '/')).getTime();
+      this.groupTimestemp = data.groupBuyInfo.currentGroupEndTime
+        ? new Date(data.groupBuyInfo.currentGroupEndTime.replace(/\-/g, '/')).getTime()
+        : -1;
+      if (currentTime <= activityStartTime) {
+        // 当前时间小于活动开始时间
+        this.countDownText = '距活动开始时间';
+        return;
+      }
+      if (currentTime >= activityEndTime) {
+        this.countDownText = '活动已结束';
+        return;
+      }
+      if (currentTime > activityStartTime && currentTime < activityEndTime) {
+        this.countDownText = '距活动结束';
+        return;
+      }
+    }
+  }
+};
+</script>
+<style lang="less" src="./smallPic.less" scoped></style>

src/views/orderList/components/List.vue

@@ -60,8 +60,11 @@
               查看订单
             </cr-button>
             <!-- 支付中按钮跳转支付页面 -->
+            <!-- v-if="item.openGroupStatus === 0 && item.payStatus === '0'" -->
             <cr-button
-              v-if="item.openGroupStatus === 0 && item.payStatus === '0'"
+              v-if="
+                (item.openGroupStatus == 0 || item.openGroupStatus == 1) && item.payStatus == '0'
+              "
               size="small"
               plain
               type="primary"
@@ -145,7 +148,7 @@ export default {
         3: {
           class: 'Ol__head-fail',
           message: '拼团失败',
-          footTxt: '退款将原路返还，请注意帐户变动'
+          footTxt: '如已支付，退款将原路返还，请注意帐户变动'
         }
       }
     };