feat:分享模块

src/api/groupBuy.js

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

src/components/groupShare.vue

+<template>
+  <div class="share">
+    <cr-share
+      v-model="showShare"
+      :types="types"
+      @close="shareCloseChange"
+      @click-share-item="bundleShareClickItem"
+    />
+  </div>
+</template>
+<script>
+import { isWxMp, isApp } from '@/service/validation.service';
+export default {
+  name: 'GroupShare',
+  components: {},
+  props: {},
+  data() {
+    return {
+      showShare: false,
+      types: [
+        { value: 'weixin', disabled: false },
+        { value: 'pic', disabled: false }
+      ]
+    };
+  },
+  computed: {
+    notBwoser() {
+      return !isWxMp && !isApp;
+    }
+  },
+  watch: {},
+  methods: {
+    async open() {
+      try {
+        // if (this.notBwoser) {
+        //   this.$toast('非小程序和App设备!');
+        //   return;
+        // }
+        let options = await this.getShareData();
+        console.log(options, isWxMp, isApp);
+
+        // 判断是否时小程序平台
+        if (isWxMp) {
+          this.showShare = true;
+        }
+        // 判断是否是App
+        if (isApp) {
+          this.shareAppChange(options);
+          console.log('App');
+        }
+      } catch (err) {
+        this.$toast('调用分享失败!');
+      }
+    },
+
+    async getShareData() {
+      return Promise.resolve(1);
+      // await
+    },
+
+    shareCloseChange() {
+      this.$emit('hideShare', false);
+    },
+    bundleShareClickItem(ev) {
+      console.log(ev);
+      console.log(this.nativeBridge);
+    },
+    shareAppChange({ title, desc, link, imgUrl }) {
+      const data = {
+        event: 'showShareView',
+        data: {
+          platform: ['weChat', 'timeLine', 'QQ', 'QQZone', 'CopyLink'], //依次分别是微信、朋友圈、QQ好友、QQ空间、复制链接
+          shareDic: {
+            title,
+            desc,
+            link, // 页面地址
+            imgUrl // 图片地址
+          }
+        }
+      };
+      this.nativeBridge.showShareView(data);
+    }
+  }
+};
+</script>
+<style lang="less"></style>

src/components/groupSwiper.vue

@@ -2,9 +2,7 @@
   <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">
-        <div class="avator-swiper_item">
         <img :src="item" />
-        </div>
       </swiper-slide>
     </swiper>
     <div class="avator-swiper_right">
@@ -76,9 +74,6 @@ export default {
       this.onSlidePrevChange();
     }
   },
-  mounted() {
-    console.log(this.swiper);
-  },
   methods: {
     onSlidePrevChange() {
       this.swiper.slidePrev();
@@ -119,7 +114,7 @@ export default {
     width: 25px;
     position: absolute;
     right: 3px;
-    top: 2px;
+    top: 0px;
   }
   &_item {
     transition: transform 0.2s linear;
@@ -128,6 +123,7 @@ export default {
       height: 25px;
       width: 25px;
       border-radius: 50%;
+      border: solid @white 1px;
     }
   }
 }

src/service/cherryUI.service.js

@@ -55,7 +55,8 @@ import {
   Skeleton,
   Card,
   Progress,
-  GoodsAction
+  GoodsAction,
+  Share
 } from '@qg/cherry-ui';
 import DialogFn from '@qg/cherry-ui/src/dialog/func';
 // import "@qg/cherry-ui/dist/cherry.css";
@@ -113,6 +114,7 @@ Vue.use(Skeleton);
 Vue.use(Card);
 Vue.use(Progress);
 Vue.use(GoodsAction);
+Vue.use(Share);
 
 // const _proto = Vue.prototype;
 // const proto = Object.create(_proto);

src/views/goodsList/components/goodsCard.vue

 <template>
-  <dl class="group-item" :class="{ disabled: index === 5 }">
+  <dl class="group-item" :class="{ disabled: !goodsItem.goodsCount }">
     <dt class="group-item-thumb">
       <cr-image :src="goodsItem.thumbImageUrl" />
       <span class="group-item-tag">3人团</span>
     </dt>
     <dd class="group-item-content">
       <div class="group-item-title">{{ goodsItem.goodsName }}</div>
-      <!-- 进度条：已瓶团消耗库村/该活动商品初始库存 -->
+      <!-- 进度条：已拼团消耗库存/该活动商品初始库存 -->
       <cr-progress
         class="group-item-progress"
         stroke-width="5"
@@ -22,11 +22,18 @@
       <!-- 已抢光 -->
       <!-- 未开始 -->
       <!-- 已结束 -->
-      <cr-button shape="circle" type="primary" :disabled="false">立即开团</cr-button>
+      <cr-button
+        shape="circle"
+        type="primary"
+        :disabled="!goodsItem.goodsCount"
+        @click.stop="onButtonClick"
+        >立即开团</cr-button
+      >
     </dd>
   </dl>
 </template>
 <script>
+const EVENT_BUTTON_CLICK = 'on-button-click';
 export default {
   name: 'GoodsCard',
   props: {
@@ -45,10 +52,11 @@ 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;
+    },
+    onButtonClick() {
+      this.$emit(EVENT_BUTTON_CLICK, this.goodsItem);
     }
   }
 };

