'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>

src/views/goodsDetailShare/index.less

+// @import "../../style/var.less";
+@font-face {
+  font-family: "din";
+  src: url("../../style/DIN.ttf") format("truetype");
+}
+@{deep} .cr-button--default {
+  color: inherit;
+}
+.btn-absolute{
+  position: absolute;
+  bottom: 16px;
+}
+.goods-bottom-buy {
+  margin: 0 auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 335px;
+  height: 40px;
+  .text-14();
+  font-weight: bold;
+  border-radius: @padding-lg;
+  color: @white;
+  background-image: @gradient-red;
+  &.disabled {
+    opacity: 0.7;
+  }
+}
+.goods-popup{
+  height: auto !important;
+}
+// 弹出框头部
+.popup-head{
+  border-radius: 20px 20px 0 0;
+  .popup-title {
+    .text-16();
+    font-weight: @font-weight-bold;
+    color: @black;
+    text-align: center;
+    padding: 10px 0
+  }
+}
+
+
+.goods {
+  &-share-button{
+    width: 44px;
+    height: 44px;
+    position: fixed;
+    right: 10px;
+    bottom: 120px;
+    z-index: 3;
+    /deep/ img {
+      width: 44px;
+      height: 44px;
+    }
+  }
+  &-container {
+      padding-bottom: calc(60px + env(safe-area-inset-bottom));
+      box-sizing: border-box;
+      font-size: 16px;
+      &-lose {
+          &-container {
+              background: #fff;
+              padding: 45px 15px;
+              text-align: center;
+              img {
+                  width: 150px;
+              }
+          }  
+      }
+  }
+  &-carousel {
+    position: relative;
+    width: 100%;
+    height: 375px;
+    overflow: hidden;
+    &-swiper {
+      height: 100%;
+
+      &-item {
+        width: 100%;
+        height: 100%;
+
+        &-img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+    .custom-indicator {
+      position: absolute;
+      right: 10px;
+      bottom: 13px;
+      padding: 2px 5px;
+      font-size: 12px;
+      background-color: #000;
+      opacity: 0.4;
+      color: #fff;
+      border-radius: 10px;
+    }
+  }
+  &-swipe-avator{
+    position: absolute;
+    left: @padding-sm;
+    bottom: @padding-sm;
+  }
+  &-info {
+    padding: @padding-sd @padding-sd 0;
+    background: @white;
+    margin-bottom: @padding-sm - 4;
+    &-name {
+      .text-16();
+      color: @black;
+      font-weight: bold;
+      padding-bottom: @padding-x;
+    }
+  }
+  &-price {
+    position: relative;
+    width: 100%;
+    height: 68px;
+    background-image: linear-gradient(179deg, #FFEADC 0%, #FFD9D9 100%);
+    background-image: linear-gradient(90deg, #FFF6C9 6%, #FFDC8D 88%);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    &-left{
+      width: 222px;
+      height: 68px;
+      position: absolute;
+      padding-left: 12px;
+      left: 0;
+      top: 0;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      .info{
+        margin-bottom: 6px;
+        display: flex;
+        align-items: flex-end;
+        .price{
+          font-size: 14px;
+          font-weight: 600;
+          color: @red;
+          margin-left: 5px;
+          display: flex;
+          align-items: flex-end;
+          line-height: 14px;
+          .currency{
+            margin-left: 2px;
+          }
+          .num{
+            font-size: 22px;
+            line-height: 20px;
+          }
+        }
+        .tag{
+          display: inline-block;
+          height:18px;
+          padding: 0 6px;
+          line-height: 18px;
+          text-align: center;
+          color: @white;
+          font-size: 12px;
+          background-image: linear-gradient(269deg, #FF5D00 12%, #FF1900 86%);
+          border-radius: 6px 0 6px 0;
+        }
+      }
+      .desc{
+        opacity: 0.8;
+        font-size: 6px;
+        color: #FF6F00;
+        letter-spacing: 0;
+      }
+    }
+    &-right{
+      width: 159px;
+      height: 80px;
+      position: absolute;
+      top: -7px;
+      right: 0px;
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      img{
+        position: absolute;
+        top: 0;
+        left: 0;
+      }
+      .content{
+        position: relative;
+        z-index: 2;
+        background: transparent;
+        width: 135px;
+        height: 68px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        // justify-content: center;
+        &.onlyPrice{
+            justify-content: center;
+        }
+        .desc{
+           color: @white;
+           font-size: 18px;
+          .big{
+            font-size: 30px;
+            margin-right: 2px;
+          }
+        }
+        .stock{
+          margin-top: 4px;
+          width: 94px;
+          height: 17px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          opacity: 0.9;
+          background: @white;
+          border-radius: 8px;
+          font-size: 12px;
+          color: @red;
+          letter-spacing: 0;
+        }         
+      }
+    }
+}
+  // 头像组、团购规则等
+  &-group-info{
+    padding:@padding-sm - 4 @padding-sd @padding-sd;
+    background: @white;
+  }
+  &-param {
+    padding: 0 @padding-sm - 2;
+    background: @white;
+    margin-bottom: @padding-sm - 4;
+
+    &-text {
+      max-width: 225px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 1;
+      -webkit-box-orient: vertical;
+
+    }
+
+    &-area {
+      span {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 1;
+        -webkit-box-orient: vertical;
+
+        &:nth-child(1) {
+          .text-16();
+          color: @red;
+          margin-right: 2px;
+        }
+
+        &.noAddr {
+          color: @gray-4;
+          
+        }
+      }
+    }
+
+    &-service {
+      span {
+        &:after {
+          margin: 0 10px;
+          content: '';
+          height: 22px;
+          vertical-align: middle;
+        }
+
+        &:last-child {
+          &:after {
+            height: 0;
+          }
+        }
+      }
+    }
+  }
+
+  &-popup {
+    margin: @padding-md + 4 @padding-lg;
+    height: 71vh;
+    position: relative;
+
+    &-selected {
+      display: flex;
+      align-items: flex-end;
+      margin-bottom: @padding-xl - 4;
+
+      img {
+        width: 100px;
+        height: 100px;
+        border-radius: @border-radius-sm;
+      }
+
+      .Gp-selected-right {
+        display: flex;
+        flex-direction: column;
+        padding-left: @padding-sd;
+        align-items: flex-start;
+        .Gps-right-header {
+          display: flex;
+          align-items: center;
+          margin-bottom: @padding-sd;
+
+          .Gpsr-header-price {
+            margin-right: @padding-x;
+            line-height: 0;
+            span {
+              color: @red-light;
+              font-weight: @font-weight-bold;
+
+              &:first-child {
+                .text-12();
+              }
+
+              &:last-child {
+                .text-18();
+              }
+            }
+          }
+
+          .Gpsr-header-discount {
+            .text-12();
+            color: @gray-4;
+
+            span {
+              &:last-child {
+                text-decoration: line-through;
+              }
+            }
+          }
+        }
+
+        .Gps-right-selected {
+          .text-13();
+          color: @black;
+          display: inline-block;
+        }
+      }
+    
+    } 
+    &-param {
+      display: flex;
+      flex-direction: column;
+      margin-bottom: @padding-lg;
+
+      .Gp-param-name {
+        margin-bottom: @padding-xs + 2;
+        .text-13();
+        color: @gray-4;
+        display: inherit;
+      }
+
+      .Gp-param-list {
+        display: flex;
+        flex-wrap: wrap;
+
+        span {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          margin-right: @padding-sd;
+          padding: 0 @padding-md - 2;
+          background: @gray-1;
+          border-radius: @border-radius-sm / 2;
+          height: 26px;
+          .text-13();
+          color: @black;
+          margin-bottom: @padding-xs;
+        }
+
+        .Gpp-list-selected {
+          border: 1px solid @red;
+          background: pink;
+          color: @red;
+        }
+
+        .Gpp-list-disabled {
+          color: @gray-4;
+        }
+      }
+    }
+
+    &-num {
+      position: relative;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 100px;
+      &-limit {
+        position: absolute;
+        right: 0;
+        top: 27.5px;
+        .text-14();
+        color: @red;
+        // width: 90px;
+        text-align: right;
+      }
+
+      .Gp-num-name {
+        .text-13();
+        color: @gray-4;
+      }
+      .Gp-num-step{
+        width: auto;
+        display: flex;
+        button{
+          background-color:#F7F7F7 !important;
+        }
+      }
+    }
+
+    &-button {
+      button{
+        position: fixed;
+        left: 20px;
+        right: 20px;
+        bottom: 0;
+        padding: @padding-md 0;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+
+    }
+  }
+  &-area {
+    height: 65vh;
+    overflow: scroll;
+    padding: @padding-md @padding-lg;
+    &-item {
+      display: flex;
+      align-items: center;
+      margin-bottom: @padding-lg;
+      span {
+        .text-13();
+        color: @gray-4;
+        &:first-child {
+          width: 20px;
+          height: 20px;
+          line-height: 20px;
+          .text-16();
+        }
+        &:second-child {
+          flex: 1;
+        }
+      }
+      &_selected {
+        span {
+          &:first-child {
+            color: @red;
+          }
+          &.secondText {
+            color: @black;
+            font-weight: @font-weight-bold;
+          }
+        }
+      }
+    }
+    &-none {
+      display: inline-block;
+      width: 100%;
+      line-height: 65vh;
+      .text-13();
+      color: @gray-5;
+      text-align: center;
+    }
+    &-button {
+      display: flex;
+      justify-content: center;
+    }
+  }
+  &-divider {
+    display:flex;
+    align-items:center;
+    justify-content: center;
+    margin: 15px 0;
+    width: 100%;
+    font-size: 12px;
+    color: #999;
+    text-align: center;
+    &:before, &:after{
+        display: inline-block;
+        content: '';
+        width: 50px;
+        height: 0;
+        border-top: 1px solid #D8D8D8;
+        margin-right: 5px;
+    }
+    &:after{
+        margin-left: 5px;
+        margin-right: 0;
+     }
+  }
+}
+
+
+

src/views/goodsDetailShare/index.vue

+<template>
+  <div v-if="showPage" class="goods" style="height: 100%">
+    <!-- 主体 -->
+    <div class="goods-container">
+      <!-- 轮播图 -->
+      <div class="goods-carousel">
+        <cr-swipe class="goods-swiper" @change="onChange">
+          <cr-swipe-item v-for="(item, index) in imgList" :key="index" class="goods-carousel-item">
+            <img :src="item" style="width: 100%" />
+          </cr-swipe-item>
+          <template #indicator>
+            <div class="custom-indicator">{{ swiperCurrent + 1 }}/{{ imgList.length }}</div>
+          </template>
+        </cr-swipe>
+        <!-- <div class="goods-swipe-avator">
+          <swipe-customer-info
+            v-model="avatorInfo.showInfo"
+            :avatar="avatorInfo.src"
+            :name="avatorInfo.name"
+          />
+        </div> -->
+      </div>
+      <div class="goods-price">
+        <div class="goods-price-left">
+          <div class="info">
+            <div class="tag">{{ detailInfo.groupBuyInfo.groupBuyLimitUserCount }}人团</div>
+            <div class="price">
+              支付价<span class="currency">¥</span
+              ><span class="num">{{ detailInfo.activityPrice || '' }}</span>
+            </div>
+          </div>
+          <div class="desc">拼团成功/失败，款项原路返回至账户</div>
+        </div>
+        <div class="goods-price-right">
+          <img
+            style="width: 100%; height: auto"
+            src="https://img.lkbang.net/groupbuy/price-bg-red.png"
+          />
+          <div
+            class="content onlyPrice"
+            :class="{
+              onlyPrice: false
+            }"
+          >
+            <div class="desc"><span class="big">0</span>元到手</div>
+            <div class="stock">库存仅剩{{ detailInfo.activitySku.stock }}件</div>
+          </div>
+        </div>
+      </div>
+      <!-- 商品名称/价格 -->
+      <div class="goods-info">
+        <div class="goods-info-name">{{ detailInfo.goodsName }}</div>
+      </div>
+
+      <div v-if="inProgress == 1" class="goods-param">
+        <!-- 商品已选 -->
+        <goods-cell title="已选" @click.native="handleParamsClick('sku', '')">
+          <span class="goods-param-text">
+            <span v-for="(item, index) in specSelected" :key="index">{{ item.attsValue }}</span>
+          </span>
+          <span v-if="specSelected.length">； &nbsp;</span>
+          <span>{{ selectedGoods.skuNum }}件</span>
+        </goods-cell>
+        <!-- 收货地址 -->
+        <goods-cell class="goods-param-area" title="送至">
+          <span
+            class="iconfont icon-location-line"
+            :class="{ noAddr: !selectedAddress.addrFullName }"
+          />
+          <span>{{ selectedAddress.addrFullName || '添加收货地址' }}</span>
+        </goods-cell>
+      </div>
+      <!-- <div class="goods-group-info">
+        <template v-if="inProgress == 1">
+          <avatorGroup :group-info="detailInfo.groupBuyInfo || {}" />
+          <group-desc-info
+            :group-info="detailInfo.groupBuyInfo || {}"
+            :timestemp="groupTimestemp"
+          />
+          <successInfo :group-info="detailInfo.groupBuyInfo || {}" />
+          <cr-divider
+            hairline
+            :style="{
+              borderColor: '#ECECEC'
+            }"
+          />
+        </template>
+        <rules :group-info="detailInfo.groupBuyInfo || {}" />
+      </div> -->
+      <span v-if="detailImgList.length" id="goodDetail" class="goods-divider">宝贝详情</span>
+      <!-- <div v-if="skuDetailList.length" class="goods-detail">
+        <detail-info-area :sku-detail-list="skuDetailList" :sku-detail-atts="skuDetailAtts" />
+      </div> -->
+      <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>
+    <cr-popup v-model="show" class="popup-head" closeable position="bottom">
+      <div class="popup-title">{{ currentPopupName }}</div>
+      <div v-if="currentPopupType === 'sku'" class="goods-popup">
+        <div class="goods-popup-selected">
+          <img :src="detailInfo.thumbImageUrl" />
+          <div class="Gp-selected-right">
+            <div class="Gps-right-header">
+              <div class="Gpsr-header-price">
+                <span>¥</span>
+                <span>{{ detailInfo.price }}</span>
+              </div>
+              <div v-if="detailInfo.marketPrice" class="Gpsr-header-discount">
+                <span>原价：</span>
+                <span>¥{{ detailInfo.marketPrice }}</span>
+              </div>
+            </div>
+            <div v-if="specSelected.length" class="Gps-right-selected">
+              已选：
+              <span v-for="(sItem, sIndex) in specSelected" :key="sIndex">
+                {{ sItem.attsValue }}
+              </span>
+            </div>
+          </div>
+        </div>
+        <div v-for="(item, index) in specList" :key="index" class="goods-popup-param">
+          <span class="Gp-param-name">{{ item.attsName }}</span>
+          <div class="Gp-param-list">
+            <span
+              v-for="(childItem, childIndex) in specChildList"
+              v-show="childItem.attsCode === item.attsCode"
+              :key="childIndex"
+              :disabled="childItem.disabled"
+              :class="{
+                'Gpp-list-selected': childItem.isSelected && !childItem.disabled,
+                'Gpp-list-disabled': childItem.disabled
+              }"
+              @click="selectSpec(childIndex, childItem)"
+            >
+              {{ childItem.attsValue }}
+            </span>
+          </div>
+        </div>
+        <div class="goods-popup-num">
+          <span class="Gp-num-name">购买数量：</span>
+          <cr-stepper
+            v-model="selectedGoods.skuNum"
+            class="Gp-num-step"
+            :min="1"
+            :max="1"
+            disable-input
+          />
+          <div v-if="detailInfo.limitCount" class="goods-popup-num-limit">
+            仅限购买1件
+          </div>
+        </div>
+        <div class="goods-area-button">
+          <button class="goods-bottom-buy">确认</button>
+        </div>
+      </div>
+      <div v-if="currentPopupType === 'area'" class="goods-area">
+        <div v-if="addressList && addressList.length">
+          <div
+            v-for="(item, index) in addressList"
+            :key="index"
+            class="goods-area-item "
+            :class="{
+              'goods-area-item_selected': item.addrReceiverId === selectedAddress.addrReceiverId
+            }"
+            @click="changeAddress(item)"
+          >
+            <span class="iconfont icon-location-line" />
+            <span class="secondText">{{ item.addrFullName }}</span>
+          </div>
+        </div>
+        <span v-else class="goods-area-none">暂未添加地址哦～</span>
+        <div class="goods-area-button" @click="addAddress">
+          <button class="goods-bottom-buy btn-absolute">添加新地址</button>
+        </div>
+      </div>
+    </cr-popup>
+  </div>
+</template>
+<script>
+import goods from '@/api/groupBuy';
+import goodsCell from './components/goodsCell';
+import { mapState } from 'vuex';
+import { EventBus, firstGroupShare } from '@/service/utils.service';
+export default {
+  // eslint-disable-next-line vue/name-property-casing
+  name: 'goodDetail',
+  components: {
+    goodsCell
+  },
+  data() {
+    return {
+      timestemp: '', // 大活动结束时间
+      groupTimestemp: '', // 小团结束时间
+      inProgress: false, // 活动是否已经开始
+      countDownText: '',
+      showPage: false, // 是否显示页面，当查询完团与人的关系后进行处理，如果用户已经参与了此商品此活动的团，navigateto small else showpage = true
+      groupId: 0, // 团id
+      // 以下是原有的data
+      detailParam: {
+        skuNo: '',
+        receiverId: '',
+        count: 1
+      },
+      specSelected: [],
+      detailInfo: {},
+      imgList: [],
+      detailImgList: [], // 商品详情图像展示
+      selectedGoods: {
+        skuNum: 1,
+        skuId: ''
+      },
+      addressList: [],
+      selectedAddress: {},
+      specList: [],
+      specChildList: [],
+      swiperCurrent: 0,
+      // showBackBtn: navBarLeftBtns，
+      currentPopupType: '',
+      currentPopupName: '',
+      show: false,
+      hasLogin: false,
+      name: {}
+    };
+  },
+  computed: {
+    minCount() {
+      return this.detailInfo.stock ? 1 : 0;
+    },
+    ...mapState({
+      isPrimordialBrowser: state => state.pay.showMiniappGuide,
+      isWeixinBrowser: state => state.pay.isWeixinBrowser,
+      avatorInfo: state => state.pay.avatorInfo
+    })
+  },
+  created() {
+    this.detailParam = { ...this.$route.query };
+    this.name = this.$route.params;
+    this.init(this.detailParam);
+  },
+  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,
+        // groupBuyGroupId: this.groupId, // 分享出去不携带团id，故注释掉
+        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,
+        activityId: this.detailParam.activityId,
+        skuImg: this.detailInfo.thumbImageUrl,
+        activityPrice: this.detailInfo.activityPrice,
+        skuNo: this.detailParam.skuNo,
+        peoplePhotoList: [], // 原本是avatorList，如上方注释，因与产品确认过商品详情页分享出去不携带团id，故头像传递空数组即可
+        endTime: this.detailInfo?.groupBuyInfo.currentGroupEndTime || this.detailInfo?.endTime || ''
+      };
+      EventBus.$emit('goods_share_info', {
+        shareInfo: sharePicData,
+        type: 2
+      });
+    },
+    onChange(index) {
+      this.swiperCurrent = index;
+    },
+    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.timestemp = activityStartTime;
+        this.countDownText = '距活动开始时间';
+        this.inProgress = -1;
+        return;
+      }
+      if (currentTime >= activityEndTime) {
+        this.timestemp = 0;
+        this.countDownText = '活动已结束';
+        this.inProgress = 0;
+        return;
+      }
+      if (currentTime > activityStartTime && currentTime < activityEndTime) {
+        this.timestemp = activityEndTime;
+        this.countDownText = '距活动结束';
+        this.inProgress = 1;
+        return;
+      }
+    },
+    async init(detailParam, disabledSetAddress) {
+      const [res] = await goods.detailInfo(detailParam);
+      // canJoinGroupBuyAgain  groupStatus
+      try {
+        if (res.groupBuyInfo?.groupId) {
+          this.groupId = +res.groupBuyInfo.groupId || 0;
+        }
+        if (res.groupBuyInfo?.joinGroup) {
+          // 如果当前用户参了团到拼团详情
+          const query = { ...this.$route.query };
+          setTimeout(() => {
+            // 延时用于解决短时间内刷detail接口的问题
+            this.$router.replace({ name: 'groupBuySkuInfoSmallPic', query });
+          }, 500);
+          return;
+        }
+        firstGroupShare(
+          {
+            ...this.$route.query,
+            skuName: res.goodsName,
+            skuImg: res.thumbImageUrl
+          },
+          2
+        );
+        this.imgList = res.imageUrl || [];
+        this.detailInfo = res;
+        this.setStartStatus(res);
+        this.showPage = true;
+
+        this.detailInfo.contentDetailUrl = this.detailInfo.contentDetailUrl.replace(
+          'http://',
+          'https://'
+        );
+        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;
+
+        this.selectedGoods.skuId = this.detailInfo.skuNo;
+        if (!disabledSetAddress) this.selectedAddress = res.receiverInfo || {};
+        this.specList = res.skuAtts || [];
+        let li = [];
+        this.specList.forEach(item => {
+          item.attsValues.forEach(i => {
+            i.attsCode = item.attsCode;
+            if (i.isSelected) {
+              this.specSelected.push(i);
+            }
+          });
+          li = li.concat(item.attsValues);
+        });
+        this.specChildList = li;
+        // // 收货地址
+        // this.getAddr();
+        //选择的商品规格
+        this.getSelectedSkuNo(this.specSelected);
+      } catch (e) {
+        this.$toast('获取商品详情失败');
+      }
+    },
+    async getAddr() {
+      if (!this.hasLogin) {
+        this.checkLogin();
+        return;
+      }
+      const [addressInfo] = await goods.addrList();
+      if (addressInfo) {
+        this.addressList = (addressInfo && addressInfo.addrReceiverList) || [];
+        this.show = true;
+      } else {
+        this.addAddress();
+      }
+    },
+    addAddress() {
+      if (!this.hasLogin) {
+        this.checkLogin();
+        return;
+      }
+      this.show = false;
+      this.$router.push({ name: 'addressManage' });
+    },
+    changeAddress(address) {
+      // 选取规格需要清空，init会重新赋值
+      this.specSelected = [];
+      this.selectedAddress = address;
+      this.detailParam = { ...this.$route.query };
+      this.init(this.detailParam, true);
+      this.show = false;
+    },
+    // 选择商品规格
+    getSelectedSkuNo(specSelected) {
+      if (!specSelected || !specSelected.length) {
+        this.selectedGoods.skuId = this.detailInfo.skuNo;
+        return;
+      }
+      let list = JSON.parse(JSON.stringify(specSelected));
+      const skuNoList = [];
+      list.map(item => {
+        skuNoList.push(item.skuNos);
+      });
+      let baseList = skuNoList.shift();
+      let finalList = baseList;
+      baseList.forEach(item => {
+        const index = finalList.indexOf(item);
+
+        skuNoList.forEach(i => {
+          if (i.indexOf(item) === -1) {
+            finalList.splice(index, 1);
+          }
+        });
+      });
+      this.selectedGoods.skuId = finalList.pop();
+    },
+    //选择规格
+    selectSpec(index, sku) {
+      if (sku.isSelected || sku.disabled) {
+        return;
+      }
+      let list = this.specChildList;
+      list.forEach(item => {
+        this.$set(item, 'disabled', true);
+        if (item.attsCode === sku.attsCode) {
+          this.$set(item, 'isSelected', false);
+        }
+        item.skuNos.forEach(i => {
+          if (sku.skuNos.indexOf(i) !== -1 || item.attsCode === sku.attsCode) {
+            this.$set(item, 'disabled', false);
+          }
+        });
+        if (item.disabled) {
+          item.isSelected = false;
+        }
+      });
+      this.$set(list[index], 'isSelected', true);
+      this.specSelected = [];
+      list.forEach(item => {
+        if (item.isSelected === true) {
+          this.specSelected.push(item);
+        }
+      });
+      this.getSelectedSkuNo(this.specSelected);
+    },
+    swiperChange(e) {
+      this.swiperCurrent = e.detail.current;
+    },
+    skuPopup() {
+      if (this.detailInfo.stock === 0) {
+        this.$toast('库存不足！');
+        return;
+      }
+      this.show = true;
+    },
+    areaPopup() {
+      if (!this.hasLogin) {
+        this.checkLogin();
+        return;
+      }
+      this.getAddr();
+    }
+  }
+};
+</script>
+<style lang="less" src="./index.less" scoped></style>