Merge branch 'feat/1.2.2' into 'master'

Feat/1.2.2

See merge request !22

app/web/component/layout/activity/index.vue

@@ -30,6 +30,7 @@
 </template>
 <script lang="ts" src="./index.ts"></script>
 <style>
+/* stylelint-disable */
 /**
    * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
    * http://cssreset.com
@@ -194,7 +195,9 @@ body,
 #app {
   height: 100%;
 }
-
+.cr-back-top__txt {
+  margin-top: -1.5px;
+}
 .cr-popup .cr-notify {
   font-size: 14px;
 }
@@ -203,13 +206,13 @@ body,
   box-sizing: content-box;
 }
 
-@media screen and (min-width: 769px) {
+@media screen and (min-width: 769Px) {
   html {
-    font-size: 37.5px !important;
+    font-size: 37.5Px !important;
   }
 
   body {
-    max-width: 375px;
+    max-width: 375Px;
 
     /* max-height: 667Px; */
     margin: 0 auto !important;

app/web/page/activity/component/PageBottomTip/index.vue

+<template>
+  <div class="Pb-container" :style="bgColor">
+    <span class="Pb-text" :style="style">{{ txt }}</span>
+  </div>
+</template>
+<script>
+import { mapGetters } from 'vuex';
+export default {
+  name: 'PageBottomTip',
+    computed: {
+    ...mapGetters(['pageData']),
+    txt() {
+      return this.pageData.props.pageBottomTxt;
+    },
+    style() {
+      return {
+        color: this.pageData.props.pageBottomColor
+      };
+    },
+    // TODO 这样不太好
+    bgColor() {
+      return {
+        'backgroundColor': this.pageData.commonStyle.backgroundColor
+      };
+    }
+  }
+}
+</script>
+<style lang="less">
+  .Pb {
+    &-container {
+      height: 60px;
+      width: 100%;
+      text-align: center;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    &-text {
+      font-size: 14px;
+      color: #333;
+    }
+  }
+</style>
\ No newline at end of file

app/web/page/activity/view/activity/index.ts

 import { Vue, Component, Watch, Provide, Mixins } from 'vue-property-decorator';
 import { Getter, State, Mutation } from 'vuex-class';
 import FreedomContainer from '../../component/FreedomContainer/index.vue';
+import PageBottomTip from '../../component/PageBottomTip/index.vue';
 import GridLayout from '../../component/VueGridLayout/GridLayout.vue';
 import GridItem from '../../component/VueGridLayout/GridItem.vue';
 import TransformStyleMixin from '@/page/mixins/transformStyle.mixin';
 import SaMixin from '@/page/mixins/sa.mixin';
-import { getStyle, debounce } from '@/service/utils.service';
+import { getStyle, debounce, isApp } from '@/service/utils.service';
 
-@Component({ components: { FreedomContainer, GridLayout, GridItem }, name: 'Activity'})
+@Component({ components: { FreedomContainer, GridLayout, GridItem, PageBottomTip }, name: 'Activity'})
 export default class Activity extends Mixins(TransformStyleMixin, SaMixin) {
   @Getter('pageData') pageData;
   @State(state => state.activity.pageInfo.pageName) pageName;
@@ -16,6 +17,13 @@ export default class Activity extends Mixins(TransformStyleMixin, SaMixin) {
 
   @Provide() editor = this;
 
+  bottomInfo: object = {
+    x: 0,
+    y: 0,
+    w: 375,
+    h: 60,
+    i: 'page-bottom-top'
+  };
   isLayoutComReady = false;
   showBackTop = false;
   targetEle: HTMLElement | null = null;
@@ -26,6 +34,27 @@ export default class Activity extends Mixins(TransformStyleMixin, SaMixin) {
     return this.pageData && this.pageData.elements.map(v => v.point) || [];
   }
 
+  get backTopList() {
+    return isApp && this.pageData && this.pageData.props.btAttachVal ? this.pageData.props.btAttachVal : [];
+  }
+
+  @Watch('pageData', { deep: true })
+  onPageDataChange(val) {
+    const lastGridItem = val.elements[val.elements.length - 1];
+    const lastGridItemPoint = lastGridItem.point;
+    if (lastGridItemPoint && lastGridItemPoint.w) {
+      this.bottomInfo = {
+        x: 0,
+        y: 0,
+        w: 375,
+        h: 60,
+        i: 'page-bottom-top'
+      };
+      if (lastGridItemPoint.w > this.bottomInfo.w) { this.bottomInfo.w = lastGridItemPoint.w; }
+      this.bottomInfo.y = this.bottomInfo.y + lastGridItemPoint.y + lastGridItemPoint.h;
+    }
+  }
+
   @Watch('pageName', { immediate: true })
   onPageNameChange(newVal) {
     if (EASY_ENV_IS_BROWSER && newVal) {
@@ -84,9 +113,13 @@ export default class Activity extends Mixins(TransformStyleMixin, SaMixin) {
   }
 
   layoutUpdatedEvent() {
+    console.log('layoutUpdatedEvent');
     // 高度更新时重新计算导航组件样式
     this.modfiTabsStyleDebounce();
   }
+  hideBottomBtns(state) {
+    this.showBackTop = state;
+  }
 
   modfiTabsStyle() {
     const tabsEle = document.querySelector('.tabs');

app/web/page/activity/view/activity/index.vue

@@ -26,8 +26,20 @@
       >
         <component :data-index="index" :id="item.id" :containerIndex="index" :childItem="item" :is="item.name" :key="item.id" :sa-info="getSaInfo(item)" v-bind="item.props"></component>
   	  </grid-item>
+      <grid-item
+        v-if="pageData.props.showPageBottomTip"
+        :x="bottomInfo.x"
+        :y="bottomInfo.y"
+        :w="bottomInfo.w"
+        :h="bottomInfo.h"
+        :i="bottomInfo.i"
+        :static="true"
+        :key="bottomInfo.i + pageData.elements.length"
+      >
+        <page-bottom-tip />
+      </grid-item>
   	</grid-layout>
-    <cr-back-top v-if="showBackTop && pageData.props.showBackTop" />
+    <cr-back-top v-if="showBackTop && pageData.props.showBackTop" :list="backTopList" />
   </div>
 </template>
 <script lang="ts" src="./index.ts"></script>
@@ -36,7 +48,7 @@
     width: 100%;
     min-height: 100%;
     background-color: rgb(244, 244, 244);
-    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);
+    // box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);
     // overflow-x: hidden;
     // overflow-y: scroll;
     /deep/ .vue-grid-layout {

app/web/page/mixins/transformStyle.mixin.ts

@@ -37,7 +37,7 @@ export default class TransformStyleMixin extends Vue {
     const eleId = element.getAttribute('id');
     const component = this.pageData.elements.find(v => v.id === eleId);
     if (!component) { return; }
-    const point = { ...component.point, h: Math.ceil(+height) };
+    const point = { ...component.point, h: component.name === 'cs-goods-tabs' ? Math.floor(+height) : Math.ceil(+height) };
     this.setElementPoint({ id: eleId, data: point });
     console.log('adjustHeight', height, component, element.getAttribute('id'), point);
 

app/web/page/store/modules/activity/state.ts

@@ -64,7 +64,19 @@ export const defaultState = {
         backgroundImage: ''
       },
       props: {
-        showBackTop: false
+        showPageBottomTip: true,
+        pageBottomTxt: '没有更多啦～',
+        pageBottomColor: '#fff',
+        showBackTop: true,
+        btAttachVal: [
+          {
+            name: '购物车',
+            icon: 'shopping-cart-o',
+            url: 'xyqb://shoppingCartTab',
+            color: '#333',
+            background: '#fff'
+          }
+        ],
       },
       elements: [],
     }

app/web/service/sa.service.ts

@@ -6,7 +6,7 @@ import { getParameterByName, isWxMp, isApp } from '@/service/utils.service';
 
 export function initSa(router) {
   console.log('initSa', EASY_ENV_IS_BROWSER, config, window.location.pathname);
-  const activity_id = window.location.pathname.split('/')?.[2] || '';
+  const activityId = window.location.pathname.split('/')?.[2] || '';
   const vccChannel = getParameterByName('vccChannel') || getParameterByName('registerFrom');
   const sonVccChannel = getParameterByName('sonVccChannel');
   sa.init({
@@ -25,7 +25,7 @@ export function initSa(router) {
   // 添加公共属性
   sa.registerPage({
     platformType: isWxMp ? 'MP' : isApp ? 'APP' : 'H5',
-    activity_id,
+    activity_id: activityId,
     parent_channel_id: vccChannel || '',
     channel_id: sonVccChannel || ''
   });

app/web/service/utils.service.ts

@@ -92,7 +92,7 @@ export const convertPointStyle = (point, defaultStyle, directionKey = DK) => {
 
 export const getStyle = function(oElement, sName) {
   const result = oElement.currentStyle ? oElement.currentStyle[sName] : getComputedStyle(oElement, null)[sName];
-  return result.includes('px') ? result.slice(0, -2) : result;
+  return result.indexOf('px') > -1 ? result.slice(0, -2) : result;
 };
 
 export const validateType = function(obj) {

app/web/view/layout.html

@@ -9,6 +9,7 @@
     <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
     <!-- <link rel="stylesheet" type="text/css" href="https://activitystatic.lkbang.net/swiper/4.5.1/css/swiper.min.css"> -->
     <style>
+      /* stylelint-disable */
       /**
        * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
        * http://cssreset.com
@@ -152,8 +153,8 @@
       }
 
       *,
-      *::before,
-      *::after {
+      *:before,
+      *:after {
         box-sizing: border-box;
       }
 
@@ -171,20 +172,21 @@
       .cr-popup .cr-notify {
         font-size: 14px;
       }
+      .cr-back-top__txt {
+        margin-top: -1.5px;
+      }
 
       .cr-toast .cr-toast--inner {
         box-sizing: content-box;
       }
 
-      @media screen and (min-width: 769px) {
+      @media screen and (min-width: 769Px) {
         html {
-          font-size: 37.5px !important;
+          font-size: 37.5Px !important;
         }
-
         body {
-          max-width: 375px;
-
-          /* max-height: 667Px; */
+          max-width: 375Px;
+          /*max-height: 667Px;*/
           margin: 0 auto !important;
         }
       }
@@ -201,52 +203,44 @@
         z-index: 999;
         background-color: #fff;
       }
-
       .mainload .container {
         text-align: center;
       }
-
       .mainload p {
         font-size: 16px;
         color: #666;
         margin-top: 10px;
       }
-
       .mainload .circular {
         height: 36px;
         width: 36px;
         animation: loading-rotate 2s linear infinite;
       }
-
       .mainload .path {
         animation: loading-dash 1.5s ease-in-out infinite;
-        stroke-dasharray: 90, 150;
+        stroke-dasharray: 90,150;
         stroke-dashoffset: 0;
         stroke-width: 3;
         stroke: #ec3333;
         stroke-linecap: round;
       }
-
       @keyframes loading-rotate {
         to {
-          transform: rotate(1turn);
+          transform: rotate(1turn)
         }
       }
-
       @keyframes loading-dash {
         0% {
-          stroke-dasharray: 1, 200;
-          stroke-dashoffset: 0;
+          stroke-dasharray: 1,200;
+          stroke-dashoffset: 0
         }
-
         50% {
-          stroke-dasharray: 90, 150;
-          stroke-dashoffset: -40px;
+          stroke-dasharray: 90,150;
+          stroke-dashoffset: -40px
         }
-
         to {
-          stroke-dasharray: 90, 150;
-          stroke-dashoffset: -120px;
+          stroke-dasharray: 90,150;
+          stroke-dashoffset: -120px
         }
       }
 
@@ -257,11 +251,9 @@
         overflow: hidden;
         list-style: none;
         padding: 0;
-
         /* Fix of Webkit flickering */
         z-index: 1;
       }
-
       .swiper-wrapper {
         position: relative;
         width: 100%;
@@ -279,19 +271,16 @@
         -webkit-box-sizing: content-box;
         box-sizing: content-box;
       }
-
       .swiper-container-android .swiper-slide,
       .swiper-wrapper {
-        -webkit-transform: translate3d(0, 0, 0);
-        transform: translate3d(0, 0, 0);
+        -webkit-transform: translate3d(0px, 0, 0);
+        transform: translate3d(0px, 0, 0);
       }
-
       .swiper-container-multirow > .swiper-wrapper {
         -webkit-flex-wrap: wrap;
         -ms-flex-wrap: wrap;
         flex-wrap: wrap;
       }
-
       .swiper-slide {
         -webkit-flex-shrink: 0;
         -ms-flex-negative: 0;
@@ -305,7 +294,6 @@
         transition-property: transform;
         transition-property: transform, -webkit-transform;
       }
-
       .swiper-slide-invisible-blank {
         visibility: hidden;
       }
@@ -326,7 +314,6 @@
     <!-- <script src="https://activitystatic.lkbang.net/vue/2.6.11/vue.min.js"></script> -->
     <!-- <script src="https://activitystatic.lkbang.net/vue-router/3.2.0/vue-router.min.js"></script> -->
     <!-- <script src="https://activitystatic.lkbang.net/vuex/3.4.0/vuex.min.js"></script> -->
-    
     <script src="https://activitystatic.lkbang.net/sa-sdk-javascript/1.15.16/sensorsdata.min.js"></script>
     <script src="https://activitystatic.lkbang.net/swiper/4.5.1/swiper.min.js"></script>
     <script src="https://activitystatic.lkbang.net/axios/0.19.2/axios.min.js"></script>

config/apollo.ssr.json

-{}
\ No newline at end of file
+{
+  "apiHost": "https://quantum-blocks-test1.liangkebang.net",
+    "h5Host": "https://quantum-h5-test1.liangkebang.net",
+    "opapiHost": "https://opapi-test1.liangkebang.net",
+    "passportHost": "https://passportapi-test1.liangkebang.net",
+    "kdspHost": "https://talos-test1.liangkebang.net",
+    "loginUrl": "",
+    "h5ShopHost": "https://tenet-test1.liangkebang.net/#"
+}
\ No newline at end of file

package-lock.json

@@ -1648,9 +1648,9 @@
       "integrity": "sha512-uOCUKu5mvX3PWee+7ZFXQSNIR1V5SN2JVE2yANmW9/wQOgpEct291gXGok8VMw0009HlTWB4JATURPwyOP2DFg=="
     },
     "@qg/cherry-ui": {
-      "version": "2.20.20",
-      "resolved": "http://npmprivate.quantgroups.com/@qg%2fcherry-ui/-/cherry-ui-2.20.20.tgz",
-      "integrity": "sha512-gTSydwNq6lhMgBvYzGMO8cfM+45JN8LNaTAvPobjyUNJ+bY6JFM4kE7ZZeRs9gUsaVRhDOY15U8SUP7GgvxouA==",
+      "version": "2.21.1",
+      "resolved": "http://npmprivate.quantgroups.com/@qg%2fcherry-ui/-/cherry-ui-2.21.1.tgz",
+      "integrity": "sha512-OQ9njfH6cs6FaNqPb7W+hEe/yftpdLXyjGXo2g4IwY7o/9Z5EH6Bn6B5X6dFGOka7LSyXyWRSfZzX0upIIpDFw==",
       "requires": {
         "@popperjs/core": "^2.5.4",
         "vue-lazyload": "^1.3.3",
@@ -1658,12 +1658,12 @@
       }
     },
     "@qg/citrus-ui": {
-      "version": "0.1.14",
-      "resolved": "http://npmprivate.quantgroups.com/@qg%2fcitrus-ui/-/citrus-ui-0.1.14.tgz",
-      "integrity": "sha512-88AJuAsBMugnMFkGA60S1quAH7UEh6iNjTqvq/hbQjV5UUSxksdAgdcF0+7ASSPb8aqek4XV2fdRrvC+YBtQxA==",
+      "version": "0.2.1",
+      "resolved": "http://npmprivate.quantgroups.com/@qg%2fcitrus-ui/-/citrus-ui-0.2.1.tgz",
+      "integrity": "sha512-HuN8iQ3oZujUR/v039rOHlSrg4UphQYowCYA1zdHnReldR7ZDzyFamxMz2vUR7iUmlOIlD4yBt8nEERpX+X7TQ==",
       "requires": {
         "@better-scroll/core": "^2.1.1",
-        "@qg/cherry-ui": "^2.20.20",
+        "@qg/cherry-ui": "^2.21.1",
         "@qg/js-bridge": "^1.1.11",
         "axios": "^0.21.1",
         "intersection-observer": "^0.12.0",
@@ -20870,11 +20870,11 @@
       "integrity": "sha1-8z/pz7Urv9UgqhgyO8ZdsRCht2w="
     },
     "rollup": {
-      "version": "2.51.1",
-      "resolved": "http://npmprivate.quantgroups.com/rollup/-/rollup-2.51.1.tgz",
-      "integrity": "sha512-8xfDbAtBleXotb6qKEHWuo/jkn94a9dVqGc7Rwl3sqspCVlnCfbRek7ldhCARSi7h32H0xR4QThm1t9zHN+3uw==",
+      "version": "2.52.3",
+      "resolved": "http://npmprivate.quantgroups.com/rollup/-/rollup-2.52.3.tgz",
+      "integrity": "sha512-QF3Sju8Kl2z0osI4unyOLyUudyhOMK6G0AeqJWgfiyigqLAlnNrfBcDWDx+f1cqn+JU2iIYVkDrgQ6/KtwEfrg==",
       "requires": {
-        "fsevents": "~2.3.1"
+        "fsevents": "~2.3.2"
       },
       "dependencies": {
         "fsevents": {
@@ -20949,9 +20949,9 @@
       }
     },
     "sa-sdk-javascript": {
-      "version": "1.17.2",
-      "resolved": "http://npmprivate.quantgroups.com/sa-sdk-javascript/-/sa-sdk-javascript-1.17.2.tgz",
-      "integrity": "sha512-Nvfy3OTF0x5vTkhW/131u4V+nVaRBz0dL5JjPC4tdR16CXEW8zzii0cj+CR8FeUZ9+DYUJHz8Owb5Dlbix6iOw=="
+      "version": "1.18.2",
+      "resolved": "http://npmprivate.quantgroups.com/sa-sdk-javascript/-/sa-sdk-javascript-1.18.2.tgz",
+      "integrity": "sha512-DzNLzfhfOlQluu/UxYjm5ri2qjHy1mND5l+CX+jDM150GUZmArxEnJ+vyeLMT0oHRYfAksxegsObSeYxVhXVxw=="
     },
     "safe-buffer": {
       "version": "5.2.1",

package.json

@@ -23,8 +23,8 @@
   "dependencies": {
     "@better-scroll/core": "^2.0.5",
     "@qg/apollo-nodejs": "^2.1.2",
-    "@qg/cherry-ui": "2.20.20",
-    "@qg/citrus-ui": "0.1.14",
+    "@qg/cherry-ui": "2.21.1",
+    "@qg/citrus-ui": "0.2.1",
     "babel-plugin-transform-vue-jsx": "^4.0.1",
     "cos-nodejs-sdk-v5": "^2.9.12",
     "egg": "^2.3.0",