'feat:配合二期百人团做分享落地页'

src/router/groupBuyShare.js

+module.exports = [
+  {
+    path: '/groupBuyShare/goodDetail',
+    name: 'groupBuyShareGoodDetail',
+    component: () => import('../views/goodsDetailShare/index.vue'),
+    meta: { title: '组团0元购' }
+  }
+];

src/router/routes.js

 const groupBuy = require('./groupBuy');
+const groupBuyShare = require('./groupBuyShare');
 export default [
   {
     path: '/',
     redirect: '/error'
   },
   ...groupBuy,
+  ...groupBuyShare,
   {
     path: '/error',
     name: 'error',

src/store/module.js

@@ -97,7 +97,7 @@ const mutations = {
   },
   [types.CHANGE_SHOW_MINI_APP_GUIDE](state, { bool, pointer }) {
     state.isPrimordialBrowser = bool;
-    if (bool) {
+    if (!bool) {
       // 需要取反
       // 如果非app webview并且非小程序webview，直接拦截提示，到小程序操作
       // paramsParentheses(window.location.href);

src/views/goodsDetailShare/components/detailInfo.vue

+<template>
+  <div class="goods-detail">
+    <div class="goods-detail-info">
+      <div class="Gd-info-title">产品信息</div>
+      <div v-for="(item, index) in skuDetailList" :key="index" class="Gd-info-content">
+        <span>{{ item.attsName }}</span>
+        <span>{{ item.attsValue }}</span>
+      </div>
+      <!-- todo 产品信息不全，需要处理 -->
+      <!-- <div v-if="skuDetailList.length" class="Gd-info-all" @click="goInfo">
+        <span>查看全部</span>
+        <span class="iconfont icon-arrow" />
+      </div> -->
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    skuDetailList: {
+      type: Array,
+      default: () => []
+    },
+    skuDetailAtts: {
+      type: Array,
+      default: () => []
+    }
+  },
+  methods: {
+    goInfo() {
+      this.$router.push({
+        name: 'info',
+        params: { data: this.skuDetailAtts }
+      });
+    }
+  }
+};
+</script>
+<style lang="less" scoped>
+.goods-detail {
+  background: @white;
+  padding: 0 @padding-sm - 2;
+  margin-bottom: @padding-sm - 4;
+  &-imgs {
+    width: 100%;
+  }
+  &-info {
+    .Gd-info-title {
+      padding: @padding-sm + 4 0 @padding-unit;
+      .text-18();
+      color: @black;
+      font-weight: bold;
+    }
+    .Gd-info-content {
+      display: flex;
+      padding: @padding-unit + 4 0 @padding-sm;
+      span {
+        .text-12();
+        &:first-child {
+          width: 62px;
+          margin-right: @padding-xl - 4;
+          color: @gray-4;
+        }
+        &:last-child {
+          flex: 1;
+          color: @gray-5;
+        }
+      }
+    }
+    .Gd-info-all {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: @padding-unit + 4 0 @padding-sm;
+      width: 100%;
+      .text-12();
+      color: @gray-5;
+      span {
+        &:first-child {
+          margin-right: @padding-x;
+        }
+        &:last-child {
+          .text-12();
+          color: @gray-4;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/goodsDetailShare/components/goodsCell.vue

+<template>
+  <div class="cell">
+    <div class="cell-left">
+      <span class="cell-left-title">{{ title }}</span>
+      <div class="cell-left-content" :class="{ wrap: wrap }">
+        <slot>{{ content }}</slot>
+      </div>
+    </div>
+    <span v-if="!noArrows" class="cell-right iconfont icon-arrow" />
+  </div>
+</template>
+<script>
+export default {
+  name: 'GoodsCell',
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    content: {
+      type: String,
+      default: ''
+    },
+    wrap: {
+      type: Boolean,
+      default: false
+    },
+    noArrows: {
+      type: Boolean,
+      default: false
+    }
+  }
+};
+</script>
+<style lang="less" scoped>
+.cell {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 35px;
+  background: #fff;
+  &-left {
+    display: flex;
+    align-items: center;
+    .text-13();
+    &-title {
+      color: @gray-4;
+    }
+    &-content {
+      display: flex;
+      flex-wrap: nowrap;
+      align-items: center;
+      color: @black;
+      margin-left: 10px;
+      // max-width: 550px;
+      &.wrap {
+        flex-wrap: wrap;
+      }
+    }
+  }
+  &-right {
+    color: @gray-3;
+    .text-12();
+  }
+}
+</style>

src/views/goodsDetailShare/components/groupDescInfo.vue

+<template>
+  <div class="group-info-desc">
+    <div class="desc-item">
+      <template v-if="groupInfo.groupBuyStatus == 1">
+        <!-- 拼团中状态 -->
+        <template v-if="!groupInfo.joinGroup && !groupInfo.canJoinGroupBuyAgain">
+          <!-- 您不符合参与此团的条件 -->
+        </template>
+        <template v-else>
+          <p class="desc inProcess">
+            还差<span>{{ groupInfo.groupBuyNeedUserCount }}人</span>成团，距结束仅剩
+          </p>
+          <countDown v-if="!!timestemp" :block-no-bg="true" :end-time="timestemp" from="desc" />
+        </template>
+      </template>
+      <template v-else>
+        <template v-if="groupInfo.groupBuyStatus != 2">
+          <!-- 拼团非成功状态 -->
+          <p v-if="groupInfo.groupBuyStatus == 3" class="desc">
+            {{ groupInfo.failedReason || statusTextMap[groupInfo.groupBuyStatus] }}
+          </p>
+          <p v-else class="desc">
+            {{ statusTextMap[groupInfo.groupBuyStatus] }}
+          </p>
+        </template>
+        <template v-else>
+          <!-- 拼团成功 -->
+          <p v-if="groupInfo.joinGroup" class="desc">
+            {{ statusTextMap[groupInfo.groupBuyStatus] }}
+          </p>
+          <p v-else class="desc">已成团，自己做团长吧！</p>
+        </template>
+      </template>
+    </div>
+    <div
+      v-if="
+        (groupInfo.groupBuyStatus == 1 || groupInfo.groupBuyStatus == 0) &&
+          groupInfo.groupBuyNeedNewUserCount
+      "
+      class="gourp-rules"
+    >
+      <p>成团条件：{{ groupInfo.groupBuyCondition || '' }}</p>
+      <cr-image src="@/assets/images/flag.png" width="13px" />
+    </div>
+    <div v-if="showButtonGroup" ref="buttonArea" class="button-area">
+      <div v-if="groupInfo.groupBuyStatus == 1" class="shareToButton">
+        <cr-button block shape="circle" type="primary" @click="share">邀请好友</cr-button>
+      </div>
+      <div class="toListButton">
+        <cr-button
+          plain
+          block
+          shape="circle"
+          type="default"
+          class="toOrderList"
+          @click="toOrderList"
+          >查看我的拼团</cr-button
+        >
+        <cr-button plain block shape="circle" type="primary" @click="toList"
+          >返回活动列表</cr-button
+        >
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import countDown from '@/components/countDown';
+import { saTrackEvent } from '@/service/sa.service';
+export default {
+  components: {
+    countDown
+  },
+  props: {
+    showButtonGroup: {
+      type: Boolean,
+      default: false
+    },
+    timestemp: {
+      type: Number,
+      default: 0
+    },
+    groupInfo: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    },
+    skuNo: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      observer: null,
+      statusTextMap: {
+        0: '发起拼团，邀请好友一起拼团吧！',
+        2: '恭喜成团!',
+        3: '哎呀，拼团时间已过，尚未成团！',
+        4: '已发货'
+      }
+    };
+  },
+  mounted() {
+    this.$nextTick(() => {
+      if (this.$refs.buttonArea) {
+        if (IntersectionObserver) {
+          this.observer &&
+            this.observer.unobserve &&
+            this.observer.unobserve(this.$refs.buttonArea);
+          this.observer = new IntersectionObserver(entries => {
+            entries.forEach(item => {
+              if (item.intersectionRatio == 0) {
+                this.$emit('changeButtonVisible', true);
+              } else {
+                this.$emit('changeButtonVisible', false);
+              }
+            });
+          });
+        }
+        this.observer.USE_MUTATION_OBSERVER = false;
+        this.observer.observe(this.$refs.buttonArea);
+      }
+    });
+  },
+  beforeDestroy() {
+    if (this.$refs.buttonArea && this.observer) {
+      this.observer.unobserve(this.$refs.buttonArea);
+    }
+  },
+  methods: {
+    toList() {
+      const { activityId } = this.$route.query || '';
+      if (activityId) {
+        this.$router.push({ name: 'groupBuyList', query: { activityId } });
+      }
+    },
+    toOrderList() {
+      this.$router.push('/orderList/0');
+    },
+    share() {
+      if (this.skuNo) {
+        saTrackEvent('H5_GroupDetailPageInviteFriendsBtnClick', {
+          sku_no: this.skuNo,
+          group_id: this.groupInfo?.groupId || ''
+        });
+      }
+      this.$emit('share');
+    }
+  }
+};
+</script>
+<style lang="less" scoped>
+.desc-item {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 24px;
+  line-height: 24px;
+  margin-bottom: @padding-xs;
+  .desc {
+    text-align: center;
+    height: 100%;
+    line-height: 24px;
+    font-size: 14px;
+    &.inProcess {
+      margin-right: @padding-unit;
+    }
+    span {
+      font-size: 14px;
+      color: @red-dark;
+      margin: 0 @padding-unit;
+    }
+  }
+}
+.gourp-rules {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: @gray-4;
+  .text-12();
+  margin-bottom: @padding-sm;
+}
+.button-area {
+  button {
+    font-size: 16px !important;
+    margin-bottom: @padding-sm;
+  }
+  .toListButton {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    button {
+      width: 48%;
+      &.toOrderList {
+        color: @gray-4;
+      }
+    }
+  }
+}
+</style>