feat: 增加头像组swipe组件

src/components/avatorGroup.vue

 <template>
   <div class="avator-group">
-    <div v-for="(item, index) in avators" :key="index" class="avator-item">
+    <div v-for="(item, index) in avators" :key="index" class="avator-item" :style="widthStyle">
       <cr-image width="44px" :src="item" />
       <div v-if="index == 0" class="is-leader">
         <cr-image width="48px" src="@/assets/images/leader.png" />
@@ -25,6 +25,7 @@ export default {
         'https://activitystatic.lkbang.net/mall-free-ui/img/avator_06.png',
         'https://activitystatic.lkbang.net/mall-free-ui/img/avator_07.png',
         'https://activitystatic.lkbang.net/mall-free-ui/img/avator_09.png',
+        'https://activitystatic.lkbang.net/mall-free-ui/img/avator_10.png',
         'https://activitystatic.lkbang.net/mall-free-ui/img/avator_10.png'
       ]
     },
@@ -37,6 +38,12 @@ export default {
     return {
       isLeader: true // 标识是不是团长
     };
+  },
+  computed: {
+    widthStyle() {
+      // 用于单个头像不能占一排
+      return this.avators.length == 6 ? { width: '25%' } : { width: '20%' };
+    }
   }
 };
 </script>
@@ -53,7 +60,8 @@ export default {
     flex-shrink: 0;
     position: relative;
     width: 20%;
-    height: 62px;
+    height: 44px;
+    margin-top: @padding-lg;
     .is-new {
       position: absolute;
       top: 0;

src/components/countDown.vue

@@ -2,14 +2,14 @@
   <cr-count-down :time="time">
     <template #default="timeData">
       <template v-if="timeData.d != 0">
-        <span class="block">{{ timeData.d }}</span>
+        <span :class="blockNoBg ? 'block-no-bg' : 'block'">{{ timeData.d }}</span>
         <span class="colon">:</span>
       </template>
-      <span class="block">{{ fillZero(timeData.h) }}</span>
+      <span :class="blockNoBg ? 'block-no-bg' : 'block'">{{ fillZero(timeData.h) }}</span>
       <span class="colon">:</span>
-      <span class="block">{{ fillZero(timeData.m) }}</span>
+      <span :class="blockNoBg ? 'block-no-bg' : 'block'">{{ fillZero(timeData.m) }}</span>
       <span class="colon">:</span>
-      <span class="block">{{ fillZero(timeData.s) }}</span>
+      <span :class="blockNoBg ? 'block-no-bg' : 'block'">{{ fillZero(timeData.s) }}</span>
     </template>
   </cr-count-down>
 </template>
@@ -19,11 +19,18 @@ export default {
     endTime: {
       type: Number,
       default: 0
+    },
+    blockNoBg: {
+      type: Boolean,
+      default: false
     }
   },
   computed: {
     time() {
       return this.endTime - new Date().getTime();
+    },
+    noBg() {
+      return this.blockNoBg ? { background: 'transparent' } : '';
     }
   },
   methods: {
@@ -47,11 +54,17 @@ export default {
   display: inline-block;
   width: 18px;
   // height: 22px;
-  color: #fff;
+  color: @white;
   .text-11();
   text-align: center;
   background-color: @red-dark;
   border-radius: @padding-unit;
   line-height: 18px;
 }
+.block-no-bg {
+  display: inline-block;
+  .text-16();
+  color: @red-dark;
+  text-align: center;
+}
 </style>

src/components/rules.vue

 <template>
-  <div>
-    <cr-image />
+  <div class="rules">
+    <div class="rules-title">
+      <span class="title">拼团玩法</span>
+      <span class="desc" @click="showRules">详细规则 <i class="iconfont icon-arrow"/></span>
+    </div>
+    <cr-image src="@/assets/images/rules.png" />
   </div>
 </template>
+<style lang="less" scoped>
+.rules {
+  &-title {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: @padding-sm;
+    .title {
+      .text-14();
+      color: @font-color-dark;
+    }
+    .desc {
+      .text-13();
+      color: @gray-4;
+      i {
+        .text-12();
+        color: #c6c6c6;
+        font-weight: normal;
+      }
+    }
+  }
+}
+</style>
+<script>
+export default {
+  methods: {
+    showRules() {
+      this.$dialog({
+        message: '啊啊啊啊啊啊啊啊啊',
+        title: '拼团须知',
+        showCancelButton: false,
+        confirmButtonText: '我知道了'
+      });
+    }
+  }
+};
+</script>

src/views/goodsDetail/components/groupDescInfo.vue

+<template>
+  <div class="group-info-desc">
+    <!-- <div class="desc-item">
+      <p class="desc">发起拼团，距结束还剩</p>
+      <countDown :block-no-bg="true" />
+    </div> -->
+    <div class="desc-item">
+      <p class="desc">还差<span>2人</span>成团，距结束还剩</p>
+      <countDown :block-no-bg="true" />
+    </div>
+    <div class="gourp-rules">
+      <p>成团条件：还需邀请2名新人</p>
+      <cr-image src="@/assets/images/flag.png" width="13px" />
+    </div>
+    <div class="button-area">
+      <cr-button block shape="circle" type="primary">邀请好友</cr-button>
+      <cr-button plain block shape="circle" type="primary">查看其他商品</cr-button>
+    </div>
+  </div>
+</template>
+<script>
+import countDown from '@/components/countDown';
+export default {
+  components: {
+    countDown
+  }
+};
+</script>
+<style lang="less" scoped>
+.desc-item {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: @padding-unit;
+  .desc {
+    margin-right: @padding-unit;
+    span {
+      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-md;
+}
+.button-area {
+  button {
+    margin-bottom: @padding-md;
+  }
+}
+</style>

src/views/goodsDetail/index.less

@@ -156,7 +156,7 @@
   // 头像组、团购规则等
   &-group-info{
     margin-top: @padding-sm - 4;
-    padding:@padding-lg + @padding-unit @padding-sd @padding-sd;
+    padding:0 @padding-sd @padding-sd;
     background: @white;
   }
   &-param {

src/views/goodsDetail/index.vue

@@ -57,7 +57,14 @@
       </div>
       <div class="goods-group-info">
         <avatorGroup />
+        <group-desc-info />
         <successInfo />
+        <cr-divider
+          hairline
+          :style="{
+            borderColor: '#ECECEC'
+          }"
+        />
         <rules />
       </div>
       <span
@@ -175,6 +182,7 @@ import countDown from '@/components/countDown';
 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',
@@ -186,7 +194,8 @@ export default {
     countDown,
     avatorGroup,
     successInfo,
-    rules
+    rules,
+    groupDescInfo
   },
   filters: {
     Img2Thumb