feat:拼团列表页

src/App.vue

@@ -32,7 +32,6 @@ export default {
     header: {
       immediate: true,
       handler(val, oldVal) {
-        console.log(val);
         if (val !== oldVal) {
           document.body.className = val ? 'has-header' : '';
         }

src/views/goodsList/index.less

 .group {
-  height: 100%;
   font-size: @font-size-14;
   &-banner {
     position: relative;
@@ -8,7 +7,6 @@
       position: absolute;
       left: 0;
       top: 0;
-      z-index: -1;
     }
     .banner-mark {
       width: 40%;
@@ -46,22 +44,6 @@
       display: flex;
       justify-content: center;
       align-items: center;
-      .colon {
-        display: inline-block;
-        margin: 0 4px;
-        color: #ee0a24;
-      }
-      .block {
-        display: inline-block;
-        width: 16px;
-        height: 16px;
-        line-height: 16px;
-        color: #fff;
-        font-size: 9.6px;
-        text-align: center;
-        background-color: #e82424;
-        border-radius: 3.2px;
-      }
       &-label {
         font-size: 12px;
         color: #333333;
@@ -139,7 +121,12 @@
         font-size: @font-size-14;
         color: #f70d0d;
         margin-bottom: 4px;
+        font-weight: bold;
       }
+      &-sup {
+        font-size: @font-size-18;
+      }
+
       &-delprice {
         color: #999999;
         font-size: @font-size-12;
@@ -153,6 +140,64 @@
         bottom: 12px;
         right: 0;
       }
+
+      &.disabled {
+        opacity: 0.3;
+        .group-item-price {
+          color: #000;
+        }
+      }
+    }
+
+    .group-portrait {
+      &-head {
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+      }
+      &-num {
+        font-size: @font-size-12;
+        color: @white;
+        padding-top: 9px;
+        padding-bottom: 7px;
+        text-align: right;
+      }
+      &-swipe {
+        width: 130px;
+        height: 30px;
+      }
+
+      &-ul {
+        margin-left: 5px;
+        flex: 1;
+        display: flex;
+        justify-content: space-around;
+      }
+      &-image {
+        height: 23px;
+        width: 23px;
+        border: 1px solid @white;
+        border-radius: 50%;
+        margin-left: 8px;
+        overflow: hidden;
+        &:first-of-type {
+          margin-left: 0;
+        }
+      }
+
+      @keyframes leftToRight {
+        0% {
+          transform: translate(0);
+        }
+        100% {
+          transform: translate(38px);
+        }
+      }
+
+      .animateAuto {
+        animation: leftToRight 1s ease-in-out;
+        animation-fill-mode: forwards;
+      }
     }
   }
 }

src/views/goodsList/index.vue

 <template>
-  <div class="group">
+  <div class="group" :style="{ backgroundColor: gpBackColor }">
     <!-- 配置头部动态信息 start -->
     <div class="group-banner">
       <!-- 动态活动背景图 -->
@@ -16,31 +16,37 @@
     <!-- 配置头部动态信息 end -->
 
     <!-- 下方列表展示信息 start -->
-    <div class="group-bottom" :style="{ backgroundColor: gpBackColor }">
-      <div class="" />
-
+    <div class="group-bottom">
+      <div class="group-portrait">
+        <div class="group-portrait-head">
+          <div class="group-portrait-swipe" @click="switchAnimation">
+            <swipeCustomerInfo v-model="showSwipe" />
+          </div>
+          <ul class="group-portrait-ul" :class="animate">
+            <li
+              v-for="(imgItem, imgIndex) in gpImagePathArray"
+              :key="imgIndex"
+              class="group-portrait-image"
+            >
+              <cr-image :src="imgItem" />
+            </li>
+          </ul>
+        </div>
+        <div class="group-portrait-num" @click="showSwipe = !showSwipe">已有 1230人 参与拼单</div>
+      </div>
       <div class="group-list">
         <div class="list-title">
           <b class="list-title-text">今日拼团</b>
           <div class="list-count">
             <span class="list-count-label">距结束：</span>
-            <cr-count-down :time="gpCountDown" format="{d}天{h}时{m}分{s}秒">
-              <template #default="timeData">
-                <span class="block">{{ timeData.h | filterTime }}</span>
-                <span class="colon">:</span>
-                <span class="block">{{ timeData.m | filterTime }}</span>
-                <span class="colon">:</span>
-                <span class="block">{{ timeData.s | filterTime }}</span>
-              </template>
-            </cr-count-down>
+            <count-down :end-time="gpCountDown" />
           </div>
         </div>
         <cr-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
           <dl
             v-for="(item, index) in goodsList"
             :key="index"
-            :thumb="item.thumbImageUrl || item.imageUrl"
-            class="group-item"
+            :class="['group-item', index == goodsList.length - 1 ? 'disabled' : '']"
           >
             <dt class="group-item-thumb">
               <cr-image :src="item.thumbImageUrl" />
@@ -48,6 +54,7 @@
             </dt>
             <dd class="group-item-content">
               <div class="group-item-title">{{ item.goodsName }}</div>
+              <!-- 进度条：已瓶团消耗库村/该活动商品初始库存 -->
               <cr-progress
                 class="group-item-progress"
                 stroke-width="5"
@@ -57,9 +64,13 @@
                 :percentage="handleProgressByStatus(item)"
               />
               <div class="group-item-already">已拼2333团</div>
-              <div class="group-item-price">拼团价 ¥ 0</div>
+              <div class="group-item-price">拼团价 ¥ <sup class="group-item-sup">0</sup></div>
               <del class="group-item-delprice"> ￥{{ item.activityPrice }} </del>
-              <cr-button shape="circle" type="primary">立即开团</cr-button>
+              <!-- 立即开团 -->
+              <!-- 已抢光 -->
+              <!-- 未开始 -->
+              <!-- 已结束 -->
+              <cr-button shape="circle" type="primary" :disabled="false">立即开团</cr-button>
             </dd>
           </dl>
         </cr-list>
@@ -70,24 +81,41 @@
 </template>
 <script>
 import groupBuyApi from '@/api/groupBuy';
+import countDown from '@/components/countDown';
+import swipeCustomerInfo from '@/components/swipeCustomerInfo';
 import gpImagePath from '@/assets/images/groupBuy/bg-top.png';
+import headPath from '@/assets/images/groupBuy/head.png';
 export default {
   // beforeRouteEnter(to, from, next) {
   //   next(vm => {});
   // },
   // eslint-disable-next-line vue/name-property-casing
   name: 'groupBuyList',
-  filters: {
-    filterTime(time) {
-      return time > 9 ? time : '0' + time;
-    }
-  },
+  components: { countDown, swipeCustomerInfo },
   data() {
     return {
+      animate: {
+        animateAuto: false,
+        transition: true,
+        blue: true,
+        green: false,
+        animation: false
+      },
+
+      showSwipe: true,
+      headPath,
       gpImagePath,
       gpBackColor: '#FA494E',
-
-      gpCountDown: 30 * 60 * 60 * 1000,
+      gpImagePathArray: [
+        'https://activitystatic.lkbang.net/mall-free-ui/img/avator_01.png',
+        'https://activitystatic.lkbang.net/mall-free-ui/img/avator_02.png',
+        'https://activitystatic.lkbang.net/mall-free-ui/img/avator_03.png',
+        'https://activitystatic.lkbang.net/mall-free-ui/img/avator_04.png',
+        'https://activitystatic.lkbang.net/mall-free-ui/img/avator_05.png',
+        'https://activitystatic.lkbang.net/mall-free-ui/img/avator_06.png',
+        'https://activitystatic.lkbang.net/mall-free-ui/img/avator_07.png'
+      ],
+      gpCountDown: new Date('2021-09-10 00:00:00').getTime(),
 
       goodsList: [],
       loading: false,
@@ -100,6 +128,10 @@ export default {
     // todo 曝光埋点
   },
   methods: {
+    switchAnimation() {
+      this.animate.animateAuto = !this.animate.animateAuto;
+    },
+
     onLoad() {
       // 异步更新数据
       // setTimeout 仅做示例，真实场景中一般为 ajax 请求
@@ -125,8 +157,10 @@ export default {
       const { showSaleCount, goodsCount } = item;
       percentage = (goodsCount / (goodsCount + showSaleCount)) * 100;
       percentage = percentage < 0 ? 0 : percentage;
+      // console.log(percentage);
       // percentage = !this.topicCfg.hasStart ? 0 : percentage;
       return Math.round(percentage * 100) / 100;
+      // return 70;
     },
     async getGoodsList() {
       // const { pageSize, pageNo, activityId } = this;