Merge branch 'feat/group-buy' of git.quantgroup.cn:ui/group-buy-ui into feat/group-buy

package-lock.json

 {
   "name": "vcc-spider-center-ui",
   "version": "1.0.0",
-  "lockfileVersion": 2,
+  "lockfileVersion": 1,
   "requires": true,
   "packages": {
     "": {
@@ -28988,15 +28988,6 @@
       "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=",
       "dev": true
     },
-    "string_decoder": {
-      "version": "1.1.1",
-      "resolved": "http://npmprivate.quantgroups.com/string_decoder/-/string_decoder-1.1.1.tgz",
-      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
-      "dev": true,
-      "requires": {
-        "safe-buffer": "~5.1.0"
-      }
-    },
     "string-argv": {
       "version": "0.3.1",
       "resolved": "http://npmprivate.quantgroups.com/string-argv/-/string-argv-0.3.1.tgz",
@@ -29034,6 +29025,15 @@
         "es-abstract": "^1.17.5"
       }
     },
+    "string_decoder": {
+      "version": "1.1.1",
+      "resolved": "http://npmprivate.quantgroups.com/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "dev": true,
+      "requires": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
     "stringify-object": {
       "version": "3.3.0",
       "resolved": "http://npmprivate.quantgroups.com/stringify-object/-/stringify-object-3.3.0.tgz",
@@ -30912,16 +30912,6 @@
               "dev": true,
               "optional": true
             },
-            "string_decoder": {
-              "version": "1.1.1",
-              "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
-              "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
-              "dev": true,
-              "optional": true,
-              "requires": {
-                "safe-buffer": "~5.1.0"
-              }
-            },
             "string-width": {
               "version": "1.0.2",
               "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
@@ -30934,6 +30924,16 @@
                 "strip-ansi": "^3.0.0"
               }
             },
+            "string_decoder": {
+              "version": "1.1.1",
+              "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+              "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+              "dev": true,
+              "optional": true,
+              "requires": {
+                "safe-buffer": "~5.1.0"
+              }
+            },
             "strip-ansi": {
               "version": "3.0.1",
               "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
@@ -31818,16 +31818,6 @@
               "dev": true,
               "optional": true
             },
-            "string_decoder": {
-              "version": "1.1.1",
-              "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
-              "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
-              "dev": true,
-              "optional": true,
-              "requires": {
-                "safe-buffer": "~5.1.0"
-              }
-            },
             "string-width": {
               "version": "1.0.2",
               "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
@@ -31840,6 +31830,16 @@
                 "strip-ansi": "^3.0.0"
               }
             },
+            "string_decoder": {
+              "version": "1.1.1",
+              "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+              "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+              "dev": true,
+              "optional": true,
+              "requires": {
+                "safe-buffer": "~5.1.0"
+              }
+            },
             "strip-ansi": {
               "version": "3.0.1",
               "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",

src/App.vue

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

src/api/groupBuy.js

@@ -16,5 +16,11 @@ export default {
     return http.get(`${talosHost}/api/kdsp/addr/receiver/list`, data, {
       hideLoading: true
     });
+  },
+  // 入口活动列表
+  getGroupList(data) {
+    return http.get(`http://yapi.quantgroups.com/mock/479/goods/group-list`, data, {
+      hideLoading: true
+    });
   }
 };

src/router/groupBuy.js

@@ -4,5 +4,11 @@ module.exports = [
     name: 'groupBuySkuInfo',
     component: () => import('../views/goodsDetail/index.vue'),
     meta: { title: '组团0元购' }
+  },
+  {
+    path: '/groupBuy/list',
+    name: 'groupBuyList',
+    component: () => import('../views/goodsList/index.vue'),
+    meta: { title: '0元购大牌' }
   }
 ];

src/style/var.less

 // page Colors
-@page-color-base: #F7F8FA;
+@page-color-base: #f7f8fa;
 
 // Color Palette
 @black: #333333;
