gxd-uni-library-editx 1.0.0

package/src/components/XdLayout/XdLayout.vue

@@ -0,0 +1,634 @@
+<template>
+  <view class="xd-Layout" id="xd-Layout">
+    
+    <view
+      v-if="initStatus && tabbarData !== null "
+      class="xd-Layout__animation"
+      :class="{
+        animation: startAnimation,
+        nohasanimation: !isAnimation
+      }"
+    >
+      <view class="xd-Layout__top-height"
+        :style="{
+          height: (topHeight +navBarHeight + statusBarHeight) +'rpx',
+          backgroundColor: bgImage ? '' : background,
+          backgroundImage: 'url('+ (isUseBgImage ? bgImage: '') +')',
+          backgroundPosition: 'top center',
+          backgroundSize: '100%',
+          backgroundRepeat: 'no-repeat',
+
+        }"
+      ></view>
+      <view class="xd-Layout__bar"
+        v-if="showBar"
+        :style="{
+          height: navBarHeight + statusBarHeight + 'rpx'
+        }
+      ">
+        <xd-bar
+          :bar-nav-height="navBarHeight"
+          :bar-status-height="statusBarHeight"
+          :title="title"
+          :show-back="showBack"
+          :color="barTextColor"
+          :bg-color="barBgColor"
+          :bg-image="bgImage"
+          :is-slot-top-bar="isSlotTopBar"
+          :text-align="barTextAlign || tabbarData.barTextAlign "
+          @back="backEvent"
+        >
+          <slot name="topBar" v-if="isSlotTopBar"></slot>
+        </xd-bar>
+      </view>
+      <!--top-->
+      <view class="xd-Layout__top animation-top"
+        v-show="contentStatus"
+        :style="{
+          height: topHeight + 'rpx',
+          top: (navBarHeight + statusBarHeight) + 'rpx',
+          zIndex: (view ? 1490: 1001)
+        }"
+
+      >
+        <slot name="top"></slot>
+      </view>
+      <!--top-->
+      <!--body-->
+      
+      <view
+        class="xd-Layout__body animation-body"
+        ref="xd-Layout__body"
+        :style="{
+          minHeight: getMinHeight,
+          backgroundColor: bgImage ? '' : background,
+          backgroundImage: 'url('+ (isUseBgImage ? bgImage: '') +')',
+          backgroundPosition: isUseBgImage ?
+          ('center -'+ (topHeight + navBarHeight + statusBarHeight) +'rpx'): 'center top',
+          zIndex: (view ? 1500: 999)
+        }"
+      >
+        <view v-show="contentStatus">
+          <slot></slot>
+        </view>
+      </view>
+      <!--body-->
+      <!--bottom-->
+      <view class="xd-Layout__bottom animation-bottom"
+        v-if="bottomHeight"
+        v-show="contentStatus"
+        :style="{
+          height: bottomHeight + 'rpx',
+          bottom: getBottom + 'rpx',
+          background: background,
+          zIndex: (view ? 1600: 1000)
+        }"
+      >
+        <slot name="footer"></slot>
+      </view>
+      <!--bottom-->
+      <!--tabbar-->
+      <view class="xd-Layout__tabbar"
+        v-if="showFooter && tabbarData !== null"
+        :style="{
+          height: footerHeight + 'rpx',
+          background: tabbarBackground,
+          zIndex: (view ? 1601: 1001)
+         }"
+      >
+        <slot name="footerBar"></slot>
+      </view>
+      <!--tabbar-->
+      <view class="xd-Layout__footer-height" :style="{height: (bottomHeight + footerHeight) + 'rpx' }"></view>
+    </view>
+    <xd-logs v-if="isLogs" :logs="uiLogs" :error-logs="uiErrorLogs"></xd-logs>
+    <xd-confirm></xd-confirm>
+    <xd-loading></xd-loading>
+    <xd-tips></xd-tips>
+    <view class="xd-Layout__padding" id="xd-Layout__padding"></view>
+  </view>
+</template>
+
+<script>
+  import XdBar from "@/components/XdBar/XdBar";
+  import XdFooterTabbar from "@/components/XdFooterTabbar/XdFooterTabbar";
+  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+  import XdConfirm from "@/components/XdConfirm/XdConfirm";
+  import XdLoading from "@/components/XdLoading/XdLoading";
+  import XdTips from "@/components/XdTips/XdTips";
+  import XdLogs from "@/components/Xdlogs/XdLogs";
+  import {mapState} from 'vuex';
+
+
+  /**
+   * XdLayout 全局Ui
+   * @description Layout
+   * 内容区域高度：（100vh - barHeight - searchHeight - topHeight - bottomHeight - footerHeight）
+   * 内容区域支持普通view和scoll-view标签，使用scoll-view做滚动有性能问题
+   * 使用view标签移除onPullUpRefresh，onScroll事件，可以使用页面级onReachBottom和onPageScroll
+   * @tutorial
+   * @property {Number} topHeight           顶部自定义高度 默认:0
+   * @property {Number} bottomHeight        底部自定义高度 默认:0
+   * @property {Boolean} showBack           显示返回按钮 默认：true
+   * @property {Boolean} showBar            显示bar文字颜色 默认：true
+   * @property {String}  title              当前页面标题名称 默认不显示标题
+   * @property {String} barTextColor        bar标题颜色 默认：''
+   * @property {String} background          bar背景颜色 默认：#fff
+   * @property {Boolean} showFooter         是否展示底部tabbar 默认：true
+   * @property {Boolean}  isAnimation       是否支持动画 默认：true
+   * @property {Boolean}  isUseBgImage      内容区域是否使用背景图片 默认：false
+   *
+   * @event {Function} onDone               初始化完成事件 {bottom: 0, top: 0}
+   * @event {Function} onBack               点击返回键事件
+   *
+   * 支持插槽（3个插槽） 默认，top, footer，bar
+   */
+
+  export default {
+    name: "XdLayout",
+    components: {
+      XdTips,
+      XdConfirm,
+      XdLoading,
+      XdFontIcon,
+      XdFooterTabbar,
+      XdBar,
+      XdLogs
+    },
+    props: {
+      topHeight: {
+        type: Number,
+        default: 0,
+      },
+  
+      footerHeight: {
+        type: Number,
+        default: 0,
+      },
+
+      isSlotTopBar:{
+        type: Boolean,
+        default: false
+      },
+
+
+      bottomHeight: {
+        type: Number,
+        default: 0,
+      },
+
+      showBack: {
+        type: Boolean,
+        default: true
+      },
+
+      showBar: {
+        type: Boolean,
+        default: true
+      },
+
+      title: {
+        type: String,
+        default: '',
+      },
+
+      barTextAlign:{
+        type: String,
+        default: 'center', //center,left
+      },
+
+      barTextColor: {
+        type: String,
+        default: '#fff',
+      },
+
+      barBackgroundColotr: {
+        type: String,
+        default: '',
+      },
+
+      barBackgroundImage: {
+        type: String,
+        default: '',
+      },
+
+      background:{
+        type: String,
+        default: '#fff',
+      },
+
+      showFooter: {
+        type: Boolean,
+        default: true,
+      },
+
+      isAnimation:{
+        type: Boolean,
+        default: true,
+      },
+
+      isUseBgImage:{
+        type: Boolean,
+        default: false,
+      }
+    },
+    data() {
+      return {
+        startTime: new Date().getTime(),
+        startAnimation : false, //开始动画效果
+        doneAnimation: false, //完成动画效果
+        defaultImage: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MDM4QTUyMkNDRUQyMTFFQzkzRTZDOUJBNTFBNTA3RDUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MDM4QTUyMkRDRUQyMTFFQzkzRTZDOUJBNTFBNTA3RDUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDozMkE3N0VGRkNFRDAxMUVDOTNFNkM5QkE1MUE1MDdENSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDozMkE3N0YwMENFRDAxMUVDOTNFNkM5QkE1MUE1MDdENSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PliHXlsAAAAQSURBVHjaYvj//z8DQIABAAj8Av7bok0WAAAAAElFTkSuQmCC',
+        bgImage: '',
+        barBgColor: '', //bar背景颜色
+        systemInfoSyn: null,
+
+        //底部
+        tabbarBackground: '#fff',
+        tabbarData: null, //底部数据
+
+        //加载完成
+        initStatus: false,
+        contentStatus: false,
+
+
+        time: 0,
+        createTime: 0,
+        mountedTime: 0,
+
+        //需要计算的变量
+        navBarHeight : 110, //顶部高度（rpx）
+        statusBarHeight: 0, //状态栏高度(rpx)
+        safeHeight: null, //底部安全高度
+
+        //logs
+        uiLogs: {},
+        uiErrorLogs: {},
+        isLogs: false,
+
+        view: false,
+        observer: null,
+
+      }
+    },
+    computed: {
+      ...mapState([
+        'errorLogs',
+        'logs'
+      ]),
+
+      getBottom(){
+        return this.footerHeight
+      },
+
+      getMinHeight(){
+        if(this.initStatus) {
+          let temp = uni.getSystemInfoSync();
+
+          // #ifdef H5
+          if(temp.model === 'PC' && parent.window) {
+            temp.screenHeight = (parent.window.innerHeight || parent.window.document.documentElement.clientHeight || parent.window.document.body.clientHeight) - 160;
+          }
+          //#endif
+
+          let bar = this.navBarHeight;
+          let nav = this.statusBarHeight;
+          let bottom = this.bottomHeight;
+          let top = this.topHeight;
+          let footerBar = this.footerHeight;
+          let safeBottom = this.safeHeight;
+          let min = this.getPX(bar + nav + bottom + top + footerBar + safeBottom);
+          return `${temp.screenHeight - min}px`;
+        }
+        else {
+          return 0
+        }
+      },
+    },
+    watch:{
+      errorLogs(value){
+        this.uiErrorLogs = value;
+      },
+      logs(value){
+        this.uiLogs = value;
+      }
+    },
+
+    created() {
+      //切换页面之后数据清空
+      this.uiErrorLogs = this.errorLogs;
+      this.uiLogs = this.logs;
+      this.isLogs = this.$settings.isLogs;
+  
+      //判断是否是打包环境
+      if (process.env.VUE_APP_CUSTOM_ENV) {
+        this.view = process.env.VUE_APP_CUSTOM_ENV.view === 'preview';
+      }
+
+      //配置文件
+      if(this.$webSetting) {
+        //顶部背景图片
+        if(this.$webSetting.barBackgroundImage) this.bgImage = this.$webSetting.barBackgroundImage;
+        if(this.barBackgroundImage) this.bgImage = this.barBackgroundImage;
+
+        //顶部背景颜色
+        if(this.$webSetting.barBackground) this.barBgColor = this.$webSetting.barBackground;
+        if(this.barBackgroundColotr) this.barBgColor = this.barBackgroundColotr;
+
+        this.tabbarData = this.$webSetting;
+        this.tabbarBackground = this.$webSetting.backgroundColor;
+      }
+
+      //获取胶囊相关数据
+      this.setMenuButtonBounding();
+
+      //重缓存中获取底部安全距离
+      if(uni.getStorageSync('xd-layout')) {
+        this.safeHeight = uni.getStorageSync('xd-layout')['safeHeight'];
+        this.getSafeBottom();
+      }
+
+
+
+
+    },
+    mounted(){
+      this.$nextTick(()=>{
+        const query = uni.createSelectorQuery().in(this);
+        let box = query.select('#xd-Layout');
+        let config = {attributes: true, childList: true, subtree: true};
+        this.observer = new MutationObserver(mutations => {
+          this.doChange()
+        });
+        this.observer.observe(box._component.$el, config)
+      })
+    },
+
+    beforeMount() {
+      if (this.safeHeight === null) this.getSafeBottom();
+    },
+
+    beforeDestroy(){
+      this.observer.disconnect();
+    },
+
+    methods: {
+      /**
+       * @description  获取胶囊相关数据
+       */
+      setMenuButtonBounding(){
+        this.systemInfoSyn = uni.getSystemInfoSync();
+
+        //ifdef APP-PLUS
+        this.navBarHeight = 80
+        //endif
+
+        //#ifdef H5
+        if (!this.showBar && this.title) {
+          document.title = this.title;
+        }
+        //#endif
+
+        // #ifdef H5
+        if (!this.showBar) this.navBarHeight = 0;
+        // #endif
+
+        // 设置状态栏高度
+        this.statusBarHeight = this.getRpx(this.systemInfoSyn.statusBarHeight);
+
+        // h5 app mp-alipay
+        // #ifndef H5 || APP-PLUS || MP-ALIPAY
+        // 获取胶囊的位置
+        const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
+        // (胶囊底部高度 - 状态栏的高度) + (胶囊顶部高度 - 状态栏内的高度) = 导航栏的高度
+        this.navBarHeight = this.getRpx((menuButtonInfo.bottom - this.systemInfoSyn.statusBarHeight) + (menuButtonInfo.top - this.systemInfoSyn.statusBarHeight));
+        // #endif
+
+        if(!this.showFooter) {
+          this.tabbarHeigth = 0;
+        }
+
+        this.createTime = new Date().getTime() - this.startTime;
+      },
+
+      /**
+       * @description 获取底部安全距离数据
+       */
+      getSafeBottom(){
+        //已缓存安全距离
+        if(this.safeHeight !== null) {
+          this.time = new Date().getTime() - this.startTime;
+          this.initStatus = true;
+          this.layoutDone();
+          return
+        }
+
+        //未缓存安全距离
+        this.$nextTick(()=>{
+          this.$xdUniHelper.getWindowHeight(['#xd-Layout__padding'], this)
+            .then(res=>{
+              this.safeHeight = Math.max(
+                this.getRpx(res['#xd-Layout__padding']['height']),
+                this.systemInfoSyn.safeAreaInsets.bottom
+              );
+
+              this.time = new Date().getTime() - this.startTime;
+              this.initStatus = true;
+              //保存计算属性
+              uni.setStorageSync('xd-layout', {
+                safeHeight: this.safeHeight
+              });
+              this.layoutDone();
+            })
+            .catch()
+        })
+
+      },
+
+      /**
+       * @description 框架完成加载设置事件
+       */
+      layoutDone(){
+        this.$nextTick(()=>{
+          this.contentStatus = true;
+          this.doneEvent();
+          this.initAnimation()
+        })
+      },
+
+      /**
+       * @description 打包框架数据
+       * @returns {Object}
+       */
+      getLayoutInfo(){
+        return {
+          bodyMinHeightPx: parseFloat(this.getMinHeight),
+          bodyMinHeightRpx: this.getRpx(parseFloat(this.getMinHeight)),
+          safeHeightRpx: this.safeHeight, //底部安全高度
+          safeHeightPx:this.getPX(this.safeHeight), //底部安全高度
+          bodyMinHeight: this.getMinHeight, //底部安全高度
+          bottom: this.bottomHeight + this.tabbarHeigth , //底部已被占有高度（rpx)
+          top: this.navBarHeight + this.statusBarHeight + this.topHeight, //距离顶部已被占有高度（rpx）
+          topHeight: this.topHeight,
+          bottomHeight: this.bottomHeight,
+        }
+      },
+
+      /**
+       * @description rpx转px
+       * @param num
+       * @returns {number}
+       */
+      getPX(num){
+        return this.$xdUniHelper.multiplyFloatNumber(num,this.$rpxNum);
+      },
+
+      /**
+       * @description px转rpx
+       * @param num
+       * @returns {number}
+       */
+      getRpx(num){
+        return this.$xdUniHelper.multiplyFloatNumber(num,this.$pxNum);
+      },
+
+      initAnimation() {
+        //启动动画效果
+        if (this.isAnimation) {
+          //页面已加载时间
+          let useTime = new Date().getTime() - this.startTime;
+          let max = 50;
+
+          //初始化使用事件小于50毫秒
+          if (useTime < max) {
+            setTimeout(() => {
+              this.startAnimation = true;
+            }, (max - useTime) < 10 ? 10 : (max - useTime));
+          }
+
+          //大于50毫秒直接开始动画
+          else {
+            this.startAnimation = true;
+          }
+        }
+        //关闭动画效果
+        else {
+          this.$nextTick(()=>{
+            this.doneAnimation = true;
+          })
+        }
+      },
+
+      backEvent() {
+        this.$emit('onBack');
+        this.$emit('back');
+      },
+
+      doChange(){
+        console.log('onChange', this.getLayoutInfo());
+        this.$emit('onChange', this.getLayoutInfo());
+      },
+
+      doneEvent(){
+        this.$emit('onDone', this.getLayoutInfo());
+        this.$emit('done', this.getLayoutInfo());
+      },
+
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  .xd-Layout {
+    background-size: 100%;
+    background-position: top center;
+    min-height: 100vh;
+    background-repeat: no-repeat;
+
+    &__padding {
+      .safe-area();
+      position: fixed;
+      top:-9999px;
+      left: -9999px;
+      width: 100%;
+      height: 0;
+    }
+
+    &__bar {
+      position: fixed;
+      z-index: 1300;
+      background: #fff;
+      top: 0;
+      right: 0;
+    }
+
+    &__body {
+      z-index: 999;
+      position: relative;
+      margin-left: 100vh;
+      background-size: 100%;
+      background-position: top center;
+      background-repeat: no-repeat;
+    }
+
+    &__top {
+      position: fixed;
+      z-index: 1001;
+      right: 0;
+      left: 100vw;
+      width: 100%;
+    }
+
+    &__bottom {
+      position: fixed;
+      z-index: 1000;
+      width: 100%;
+      left: 100vw;
+      right: 0;
+      .safe-area();
+    }
+
+    &__footer {
+      &-height {
+        .safe-area();
+      }
+    }
+
+    &__tabbar {
+      position: fixed;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      z-index: 1200;
+      .safe-area();
+    }
+
+    /**动画效果**/
+    &__animation {
+      margin-left: 100vw;
+      width: 100vw;
+      background-size: 100%;
+      min-height: 100vh;
+      background-repeat: no-repeat;
+
+      &.nohasanimation {
+        margin-left: 0
+      }
+
+      &.animation {
+        transition:margin-left .3s ease;
+        margin-left: 0;
+
+        & .animation-top, & .animation-bottom {
+          transition:left .3s ease;
+          left: 0;
+        }
+
+        & .animation-body {
+          transition:margin-left .3s ease;
+          margin-left: 0;
+        }
+      }
+
+    }
+  }
+</style>