feat: 小图详情页完成

package.json

@@ -15,6 +15,7 @@
     "@qg/qg-scroll": "^1.4.2",
     "@qg/ui-request": "^0.0.20",
     "core-js": "^3.6.5",
+    "intersection-observer": "^0.12.0",
     "js-cookie": "^2.2.1",
     "raven-js": "^3.27.2",
     "sa-sdk-javascript": "^1.15.16",

src/components/avatorGroup.vue

@@ -53,6 +53,7 @@ export default {
 </script>
 <style lang="less" scoped>
 .avator-group {
+  position: relative;
   padding: 0 38 - @padding-sd;
   box-sizing: border-box;
   margin-bottom: @padding-md;
@@ -60,6 +61,7 @@ export default {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
+  background: @white;
   .avator-item {
     flex-shrink: 0;
     position: relative;

src/components/swipeCustomerInfo.vue

@@ -61,7 +61,7 @@ export default {
         }
         // 其余情况先裁剪到最大4位
         name = name.slice(0, 4);
-        if (name.length == 4) return name.slice(0, 2) + '**';
+        if (name.length == 4) return name.slice(0, 1) + '**';
         if (name.length == 3) return name.slice(0, 1) + '**';
         if (name.length == 2) return name.slice(0, 1) + '*';
         if (name.length == 1) return name.slice(0, 1);
@@ -75,6 +75,7 @@ export default {
 </script>
 <style scoped lang="less">
 .swipe-customer-info-container {
+  // width: 100%;
   box-sizing: border-box;
   display: inline-flex;
   align-items: center;
@@ -95,7 +96,7 @@ export default {
   }
   &-info {
     flex-shrink: 0;
-    padding-right: @padding-unit - 2;
+    padding-right: @padding-x;
     .text-12();
   }
 }

src/router/groupBuy.js

@@ -5,6 +5,12 @@ module.exports = [
     component: () => import('../views/goodsDetail/index.vue'),
     meta: { title: '组团0元购' }
   },
+  {
+    path: '/groupBuy/skuInfoSmallPic',
+    name: 'groupBuySkuInfoSmallPic',
+    component: () => import('../views/goodsDetail/smallPic.vue'),
+    meta: { title: '组团0元购' }
+  },
   {
     path: '/groupBuy/list',
     name: 'groupBuyList',

src/views/goodsDetail/components/groupDescInfo.vue

@@ -12,7 +12,7 @@
       <p>成团条件：还需邀请2名新人</p>
       <cr-image src="@/assets/images/flag.png" width="13px" />
     </div>
-    <div class="button-area">
+    <div v-if="showButtonGroup" ref="buttonArea" class="button-area">
       <cr-button block shape="circle" type="primary">邀请好友</cr-button>
       <cr-button plain block shape="circle" type="primary">查看其他商品</cr-button>
     </div>
@@ -23,6 +23,39 @@ import countDown from '@/components/countDown';
 export default {
   components: {
     countDown
+  },
+  props: {
+    showButtonGroup: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      observer: null
+    };
+  },
+  mounted() {
+    this.$nextTick(() => {
+      if (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.unobserve(this.$refs.buttonArea);
+    }
   }
 };
 </script>

src/views/goodsDetail/index.vue

@@ -67,15 +67,10 @@
         />
         <rules />
       </div>
-      <span
-        v-if="skuDetailList.length || detailImgList.length"
-        id="goodDetail"
-        class="goods-divider"
-        >宝贝详情</span
-      >
-      <div v-if="skuDetailList.length" class="goods-detail">
+      <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> -->
       <div class="goods-detail-imgs">
         <cr-image
           v-for="(item, index) in detailImgList"
@@ -174,7 +169,6 @@
 <script>
 import goods from '@/api/groupBuy';
 import goodsCell from './components/goodsCell';
-import detailInfoArea from './components/detailInfo.vue';
 import Img2Thumb from '@/filters/img2Thumb.filter';
 import bottomNav from './components/bottomNav';
 import swipeCustomerInfo from '@/components/swipeCustomerInfo';
@@ -187,7 +181,6 @@ export default {
   // eslint-disable-next-line vue/name-property-casing
   name: 'goodDetail',
   components: {
-    detailInfoArea,
     goodsCell,
     bottomNav,
     swipeCustomerInfo,
@@ -218,7 +211,6 @@ export default {
         skuNum: 1,
         skuId: ''
       },
-      skuDetailAtts: [],
       addressList: [],
       selectedAddress: {},
       specList: [],
@@ -233,17 +225,6 @@ export default {
     };
   },
   computed: {
-    skuDetailList() {
-      let arr = [];
-      this.skuDetailAtts &&
-        this.skuDetailAtts.forEach(item => {
-          arr = arr.concat(item.groupAtts);
-        });
-      if (arr <= 5) {
-        return arr;
-      }
-      return arr.slice(0, 5);
-    },
     minCount() {
       return this.detailInfo.stock ? 1 : 0;
     }
@@ -304,7 +285,6 @@ export default {
         this.detailInfo.activityLimitCount = 0;
         this.$toast('库存不足！');
       }
-      this.skuDetailAtts = res.skuDetailAtts;
       this.selectedAddress = res.receiverInfo || {};
       this.specList = res.skuAtts || [];
       let li = [];

src/views/goodsDetail/smallPic.less

+// @import "../../style/var.less";
+@border-radius: @border-radius-md + 2;
+@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 {
+  &-red-bg{ // 用于小图详情页
+    width: 100%;
+    height: 270px;
+    overflow: hidden;
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: -1;
+    &::after{
+      position: absolute;
+      left: -5%;
+      top: 0;
+      z-index: -1;
+      content: '';
+      width: 110%;
+      height: 270px;
+      border-radius: 0 0 10% 10%;  //左上角，右上角，右下角，左下角
+      background-image: linear-gradient(269deg, #FF5D00 12%, #FF1900 86%);
+    }
+  }
+  &-group-buy-head-content{
+    height: 64px;
+    width: 100%;
+    padding: 0 @padding-sm;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    box-sizing: border-box;
+    &-desc{
+      flex: 1;
+      flex-shrink: 0;
+      .text-17();
+      color:@white;
+    }
+    &-swipe{
+      flex-shrink: 0;
+    }
+  }
+  &-container {
+      position: relative;
+      box-sizing: border-box;
+      font-size: 16px;
+      padding: 0 @padding-sd 60px;
+      &-lose {
+          &-container {
+              background: #fff;
+              padding: 45px 15px;
+              text-align: center;
+              img {
+                  width: 150px;
+              }
+          }  
+      }
+  }
+  // 头像组、团购规则等
+  &-product-info{
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    justify-content: space-between;
+    background: @white;
+    border-radius: @border-radius;
+    height: 132px;
+    margin-bottom: @padding-sm;
+    padding: @padding-sm @padding-xs;
+    box-sizing: border-box;
+    &-img{
+      width: 108px;
+      height: 108px;
+      margin-right: @padding-x;
+      flex-shrink: 0;
+    }
+    &-desc{
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      &-title{
+        width: 100%;
+        .text-14();
+        word-break:break-all;
+        color: @font-color-dark;
+        text-align: left;
+        word-wrap:break-word;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+      }
+      &-progress{
+        margin-top: @padding-unit;
+        width: 163px;
+      }
+      &-num{
+        margin-top: @padding-unit;
+        .text-10();
+        color: @gray-4;
+      }
+      &-price{
+        margin-top: @padding-xs;
+        &-group{
+          color: #F70D0D;
+          .text-14();
+          font-weight: @font-weight-bold;
+          .actualPrice{
+            font-size: 20px;
+          }
+        }
+        &-market{
+          .text-10();
+          color: @gray-4;
+        }
+      }
+    }
+  }
+  &-group-info{
+    margin:0 0 @padding-sd;
+    padding: @padding-unit * 6 @padding-sm @padding-sm;
+    background: @white;
+    border-radius: @border-radius;
+    position: relative;
+    &-status {
+      width: 80px;
+      height: 80px;
+      position: absolute;
+      right: -3px;
+      top: -20px;
+      z-index: 2;
+    }
+  }
+  &-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/goodsDetail/smallPic.vue

+<template>
+  <div 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">新人拼团，今日疯抢中</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">
+          <cr-image width="108px" :src="imgList[0]" />
+        </div>
+        <div class="goods-product-info-desc">
+          <div class="goods-product-info-desc-part1">
+            <div class="goods-product-info-desc-title">
+              {{ detailInfo.skuName || name.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="50"
+              />
+            </div>
+            <div class="goods-product-info-desc-num">已拼3999团</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">
+              售价¥3389
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="goods-group-info">
+        <div class="goods-group-info-status">
+          <cr-image width="80" src="../../assets/images/success.png" />
+        </div>
+        <avatorGroup />
+        <group-desc-info :show-button-group="true" @changeButtonVisible="changeButtonVisible" />
+        <successInfo />
+        <cr-divider
+          hairline
+          :style="{
+            borderColor: '#ECECEC'
+          }"
+        />
+        <rules />
+      </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" type="shoppingCar" :disabled="false" @buy="goVccOrDetail" />
+  </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';
+export default {
+  // eslint-disable-next-line vue/name-property-casing
+  name: 'goodDetail',
+  components: {
+    bottomNav,
+    swipeCustomerInfo,
+    avatorGroup,
+    successInfo,
+    rules,
+    groupDescInfo
+  },
+  data() {
+    return {
+      endTime: 1631203200000,
+      showInfo: false,
+      // 以下是原有的data
+      detailParam: {
+        skuNo: '',
+        receiverId: '',
+        count: 1
+      },
+      detailInfo: {},
+      imgList: [],
+      detailImgList: [], // 商品详情图像展示
+      hasLogin: false,
+      name: {},
+      showButtonNav: false // 是否显示底部按钮
+    };
+  },
+  created() {
+    this.hasLogin = window.localStorage.getItem('vccToken') != 'null' ? true : false;
+    this.detailParam = { ...this.$route.query };
+    this.name = this.$route.params;
+    this.imgList = [this.name.goodsimg];
+    this.init(this.detailParam);
+  },
+  mounted() {
+    // todo 曝光埋点
+    setTimeout(() => {
+      this.showInfo = true;
+    }, 3000);
+    setTimeout(() => {
+      this.showInfo = false;
+    }, 5000);
+  },
+  methods: {
+    changeButtonVisible(res) {
+      this.showButtonNav = res;
+    },
+    // ka渠道逻辑
+    goVccOrDetail() {
+      if (!this.hasLogin) {
+        this.$router.push({ name: 'login' });
+        return;
+      }
+    },
+    async init(detailParam) {
+      const [res] = await goods.detailInfo(detailParam);
+      this.imgList = res.imageList || [];
+      this.detailInfo = res;
+      try {
+        const detailImages = await goods.getDetailPic(this.detailInfo.detailUrl);
+        // 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);
+      }
+    }
+  }
+};
+</script>
+<style lang="less" src="./smallPic.less" scoped></style>

yarn.lock

@@ -4881,6 +4881,11 @@
     "default-gateway" "^4.2.0"
     "ipaddr.js" "^1.9.0"
 
+"intersection-observer@^0.12.0":
+  "integrity" "sha512-2Vkz8z46Dv401zTWudDGwO7KiGHNDkMv417T5ItcNYfmvHR/1qCTVBO9vwH8zZmQ0WkA/1ARwpysR9bsnop4NQ=="
+  "resolved" "http://npmprivate.quantgroups.com/intersection-observer/-/intersection-observer-0.12.0.tgz"
+  "version" "0.12.0"
+
 "invariant@^2.2.2", "invariant@^2.2.4":
   "integrity" "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA=="
   "resolved" "http://npmprivate.quantgroups.com/invariant/-/invariant-2.2.4.tgz"
@@ -9261,7 +9266,7 @@
     "videojs-flash" "^2.1.0"
     "videojs-hotkeys" "^0.2.20"
 
-"vue@>= 2.6.11", "vue@2.6.11":
+"vue@2.6.11":
   "integrity" "sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ=="
   "resolved" "http://npmprivate.quantgroups.com/vue/-/vue-2.6.11.tgz"
   "version" "2.6.11"