feat:列表页面接口

src/api/groupBuy.js

@@ -20,23 +20,18 @@ export default {
 
   // 查询活动模板列表-根据活动id
   getTemplateList(activityId) {
-    return http.get(
-      `http://yapi.quantgroups.com/mock/351/api/kdsp/activity/activity-goods-special/template-list`,
-      {
-        // return http.get(`${talosHost}/api/kdsp/activity/activity-goods-special/template-list`, {
-        params: { activityId }
-      }
-    );
+    return http.get(`${talosHost}/api/kdsp/activity/activity-goods-special/template-list`, {
+      params: { activityId }
+    });
   },
   // 入口活动列表
   getGoodsList(params) {
-    return http.get(
-      `http://yapi.quantgroups.com/mock/351/api/kdsp/activity/activity-goods-special/goods-list`,
-      {
-        // return http.get(`${talosHost}/api/kdsp/activity/activity-goods-special/goods-list`, {
-        params
-      }
-    );
+    return http.get(`${talosHost}/api/kdsp/activity/activity-goods-special/goods-list/v2`, {
+      params
+    });
+    // return http.get(`http://yapi.quantgroups.com/mock/351/api/kdsp/activity/activity-goods-special/goods-list`, {
+    //   params
+    // });
   },
   getGroupAvator(data) {
     return http.get(`http://yapi.quantgroups.com/mock/479/goods/getAvator`, data, {

src/components/groupSwiper.vue

 <template>
   <div class="avator-swiper" @click="onSlidePrevChange">
     <swiper ref="mySwiper" :options="swiperOptions" class="avator-swiper_container">
-      <swiper-slide v-for="(item, index) in avatorData" :key="index" class="avator-swiper_item">
-        <img :src="item" />
+      <swiper-slide
+        v-for="(item, index) in avatorData"
+        :key="index"
+        :data-name="item.name"
+        :data-src="item.avatar"
+        class="avator-swiper_item"
+      >
+        <img :src="item.avatar" />
       </swiper-slide>
     </swiper>
     <div class="avator-swiper_right">
@@ -31,12 +37,13 @@ export default {
     const vm = this;
     return {
       rightImgPath: '',
+      avatorItem: null,
       swiperOptions: {
         loop: true,
         initialSlide: 0,
         slidesPerView: 7,
         spaceBetween: 4,
-        speed: 1100,
+        speed: 700,
         centeredSlides: true,
         watchSlidesProgress: true,
         allowTouchMove: false,
@@ -50,11 +57,13 @@ export default {
             const activeIndex = this.activeIndex;
             const slideLeft = this.slides.eq(activeIndex - 3);
             const slideRight = this.slides.eq(activeIndex + 4);
+            vm.avatorItem = vm.getAvatorItem(slideLeft);
+            vm.rightImgPath = slideRight.data('src');
             slideLeft.addClass('ani-left');
             slideRight.addClass('ani-right');
-            vm.rightImgPath = slideRight.find('img').attr('src');
           },
           transitionEnd: function() {
+            vm.$emit('animation-event-end', vm.avatorItem);
             for (let i = 0; i < this.slides.length; i++) {
               let slide = this.slides.eq(i);
               slide.removeClass('ani-left ani-right');
@@ -71,12 +80,25 @@ export default {
   },
   watch: {
     avatorData() {
+      clearInterval(this.timer);
       this.onSlidePrevChange();
     }
   },
+  mounted() {
+    this.onSlidePrevChange();
+  },
   methods: {
     onSlidePrevChange() {
-      this.swiper.slidePrev();
+      this.timer = setInterval(() => {
+        this.$emit('animation-event-start');
+        this.swiper.slidePrev();
+      }, 10000);
+    },
+    getAvatorItem(ele) {
+      return {
+        src: ele.data('src'),
+        name: ele.data('name')
+      };
     }
   }
 };
@@ -85,16 +107,18 @@ export default {
 @keyframes leftToRight {
   from {
     transform: scale(0.3, 0.3);
+    transform-origin: right right;
     opacity: 0;
   }
   to {
     transform: scale(1, 1);
+    transform-origin: left left;
     opacity: 1;
   }
 }
 .ani-left {
   transform-origin: right;
-  animation: leftToRight 0.7s linear;
+  animation: leftToRight 1s linear;
 }
 @keyframes scaleTo {
   to {

src/views/goodsList/components/goodsCard.vue

 <template>
-  <dl class="group-item" :class="{ disabled: !goodsItem.goodsCount }">
+  <dl class="group-item" :class="{ disabled: groupStop }">
     <dt class="group-item-thumb">
       <cr-image :src="goodsItem.thumbImageUrl" />
-      <span class="group-item-tag">3人团</span>
+      <span class="group-item-tag">{{ goodsItem.groupBuyLimitUserCount }}人团</span>
     </dt>
     <dd class="group-item-content">
       <div class="group-item-title">{{ goodsItem.goodsName }}</div>
@@ -15,9 +15,11 @@
         :show-pivot="false"
         :percentage="handleProgressByStatus(goodsItem)"
       />
-      <div class="group-item-already">已拼2333团</div>
-      <div class="group-item-price">成团价 ¥ <sup class="group-item-sup">0</sup></div>
-      <div class="group-item-delprice">售价 ￥{{ goodsItem.activityPrice }}</div>
+      <div class="group-item-already">已拼{{ goodsItem.groupBuySuccessCount }}团</div>
+      <div class="group-item-price">
+        成团价 ¥ <sup class="group-item-sup">{{ goodsItem.activityPrice }}</sup>
+      </div>
+      <div class="group-item-delprice">售价 ￥{{ goodsItem.price }}</div>
       <!-- 立即开团 -->
       <!-- 已抢光 -->
       <!-- 未开始 -->
@@ -25,18 +27,21 @@
       <cr-button
         shape="circle"
         type="primary"
-        :disabled="!goodsItem.goodsCount"
+        :disabled="btnByStatus.d"
         @click.stop="onButtonClick"
-        >立即开团</cr-button
+        >{{ btnByStatus.t }}</cr-button
       >
     </dd>
   </dl>
 </template>
 <script>
-const EVENT_BUTTON_CLICK = 'on-button-click';
 export default {
   name: 'GoodsCard',
   props: {
+    topicCfg: {
+      type: Object,
+      default: () => {}
+    },
     goodsItem: {
       type: Object,
       default: () => {}
@@ -45,6 +50,37 @@ export default {
       type: Number
     }
   },
+  data() {
+    return {};
+  },
+  computed: {
+    groupStop() {
+      const { hasStop, hasStart } = this.topicCfg;
+      const { goodsCount } = this.goodsItem;
+      return !hasStart ? false : hasStop ? true : goodsCount !== 0 ? false : true;
+    },
+    btnByStatus() {
+      const { hasStop, hasStart } = this.topicCfg;
+      const { goodsCount } = this.goodsItem;
+      if (!hasStart) {
+        return { t: '未开始', d: true, s: 0 };
+      }
+      if (hasStop) {
+        return { t: '已结束', d: true, s: 1 };
+      }
+      if (goodsCount !== 0) {
+        return { t: '立即开团', d: false, s: 2 };
+      }
+      return { t: '已抢光', d: true, s: 3 };
+      // return !hasStart
+      //   ? { t: '未开始', d: true, s: 0 }
+      //   : hasStop
+      //   ? { t: '已结束', d: true, s: 1 }
+      //   : goodsCount !== 0
+      //   ? { t: '立即开团', d: false, s: 2 }
+      //   : { t: '已抢光', d: true, s: 3 };
+    }
+  },
   methods: {
     handleProgressByStatus(item) {
       if (!item) return 0;
@@ -52,11 +88,33 @@ export default {
       const { showSaleCount, goodsCount } = item;
       percentage = (goodsCount / (goodsCount + showSaleCount)) * 100;
       percentage = percentage < 0 ? 0 : percentage;
-      // percentage = !this.topicCfg.hasStart ? 0 : percentage;
+      percentage = this.btnByStatus.d ? 0 : percentage;
       return Math.round(percentage * 100) / 100;
     },
     onButtonClick() {
-      this.$emit(EVENT_BUTTON_CLICK, this.goodsItem);
+      const { s } = this.btnByStatus;
+      // if (btnByStatus.s === 2) {
+      //   // 正常跳转
+      //   return false;
+      // }
+      this.$dialog({
+        message: '请在微信小程序中参与此活动哦~',
+        confirmButtonText: s === 3 ? '重新选择' : '订阅消息',
+        onConfirm: () => {
+          // todo 跳转到小程序
+          // let getScheme = async function() {
+          //   const [res] = await groupBuy.getScheme({
+          //     miniUrl: 'pages/user/login'
+          //   });
+          //   const url = res;
+          //   window.location.href = url; // todo 需要验证
+          // };
+          // getScheme();
+          // getScheme = null;
+        }
+      });
+
+      // this.$emit(EVENT_BUTTON_CLICK, this.goodsItem);
     }
   }
 };
@@ -67,7 +125,7 @@ export default {
   justify-content: center;
   align-items: center;
   padding: 12px 0;
-  border-bottom: #d8d8d8 solid 1px;
+  border-bottom: #ededed solid 1px;
   position: relative;
   &:last-of-type {
     border-bottom: none;
@@ -147,6 +205,8 @@ export default {
     position: absolute;
     bottom: 12px;
     right: 0;
+    display: flex;
+    align-items: center;
   }
 
   &.disabled {

src/views/goodsList/index.less

@@ -48,7 +48,7 @@
     .list-title {
       height: 49px;
       line-height: 49px;
-      border-bottom: solid 1px #d8d8d8;
+      border-bottom: solid 1px #ededed;
       display: flex;
       align-items: center;
       justify-content: space-between;

src/views/goodsList/index.vue

@@ -14,20 +14,16 @@
       <div class="group-portrait">
         <div class="group-portrait-head">
           <div class="group-portrait-swipe" @click="switchAnimation">
-            <swipeCustomerInfo v-model="showSwipe" />
+            <swipeCustomerInfo v-model="showSwipe" :avatar="customers.src" :name="customers.name" />
           </div>
           <div class="group-portrait-ul">
-            <groupSwiper v-if="avatorData.length" :avator-data="avatorData" />
+            <groupSwiper
+              v-if="topicCfg.groupBuyUserInfoList"
+              :avator-data="topicCfg.groupBuyUserInfoList"
+              @animation-event-start="animationEventStart"
+              @animation-event-end="animationEventEnd"
+            />
           </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">
           已有 {{ topicCfg.groupBuyUserCount }}人 参与拼单
@@ -37,16 +33,23 @@
         <div class="list-title">
           <b class="list-title-text">今日拼团</b>
           <div class="list-count">
-            <span class="list-count-label">距结束：</span>
+            <span class="list-count-label">{{ topicCfg.stateTxt }}：</span>
             <count-down :end-time="gpCountDown" />
           </div>
         </div>
-        <cr-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
+        <cr-list
+          v-if="!reload"
+          v-model="loading"
+          :finished="finished"
+          finished-text="没有更多了"
+          @load="onLoad"
+        >
           <goods-card
             v-for="(item, index) in goodsList"
             :key="index"
             :index="index"
             :goods-item="item"
+            :topic-cfg="topicCfg"
             @on-button-click="handleBtnClick"
           />
         </cr-list>
@@ -66,7 +69,6 @@ import store from '@/store';
 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 goodsCard from './components/goodsCard';
 import groupSwiper from '@/components/groupSwiper';
 import { isNull } from '@/service/validation.service';
@@ -94,18 +96,7 @@ export default {
       },
 
       showSwipe: false,
-      gpImagePath,
-      gpBackColor: '#FA494E',
-      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'
-      ],
-
+      customers: {},
       // goodsSpecialId	是
 
       pageNo: 1, //	是
@@ -113,7 +104,7 @@ export default {
       activityId: '', //是
 
       topicIndex: 0,
-      topicList: [],
+      topicList: {},
 
       goodsList: [],
       loading: false,
@@ -127,23 +118,30 @@ export default {
 
     // 更具goodsSpecialId 获取查询活动模板列表-对应数据项
     topicCfg() {
-      const { topicList, topicIndex } = this;
-      const info = topicList[topicIndex] || { items: [] };
+      const { topicList } = this;
+      const info = topicList || {};
       return info;
     },
 
     gpCountDown() {
       const { endTime } = this.topicCfg;
-      return +new Date(endTime);
+      // if (hasStart) {
+      //   return +new Date(endTime || 0);
+      // } else {
+
+      // };
+      // if (){}
+
+      return +new Date(endTime || 0);
     }
   },
   created() {
+    this.reload = true;
     // console.log(this.isShowShare);
     // console.log(this.activityId);
     // this.hasLogin = !!localStorage.get('vccToken');
   },
   mounted() {
-    // todo 曝光埋点
     this.$nextTick(() => {
       // this.avatorTimeSyncChange();
       this.getAvatorList();
@@ -170,13 +168,19 @@ export default {
     }
   },
   methods: {
+    animationEventStart() {
+      this.showSwipe = false;
+    },
+    animationEventEnd(avator) {
+      this.customers = avator;
+      this.showSwipe = true;
+    },
+
     async goToMyorder() {
       const isLogin = this.checkLogin();
-      console.log(isLogin);
-      // const isLogin = await this.checkLogin();
-      // console.log(isLogin);
-      // if (isApp) this.nativeBridge = new Bridge();
-      // else if (isWxMp) this.nativeBridge = new MpBridge();
+      if (!isLogin) {
+        this.$router.push('/createOrder');
+      }
     },
     async openShareEvent() {
       let options = await this.getShareData();
@@ -217,26 +221,33 @@ export default {
       this.animate.animateAuto = !this.animate.animateAuto;
     },
     handleBtnClick(item) {
-      console.log(item.skuNo);
-      // skuNo /groupBuy/skuInfo
-      // this.$router.push(`/groupBuy/skuInfo?skuNo=${item.skuNo}`);
-      this.$router.push(`/groupBuy/skuInfoSmallPic?skuNo=${item.skuNo}`);
+      const { activityId } = this;
+      const { goodsSpecialId, templateId, templateDetailIds } = this.topicCfg;
+      const { skuNo } = item;
+      if (item.goodsCount !== 0) {
+        this.$router.push({
+          path: '/groupBuy/skuInfo',
+          query: { skuNo, goodsSpecialId, templateId, templateDetailIds, activityId }
+        });
+      } else {
+        this.$notify({ type: 'warning', message: '该商品已抢完' });
+      }
     },
     onLoad() {
-      if (this.topicCfg.goodsSpecialId) {
+      if (this.topicCfg) {
         this.getGoodsList();
       }
     },
 
     async getGoodsList() {
       const { pageSize, pageNo, activityId } = this;
-      const { goodsSpecialId, templateDetailId } = this.topicCfg;
+      const { goodsSpecialIds, templateDetailIds } = this.topicCfg;
       this.loading = true;
       this.finished = false;
       try {
         const [res] = await groupBuyApi.getGoodsList({
-          goodsSpecialId,
-          templateDetailId,
+          goodsSpecialIds,
+          templateDetailIds,
           pageSize,
           pageNo,
           activityId
@@ -244,6 +255,7 @@ export default {
         if (res.size) {
           this.loading = false;
           this.showLoading = false;
+          res.items[5].goodsCount = 0;
           this.goodsList = res.items || [];
           if (!res.hasNext) {
             this.finished = true;
@@ -259,7 +271,7 @@ export default {
   }
 };
 async function getActivityList(urlQuery, next) {
-  const { activityId, goodsSpecialId } = urlQuery;
+  const { activityId } = urlQuery;
   // eslint-disable-next-line prettier/prettier
   let nextFns = function(cb) {
     cb(next);
@@ -268,39 +280,32 @@ async function getActivityList(urlQuery, next) {
     nextFns = next;
   }
   const [result] = await groupBuyApi.getTemplateList(activityId);
-  if (result && result.length) {
-    const list = result.map(i => {
-      const { endTime, startTime } = i;
-      i.remainTime = handleRemainTime('', endTime)[0];
-      // i.hasStop = i.remainTime < 1;
-      i.hasStop = 0 < 1;
-      i.willTime = handleRemainTime('', startTime)[0];
-      i.hasStart = handleRemainTime(startTime, '')[0] > 0;
-      i = { ...i, ...handleDateFormat(startTime, endTime) };
-      i.stateTxt = !i.hasStart ? '即将开始' : i.hasStop ? '已结束' : '热购中';
-      return i;
-    });
-    // .filter(i => !i.hasStop);
-    let activityIndex = list.findIndex(item => {
-      if (goodsSpecialId) {
-        return item.goodsSpecialId == goodsSpecialId;
-      } else {
-        return item.hasStart;
-      }
-    });
-    activityIndex = activityIndex > -1 ? activityIndex : 0;
-    const { title } = list[activityIndex] || { items: [] };
+  if (result?.t) {
+    let t = result.t;
+    t.startTime = '2021-09-15 00:00:00';
+    t.endTime = '2021-09-22 00:00:00';
+    // t.startTime = '2021-09-15 00:00:00';
+    // t.endTime = '2021-09-18 00:00:00';
+    const { endTime, startTime } = t;
+    t.remainTime = handleRemainTime('', endTime)[0];
+    t.hasStop = t.remainTime < 1;
+    t.willTime = handleRemainTime('', startTime)[0];
+    t.hasStart = handleRemainTime(startTime, '')[0] > 0;
+    t = { ...t, ...handleDateFormat(startTime, endTime) };
+    t.stateTxt = !t.hasStart ? '即将开始' : t.hasStop ? '活动已结束' : '距结束';
+
+    const { title } = t;
     store.commit('CHANGE_TITLE', title || '活动页');
     nextFns(vm => {
       vm.activityId = activityId;
-      vm.topicList = list;
-      vm.topicIndex = activityIndex;
+      vm.topicList = t;
+      // vm.topicIndex = activityIndex;
       localStorage.set('activityId', activityId);
       // const { hasStop } = vm.topicCfg;
       // if (hasStop || !list.length) {
       //   vm.showOverTip = true;
       // }
-      // vm.getGoodsList();
+      vm.getGoodsList();
       vm.reload = false;
     });
   } else {