@@ -10,26 +10,26 @@
 @gray-4: #999999;
 @gray-5: #666666;
 @gray-6: #f8f8f8;
-@gray-7: #D8D8D8;
+@gray-7: #d8d8d8;
 @red: #ec1500;
 @red-light: #ec3333;
 @red-dark: #ee0a24;
 @orange: #faab0c;
-@red-btn:#FF5D00;
+@red-btn: #ff5d00;
 
 @grey-border: #f2f3f5;
 // Gradient Colors
 @gradient-red: linear-gradient(269deg, #ff5d00 12%, #ff1900 86%);
 @gradient-pink: linear-gradient(180deg, #fff7f0 0%, #ffe4dc 100%);
 @primary-bg: {
-  background-image: linear-gradient(269deg, #FF4B00 12%, #FF7705 86%);
-  background-image: linear-gradient(269deg, #FF5D00 12%, #FF1900 86%);
-}
+  background-image: linear-gradient(269deg, #ff4b00 12%, #ff7705 86%);
+  background-image: linear-gradient(269deg, #ff5d00 12%, #ff1900 86%);
+};
 
 @cherry-color-error: #dd524d;
 
-@text-color-red:#E81800;
-@text-color-light: #FF5A4B;
+@text-color-red: #e81800;
+@text-color-light: #ff5a4b;
 // Component Colors
 @text-color: @black;
 @text-grey: @gray-4;
@@ -59,13 +59,13 @@
 @padding-xl: @padding-unit * 8;
 @padding-sd: @padding-xs + 4;
 
-@font-color-disabled: #C0C4CC;
+@font-color-disabled: #c0c4cc;
 @font-color-dark: #333333;
 @font-color-light: #909399;
-@font-color-red: #F23E33;
+@font-color-red: #f23e33;
 
 // Font
-@font-size-list: 10,11, 12, 13, 14, 15, 16, 17, 18, 20, 22, 24, 26, 28, 30, 52, 40;
+@font-size-list: 10, 11, 12, 13, 14, 15, 16, 17, 18, 20, 22, 24, 26, 28, 30, 52, 40;
 
 .generate-text(15);
 .generate-text(@n, @i: 1) when (@i =< @n) {
@@ -77,9 +77,9 @@
   .generate-text(@n, @i + 1);
 }
 
-
 @font-weight-bold: 600;
-@font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
+@font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Segoe UI, Arial,
+  Roboto, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
 @font-din: 'din';
 @deep: ~'>>>';
 
@@ -99,33 +99,44 @@
 @page-row-spacing: 15px;
 
 /* 行为相关颜色 */
-@color-primary:#fa436a;
+@color-primary: #fa436a;
 
 // 灰色
 // 主要操作按钮背景色
 @background-primary: linear-gradient(269deg, #ff5d00 12%, #ff1900 86%);
-@background-coupon: linear-gradient(270deg, #F76B1C 0%, #FFC049 100%);
+@background-coupon: linear-gradient(270deg, #f76b1c 0%, #ffc049 100%);
 
 /*文字颜色*/
 @font-color-dark: #333333;
 @font-color-base: #606266;
 @font-color-light: #909399;
-@font-color-disabled: #C0C4CC;
+@font-color-disabled: #c0c4cc;
 @font-color-spec: #4399fc;
-@font-color-search: #EC1500;
-@font-color-red: #F23E33;
+@font-color-search: #ec1500;
+@font-color-red: #f23e33;
 // @font-color-red: #EC3333;
-@font-color-red: #F23E33;
-
+@font-color-red: #f23e33;
+// Font
+@font-size-11: 11px;
+@font-size-12: 12px;
+@font-size-13: 14px;
+@font-size-14: 14px;
+@font-size-16: 16px;
+@font-size-18: 18px;
+@font-size-20: 20px;
+@font-size-26: 26px;
+@font-size-28: 28px;
+@font-size-30: 30px;
+@font-size-32: 32px;
+@font-size-36: 36px;
 // 边框
 @border-sm: 2rpx;
 @border-md: 4rpx;
 @border-gray: #999;
-@border-red: #EC1500;
+@border-red: #ec1500;
 
 /* 边框颜色 */
-@border-color-dark: #DCDFE6;
-@border-color-base: #E4E7ED;
-@border-color-light: #EBEEF5;
-@border-color-search: #EC1500;
-
+@border-color-dark: #dcdfe6;
+@border-color-base: #e4e7ed;
+@border-color-light: #ebeef5;
+@border-color-search: #ec1500;

src/views/goodsList/index.less

+.group {
+  height: 100%;
+  font-size: @font-size-14;
+  &-banner {
+    position: relative;
+    height: 380px;
+    .banner-image {
+      position: absolute;
+      left: 0;
+      top: 0;
+      z-index: -1;
+    }
+    .banner-mark {
+      width: 40%;
+      height: 30px;
+      line-height: 30px;
+      border-radius: 15px;
+      color: #fff;
+    }
+  }
+
+  &-bottom {
+    padding-left: 12px;
+    padding-right: 12px;
+    padding-bottom: 12px;
+    .group-list {
+      background-color: @white;
+      border-radius: 10px;
+      overflow: hidden;
+    }
+    .list-title {
+      height: 49px;
+      line-height: 49px;
+      border-bottom: solid 1px #d8d8d8;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      .list-title-text {
+        padding-left: 8px;
+        font-size: 17px;
+      }
+    }
+
+    .list-count {
+      padding-right: 12px;
+      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;
+      }
+    }
+    .cr-list {
+      padding-left: 8px;
+      padding-right: 8px;
+    }
+
+    .group-item {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: 12px 0;
+      border-bottom: #d8d8d8 solid 1px;
+      position: relative;
+      &:last-of-type {
+        border-bottom: none;
+      }
+      &-thumb {
+        box-sizing: border-box;
+        width: 108px;
+        height: 108px;
+        background-color: #f7f8f9;
+        border-radius: 6px;
+        overflow: hidden;
+        position: relative;
+        padding: 3px;
+        margin-right: 8px;
+        .cr-image {
+          width: 100%;
+          height: 100%;
+        }
+      }
+      &-content {
+        flex: 1;
+        height: 100%;
+      }
+      &-tag {
+        position: absolute;
+        top: 0;
+        left: 0;
+        font-size: @font-size-12;
+        color: @white;
+        width: 45px;
+        height: 18px;
+        line-height: 18px;
+        text-align: center;
+        background-image: linear-gradient(269deg, #ff5d00 12%, #ff1900 86%);
+        border-radius: 6px 0 6px 0;
+      }
+      &-title {
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        line-height: 18px;
+      }
+      &-progress {
+        width: 163px;
+        overflow: hidden;
+        border-radius: 5px;
+        margin-top: 4px;
+      }
+      &-already {
+        font-size: @font-size-12;
+        color: #999999;
+        margin-top: 4px;
+        margin-bottom: 7px;
+      }
+      &-price {
+        font-size: @font-size-14;
+        color: #f70d0d;
+        margin-bottom: 4px;
+      }
+      &-delprice {
+        color: #999999;
+        font-size: @font-size-12;
+      }
+      .cr-button {
+        width: 90px;
+        height: 28px;
+        line-height: 28px;
+        border-radius: 15px;
+        position: absolute;
+        bottom: 12px;
+        right: 0;
+      }
+    }
+  }
+}

src/views/goodsList/index.vue

+<template>
+  <div class="group">
+    <!-- 配置头部动态信息 start -->
+    <div class="group-banner">
+      <!-- 动态活动背景图 -->
+      <cr-image width="100%" height="100%" class="banner-image" :src="gpImagePath" />
+      <!-- 顶部mark框 -->
+      <div class="banner-mark">135****8888刚刚获得华为P40</div>
+
+      <!-- 头像列表 -->
+      <div class="banner-portrait" />
+
+      <!-- 中间提示 文字 -->
+      <div class="banner-prompt">已有40万+人拿到商品</div>
+    </div>
+    <!-- 配置头部动态信息 end -->
+
+    <!-- 下方列表展示信息 start -->
+    <div class="group-bottom" :style="{ backgroundColor: gpBackColor }">
+      <div class="" />
+
+      <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>
+          </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"
+          >
+            <dt class="group-item-thumb">
+              <cr-image :src="item.thumbImageUrl" />
+              <span class="group-item-tag">3人团</span>
+            </dt>
+            <dd class="group-item-content">
+              <div class="group-item-title">{{ item.goodsName }}</div>
+              <cr-progress
+                class="group-item-progress"
+                stroke-width="5"
+                color="#EC1500"
+                track-color="#F7F8F9"
+                :show-pivot="false"
+                :percentage="handleProgressByStatus(item)"
+              />
+              <div class="group-item-already">已拼2333团</div>
+              <div class="group-item-price">拼团价 ¥ 0</div>
+              <del class="group-item-delprice"> ￥{{ item.activityPrice }} </del>
+              <cr-button shape="circle" type="primary">立即开团</cr-button>
+            </dd>
+          </dl>
+        </cr-list>
+      </div>
+      <!-- 下方列表展示信息 end -->
+    </div>
+  </div>
+</template>
+<script>
+import groupBuyApi from '@/api/groupBuy';
+import gpImagePath from '@/assets/images/groupBuy/bg-top.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;
+    }
+  },
+  data() {
+    return {
+      gpImagePath,
+      gpBackColor: '#FA494E',
+
+      gpCountDown: 30 * 60 * 60 * 1000,
+
+      goodsList: [],
+      loading: false,
+      finished: false
+    };
+  },
+  computed: {},
+  created() {},
+  mounted() {
+    // todo 曝光埋点
+  },
+  methods: {
+    onLoad() {
+      // 异步更新数据
+      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
+      // setTimeout(() => {
+      //   for (let i = 0; i < 10; i++) {
+      //     this.list.push(this.list.length + 1);
+      //   }
+
+      //   // 加载状态结束
+      //   this.loading = false;
+
+      //   // 数据全部加载完成
+      //   if (this.list.length >= 40) {
+      //     this.finished = true;
+      //   }
+      // }, 1000);
+
+      this.getGoodsList();
+    },
+    handleProgressByStatus(item) {
+      if (!item) return 0;
+      let percentage = 0;
+      const { showSaleCount, goodsCount } = item;
+      percentage = (goodsCount / (goodsCount + showSaleCount)) * 100;
+      percentage = percentage < 0 ? 0 : percentage;
+      // percentage = !this.topicCfg.hasStart ? 0 : percentage;
+      return Math.round(percentage * 100) / 100;
+    },
+    async getGoodsList() {
+      // const { pageSize, pageNo, activityId } = this;
+      // const { goodsSpecialId, templateDetailId } = this.topicCfg;
+      this.loading = true;
+      this.finished = false;
+      try {
+        const [res] = await groupBuyApi.getGroupList({
+          // goodsSpecialId,
+          // pageSize,
+          // pageNo,
+          // activityId,
+          // templateDetailId
+        });
+        console.log(res);
+        if (res.size) {
+          this.loading = false;
+          this.showLoading = false;
+          this.goodsList = res.items || [];
+          if (!res.hasNext) {
+            this.finished = true;
+          } else {
+            this.pageNo++;
+          }
+        }
+      } catch (error) {
+        this.loading = false;
+        this.finished = true;
+      }
+    }
+  }
+};
+</script>
+<style lang="less" src="./index.less" scoped></style>