fix(bottom-tip): 调整底部计算方式

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
@@ -203,13 +204,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/view/activity/index.ts

@@ -6,7 +6,7 @@ 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, PageBottomTip }, name: 'Activity'})
 export default class Activity extends Mixins(TransformStyleMixin, SaMixin) {
@@ -35,12 +35,18 @@ export default class Activity extends Mixins(TransformStyleMixin, SaMixin) {
   }
 
   get backTopList() {
-    return this.pageData && this.pageData.props.showShopCart ? this.pageData.props.backTopAttachInfo : [];
+    return isApp && this.pageData && this.pageData.props.showShopCart ? [
+      {
+        icon: 'shopping-cart-o',
+        url: 'xyqb://shoppingCartTab'
+      }
+    ] : [];
   }
 
   @Watch('pageData', { deep: true })
   onPageDataChange(val) {
     const lastGridItem = val.elements[val.elements.length - 1];
+    const isTab = lastGridItem.name === 'cs-goods-tabs';
     // if (!lastGridItem) { return; }
     // if (lastGridItem.name === 'cs-goods-tabs' && lastGridItem.child.length > 0) {
     //   lastGridItem = lastGridItem.child[lastGridItem.child.length - 1];
@@ -55,7 +61,7 @@ export default class Activity extends Mixins(TransformStyleMixin, SaMixin) {
         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;
+      this.bottomInfo.y = this.bottomInfo.y + lastGridItemPoint.y + lastGridItemPoint.h + (isTab ? -1 : 0);
     }
   }
 
@@ -121,6 +127,9 @@ export default class Activity extends Mixins(TransformStyleMixin, SaMixin) {
     // 高度更新时重新计算导航组件样式
     this.modfiTabsStyleDebounce();
   }
+  hideBottomBtns(state) {
+    this.showBackTop = state;
+  }
 
   modfiTabsStyle() {
     const tabsEle = document.querySelector('.tabs');

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

@@ -48,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) + 1 };
+    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/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;
       }
 
@@ -176,15 +177,13 @@
         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 +200,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 +248,9 @@
         overflow: hidden;
         list-style: none;
         padding: 0;
-
         /* Fix of Webkit flickering */
         z-index: 1;
       }
-
       .swiper-wrapper {
         position: relative;
         width: 100%;
@@ -279,19 +268,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 +291,6 @@
         transition-property: transform;
         transition-property: transform, -webkit-transform;
       }
-
       .swiper-slide-invisible-blank {
         visibility: hidden;
       }
@@ -326,7 +311,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>

package-lock.json

@@ -1648,9 +1648,9 @@
       "integrity": "sha512-uOCUKu5mvX3PWee+7ZFXQSNIR1V5SN2JVE2yANmW9/wQOgpEct291gXGok8VMw0009HlTWB4JATURPwyOP2DFg=="
     },
     "@qg/cherry-ui": {
-      "version": "2.21.1-beta8",
-      "resolved": "http://npmprivate.quantgroups.com/@qg%2fcherry-ui/-/cherry-ui-2.21.1-beta8.tgz",
-      "integrity": "sha512-6bSv1iTQ73IF2NG5ssQbIg/DDwa3r3kv/t6DWfp/9y/aVB1Eyj4ddVesP3+TysSKf+S5ZN4unva/M5Lj3OPuHg==",
+      "version": "2.21.1-beta9",
+      "resolved": "http://npmprivate.quantgroups.com/@qg%2fcherry-ui/-/cherry-ui-2.21.1-beta9.tgz",
+      "integrity": "sha512-evaqcwGPrg/RqgHZW3pFU2QpvmIlNZMA83QdGV7U58XrkTuQ4C4wE6FgB0M7kGTZzf/IpfjOZL5ZuGfSaOlGUw==",
       "requires": {
         "@popperjs/core": "^2.5.4",
         "vue-lazyload": "^1.3.3",
@@ -1658,9 +1658,9 @@
       }
     },
     "@qg/citrus-ui": {
-      "version": "0.1.15-beta4",
-      "resolved": "http://npmprivate.quantgroups.com/@qg%2fcitrus-ui/-/citrus-ui-0.1.15-beta4.tgz",
-      "integrity": "sha512-DqLR4peJapLIOQrVjvDjRsWwve4qJ0/+IZczDNYSjr2b2XB2KRahf9vYNEDDjEiRwnbDFVQYRPlVrA/BKbn0uw==",
+      "version": "0.1.15-beta5",
+      "resolved": "http://npmprivate.quantgroups.com/@qg%2fcitrus-ui/-/citrus-ui-0.1.15-beta5.tgz",
+      "integrity": "sha512-IP0MI8wvs6hgpBKF0ruv8DYOJB0x5tWTISFjDGhCc4JqiPVM/wtOzNNRDFA5+nHaQrOYH+QpX4P/sRXdlWkChA==",
       "requires": {
         "@better-scroll/core": "^2.1.1",
         "@qg/cherry-ui": "^2.21.1-beta5",

package.json

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