src/views/goodsList/components/utils.js

+/*
+ * @Description:
+ * @Date: 2020-12-01 18:06:18
+ * @LastEditors: gzw
+ * @LastEditTime: 2021-08-03 15:53:02
+ */
+import { parseTime } from '@/service/utils.service';
+
+export function handleRemainTime(start, end) {
+  const startTime = (start ? new Date(start.replace(/-|\./g, '/')) : new Date()).getTime();
+  const endTime = (end ? new Date(end.replace(/-|\./g, '/')) : new Date()).getTime();
+  return [endTime - startTime, startTime, endTime];
+}
+
+export function handleDateFormat(start, end) {
+  const dateArr = handleRemainTime(start, end);
+  const isDay = dateArr[0] > 60 * 60 * 1000 * 23;
+  const formatExp = isDay ? '{m}.{d}' : '{h}:{i}';
+  return { isDay, dateFormat: parseTime(dateArr[1], formatExp) };
+}

src/views/goodsList/index.less

@@ -3,7 +3,16 @@
   &-top {
     height: 380px;
   }
-
+  &-share {
+    position: fixed;
+    right: 0;
+    top: 10px;
+    z-index: 1;
+    color: #e92615;
+    background-image: linear-gradient(180deg, #ffd545 0%, #ffcc79 100%);
+    border-radius: 16px 0 0 16px;
+    padding: 6px 12px 6px 16px;
+  }
   &-bottom {
     padding-left: 12px;
     padding-right: 12px;

src/views/goodsList/index.vue

 <template>
-  <div class="group" :style="{ backgroundColor: gpBackColor }">
+  <!-- 配置活动背景色 -->
+  <div class="group" :style="{ backgroundColor: topicCfg.bgcolor }">
+    <div class="group-share" @click="openShareEvent">我的拼团</div>
     <!-- 配置头部动态信息 start -->
     <div class="group-top">
       <!-- 动态活动背景图 -->
-      <cr-image width="100%" height="100%" class="group-top-image" :src="gpImagePath" />
+      <cr-image width="100%" height="100%" class="group-top-image" :src="topicCfg.img" />
     </div>
     <!-- 配置头部动态信息 end -->
 
@@ -27,7 +29,9 @@
             </li>
           </ul> -->
         </div>
-        <div class="group-portrait-num" @click="showSwipe = !showSwipe">已有 1230人 参与拼单</div>
+        <div class="group-portrait-num" @click="showSwipe = !showSwipe">
+          已有 {{ topicCfg.groupBuyUserCount }}人 参与拼单
+        </div>
       </div>
       <div class="group-list">
         <div class="list-title">
@@ -43,29 +47,39 @@
             :key="index"
             :index="index"
             :goods-item="item"
+            @on-button-click="handleBtnClick"
           />
         </cr-list>
       </div>
       <!-- 下方列表展示信息 end -->
     </div>
+    <goods-share ref="gdShare" />
   </div>
 </template>
 <script>
+import store from '@/store';
 import groupBuyApi from '@/api/groupBuy';
+import goodsShare from '@/components/groupShare';
 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';
+import { handleRemainTime, handleDateFormat } from './components/utils';
+import localStorage from '@/service/localStorage.service';
+let topicIndex;
 export default {
   // beforeRouteEnter(to, from, next) {
   //   next(vm => {});
   // },
   // eslint-disable-next-line vue/name-property-casing
   name: 'groupBuyList',
-  components: { countDown, swipeCustomerInfo, goodsCard, groupSwiper },
+  components: { countDown, swipeCustomerInfo, goodsCard, groupSwiper, goodsShare },
   data() {
     return {
+      showShare: false,
+
       avatorData: [],
 
       animate: {
@@ -88,15 +102,37 @@ export default {
         '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-12 00:00:00').getTime(),
+
+      // goodsSpecialId	是
+
+      pageNo: 1, //	是
+      pageSize: 10, //	否
+      activityId: '', //是
+
+      topicIndex: 0,
+      topicList: [],
 
       goodsList: [],
       loading: false,
       finished: false
     };
   },
-  computed: {},
-  created() {},
+  computed: {
+    // 更具goodsSpecialId 获取查询活动模板列表-对应数据项
+    topicCfg() {
+      const { topicList, topicIndex } = this;
+      const info = topicList[topicIndex] || { items: [] };
+      return info;
+    },
+
+    gpCountDown() {
+      const { endTime } = this.topicCfg;
+      return +new Date(endTime);
+    }
+  },
+  created() {
+    this.hasLogin = !!localStorage.get('vccToken');
+  },
   mounted() {
     // todo 曝光埋点
     this.$nextTick(() => {
@@ -104,7 +140,30 @@ export default {
       this.getAvatorList();
     });
   },
+  beforeRouteEnter(to, from, next) {
+    // if (;topicIndex) {
+    //   next();
+    // }
+
+    const { activityId } = to.query;
+    if (!activityId || isNaN(activityId)) {
+      next({
+        path: '/error',
+        replace: true
+      });
+      return;
+    } else {
+      if (isNull(topicIndex)) {
+        getActivityList(to.query, next);
+      } else {
+        next();
+      }
+    }
+  },
   methods: {
+    openShareEvent() {
+      this.$refs.gdShare.open();
+    },
     avatorTimeSyncChange() {
       setInterval(() => {
         this.showSwipe = false;
@@ -130,41 +189,31 @@ export default {
     switchAnimation() {
       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}`);
+    },
     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);
-
+      if (this.topicCfg.goodsSpecialId) {
         this.getGoodsList();
+      }
     },
 
     async getGoodsList() {
-      // const { pageSize, pageNo, activityId } = this;
-      // const { goodsSpecialId, templateDetailId } = this.topicCfg;
+      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
+        const [res] = await groupBuyApi.getGoodsList({
+          goodsSpecialId,
+          templateDetailId,
+          pageSize,
+          pageNo,
+          activityId
         });
-        console.log(res);
         if (res.size) {
           this.loading = false;
           this.showLoading = false;
@@ -182,5 +231,56 @@ export default {
     }
   }
 };
+async function getActivityList(urlQuery, next) {
+  const { activityId, goodsSpecialId } = urlQuery;
+  // eslint-disable-next-line prettier/prettier
+  let nextFns = function(cb) {
+    cb(next);
+  };
+  if (typeof next === 'function') {
+    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: [] };
+    store.commit('CHANGE_TITLE', title || '活动页');
+    nextFns(vm => {
+      vm.activityId = activityId;
+      vm.topicList = list;
+      vm.topicIndex = activityIndex;
+      // const { hasStop } = vm.topicCfg;
+      // if (hasStop || !list.length) {
+      //   vm.showOverTip = true;
+      // }
+      // vm.getGoodsList();
+      vm.reload = false;
+    });
+  } else {
+    nextFns(vm => {
+      vm.$toast({ type: 'danger', message: '当前活动不存在' });
+    });
+    return;
+  }
+}
 </script>
 <style lang="less" src="./index.less" scoped></style>