上传文件至 'components/zj-container'

components/zj-container/zj-fiex-column.vue

@@ -0,0 +1,145 @@
+<template>
+  <view
+    :class="{
+      'zj-page-container': true,
+      'zj-page-container-column': direction === 'column'
+    }"
+    :style="{
+      width,
+      height,
+      background
+    }"
+  >
+    <slot name="before"></slot>
+    <view :class="['zj-page-fill', zjPageFillClass]">
+      <view class="zj-page-fill-absolute">
+        <template v-if="scroll">
+          <scroll-view
+            class="zj-page-fill-scroll"
+            scroll-y
+            enable-flex
+            @scrolltoupper="
+              (...p) => {
+                $emit('scrolltoupper', p)
+              }
+            "
+            @scrolltolower="
+              (...p) => {
+                $emit('scrolltolower', p)
+              }
+            "
+            @scroll="
+              (...p) => {
+                $emit('scroll', p)
+              }
+            "
+            @refresherpulling="
+              (...p) => {
+                $emit('refresherpulling', p)
+              }
+            "
+            @refresherrefresh="
+              (...p) => {
+                $emit('refresherrefresh', p)
+              }
+            "
+            @refresherrestore="
+              (...p) => {
+                $emit('refresherrestore', p)
+              }
+            "
+            @refresherabort="
+              (...p) => {
+                $emit('refresherabort', p)
+              }
+            "
+            :refresher-enabled="refresherEnabled"
+            :refresher-triggered="refresherTriggered"
+          >
+            <slot></slot>
+          </scroll-view>
+        </template>
+        <template v-else>
+          <slot></slot>
+        </template>
+      </view>
+    </view>
+    <slot name="after"></slot>
+  </view>
+</template>
+
+<script>
+export default {
+  props: {
+    background: {
+      type: String,
+      default: ''
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '100%'
+    },
+    direction: {
+      type: String,
+      default: 'column'
+    },
+    scroll: {
+      type: Boolean,
+      default: true
+    },
+    zjPageFillClass: {
+      type: String,
+      default: ''
+    },
+    refresherEnabled: {
+      type: Boolean,
+      default: false
+    },
+    refresherTriggered: {
+      type: Boolean,
+      default: false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.zj-page-container {
+  display: flex;
+  display: -webkit-flex;
+  box-sizing: border-box;
+}
+
+.zj-page-container-row {
+  flex-direction: row;
+}
+
+.zj-page-container-column {
+  flex-direction: column;
+}
+
+.zj-page-fill {
+  box-sizing: border-box;
+  flex: 1;
+  overflow: hidden;
+  position: relative;
+
+  .zj-page-fill-absolute {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  }
+
+  .zj-page-fill-scroll {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+  }
+}
+</style>

components/zj-container/zj-fiex-row.vue

@@ -0,0 +1,144 @@
+<template>
+  <view
+    :class="{
+      'zj-page-container': true,
+      'zj-page-container-row': direction === 'row'
+    }"
+    :style="{
+      width,
+      height,
+      background
+    }"
+  >
+    <slot name="before"></slot>
+    <view :class="['zj-page-fill', zjPageFillClass]">
+      <view class="zj-page-fill-absolute">
+        <template v-if="scroll">
+          <scroll-view
+            class="zj-page-fill-scroll"
+            scroll-y
+            scroll-x
+            enable-flex
+            @scrolltoupper="
+              (...p) => {
+                $emit('scrolltoupper', p)
+              }
+            "
+            @scrolltolower="
+              (...p) => {
+                $emit('scrolltolower', p)
+              }
+            "
+            @scroll="
+              (...p) => {
+                $emit('scroll', p)
+              }
+            "
+            @refresherpulling="
+              (...p) => {
+                $emit('refresherpulling', p)
+              }
+            "
+            @refresherrefresh="
+              (...p) => {
+                $emit('refresherrefresh', p)
+              }
+            "
+            @refresherrestore="
+              (...p) => {
+                $emit('refresherrestore', p)
+              }
+            "
+            @refresherabort="
+              (...p) => {
+                $emit('refresherabort', p)
+              }
+            "
+          >
+            <slot></slot>
+          </scroll-view>
+        </template>
+        <template v-else>
+          <slot></slot>
+        </template>
+      </view>
+    </view>
+    <slot name="after"></slot>
+  </view>
+</template>
+
+<script>
+export default {
+  props: {
+    background: {
+      type: String,
+      default: ''
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '100%'
+    },
+    direction: {
+      type: String,
+      default: 'column'
+    },
+    scroll: {
+      type: Boolean,
+      default: true
+    },
+    zjPageFillClass: {
+      type: String,
+      default: ''
+    },
+    refresherEnabled: {
+      type: Boolean,
+      default: false
+    },
+    refresherTriggered: {
+      type: Boolean,
+      default: false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.zj-page-container {
+  display: flex;
+  display: -webkit-flex;
+  box-sizing: border-box;
+}
+
+.zj-page-container-row {
+  flex-direction: row;
+}
+
+.zj-page-container-column {
+  flex-direction: column;
+}
+
+.zj-page-fill {
+  box-sizing: border-box;
+  flex: 1;
+  overflow: hidden;
+  position: relative;
+
+  .zj-page-fill-absolute {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  }
+
+  .zj-page-fill-scroll {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+  }
+}
+</style>

components/zj-container/zj-page-container.vue

@@ -0,0 +1,25 @@
+<template>
+  <view class="page-bottom" :style="{ background }">
+    <slot></slot>
+  </view>
+</template>
+
+<script>
+export default {
+  props: {
+    background: {
+      type: String,
+      default: ''
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.page-bottom {
+  width: 100%;
+  height: 100vh;
+  box-sizing: border-box;
+  padding-bottom: env(safe-area-inset-bottom);
+}
+</style>

components/zj-container/zj-page-layout.vue

@@ -0,0 +1,134 @@
+<template>
+  <view class="app-container" :class="hasFooter || isTabbar ? '':'pb'"
+    :style="{background: bgColor, height: 'calc(100vh - ' + aHeight + 'px)'}">
+    <u-loading-page color="#333333" fontSize="17" icon-size="44" :loading="isLoading"></u-loading-page>
+
+    <block v-if="!isLoading">
+      <view class="header-container">
+        <slot name="header"></slot>
+      </view>
+      <view class="content-container">
+        <template v-if="isScroll">
+          <scroll-view scroll-y enable-flex refresher-enabled style="width: 100%; height: 100%; box-sizing: border-box;"
+            :refresher-background="refresherBackground" @scrolltoupper="(...p)=>{$emit('scrolltoupper',p)}"
+            @scrolltolower="(...p)=>{$emit('scrolltolower',p)}" @scroll="(...p)=>{$emit('scroll',p)}"
+            @refresherpulling="(...p)=>{$emit('refresherpulling',p)}"
+            @refresherrefresh="(...p)=>{$emit('refresherrefresh',p)}"
+            @refresherrestore="(...p)=>{$emit('refresherrestore',p)}"
+            @refresherabort="(...p)=>{$emit('refresherabort',p)}" :refresher-triggered="refresherTriggered">
+            <slot></slot>
+          </scroll-view>
+        </template>
+        <template v-else>
+          <view style="width: 100%; height: 100%; box-sizing: border-box; overflow-y: scroll;">
+            <slot></slot>
+          </view>
+        </template>
+      </view>
+      <view class="footer-container" v-if="hasFooter">
+        <slot name="footer"></slot>
+      </view>
+    </block>
+  </view>
+</template>
+
+<script>
+  export default {
+    props: {
+      bgColor: {
+        type: String,
+        default: '#F7F8FF',
+      },
+      refresherBackground: {
+        type: String,
+        default: '#F7F8FF',
+      },
+      hasFooter: {
+        type: Boolean,
+        default: false,
+      },
+      isScroll: {
+        type: Boolean,
+        default: false,
+      },
+      refresherTriggered: {
+        type: Boolean,
+        default: false,
+      },
+      isLoading: {
+        type: Boolean,
+        default: false,
+      },
+      isWxCustomPage: {
+        type: Boolean,
+        default: false,
+      },
+    },
+
+    computed: {
+      isTabbar() {
+        let pages = getCurrentPages();
+        if (pages.length > 0) {
+          let prevPage = pages[pages.length - 1];
+          if (prevPage.route === 'pages/index/index' || prevPage.route === 'pages/workorder/index' || prevPage.route ===
+            'pages/goods/index' || prevPage.route === 'pages/mine/index') {
+            return true;
+          } else {
+            return false;
+          }
+        }
+      },
+
+      aHeight() {
+        let num = 0;
+        // #ifdef H5
+        if(this.isWxCustomPage) {
+          num = 50;
+        } else if (this.isTabbar) {
+          num = 0+50;
+        } else {
+          num = 0;
+        }
+        // #endif
+        return num;
+      },
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  ::v-deep .u-loading-page {
+    z-index: 999999;
+  }
+
+  .app-container {
+    width: 100%;
+    height: 100vh;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+
+    &.pb {
+      padding-bottom: env(safe-area-inset-bottom);
+    }
+
+    .header-container {
+      flex-shrink: 0;
+    }
+
+    .content-container {
+      flex: 1;
+      height: 0;
+    }
+
+    .footer-container {
+      flex-shrink: 0;
+      padding-bottom: env(safe-area-inset-bottom);
+      background: #ffffff;
+      box-sizing: border-box;
+      box-shadow: $bottom-shadow;
+      position: relative;
+      z-index: 1;
+    }
+  }
+</style>