feat:样式修改

src/App.vue

@@ -13,6 +13,9 @@
     </div>
     <net-error />
     <goods-share ref="gdShare" />
+    <div v-if="groupLoading" class="group-list-loading">
+      <!-- <img src="@/assets/images/group-list.png" /> -->
+    </div>
   </div>
 </template>
 <script>
@@ -38,6 +41,7 @@ export default {
       header: state => state.pay.header,
       loading: state => state.pay.loading,
       loadingPic: state => state.pay.loadingPic,
+      groupLoading: state => state.pay.groupLoading,
       isPrimordialBrowser: state => state.pay.isPrimordialBrowser,
       isWeixinBrowser: state => state.pay.isWeixinBrowser
     })
@@ -98,4 +102,14 @@ export default {
     }
   }
 }
+.group-list-loading {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: url(~@/assets/images/group-list.png) no-repeat center;
+  background-size: 100%;
+  z-index: 10;
+}
 </style>

src/components/countDown.vue

@@ -48,8 +48,14 @@ export default {
 };
 </script>
 <style lang="less" scoped>
+.cr-count-down {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
 .colon {
   display: inline-block;
+  line-height: 18px;
   margin: 0 @padding-unit;
   color: @red-dark;
 }

src/components/groupSwiper.vue

@@ -17,6 +17,7 @@
     <div v-if="isLoop" class="avator_right avator-swiper_item">
       <img :src="rightImgPath" />
     </div>
+    <span class="avator-swiper-bg" :style="{ backgroundColor: bgColor }">&nbsp;</span>
   </div>
 </template>
 <script>
@@ -29,6 +30,11 @@ export default {
     swiperSlide
   },
   props: {
+    bgColor: {
+      required: true,
+      type: String,
+      default: ''
+    },
     avatorData: {
       type: Array,
       default() {
@@ -41,18 +47,20 @@ export default {
     const isLoop = vm.avatorData.length < 7 ? false : true;
     const autoplay = isLoop ? { delay: 1500, reverseDirection: true } : false;
     return {
+      timer: null,
       isLoop,
       isAnimate: false,
       leftImgPath: '',
       rightImgPath: '',
       avatorItem: null,
       swiperOptions: {
-        loop: true,
+        loop: isLoop,
         initialSlide: 0,
         slidesPerView: 7,
-        spaceBetween: 6,
+        // spaceBetween: 8,
         speed: 600,
         centeredSlides: true,
+        centeredSlidesBounds: true,
         allowTouchMove: false,
         autoplay,
         on: {
@@ -69,10 +77,11 @@ export default {
             vm.leftImgPath = slideLeft.data('src');
             slideLeft.addClass('ani-opt');
             slideRight.addClass('ani-opt');
-            const timer = setTimeout(() => {
+            clearTimeout(vm.timer);
+            vm.timer = setTimeout(() => {
               vm.$emit('animation-event-end', vm.avatorItem);
-              clearTimeout(timer);
-            }, 600);
+              clearTimeout(vm.timer);
+            }, 800);
           },
           transitionEnd: function() {
             vm.isAnimate = false;
@@ -96,6 +105,9 @@ export default {
       this.$emit('animation-event-end', { src: fristItem.avatar, name: fristItem.name });
     }
   },
+  destroyed() {
+    clearTimeout(this.timer);
+  },
   methods: {
     getAvatorItem(ele) {
       return {
@@ -109,16 +121,16 @@ export default {
 <style lang="less" scoped>
 @keyframes leftToRight {
   from {
-    transform: scale(0.3, 0.3);
+    transform: scale(0.3);
     opacity: 0;
   }
   to {
-    transform: scale(1, 1);
+    transform: scale(1);
     opacity: 1;
   }
 }
 .anileft {
-  transform-origin: center;
+  transform-origin: right;
   animation: leftToRight 0.6s linear;
 }
 
@@ -131,24 +143,35 @@ export default {
   top: 0px;
 }
 .avator_right {
-  right: 2px;
+  right: 8px;
 }
 .avator_left {
   left: 0px;
 }
+
+.avator-swiper-bg {
+  width: 4px;
+  height: 24px;
+  position: absolute;
+  top: 0;
+  right: -2px;
+  background-color: #000;
+  z-index: 2;
+}
 .avator-swiper {
-  width: 100%;
-  margin: 0 auto !important;
   position: relative;
+  width: 100%;
+  height: 24px;
   &_container {
     transition-timing-function: linear;
   }
   &_item {
     height: 24px;
     width: 24px;
-    box-sizing: border-box;
     transition: transform 0 0.2s linear;
+    box-sizing: border-box;
     img {
+      display: block;
       height: 24px;
       width: 24px;
       border-radius: 50%;

src/router/groupBuy.js

@@ -15,7 +15,8 @@ module.exports = [
     path: '/groupBuy/list',
     name: 'groupBuyList',
     component: () => import('../views/goodsList/index.vue'),
-    meta: { title: '0元购大牌', keepLive: true }
+    // , keepLive: true
+    meta: { title: '0元购大牌' }
   },
   {
     path: '/orderList/:status',

src/store/module.js

@@ -6,6 +6,7 @@ const state = {
   title: '支付中心',
   loading: false,
   loadingPic: false,
+  groupLoading: false,
   meta: {},
   keepAliveMap: [],
   isPrimordialBrowser: false, // 是否是原生浏览器
@@ -50,6 +51,9 @@ const actions = {
   },
   save_openlink_host({ commit }, host) {
     commit(types.SAVE_LINK_HOST, host);
+  },
+  change_group_loading({ commit }, loading) {
+    commit(types.GGROUP_LOADING, loading);
   }
 };
 
@@ -128,6 +132,9 @@ const mutations = {
   },
   [types.CHANGE_LOADING_PIC](state, loading) {
     state.loadingPic = loading;
+  },
+  [types.GGROUP_LOADING](state, loading) {
+    state.groupLoading = loading;
   }
 };
 

src/store/type.js

@@ -10,3 +10,4 @@ export const DEL_KEEP_ALIVE = 'DEL_KEEP_ALIVE';
 export const CLEAR_KEEP_ALIVE = 'CLEAR_KEEP_ALIVE';
 export const GOODS_AVATOR_INFO = 'GOODS_AVATOR_INFO';
 export const SAVE_LINK_HOST = 'SAVE_LINK_HOST';
+export const GGROUP_LOADING = 'GGROUP_LOADING';

src/views/goodsList/components/goodsCard.vue

@@ -22,15 +22,11 @@
       <!-- 已抢光 -->
       <!-- 未开始 -->
       <!-- 已结束 -->
-      <cr-button
-        size="small"
-        shape="circle"
-        type="primary"
-        :class="{
-          btnabled: btnByStatus.d
-        }"
-        >{{ btnByStatus.t }}</cr-button
-      >
+      <div class="group-item-button">
+        <cr-button size="small" shape="circle" type="primary" :class="btnByStatus.cls">{{
+          btnByStatus.t
+        }}</cr-button>
+      </div>
     </dd>
   </dl>
 </template>
@@ -64,22 +60,15 @@ export default {
       const { hasStop, hasStart } = this.topicCfg;
       const { goodsCount } = this.goodsItem;
       if (!hasStart) {
-        return { t: '未开始', d: true, s: 0 };
+        return { t: '未开始', d: true, s: 0, cls: 'not-start' };
       }
       if (hasStop) {
-        return { t: '已结束', d: true, s: 1 };
+        return { t: '已结束', d: true, s: 1, cls: 'btnabled' };
       }
       if (goodsCount !== 0) {
-        return { t: '立即开团', d: false, s: 2 };
+        return { t: '立即开团', d: false, s: 2, cls: '' };
       }
-      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 };
+      return { t: '已抢光', d: true, s: 3, cls: 'btnabled' };
     }
   },
   methods: {
@@ -227,21 +216,37 @@ export default {
     color: #999999;
     font-size: @font-size-12;
   }
+  &-button {
+    position: absolute;
+    bottom: 12px;
+    right: 0;
+  }
   .cr-button {
+    position: relative;
     width: 90px;
     height: 28px;
     line-height: 28px;
     border-radius: 15px;
-    position: absolute;
-    bottom: 12px;
-    right: 0;
     display: flex;
     align-items: center;
     justify-content: center;
+    &::after {
+      content: '';
+      position: absolute;
+      width: 110%;
+      height: 110%;
+      left: 0;
+      top: 0;
+      margin-left: -2%;
+      margin-top: -2%;
+
+      z-index: 1;
+      background-color: rgba(255, 255, 255, 0.6);
+    }
   }
   .btnabled {
     cursor: not-allowed;
-    opacity: 0.7;
+    opacity: 0.6;
   }
 
   &.disabled {

src/views/goodsList/index.less

@@ -24,7 +24,7 @@
     right: 12px;
     bottom: 60px;
     z-index: 1;
-    background: #fff url(~@/assets/images/share.png) no-repeat center;
+    background: #fff url(~@/assets/images/share-icon.png) no-repeat center;
     background-size: 100%;
     border-radius: 50%;
     overflow: hidden;
@@ -60,8 +60,11 @@
       justify-content: center;
       align-items: center;
       &-label {
-        font-size: 12px;
         color: #333333;
+        font-size: 12px;
+        display: block;
+        height: 18px;
+        line-height: 18px;
       }
     }
     .cr-list {
@@ -91,11 +94,11 @@
       }
 
       &-ul {
-        margin-left: 5px;
-        flex: 1;
+        // width: 216px;
+        width: 224px;
+        height: 24px;
         display: flex;
         justify-content: space-around;
-        overflow: hidden;
       }
       &-image {
         height: 23px;
@@ -123,24 +126,5 @@
         animation-fill-mode: forwards;
       }
     }
-    .loading {
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background-color: #fff;
-      z-index: 999;
-      font-size: 18px;
-      padding: 16px 12px 0;
-      text-align: center;
-      box-sizing: border-box;
-      @{deep} .cr-skeleton {
-        margin-bottom: 12px;
-        &__content {
-          width: 100% !important;
-        }
-      }
-    }
   }
 }

src/views/goodsList/index.vue

 <template>
   <!-- 配置活动背景色 -->
   <div class="group" :style="{ backgroundColor: goodsTemp.bgcolor }">
+    <!-- <cr-skeleton v-if="showLoading" class="loading" /> -->
     <div v-if="!isShowShare" class="group-puzzle" @click="goToMyorder">我的拼团</div>
     <!-- 配置头部动态信息 start -->
     <div class="group-top">
@@ -20,6 +21,7 @@
             <groupSwiper
               v-if="showLoops && goodsTemp.groupBuyUserInfoList.length"
               ref="swipeRota"
+              :bg-color="goodsTemp.bgcolor"
               :avator-data="goodsTemp.groupBuyUserInfoList"
               @animation-event-start="animationEventStart"
               @animation-event-end="animationEventEnd"
@@ -57,20 +59,9 @@
           />
         </cr-list>
       </div>
-      <div v-if="showLoading" class="loading">
-        <cr-skeleton title :row="5" />
-        <cr-skeleton title :row="5" />
-        <cr-skeleton title :row="5" />
-        <cr-skeleton title :row="5" />
-      </div>
       <!-- 下方列表展示信息 end -->
     </div>
-    <div v-if="!isShowShare" class="group-share" @click="openShareEvent">
-      <!-- <dt class="group-share-icon">
-        <cr-image src="@/assets/images/share.png" />
-      </dt>
-      <dd class="group-share-text">分享</dd> -->
-    </div>
+    <div v-if="!isShowShare" class="group-share" @click="openShareEvent">&nbsp;</div>
   </div>
 </template>
 <script>
@@ -85,8 +76,8 @@ import localStorage from '@/service/localStorage.service';
 import goodsCheckMixin from '@/mixins/goodsCheck.mixin';
 import { setAppTitleColor, EventBus } from '@/service/utils.service';
 import { saTrackEvent } from '@/service/sa.service';
-import { isNull } from '@/service/validation.service';
-let topicIndex;
+// import { isNull } from '@/service/validation.service';
+// let topicIndex;
 export default {
   // eslint-disable-next-line vue/name-property-casing
   name: 'groupBuyList',
@@ -140,14 +131,15 @@ export default {
     }
   },
   created() {
-    this.reload = true;
-  },
-  deactivated() {
-    this.showLoops = false;
-  },
-  activated() {
     this.showLoops = true;
+    this.reload = true;
   },
+  // deactivated() {
+  //   this.showLoops = false;
+  // },
+  // activated() {
+  //   this.showLoops = true;
+  // },
   beforeRouteEnter(to, from, next) {
     const { activityId } = to.query;
     if (!activityId || isNaN(activityId)) {
@@ -157,17 +149,18 @@ export default {
       });
       return;
     } else {
-      if (isNull(topicIndex)) {
-        getActivityList(to.query, next);
-      } else {
-        if (localStorage.get('activityId') !== +activityId) {
-          getActivityList(to.query, next);
-          return;
-        }
-        next(vm => {
-          store.commit('CHANGE_TITLE', vm.goodsTemp.title || '活动页');
-        });
-      }
+      getActivityList(to.query, next);
+      // if (isNull(topicIndex)) {
+      //   getActivityList(to.query, next);
+      // } else {
+      //   if (localStorage.get('activityId') !== +activityId) {
+      //     getActivityList(to.query, next);
+      //     return;
+      //   }
+      //   next(vm => {
+      //     store.commit('CHANGE_TITLE', vm.goodsTemp.title || '活动页');
+      //   });
+      // }
     }
   },
   methods: {
@@ -300,12 +293,13 @@ async function getActivityList(urlQuery, next) {
   if (typeof next === 'function') {
     nextFns = next;
   }
+  store.dispatch('change_group_loading', true);
   const [result] = await groupBuyApi.getTemplateList(activityId);
   if (result?.templateInfo) {
     let t = result.templateInfo;
     // 即将开始
-    // t.startTime = '2021-09-29 20:00:00';
-    // t.endTime = '2021-09-30 20:02:00';
+    // t.startTime = '2021-10-01 20:00:00';
+    // t.endTime = '2021-10-02 20:02:00';
     // 正在活动中
     // t.startTime = '2021-09-23 00:00:00';
     // t.endTime = '2021-09-25 00:00:00';
@@ -324,7 +318,7 @@ async function getActivityList(urlQuery, next) {
     // store.dispatch('save_openlink_host', t.openLink);
     store.commit('CHANGE_TITLE', t.title || '活动页');
     nextFns(vm => {
-      topicIndex = 0;
+      // topicIndex = 0;
       vm.activityId = activityId;
       vm.goodsTemp = t;
       localStorage.set('activityId', activityId);
@@ -332,6 +326,7 @@ async function getActivityList(urlQuery, next) {
       vm.pageNo = 1;
       vm.getGoodsList(true);
       vm.reload = false;
+      store.dispatch('change_group_loading', false);
     });
   } else {
     nextFns(vm => {