feat: 增加团购信息组件

src/components/swipeCustomerInfo.vue

+<template>
+  <transition :name="`slide-fade-${direction}`">
+    <div v-if="value" class="swipe-customer-info-container">
+      <div class="swipe-customer-info-container-icon">
+        <cr-image width="24px" :src="avatar" class="avatar" />
+      </div>
+      <p class="swipe-customer-info-container-info" :style="textStyle">
+        {{ handleName(name) + ' ' + desc }}
+      </p>
+    </div>
+  </transition>
+</template>
+<script>
+export default {
+  props: {
+    value: {
+      type: Boolean,
+      default: false
+    },
+    avatar: {
+      type: String,
+      default: 'https://himg.bdimg.com/sys/portraitn/item/19e96973556e646566696e6564d8bcc080'
+    },
+    name: {
+      type: String,
+      default: '易烊千玺'
+    },
+    color: {
+      type: String,
+      default: '#fff'
+    },
+    desc: {
+      type: String,
+      default: '参与拼团'
+    },
+    direction: {
+      type: String,
+      default: 'left'
+    }
+  },
+  computed: {
+    textStyle() {
+      return {
+        color: this.color
+      };
+    }
+  },
+  watch: {
+    value(v) {
+      console.log(v);
+    }
+  },
+  methods: {
+    handleName(name) {
+      try {
+        name = name.toString();
+        const phoneNumReg = /^1\d{10}$/;
+        if (phoneNumReg.test(name)) {
+          // 手机号展示前两位+两个星号
+          return name.slice(0, 2) + '**';
+        }
+        // 其余情况先裁剪到最大4位
+        name = name.slice(0, 4);
+        if (name.length == 4) return name.slice(0, 2) + '**';
+        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);
+        return name;
+      } catch (err) {
+        return name.slice(0, 1) + '**';
+      }
+    }
+  }
+};
+</script>
+<style scoped lang="less">
+.swipe-customer-info-container {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  height: 30px;
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 15px;
+  padding: @padding-unit;
+  &-icon {
+    flex-shrink: 0;
+    width: 24px;
+    height: 24px;
+    margin-right: @padding-unit + 2;
+    .avatar {
+      /deep/ img {
+        border-radius: 50%;
+      }
+    }
+  }
+  &-info {
+    flex-shrink: 0;
+    padding-right: @padding-unit - 2;
+    .text-12();
+  }
+}
+.slide-fade-left-enter-active {
+  transition: all 0.3s ease;
+}
+.slide-fade-left-leave-active {
+  transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
+}
+.slide-fade-left-enter {
+  transform: translateX(-20px);
+  opacity: 0;
+}
+.slide-fade-left-leave-to {
+  opacity: 0;
+}
+
+.slide-fade-right-enter-active {
+  transition: all 0.3s ease;
+}
+.slide-fade-right-leave-active {
+  transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
+}
+.slide-fade-right-enter {
+  transform: translateX(20px);
+  opacity: 0;
+}
+.slide-fade-right-leave-to {
+  opacity: 0;
+}
+</style>

src/config/env.config.js

@@ -7,9 +7,9 @@
 const protocol = window.location.protocol;
 const qiniuHost = protocol + '//kdspstatic.q-gp.com/';
 const shenceHost = 'https://bn.xyqb.com/sa?project=default'; // 测试地址
-const talosHost = 'https://talos-tob.liangkebang.net';
-const faceHost = 'https://auth-tob.liangkebang.net';
-const kdspHost = 'https://kdsp-api-tob.liangkebang.net';
+const talosHost = 'https://talos-vcc2.liangkebang.net';
+const faceHost = 'https://auth-vcc2.liangkebang.net';
+const kdspHost = 'https://kdsp-api-vcc2.liangkebang.net';
 const VCC_CHANNEL = '';
 const TERMINAL = 'H5';
 const VERSION = '7.9.00';

src/views/goodsDetail/components/bottomNav.vue

 <template>
   <div class="goods-bottom">
     <cr-button shape="circle" :disabled="disabled" type="primary" block @click="buy">
-      {{ shopBtnName }}
+      立即参团
     </cr-button>
     <cr-button shape="circle" :disabled="disabled" type="primary" block @click="buy">
-      {{ shopBtnName }}
+      立即开团
     </cr-button>
   </div>
 </template>

src/views/goodsDetail/index.less

@@ -39,12 +39,9 @@
 
 
 .goods {
-  padding-bottom: 60px;
-  &-detail-imgs {
-    padding-bottom: 40px;
-  }
   &-container {
-      height: calc(100% - 60px);
+      padding-bottom: 60px;
+      box-sizing: border-box;
       font-size: 16px;
       &-lose {
           &-container {

src/views/goodsDetail/index.vue

@@ -12,6 +12,7 @@
             <div class="custom-indicator">{{ swiperCurrent + 1 }}/{{ imgList.length }}</div>
           </template>
         </cr-swipe>
+        <swipe-customer-info v-model="showInfo" />
       </div>
       <!-- 商品名称/价格 -->
       <div class="goods-info">
@@ -151,12 +152,7 @@
         </div>
       </div>
     </cr-popup>
-    <bottom-nav
-      type="shoppingCar"
-      :disabled="false"
-      :shop-btn-name="buttonName"
-      @buy="goVccOrDetail"
-    />
+    <bottom-nav type="shoppingCar" :disabled="false" @buy="goVccOrDetail" />
   </div>
 </template>
 <script>
@@ -165,13 +161,15 @@ 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';
 export default {
   // eslint-disable-next-line vue/name-property-casing
   name: 'goodDetail',
   components: {
     detailInfoArea,
     goodsCell,
-    bottomNav
+    bottomNav,
+    swipeCustomerInfo
     // tipModal
   },
   filters: {
@@ -180,6 +178,7 @@ export default {
   data() {
     return {
       flag: false,
+      showInfo: false,
       detailParam: {
         skuNo: '',
         receiverId: '',
@@ -237,6 +236,12 @@ export default {
   },
   mounted() {
     // todo 曝光埋点
+    setTimeout(() => {
+      this.showInfo = true;
+    }, 3000);
+    setTimeout(() => {
+      this.showInfo = false;
+    }, 5000);
   },
   methods: {
     onChange(index) {